/* ==========================================================================
   GAK CONSTRUCTION — ABOUT PAGE  (Midnight Ocean & Rustic Ivory)
   File: public/css/about.css

   Drop-in replacement: every original class name is preserved.
   Relies on `.eyebrow`, `.feature-icon` and `.btn-solid` from gak-theme.css.

   SECTIONS
   01. Tokens
   02. Story section
   03. Story visual + caption
   04. Actions
   05. Mission / vision cards
   06. Local SEO block
   07. Motion
   08. Responsive
   09. Accessibility & print
   ========================================================================== */


/* ==========================================================================
   01. TOKENS
   ========================================================================== */
:root {
  --ab-navy:     #071A3A;
  --ab-navy-2:   #04101F;
  --ab-navy-3:   #102E5C;
  --ab-ocean:    #234B78;
  --ab-steel:    #669BC5;
  --ab-ice:      #B7D9EF;
  --ab-ice-50:   #DCEBF7;
  --ab-ivory:    #E5E0D7;
  --ab-ivory-50: #F5F2EB;
  --ab-sand:     #CFC7B8;
  --ab-stone:    #8C8A80;
  --ab-muted:    #5C6A7A;
  --ab-line:     rgba(35, 75, 120, .14);
  --ab-line-2:   rgba(35, 75, 120, .26);

  --ab-grad-navy: linear-gradient(150deg, #04101F 0%, #071A3A 38%, #234B78 100%);
  --ab-grad-frame: linear-gradient(150deg, rgba(102,155,197,.85), rgba(183,217,239,.35) 42%, rgba(35,75,120,.15));

  --ab-e1: 0 1px 2px rgba(7,26,58,.06), 0 2px 6px rgba(7,26,58,.05);
  --ab-e2: 0 4px 10px -2px rgba(7,26,58,.10), 0 12px 24px -12px rgba(7,26,58,.16);
  --ab-e3: 0 10px 24px -8px rgba(7,26,58,.18), 0 30px 60px -30px rgba(7,26,58,.30);
  --ab-e4: 0 18px 40px -12px rgba(7,26,58,.26), 0 50px 90px -40px rgba(7,26,58,.40);
  --ab-bevel: inset 0 1px 0 rgba(255,255,255,.9);

  --ab-ease: cubic-bezier(.16, 1, .3, 1);

  --ab-tex-plaster: url("../img/textures/plaster.jpg");
  --ab-tex-denim:   url("../img/textures/denim.jpg");

  --ab-grain: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.55'/%3E%3C/svg%3E");
}


/* ==========================================================================
   02. STORY SECTION
   ========================================================================== */
.gak-about-story {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(52px, 7vw, 96px) 0;
  background: linear-gradient(180deg, #F8F6F0 0%, var(--ab-ivory-50) 55%, #EFEAE1 100%);
}

/* ivory plaster */
.gak-about-story::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--ab-tex-plaster) center/cover no-repeat;
  opacity: .4;
  mix-blend-mode: multiply;
  filter: contrast(.92) brightness(1.07);
  mask-image: linear-gradient(180deg, transparent, #000 16%, #000 90%);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 16%, #000 90%);
}

/* drifting aura behind the photo */
.gak-about-story::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -8%;
  bottom: -12%;
  width: 40vw;
  height: 40vw;
  max-width: 620px;
  max-height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(102, 155, 197, .26), transparent 66%);
  filter: blur(48px);
  pointer-events: none;
  animation: abDrift 24s var(--ab-ease) infinite alternate;
}

.gak-about-story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(30px, 5vw, 65px);
}

/* ---- copy ---- */
.gak-about-story-content { min-width: 0; }

