/* =========================================================
   Fewer Words — one-page site
   Palette: ocean blue, sapphire, aqua — deep-sea ink on cool paper
   ========================================================= */

:root{
  /* ocean paper — a cool, low-glare ground */
  --paper:      #edf5f9;
  --paper-2:    #dcecf3;
  --paper-3:    #f9fcfe;

  /* deep-sea ink */
  --ink:        #05202e;
  --ink-soft:   #1c4256;
  --ink-faint:  #3d6779;

  /* the blue pencil */
  --sapphire:      #0f4fb5;
  --sapphire-deep: #0a3a8a;
  --aqua:          #14bcd4;
  --ocean:         #063a56;

  /* reserved for form errors only — never decorative */
  --warn:       #c0392b;

  --rule:       #bfd8e4;
  --rule-soft:  #d5e8f0;

  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body:    "Source Serif 4", Georgia, "Times New Roman", serif;
  /* labels and buttons: a clear sans, far easier to read small than mono */
  --mono:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --wrap: 1160px;
  --pad: clamp(20px, 5vw, 48px);
  --ease: cubic-bezier(.22,.61,.36,1);
}

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

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  /* large-print baseline: every rem below scales from here */
  font-size:clamp(17px, .3vw + 15.7px, 19px);
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:1.2rem;
  line-height:1.72;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* subtle paper grain over everything */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:9999;
  opacity:.016;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.6) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.4) 0 1px, transparent 1px 4px);
}

img{ max-width:100%; display:block; }

a{ color:inherit; }

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

.skip{
  position:absolute; left:-9999px; top:0;
  background:var(--ink); color:var(--paper);
  padding:12px 20px; z-index:10000;
}
.skip:focus{ left:12px; top:12px; }

:focus-visible{
  outline:3px solid var(--sapphire);
  outline-offset:3px;
}

/* ---------- typography ---------- */

.h2{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(2rem, 4.2vw, 3.4rem);
  line-height:1.05;
  letter-spacing:-.02em;
  margin:0 0 .6em;
  text-wrap:balance;
}
.h2 em{ font-style:italic; color:var(--sapphire); }
.h2--center{ text-align:center; }

.eyebrow{
  font-family:var(--mono);
  font-size:.88rem;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--sapphire-deep);
  margin:0 0 1.4em;
  display:flex;
  align-items:center;
  gap:.9em;
}
.eyebrow::before{
  content:"";
  width:34px; height:2px;
  background:linear-gradient(90deg, var(--sapphire), var(--aqua));
  flex:none;
}
.eyebrow--center{ justify-content:center; text-align:center; }

.sub{
  color:var(--ink-soft);
  font-size:1.2rem;
  max-width:56ch;
  margin:0 0 1em;
}
.sub--center{ margin-inline:auto; text-align:center; }

.lead{
  font-size:1.4rem;
  line-height:1.55;
  font-weight:400;
}
.lead em{ color:var(--sapphire); font-style:italic; }

/* ---------- buttons ---------- */

