/* ==========================================================
   OUR CRADLE, site stylesheet
   Every page loads this one file. Change a token here and it
   changes everywhere. That is the whole reason it is shared.

   Tokens carried over unchanged from the holding page so the
   site and the mark stay in the same world.
   ========================================================== */

:root{
  /* --- brand (unchanged from the holding page) --- */
  --void:  #02060F;
  --cream: #F7EEDA;
  --blue:  #4E9BF5;
  --deep:  #0A3AA8;
  --dim:   #8CA1C2;
  --line:  rgba(247,238,218,.14);

  /* --- added for multi-page surfaces --- */
  --raise:  #070D1A;                 /* card sitting above the void   */
  --raise2: #0B1526;                 /* card hover / nested panel     */
  --hair:   rgba(247,238,218,.075);  /* quieter rule than --line      */
  --wash:   rgba(78,155,245,.10);    /* blue tint behind highlights   */
  --danger: #E8A87C;                 /* placeholder / attention only  */

  --sans:"Jost",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;

  /* Type scale. Four body steps and two mono steps, deliberately.
     Nine sizes between .9 and 1.02rem were indistinguishable one at a
     time and visibly uneven side by side. Do not add a one-off size:
     pick the nearest step. */
  --t-xs:   .78rem;                  /* fine print                    */
  --t-sm:   .875rem;                 /* captions, meta, footer text   */
  --t-md:   .95rem;                  /* secondary body, buttons, UI   */
  --t-base: 1rem;                    /* body copy, inputs, long-form  */
  --t-mono-xs: .625rem;              /* micro labels                  */
  --t-mono-sm: .68rem;               /* kickers                       */

  --gut: clamp(22px,5vw,40px);       /* page side padding             */
  --max: 1120px;                     /* content column                */
  --pad: clamp(72px,10vw,124px);     /* vertical rhythm between bands */
  --r:   14px;                       /* corner radius                 */
}

*{margin:0;padding:0;box-sizing:border-box}

/* The `hidden` attribute is only `display:none` in the UA stylesheet, so any
   class that sets an explicit display (e.g. .form{display:grid}) silently
   beats it. This makes `hidden` mean hidden, everywhere. */
[hidden]{display:none !important}

html{scroll-behavior:smooth}

body{
  background:var(--void);
  color:var(--cream);
  font-family:var(--sans);
  font-size:16px;
  font-weight:300;
  line-height:1.7;
  min-height:100dvh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit}
::selection{background:var(--deep);color:var(--cream)}

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

.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--blue);color:var(--void);
  padding:12px 20px;font-weight:500;border-radius:0 0 var(--r) 0;
}
.skip:focus{left:0}

/* ==========================================================
   1. TYPE SCALE
   Jost 300 for anything large, the geometric forms hold up
   light and stay readable. 500 only for small labels and
   buttons, where thin strokes would disappear.
   ========================================================== */

h1,h2,h3,h4{font-weight:300;line-height:1.12;letter-spacing:-.005em}

h1{font-size:clamp(2.5rem,7vw,4rem)}
h2{font-size:clamp(1.85rem,4.4vw,2.6rem)}
h3{font-size:1.16rem;font-weight:500;line-height:1.4;letter-spacing:0}
h4{font-size:var(--t-base);font-weight:500;line-height:1.45;letter-spacing:0}

/* the accent word inside a headline, carried over from the
   holding page, where <em> was blue and slightly heavier */
h1 em,h2 em{font-style:normal;font-weight:400;color:var(--blue)}

p{max-width:64ch}

.lede{
  font-size:clamp(1.02rem,2.2vw,1.16rem);
  opacity:.92;
  max-width:52ch;
}
.small{font-size:var(--t-sm);color:var(--dim)}
.tiny{font-size:var(--t-xs);color:var(--dim);line-height:1.6}

/* the kicker: mono, wide-tracked, star-marked. Used as the
   label above every section so the reader always knows where
   they are. */
.kicker{
  font-family:var(--mono);
  font-size:var(--t-mono-sm);
  font-weight:500;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--dim);
  display:inline-flex;
  align-items:center;
  gap:.8em;
  margin-bottom:20px;
}
.kicker .star{width:9px;height:9px;flex:none;fill:var(--blue)}

.wordmark{
  font-weight:400;
  letter-spacing:.3em;
  text-transform:uppercase;
  line-height:1;
}

/* ==========================================================
   2. LAYOUT
   ========================================================== */