.gak-about-story-content h2 {
  margin: 15px 0 25px;
  color: var(--ab-navy);
  font-size: clamp(32px, 4vw, 54px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.gak-about-story-content > p {
  margin: 0 0 16px;
  color: var(--ab-muted);
  font-size: clamp(.94rem, 1.05vw, 1rem);
  line-height: 1.88;
}
.gak-about-story-content > p:last-of-type { margin-bottom: 0; }

/* thin ice rule under the copy, before the buttons */
.gak-about-story-content > p:last-of-type::after {
  content: "";
  display: block;
  width: 84px;
  height: 3px;
  margin-top: 26px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--ab-steel), rgba(183, 217, 239, 0));
}


/* ==========================================================================
   03. STORY VISUAL + CAPTION
   ========================================================================== */
.gak-about-story-visual {
  position: relative;
  min-height: 470px;
  overflow: hidden;
  border-radius: 22px;
  background: var(--ab-ivory);
  box-shadow: var(--ab-e4);
  isolation: isolate;
}

/* hairline frame over the photo */
.gak-about-story-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(7,26,58,.16), transparent 26%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
  pointer-events: none;
}

.gak-about-story-visual > img {
  display: block;
  width: 100%;
  height: 470px;
  object-fit: cover;
  filter: saturate(1.1) contrast(1.03) brightness(1.02);
  transition: transform 1.1s var(--ab-ease), filter .6s var(--ab-ease);
}
.gak-about-story-visual:hover > img {
  transform: scale(1.045);
  filter: saturate(1.16) contrast(1.05) brightness(1.05);
}

/* navy scrim + caption instead of flat green */
.gak-about-image-caption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(20px, 2.4vw, 30px);
  background: linear-gradient(0deg, rgba(4, 16, 31, .94) 12%, rgba(7, 26, 58, .62) 52%, rgba(7, 26, 58, 0));
}

.gak-about-image-caption span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ab-ice);
  font-size: .69rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.gak-about-image-caption span::before {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
  opacity: .75;
}

.gak-about-image-caption strong {
  color: #fff;
  font-size: clamp(1.05rem, 1.5vw, 1.32rem);
  font-weight: 750;
  line-height: 1.4;
  letter-spacing: -.015em;
  text-shadow: 0 2px 12px rgba(4, 16, 31, .5);
}


/* ==========================================================================
   04. ACTIONS
   ========================================================================== */
.gak-about-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.gak-about-actions a {
  min-height: 52px;
  border-radius: 12px;
}


/* ==========================================================================
   05. MISSION / VISION CARDS
   ========================================================================== */
.gak-purpose-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 26px);
}

.gak-purpose-card {
  position: relative;
  min-height: 340px;
  overflow: hidden;
  padding: clamp(26px, 3.2vw, 42px);
  border: 1px solid var(--ab-line);
  border-radius: 20px;
  background: linear-gradient(180deg, #FFFFFF, #FBFAF6);
  box-shadow: var(--ab-e2), var(--ab-bevel);
  isolation: isolate;
  transition: transform .5s var(--ab-ease), box-shadow .5s var(--ab-ease),
              border-color .5s var(--ab-ease);
}
.gak-purpose-card:hover {
  transform: translateY(-5px);
  border-color: var(--ab-line-2);
  box-shadow: var(--ab-e4), var(--ab-bevel);
}

/* gradient top rule */
.gak-purpose-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  z-index: 2;
  background: linear-gradient(90deg, var(--ab-steel), rgba(183, 217, 239, .25));
  opacity: .9;
}

.gak-purpose-number {
  position: absolute;
  top: 14px;
  right: 24px;
  z-index: 0;
  color: transparent;
  font-size: clamp(64px, 6.4vw, 88px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.06em;
  -webkit-text-stroke: 1px rgba(35, 75, 120, .16);
  background: linear-gradient(180deg, rgba(183, 217, 239, .3), rgba(183, 217, 239, 0));
  -webkit-background-clip: text;
  background-clip: text;
  pointer-events: none;
  user-select: none;
}

.gak-purpose-card .feature-icon {
  position: relative;
  z-index: 1;
  margin-bottom: 22px;
}

.gak-purpose-card .eyebrow {
  position: relative;
  z-index: 1;
  display: inline-flex;
  margin-bottom: 12px;
}

.gak-purpose-card h3 {
  position: relative;
  z-index: 1;
  max-width: 430px;
  margin: 0 0 16px;
  color: var(--ab-navy);
  font-size: clamp(24px, 2.8vw, 34px);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.gak-purpose-card p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--ab-muted);
  font-size: .9rem;
  line-height: 1.86;
}