.btn{
  --bg:var(--ink); --fg:var(--paper-3);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  background:var(--bg);
  color:var(--fg);
  border:1px solid var(--bg);
  border-radius:2px;
  padding:.9em 1.6em;
  font-family:var(--mono);
  font-size:.95rem;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  transition:transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.btn:hover{ transform:translateY(-2px); background:var(--sapphire); border-color:var(--sapphire); color:#fff; }
.btn:active{ transform:translateY(0); }

.btn--ghost{ --bg:transparent; --fg:var(--ink); border-color:var(--ink); }
.btn--ghost:hover{ color:#fff; }
.btn--mark{ --bg:var(--sapphire); --fg:#fff; }
.btn--mark:hover{ background:var(--ink); border-color:var(--ink); }
.btn--full{ width:100%; }
.btn--sm{ padding:.7em 1.15em; font-size:.85rem; }

/* ---------- nav ---------- */

.nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  transition:background .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(234,245,250,.92);
  backdrop-filter:blur(10px);
  border-bottom-color:var(--rule);
}
.nav__inner{
  max-width:var(--wrap);
  margin-inline:auto;
  padding:14px var(--pad);
  display:flex;
  align-items:center;
  gap:24px;
}

.brand{
  display:flex;
  align-items:center;
  gap:.6em;
  text-decoration:none;
  margin-right:auto;
}
.brand__mark{
  width:34px; height:34px;
  display:grid; place-items:center;
  background:linear-gradient(135deg, var(--sapphire), var(--ocean));
  color:var(--paper-3);
  font-family:var(--mono);
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.04em;
  border-radius:2px;
}
.brand__name{
  font-family:var(--display);
  white-space:nowrap;
  font-weight:600;
  font-size:1.2rem;
  letter-spacing:-.01em;
}

.nav__links{
  display:flex;
  align-items:center;
  gap:26px;
}
.nav__links a{
  text-decoration:none;
  font-family:var(--mono);
  font-size:.92rem;
  font-weight:600;
  letter-spacing:.01em;
  color:var(--ink-soft);
  position:relative;
  padding-block:4px;
  transition:color .2s var(--ease);
}
.nav__links a::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:100%; height:1px;
  background:var(--sapphire);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .3s var(--ease);
}
.nav__links a:hover{ color:var(--ink); }
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; }

.nav__cta{
  background:var(--ink);
  color:var(--paper-3) !important;
  padding:.7em 1.15em !important;
  border-radius:2px;
}
.nav__cta::after{ display:none; }
.nav__cta:hover{ background:var(--sapphire); }

.nav__toggle{
  display:none;
  width:40px; height:36px;
  background:none;
  border:1px solid var(--rule);
  border-radius:2px;
  cursor:pointer;
  padding:0;
  place-items:center;
  gap:6px;
}
.nav__toggle span{
  display:block;
  width:18px; height:1.5px;
  background:var(--ink);
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.nav__toggle[aria-expanded="true"] span:first-child{ transform:translateY(3.75px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child{ transform:translateY(-3.75px) rotate(-45deg); }

/* ---------- parallax layer base ---------- */

.layer{
  position:absolute;
  will-change:transform;
  pointer-events:none;
}

/* ---------- hero ---------- */

.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  padding:130px 0 90px;
  overflow:hidden;
  background:
    radial-gradient(85% 55% at 80% 6%, rgba(20,188,212,.20) 0%, transparent 62%),
    radial-gradient(70% 60% at 8% 92%, rgba(15,79,181,.10) 0%, transparent 60%),
    radial-gradient(120% 80% at 70% 10%, var(--paper-3) 0%, var(--paper) 55%, var(--paper-2) 100%);
}

.hero__bg{ position:absolute; inset:-10% 0; }

.layer--rules{
  inset:0;
  background-image:repeating-linear-gradient(
    180deg, transparent 0 37px, var(--rule-soft) 37px 38px
  );
  opacity:.4;
  mask-image:linear-gradient(180deg, transparent, #000 25%, #000 70%, transparent);
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 25%, #000 70%, transparent);
}

.layer--ghost{
  inset:auto -6% 4% auto;
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(9rem, 26vw, 24rem);
  line-height:.72;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(20,17,14,.10);
  letter-spacing:-.04em;
  user-select:none;
}

.layer--strike{
  inset:12% -5% auto -5%;
  height:70%;
}
.layer--strike svg{
  width:100%; height:100%;
  fill:none;
  stroke:var(--sapphire);
  stroke-width:2.5;
  stroke-linecap:round;
  opacity:.3;
}
.layer--strike path:nth-child(2){ stroke:var(--aqua); }
.layer--strike path:nth-child(3){ stroke:var(--ocean); stroke-opacity:.55; }

.hero__inner{ position:relative; z-index:2; }

.hero__title{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(3rem, 10vw, 7rem);
  line-height:.92;
  letter-spacing:-.035em;
  margin:0 0 .35em;
}
.hero__title em{
  font-style:italic;
  font-weight:400;
  color:var(--sapphire);
  position:relative;
}
.hero__title em::after{
  content:"";
  position:absolute;
  left:-2%; right:-2%;
  top:56%;
  height:3px;
  background:var(--sapphire);
  transform:scaleX(0);
  transform-origin:left;
  animation:strike 1s var(--ease) 1.1s forwards;
}
@keyframes strike{ to{ transform:scaleX(1); } }

.hero__lede{
  font-size:clamp(1.2rem, 1.7vw, 1.5rem);
  max-width:44ch;
  color:var(--ink-soft);
  margin:0 0 2.2em;
}

.hero__cta{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-bottom:2.6em;
}

.hero__note{
  font-family:var(--mono);
  font-size:.9rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin:0;
}

.hero__scroll{
  position:absolute;
  bottom:26px; left:50%;
  transform:translateX(-50%);
  font-family:var(--mono);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-faint);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  z-index:2;
}
.hero__scroll span{
  width:1px; height:44px;
  background:linear-gradient(var(--ink-faint), transparent);
  animation:drop 2s var(--ease) infinite;
}
@keyframes drop{
  0%{ transform:scaleY(0); transform-origin:top; }
  45%{ transform:scaleY(1); transform-origin:top; }
  55%{ transform:scaleY(1); transform-origin:bottom; }
  100%{ transform:scaleY(0); transform-origin:bottom; }
}

/* ---------- proof bar ---------- */

.proof{
  position:relative;
  background:linear-gradient(155deg, var(--ocean) 0%, var(--ink) 72%);
  color:var(--paper-3);
  padding:clamp(48px, 7vw, 84px) 0;
}
.proof::before,
.pull::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background:linear-gradient(90deg, var(--aqua), var(--sapphire) 55%, var(--ocean));
  z-index:2;
}

.proof__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(24px, 4vw, 56px);
}
.stat{
  border-left:1px solid rgba(234,245,250,.2);
  padding-left:clamp(16px, 2.4vw, 30px);
}
.stat__num{
  display:block;
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(2.8rem, 6.4vw, 5rem);
  line-height:1;
  letter-spacing:-.04em;
  margin-bottom:.18em;
}
.stat__num--word{ font-size:clamp(2rem, 4.4vw, 3.4rem); }
.stat__num em{ font-style:italic; color:var(--aqua); }
.stat__label{
  display:block;
  font-family:var(--mono);
  font-size:.95rem;
  font-weight:500;
  letter-spacing:.01em;
  color:rgba(234,245,250,.82);
  line-height:1.55;
}

/* ---------- split / problem ---------- */

.split{
  padding:clamp(80px, 12vw, 150px) 0;
  position:relative;
}
.split__inner{
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:clamp(32px, 6vw, 90px);
  align-items:start;
}
.split__aside{
  position:relative;
}
.layer--quotemark{
  position:absolute;
  color:var(--aqua);
  top:-.35em; left:-.12em;
  font-family:var(--display);
  font-size:20rem;
  line-height:1;
  opacity:.22;
  z-index:0;
}
.split__aside .h2{ position:relative; z-index:1; }
.split__body p{ margin:0 0 1.3em; }
.split__body p:last-child{ margin-bottom:0; }
.split__body strong{ font-weight:500; box-shadow:inset 0 -.42em 0 rgba(20,188,212,.3); }

/* ---------- blue pencil demo ---------- */

.demo{
  position:relative;
  padding:clamp(80px, 11vw, 140px) 0;
  background:var(--paper-2);
  overflow:hidden;
  border-block:1px solid var(--rule);
}
.layer--paper{
  inset:-20% -10%;
  background-image:repeating-linear-gradient(
    180deg, transparent 0 33px, rgba(20,17,14,.045) 33px 34px
  );
}
.demo .wrap{ position:relative; z-index:1; }

.pen{
  margin-top:clamp(34px, 5vw, 56px);
  background:var(--paper-3);
  border:1px solid var(--rule);
  border-radius:3px;
  box-shadow:0 24px 60px -32px rgba(20,17,14,.4);
  max-width:820px;
  margin-inline:auto;
  overflow:hidden;
}
.pen__head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px clamp(20px, 4vw, 38px);
  border-bottom:1px solid var(--rule-soft);
  background:linear-gradient(var(--paper-3), var(--paper));
}
.pen__tag{
  font-family:var(--mono);
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:#fff;
  background:var(--ink);
  padding:.4em .8em;
  border-radius:2px;
  transition:background .4s var(--ease);
}
.pen__tag.is-after{ background:var(--sapphire); }
.pen__count{
  font-family:var(--mono);
  font-size:.92rem;
  color:var(--ink-faint);
  letter-spacing:.06em;
}
.pen__count b{ color:var(--ink); font-weight:400; }