.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:var(--pad);position:relative}
.section--tight{padding-block:clamp(52px,7vw,84px)}
.section + .section{border-top:1px solid var(--hair)}

.head{max-width:44rem;margin-bottom:clamp(34px,5vw,52px)}
.head p{margin-top:16px}

.grid{display:grid;gap:clamp(14px,2vw,20px)}
@media(min-width:660px){
  .grid--2{grid-template-columns:repeat(2,1fr)}
  .grid--3{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:940px){
  .grid--3{grid-template-columns:repeat(3,1fr)}
  .grid--4{grid-template-columns:repeat(4,1fr)}
}

.split{display:grid;gap:clamp(30px,5vw,64px)}
@media(min-width:900px){
  .split{grid-template-columns:1fr 1fr;align-items:start}
  .split--sticky > :first-child{position:sticky;top:104px}
}

.rule{height:1px;background:var(--line);border:0;margin-block:clamp(30px,4vw,44px)}

/* ==========================================================
   3. BUTTONS
   Labels say what happens. "Request a quote", never "Submit".
   ========================================================== */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--sans);
  font-size:var(--t-md);font-weight:500;letter-spacing:.01em;
  text-align:center;line-height:1.35;
  padding:14px 26px;
  border-radius:999px;
  border:1px solid transparent;
  text-decoration:none;
  cursor:pointer;
  transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease;
}
.btn--primary{background:var(--blue);color:#02060F;border-color:var(--blue)}
.btn--primary:hover{background:#6FAEF8;border-color:#6FAEF8}
.btn--ghost{background:transparent;color:var(--cream);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--blue);color:var(--blue)}
.btn:active{transform:translateY(1px)}
.btn--wide{width:100%}

.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* a plain text link that still reads as a link */
.tlink{
  color:var(--blue);text-decoration:none;
  border-bottom:1px solid rgba(78,155,245,.35);
  padding-bottom:1px;transition:border-color .2s ease;
}
.tlink:hover{border-bottom-color:var(--blue)}

/* ==========================================================
   4. CARDS & LISTS
   ========================================================== */

.card{
  background:var(--raise);
  border:1px solid var(--hair);
  border-radius:var(--r);
  padding:clamp(24px,3vw,30px);
  transition:border-color .25s ease,background .25s ease;
}
.card:hover{border-color:var(--line);background:var(--raise2)}
.card h3{margin-bottom:10px}
.card p{font-size:var(--t-md);color:var(--dim);max-width:none}
.card .kicker{margin-bottom:16px}

/* checklist, bullet is the four-point star from the mark, so
   the brand shows up structurally rather than as decoration */
.ticks{list-style:none;display:grid;gap:11px}
.ticks li{
  position:relative;
  padding-left:26px;
  font-size:var(--t-md);
  line-height:1.6;
}
.ticks li::before{
  content:"";
  position:absolute;left:2px;top:.62em;
  width:9px;height:9px;
  margin-top:-4px;
  background:var(--blue);
  clip-path:polygon(50% 0%,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0% 50%,42% 42%);
}
.ticks--dim li::before{background:var(--dim);opacity:.5}
.ticks--muted li{color:var(--dim)}

/* numbered process, only used where order actually matters */
.steps{list-style:none;counter-reset:s;display:grid;gap:2px}
.steps li{
  counter-increment:s;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:clamp(16px,3vw,30px);
  padding:24px 0;
  border-top:1px solid var(--hair);
}
.steps li:last-child{border-bottom:1px solid var(--hair)}
.steps li::before{
  content:counter(s,decimal-leading-zero);
  font-family:var(--mono);font-size:var(--t-mono-sm);font-weight:500;
  letter-spacing:.16em;color:var(--blue);
  padding-top:.35em;
}
.steps h3{margin-bottom:6px}
.steps p{font-size:var(--t-md);color:var(--dim);max-width:58ch}

/* ==========================================================
   5. NAV
   ========================================================== */

.nav{
  position:sticky;top:0;z-index:40;
  background:rgba(2,6,15,.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease,background .3s ease;
}
.nav.is-stuck{border-bottom-color:var(--hair);background:rgba(2,6,15,.9)}
.nav__in{
  max-width:var(--max);margin-inline:auto;
  padding:14px var(--gut);
  display:flex;align-items:center;gap:18px;
}
.nav__brand{
  display:flex;align-items:center;gap:11px;
  text-decoration:none;color:var(--cream);
  margin-right:auto;
}
.nav__brand img{width:40px;height:40px;flex:none}
.nav__brand span{font-size:var(--t-sm);letter-spacing:.26em;font-weight:400;text-transform:uppercase;padding-left:.26em}

.nav__links{display:none;align-items:center;gap:4px;list-style:none}
.nav__links a{
  display:block;
  font-size:var(--t-md);padding:9px 15px;border-radius:999px;
  text-decoration:none;color:var(--dim);
  transition:color .2s ease,background .2s ease;
}
.nav__links a:hover{color:var(--cream);background:rgba(247,238,218,.05)}
.nav__links a[aria-current="page"]{color:var(--cream)}
.nav__cta{display:none}

.nav__toggle{
  display:grid;place-items:center;
  width:42px;height:42px;
  background:transparent;border:1px solid var(--line);border-radius:10px;
  color:var(--cream);cursor:pointer;
}
.nav__toggle svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.5}
.nav__toggle .x{display:none}
.nav__toggle[aria-expanded="true"] .x{display:block}
.nav__toggle[aria-expanded="true"] .bars{display:none}

.nav__panel{
  display:none;
  border-top:1px solid var(--hair);
  background:rgba(2,6,15,.97);
  padding:10px var(--gut) 26px;
}
.nav__panel.is-open{display:block}
.nav__panel ul{list-style:none}

/* Scoped to `ul a`, NOT `.nav__panel a`. The looser selector was one
   point more specific than `.btn`, so it overrode the button's
   inline-flex display and its 26px side padding. The label fell out
   of centre and collided with the pill edge. Never write a bare
   element selector where a component might live. */
.nav__panel ul a{
  display:block;padding:14px 0;
  border-bottom:1px solid var(--hair);
  text-decoration:none;font-size:var(--t-base);
}
.nav__panel .btn{margin-top:22px}

@media(min-width:900px){
  .nav__links,.nav__cta{display:flex}
  .nav__toggle{display:none}
  .nav__panel{display:none !important}
}

/* ==========================================================
   6. ATMOSPHERE, the signature
   The star field and the deep-blue bloom only appear on the
   hero and the footer. Everywhere a reader has to concentrate
   or type, the background is flat. Motion is a tax on reading.
   ========================================================== */

.sky{position:relative;isolation:isolate;overflow:hidden}
/* Only the content wrapper needs promoting. This used to be a
   `.sky > *:not(.sky__glow):not(.sky__field)` catch-all, which at
   (0,3,0) outranked any component class and forced position:relative
   onto anything else placed inside a .sky section. Same trap as the
   nav button: a broad selector quietly beating a specific one. */
.sky > .wrap{position:relative;z-index:2}
.sky__glow{
  position:absolute;
  top:42%;left:34%;
  width:min(150vw,1080px);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,
    rgba(10,58,168,.38) 0%,
    rgba(10,58,168,.11) 38%,
    transparent 66%);
  pointer-events:none;z-index:0;
}
.sky__field{position:absolute;inset:0;pointer-events:none;z-index:1}

