/* ==========================================================================
   Turris Group: v3 design system
   Art direction: "Dusk Harbour". Deep ink, warm ivory, sodium bronze.
   Type: Instrument Sans (interface + display) / Newsreader italic (editorial)
   ========================================================================== */

:root{
  /* --- surface ------------------------------------------------------- */
  --ink:        #0A0E13;
  --ink-1:      #0E141B;
  --ink-2:      #131A23;
  --ink-3:      #19222C;
  --ink-4:      #222D39;

  --paper:      #F2F0E9;
  --paper-2:    #E8E5DB;
  --paper-3:    #DCD8CB;

  /* --- ink on dark ---------------------------------------------------- */
  --ivory:      #EDEBE4;
  --ivory-2:    #C3C3BE;
  --mute:       #9297A0;
  --mute-2:     #7E858E;

  /* --- ink on paper --------------------------------------------------- */
  --graphite:   #14181D;
  --graphite-2: #3E454D;
  --graphite-3: #5E656C;

  /* --- accent --------------------------------------------------------- */
  --bronze:     #C08B45;
  --bronze-lt:  #E2B77C;
  --bronze-dk:  #8E6430;
  --bronze-wash:rgba(192,139,69,.14);

  --sea:        #6E93A8;
  --good:       #5E9A7B;
  --warn:       #C4A24E;
  --alert:      #D07A5F;

  /* --- washes and scrims ---------------------------------------------
     Named so the console can invert its whole palette by redefining a
     handful of tokens rather than rewriting the stylesheet. */
  /* The wash is stated as raw channels so every translucent overlay in the
     console can invert with one token. */
  --wash:       237,235,228;
  --tint-1:     rgba(237,235,228,.025);
  --tint-2:     rgba(237,235,228,.035);
  --tint-3:     rgba(237,235,228,.06);
  --tint-4:     rgba(237,235,228,.09);
  --scrim:      rgba(5,8,12,.6);
  --veil:       rgba(10,14,19,.86);
  --well:       #101720;
  --on-bronze:  #120C04;
  --ok-lt:      #8FC7AC;

  /* --- rules ---------------------------------------------------------- */
  --line:       rgba(237,235,228,.11);
  --line-2:     rgba(237,235,228,.20);
  --line-3:     rgba(237,235,228,.32);
  --line-p:     rgba(20,24,29,.14);
  --line-p2:    rgba(20,24,29,.26);

  /* --- metrics -------------------------------------------------------- */
  --maxw:       1200px;
  --maxw-wide:  1360px;
  --gut:        clamp(20px, 4.4vw, 56px);
  --nav-h:      72px;
  --r-sm:       6px;
  --r:          10px;
  --r-lg:       16px;
  --r-xl:       22px;

  /* --- motion --------------------------------------------------------- */
  --e-out:      cubic-bezier(.17,.84,.44,1);
  --e-in-out:   cubic-bezier(.62,.05,.25,1);
  --t-ui:       140ms;
  --t-move:     320ms;
  --t-scene:    720ms;

  --shadow-1:   0 1px 2px rgba(0,0,0,.28);
  --shadow-2:   0 10px 24px -12px rgba(0,0,0,.55);
  --shadow-3:   0 40px 90px -40px rgba(0,0,0,.85), 0 2px 10px rgba(0,0,0,.35);

  color-scheme: dark;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ink);
  color:var(--ivory);
  font-family:"Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size:16px;
  line-height:1.55;
  font-weight:400;
  letter-spacing:-0.002em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-variant-numeric: tabular-nums lining-nums;
  overflow-x:hidden;
}

img,svg,video{ max-width:100%; display:block; }
[hidden]{ display:none !important; }
a{ color:inherit; }

::selection{ background:var(--bronze); color:var(--ink); }

:focus-visible{
  outline:2px solid var(--bronze-lt);
  outline-offset:3px;
  border-radius:3px;
}

.skip{
  position:absolute; left:14px; top:-64px; z-index:200;
  background:var(--ivory); color:var(--ink);
  padding:10px 16px; border-radius:var(--r-sm);
  font-size:14px; font-weight:500;
  transition:top var(--t-ui) var(--e-out);
}
.skip:focus{ top:14px; }

/* ==========================================================================
   Typography
   ========================================================================== */

h1,h2,h3,h4,h5{
  margin:0;
  font-weight:500;
  letter-spacing:-0.028em;
  line-height:1.06;
  text-wrap:balance;
}
p{ margin:0; text-wrap:pretty; }