.pen__text{
  margin:0;
  padding:clamp(24px, 4vw, 42px);
  max-height:600px;
  overflow:hidden;
  font-size:clamp(1.15rem, 1.6vw, 1.45rem);
  line-height:2;
}
.pen__text .w{ transition:opacity .4s var(--ease); }

.pen__text .cut{
  position:relative;
  transition:opacity .5s var(--ease), color .5s var(--ease);
}
.pen__text .cut::after{
  content:"";
  position:absolute;
  left:-2px; right:-2px;
  top:52%;
  height:2px;
  background:var(--sapphire);
  transform:scaleX(0);
  transform-origin:left;
  border-radius:2px;
}
.pen.is-cut .cut::after{
  transform:scaleX(1);
  transition:transform .32s var(--ease) var(--d, 0s);
}
.pen.is-cut .cut{
  color:var(--ink-faint);
  opacity:.7;
}

.pen__after{
  margin:0;
  padding:0 clamp(24px, 4vw, 42px);
  max-height:0;
  opacity:0;
  overflow:hidden;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.25rem, 2.2vw, 1.9rem);
  line-height:1.42;
  letter-spacing:-.015em;
  transition:max-height .6s var(--ease), opacity .5s var(--ease), padding .6s var(--ease);
}
.pen.is-done .pen__after{
  max-height:320px;
  opacity:1;
  padding-block:clamp(24px, 4vw, 42px);
  border-top:1px solid var(--rule-soft);
}
.pen.is-done .pen__text{
  max-height:0;
  padding-block:0;
  opacity:0;
  overflow:hidden;
  transition:max-height .6s var(--ease), opacity .35s var(--ease), padding .6s var(--ease);
}