/* A large decorative mark for sparse pages (404, thanks). Sits in the
   empty right half at desktop and is dropped entirely on narrow
   screens, where there is no spare column to fill. aria-hidden: it
   repeats the brand already named in the nav, so a screen reader
   gains nothing from it. */
.bigmark{display:none}
@media(min-width:1000px){
  .bigmark{
    display:block;
    position:absolute;
    right:clamp(40px,7vw,110px);
    top:50%;
    transform:translateY(-50%);
    width:clamp(200px,22vw,300px);
    height:auto;
    opacity:.92;
    filter:drop-shadow(0 0 60px rgba(78,155,245,.30));
    pointer-events:none;
    z-index:2;
  }
}

/* ==========================================================
   7. HERO
   ========================================================== */

.hero{padding-block:clamp(74px,12vw,132px)}
.hero h1{margin-bottom:22px;max-width:16ch}
.hero .lede{margin-bottom:6px}
.hero__note{font-size:var(--t-sm);color:var(--dim);margin-top:14px}

.hero--page{padding-block:clamp(62px,9vw,96px)}
.hero--page h1{font-size:clamp(2.2rem,5.6vw,3.3rem);max-width:20ch}

/* ==========================================================
   8. PRICING
   ========================================================== */

.plan{
  background:var(--raise);
  border:1px solid var(--hair);
  border-radius:var(--r);
  padding:clamp(26px,3.4vw,36px);
  display:flex;flex-direction:column;
}
.plan--lead{border-color:rgba(78,155,245,.34);background:linear-gradient(180deg,var(--wash),transparent 42%),var(--raise)}
.plan__name{font-size:1.2rem;font-weight:400;margin-bottom:8px}
.plan__price{
  font-size:clamp(2.1rem,5vw,2.7rem);font-weight:300;line-height:1.05;
  margin-block:14px 4px;
}
.plan__price small{display:block;font-size:var(--t-sm);color:var(--dim);font-weight:300;margin-top:8px;line-height:1.4}
.plan__for{font-size:var(--t-md);color:var(--dim);margin-bottom:22px;max-width:none}
.plan .ticks{margin-block:22px;flex:1}
.plan .btn{margin-top:8px}