.d1{ font-size:clamp(2.6rem, 6.1vw, 4.6rem); line-height:1.02; letter-spacing:-0.036em; }
.d2{ font-size:clamp(2.1rem, 4.4vw, 3.4rem); line-height:1.06; letter-spacing:-0.032em; }
.d3{ font-size:clamp(1.6rem, 2.8vw, 2.25rem); line-height:1.12; letter-spacing:-0.026em; }
.d4{ font-size:clamp(1.22rem, 1.7vw, 1.5rem); line-height:1.24; letter-spacing:-0.018em; }
.d5{ font-size:1.0625rem; line-height:1.35; letter-spacing:-0.012em; font-weight:500; }

.lede{
  font-size:clamp(1.0625rem, 1.35vw, 1.1875rem);
  line-height:1.58;
  color:var(--ivory-2);
  letter-spacing:-0.008em;
}
.body{ font-size:1rem; line-height:1.62; color:var(--ivory-2); }
.small{ font-size:.875rem; line-height:1.55; color:var(--mute); }
.xsmall{ font-size:.8125rem; line-height:1.5; color:var(--mute); }

/* editorial italic: the Tiempos-class emphasis */
.ed{
  font-family:"Newsreader", Georgia, "Times New Roman", serif;
  font-style:italic;
  font-weight:300;
  letter-spacing:-0.012em;
}
.d1 .ed, .d2 .ed{ font-weight:300; }

/* eyebrow / label */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.6875rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--mute);
}
.eyebrow::before{
  content:""; width:22px; height:1px; background:var(--bronze); opacity:.85;
}
.eyebrow.bare::before{ display:none; }
.num{
  font-size:.6875rem; letter-spacing:.1em; font-weight:500;
  color:var(--bronze); font-variant-numeric:tabular-nums;
}