.pen__foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:14px;
  padding:18px clamp(20px, 4vw, 38px);
  border-top:1px solid var(--rule-soft);
  background:var(--paper);
}
.pen__hint{
  font-family:var(--mono);
  font-size:.9rem;
  letter-spacing:.06em;
  color:var(--ink-faint);
}

/* ---------- services ---------- */

.services{ padding:clamp(80px, 12vw, 150px) 0; }

.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:1px;
  background:var(--rule);
  border:1px solid var(--rule);
  margin-top:clamp(34px, 5vw, 56px);
}
.card{
  background:var(--paper);
  padding:clamp(28px, 3.4vw, 44px);
  display:flex;
  flex-direction:column;
  transition:background .35s var(--ease), transform .35s var(--ease);
}
.card:hover{ background:var(--paper-3); box-shadow:inset 0 3px 0 var(--aqua); }
.card__num{
  font-family:var(--mono);
  font-size:.88rem;
  font-weight:700;
  letter-spacing:.11em;
  color:var(--sapphire);
  display:block;
  margin-bottom:1.6em;
}
.card h3{
  font-family:var(--display);
  font-weight:600;
  font-size:1.7rem;
  letter-spacing:-.02em;
  line-height:1.18;
  margin:0 0 .55em;
}
.card p{ color:var(--ink-soft); margin:0 0 1.5em; font-size:1.08rem; }
.card ul{
  list-style:none;
  margin:0 0 2em;
  padding:0;
  border-top:1px solid var(--rule-soft);
}
.card li{
  padding:.62em 0 .62em 1.4em;
  border-bottom:1px solid var(--rule-soft);
  font-size:1.05rem;
  color:var(--ink-soft);
  position:relative;
}
.card li::before{
  content:"—";
  position:absolute; left:0;
  color:var(--sapphire);
}
.card__link{
  margin-top:auto;
  font-family:var(--mono);
  font-size:.98rem;
  font-weight:600;
  letter-spacing:.01em;
  text-decoration:none;
  color:var(--ink);
  border-bottom:1px solid var(--sapphire);
  padding-bottom:4px;
  align-self:flex-start;
  transition:color .25s var(--ease), gap .25s var(--ease);
}
.card__link:hover{ color:var(--sapphire); }