.table{width:100%;border-collapse:collapse;font-size:var(--t-md)}
.table caption{text-align:left;color:var(--dim);font-size:var(--t-sm);padding-bottom:14px}
.table th,.table td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--hair)}
.table th{
  font-family:var(--mono);font-size:var(--t-mono-xs);font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--dim);
}
.table td:last-child,.table th:last-child{text-align:right;white-space:nowrap}
.table tbody tr:hover{background:rgba(247,238,218,.02)}
.table__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ==========================================================
   9. WORK
   ========================================================== */

.case{
  background:var(--raise);
  border:1px solid var(--hair);
  border-radius:var(--r);
  overflow:hidden;
}
.case__body{padding:clamp(26px,3.4vw,38px)}
.case__meta{
  display:flex;flex-wrap:wrap;gap:10px;
  margin-bottom:20px;
}
.tag{
  font-family:var(--mono);font-size:var(--t-mono-xs);font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;
  padding:6px 11px;border-radius:999px;
  border:1px solid var(--line);color:var(--dim);
}
.tag--live{color:var(--blue);border-color:rgba(78,155,245,.4)}
.case dl{display:grid;gap:20px;margin-top:26px}
@media(min-width:720px){.case dl{grid-template-columns:repeat(3,1fr)}}
.case dt{
  font-family:var(--mono);font-size:var(--t-mono-xs);font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--dim);
  margin-bottom:8px;
}
.case dd{font-size:var(--t-md);line-height:1.65}

.quote{
  background:var(--raise);
  border:1px solid var(--hair);
  border-left:2px solid var(--blue);
  border-radius:var(--r);
  padding:clamp(26px,3.4vw,38px);
}
.quote blockquote{font-size:clamp(1.1rem,2.4vw,1.32rem);font-weight:300;line-height:1.55}
.quote figcaption{margin-top:20px;font-size:var(--t-sm);color:var(--dim)}
.quote figcaption strong{color:var(--cream);font-weight:500;display:block}

/* ==========================================================
   10. FORMS
   ========================================================== */

.form{display:grid;gap:20px}
.field{display:grid;gap:8px}
.field > label{
  font-family:var(--mono);font-size:var(--t-mono-xs);font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--dim);
}
.field .opt{text-transform:none;letter-spacing:0;font-family:var(--sans);opacity:.7}

