/* ============================================================
   MHFL · meh-fill · محفل
   Editorial dictionary · dark
   ============================================================ */

:root{
  --bg:        #0A0711;
  --bg-2:      #0E0A17;
  --surface:   #16111F;
  --surface-2: #1C1626;
  --ink:       #F6F3FA;
  --ink-2:     #BEB6CD;
  --muted:     #7C7390;
  --line:      rgba(255,255,255,.085);
  --line-2:    rgba(255,255,255,.16);

  --accent:    #7C4DBC;
  --accent-2:  color-mix(in oklab, var(--accent), white 30%);
  --accent-soft: color-mix(in oklab, var(--accent), transparent 60%);

  --glow: .62;          /* ambient aurora intensity */

  --f-disp:  "Archivo", system-ui, sans-serif;
  --f-sans:  "Archivo", system-ui, sans-serif;
  --f-mono:  "Space Mono", ui-monospace, monospace;
  --f-serif: "Newsreader", Georgia, serif;
  --f-cormo: "Cormorant Garamond", Georgia, serif;
  --f-rkl:   "DM Serif Display", "Cormorant Garamond", serif;
  --f-urdu:  "Noto Nastaliq Urdu", serif;
  --f-deva:  "Noto Sans Devanagari", sans-serif;

  --maxw: 1180px;
  --gutter: clamp(22px, 5.2vw, 80px);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; color-scheme:dark; }
body{
  font-family:var(--f-sans);
  background:var(--bg); color:var(--ink);
  line-height:1.5; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility; overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; background:none; border:none; }
::selection{ background:var(--accent); color:#fff; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.eyebrow{ font-family:var(--f-sans); font-weight:700; font-size:clamp(21px,2.5vw,26px); letter-spacing:-.02em; color:var(--ink); }

/* reveal-on-scroll (transform only · content always visible if unanimated) */
.reveal{ transform:translateY(28px); transition:transform .85s cubic-bezier(.2,.7,.15,1); }
.reveal.in{ transform:none; }
.reveal.d1{ transition-delay:.06s; }
.reveal.d2{ transition-delay:.12s; }
.reveal.d3{ transition-delay:.18s; }
@media (prefers-reduced-motion: reduce){ .reveal{ transform:none; transition:none; } }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px var(--gutter);
  transition:background .35s ease, border-color .35s ease, padding .3s ease;
  border-bottom:1px solid transparent;
  /* own compositing layer: fixed chrome must never repaint with the page */
  transform:translateZ(0); will-change:transform;
}
/* solid bar, no backdrop-filter: a blurred fixed bar re-samples the animated
   aurora every scroll frame, which drops frames and reads as a flicker */
.nav.scrolled{
  background:var(--bg);
  border-bottom-color:var(--line);
  box-shadow:0 10px 30px -22px rgba(0,0,0,.9);
  padding-top:14px; padding-bottom:14px;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--f-sans); font-size:14px; font-weight:600; letter-spacing:.01em;
  padding:13px 22px; border-radius:10px; border:1px solid transparent;
  transition:background .24s ease, color .24s ease, border-color .24s ease;
}
.btn--ghost{ color:var(--ink); border-color:var(--line-2); background:color-mix(in oklab, var(--surface), transparent 30%); }
.btn--ghost:hover{ color:var(--ink); border-color:rgba(255,255,255,.3); }
.btn--solid{ color:#fff; background:var(--accent); border-color:var(--accent); }
.btn--solid:hover{ background:var(--accent-2); border-color:var(--accent-2); }
.btn:active{ transform:translateY(1px); }
.btn--block{ width:100%; padding:15px; }

/* nav contact: quiet editorial text link */
.nav__contact{
  font-family:var(--f-sans); font-size:14px; font-weight:500; letter-spacing:.02em;
  color:var(--ink-2); padding:10px 6px; margin:-10px -6px;
  transition:color .18s ease;
}
.nav__contact:hover{
  color:var(--ink);
  text-decoration:underline; text-decoration-thickness:1px;
  text-underline-offset:6px; text-decoration-color:var(--line-2);
}
.nav__contact:focus-visible{ outline:1px solid var(--accent-2); outline-offset:4px; border-radius:2px; }

.logo-mark{ display:block; transition:opacity .22s ease; }
.logo-mark img{ display:block; height:36px; width:auto; }
.logo-mark:hover{ opacity:.7; }

/* ============================================================
   HERO · dictionary entry
   ============================================================ */
.hero{
  position:relative; min-height:100svh; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  padding:120px var(--gutter) 76px; text-align:center;
  contain:paint;
}
/* JS parallax writes transform here every scroll frame; keep it 3D + hinted so
   the three blurred blobs stay on the GPU instead of re-rasterizing per frame */
.aurora{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:var(--glow); transform:translate3d(0,0,0); will-change:transform; }
.aurora span{ position:absolute; border-radius:50%; filter:blur(70px); will-change:transform; backface-visibility:hidden; }
.aurora .a1{ width:46vmax; height:46vmax; left:50%; top:34%; transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, color-mix(in oklab,var(--accent),transparent 30%), transparent 70%);
  animation:drift1 18s ease-in-out infinite; }