/* ---------- pull quote ---------- */

.pull{
  position:relative;
  background:linear-gradient(200deg, var(--ink) 0%, var(--ocean) 100%);
  color:var(--paper-3);
  padding:clamp(80px, 12vw, 150px) 0;
  overflow:hidden;
  text-align:center;
}
.layer--ghost2{
  inset:auto auto -14% -4%;
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(10rem, 30vw, 28rem);
  line-height:.7;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(234,245,250,.09);
  letter-spacing:-.05em;
  user-select:none;
}
.pull .wrap{ position:relative; z-index:1; }
.pull blockquote{ margin:0; }
.pull blockquote p{
  font-family:var(--display);
  font-weight:400;
  font-style:italic;
  font-size:clamp(1.9rem, 5.2vw, 4rem);
  line-height:1.12;
  letter-spacing:-.03em;
  margin:0 0 .6em;
  text-wrap:balance;
}
.pull cite{
  font-family:var(--mono);
  font-style:normal;
  font-size:.98rem;
  font-weight:500;
  letter-spacing:.01em;
  color:rgba(234,245,250,.78);
}

/* ---------- who ---------- */

.who{ padding:clamp(80px, 12vw, 150px) 0; }
.who__grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:clamp(32px, 6vw, 80px);
  align-items:start;
}
.who__list{
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid var(--rule);
}
.who__list li{
  font-size:1.08rem;
  padding:1.15em 0 1.15em 2.6em;
  border-bottom:1px solid var(--rule);
  position:relative;
  color:var(--ink-soft);
}
.who__list li::before{
  content:"\002713";
  position:absolute;
  left:0; top:1.15em;
  color:var(--sapphire);
  font-size:.9em;
}
.who__list b{ color:var(--ink); font-weight:500; }

/* ---------- process ---------- */

.process{
  padding:clamp(80px, 12vw, 150px) 0;
  background:var(--paper-2);
  border-block:1px solid var(--rule);
}
.steps{
  list-style:none;
  margin:clamp(34px, 5vw, 56px) 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:clamp(28px, 4vw, 52px);
  counter-reset:s;
}
.step{ position:relative; padding-top:22px; border-top:2px solid var(--sapphire); }
.step__n{
  position:absolute;
  top:-.62em; right:0;
  font-family:var(--display);
  font-weight:600;
  font-size:4.4rem;
  line-height:1;
  color:var(--aqua);
  opacity:.42;
}
.step h3{
  font-family:var(--display);
  font-weight:600;
  font-size:1.55rem;
  letter-spacing:-.02em;
  margin:0 0 .5em;
}
.step p{ margin:0; color:var(--ink-soft); font-size:1.08rem; }

/* ---------- contact ---------- */

