/* =========================================================
   Cited by Default: shared styles (all pages)
   Built from Figma "Rafid Brand Identity" › Dev Handoff
   Breakpoints: 1440 base · ≥1680 (1920 frame) · ≤1199 (834 frame) · ≤699 (390 frame)
   ========================================================= */

/* ---------- Fonts ---------- */
@font-face { font-family: "Overused Grotesk"; src: url("../fonts/OverusedGrotesk-Roman.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Overused Grotesk"; src: url("../fonts/OverusedGrotesk-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Overused Grotesk"; src: url("../fonts/OverusedGrotesk-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Awesome Serif ET"; src: url("../fonts/AwesomeSerifItalic-SemiBoldExtraTall.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Awesome Serif R"; src: url("../fonts/AwesomeSerifItalic-SemiBoldRegular.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Bebas Neue"; src: url("../fonts/BebasNeue-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  --blue-900: #0c265f;
  --blue-700: #0e4887;
  --paper: #eae3c7;
  --sand: #ddd3b9;
  --gold: #e1cf84;
  --gold-2: #e3d084;
  --ink: #201e14;
  --text: #353226;
  --black: #18181b;
  --butter: #fff6de;
  --noise: url("../img/noise-256.webp"); /* 74 KB tile (was a 1.15 MB 1024px tile) */
  /* The overlay-blended noise, pre-rendered as plain alpha tiles (normal blending).
     mix-blend-mode layers over whole sections made iPhone scrolling stutter. */
  --grain-light: url("../img/grain-light.webp"); /* = noise at 50% overlay on paper */
  --grain-dark: url("../img/grain-dark.webp");   /* = noise at 15% overlay on the brand blues */
  --tex-dark: url("../img/tex-dark-512.webp");
  --tex-light: url("../img/tex-light-52-512.webp");
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --pad-x: 40px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: hidden; overscroll-behavior-y: none; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: "Overused Grotesk", system-ui, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg { display: block; max-width: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.nowrap { white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

/* ---------- Grain overlay (Figma: 1024px tile · overlay blend) ---------- */
.grain { position: relative; isolation: isolate; }
.grain::after {
  content: "";
  position: absolute; inset: 0;
  /* No background-attachment: fixed and no mix-blend-mode: both forced repaints on every scroll frame on phones */
  background: var(--grain-dark) 0 0 / 256px 256px repeat;
  opacity: min(1, calc(var(--grain, .15) / .15));
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}
.grain--50 { --grain: .5; }
@media (max-width: 699px) {
  :root { --tex-dark: url("../img/tex-dark-384.webp"); --tex-light: url("../img/tex-light-52-384.webp"); }
}
/* Grain on cream: the light tile is calibrated for 50% */
.paper::after, .grain--50::after, .intro__layer--about::after, .ah::after, .ar::after, .case-stat::after, .art-author::after, .art-sec--summary::after {
  background-image: var(--grain-light); opacity: min(1, calc(var(--grain, .5) / .5));
}

/* Paper (cream) wrapper: the page-level fill of every cream frame (#eae3c7 + 50% grain) */
.paper { background: var(--paper); }
.paper::after { z-index: 0; }
.paper > * { position: relative; z-index: 1; }

/* ---------- Type ---------- */
.serif { font-family: "Awesome Serif ET", serif; font-style: italic; font-weight: 600; letter-spacing: -.02em; }
.serif--reg { font-family: "Awesome Serif R", serif; }
.tx-dark, .tx-light {
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  /* line-height 1 plus the displacement filter clips the last pixels of the glyphs */
  padding-bottom: .14em; margin-bottom: -.14em;
}
.tx-dark { background-image: var(--tex-dark); background-color: var(--ink); background-size: cover; background-position: center; background-repeat: no-repeat; }
.tx-light { background-image: var(--tex-light); background-color: var(--sand); background-size: cover; background-position: center; background-repeat: no-repeat; background-blend-mode: multiply; }
.fill-word { color: color-mix(in srgb, var(--fill-ink, currentColor) calc(var(--lit, 0) * 100%), var(--fill-dim, transparent)); }
.fx-2 { filter: url(#tex-2); }
.fx-1 { filter: url(#tex-1); }
/* Phones/tablets: the feTurbulence roughness is barely visible at these sizes but re-renders on every
   scroll frame when the heading moves or fades (iPhone lag in the hero → about transition). */
@media (max-width: 1199px) { .fx-1, .fx-2 { filter: none; } }
.h-56, .h-64, .hero__title, .about__title, .method__title, .cta__title, .playbook__title { font-weight: 600; line-height: 1; letter-spacing: -.04em; }
.h-56 { font-size: 56px; }
.h-64 { font-size: 64px; }
.body { font-size: 16px; line-height: 1.5; color: var(--text); }

/* ---------- Buttons (Figma: Actions / Button) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 24px; border-radius: 24px;
  font-size: 16px; font-weight: 500; line-height: 1.5; white-space: nowrap;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.btn:active { transform: scale(.98); }
/* Not bookable yet: looks like the button it replaces, but muted and inert */
.btn--soon, .btn--soon:hover, .btn--soon:active { opacity: .55; cursor: default; pointer-events: none; transform: none; }
.btn--cream { background: var(--gold); color: #1a1a1a; }
.btn--cream:hover { background: #bcad86; }
.btn--blue { background: var(--blue-700); color: var(--sand); border-radius: 32px; }
.btn--blue:hover { background: var(--blue-900); }
.btn--dark-outline { border: 1px solid var(--black); color: var(--ink); }
.btn--dark-outline:hover { background: #000; color: #d2cab5; }
.btn--light-outline { border: 1px solid #fff; color: #fff; }
.btn--light-outline:hover { background: #fff; color: var(--black); }
.btn-row { display: flex; gap: 14px; align-items: center; justify-content: center; }

/* 404 */
.nf { min-height: 70vh; display: flex; flex-direction: column; align-items: center; gap: 64px; padding: 40px var(--pad-x) 80px; }
.nf__body { max-width: 560px; display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.nf__code { font-size: 20px; color: var(--blue-700); letter-spacing: .1em; }
@media (max-width: 699px) { .nf .h-64 { font-size: 40px; } .nf__btns { flex-direction: column; align-self: stretch; } }

/* ---------- Header on cream pages (Figma: Navigation / Header · Theme=Dark) ---------- */
.hdr { position: relative; z-index: 5; width: 100%; display: flex; align-items: center; justify-content: space-between; }
.hdr__logo img { width: 110.195px; height: 32.285px; }
.hdr__right { display: flex; align-items: center; gap: 24px; }
.hdr__links { display: flex; align-items: center; gap: 24px; }
.hdr__links a { color: #252525; font-size: 16px; font-weight: 500; line-height: 1.5; opacity: .45; transition: opacity .25s var(--ease); }
.hdr__links a:hover, .hdr__links a[aria-current] { opacity: 1; }
.hdr__actions { display: flex; align-items: center; gap: 16px; }
.hdr__menu { display: none; width: 44px; height: 44px; border-radius: 22px; align-items: center; justify-content: center; transition: background-color .25s var(--ease); }
.hdr__menu:hover { background: rgba(24, 24, 27, .06); }
.hdr__burger { display: none; width: 24px; height: 24px; }


/* =========================================================
   7 · FAQ: chat bubbles; answer droplet swells from the connector
   ========================================================= */
.faq { padding: 80px var(--pad-x); display: flex; flex-direction: column; align-items: center; gap: 46px; overflow: hidden; }
.faq__title { white-space: nowrap; }
.faq__list { width: 100%; max-width: 1360px; display: flex; flex-direction: column; gap: 24px; }
.qa { display: flex; flex-direction: column; gap: 24px; }
.q {
  position: relative; width: 736px; max-width: 100%;
  display: flex; align-items: center; gap: 24px; padding: 36px;
  background: var(--butter); border-radius: 24px; text-align: left;
  font-size: 20px; line-height: 1.5; color: #000;
  transition: margin .5s var(--ease-out), width .5s var(--ease-out), transform .3s var(--ease);
}
.q span { flex: 1 0 0; min-width: 0; }
.q:hover { transform: translateY(-2px); }
.q__icon { flex: 0 0 25px; width: 25px; height: 25px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25'%3E%3Cpath d='M11.22 1.06C11.47-.35 13.52-.35 13.77 1.06L15.12 8.82C15.21 9.36 15.63 9.78 16.17 9.87L23.93 11.22C25.35 11.47 25.35 13.52 23.93 13.77L16.17 15.12C15.63 15.21 15.21 15.63 15.12 16.17L13.77 23.93C13.52 25.35 11.47 25.35 11.22 23.93L9.87 16.17C9.78 15.63 9.36 15.21 8.82 15.12L1.06 13.77C-.35 13.52-.35 11.47 1.06 11.22L8.82 9.87C9.36 9.78 9.78 9.36 9.87 8.82L11.22 1.06Z' fill='%230E4887' fill-opacity='.5'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .5s var(--ease-out); }
.qa.is-open .q { width: 712px; margin-left: 40px; justify-content: space-between; }
.qa.is-open .q__icon { flex-basis: 19.748px; width: 19.748px; height: 19.748px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M16.57.38C18.41-.9 20.65 1.33 19.36 3.16L15.46 8.72C14.97 9.41 14.97 10.33 15.46 11.02L19.36 16.57C20.65 18.41 18.41 20.65 16.57 19.36L11.02 15.46C10.33 14.97 9.41 14.97 8.72 15.46L3.16 19.36C1.33 20.65-.9 18.41.38 16.57L4.28 11.02C4.77 10.33 4.77 9.41 4.28 8.72L.38 3.16C-.9 1.33 1.33-.9 3.16.38L8.72 4.28C9.41 4.77 10.33 4.77 11.02 4.28L16.57.38Z' fill='%230C265F'/%3E%3C/svg%3E"); transform: rotate(180deg); }
.q::before {
  content: ""; position: absolute; right: calc(100% - 2px); top: 50%; width: 400px; height: 30px; margin-top: -15px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-318 0 400 30'%3E%3Cpath d='M82 15H-318' stroke='%23FFF6DE' stroke-width='3'/%3E%3Cpath d='M81 0V14L-20.5 13.5C24.3 13.5 78.5 15.99 81 0Z' fill='%23FFF6DE'/%3E%3Cpath d='M81 30V16L-20.5 16.5C24.3 16.5 78.5 14 81 30Z' fill='%23FFF6DE'/%3E%3C/svg%3E") right center / 400px 30px no-repeat;
  transform-origin: right center; transform: scaleX(0);
  transition: transform .55s var(--ease-out);
  pointer-events: none;
}
.qa.is-open .q::before { transform: scaleX(1); }
.a {
  /* Shell only: bg lives on .a__fill so clip-path never eats ::after */
  position: relative; align-self: flex-end; margin-right: 40px;
  width: 739px; max-width: calc(100% - 40px); min-height: 177px;
  display: block; padding: 0; background: transparent; border: none;
  font-size: 20px; font-weight: 500; line-height: 1.5; color: #cfcfcf;
  transform-origin: 100% 50%;
}
.a__fill {
  position: relative;
  box-sizing: border-box;
  display: flex; align-items: center;
  width: 100%; min-height: 177px;
  padding: 24px 36px;
  background: transparent; border: 0; border-radius: 24px;
}
.a__fill::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--blue-700); border: 1px solid #ccc; border-radius: 24px;
  transform-origin: 100% 50%; transform: scale(.04, .17);
}
.a__fill > * { position: relative; z-index: 1; }
/* Answers are Markdown: paragraphs, bullet lists, links */
.a__text > * + * { margin-top: .6em; }
.a__text ul { padding-left: 1.2em; list-style: disc; }
.a__text li + li { margin-top: .35em; }
.a__text a { text-decoration: underline; text-underline-offset: 3px; }
.a::after {
  content: ""; position: absolute; left: calc(100% - 3px); top: 50%; width: 400px; height: 30px; margin-top: -15px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 30'%3E%3Cpath d='M0 15H400' stroke='%230E4887' stroke-width='3'/%3E%3Cpath d='M1 0V14L102.5 13.5C57.7 13.5 3.5 15.99 1 0Z' fill='%230E4887'/%3E%3Cpath d='M1 30V16L102.5 16.5C57.7 16.5 3.5 14 1 30Z' fill='%230E4887'/%3E%3C/svg%3E") left center / 400px 30px no-repeat;
  transform-origin: left center; transform: scaleX(0);
  pointer-events: none;
}
.a.reveal::after { animation: faq-line .48s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes faq-line {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
.a[hidden] { display: none; }
/* Entrance: soft rise (no scale on .a: that warped the tails) */
.pop { animation: faq-in .4s var(--ease-out) both; }
@keyframes faq-in {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: none; }
}
/* One pass: the line draws, and the bubble grows out of its tip. Transform only, so it stays on the GPU. */
.a.reveal .a__fill::before {
  animation: faq-liquid .7s cubic-bezier(.22, 1, .36, 1) .06s both;
}
@keyframes faq-liquid {
  from { transform: scale(.04, .17); }
  to { transform: scale(1, 1); }
}
.js .a__fill > * { opacity: 0; } /* only with JS: without it, answers show as plain text */
.a.reveal .a__fill > * { animation: faq-text .32s var(--ease-out) .58s both; }
@keyframes faq-text {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.js .faq:not(.is-in) .q, .js .faq:not(.is-in) .a { opacity: 0; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer { position: relative; }
.cta {
  --grain: .12;
  position: relative; overflow: hidden; height: 516px;
  display: flex; align-items: center; justify-content: center; padding: 0 36px;
  background: linear-gradient(180deg, var(--blue-900), var(--blue-700));
}
.cta__orn { position: absolute; top: -49px; width: 116px; height: 579px; z-index: 1; }
.cta__orn svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cta__orn--l { left: max(19px, calc((100% - 1360px) / 2)); }
.cta__orn--r { right: max(18px, calc((100% - 1360px) / 2)); transform: scaleX(-1); }
/* Travelling star: sized to the ornament's scale by site.js, moved with a transform animation */
.orn-star { position: absolute; left: 0; top: 0; width: var(--star-w, 36px); height: var(--star-h, 53px); opacity: 0; color: var(--blue-900); will-change: transform, opacity; pointer-events: none; }
.orn-star svg { display: block; width: 100%; height: 100%; overflow: visible; }
@media (prefers-reduced-motion: reduce) {
  .orn-star { opacity: 1; transform: translate(var(--star-x, 0px), var(--star-y, 0px)) translate(-50%, -50%); color: var(--blue-700); }
}
.cta__inner { position: relative; z-index: 2; width: 801px; display: flex; flex-direction: column; align-items: center; gap: 32px; text-align: center; }
.cta__title { font-size: 64px; margin-bottom: -16px; }
/* About-page CTA (Figma footer variant): Bebas Neue + serif, swapped for the default CTA on mobile */
.cta__title--meet { font-family: "Overused Grotesk", sans-serif; font-weight: 600; letter-spacing: -.04em; text-transform: none; }
.cta__title--meet .serif { font-family: "Awesome Serif ET", serif; font-style: italic; font-weight: 600; letter-spacing: -.02em; }
.cta__inner--alt { display: none; }
.cta__text { width: 535px; max-width: 100%; font-size: 16px; line-height: 1.5; color: #b8b8b8; }

.foot { position: relative; height: 442px; overflow: hidden; background: #3b3423; }
.foot__bg { position: absolute; inset: 0; overflow: hidden; }
.foot__bg img { position: absolute; left: 0; top: -325.96%; width: 100%; height: 439.36%; object-fit: cover; transform: translateY(var(--bg-y, 0px)); will-change: transform; }
.foot__mark { position: absolute; left: calc(50% + .5px); top: -70px; width: 1041px; height: 305px; transform: translate(-50%, var(--mark-y, 0px)); will-change: transform; }
.foot__mark img { position: absolute; left: -2.48%; top: -8.46%; width: 104.96%; height: 116.92%; }
.foot__mark-blur { filter: blur(12.9px); -webkit-mask-image: linear-gradient(180deg, #000 7.2%, transparent 58%); mask-image: linear-gradient(180deg, #000 7.2%, transparent 58%); }
.foot__mark-sharp { -webkit-mask-image: linear-gradient(180deg, transparent 7.2%, #000 58%); mask-image: linear-gradient(180deg, transparent 7.2%, #000 58%); }
/* Parallax as the footer comes into view: the wordmark sinks into place and the painting drifts the other way.
   Scroll timeline (compositor) where supported; site.js is the desktop fallback. */
@keyframes foot-mark-in { from { translate: 0 var(--mark-from, 110px); opacity: 0; } 55% { opacity: 1; } to { translate: 0 0; opacity: 1; } }
@keyframes foot-bg-in { from { translate: 0 var(--bg-from, -60px); } to { translate: 0 0; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .foot { view-timeline: --foot block; --mark-y: 0px !important; --bg-y: 0px !important; }
    .foot__mark { animation: foot-mark-in linear both; animation-timeline: --foot; animation-range: entry 0% entry 100%; }
    .foot__bg img { animation: foot-bg-in linear both; animation-timeline: --foot; animation-range: entry 0% entry 100%; }
  }
}
@media (max-width: 699px) { .foot { --mark-from: 70px; --bg-from: -40px; } }
.foot__links { position: absolute; left: 50%; top: 316px; transform: translateX(-50%); display: flex; gap: 14px; white-space: nowrap; font-size: 16px; line-height: 1.5; color: #ddd3b9; }
.foot__links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.foot__legal a:hover { text-decoration: underline; text-underline-offset: 3px; }
.foot__legal { position: absolute; left: 50%; top: 360px; transform: translateX(-50%); white-space: nowrap; font-size: 16px; line-height: 1.5; color: #ddd3b9; opacity: .5; }

/* =========================================================
   Mobile / tablet menu
   ========================================================= */
.menu { position: fixed; inset: 0; z-index: 100; }
.menu[hidden] { display: none; }
.menu__inner { position: absolute; inset: 0; background: linear-gradient(180deg, var(--blue-900), var(--blue-700)); padding: 40px 24px; display: flex; flex-direction: column; gap: 56px; overflow-y: auto; overscroll-behavior: contain; }
/* Open / close: site.js adds .is-open one frame after showing the menu, so the fade is always painted from its
   first frame. The panel fades, then the logo, links and button rise in turn. Opacity + transform only. */
.menu__inner { opacity: 0; transition: opacity .2s ease-in; will-change: opacity; }
.menu.is-open .menu__inner { opacity: 1; transition: opacity .34s cubic-bezier(.33, 1, .68, 1); }
.menu__top, .menu__links a, .menu__cta { opacity: 0; transform: translateY(14px); transition: opacity .15s ease-in, transform .2s ease-in; }
.menu.is-open :is(.menu__top, .menu__links a, .menu__cta) { opacity: 1; transform: none; transition: opacity .4s var(--ease-out) var(--d, 0s), transform .5s var(--ease-out) var(--d, 0s); }
.menu.is-open .menu__top { --d: .04s; }
.menu.is-open .menu__links a:nth-child(1) { --d: .08s; }
.menu.is-open .menu__links a:nth-child(2) { --d: .12s; }
.menu.is-open .menu__links a:nth-child(3) { --d: .16s; }
.menu.is-open .menu__links a:nth-child(4) { --d: .2s; }
.menu.is-open .menu__cta { --d: .22s; }
@media (prefers-reduced-motion: reduce) {
  .menu__inner, .menu__top, .menu__links a, .menu__cta { transition: none !important; transform: none !important; }
}
.menu__top { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 4; }
.menu__top .logo img { width: 83px; height: 24px; }
.menu__close { width: 24px; height: 24px; }
.menu__links { display: flex; flex-direction: column; gap: 20px; position: relative; z-index: 4; }
.menu__links a { font-size: 40px; font-weight: 600; letter-spacing: -.04em; line-height: 1; color: var(--sand); }
.menu__cta { align-self: flex-start; position: relative; z-index: 4; }

/* =========================================================
   Sticky liquid-glass navbar (partials/glass-nav.njk, site.js)
   Apple's "clear" Liquid Glass, for the web: almost no frost, a light tint for legibility, light bending at the
   rim (Chromium desktop: an edge-lens displacement map that site.js builds at the bar's exact size), a bright
   rim and a glare that follows the pointer. Slides in once the page header has scrolled away.
   Two tints: light (default) and .is-dark over the blue / dark sections.
   ========================================================= */
/* Room the glass bar takes at the top of the screen (its offset + height + a gap), per breakpoint. Anything that
   pins to the top while scrolling (article sidebars, the phone ASSBOT stack) starts below it. */
:root { --gnav-space: 82px; }
@media (min-width: 1680px) { :root { --gnav-space: 92px; } }
@media (max-width: 1199px) { :root { --gnav-space: 76px; } }
@media (max-width: 699px) { :root { --gnav-space: 66px; } }
.gnav {
  --gnav-top: 14px;
  position: fixed; left: 0; right: 0; top: var(--gnav-top); z-index: 90;
  display: flex; justify-content: center; padding: 0 var(--pad-x);
  pointer-events: none;
  opacity: 0; transform: translateY(calc(-100% - var(--gnav-top) - 8px));
  transition: transform .45s cubic-bezier(.4, 0, .2, 1), opacity .3s ease;
}
.gnav.is-on { opacity: 1; transform: none; transition: transform .6s var(--ease-out), opacity .35s ease; }
.gnav:not(.is-on) .gnav__bar { pointer-events: none; }
.gnav__bar {
  --glass-tint: rgba(255, 250, 235, .12);
  --glass-halo: rgba(250, 245, 228, .9);
  --glass-ink: #1f1d15;
  --rim-hi: rgba(255, 255, 255, .95);
  --rim-lo: rgba(255, 255, 255, .55);
  --mx: 30%;
  position: relative; pointer-events: auto;
  width: min(100%, 1120px); height: 52px;
  display: flex; align-items: center; gap: 24px;
  padding: 0 6px 0 22px; border-radius: 999px;
  color: var(--glass-ink);
  background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0) 50%), var(--glass-tint);
  /* Clear glass: a whisper of blur and a little extra colour from what's behind */
  -webkit-backdrop-filter: blur(3px) saturate(160%);
  backdrop-filter: blur(3px) saturate(160%);
  /* Rim: hairline all round, a bright top-left edge, a softer bottom-right edge, a faint inner glow, the shadow */
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .28),
    inset 1px 1px 1px -.5px var(--rim-lo),
    inset 0 0 14px rgba(255, 255, 255, .14),
    0 8px 28px -10px rgba(12, 38, 95, .28),
    0 1px 3px rgba(12, 38, 95, .08);
  transition: color .4s ease, background-color .4s ease;
}
/* Light. site.js runs a small spring simulation and writes: --la (angle the light comes from, for the rim),
   --lx / --ly (where it lands on the surface), --glint (0–1 strength), --sheen (a streak that slides as the page
   moves), --sx / --sy (the glass stretching and wobbling like liquid). Defaults are a still light, top left. */
.gnav__bar { --la: 300deg; --lx: 22%; --ly: -20%; --ex: 22%; --ey: 0%; --glint: .55; --rimk: 1; --sheen: 0px; transform: scale(var(--sx, 1), var(--sy, 1)); }
/* Surface: a soft glare where the light lands, and a faint streak that drifts with scrolling */
.gnav__shine {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(24% 80% at var(--ex) var(--ey), rgba(255, 255, 255, calc(.38 * var(--glint))), rgba(255, 255, 255, 0) 75%),
    radial-gradient(34% 150% at var(--lx) var(--ly), rgba(255, 255, 255, calc(.22 * var(--glint))), rgba(255, 255, 255, 0) 70%),
    linear-gradient(105deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, calc(.08 * var(--glint))) 48%, rgba(255, 255, 255, 0) 54%) var(--sheen) 0 / 200% 100% repeat-x;
  mix-blend-mode: overlay;
}
/* Rim: a 1.5px ring lit from the light's direction, with a weaker reflection on the far side, the way a
   rounded glass edge catches light. The conic gradient's bright lobe is centred on --la. */
.gnav__rim {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 1.5px;
  /* Lit lobe centred on --la, a weaker reflection opposite; --rimk evens it out when the light is mid-bar */
  --rb: calc(.22 + .1 * (1 - var(--rimk)));
  background: conic-gradient(from calc(var(--la) - 180deg),
    rgba(255, 255, 255, calc(var(--rb) + .12 * var(--rimk) * var(--glint))) 0deg,
    rgba(255, 255, 255, var(--rb)) 50deg,
    rgba(255, 255, 255, var(--rb)) 130deg,
    rgba(255, 255, 255, calc(var(--rb) + .5 * var(--rimk))) 180deg,
    rgba(255, 255, 255, var(--rb)) 230deg,
    rgba(255, 255, 255, var(--rb)) 310deg,
    rgba(255, 255, 255, calc(var(--rb) + .12 * var(--rimk) * var(--glint))) 360deg);
  opacity: calc(.55 + .35 * var(--glint));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.gnav__bar > :not(.gnav__shine):not(.gnav__rim) { position: relative; }
/* Over blue: a faint deep-blue tint, sand type, the light logo and the gold button */
.gnav.is-dark .gnav__bar {
  --glass-tint: rgba(12, 38, 95, .22);
  --glass-halo: rgba(12, 38, 95, .85);
  --glass-ink: var(--sand);
  --rim-hi: rgba(255, 255, 255, .7);
  --rim-lo: rgba(255, 255, 255, .3);
}
.gnav__logo { position: relative; flex: none; display: block; width: 104px; height: 30px; }
/* Optical centring: the "by" swash hangs well below the lettering, so a box-centred logo reads high (its letters
   sat ~7px above the nav text). Lowered so "Cited Default" shares the links' baseline; scales with the logo. */
.gnav__logo img { transform: translateY(14%); }
.gnav__logo img { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .4s ease; }
.gnav__logo-on-dark, .gnav.is-dark .gnav__logo-on-light { opacity: 0; }
.gnav.is-dark .gnav__logo-on-dark { opacity: 1; }
.gnav__links { flex: 1; display: flex; justify-content: center; gap: 32px; }
.gnav__links a { font-size: 15px; font-weight: 500; line-height: 1.5; opacity: .75; transition: opacity .25s var(--ease); }
/* Clear glass shows what's behind it, so the type carries a soft halo in the glass tint to stay readable */
.gnav__links a, .gnav__logo { text-shadow: 0 0 6px var(--glass-halo), 0 0 14px var(--glass-halo); }
.gnav__logo img { filter: drop-shadow(0 0 5px var(--glass-halo)); }
.gnav__links a:hover, .gnav__links a[aria-current] { opacity: 1; }
.gnav__cta { flex: none; padding: 7px 18px; font-size: 15px; border-radius: 999px; background: var(--blue-700); color: var(--sand); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
.gnav__cta:hover { background: var(--blue-900); }
.gnav.is-dark .gnav__cta { background: var(--gold); color: #1a1a1a; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); }
.gnav.is-dark .gnav__cta:hover { background: #bcad86; }
.gnav__menu { display: none; flex: none; width: 38px; height: 38px; border-radius: 19px; align-items: center; justify-content: center; transition: background-color .25s var(--ease); }
.gnav__menu:hover { background: rgba(127, 127, 127, .16); }
/* Per item: site.js marks each item by what's directly behind it, so a bar spanning cream and blue reads right
   across its whole length. Light type over blue, dark type over cream; the logo and the button swap with them. */
.gnav__logo, .gnav__links a, .gnav__menu { transition: color .3s ease, opacity .25s var(--ease); }
.gnav .gi-dark { color: var(--butter); --glass-halo: rgba(12, 38, 95, .8); }
.gnav .gi-light { color: #1f1d15; --glass-halo: rgba(250, 245, 228, .9); }
.gnav .gnav__logo.gi-dark .gnav__logo-on-light, .gnav .gnav__logo.gi-light .gnav__logo-on-dark { opacity: 0; }
.gnav .gnav__logo.gi-dark .gnav__logo-on-dark, .gnav .gnav__logo.gi-light .gnav__logo-on-light { opacity: 1; }
.gnav .gnav__cta.gi-light { background: var(--blue-700); color: var(--sand); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
.gnav .gnav__cta.gi-light:hover { background: var(--blue-900); }
.gnav .gnav__cta.gi-dark { background: var(--gold); color: #1a1a1a; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); }
.gnav .gnav__cta.gi-dark:hover { background: #bcad86; }
/* Chromium on a desktop: the rim bends the light (edge lens built by site.js). Safari ignores SVG backdrop
   filters, and phones skip it to keep scrolling smooth. */
.gnav--refract .gnav__bar { -webkit-backdrop-filter: url(#glass-lens) saturate(160%); backdrop-filter: url(#glass-lens) saturate(160%); }
/* Accessibility: reduced transparency or more contrast get a solid bar; no backdrop support gets one too */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .gnav__bar, .gnav--refract .gnav__bar { --glass-tint: rgba(234, 227, 199, .96); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .gnav.is-dark .gnav__bar { --glass-tint: rgba(12, 38, 95, .96); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .gnav__bar { --glass-tint: rgba(234, 227, 199, .94); }
  .gnav.is-dark .gnav__bar { --glass-tint: rgba(12, 38, 95, .92); }
}
@media (min-width: 1680px) {
  .gnav { --gnav-top: 18px; }
  .gnav__bar { width: min(100%, 1400px); height: 58px; padding: 0 7px 0 28px; }
  .gnav__logo { width: 120px; height: 35px; }
  .gnav__links { gap: 40px; }
  .gnav__links a, .gnav__cta { font-size: 17px; }
  .gnav__cta { padding: 8px 22px; }
}
/* Tablet: logo, button and menu, like the page header at this size */
@media (max-width: 1199px) {
  .gnav__bar { width: min(100%, 760px); height: 50px; padding: 0 6px 0 20px; gap: 10px; }
  .gnav__links { display: none; }
  .gnav__cta { margin-left: auto; }
  .gnav__menu { display: flex; }
}
/* Phone: logo and menu only, a slim pill close to the edges */
@media (max-width: 699px) {
  .gnav { --gnav-top: 10px; padding: 0 12px; }
  .gnav__bar { width: 100%; height: 46px; padding: 0 4px 0 18px; }
  .gnav__logo { width: 80px; height: 23px; }
  .gnav__cta { display: none; }
  .gnav__menu { margin-left: auto; width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .gnav, .gnav.is-on { transition: opacity .2s linear; transform: none; }
}

@media (min-width: 1680px) {
  :root { --pad-x: 80px; }
  .hdr__logo img { width: 147px; height: auto; }
  .hdr__links a, .hdr__cta { font-size: 20px; }
  /* Pages without the CTA block (Work with me, booking) keep the 442px footer at 1920 in Figma */
  .footer--plain .foot { height: 442px; }
  .footer--plain .foot__bg img { top: -325.96%; height: 439.36%; }
  .footer--plain .foot__mark { top: -70px; width: 1041px; height: 305px; }
  .footer--plain .foot__mark img { left: -2.48%; top: -8.46%; width: 104.96%; height: 116.92%; }
  .footer--plain .foot__links { top: 316px; font-size: 16px; }
  .footer--plain .foot__legal { top: 360px; font-size: 16px; }
  /* Figma footer "Large" (1920): body, buttons and links at 20px */
  .cta__text, .cta .btn, .foot__links, .foot__legal { font-size: 20px; }
  .faq { padding: 80px; gap: 80px; }
  .faq__title { font-size: 96px; }
  .foot { height: 704px; }
  .foot__bg img { top: -241.36%; height: 363.64%; }
  .foot__mark { top: -160px; width: 1747px; height: 512px; }
  .foot__mark img { left: -1.48%; top: -5.04%; width: 102.96%; height: 110.08%; }
  .foot__links { top: 578px; }
  .foot__legal { top: 622px; }
}

@media (max-width: 1199px) {
  :root { --pad-x: 48px; }
  .hdr__right { gap: 16px; }
  .hdr:not(.hdr--tablet-links) .hdr__links { display: none; }
  .hdr:not(.hdr--tablet-links) .hdr__menu { display: flex; }
  .hdr--tablet-links .hdr__right { gap: 24px; }
  /* faq */
  .faq { padding: 80px var(--pad-x); }
  .faq__list { gap: 24px; }
  .qa.is-open .q { margin-left: 0; width: 712px; }
  .a { margin-right: 0; max-width: 100%; }

  /* footer */
  .cta__inner { width: 756px; }
  .foot__mark { top: -51px; width: 815px; height: 239px; }
  .foot__mark img { left: -3.17%; top: -10.79%; width: 106.34%; height: 121.58%; }
  .foot__links { top: 319px; }
}

@media (max-width: 699px) {
  :root { --pad-x: 24px; }
  .cta__inner--meet { display: none; }
  .hdr__right { display: none; }
  .hdr__burger { display: block; }
  .hdr__logo img { width: 83px; height: 24px; }
  .cta__inner--alt { display: flex; }
  .faq { padding: 40px var(--pad-x); gap: 46px; }
  .faq__title { font-size: 36px; white-space: normal; text-align: center; }
  .faq__list { gap: 12px; }
  .qa { gap: 12px; }
  .q, .qa.is-open .q { width: 100%; padding: 20px; font-size: 16px; }
  .a { width: 100%; min-height: 0; padding: 0; font-size: 16px; border: 0; }
  .a__fill { min-height: 0; padding: 20px; font-size: 16px; border: 0; }

  .cta { padding: 0 36px; }
  .cta__inner { width: 100%; }
  .cta__title { font-size: 36px; }
  .cta__text { font-size: 14px; }
  .cta__btns { flex-direction: column; align-items: stretch; }
  .cta__orn { top: 0; width: 62px; height: 517px; }
  .cta__orn--l { left: 8px; }
  .cta__orn--r { left: 323px; right: auto; left: calc(100% - 67px); }
  .foot { height: 297px; }
  .foot__bg img { top: 0; height: 100%; }
  /* Wordmark fits the screen on phones (client feedback: it was cropped on both sides and cut by the CTA edge).
     One sharp copy, no blur/mask layer and no parallax, so the footer doesn't stutter on scroll. */
  .foot__mark { top: 20px; width: calc(100% - 32px); height: auto; aspect-ratio: 1093 / 357; transform: translateX(-50%); will-change: auto; }
  .foot__mark img { left: 0; top: 0; width: 100%; height: 100%; }
  .foot__mark-blur { display: none; }
  .foot__mark-sharp { -webkit-mask-image: none; mask-image: none; }
  .foot__bg img { transform: none; will-change: auto; }
  .foot__links { top: 193px; font-size: 14px; }
  .foot__legal { top: 225px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .faq *, .faq .q::before, .faq .a::after, .faq .a__fill::before {
    transition: none !important; animation: none !important; opacity: 1 !important; transform: none !important; clip-path: none !important;
  }
}