.input,select.input,textarea.input{
  width:100%;
  font-family:var(--sans);font-size:var(--t-base);font-weight:300;
  color:var(--cream);
  background:var(--raise);
  border:1px solid var(--line);
  border-radius:10px;
  padding:13px 15px;
  transition:border-color .2s ease,background .2s ease;
  -webkit-appearance:none;appearance:none;
}
.input::placeholder{color:rgba(140,161,194,.55)}
.input:hover{border-color:rgba(247,238,218,.22)}
.input:focus{outline:none;border-color:var(--blue);background:var(--raise2)}
textarea.input{min-height:140px;resize:vertical;line-height:1.65}
select.input{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238CA1C2' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 15px center;
  background-size:12px;
  padding-right:40px;
}
select.input option{background:#070D1A;color:var(--cream)}

.radios{display:flex;flex-wrap:wrap;gap:10px}
.radios label{
  display:inline-flex;align-items:center;gap:9px;
  font-size:var(--t-md);
  padding:11px 17px;border:1px solid var(--line);border-radius:999px;
  cursor:pointer;transition:border-color .2s ease,background .2s ease;
}
.radios label:hover{border-color:rgba(247,238,218,.26)}
.radios input{accent-color:var(--blue);width:15px;height:15px}
.radios input:checked + span{color:var(--blue)}

/* honeypot, hidden from people, visible to bots */
.hp{position:absolute;left:-5000px;width:1px;height:1px;overflow:hidden}

@media(min-width:640px){.form__row{display:grid;grid-template-columns:1fr 1fr;gap:20px}}

.btn:disabled{opacity:.6;cursor:not-allowed}
.btn:disabled:active{transform:none}

.formstatus{font-size:var(--t-md);line-height:1.55;margin-top:-6px}
.formstatus.is-ok{color:var(--blue)}
.formstatus.is-bad{color:var(--danger)}

.sent{
  background:var(--raise);
  border:1px solid rgba(78,155,245,.34);
  border-radius:var(--r);
  padding:clamp(28px,4vw,42px);
}
.sent:focus{outline:none}
.sent h2{font-size:clamp(1.5rem,3.2vw,2rem)}
.sent p{font-size:var(--t-base)}

/* ==========================================================
   11. NOTICES
   ========================================================== */

.notice{
  border:1px solid var(--line);
  border-left:2px solid var(--danger);
  border-radius:var(--r);
  background:var(--raise);
  padding:20px 24px;
  font-size:var(--t-md);
  color:var(--dim);
}
.notice strong{color:var(--danger);font-weight:500}

/* long-form legal copy */
.prose{max-width:70ch}
.prose h2{font-size:clamp(1.3rem,3vw,1.6rem);margin-top:46px;margin-bottom:14px}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:26px;margin-bottom:8px}
.prose p,.prose li{font-size:var(--t-base);color:rgba(247,238,218,.86)}
.prose p + p{margin-top:14px}
.prose ul,.prose ol{margin:14px 0 14px 22px;display:grid;gap:8px}
.prose a{color:var(--blue)}

/* ==========================================================
   12. FOOTER
   ========================================================== */

.foot{position:relative;border-top:1px solid var(--hair);padding-top:clamp(56px,7vw,80px)}
.foot__grid{display:grid;gap:38px}
@media(min-width:760px){.foot__grid{grid-template-columns:1.6fr 1fr 1fr 1.2fr}}
.foot__brand img{width:clamp(60px,7vw,76px);height:auto;margin-bottom:18px}
.foot__brand p{font-size:var(--t-sm);color:var(--dim);max-width:30ch;margin-top:12px}
.foot__word{font-size:var(--t-sm);color:var(--cream)}

/* portrait on the About page */
.portrait{width:100%;height:auto;aspect-ratio:1;object-fit:cover;
  border-radius:var(--r);border:1px solid var(--hair)}
.foot h4{
  font-family:var(--mono);font-size:var(--t-mono-xs);font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--dim);
  margin-bottom:16px;
}
.foot ul{list-style:none;display:grid;gap:11px}
.foot ul a{font-size:var(--t-md);text-decoration:none;color:rgba(247,238,218,.8);transition:color .2s ease}
.foot ul a:hover{color:var(--blue)}
/* Two groups, not six loose spans. `margin-left:auto` on a single item
   inside a wrapping flex row pushed TERMS right and orphaned PRIVACY
   onto its own line on narrow screens. Grouping keeps them paired at
   every width. */
.foot__base{
  margin-top:clamp(44px,6vw,64px);
  padding-block:24px 30px;
  border-top:1px solid var(--hair);
  display:flex;flex-wrap:wrap;justify-content:space-between;
  gap:12px clamp(18px,4vw,32px);align-items:baseline;
  font-family:var(--mono);font-size:var(--t-mono-xs);
  letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
}
.foot__base > *{display:flex;flex-wrap:wrap;gap:8px clamp(16px,3vw,26px)}
.foot__base a{text-decoration:none;transition:color .2s ease}
.foot__base a:hover{color:var(--cream)}

/* ==========================================================
   13. MOTION
   ========================================================== */

/* The hidden state is scoped to .js, which is set by an inline script in
   the <head>. If JavaScript never runs, nothing is ever hidden and the whole
   page renders as plain content. Reveal-on-scroll must never be load-bearing
   for whether a customer can read the page. */
.js [data-rise]{opacity:0;transform:translateY(16px)}
.js [data-rise].is-in{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.2,.7,.25,1),transform .7s cubic-bezier(.2,.7,.25,1)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js [data-rise]{opacity:1 !important;transform:none !important;transition:none !important}
  *{animation:none !important;transition:none !important}
}