.contact{
  position:relative;
  padding:clamp(80px, 12vw, 150px) 0;
  overflow:hidden;
}
.layer--rules2{
  inset:-20% -10%;
  background-image:repeating-linear-gradient(
    90deg, transparent 0 46px, var(--rule-soft) 46px 47px
  );
  opacity:.35;
  mask-image:radial-gradient(70% 60% at 50% 50%, #000, transparent);
  -webkit-mask-image:radial-gradient(70% 60% at 50% 50%, #000, transparent);
}
.contact__inner{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(32px, 6vw, 80px);
  align-items:start;
}
.contact__alt{
  font-family:var(--mono);
  font-size:.98rem;
  color:var(--ink-faint);
  letter-spacing:.03em;
}
.contact__alt a{ color:var(--sapphire); text-decoration:none; border-bottom:1px solid currentColor; }

.form{
  background:var(--paper-3);
  border:1px solid var(--rule);
  border-radius:3px;
  padding:clamp(24px, 3.4vw, 40px);
  box-shadow:0 24px 60px -36px rgba(20,17,14,.35);
}
.field{ margin-bottom:20px; position:relative; }
.field label{
  display:block;
  font-family:var(--mono);
  font-size:.95rem;
  font-weight:600;
  letter-spacing:.01em;
  color:var(--ink-soft);
  margin-bottom:.55em;
}
.field .opt{ text-transform:none; letter-spacing:.02em; color:var(--ink-faint); }

.field input,
.field select,
.field textarea{
  width:100%;
  font-family:var(--body);
  font-size:1.1rem;
  color:var(--ink);
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:2px;
  padding:.8em .9em;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.field textarea{ resize:vertical; line-height:1.6; }
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--sapphire);
  background:var(--paper-3);
}
.field input::placeholder,
.field textarea::placeholder{ color:var(--ink-faint); opacity:.75; }

.field.is-bad input,
.field.is-bad textarea{ border-color:var(--warn); background:rgba(192,57,43,.06); }

.err{
  display:block;
  font-family:var(--mono);
  font-size:.85rem;
  font-weight:600;
  letter-spacing:0;
  color:var(--warn);
  min-height:1.1em;
  margin-top:.4em;
}
.counter{
  position:absolute;
  right:0; bottom:1.7em;
  font-family:var(--mono);
  font-size:.85rem;
  color:var(--ink-faint);
}

.form__note{
  font-family:var(--mono);
  font-size:.85rem;
  letter-spacing:0;
  color:var(--ink-faint);
  text-align:center;
  margin:1em 0 0;
}
.form__ok{
  margin-top:1.2em;
  padding:1em 1.1em;
  border:1px solid var(--sapphire);
  border-radius:2px;
  background:rgba(15,79,181,.07);
  font-size:1.05rem;
}
.form__ok a{ color:var(--sapphire); }

/* ---------- footer ---------- */

.foot{
  background:linear-gradient(180deg, var(--ocean), var(--ink) 60%);
  color:var(--paper-3);
  padding:clamp(48px, 6vw, 72px) 0 28px;
}
.foot__inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:20px 40px;
  padding-bottom:28px;
  border-bottom:1px solid rgba(234,245,250,.15);
}
.brand--foot{ margin-right:0; }
.brand--foot .brand__mark{ background:var(--paper-3); color:var(--ink); }
.foot__tag{
  font-family:var(--display);
  font-style:italic;
  font-size:1.18rem;
  color:rgba(234,245,250,.75);
  margin:0;
  margin-right:auto;
}
.foot__links{ display:flex; flex-wrap:wrap; gap:22px; }
.foot__links a{
  font-family:var(--mono);
  font-size:.95rem;
  font-weight:500;
  letter-spacing:.01em;
  color:rgba(234,245,250,.82);
  text-decoration:none;
  transition:color .2s var(--ease);
}
.foot__links a:hover{ color:var(--aqua); }
.foot__legal{
  max-width:var(--wrap);
  margin:22px auto 0;
  padding-inline:var(--pad);
  font-family:var(--mono);
  font-size:.85rem;
  letter-spacing:.01em;
  color:rgba(234,245,250,.55);
}

