/* Advisor Marketing Partners — global design system.
   One stylesheet for every page. Replaces v4.css (homepage), styles.css
   (article pages) and d1.css (specialization / work), which had drifted into
   three unrelated visual systems on one site.

   Layout contract, obeyed everywhere:
     --wrap      one maximum page width
     --gutter    one page edge
     --measure   one narrow editorial text column
     wide content spans the wrap; it never invents its own edge
     everything is left-aligned unless there is a stated reason
*/

:root{
  /* Dark-green canvas. Deep green is the site, cream is the artifact.
     Three green tones separate adjacent sections; cream panels are reserved
     for things that should feel tangible: forms, prices, deliverables, and
     the website mockups themselves. */
  --bg:#0A2A21;        /* primary canvas */
  --bg2:#0E3126;       /* adjacent section, one step lighter */
  --bg3:#07211A;       /* adjacent section, one step deeper */
  --bg4:#051A14;       /* footer, darkest */
  --ink:#F4F1E8;       /* primary cream, headings */
  --soft:#D6DED8;      /* body copy */
  --mut:#A9BEB4;       /* muted sage: eyebrows, labels, secondary */
  --rule:#234438;      /* sage rule on green */
  --accent:#CFE0D6;    /* links and marks on green */
  --green:#174A3A;     /* brand green, now used on cream panels */
  --green-deep:#10382C;
  /* cream panel: the tangible things */
  --panel:#F4F1E8;
  --panel-ink:#10382C;
  --panel-soft:#3F5348;
  --panel-mut:#5F6F66;
  --panel-rule:#DBD6C8;
  --err:#F0B4AA;       /* error text on green */
  --panel-err:#8A2B20; /* error text on cream */
  /* retained aliases so existing rules keep resolving */
  --band:#07211A;
  --mint:#0E3126;
  --dtext:#F4F1E8;
  --dmut:#D6DED8;
  --drule:#2C5445;
  --dlight:#A9BEB4;
  --link:#CFE0D6;

  --serif:"Tiempos Text","Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:"Söhne","Inter","Helvetica Neue",Arial,sans-serif;

  --wrap:1280px;
  --gutter:48px;
  --measure:62ch;      /* body copy */
  --measure-h:20ch;    /* headlines */
  --gut:56px;          /* column gutter, every grid */

  --s2:8px; --s3:14px; --s4:22px; --s5:34px; --s6:52px; --s7:76px; --s8:112px;
  --sec-pad:112px;
  --nav-height:72px;
}

*{margin:0;padding:0;box-sizing:border-box;border-radius:0}
html{overflow-x:clip;scroll-behavior:auto}
body{background:var(--bg);color:var(--ink);
  font:400 17px/1.65 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
body.menu-open{overflow:hidden}
img{display:block;max-width:100%;height:auto}
ul,ol{list-style:none}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--ink)}
::selection{background:var(--ink);color:var(--bg)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
[id]{scroll-margin-top:calc(var(--nav-height, 72px) + 16px)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.skip{position:absolute;left:-9999px;top:0;background:var(--panel);color:var(--panel-ink);padding:12px 18px;z-index:200}
.skip:focus{left:0;color:#fff}

/* ---------- layout primitives ---------- */
.wrap,.container{max-width:var(--wrap);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.sec{padding-top:var(--sec-pad);padding-bottom:var(--sec-pad)}
.sec-tight{padding-top:var(--s7);padding-bottom:var(--s7)}
.tint{background:var(--bg2)}
.band{background:var(--bg3)}
.dark{background:var(--bg3);color:var(--ink)}
.dark a{color:var(--accent)}
.dark a:hover{color:#fff}
.dark :focus-visible{outline-color:var(--accent)}
.rule-top{border-top:1px solid var(--rule)}

.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gut);align-items:start}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gut);align-items:start}
.grid-side{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--gut);align-items:start}

/* ---------- type ---------- */
.eyebrow{font:500 12px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--mut)}
.dark .eyebrow{color:var(--mut)}
h1,.h1{font-family:var(--serif);font-weight:400;font-size:clamp(38px,5.4vw,72px);line-height:1.02;
  letter-spacing:-.022em;max-width:var(--measure-h);text-wrap:balance}
h2,.h2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.8vw,50px);line-height:1.08;
  letter-spacing:-.018em;max-width:var(--measure-h);text-wrap:balance}
h3,.h3{font-family:var(--serif);font-weight:400;font-size:clamp(21px,2vw,27px);line-height:1.25;letter-spacing:-.01em}
.eyebrow + h1,.eyebrow + h2,.eyebrow + .h1,.eyebrow + .h2{margin-top:var(--s4)}
.lede{font-family:var(--serif);font-size:clamp(19px,1.7vw,23px);line-height:1.55;color:var(--soft);
  max-width:var(--measure);margin-top:var(--s5)}