.aurora .a2{ width:30vmax; height:30vmax; left:24%; top:64%;
  background:radial-gradient(closest-side, color-mix(in oklab,#3D6CE0,transparent 55%), transparent 70%);
  animation:drift2 22s ease-in-out infinite; }
.aurora .a3{ width:26vmax; height:26vmax; right:18%; top:22%;
  background:radial-gradient(closest-side, color-mix(in oklab,var(--accent),transparent 50%), transparent 70%);
  animation:drift3 26s ease-in-out infinite; }
@media (max-width:760px){
  .aurora span{ filter:blur(46px); }
  .aurora .a2{ left:8%; }
  .aurora .a3{ right:4%; }
}
@keyframes drift1{ 0%,100%{ transform:translate(-50%,-50%);} 50%{ transform:translate(-54%,-46%);} }
@keyframes drift2{ 0%,100%{ transform:translate(0,0);} 50%{ transform:translate(40px,-30px);} }
@keyframes drift3{ 0%,100%{ transform:translate(0,0);} 50%{ transform:translate(-34px,26px);} }
.hero__grain{ position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); }

.hero__col{ position:relative; z-index:2; width:100%; max-width:680px; display:flex; flex-direction:column; align-items:center; }
.hero__title{
  font-family:var(--f-disp); font-weight:800;
  font-size:clamp(58px,10vw,116px); letter-spacing:-.045em; line-height:.86;
  color:var(--ink);
}

/* phonetic box */
.entry{
  margin-top:clamp(18px,2.6vw,30px);
  display:inline-flex; flex-direction:column; gap:3px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:16px 24px;
  font-family:var(--f-mono); text-align:left;
  box-shadow:0 24px 50px -38px rgba(0,0,0,.8);
}
.entry__l1{ display:flex; align-items:center; justify-content:space-between; gap:18px; font-size:clamp(15px,2vw,17px); color:var(--ink); letter-spacing:.01em; white-space:nowrap; }
.entry__l2{ font-size:clamp(14px,1.9vw,16px); color:var(--ink-2); padding-left:.2em; display:flex; align-items:center; }
.entry .pipe{ color:var(--muted); margin:0 .55ch; }
.entry .pos{ font-family:var(--f-serif); font-style:italic; color:var(--accent-2); font-size:1.06em; }
.entry .ur{ font-family:var(--f-urdu); font-size:1.4em; line-height:1; vertical-align:-.28em; }
.say{ display:inline-grid; place-items:center; width:26px; height:26px; flex:none; border-radius:50%; color:var(--muted); border:1px solid var(--line); transition:color .2s, border-color .2s; }
.say:hover{ color:var(--accent-2); border-color:var(--line-2); }
.say svg{ width:13px; height:13px; }
.say.ping{ animation:sayping .5s ease; }
@keyframes sayping{ 0%{ transform:scale(1);} 40%{ transform:scale(1.2);} 100%{ transform:scale(1);} }

/* hand-drawn scribble underline */
.scrib{ position:relative; display:inline-block; }
.scrib-line{ position:absolute; left:-3%; width:106%; bottom:-.24em; height:.42em; overflow:visible; pointer-events:none; }
.scrib--lg .scrib-line{ bottom:-.1em; height:.5em; }
.scrib-line path{ fill:none; stroke:var(--accent); stroke-width:3; stroke-linecap:round; vector-effect:non-scaling-stroke; }

/* definitions */
.defs{ margin-top:clamp(22px,2.8vw,34px); width:min(560px,100%); display:flex; flex-direction:column; gap:14px; text-align:left; }
.def{ display:grid; grid-template-columns:auto 1fr; gap:15px; align-items:start; }
.def__n{
  width:26px; flex:none; margin-top:1px; text-align:center;
  font-family:var(--f-cormo); font-style:italic; font-weight:500;
  font-size:24px; line-height:1.1; color:var(--accent-2);
  user-select:none;
}
.def__t{ font-size:clamp(16px,2.1vw,19px); color:var(--ink-2); line-height:1.5; }
.def__t b{ color:var(--ink); font-weight:700; }

.scrollcue{
  position:absolute; left:50%; bottom:max(18px,env(safe-area-inset-bottom)); z-index:3;
  width:44px; height:44px; display:grid; place-items:center;
  transform:translateX(-50%); color:var(--ink-2); opacity:.82;
  transition:color .2s, opacity .2s;
}
.scrollcue:hover{ color:var(--ink); opacity:1; }
.scrollcue:focus-visible{ outline:1px solid var(--accent-2); outline-offset:2px; }
.scrollcue svg{ width:26px; height:26px; }

/* ============================================================
   VENTURES
   ============================================================ */
.ventures{ padding:clamp(48px,7vw,92px) 0 clamp(20px,4vw,44px); }
.ventures .wrap{ max-width:960px; }
.sec-head{
  display:flex; align-items:baseline; justify-content:space-between;
  padding-bottom:20px; border-bottom:1px solid var(--line-2);
  margin-bottom:clamp(34px,5vw,58px);
}
.sec-head .count{ font-family:var(--f-mono); font-size:13px; letter-spacing:.2em; color:var(--muted); }

.grid{ --colgap:clamp(22px,3vw,40px); display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(26px,3.4vw,52px) var(--colgap); }
/* an odd-numbered last card would sit alone with a dead column beside it:
   span the row and centre it at exactly one column's width */
.grid > .card:last-child:nth-child(odd){ grid-column:1 / -1; justify-self:center; width:calc((100% - var(--colgap)) / 2); }

.card{ display:flex; flex-direction:column; }
.card__media{
  position:relative; display:block; aspect-ratio:16/9; overflow:hidden;
  border-radius:16px; border:1px solid var(--line); background:#000;
  transition:transform .5s cubic-bezier(.2,.7,.2,1), border-color .3s ease, box-shadow .45s ease;
}
.card__media img{ width:100%; height:100%; object-fit:cover; object-position:center; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.card:hover .card__media{ transform:translateY(-7px); border-color:var(--line-2); box-shadow:0 40px 70px -42px rgba(0,0,0,.8); }
.card:hover .card__media img{ transform:scale(1.04); }
/* logo tiles: contained, consistent size */
.media--logo img{ object-fit:contain; padding:11% 12%; }
.card:hover .media--logo img{ transform:scale(1.05); }
.media--cog{ background:var(--accent); }

/* typeset RKL */
.media--rkl{
  background:
    radial-gradient(125% 120% at 50% 28%, color-mix(in oklab,var(--accent),black 30%), var(--bg-2) 78%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:7% 6%; text-align:center;
}
.rkl__name{ font-family:var(--f-disp); font-style:normal; font-weight:800; font-size:clamp(28px,4.2vw,46px); line-height:1.02; color:var(--ink); letter-spacing:-.02em; white-space:nowrap; }

.card__meta{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding-top:16px; flex-wrap:wrap; }
/* the description gets its own full-width row under the name and links, so every
   card reads the same regardless of how wide its own link row is. Spacing comes
   from the row gap above, never a per-element margin. */
.card__desc{ flex:1 0 100%; order:3; }
/* name + one line of description share the left column; min-width:0 moves up to the
   wrapper or the flex row refuses to let either line wrap */
.card__text{ min-width:0; }
.card__name{ font-family:var(--f-sans); font-size:18px; font-weight:700; color:var(--ink); letter-spacing:-.01em; min-width:0; }
/* the leading of the two lines is the gap: no ad-hoc margin between them.
   Liners ride the site sans; serif italic was tried here and rejected */
.card__desc{ font-family:var(--f-sans); font-size:13px; font-weight:400; color:var(--muted); letter-spacing:.01em; }
.card__links{ display:flex; align-items:center; gap:9px; flex:none; }
.iconbtn{
  display:inline-grid; place-items:center; width:38px; height:38px; flex:none;
  border:1px solid var(--line-2); border-radius:10px; color:#fff;
  background:color-mix(in oklab, var(--surface), transparent 35%);
  transition:color .22s ease, border-color .22s ease, background .22s ease;
}
.iconbtn:hover{ color:#fff; background:var(--accent); border-color:var(--accent); }
/* Brand marks are official geometry, so their art fills its 24u box by different
   amounts (globe ~82%, Spotify ~83%, Instagram 100%). Size for equal visible INK
   (~15px), never equal box, or the Instagram glyph renders visibly larger. */
.iconbtn svg{ width:18px; height:18px; }
.iconbtn--ig svg{ width:15px; height:15px; }
.chip{
  display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 17px;
  font-family:var(--f-sans); font-size:13px; font-weight:600; letter-spacing:.02em;
  color:#fff; background:var(--accent); border:1px solid var(--accent); border-radius:10px;
  transition:background .22s ease, border-color .22s ease;
}
.chip:hover{ background:var(--accent-2); border-color:var(--accent-2); }
.chip--quiet{
  color:var(--ink); background:transparent; border-color:var(--line-2);
}
.chip--quiet:hover{ color:#fff; background:var(--accent); border-color:var(--accent); }

/* ============================================================
   STATEMENT (replaces marquee)
   ============================================================ */
.statement{ padding:clamp(64px,11vw,140px) 0; text-align:center; --lift:clamp(8px,1.4vw,15px); }
.sline{
  display:inline-flex; align-items:baseline; justify-content:center;
  gap:clamp(10px,1.8vw,20px); flex-wrap:wrap;
  font-family:var(--f-sans); color:var(--ink);
}
.sline__pre{ font-weight:500; font-size:clamp(26px,4.4vw,52px); letter-spacing:-.02em; line-height:1; }
.sline__lock{ position:relative; display:inline-block; isolation:isolate; transform:translateY(calc(-1 * var(--lift))); }
.sline__circle{ position:absolute; left:-12%; top:-42%; width:124%; height:222%; overflow:visible; pointer-events:none; z-index:-1; transform:rotate(-1.6deg); }
.sline__circle path{ fill:none; stroke:var(--accent); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; opacity:.9; }
/* the circle draws itself once as the statement arrives. Scroll-triggered by the
   existing reveal observer, never on a loop; pathLength=1 normalises the dash
   math, and the pre-draw state hides the round-cap dot during the delay */
@media (prefers-reduced-motion: no-preference){
  .statement .sline__circle path{ stroke-dasharray:1; stroke-dashoffset:1; opacity:0; }
  .statement .reveal.in .sline__circle path{ animation:circledraw 1.25s cubic-bezier(.6,.05,.3,1) .3s forwards; }
}
@keyframes circledraw{ from{ stroke-dashoffset:1; opacity:.9; } to{ stroke-dashoffset:0; opacity:.9; } }
.sline__deva{ display:block; font-family:var(--f-deva); font-weight:500; font-size:clamp(30px,5.2vw,62px); line-height:1; letter-spacing:.005em; white-space:nowrap; }
.sline__sub{ position:absolute; top:100%; left:11%; right:11%; display:flex; align-items:baseline; justify-content:space-between; margin-top:.1em; }
.sline__rom{ font-family:var(--f-serif); font-style:italic; font-size:clamp(14px,2vw,23px); color:var(--ink); line-height:1; }
.sline__ur{ font-family:var(--f-urdu); font-size:clamp(14px,2vw,23px); color:var(--ink); line-height:1; }
@media (max-width:520px){
  .sline{ flex-direction:column; align-items:center; gap:16px; }
  .sline__lock{ transform:none; }
  .sline__sub{ gap:14px; }
  .statement{ padding-bottom:clamp(80px,18vw,120px); }
}

/* ============================================================
   FOOTER · slim
   ============================================================ */
.footer{ border-top:1px solid var(--line); }
.footer__bar{ display:flex; align-items:center; justify-content:space-between; gap:16px 24px; padding-block:18px; flex-wrap:wrap; }
.footer__mark{ display:block; transition:opacity .2s; }
.footer__mark img{ display:block; height:18px; width:auto; opacity:.85; }
.footer__mark:hover img{ opacity:1; }
.footer__right{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.footer__social{ display:inline-flex; align-items:center; gap:13px; }
.footer__copy{ font-family:var(--f-sans); font-size:13px; color:var(--muted); }
.footer__right button{ font-family:var(--f-sans); font-size:13px; color:var(--muted); transition:color .2s; }
.footer__right button:hover{ color:var(--ink); }
.footer__ig{ display:inline-grid; place-items:center; width:32px; height:32px; border-radius:999px; border:1px solid var(--line); color:var(--ink-2); transition:color .2s, background .2s; }
.footer__ig svg{ width:15px; height:15px; }
.footer__ig--brand svg{ width:12.5px; height:12.5px; } /* full-box official mark, matched to the envelope's ink */
.footer__ig:hover{ color:var(--ink); background:var(--line); }

/* ===== hero entrance ===== */
@media (prefers-reduced-motion: no-preference){
  .hero__title{ animation:rise .9s cubic-bezier(.2,.7,.15,1) both; }
  .entry{ animation:rise .9s cubic-bezier(.2,.7,.15,1) .12s both; }
  .defs .def{ animation:rise .9s cubic-bezier(.2,.7,.15,1) both; }
  .defs .def:nth-child(1){ animation-delay:.22s; }
  .defs .def:nth-child(2){ animation-delay:.30s; }
  .defs .def:nth-child(3){ animation-delay:.38s; }
}
@keyframes rise{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }

/* ===== venture action popup ===== */
.nowplaying{
  position:fixed; left:50%; bottom:44px; z-index:90;
  width:max-content; max-width:calc(100vw - 32px);
  transform:translate(-50%,200%); opacity:0; pointer-events:none;
  transition:transform .55s cubic-bezier(.2,.8,.2,1), opacity .4s ease;
}
.nowplaying[data-state="shown"]{ transform:translateX(-50%); opacity:1; pointer-events:auto; }
.nowplaying[data-state="shown"].nowplaying--away{ transform:translate(-50%,200%); opacity:0; pointer-events:none; }
/* sentence-case pill in the site's button voice; the floating element earns its
   soft black elevation the same way the phonetic entry box does. Padding is
   snug and symmetric: the label is the only thing in the capsule, so there is
   no reserved space for a control and no dead purple around the words */
.nowplaying__btn{
  display:flex; align-items:center; justify-content:center; width:100%; min-height:44px;
  padding:11px 24px; white-space:nowrap;
  font-family:var(--f-sans); font-size:13px; line-height:1.2; font-weight:600;
  letter-spacing:.01em; color:#fff;
  background:var(--accent); border:1px solid var(--accent);
  border-radius:999px;
  box-shadow:0 24px 44px -26px rgba(0,0,0,.85);
  transition:background .18s ease, border-color .18s ease;
}
.nowplaying__btn:hover{ background:var(--accent-2); border-color:var(--accent-2); }
/* dismiss is a TINY bare cross in the capsule's top-right corner, never a chip
   in the label's row: a bordered control there read as a button inside a button
   and pushed the composition off the pill's own axis. The 28px box is the tap
   target and only the 9px mark shows, inset an equal 12px from the top and
   right edges (28/2 - 12 = 2, hence the -2 offsets) so it sits at a true
   45-degree corner position and the capsule stays a clean symmetric shape.
   Placed ON the purple, not outside it: floated off the corner it read as a
   detached speck rather than part of the object. */
.nowplaying__x{
  position:absolute; top:-2px; right:-2px;
  width:28px; height:28px; display:grid; place-items:center;
  background:none; border:0; padding:0; border-radius:999px;
  color:rgba(255,255,255,.7);
  transition:color .18s ease;
}
.nowplaying__x svg{ width:9px; height:9px; }
.nowplaying__x:hover{ color:#fff; }
@media (max-width:540px){
  .nowplaying{ bottom:73px; }
}

/* ============================================================
   CONTACT MODAL
   ============================================================ */
.modal{ position:fixed; inset:0; z-index:120; display:none; place-items:center; padding:24px; }
.modal.open{ display:grid; }
.modal__scrim{ position:absolute; inset:0; background:color-mix(in oklab,var(--bg),black 30%); opacity:.72; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.modal__card{
  position:relative; width:min(540px,100%);
  background:var(--surface); border:1px solid var(--line-2); border-radius:22px;
  padding:clamp(28px,4vw,46px);
  box-shadow:0 60px 100px -50px rgba(0,0,0,.9);
  transform:translateY(12px); transition:transform .4s cubic-bezier(.2,.8,.2,1);
  max-height:92vh; max-height:92dvh; overflow:auto;
  /* the card compresses to the viewport (height query below) so a scrollbar is
     the exception; when one must appear it is thin and rides the dark theme */
  scrollbar-width:thin; scrollbar-color:var(--line-2) transparent;
}
.modal__card::-webkit-scrollbar{ width:6px; }
.modal__card::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:8px; }
.modal__card::-webkit-scrollbar-track{ background:transparent; }
.modal.open .modal__card{ transform:none; }
.modal__close{ position:absolute; top:18px; right:18px; width:38px; height:38px; border-radius:999px; display:grid; place-items:center; color:var(--ink-2); border:1px solid var(--line); transition:background .2s,color .2s; }
.modal__close:hover{ background:var(--line); color:var(--ink); }
.modal__eyebrow{ font-family:var(--f-sans); font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); }
.modal__title{ font-family:var(--f-cormo); font-style:italic; font-weight:500; font-size:clamp(34px,4.6vw,48px); line-height:1.02; margin-top:10px; color:var(--ink); }
.modal__sub{ color:var(--muted); font-size:14.5px; margin-top:12px; max-width:42ch; }
.modal__sub--wide{ max-width:none; }
.modal__card--wide{ width:min(640px,100%); }
.legal{ margin-top:22px; max-height:58vh; overflow:auto; padding-right:10px; }
.legal p{ font-size:14px; color:var(--ink-2); line-height:1.62; margin-bottom:14px; }
.legal h4{ font-family:var(--f-sans); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); margin:22px 0 8px; font-weight:700; }
.legal__date{ font-family:var(--f-sans); font-size:12px; color:var(--muted); margin-top:18px; }
.legal::-webkit-scrollbar{ width:8px; }
.legal::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:8px; }
.form{ margin-top:26px; display:flex; flex-direction:column; gap:14px; }
/* grouped field clusters: one bordered surface with hairline-divided rows,
   echoing the hero's phonetic entry box rather than five loose boxed inputs */
.fgroup{ background:var(--bg-2); border:1px solid var(--line-2); border-radius:14px; overflow:hidden; }
.fgroup > * + *{ border-top:1px solid var(--line); }
.fgrid{ display:grid; grid-template-columns:1fr 1fr; }
.fgrid .field + .field{ border-left:1px solid var(--line); }
.field{ position:relative; padding:12px 16px 11px; transition:background .18s ease; }
.field:focus-within{ background:color-mix(in oklab, var(--bg-2), var(--accent) 8%); }
.field label{ display:block; font-family:var(--f-sans); font-size:12px; font-weight:500; letter-spacing:.02em; color:var(--muted); margin-bottom:3px; }
.field__opt{ font-size:11px; opacity:.65; margin-left:2px; }
.field input, .field textarea, .field select{
  width:100%; background:transparent; color:var(--ink); border:0; border-radius:0;
  padding:1px 0 2px; font-family:var(--f-sans); font-size:15.5px; line-height:1.4;
}
.field input:focus, .field textarea:focus, .field select:focus{ outline:none; }
.field select{ color-scheme:dark; appearance:none; -webkit-appearance:none; padding-right:28px; cursor:pointer; }
.field select:invalid{ color:var(--muted); } /* unchosen select reads quiet, like the placeholders */
.field__chev{ position:absolute; right:16px; bottom:14px; width:16px; height:16px; color:var(--muted); pointer-events:none; }

/* phone row: dial code and number share one line, split by the same hairline
   the field grid uses, so it reads as one control rather than two boxes */
.phone{ display:flex; align-items:center; }
/* fixed width, because a select left to size itself takes the width of its
   WIDEST option (a 40-character territory name) and swallows the row. The dial
   code is first in every label, so a long country name ellipsizes and the part
   that matters stays readable. */
.phone__cc{ position:relative; display:flex; align-items:center; flex:none; width:132px; }
.field .phone__cc select{ width:100%; padding:1px 20px 2px 0; text-overflow:ellipsis; }
.phone__chev{ position:absolute; right:2px; top:50%; transform:translateY(-50%); width:14px; height:14px; color:var(--muted); pointer-events:none; }
.field .phone__num{ flex:1; min-width:0; margin-left:12px; padding-left:12px; border-left:1px solid var(--line); }

/* the Other detail row only exists once Other is chosen */
.field--other[hidden]{ display:none; }

/* Equal halves clip an email on a narrow phone ("you@email.com" runs to the
   column edge) while "Your name" leaves room to spare, so the columns are
   weighted to the content instead of stacked: stacking would buy the space at
   the cost of a whole extra row, which is what pushes a small phone into a
   scrollbar. min-width:0 keeps a 1fr track from being inflated by its child. */
@media (max-width:430px){
  .fgrid{ grid-template-columns:0.85fr 1.15fr; }
  .fgrid > .field{ min-width:0; }
}
.field textarea{ resize:vertical; min-height:96px; }
.field input::placeholder, .field textarea::placeholder{ color:var(--muted); }
/* a failed required row is visibly a failure: quiet red tint on the row itself */
.field--err{ background:color-mix(in oklab, var(--bg-2), #E08989 9%); }
.field--err label{ color:#E08989; }
.form__note{ font-size:12px; color:var(--muted); text-align:center; font-family:var(--f-sans); letter-spacing:.01em; }
.form__done{ display:none; flex-direction:column; align-items:center; text-align:center; gap:14px; padding:28px 6px 8px; }
.modal__card.done .form{ display:none; }
.modal__card.done .form__done{ display:flex; }
.form__done .check{ width:62px; height:62px; border-radius:999px; display:grid; place-items:center; background:var(--accent-soft); color:#fff; }
.form__done h3{ font-family:var(--f-cormo); font-style:italic; font-size:30px; color:var(--ink); font-weight:500; }
.form__done p{ color:var(--muted); font-size:14.5px; max-width:34ch; }

/* size the contact card to the SCREEN, not to an ideal desktop: on short
   viewports every vertical luxury shrinks before a scrollbar is allowed.
   These height tiers MUST sit after every base modal/form rule above: they
   share specificity with them, so source order is what lets them win */
@media (max-height:840px){
  .modal__card{ padding:26px 34px; }
  .modal__title{ font-size:clamp(26px,4.6vh,38px); margin-top:8px; }
  .modal__sub{ margin-top:8px; font-size:13.5px; }
  .form{ margin-top:15px; gap:11px; }
  .field{ padding:10px 14px 9px; }
  .field textarea{ min-height:60px; }
  .btn--block{ padding:13px; }
  .form__done{ padding:18px 6px 4px; }
}
@media (max-height:740px){
  .modal__card{ padding:20px 30px; }
  .modal__title{ font-size:26px; margin-top:6px; }
  .modal__sub{ font-size:13px; margin-top:6px; }
  .form{ margin-top:12px; gap:9px; }
  .field{ padding:9px 13px 8px; }
  .field label{ margin-bottom:2px; }
  .field textarea{ min-height:48px; }
  .btn--block{ padding:12px; }
}
/* Shortest tier (a 667px phone with the Other row open is the worst case).
   The intro line is the one thing here that carries no input, so it is what
   goes: whatever does not fit is dropped on small screens and survives in full
   everywhere else, rather than the card growing a scrollbar. */
@media (max-height:700px){
  .modal__card{ padding:17px 26px; }
  .modal__title{ font-size:24px; margin-top:4px; }
  .form{ margin-top:14px; gap:8px; }
  .field{ padding:8px 13px 7px; }
  .field label{ margin-bottom:1px; }
  .field textarea{ min-height:44px; }
  .legal{ max-height:46vh; }
}
/* Dropping the intro line is the last resort, so it only happens where the
   trims above are not enough: a short PHONE, or any window short enough that
   the card would otherwise scroll. A short desktop window keeps its copy. */
@media (max-height:700px) and (max-width:520px){ .modal__card .modal__sub{ display:none; } }
@media (max-height:620px){ .modal__card .modal__sub{ display:none; } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:760px){
  .grid{ grid-template-columns:1fr; gap:clamp(28px,8vw,44px); }
  /* single column: unset the centring rule completely. justify-self must go back
     to stretch too, or width:auto shrink-to-fits the card to its content */
  .grid > .card:last-child:nth-child(odd){ grid-column:auto; justify-self:stretch; width:auto; }
}
@media (max-width:540px){
  .logo-mark img{ height:30px; }
  .modal__card{ padding:22px 24px; }
  .modal__close{ top:14px; right:14px; }
  .modal__sub{ margin-top:8px; }
  .form{ margin-top:18px; gap:11px; }
  .field{ padding:10px 13px 9px; }
  .field__chev{ right:13px; bottom:12px; }
  .field textarea{ min-height:80px; }
  .card__meta{ gap:10px; }
  .card__name{ font-size:17px; }
  /* prominent logo on its own row; copyright, links + icons on ONE row below */
  .footer__bar{ flex-direction:column; align-items:flex-start; gap:18px; padding-block:24px; }
  .footer__mark{ flex:none; align-self:center; }
  .footer__mark img{ height:22px; opacity:.95; }
  .footer__right{ width:100%; flex-wrap:nowrap; align-items:center; justify-content:space-between; gap:clamp(8px,2.4vw,16px); }
  .footer__copy, .footer__right button{ font-size:clamp(10px,2.9vw,13px); white-space:nowrap; }
  .footer__social{ gap:10px; flex:none; }
  .footer__ig{ width:28px; height:28px; flex:none; }
  .footer__ig svg{ width:13px; height:13px; }
  .footer__ig--brand svg{ width:11px; height:11px; }
}
@media (max-width:420px){
  .hero{ padding-top:100px; }
  .hero__title{ font-size:clamp(50px,16vw,72px); }
  .entry{ padding:13px 16px; }
  .entry__l1{ font-size:14px; gap:12px; }
  .statement p{ font-size:clamp(30px,8.4vw,40px); }
}