/* ---------- reveal animation ---------- */

.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-in{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.09s; }
.reveal[data-delay="2"]{ transition-delay:.18s; }
.reveal[data-delay="3"]{ transition-delay:.27s; }
.reveal[data-delay="4"]{ transition-delay:.36s; }

/* ---------- responsive ---------- */

@media (max-width: 900px){
  .split__inner,
  .who__grid,
  .contact__inner{ grid-template-columns:1fr; }
  .layer--quotemark{ font-size:12rem; }
  .proof__grid{ grid-template-columns:1fr; gap:26px; }
  .stat__num{ font-size:3.4rem; }
}

@media (max-width: 900px){
  .nav__toggle{ display:grid; }
  .nav__links{
    position:absolute;
    top:100%; left:0; right:0;
    background:var(--paper-3);
    border-block:1px solid var(--rule);
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:8px var(--pad) 20px;
    display:none;
  }
  .nav__links.is-open{ display:flex; }
  .nav__links a{ padding:14px 0; border-bottom:1px solid var(--rule-soft); }
  .nav__cta{ margin-top:14px; text-align:center; border-bottom:none !important; }
  .nav.is-open{ background:rgba(234,245,250,.98); backdrop-filter:blur(10px); }
  .hero{ min-height:auto; padding:120px 0 80px; }
  .hero__cta .btn{ width:100%; }
  .pen__foot{ flex-direction:column; align-items:stretch; text-align:center; }
}

/* ---------- motion preference ---------- */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .hero__title em::after{ transform:scaleX(1); }
}

/* ---------- print ---------- */

@media print{
  .nav, .hero__scroll, .layer, .form, .btn{ display:none !important; }
  body{ background:#fff; color:#000; }
  .reveal{ opacity:1; transform:none; }
}

/* ---------- anchor offset for the fixed nav ---------- */
section[id]{ scroll-margin-top:78px; }

/* ---------- short viewports: keep the hero CTA above the fold ---------- */
@media (max-height: 800px){
  .hero{ padding:104px 0 64px; }
  .hero__title{ font-size:min(clamp(2.6rem, 8vw, 5.4rem), 15vh); margin-bottom:.3em; }
  .hero__lede{ font-size:1.15rem; margin-bottom:1.4em; }
  .hero__cta{ margin-bottom:1.5em; }
  .hero__note{ font-size:.82rem; }
  .layer--ghost{ font-size:clamp(7rem, 20vw, 15rem); }
  .hero__scroll{ display:none; }
}

/* ---------- portrait ---------- */

.portrait{
  position:relative;
  margin:2.6em 0 0;
  max-width:440px;
}
.portrait::before{               /* offset accent frame, print-editorial feel */
  content:"";
  position:absolute;
  top:16px; left:16px; right:-16px;
  aspect-ratio:600 / 833;          /* matches the photo, so it hugs the image only */
  border:2px solid var(--aqua);
  border-radius:3px;
  z-index:0;
}
.portrait img{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  height:auto;
  border-radius:3px;
  border:1px solid var(--rule);
  box-shadow:0 22px 50px -28px rgba(5,32,46,.65);
}
.portrait figcaption{
  position:relative;
  z-index:1;
  margin-top:1.6em;
  padding-left:1em;
  border-left:3px solid var(--sapphire);
  font-size:.98rem;
  line-height:1.55;
  color:var(--ink-soft);
}
.portrait figcaption b{
  display:block;
  margin-bottom:.15em;
  font-family:var(--display);
  font-weight:600;
  font-size:1.15rem;
  letter-spacing:-.01em;
  color:var(--ink);
}

@media (max-width: 900px){
  /* fill the single column on tablets, cap it on phones */
  .portrait{ max-width:min(100%, 380px); margin-top:2em; }
}