.dark .lede{color:var(--dmut)}
.p{font-size:17.5px;line-height:1.7;color:var(--soft);max-width:var(--measure);margin-top:var(--s4)}
.dark .p{color:var(--dmut)}
.fine{font-size:14.5px;line-height:1.65;color:var(--mut);max-width:var(--measure)}
.dark .fine{color:var(--dlight)}

/* ---------- buttons and links ---------- */
.btn{display:inline-block;background:var(--panel);color:var(--panel-ink);border:1px solid var(--panel);
  padding:16px 26px;font:500 15.5px/1 var(--sans);white-space:nowrap;cursor:pointer}
.btn:hover{background:#fff;border-color:#fff;color:var(--green-deep)}
.btn[disabled]{opacity:.6;cursor:default}
.btn-ghost{display:inline-block;font:500 15.5px/1 var(--sans);color:var(--accent);
  border-bottom:1px solid var(--accent);padding-bottom:4px}
.btn-ghost:hover{color:var(--ink);border-color:var(--ink)}
.arrow,.link-row{font:500 15.5px/1.4 var(--sans);border-bottom:1px solid currentColor;padding-bottom:3px}
.cta-row{display:flex;align-items:center;gap:30px;flex-wrap:wrap;margin-top:var(--s6)}

/* ---------- header ---------- */
.nav{position:sticky;top:0;z-index:60;background:rgba(10,42,33,.94);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:26px;
  padding-top:17px;padding-bottom:17px}
.brand{font-family:var(--serif);font-size:20px;letter-spacing:-.012em;color:var(--ink);white-space:nowrap}
.brand:hover{color:var(--accent)}
.nav-links{display:flex;gap:30px}
.nav-links a{font:400 15.5px/1 var(--sans);color:var(--mut)}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--ink)}
.nav-right{display:flex;align-items:center;gap:20px}
.nav-cta{font:500 15px/1 var(--sans);color:var(--ink);border-bottom:1px solid var(--accent);
  padding-bottom:4px;white-space:nowrap}
.nav-cta:hover{color:var(--accent);border-color:var(--ink)}
.nav-menu{display:none;min-width:44px;min-height:44px;background:none;border:none;cursor:pointer;
  font:500 15px/1 var(--sans);color:var(--ink)}
.menu-panel{border-top:1px solid var(--rule);background:var(--bg);padding-bottom:26px}
.menu-panel[hidden]{display:none}
.menu-panel ul{padding-top:10px}
.menu-panel li a{display:block;padding:14px 0;font:400 19px/1 var(--sans);color:var(--ink);
  border-bottom:1px solid var(--rule)}
.menu-panel .btn{margin-top:22px}

/* ---------- footer ---------- */
.foot{background:var(--bg4);color:var(--ink);padding-top:var(--s7);padding-bottom:var(--s6);margin-top:0}
.foot-top{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--gut);flex-wrap:wrap;
  padding-bottom:var(--s6);border-bottom:1px solid var(--drule)}
.foot-brand{font-family:var(--serif);font-size:clamp(24px,2.6vw,34px);line-height:1.15;letter-spacing:-.016em;max-width:18ch}
.foot-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5) var(--gut);padding:var(--s6) 0}
.foot-k{font:500 12px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--mut);margin-bottom:16px}
.foot-cols a{display:block;font-size:15.5px;line-height:1.5;color:var(--mut);padding:5px 0}
.foot-cols a:hover{color:#fff}
.foot-legal{font-size:13.5px;line-height:1.7;color:var(--mut);padding-top:var(--s5);
  border-top:1px solid var(--rule);max-width:96ch}

/* ---------- hero ---------- */
.hero{padding-top:var(--s8);padding-bottom:var(--s5)}
.hero .h1{max-width:17ch}
.hero .lede{max-width:58ch}
.hero-exec{font-size:16.5px;line-height:1.6;color:var(--mut);max-width:56ch;margin-top:var(--s4);
  padding-top:var(--s4);border-top:1px solid var(--rule)}
.page-head{padding-top:var(--s7);padding-bottom:var(--s6)}
.breadcrumb{font-size:14px;color:var(--mut);margin-bottom:var(--s4)}
.breadcrumb a{color:var(--mut)}
.breadcrumb a:hover{color:var(--green)}

/* ---------- website frame: the before/after artifact ----------
   Same frame on the homepage, the work index and the case study, so the three
   pages read as one system. The "after" earns emphasis through type and nav
   density, not through a different box. */
.cmp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gut);
  margin-top:var(--s6);align-items:stretch}
.cmp-col{display:flex;flex-direction:column;min-width:0}
.cmp-k{font:500 12px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--mut);
  padding-bottom:14px;border-bottom:1px solid var(--rule);margin-bottom:var(--s4)}