.paper .lede,.paper .body{ color:var(--graphite-2); }
.paper .small,.paper .xsmall,.paper .eyebrow{ color:var(--graphite-3); }
.paper .num{ color:#8F6224; }

/* ==========================================================================
   Layout
   ========================================================================== */

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.wrap-wide{ width:100%; max-width:var(--maxw-wide); margin-inline:auto; padding-inline:var(--gut); }

section{ position:relative; }
.sec{ padding-block:clamp(72px, 9vw, 140px); }
.sec-tight{ padding-block:clamp(52px, 6vw, 88px); }

.paper{ background:var(--paper); color:var(--graphite); }
.paper h1,.paper h2,.paper h3,.paper h4{ color:var(--graphite); }
.ink-2{ background:var(--ink-1); }

.rule{ height:1px; background:var(--line); border:0; margin:0; }
.paper .rule{ background:var(--line-p); }

.sec-head{
  display:grid; gap:20px;
  grid-template-columns: minmax(0,1fr);
  margin-bottom:clamp(36px, 4.5vw, 64px);
}
@media (min-width:900px){
  .sec-head.split{ grid-template-columns: minmax(0,.92fr) minmax(0,1fr); gap:56px; align-items:end; }
}
.sec-head .lede{ max-width:56ch; }

.stack-sm > * + *{ margin-top:12px; }
.stack   > * + *{ margin-top:20px; }
.stack-lg> * + *{ margin-top:32px; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn{
  --bg:var(--ivory); --fg:var(--ink); --bd:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  height:46px; padding:0 22px;
  background:var(--bg); color:var(--fg);
  border:1px solid var(--bd); border-radius:999px;
  font:inherit; font-size:.9375rem; font-weight:500; letter-spacing:-0.008em;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition: background var(--t-ui) var(--e-out), color var(--t-ui) var(--e-out),
              border-color var(--t-ui) var(--e-out), transform var(--t-ui) var(--e-out),
              box-shadow var(--t-ui) var(--e-out);
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 6px 18px -8px rgba(0,0,0,.6); }
.btn:active{ transform:translateY(0) scale(.985); box-shadow:none; }
.btn .arw{ transition:transform var(--t-move) var(--e-out); }
.btn:hover .arw{ transform:translateX(3px); }

.btn-sm{ height:38px; padding:0 16px; font-size:.875rem; }
.btn-lg{ height:52px; padding:0 28px; font-size:1rem; }

.btn-ghost{ --bg:transparent; --fg:var(--ivory); --bd:var(--line-2); }
.btn-ghost:hover{ --bd:var(--line-3); background:rgba(var(--wash),.05); }

.btn-bronze{ --bg:var(--bronze); --fg:#120C04; }
.btn-bronze:hover{ --bg:var(--bronze-lt); }

.paper .btn{ --bg:var(--graphite); --fg:var(--paper); }
.paper .btn-ghost{ --bg:transparent; --fg:var(--graphite); --bd:var(--line-p2); }
.paper .btn-ghost:hover{ background:rgba(20,24,29,.05); }

.btn[disabled],.btn[aria-disabled="true"]{ opacity:.45; pointer-events:none; }
.btn.is-busy{ pointer-events:none; }
.btn.is-busy .btn-lbl{ opacity:.45; }
.spin{
  width:15px; height:15px; border-radius:50%; flex:none;
  border:1.5px solid currentColor; border-top-color:transparent;
  animation:spin .7s linear infinite; display:none;
}
.btn.is-busy .spin{ display:block; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* text link with the fine underline */
.tlink{
  display:inline-flex; align-items:center; gap:7px;
  text-decoration:none; font-weight:500; font-size:.9375rem;
  color:var(--ivory);
  padding-bottom:2px;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:100% 1px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size var(--t-move) var(--e-out), color var(--t-ui) var(--e-out);
}
.tlink:hover{ background-size:0% 1px; color:var(--bronze-lt); }
.paper .tlink{ color:var(--graphite); }
.paper .tlink:hover{ color:var(--bronze-dk); }
.tlink .arw{ transition:transform var(--t-move) var(--e-out); }
.tlink:hover .arw{ transform:translateX(3px); }

/* ==========================================================================
   Navigation
   ========================================================================== */

.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--nav-h);
  display:flex; align-items:center;
  transition: background var(--t-move) var(--e-out), border-color var(--t-move) var(--e-out),
              backdrop-filter var(--t-move) var(--e-out), height var(--t-move) var(--e-out);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(10,14,19,.78);
  -webkit-backdrop-filter:saturate(160%) blur(16px);
  backdrop-filter:saturate(160%) blur(16px);
  border-bottom-color:var(--line);
  height:62px;
}
.nav-in{
  width:100%; max-width:var(--maxw-wide); margin-inline:auto; padding-inline:var(--gut);
  display:flex; align-items:center; gap:28px;
}

.mark{ display:flex; align-items:center; gap:13px; text-decoration:none; flex:none; }
.mark svg{ width:30px; height:30px; flex:none; }
.mark .wordmark{
  font-size:1.125rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--ivory); line-height:1;
  padding-top:1px;
}
/* The mark carries more weight at this size, so give it room back on phones
   before it starts crowding the burger. */
@media (max-width:560px){
  .mark{ gap:10px; }
  .mark .wordmark, .mark .wordmark-2{ font-size:1rem; letter-spacing:.17em; }
  .mark .bar{ height:15px; }
}
.mark:hover .glyph-fill{ fill:var(--bronze-lt); }
.glyph-fill{ transition:fill var(--t-move) var(--e-out); }

.nav-links{
  display:none; align-items:center; gap:4px;
  margin-inline:auto;
}
@media (min-width:1160px){ .nav-links{ display:flex; } }
.nav-links a{
  position:relative;
  padding:8px 13px; border-radius:var(--r-sm);
  font-size:.9375rem; color:var(--ivory-2); text-decoration:none; white-space:nowrap;
  transition:color var(--t-ui) var(--e-out), background var(--t-ui) var(--e-out);
}
.nav-links a:hover{ color:var(--ivory); background:rgba(var(--wash),.06); }
.nav-links a[aria-current="page"]{ color:var(--ivory); }
.nav-links a[aria-current="page"]::after{
  content:""; position:absolute; left:13px; right:13px; bottom:2px;
  height:1px; background:var(--bronze);
}

.nav-right{ display:flex; align-items:center; gap:10px; margin-left:auto; }
@media (min-width:1160px){ .nav-right{ margin-left:0; } }
.nav-login{ white-space:nowrap;
  display:none; font-size:.9375rem; color:var(--ivory-2); text-decoration:none;
  padding:8px 6px; transition:color var(--t-ui) var(--e-out);
}
.nav-login:hover{ color:var(--ivory); }
@media (min-width:600px){ .nav-login{ display:inline-block; } }

.burger{
  display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
  width:42px; height:42px; padding:0 11px;
  background:transparent; border:1px solid var(--line-2); border-radius:999px;
  cursor:pointer;
}
@media (min-width:1160px){ .burger{ display:none; } }
.burger i{ display:block; height:1.5px; background:var(--ivory); border-radius:2px; transition:transform var(--t-move) var(--e-out), opacity var(--t-ui) var(--e-out); }
.burger[aria-expanded="true"] i:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] i:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* overlay menu */
.menu{
  position:fixed; inset:0; z-index:99;
  background:var(--ink);
  display:flex; flex-direction:column;
  padding:calc(var(--nav-h) + 20px) var(--gut) 40px;
  opacity:0; visibility:hidden;
  transform:translateY(-8px);
  transition:opacity var(--t-move) var(--e-out), transform var(--t-move) var(--e-out), visibility var(--t-move);
  overflow-y:auto;
}
.menu.is-open{ opacity:1; visibility:visible; transform:none; }
.menu-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.menu-list li{ border-bottom:1px solid var(--line); }
.menu-list a{
  display:flex; align-items:baseline; gap:16px;
  padding:20px 2px; text-decoration:none;
  font-size:clamp(1.5rem,6.5vw,2rem); font-weight:500; letter-spacing:-0.028em;
  transition:color var(--t-ui) var(--e-out), padding-left var(--t-move) var(--e-out);
}
.menu-list a:hover{ color:var(--bronze-lt); padding-left:10px; }
.menu-list .num{ flex:none; }
.menu-foot{ margin-top:auto; padding-top:36px; display:grid; gap:14px; }
@media (min-width:640px){ .menu-foot{ grid-template-columns:repeat(3,1fr); } }
.menu-foot .k{ font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); }
.menu-foot .v{ font-size:.9375rem; color:var(--ivory); text-decoration:none; }
body.is-locked{ overflow:hidden; }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero{
  position:relative;
  min-height:min(92svh, 860px);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-top:calc(var(--nav-h) + 40px);
  padding-bottom:28px;
  overflow:hidden;
  isolation:isolate;
}
.hero-media{
  position:absolute; inset:-14% -4% -14% -4%; z-index:-2;
  background:#05080c;
  will-change:transform;
}
.hero-media img{
  width:100%; height:100%; object-fit:cover; object-position:50% 62%;
}
@media (max-width:719px){
  /* Portrait crop of a landscape frame: bias toward the left tower so the
     glass and the sky channel both read, instead of a slab of cloud. */
  .hero-media img{ object-position:42% 30%; }
  .hero .eyebrow{ font-size:.62rem; letter-spacing:.12em; padding:8px 13px 8px 12px; white-space:nowrap; }
  .hero .eyebrow::before{ width:14px; }
  .hero .eyebrow .est{ display:none; }
  opacity:0;
  transition:opacity 1.2s var(--e-out);
  will-change:transform;
  backface-visibility:hidden;
}
.hero-media img.is-in{ opacity:1; }
.hero-veil{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(120% 78% at 50% 100%, rgba(10,14,19,.94) 0%, rgba(10,14,19,.42) 46%, rgba(10,14,19,0) 76%),
    linear-gradient(180deg, rgba(10,14,19,.72) 0%, rgba(10,14,19,.16) 24%, rgba(10,14,19,.06) 48%, rgba(10,14,19,.82) 100%);
}
.hero-grain{
  position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

.hero-in{ position:relative; will-change:transform, opacity; }
.hero-copy{ max-width:20ch; }
.hero h1{ margin-bottom:22px; }
.hero .lede{ max-width:48ch; color:var(--ivory-2); }
/* The eyebrow sits on a photograph, so it gets its own ground: a hairline
   pill of frosted navy, ivory type at full weight, the bronze rule inside.
   It reads at a glance now instead of dissolving into the glass. */
.hero .eyebrow{
  color:var(--ivory); font-weight:600; font-size:.72rem; letter-spacing:.16em;
  padding:9px 16px 9px 14px; border-radius:999px;
  background:rgba(10,14,19,.42); border:1px solid rgba(237,235,228,.18);
  -webkit-backdrop-filter:blur(10px) saturate(120%); backdrop-filter:blur(10px) saturate(120%);
  box-shadow:0 8px 24px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06);
  text-shadow:0 1px 2px rgba(0,0,0,.55);
}
.hero .eyebrow::before{ opacity:1; box-shadow:0 0 8px rgba(192,139,69,.6); }
.hero .eyebrow .est{ display:contents; }
@media (max-width:719px){ .hero .eyebrow .est{ display:none; } }
.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }

.hero-meta{
  margin-top:clamp(44px, 7vw, 92px);
  padding-top:18px;
  border-top:1px solid var(--line);
  display:grid; gap:18px 32px;
  grid-template-columns:repeat(2, minmax(0,1fr));
}
@media (min-width:860px){ .hero-meta{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
.hero-meta dt{ font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); margin-bottom:6px; }
.hero-meta dd{ margin:0; font-size:.9375rem; color:var(--ivory); }

.disclosure{
  position:relative; z-index:2;
  margin:0 auto; width:max-content; max-width:min(92vw, 780px);
  padding:9px 18px; border-radius:999px;
  background:rgba(10,14,19,.55);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid var(--line);
  font-size:.75rem; color:var(--mute); text-align:center; line-height:1.45;
}

/* ==========================================================================
   Practice explorer (tabs)
   ========================================================================== */

.explorer{ display:grid; gap:0; border-top:1px solid var(--line-p); }
@media (min-width:960px){
  .explorer{ grid-template-columns: 300px minmax(0,1fr); }
}
.tabs{ display:flex; flex-direction:column; border-bottom:1px solid var(--line-p); }
@media (min-width:960px){ .tabs{ border-bottom:0; border-right:1px solid var(--line-p); padding-right:0; } }

.tab{
  position:relative;
  display:flex; align-items:center; gap:14px;
  padding:17px 22px 17px 2px;
  background:none; border:0; border-bottom:1px solid var(--line-p);
  font:inherit; text-align:left; cursor:pointer;
  color:var(--graphite-2);
  transition:color var(--t-ui) var(--e-out), padding-left var(--t-move) var(--e-out);
}
.tab:last-child{ border-bottom:0; }
@media (min-width:960px){ .tab:last-child{ border-bottom:1px solid var(--line-p); } }
.tab .t-n{ font-size:.6875rem; letter-spacing:.1em; color:var(--graphite-3); flex:none; width:20px; }
.tab .t-name{ font-size:1.0625rem; font-weight:500; letter-spacing:-0.016em; }
.tab .t-tag{
  margin-left:auto; font-size:.6875rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--graphite-3); padding:3px 8px; border:1px solid var(--line-p); border-radius:999px;
  white-space:nowrap;
}
.tab:hover{ color:var(--graphite); padding-left:8px; }
.tab[aria-selected="true"]{ color:var(--graphite); }
.tab[aria-selected="true"] .t-n{ color:var(--bronze-dk); }
.tab[aria-selected="true"]::before{
  content:""; position:absolute; left:-2px; top:12px; bottom:12px; width:2px; background:var(--bronze);
}