/* ---- dark variant ---- */
.gak-purpose-card-dark {
  border-color: rgba(102, 155, 197, .38);
  background:
    radial-gradient(90% 120% at 6% 0%, rgba(102, 155, 197, .45), transparent 62%),
    radial-gradient(80% 110% at 98% 104%, rgba(183, 217, 239, .2), transparent 60%),
    var(--ab-grad-navy);
  box-shadow: var(--ab-e4);
}

/* denim twill */
.gak-purpose-card-dark::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--ab-tex-denim) center/cover no-repeat;
  opacity: .24;
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.gak-purpose-card-dark::before {
  background: linear-gradient(90deg, var(--ab-ice), rgba(183, 217, 239, 0));
}

.gak-purpose-card-dark .gak-purpose-number {
  -webkit-text-stroke: 1px rgba(183, 217, 239, .4);
  background: linear-gradient(180deg, rgba(183, 217, 239, .34), rgba(183, 217, 239, 0));
  -webkit-background-clip: text;
  background-clip: text;
}

.gak-purpose-card-dark .feature-icon {
  border-color: rgba(183, 217, 239, .34);
  background: linear-gradient(165deg, rgba(255,255,255,.2), rgba(255,255,255,.06));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 14px 24px -16px rgba(0, 0, 0, .9);
  color: var(--ab-ice);
}
.gak-purpose-card-dark .feature-icon svg { stroke: var(--ab-ice); }

.gak-purpose-card-dark .eyebrow {
  border-color: rgba(183, 217, 239, .4);
  background: rgba(183, 217, 239, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
  color: #EAF4FC;
}
.gak-purpose-card-dark .eyebrow::before { background: var(--ab-ice); }

.gak-purpose-card-dark h3 { color: #fff; }

.gak-purpose-card-dark p { color: rgba(228, 239, 248, .8); }


/* ==========================================================================
   06. LOCAL SEO BLOCK
   ========================================================================== */
.gak-about-local {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(52px, 7vw, 96px) 0;
  background: linear-gradient(180deg, #EFEAE1, var(--ab-ivory-50) 45%, #F8F6F0);
}

.gak-about-local::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--ab-tex-plaster) center/cover no-repeat;
  opacity: .34;
  mix-blend-mode: multiply;
  filter: contrast(.92) brightness(1.08);
  mask-image: linear-gradient(180deg, transparent, #000 20%, #000 85%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 20%, #000 85%, transparent);
}

/* centered glow behind the copy */
.gak-about-local::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: min(90vw, 780px);
  height: 380px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(183, 217, 239, .34), transparent 68%);
  filter: blur(56px);
  pointer-events: none;
}

.gak-about-local-inner {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}