.cmp-k.on{color:var(--ink);border-bottom-color:var(--accent)}
.site{flex:1 1 auto;background:#fff;border:1px solid rgba(0,0,0,.08);display:flex;flex-direction:column;
  box-shadow:0 24px 60px -34px rgba(0,0,0,.55)}
.site-bar{display:flex;justify-content:space-between;align-items:center;gap:18px;
  padding:15px 22px;border-bottom:1px solid var(--panel-rule);flex-wrap:wrap}
.site-nm{font-family:var(--serif);font-size:16.5px;color:#111714}
.site-mn{display:flex;flex-wrap:wrap;color:#656D69}
.site-body{flex:1 1 auto;padding:clamp(38px,3.8vw,56px) 26px clamp(34px,3.4vw,50px)}
.site.b .site-nm{font-family:var(--sans);font-size:14px;font-weight:600;color:#3A403C}
.site.b .site-mn{gap:11px;font-size:11px}
.site.b .site-h{font-family:var(--sans);font-size:clamp(17px,1.5vw,20px);font-weight:600;line-height:1.3;color:#3A403C;max-width:30ch}
.site.b .site-s{font-size:14px;line-height:1.5;color:#656D69;margin-top:11px;max-width:46ch}
.site.b .site-btn{display:inline-block;margin-top:20px;background:#E7E7E2;color:#5A605C;padding:9px 17px;font:500 12.5px/1 var(--sans)}
.site.a .site-mn{gap:22px;font-size:13px}
.site.a .site-h{font-family:var(--serif);font-size:clamp(26px,2.8vw,38px);line-height:1.04;letter-spacing:-.024em;color:#111714}
.site.a .site-s{font-family:var(--serif);font-size:clamp(16px,1.4vw,18.5px);line-height:1.6;color:#656D69;margin-top:16px;max-width:33ch}
.site.a .site-btn{display:inline-block;margin-top:26px;font:500 14.5px/1 var(--sans);color:var(--green);
  border-bottom:1px solid var(--green);padding-bottom:3px}

/* artifact comparison rows, on the same two columns as the frames above */
.ax{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 var(--gut);margin-top:var(--s6)}
.ax-k{grid-column:1 / -1;font:500 12px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;
  color:var(--mut);border-top:1px solid var(--rule);padding-top:16px;margin-top:var(--s5)}
.ax-k:first-child{margin-top:0}
.ax-v{font-family:var(--serif);font-size:clamp(17px,1.5vw,20px);line-height:1.45;padding:18px 0 26px}
.ax-v.b{color:var(--mut)}
.ax-v.a{color:var(--ink)}
.ax-v:nth-last-child(-n+2){border-bottom:1px solid var(--rule)}

/* ---------- bordered stack: lists that carry weight ---------- */
.stack{margin-top:var(--s6)}
.stack li{font-family:var(--serif);font-size:clamp(19px,1.7vw,23px);line-height:1.4;color:var(--ink);
  padding:20px 0;border-top:1px solid var(--rule);max-width:56ch}
.stack li:last-child{border-bottom:1px solid var(--rule)}
.dark .stack li{color:var(--dtext);border-top-color:var(--drule)}
.dark .stack li:last-child{border-bottom-color:var(--drule)}
.stack.num{counter-reset:n}
.stack.num li{counter-increment:n;position:relative;padding-left:52px}
.stack.num li::before{content:counter(n);position:absolute;left:0;top:22px;font:400 14px/1 var(--sans);color:var(--mut)}
.dark .stack.num li::before{color:var(--dlight)}

/* ---------- service stage blocks ---------- */
.stage{padding:var(--s6) 0;border-top:1px solid var(--rule)}
.stage:last-of-type{border-bottom:1px solid var(--rule)}
.stage-k{font:500 12px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--mut)}
.stage h3{margin-top:14px;max-width:22ch}
.stage-list{margin-top:var(--s4)}
.stage-list li{font-size:16.5px;line-height:1.6;color:var(--soft);padding:7px 0 7px 20px;position:relative;max-width:48ch}
.stage-list li::before{content:"";position:absolute;left:0;top:16px;width:8px;height:1px;background:var(--accent)}
.stage-note{font-size:15px;line-height:1.65;color:var(--mut);margin-top:var(--s4);max-width:48ch}

/* ---------- key/value terms ---------- */
.terms{margin-top:var(--s5)}
.terms .t{display:flex;justify-content:space-between;align-items:baseline;gap:24px;
  padding:15px 0;border-top:1px solid var(--rule)}
.terms .t:last-child{border-bottom:1px solid var(--rule)}
.dark .terms .t{border-top-color:var(--drule)}
.dark .terms .t:last-child{border-bottom-color:var(--drule)}
.terms .k{font-size:15.5px;color:var(--mut)}
.dark .terms .k{color:var(--dmut)}
.terms .v{font-family:var(--serif);font-size:clamp(19px,1.8vw,23px)}

/* ---------- Review deliverable preview ---------- */
.doc{background:var(--panel);color:var(--panel-ink);border:1px solid rgba(0,0,0,.08);
  box-shadow:0 24px 60px -34px rgba(0,0,0,.55)}
.doc-head{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:15px 22px;
  border-bottom:1px solid var(--panel-rule);font:500 11.5px/1.4 var(--sans);letter-spacing:.14em;
  text-transform:uppercase;color:var(--panel-mut)}
.doc-body{padding:4px 22px 18px}
.doc-row{padding:17px 0;border-bottom:1px solid var(--panel-rule)}
.doc-row:last-child{border-bottom:none}
.doc-k{font:400 13px/1.4 var(--sans);color:var(--green)}
.doc-v{font-family:var(--serif);font-size:16.5px;line-height:1.5;color:var(--panel-ink);margin-top:7px}
.doc-ol{list-style:decimal;padding-left:19px;margin-top:9px;font-family:var(--serif);font-size:16.5px;line-height:1.5;color:var(--panel-ink)}
.doc-ol li{padding-bottom:5px}
.doc-ol li:last-child{padding-bottom:0}

/* ---------- work index card ---------- */
.case{display:block;border-top:1px solid var(--accent);padding-top:var(--s5);margin-top:var(--s6)}
.case-tags{font:500 12px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.case h3{margin-top:16px;font-size:clamp(26px,2.8vw,38px);line-height:1.1;letter-spacing:-.016em;max-width:20ch}
.case-p{font-size:17px;line-height:1.65;color:var(--soft);margin-top:16px;max-width:52ch}
.case-go{display:inline-block;margin-top:var(--s4)}
.case-shot{margin-top:var(--s5)}
.reserved{border-top:1px solid var(--rule);padding-top:var(--s5);margin-top:var(--s6);
  font-size:15.5px;line-height:1.7;color:var(--mut);max-width:56ch}

/* ---------- form ---------- */
.form{margin-top:var(--s6);max-width:820px;background:var(--panel);color:var(--panel-ink);
  padding:clamp(30px,3.6vw,52px);box-shadow:0 24px 60px -34px rgba(0,0,0,.55)}
.form[hidden]{display:none}
.form-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px var(--gut)}
.field{min-width:0}
.field.wide{grid-column:1 / -1}
.field label{display:block;font:400 15px/1.4 var(--sans);color:var(--panel-mut);margin-bottom:7px}
.field .opt{color:var(--panel-mut)}
.field input,.field textarea{width:100%;border:none;border-bottom:2px solid var(--panel-ink);background:transparent;
  padding:13px 0;font:400 19px/1.5 var(--sans);color:var(--panel-ink);-webkit-appearance:none}
.field textarea{resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-bottom-color:var(--green)}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-bottom-color:var(--panel-err)}
.field-err{font-size:14px;line-height:1.5;color:var(--panel-err);margin-top:8px}
.field-err[hidden]{display:none}
.form-send{margin-top:var(--s6);display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.form-send .fine{max-width:44ch;color:var(--panel-mut)}
.form-status{font-size:15.5px;line-height:1.6;color:var(--panel-err);margin-top:var(--s4)}
.form-status:empty{display:none}
.form-done{display:none;margin-top:var(--s6);max-width:820px;background:var(--panel);color:var(--panel-ink);
  padding:clamp(30px,3.6vw,52px);box-shadow:0 24px 60px -34px rgba(0,0,0,.55)}
.form-done.is-active{display:block}
.form-done h2{font-size:clamp(24px,2.6vw,32px)}
.form-done h2{color:var(--panel-ink);max-width:24ch}
.form-done p{font-family:var(--serif);font-size:18px;line-height:1.6;color:var(--panel-soft);margin-top:14px}

/* ---------- FAQ ---------- */
.faq{margin-top:var(--s6);max-width:76ch}
.faq details{border-top:1px solid var(--rule)}
.faq details:last-of-type{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;padding:20px 0;font-family:var(--serif);
  font-size:clamp(18px,1.6vw,21px);line-height:1.35;color:var(--ink);position:relative;padding-right:34px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:20px;color:var(--accent);font-family:var(--sans);font-size:19px}
.faq details[open] summary::after{content:"–"}
.faq-body{padding:0 0 22px}
.faq-body p{font-size:16.5px;line-height:1.7;color:var(--soft);max-width:66ch}
.faq-body p + p{margin-top:12px}

/* ---------- misc content ---------- */
.meta{font-size:14.5px;line-height:1.65;color:var(--mut)}
.byline{font-size:14.5px;color:var(--mut);margin-top:var(--s4)}
.prose{max-width:var(--measure)}
.prose h2{margin:var(--s6) 0 var(--s4)}
.prose h3{margin:var(--s5) 0 var(--s3)}
.prose p{font-size:17.5px;line-height:1.75;color:var(--soft);margin-bottom:var(--s4)}
.prose ul,.prose ol{margin:0 0 var(--s4);padding-left:22px}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li{font-size:17.5px;line-height:1.75;color:var(--soft);margin-bottom:8px}
.prose a{border-bottom:1px solid var(--rule)}
.disclaim{font-size:14px;line-height:1.7;color:var(--mut);max-width:80ch;margin-top:var(--s4)}

/* ================================================================
   LEGACY COMPATIBILITY
   The article pages still carry markup written against styles.css. Rather
   than rewrite eleven pages of body copy, their class names are mapped onto
   the tokens above so they inherit the same grid, type and rhythm.
   ================================================================ */
.rr-sect{padding-top:var(--s6);padding-bottom:var(--s6)}
.rr-sect.rr-secondary{background:var(--mint)}
.rr-head{padding-top:var(--s7);padding-bottom:var(--s5)}
.rr-head h1{margin-bottom:0}
.rr-lede{font-family:var(--serif);font-size:clamp(19px,1.7vw,23px);line-height:1.55;color:var(--soft);
  max-width:var(--measure);margin-top:var(--s5)}
.rr-intro,.rr-narrow{font-size:17.5px;line-height:1.75;color:var(--soft);max-width:var(--measure);margin-top:var(--s4)}
.rr-narrow a,.rr-intro a{border-bottom:1px solid var(--rule)}
.rr-sect h2{margin-bottom:var(--s3)}
.rr-list,.rr-notlist,.rr-receive{margin-top:var(--s4);padding-left:22px;list-style:disc;max-width:var(--measure)}
.rr-list li,.rr-notlist li,.rr-receive li{font-size:17.5px;line-height:1.7;color:var(--soft);margin-bottom:10px}
.rr-list li::marker,.rr-notlist li::marker,.rr-receive li::marker{color:var(--green)}
.rr-steps{margin-top:var(--s4);padding-left:22px;list-style:decimal;max-width:var(--measure)}
.rr-steps li{font-size:17.5px;line-height:1.7;color:var(--soft);margin-bottom:12px}
.rr-steps li::marker{color:var(--green)}
.rr-core{font-family:var(--serif);font-size:clamp(21px,2vw,27px);line-height:1.35;color:var(--ink);
  max-width:34ch;margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--ink)}
.rr-quiet{color:var(--mut);font-size:16px}
.rr-two-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gut);align-items:start}
.rr-back{margin-top:var(--s5)}
.rr-faq{margin-top:var(--s5);max-width:76ch}
.rr-faq details{border-top:1px solid var(--rule)}
.rr-faq details:last-of-type{border-bottom:1px solid var(--rule)}
.rr-faq summary{list-style:none;cursor:pointer;padding:20px 0;font-family:var(--serif);
  font-size:clamp(18px,1.6vw,21px);line-height:1.35;color:var(--ink);position:relative;padding-right:34px}
.rr-faq summary::-webkit-details-marker{display:none}
.rr-faq summary::after{content:"+";position:absolute;right:4px;top:20px;color:var(--green);font-family:var(--sans);font-size:19px}
.rr-faq details[open] summary::after{content:"–"}
.rr-faq-body{padding:0 0 22px}
.rr-faq-body p{font-size:16.5px;line-height:1.7;color:var(--soft);max-width:66ch}
.rr-invest{background:var(--band);padding:var(--s5);margin-top:var(--s5);max-width:var(--measure)}
.rr-invest p{font-size:16.5px;line-height:1.7;color:var(--soft);margin-bottom:12px}
.rr-price{font-family:var(--serif);font-size:clamp(34px,4vw,52px);line-height:1;letter-spacing:-.022em;color:var(--ink);margin-bottom:14px}
.rr-cta-sub{font-size:14.5px;color:var(--mut);margin-top:14px}
.rr-positioning{font-size:15.5px;line-height:1.7;color:var(--mut);max-width:var(--measure);margin-top:var(--s4)}
.rr-compliance{margin-top:var(--s4)}
.rr-submit-row{margin-top:var(--s5);display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.rr-form-status{font-size:15.5px;color:var(--err);margin-top:var(--s4)}
.rr-form-status:empty{display:none}
.rr-confirmation{display:none}
.rr-confirmation.is-active{display:block}
.rr-field{margin-bottom:26px}
.rr-field label{display:block;font:400 15px/1.4 var(--sans);color:var(--mut);margin-bottom:7px}
.rr-field input,.rr-field textarea{width:100%;border:none;border-bottom:2px solid var(--ink);background:transparent;
  padding:11px 0;font:400 19px/1.5 var(--sans);color:var(--ink);-webkit-appearance:none}
.rr-field input:focus,.rr-field textarea:focus{outline:none;border-bottom-color:var(--green)}
.rr-error{font-size:14px;color:var(--err);margin-top:8px}
.rr-error[hidden]{display:none}
.rr-req,.rr-opt{color:var(--mut)}
.rr-hint{font-size:14.5px;color:var(--mut);margin-bottom:6px}
.rr-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.rr-trust{max-width:var(--measure)}
.article{max-width:var(--measure);padding-top:var(--s6);padding-bottom:var(--s6)}
.article h1{margin-bottom:var(--s4)}
.article h2{font-size:clamp(24px,2.4vw,32px);margin:var(--s6) 0 var(--s3)}
.article h3{font-size:20px;margin:var(--s5) 0 10px}
.article p{font-size:17.5px;line-height:1.75;color:var(--soft);margin-bottom:var(--s4)}
.article ul,.article ol{margin:0 0 var(--s4);padding-left:22px}
.article ul{list-style:disc}
.article ol{list-style:decimal}
.article li{font-size:17.5px;line-height:1.75;color:var(--soft);margin-bottom:8px}
.article a{border-bottom:1px solid var(--rule)}
.article-cta{background:var(--green);color:var(--dtext);padding:var(--s5);margin:var(--s6) 0}
.article-cta h2{color:var(--dtext);margin-top:0}
.article-cta p{color:var(--dmut)}
.article-cta .btn{background:var(--bg);color:var(--green);border-color:var(--bg)}
.article-ba{border:1px solid var(--rule);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin:var(--s4) 0}
.article-ba > div{padding:22px 24px}
.article-ba .ba-b{background:var(--band)}
.article-ba .ba-a{border-left:3px solid var(--green)}
.ba-t{font:500 11px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.article-ba .ba-a .ba-t{color:var(--green)}
.ba-h{font-family:var(--serif);font-size:19px;line-height:1.3;margin-top:8px}
.article-faq details{border-top:1px solid var(--rule);padding:14px 0}
.article-faq summary{list-style:none;cursor:pointer;font:500 17px/1.4 var(--sans);color:var(--ink)}
.article-faq summary::-webkit-details-marker{display:none}
.def-block{border-left:2px solid var(--green);padding-left:22px;margin:var(--s5) 0}
.checklist{margin-top:var(--s4);padding-left:22px;list-style:disc}
.checklist li{font-size:17.5px;line-height:1.75;color:var(--soft);margin-bottom:8px}
.ins-card{border-top:1px solid var(--rule);padding:var(--s5) 0}
.ins-card:last-of-type{border-bottom:1px solid var(--rule)}
.ins-card h2,.ins-card h3{font-size:clamp(22px,2.2vw,30px);line-height:1.15;max-width:26ch}
.ins-card-meta,.ins-card-cat{font:500 12px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--mut);margin-bottom:14px}
.ins-card-dek{font-size:17px;line-height:1.65;color:var(--soft);margin-top:14px;max-width:58ch}
.ins-card-read{display:inline-block;margin-top:18px;font:500 15px/1 var(--sans);color:var(--green);
  border-bottom:1px solid var(--green);padding-bottom:3px}
.lookup-stages{margin-top:var(--s4);display:flex;flex-wrap:wrap;gap:16px 30px}
.eng{margin-top:var(--s5)}
.eng .nm{font-family:var(--serif);font-size:clamp(21px,2vw,26px);line-height:1.2}
.eng .pr{font-family:var(--serif);font-size:19px;color:var(--green)}
.sx-btn{display:inline-block;background:var(--green);color:#fff;padding:16px 26px;font:500 15.5px/1 var(--sans)}
.sx-btn:hover{background:var(--green-deep);color:#fff}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width:1080px){
  :root{--gutter:32px;--gut:40px;--sec-pad:88px}
  .nav-links{display:none}
  .nav-menu{display:inline-block}
  .foot-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  :root{--sec-pad:76px}
  .grid2,.grid3,.grid-side,.cmp,.rr-two-col,.article-ba{grid-template-columns:minmax(0,1fr)}
  .cmp{gap:40px}
  .ax{grid-template-columns:minmax(0,1fr)}
  .ax-v.b{padding-bottom:12px}
  .ax-v:nth-last-child(-n+2){border-bottom:none}
  .ax-v.a{border-bottom:1px solid var(--rule)}
  .form-grid{grid-template-columns:minmax(0,1fr);gap:24px}
  .foot-top{align-items:flex-start}
}
@media (max-width:640px){
  :root{--gutter:22px;--sec-pad:60px;--s6:40px;--s7:56px;--s8:72px}
  body{font-size:16.5px}
  .brand{font-size:17px}
  .site-mn{display:none}
  .site-body{padding-left:20px;padding-right:20px}
  .doc-head,.doc-body{padding-left:18px;padding-right:18px}
  .foot-cols{grid-template-columns:minmax(0,1fr);gap:var(--s5)}
  .btn{display:block;text-align:center;white-space:normal}
  .cta-row{gap:22px}
  .stack.num li{padding-left:38px}
}
/* The nav row's min-content width is brand + Menu + CTA, all nowrap. The
   wordmark has to yield before that total exceeds the viewport, which happens
   just above 400px, not below it. */
@media (max-width:470px){
  .brand{white-space:normal;font-size:16px;line-height:1.15;max-width:9ch}
  .nav-in{gap:12px}
}
@media (max-width:400px){
  .terms .t{flex-wrap:wrap;gap:4px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ================================================================
   Components added for the offer, deliverable, process and price
   presentations. Same tokens, same left edge, same rhythm.
   ================================================================ */

/* Price bar: the offer stated once, at the top of the Review page. */
.pricebar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--gut);align-items:center;
  margin-top:var(--s6);padding:var(--s5) 0;border-top:1px solid var(--accent);border-bottom:1px solid var(--accent)}
.pricebar-fig{display:flex;flex-direction:column;gap:6px}
.pricebar-n{font-family:var(--serif);font-size:clamp(38px,4.4vw,58px);line-height:1;letter-spacing:-.024em}
.pricebar-k{font:500 12px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--mut)}
.pricebar-meta p{font-size:16px;line-height:1.6;color:var(--soft);max-width:44ch}
.pricebar-meta p + p{margin-top:8px}

/* Offer block: who it is for, what is included, what it costs. */
.offer{border-top:1px solid var(--accent);padding-top:var(--s5);margin-top:var(--s7)}
.offer:first-of-type{margin-top:0}
.offer-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--gut);flex-wrap:wrap}
.offer-head h2{margin-top:12px;max-width:16ch}
.offer-price{font-family:var(--serif);font-size:clamp(30px,3.4vw,44px);line-height:1;letter-spacing:-.022em;white-space:nowrap}
.offer-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gut);margin-top:var(--s5)}
.offer-for{font-family:var(--serif);font-size:clamp(19px,1.7vw,22px);line-height:1.45;color:var(--ink);max-width:32ch}
.offer-list li{font-size:16.5px;line-height:1.6;color:var(--soft);padding:9px 0 9px 20px;position:relative;
  border-bottom:1px solid var(--rule)}
.offer-list li:first-child{border-top:1px solid var(--rule)}
.offer-list li::before{content:"";position:absolute;left:0;top:18px;width:8px;height:1px;background:var(--accent)}
.offer-foot{display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap;margin-top:var(--s5)}
.offer-foot .fine{max-width:46ch}

/* Deliverables: an even set of short blocks, never a card grid. */
.deliverables{margin-top:var(--s6);gap:0 var(--gut)}
.deliv{border-top:1px solid var(--rule);padding:var(--s5) 0}
.deliv-n{font:500 12px/1.4 var(--sans);letter-spacing:.18em;color:var(--mut);margin-bottom:14px}
.deliv h3{max-width:22ch}
.deliv-p{font-size:16.5px;line-height:1.65;color:var(--soft);margin-top:12px;max-width:44ch}

/* Process: four stages, numbered, no diagram. */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gut);margin-top:var(--s6)}
.step{border-top:1px solid var(--rule);padding-top:var(--s4)}
.dark .step{border-top-color:var(--drule)}
.step-n{font:500 12px/1.4 var(--sans);letter-spacing:.18em;color:var(--mut);margin-bottom:14px}
.dark .step-n{color:var(--dlight)}
.step h3{font-size:clamp(19px,1.8vw,23px)}
.step-p{font-size:15.5px;line-height:1.6;color:var(--soft);margin-top:10px}
.dark .step-p{color:var(--dmut)}