.panel{ padding:clamp(28px,3.6vw,48px) 0 0; }
@media (min-width:960px){ .panel{ padding:clamp(28px,3vw,44px) 0 44px clamp(36px,4vw,64px); } }
.panel[hidden]{ display:none; }
.panel.is-in .panel-q, .panel.is-in .panel-b, .panel.is-in .panel-f{ animation:riseIn 460ms var(--e-out) both; }
.panel.is-in .panel-b{ animation-delay:60ms; }
.panel.is-in .panel-f{ animation-delay:110ms; }
@keyframes riseIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

.panel-q{
  font-family:"Newsreader", Georgia, serif; font-style:italic; font-weight:300;
  font-size:clamp(1.5rem, 3.1vw, 2.35rem); line-height:1.18; letter-spacing:-0.02em;
  color:var(--graphite); margin-bottom:22px; max-width:22ch;
}
.panel-b{ font-size:1.0625rem; line-height:1.65; color:var(--graphite-2); max-width:62ch; }
.panel-f{ margin-top:26px; display:flex; flex-wrap:wrap; gap:10px 26px; align-items:center; }

/* ==========================================================================
   Cards / rows / grids
   ========================================================================== */

.grid{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
.paper .grid{ background:var(--line-p); border-color:var(--line-p); }
.grid > *{ background:var(--ink); padding:clamp(22px,2.4vw,32px); }
.paper .grid > *{ background:var(--paper); }
.g-2{ grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.g-3{ grid-template-columns:repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
@media (max-width:599px){ .g-3.caps{ grid-template-columns:1fr 1fr; } .g-3.caps > *{ padding:18px 16px; } .g-3.caps .cell-t{ font-size:.9375rem; } }
.g-4{ grid-template-columns:repeat(2, minmax(0,1fr)); }
@media (min-width:1000px){ .g-4{ grid-template-columns:repeat(4, minmax(0,1fr)); } }

.cell-n{ font-size:.6875rem; letter-spacing:.1em; color:var(--bronze); display:block; margin-bottom:14px; }
.cell-t{ font-size:1.0625rem; font-weight:500; letter-spacing:-0.016em; margin-bottom:8px; }
.cell-b{ font-size:.9375rem; line-height:1.58; color:var(--ivory-2); }
.paper .cell-b{ color:var(--graphite-2); }

/* list rows with hairlines (Mercury-style feature list) */
.rows{ border-top:1px solid var(--line-p); }
.row{ border-bottom:1px solid var(--line-p); }
.row-btn{
  width:100%; display:flex; align-items:center; gap:16px;
  padding:18px 2px; background:none; border:0; font:inherit; text-align:left; cursor:pointer;
  color:var(--graphite);
  transition:padding-left var(--t-move) var(--e-out);
}
.row-btn:hover{ padding-left:8px; }
.row-btn .r-t{ font-size:1.0625rem; font-weight:500; letter-spacing:-0.016em; }
.row-btn .r-i{
  margin-left:auto; flex:none; width:22px; height:22px; position:relative;
  transition:transform var(--t-move) var(--e-out);
}
.row-btn .r-i::before,.row-btn .r-i::after{
  content:""; position:absolute; inset:50% 2px auto 2px; height:1.5px; background:currentColor; border-radius:2px;
}
.row-btn .r-i::after{ transform:rotate(90deg); transition:transform var(--t-move) var(--e-out); }
.row-btn[aria-expanded="true"] .r-i::after{ transform:rotate(0deg); }
.row-body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--t-move) var(--e-in-out); }
.row-body > div{ overflow:hidden; }
.row[data-open="true"] .row-body{ grid-template-rows:1fr; }
.row-body p{ padding:0 2px 22px; max-width:60ch; color:var(--graphite-2); font-size:1rem; line-height:1.62; }
/* The same accordion on a dark section: ivory type, dark hairlines. */
.sec:not(.paper) .rows,.sec:not(.paper) .row{ border-color:var(--line); }
.sec:not(.paper) .row-btn{ color:var(--ivory); }
.sec:not(.paper) .row-body p{ color:var(--ivory-2); }
.sec:not(.paper) .row-btn .num{ color:var(--bronze-lt); }

/* ==========================================================================
   Stat band
   ========================================================================== */

.stats{
  display:grid; gap:28px 0;
  grid-template-columns:repeat(2, minmax(0,1fr));
}
@media (min-width:860px){ .stats{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
.stat{ padding-right:24px; }
.stat .s-v{
  font-size:clamp(2.1rem, 3.6vw, 3rem); font-weight:500;
  letter-spacing:-0.036em; line-height:1; margin-bottom:12px;
}
.stat .s-l{ font-size:.875rem; line-height:1.5; color:var(--mute); max-width:24ch; }
.paper .stat .s-l{ color:var(--graphite-3); }

/* ==========================================================================
   Timeline (sale process)
   ========================================================================== */

.tl{ border-top:1px solid var(--line); }
.tl-row{
  display:grid; gap:6px 24px;
  grid-template-columns:minmax(0,1fr);
  padding:20px 0; border-bottom:1px solid var(--line);
  align-items:center;
}
@media (min-width:760px){
  .tl-row{ grid-template-columns: 34px minmax(0,1.1fr) 120px minmax(0,1.6fr); gap:24px; }
}
.tl-n{ font-size:.6875rem; letter-spacing:.1em; color:var(--bronze); }
.tl-t{ font-size:1.0625rem; font-weight:500; letter-spacing:-0.016em; }
.tl-w{ font-size:.8125rem; color:var(--mute); letter-spacing:.02em; }
.tl-bar{ position:relative; height:4px; border-radius:999px; background:rgba(var(--wash),.09); overflow:hidden; }
.tl-fill{
  position:absolute; top:0; bottom:0; border-radius:999px;
  background:linear-gradient(90deg, var(--bronze-dk), var(--bronze));
  transform:scaleX(0); transform-origin:left;
  transition:transform 900ms var(--e-out);
}
.tl-row.is-in .tl-fill{ transform:scaleX(1); }
.tl-row[data-key] .tl-fill{ background:linear-gradient(90deg, var(--bronze), var(--bronze-lt)); }

/* ==========================================================================
   Portal preview (device frame)
   ========================================================================== */

.device{
  position:relative; border-radius:var(--r-lg);
  border:1px solid var(--line-2);
  background:linear-gradient(180deg, var(--ink-2), var(--ink-1));
  box-shadow:var(--shadow-3);
  overflow:hidden;
}
.device-bar{
  display:flex; align-items:center; gap:8px;
  padding:11px 14px; border-bottom:1px solid var(--line);
  background:rgba(var(--wash),.03);
}
.device-bar .dot{ width:9px; height:9px; border-radius:50%; background:rgba(var(--wash),.16); }
.device-bar .addr{
  margin-left:10px; font-size:.75rem; color:var(--mute);
  padding:3px 12px; border-radius:999px; background:rgba(var(--wash),.05);
  border:1px solid var(--line);
}
.device-body{ padding:clamp(14px,2vw,22px); }

/* ==========================================================================
   Forms
   ========================================================================== */

.field{ display:grid; gap:7px; }
.field label{ font-size:.8125rem; font-weight:500; color:var(--ivory-2); letter-spacing:-0.004em; }
.paper .field label{ color:var(--graphite-2); }
.field .hint{ font-size:.75rem; color:var(--mute); }
.paper .field .hint{ color:var(--graphite-3); }

.input, .select, .textarea{
  width:100%; font:inherit; font-size:.9375rem;
  color:var(--ivory);
  background:rgba(var(--wash),.04);
  border:1px solid var(--line-2); border-radius:var(--r);
  padding:12px 14px; min-height:46px;
  transition:border-color var(--t-ui) var(--e-out), background var(--t-ui) var(--e-out), box-shadow var(--t-ui) var(--e-out);
}
.textarea{ min-height:112px; resize:vertical; line-height:1.55; }
.select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%238A8F97' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
  padding-right:38px;
}
.input::placeholder,.textarea::placeholder{ color:var(--mute-2); }
.input:hover,.select:hover,.textarea:hover{ border-color:var(--line-3); }
.input:focus,.select:focus,.textarea:focus{
  outline:none; border-color:var(--bronze);
  background:rgba(var(--wash),.06);
  box-shadow:0 0 0 3px rgba(192,139,69,.16);
}
.field.is-bad .input,.field.is-bad .select,.field.is-bad .textarea{ border-color:var(--alert); }
.field.is-bad .err{ display:block; }
.err{ display:none; font-size:.75rem; color:#DE8E76; }

.paper .input,.paper .select,.paper .textarea{
  color:var(--graphite); background:#fff; border-color:var(--line-p2);
}
.paper .input::placeholder{ color:var(--graphite-3); }

.form-grid{ display:grid; gap:18px; }
@media (min-width:640px){ .form-grid.two{ grid-template-columns:1fr 1fr; } .form-grid .full{ grid-column:1/-1; } }

.note{
  padding:14px 16px; border-radius:var(--r);
  border:1px solid var(--line-2); background:rgba(var(--wash),.03);
  font-size:.8125rem; line-height:1.55; color:var(--mute);
}
.paper .note{ border-color:var(--line-p); background:rgba(20,24,29,.035); color:var(--graphite-3); }

/* ==========================================================================
   Footer
   ========================================================================== */

.foot{ background:var(--ink-1); border-top:1px solid var(--line); padding-block:clamp(52px,6vw,80px) 30px; }
.foot-top{ display:grid; gap:40px; }
@media (max-width:879px){
  .foot-top{ grid-template-columns:1fr 1fr; gap:36px 24px; }
  .foot-top > :first-child, .foot-top > :last-child{ grid-column:1 / -1; }
}
@media (min-width:880px){ .foot-top{ grid-template-columns: 1.4fr repeat(3, minmax(0,.8fr)); gap:48px; } }
.foot h4,.foot .foot-h{ font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); margin-bottom:16px; font-weight:500; }
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.foot a{ font-size:.9375rem; color:var(--ivory-2); text-decoration:none; transition:color var(--t-ui) var(--e-out); }
.foot a:hover{ color:var(--bronze-lt); }
.foot-bar{
  margin-top:clamp(40px,5vw,64px); padding-top:22px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:12px 28px; align-items:center;
}
.foot-bar p{ font-size:.75rem; color:var(--mute-2); }
.foot-bar a{ font-size:.75rem; color:var(--mute); text-decoration:underline; text-underline-offset:3px; }
.foot-bar a:hover{ color:var(--bronze-lt); }

/* The Owner's Letter: one line to leave, nothing else asked for. */
.foot-letter{
  margin-top:clamp(40px,5vw,64px); padding-top:34px; border-top:1px solid var(--line);
  display:grid; gap:22px; align-items:center;
}
@media (min-width:880px){ .foot-letter{ grid-template-columns:1.4fr 1fr; gap:48px; } }
.letter-form{ display:grid; grid-template-columns:1fr auto; gap:10px; position:relative; }
.letter-form .input{ min-height:46px; }
.letter-form .btn{ white-space:nowrap; }
.letter-status{ grid-column:1 / -1; color:var(--mute); margin-top:2px; }
.letter-form.is-done .input,.letter-form.is-done .btn{ display:none; }
.letter-form.is-done .letter-status{ color:var(--ivory-2); font-size:.875rem; }

/* Legal pages */
.legal{ max-width:72ch; }
.legal h2{ font-size:1.0625rem; font-weight:500; letter-spacing:-.01em; margin:38px 0 12px; color:var(--graphite); }
.legal h2:first-child{ margin-top:0; }
.legal p, .legal li{ font-size:.9375rem; line-height:1.7; color:var(--graphite-2); }
.legal p + p{ margin-top:12px; }
.legal ul{ margin:12px 0 0 20px; display:grid; gap:8px; }
.legal a{ color:var(--bronze-dk); }

/* ==========================================================================
   Scroll choreography
   ========================================================================== */

.rise{ opacity:0; transform:translateY(14px); }
.rise.is-in{ opacity:1; transform:none; transition:opacity 620ms var(--e-out), transform 620ms var(--e-out); }
.rise[data-d="1"].is-in{ transition-delay:70ms; }
.rise[data-d="2"].is-in{ transition-delay:140ms; }
.rise[data-d="3"].is-in{ transition-delay:210ms; }
.rise[data-d="4"].is-in{ transition-delay:280ms; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .rise{ opacity:1; transform:none; }
  .hero-media img{ opacity:1; }
  .tl-fill{ transform:scaleX(1); }
}

/* ==========================================================================
   Utilities
   ========================================================================== */

.vh{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.mw-60{ max-width:60ch; }
.mw-52{ max-width:52ch; }
.mw-44{ max-width:44ch; }
.center{ text-align:center; margin-inline:auto; }
.bronze{ color:var(--bronze-lt); }
.paper .bronze{ color:var(--bronze-dk); }
.nowrap{ white-space:nowrap; }

/* --- acknowledgement checkbox --------------------------------------- */
.chk{ display:grid; grid-template-columns:20px 1fr; gap:12px; align-items:start;
  cursor:pointer; font-size:13.5px; line-height:1.6; color:var(--graphite-2); font-weight:400; }
.chk input{ appearance:none; width:18px; height:18px; margin:1px 0 0; border:1px solid var(--line-p2);
  border-radius:4px; background:#fff; cursor:pointer; display:grid; place-items:center;
  transition:border-color var(--t-ui) var(--e-out), background var(--t-ui) var(--e-out); }
.chk input:checked{ background:var(--graphite); border-color:var(--graphite); }
.chk input:checked::after{ content:""; width:9px; height:5px; border-left:1.6px solid var(--paper);
  border-bottom:1.6px solid var(--paper); transform:rotate(-45deg) translate(1px,-1px); }
.chk input:focus-visible{ outline:2px solid var(--bronze); outline-offset:2px; }
.field.is-bad .chk input{ border-color:var(--alert); }
@media (min-width:760px){ .form-grid.three{ grid-template-columns:repeat(3,1fr); } }

/* --------------------------------------------------------- hero sky --
   One aircraft, seen from below, crossing the open sky between the towers.
   Its position is written by turris.js from scroll progress plus a slow idle
   drift, so it is alive at rest and the scroll carries it across the frame.
   The contrail is a gradient bar behind the tail that lengthens with travel. */
.hero-sky{
  position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden;
}
/* Cirrus that moves. Two tiles of the same alpha layer, screen-blended over
   the photograph, masked to the sky channel between the towers, drifting at
   two speeds so the sky has depth. The tile is seamless, so a translate of
   exactly one tile width loops without a cut. */
.hero-clouds{
  position:absolute; inset:0; overflow:hidden; will-change:transform;
  mix-blend-mode:screen; opacity:.8;
  -webkit-mask-image:radial-gradient(ellipse 34% 72% at 50% 34%, #000 34%, rgba(0,0,0,.6) 60%, transparent 100%);
          mask-image:radial-gradient(ellipse 34% 72% at 50% 34%, #000 34%, rgba(0,0,0,.6) 60%, transparent 100%);
}
.hero-clouds .cl{
  position:absolute; left:0; width:calc(100% + 3840px);
  background-image:url("hero/clouds.webp"); background-repeat:repeat-x;
  will-change:transform;
}
/* Fixed tile sizes, so one tile width is a known number of pixels and the
   loop translates by exactly that: seamless at any viewport. */
.hero-clouds .cl-a{ top:-6%; height:1074px; background-size:1920px 1074px; animation:cl-a 200s linear infinite; }
.hero-clouds .cl-b{ top:10%; height:760px; background-size:1360px 760px; opacity:.5; animation:cl-b 320s linear infinite; }
@keyframes cl-a{ to{ transform:translate3d(-1920px,0,0); } }
@keyframes cl-b{ to{ transform:translate3d(-1360px,0,0); } }
@media (max-width:719px){
  .hero-clouds{ opacity:.5; -webkit-mask-image:radial-gradient(ellipse 60% 55% at 60% 22%, #000 30%, transparent 100%); mask-image:radial-gradient(ellipse 60% 55% at 60% 22%, #000 30%, transparent 100%); }
  .hero-clouds .cl{ background-image:url("hero/clouds-m.webp"); }
  .hero-clouds .cl-a{ height:640px; background-size:1144px 640px; animation-name:cl-am; }
  .hero-clouds .cl-b{ height:460px; background-size:822px 460px; animation-name:cl-bm; }
  @keyframes cl-am{ to{ transform:translate3d(-1144px,0,0); } }
  @keyframes cl-bm{ to{ transform:translate3d(-822px,0,0); } }
}
@media (prefers-reduced-motion: reduce){
  .hero-clouds .cl{ animation:none; }
}

/* Phone: every link in the drawer and the footer clears a 44px target. */
@media (max-width:719px){
  .menu-foot a,.foot ul a{ display:inline-block; padding:11px 0; }
  .foot ul{ gap:0; }
  .mark,.tlink,.nav-login{ padding-top:10px; padding-bottom:10px; }
  .tlink{ padding:8px 0; }
}

.article table caption,.tbl caption,table caption{ color:var(--mute); }