.gak-about-local-inner h2 {
  margin: 16px 0 22px;
  color: var(--ab-navy);
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.gak-about-local-inner p {
  margin: 0 auto 16px;
  max-width: 720px;
  color: var(--ab-muted);
  font-size: clamp(.94rem, 1.05vw, 1rem);
  line-height: 1.88;
}

.gak-about-local-inner .btn-solid {
  display: inline-flex;
  margin-top: 16px;
  min-height: 54px;
  border-radius: 12px;
}


/* ==========================================================================
   07. MOTION
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .gak-about-story-content,
  .gak-about-story-visual { animation: abRise .9s var(--ab-ease) both; }
  .gak-about-story-content { animation-delay: .05s; }
  .gak-about-story-visual { animation-delay: .18s; }

  .gak-purpose-card { animation: abRise .8s var(--ab-ease) both; }
  .gak-purpose-card:nth-child(1) { animation-delay: .1s; }
  .gak-purpose-card:nth-child(2) { animation-delay: .22s; }

  .gak-about-local-inner { animation: abRise .9s var(--ab-ease) both; }
}

@keyframes abRise {
  from { opacity: 0; transform: translateY(26px); filter: blur(5px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}

@keyframes abDrift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-2.5vw, -2vw, 0) scale(1.12); }
}


/* ==========================================================================
   08. RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
  .gak-about-story-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .gak-about-story-visual,
  .gak-about-story-visual > img {
    min-height: 350px;
    height: 350px;
  }

  .gak-purpose-card { padding: 30px; }

  /* copy first, photo second reads better stacked */
  .gak-about-story-visual { order: 2; }
  .gak-about-story-content { order: 1; }
}

@media (max-width: 600px) {
  .gak-about-story { padding: 46px 0; }

  .gak-about-story-content h2 { font-size: 33px; }

  .gak-about-story-content > p:last-of-type::after { margin-top: 20px; }

  .gak-about-story-visual,
  .gak-about-story-visual > img {
    min-height: 290px;
    height: 290px;
  }
  .gak-about-story-visual,
  .gak-about-story-visual::after { border-radius: 16px; }

  .gak-about-image-caption { padding: 20px; gap: 6px; }
  .gak-about-image-caption strong { font-size: 1.05rem; }

  .gak-purpose-grid { grid-template-columns: 1fr; }

  .gak-purpose-card {
    min-height: auto;
    padding: 26px 22px;
    border-radius: 16px;
  }

  .gak-purpose-number { font-size: 58px; top: 10px; right: 18px; }

  .gak-about-actions {
    flex-direction: column;
    gap: 10px;
    margin-top: 24px;
  }
  .gak-about-actions a {
    width: 100%;
    justify-content: space-between;
  }

  .gak-about-local { padding: 46px 0; }
}

@media (max-width: 380px) {
  .gak-about-story-content h2 { font-size: 29px; }
  .gak-purpose-card { padding: 22px 18px; }
}


/* ==========================================================================
   09. ACCESSIBILITY & PRINT
   ========================================================================== */
.gak-about-actions a:focus-visible,
.gak-about-local-inner .btn-solid:focus-visible,
.gak-about-story-visual a:focus-visible {
  outline: 2px solid var(--ab-steel);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .gak-about-story::after { animation: none; }

  .gak-about-story-content,
  .gak-about-story-visual,
  .gak-purpose-card,
  .gak-about-local-inner {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    filter: none !important;
  }

  .gak-purpose-card,
  .gak-about-story-visual > img { transition: none !important; }
}

@media (prefers-contrast: more) {
  .gak-purpose-card { border-width: 2px; }
  .gak-purpose-card p { color: #2B3A48; }
  .gak-purpose-card-dark { border-color: #B7D9EF; }
  .gak-purpose-card-dark p { color: #fff; }
  .gak-about-story-content > p,
  .gak-about-local-inner p { color: #2B3A48; }
  .gak-purpose-number { -webkit-text-stroke: 1px rgba(35, 75, 120, .45); }
}

@media print {
  .gak-about-story,
  .gak-about-local { padding: 8mm 0; background: #fff; }

  .gak-about-story::before,
  .gak-about-story::after,
  .gak-about-local::before,
  .gak-about-local::after,
  .gak-purpose-card-dark::after { display: none !important; }

  .gak-about-story-visual,
  .gak-purpose-card { box-shadow: none; border: 1px solid #ccc; }

  .gak-purpose-card-dark {
    color: #000;
    background: #fff !important;
    border: 1px solid #ccc;
  }
  .gak-purpose-card-dark h3 { color: #000; }
  .gak-purpose-card-dark p { color: #333; }
  .gak-about-actions,
  .gak-about-local-inner .btn-solid { display: none !important; }
}