/* Work preview gets a hover state so it reads as a link, not a picture. */
a.case-link{display:block;color:inherit}
a.case-link:hover{color:inherit}
a.case-link:hover .site{border-color:var(--green)}
a.case-link .site{transition:border-color .18s ease}

@media (max-width:1080px){
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--s5)}
}
@media (max-width:900px){
  .pricebar{grid-template-columns:minmax(0,1fr);gap:var(--s4);align-items:start}
  .offer-body{grid-template-columns:minmax(0,1fr)}
  .deliverables{gap:0}
}
@media (max-width:640px){
  .steps{grid-template-columns:minmax(0,1fr)}
  .offer-head{gap:var(--s3)}
  .offer-foot{gap:var(--s4)}
}


/* ================================================================
   DARK CANVAS: cream-panel interiors
   Anything inside a cream panel flips back to dark-on-light, including the
   submit button, which must not be cream on cream.
   ================================================================ */
.form .btn,.rr-invest .btn,.panel .btn{background:var(--green);color:#fff;border-color:var(--green)}
.form .btn:hover,.rr-invest .btn:hover,.panel .btn:hover{background:var(--green-deep);border-color:var(--green-deep);color:#fff}
.form a,.form-done a,.rr-invest a{color:var(--green)}
.form a:hover,.form-done a:hover,.rr-invest a:hover{color:var(--panel-ink)}
.form :focus-visible,.form-done :focus-visible{outline-color:var(--green)}
.form .fine{color:var(--panel-mut)}

/* ---------- legacy article pages on the dark canvas ---------- */
.rr-sect.rr-secondary{background:var(--bg2)}
.rr-lede,.rr-intro,.rr-narrow{color:var(--soft)}
.rr-narrow a,.rr-intro a{border-bottom:1px solid var(--rule)}
.rr-list li,.rr-notlist li,.rr-receive li,.rr-steps li{color:var(--soft)}
.rr-list li::marker,.rr-notlist li::marker,.rr-receive li::marker,.rr-steps li::marker{color:var(--mut)}
.rr-core{color:var(--ink);border-top-color:var(--accent)}
.rr-quiet{color:var(--mut)}
.rr-invest{background:var(--panel);color:var(--panel-ink);padding:var(--s5);
  box-shadow:0 24px 60px -34px rgba(0,0,0,.55)}
.rr-invest p{color:var(--panel-soft)}
.rr-price{color:var(--panel-ink)}
.rr-cta-sub{color:var(--panel-mut)}
.rr-positioning{color:var(--mut)}
.rr-faq details{border-top-color:var(--rule)}
.rr-faq details:last-of-type{border-bottom-color:var(--rule)}
.rr-faq summary{color:var(--ink)}
.rr-faq summary::after{color:var(--accent)}
.rr-faq-body p{color:var(--soft)}
.rr-field label{color:var(--panel-mut)}
.rr-field input,.rr-field textarea{border-bottom-color:var(--panel-ink);color:var(--panel-ink)}
.rr-error{color:var(--panel-err)}
.rr-req,.rr-opt,.rr-hint{color:var(--panel-mut)}
.rr-form-status{color:var(--err)}

/* Long-form articles get a readable cream column inside the dark frame. */
.article{background:var(--panel);color:var(--panel-ink);
  padding:clamp(34px,4vw,64px) clamp(26px,3.4vw,56px);margin:var(--s6) auto;
  max-width:calc(var(--measure) + 8vw);box-shadow:0 24px 60px -34px rgba(0,0,0,.5)}
.article h1,.article h2,.article h3{color:var(--panel-ink)}
.article p,.article li{color:var(--panel-soft)}
.article a{color:var(--green);border-bottom:1px solid var(--panel-rule)}
.article a:hover{color:var(--panel-ink)}
.article .meta,.article .byline{color:var(--panel-mut)}
.article-cta{background:var(--green);color:var(--ink)}
.article-cta h2{color:var(--ink)}
.article-cta p{color:var(--dmut)}
.article-cta .btn{background:var(--panel);color:var(--panel-ink);border-color:var(--panel)}
.article-ba{border-color:var(--panel-rule)}
.article-ba .ba-b{background:#EDE9DC}
.article-ba .ba-a{border-left-color:var(--green)}
.article-ba .ba-t{color:var(--panel-mut)}
.article-ba .ba-h{color:var(--panel-ink)}
.article-faq details{border-top-color:var(--panel-rule)}
.article-faq summary{color:var(--panel-ink)}
.def-block{border-left-color:var(--green)}
.def-block,.checklist li{color:var(--panel-soft)}
.prose p,.prose li{color:var(--soft)}
.prose a{border-bottom-color:var(--rule)}
.ins-card{border-top-color:var(--rule)}
.ins-card:last-of-type{border-bottom-color:var(--rule)}
.ins-card h2,.ins-card h3{color:var(--ink)}
.ins-card-meta,.ins-card-cat{color:var(--mut)}
.ins-card-dek{color:var(--soft)}
.ins-card-read{color:var(--accent);border-bottom-color:var(--accent)}
.eng .pr{color:var(--accent)}
.sx-btn{background:var(--panel);color:var(--panel-ink)}
.sx-btn:hover{background:#fff;color:var(--green-deep)}
.breadcrumb,.breadcrumb a{color:var(--mut)}
.breadcrumb a:hover{color:var(--ink)}
.terms .k{color:var(--mut)}
.meta,.byline{color:var(--mut)}

/* `.dark a` carries a class plus an element and out-specifies `.btn`, which
   painted cream buttons with the link colour inside dark sections. */
.dark a.btn{color:var(--panel-ink)}
.dark a.btn:hover{color:var(--green-deep)}
.dark a.sx-btn{color:var(--panel-ink)}

/* Anything sitting on a cream panel needs panel-tone secondary text, not the
   sage that is tuned for the green canvas. */
.form .meta,.form-done .meta,.rr-invest .meta,.article .meta,
.form .fine,.form-done .fine,.rr-invest .fine{color:var(--panel-mut)}
.article .breadcrumb,.article .breadcrumb a{color:var(--panel-mut)}
.article .breadcrumb a:hover{color:var(--panel-ink)}