/* =====================================================================
   DEBRA CARNEY · bold studio layout
   Poster-scale display type, rounded color blocks, cards inside blocks,
   decorative sparkles and blobs. Modeled on the studio-site references.
   Palette: champagne · tea rose · cherry blossom · sage · reseda
   ===================================================================== */

@font-face{font-family:"Object Sans";src:url("../fonts/ObjectSans-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Object Sans";src:url("../fonts/ObjectSans-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Object Sans";src:url("../fonts/ObjectSans-Bold.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  --champagne:#ECE0DA;
  --tea:#F1C8CB;
  --cherry:#F6B0BB;
  --sage:#9CAD8C;
  --reseda:#7E8C69;
  --forest:#3A4433;
  --ink:#232821;
  --moss:#4A5540;
  --cream:#FBF7F4;
  /* The pink for type. Cherry blossom (#F6B0BB) is the pink we want, but at
     1.66:1 on cream it is unreadable as text, so this is it darkened to
     5.56:1. Cherry blossom itself stays a fill color, never type. */
  --pink-deep:#A0475B;

  --maxw:1220px;
  --gutter:clamp(1.1rem,3.5vw,3rem);
  --r-xl:34px;
  --r-lg:24px;
  --r-md:16px;

  --sans:"Object Sans","Hanken Grotesk",system-ui,-apple-system,sans-serif;
  --poster:"Anton","Object Sans","Hanken Grotesk",system-ui,sans-serif;
  --hand:"Caveat",cursive;
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  margin:0;background:var(--champagne);color:var(--ink);
  font-family:var(--sans);font-size:clamp(1.02rem,.98rem + .3vw,1.14rem);
  line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
::selection{background:var(--cherry);color:var(--ink)}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--forest);color:var(--champagne);
  padding:.7em 1.2em;border-radius:0 0 12px 0;font-weight:700;font-size:.95rem}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--pink-deep);outline-offset:3px;border-radius:4px}

/* ---------- Type ---------- */
.poster{font-family:var(--poster);font-weight:400;text-transform:uppercase;letter-spacing:.045em;line-height:.94}
h1{font-family:var(--poster);font-weight:400;text-transform:uppercase;line-height:.96;letter-spacing:.045em;
   font-size:clamp(2.9rem,1.6rem + 5.6vw,6.4rem);margin:0 0 .2em;color:var(--forest)}
h2{font-family:var(--poster);font-weight:400;text-transform:uppercase;line-height:1;letter-spacing:.04em;
   font-size:clamp(2rem,1.2rem + 3.4vw,3.9rem);margin:0 0 .4em;color:var(--forest)}
h3{font-family:var(--sans);font-weight:700;letter-spacing:-.02em;line-height:1.15;
   font-size:clamp(1.15rem,1rem + .8vw,1.5rem);margin:0 0 .3em}
p{margin:0 0 1.1em}

.hand{font-family:var(--hand);font-weight:600;font-size:1.35em;letter-spacing:0;
      line-height:.85;display:inline-block;transform:rotate(-4deg);color:var(--pink-deep);text-transform:none}
.label{font-size:.9rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--moss);display:block;margin:0 0 1rem}
.lead{font-size:clamp(1.06rem,1rem + .45vw,1.26rem);line-height:1.6;max-width:46ch}
.dim{color:var(--moss)}
.measure{max-width:54ch}

/* ---------- Layout ---------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(2rem,1.5rem + 2.5vw,3.6rem)}
.block{border-radius:var(--r-xl);padding:clamp(1.4rem,1rem + 2.2vw,2.8rem)}
.block--cream{background:var(--cream)}
.block--champagne{background:var(--champagne)}
.block--tea{background:var(--tea)}
.block--cherry{background:var(--cherry)}
.block--sage{background:var(--sage)}
.block--forest{background:var(--forest);color:var(--champagne)}
.block--forest h2{color:var(--champagne)}
.block--forest .wcard h3{color:var(--ink);font-weight:700}
.block--forest .label{color:var(--cherry)}
.block--forest .dim{color:rgba(236,224,218,.78)}

.block--tea .hand,.block--cherry .hand,.section--tea .hand,.section--cherry .hand{color:var(--forest)}
.block--sage .hand,.block--forest .hand{color:var(--forest)}
.block--forest .hand{color:var(--cherry)}

/* ---------- Sparkles / shapes ---------- */
.spark{position:absolute;pointer-events:none;line-height:1;font-family:var(--sans)}
/* Inline asterisk mark. Sized in em so it inherits from whatever it sits in,
   and stroked in currentColor so the button dot, the hero sparks and the
   stamp centre each take their parent colour without extra rules. */
.ast{width:1em;height:1em;display:block;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.blob{position:absolute;border-radius:50%;pointer-events:none;z-index:0}

/* rotating stamp */
.stamp{width:clamp(96px,13vw,150px);height:clamp(96px,13vw,150px);position:relative;display:grid;place-items:center;flex:none}
/* Direct child only. This rule blows an svg up to fill the whole stamp and
   spins it, which is right for the circular text ring but caught the small
   asterisk svg nested inside .stamp__c too, stretching it across the badge.
   .stamp svg beats .ast on specificity, so the child combinator is the fix. */
.stamp > svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 24s linear infinite}
.stamp__c{width:38%;height:38%;border-radius:50%;background:var(--forest);color:var(--champagne);display:grid;place-items:center;font-size:1.15rem}

/* ---------- Nav ---------- */
.top{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--champagne) 92%,transparent);backdrop-filter:blur(8px)}
.top__in{max-width:var(--maxw);margin-inline:auto;padding:.9rem var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:1rem}
/* Wordmark: a DC block plus the full name. The block is the only piece of the
   identity that survives being shrunk, so it is the same mark as the favicon
   and the home screen icon. Cherry on forest is 5.77:1. */
.top__name{display:flex;align-items:center;gap:.55rem}
.top__mark{width:36px;height:36px;border-radius:11px;background:var(--forest);color:var(--cherry);
  font-family:var(--poster);font-size:1rem;letter-spacing:.02em;line-height:1;
  display:grid;place-items:center;flex:none}
.top__wm{font-family:var(--poster);text-transform:uppercase;font-size:1.12rem;
  line-height:1;letter-spacing:.04em;color:var(--forest);white-space:nowrap}
@media(max-width:420px){
  .top__mark{width:32px;height:32px;border-radius:9px;font-size:.9rem}
  .top__wm{font-size:.98rem}
}
.top__nav{display:flex;align-items:center;gap:1.15rem;flex-wrap:wrap;justify-content:flex-end}
.top__nav a{font-size:.9rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;position:relative;padding:.2em 0}
/* The sliding underline belongs to the text links only. The Let's talk pill is
   also an anchor in this nav, so without :not(.btn) it drew a 2px bar under a
   rounded button, which looks like a mistake because it is one. */
.top__nav a:not(.btn)::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--forest);transition:right .3s var(--ease)}
.top__nav a:not(.btn):hover::after,.top__nav a:not(.btn).is-active::after{right:0}
.top__toggle{display:none;background:var(--forest);color:var(--champagne);border:0;border-radius:999px;padding:.5em 1.1em;font-size:.9rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;cursor:pointer}
@media(max-width:1120px){
  .top__toggle{display:inline-block}
  .top__nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;background:var(--champagne);padding:1rem var(--gutter) 1.3rem;gap:.9rem;display:none;border-bottom:2px solid var(--forest)}
  .top__nav.is-open{display:flex}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  font-size:.95rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:.9em 1.5em;border-radius:999px;border:2px solid var(--forest);
  background:var(--forest);color:var(--champagne);cursor:pointer;
  transition:transform .22s var(--ease),background .22s,color .22s,border-color .22s;
}
.btn:hover{transform:translateY(-2px);background:var(--cherry);border-color:var(--cherry);color:var(--forest)}
.btn--ghost{background:transparent;color:var(--forest)}
.btn--ghost:hover{background:var(--forest);color:var(--champagne);border-color:var(--forest)}
.btn--pink{background:var(--cherry);color:var(--forest);border-color:var(--forest)}
.btn--pink:hover{background:var(--forest);color:var(--cherry);border-color:var(--forest)}
.btn--light{background:var(--champagne);color:var(--forest);border-color:var(--champagne)}
.btn--light:hover{background:var(--cherry);border-color:var(--cherry);color:var(--forest)}
.btn__dot{width:24px;height:24px;border-radius:50%;background:var(--cherry);color:var(--forest);display:grid;place-items:center;font-size:.78rem;flex:none}

.top__nav .btn{padding:.85em 1.9em;margin-left:.35rem;white-space:nowrap;font-size:.9rem}

/* ---------- HERO ---------- */
.hero{position:relative;padding-top:clamp(1.5rem,1rem + 2vw,2.6rem);padding-bottom:clamp(2rem,1.5rem + 2.5vw,3.4rem)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(1.5rem,3vw,3rem);align-items:center}
@media(max-width:900px){.hero__grid{grid-template-columns:1fr}}
.hero__type{position:relative;z-index:2;min-width:0}
.hero h1{max-width:11ch;margin-bottom:.22em;
  font-size:clamp(2.9rem,1.6rem + 5.6vw,6.4rem);overflow-wrap:break-word}
.hero h1 .ln{display:block}
.hero__intro{max-width:44ch;margin:1.3rem 0 1.6rem;font-size:clamp(1rem,.96rem + .3vw,1.14rem)}
.hero__cta{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}

/* decorative panel lives in its OWN column, so nothing overlaps the type */
.hero__deco{position:relative;aspect-ratio:1;min-height:260px;display:grid;place-items:center}
@media(max-width:900px){.hero__deco{min-height:200px;max-width:320px;margin-inline:auto}}
.hero__deco .blob{position:absolute;border-radius:50%}
.hero__blob1{width:78%;aspect-ratio:1;background:var(--tea);top:4%;right:2%}
.hero__blob2{width:34%;aspect-ratio:1;background:var(--cherry);left:4%;bottom:8%;animation:bob 7s var(--ease) infinite}
.hero__s1{position:absolute;top:2%;left:12%;font-size:clamp(1.6rem,1.2rem + 1.2vw,2.4rem);color:var(--cherry);animation:spin 20s linear infinite;z-index:3}
.hero__s2{position:absolute;bottom:2%;right:10%;font-size:clamp(1.1rem,.9rem + .8vw,1.7rem);color:var(--reseda);animation:bob 5s var(--ease) infinite;z-index:3}
.hero__stamp{position:relative;z-index:4}

/* ---------- Ticker ---------- */
.ticker{background:var(--forest);overflow:hidden;padding-block:.75rem}
.ticker__t{display:inline-flex;white-space:nowrap;animation:sl 48s linear infinite}
.ticker__t span{display:inline-flex;align-items:center;font-family:var(--poster);text-transform:uppercase;
  font-size:1.32rem;letter-spacing:.06em;color:var(--champagne)}
/* The separator used to be the character U+2733 EIGHT SPOKED ASTERISK.
   Unicode gives that character an emoji presentation, so iOS and Android
   rendered it from the color emoji font as a green tile with a white
   asterisk, and CSS color has no effect on a color emoji glyph. Drawing
   it as an SVG removes the font from the equation entirely. */
.ticker__t span::after{content:"";display:inline-block;width:.78rem;height:.78rem;margin:0 1.3rem;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F6B0BB' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 3v18M3 12h18M5.6 5.6l12.8 12.8M18.4 5.6L5.6 18.4'/%3E%3C/svg%3E") center/contain no-repeat}
.ticker:hover .ticker__t{animation-play-state:paused}
@keyframes sl{to{transform:translateX(-50%)}}

/* ---------- About + services block ----------
   The photo floats rather than sitting in its own grid column, so the text
   sets beside it and then runs full width once it clears the bottom of the
   picture. That is what lets the last paragraph have long lines. */
.about__text{max-width:88ch}
/* The headshot is square and carries its own cherry blossom frame, so the
   tile is square too. Cropping it to 4/3 would cut the frame off.

   Size is deliberate. At the old 34%/380px the photo was the first thing the
   eye landed on, which is backwards for a page whose job is the writing. The
   width is now set so the photo ends level with the first paragraph: the
   float holds for that paragraph, then releases so the last two run the full
   measure. That narrow-then-wide rhythm is what keeps the block readable.
   Going smaller than this releases the float after the headline, which leaves
   the final paragraphs as one long unbroken column.

   The floor of 180px stops the photo collapsing to a thumbnail on midsize
   laptops, where the percentage alone would shrink it too far. */
.about__tile{float:left;width:clamp(180px,24%,260px);margin:.4rem 2rem .6rem 0;
  border-radius:var(--r-lg);overflow:hidden;background:var(--sage);aspect-ratio:1/1}
.about__tile picture{display:contents}
.about__tile img{width:100%;height:100%;object-fit:cover}
/* One line-height for every line, so the headline sets evenly.
   "Hi, I'm Debra." is the pink greeting; the role line stays dark green. */
.about__who{font-family:var(--poster);text-transform:uppercase;
  font-size:clamp(1.7rem,1.25rem + 2vw,2.7rem);
  line-height:1.12;letter-spacing:.035em;color:var(--pink-deep);margin:0 0 .9rem}
.about__who span{display:block;color:var(--forest)}
#intro p{margin:0 0 .85em}
#intro p:last-child{margin-bottom:0}
/* Signature line: clears the float, centers, and sits close to the text. */
.about__sign{display:block;clear:both;text-align:center;font-size:2.1rem;
  line-height:1.1;margin:.9rem 0 0;transform:rotate(-2deg)}
@media(max-width:760px){
  /* Full width here used to mean the phone opened on a giant square face
     before a single word. Capped and left-aligned, it introduces her without
     taking the whole first screen. */
  .about__tile{float:none;width:min(52%,200px);max-width:none;margin:0 0 1.1rem}
  .about__sign{font-size:1.8rem}
}

/* Six services, two columns of three, spanning the whole block. */
.svcs{clear:both;list-style:none;margin:1.2rem 0 0;padding:1.2rem 0 0;
  border-top:2px solid rgba(58,68,51,.14);
  display:grid;grid-template-columns:1fr 1fr;gap:.9rem clamp(1.4rem,3.5vw,3.4rem)}
@media(max-width:760px){.svcs{grid-template-columns:1fr;gap:.7rem}}
.svcs li{display:flex;gap:.85rem;align-items:flex-start;padding:.55rem .7rem;border-radius:13px;
  transition:background .22s,transform .22s var(--ease)}
.svcs li:hover{background:var(--tea);transform:translateX(3px)}
.svcs .ic{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  font-size:1.05rem;background:var(--cherry);color:var(--forest)}
/* Ink rather than forest on the sage circles: forest on sage is 4.27:1,
   which is under AA for a glyph this size. */
.svcs li:nth-child(3n+2) .ic{background:var(--sage);color:var(--ink)}
.svcs li:nth-child(3n+3) .ic{background:var(--tea);border:2px solid var(--forest)}
.svcs b{display:block;font-size:1.12rem;font-weight:700;line-height:1.25;margin-bottom:.12rem}
.svcs small{display:block;font-size:1.02rem;color:var(--moss);line-height:1.4}

/* ---------- Selected work block ---------- */
.works__head{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;margin-bottom:1.2rem}
.works__head h2{margin:0}
.wcards{display:grid;grid-template-columns:repeat(5,1fr);gap:.8rem}
@media(max-width:1180px){.wcards{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.wcards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.wcards{grid-template-columns:1fr}}
.wcard{background:var(--cream);border-radius:var(--r-md);padding:.85rem;display:flex;flex-direction:column;
  gap:.4rem;min-height:190px;position:relative;transition:transform .25s var(--ease)}
.wcard:hover{transform:translateY(-6px)}
/* Logo plate. The palette color stays a FILL, which is what the light pinks
   are good at, and the logo sits on a white box inset inside it. The colored
   margin reads as the frame, so the border is real color rather than a
   hairline the pastels are too light to draw. Logos are pre-centered on
   identical 2:1 canvases, so contain never crops or resizes unevenly. */
.wcard__img{border-radius:11px;aspect-ratio:2/1;background:var(--cherry);
  display:grid;overflow:hidden;margin-bottom:.35rem;padding:.42rem}
.wcard:nth-child(5n+2) .wcard__img{background:var(--sage)}
.wcard:nth-child(5n+3) .wcard__img{background:var(--tea)}
.wcard:nth-child(5n+4) .wcard__img{background:var(--reseda)}
.wcard:nth-child(5n+5) .wcard__img{background:var(--champagne)}
.wcard__img{place-items:center}
.wcard__img span{background:#fff;border-radius:7px;width:100%;height:100%}
/* Same rule as the work page: cap the logo, never stretch or crop it. */
.wcard__img img{background:#fff;border-radius:7px;padding:.5rem;
  width:100%;height:100%;object-fit:contain;object-position:center}
.wcard__img span{font-family:var(--poster);text-transform:uppercase;font-size:1.2rem;
  color:var(--forest);display:grid;place-items:center;text-align:center;padding:.4rem}
.wcard__tag{font-size:.875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--moss)}
.wcard h3{margin:0;font-size:1.2rem}
.wcard p{margin:0;font-size:1.02rem;color:var(--moss);line-height:1.35}
.wcard__go{margin-top:auto;align-self:flex-end;width:30px;height:30px;border-radius:50%;
  background:var(--forest);color:var(--champagne);display:grid;place-items:center;font-size:.9rem}

/* ---------- Numbers ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;align-items:stretch}
@media(max-width:960px){.duo{grid-template-columns:1fr}}
.nums{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
@media(max-width:420px){.nums{grid-template-columns:1fr}}
.num{border-radius:var(--r-md);padding:1.1rem 1rem;background:var(--tea);color:var(--ink)}
.num:nth-child(2){background:var(--cherry)}
.num:nth-child(3){background:var(--sage)}
/* The fourth stat used to be cream, which is invisible on a cream block: the
   figure was floating in white with no box around it. Forest gives the row a
   dark anchor and reads on every block tone. Champagne on forest is 7.9:1. */
.num:nth-child(4){background:var(--forest);color:var(--champagne)}
.num:nth-child(4) b{color:var(--champagne)}
.num b{font-family:var(--poster);text-transform:uppercase;font-size:clamp(1.9rem,1.3rem + 2.1vw,2.8rem);
  display:block;line-height:1;letter-spacing:.03em;color:var(--forest)}
.num:nth-child(2) b,.num:nth-child(3) b{color:var(--forest)}
.num span{font-size:.95rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;display:block;margin-top:.35rem;line-height:1.25}

/* capability chips (no numbers) */
.caps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.4rem .9rem}
@media(max-width:560px){.caps{grid-template-columns:1fr}}
.caps li{display:flex;align-items:center;gap:.5em;font-size:1.02rem;font-weight:600;
  padding:.55em .8em;border-radius:10px;background:var(--cream);color:var(--ink);
  transition:transform .2s var(--ease)}
.caps li:hover{transform:translateX(3px)}
.caps li::before{content:"";display:inline-block;width:.55rem;height:.55rem;flex:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A0475B' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 3v18M3 12h18M5.6 5.6l12.8 12.8M18.4 5.6L5.6 18.4'/%3E%3C/svg%3E") center/contain no-repeat}
.block--forest .caps li{background:rgba(236,224,218,.14);color:var(--champagne)}
.block--forest .caps li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F6B0BB' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 3v18M3 12h18M5.6 5.6l12.8 12.8M18.4 5.6L5.6 18.4'/%3E%3C/svg%3E")}

/* ---------- Quotes ---------- */
.quotes3{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
@media(max-width:900px){.quotes3{grid-template-columns:1fr}}
.qcard{background:var(--cream);border-radius:var(--r-md);padding:1.2rem 1.1rem;display:flex;flex-direction:column}
.qcard::before{content:"❝";font-family:var(--poster);font-size:1.7rem;line-height:.7;color:var(--cherry);margin-bottom:.5rem}
.qcard p{font-size:1.02rem;line-height:1.5;margin:0 0 .9rem}
.qcard__by{margin-top:auto;font-size:.95rem;color:var(--moss)}
.qcard__by b{display:block;color:var(--ink);font-size:1.02rem;font-weight:700}

.quotes{columns:3;column-gap:clamp(1rem,2.5vw,1.6rem)}
@media(max-width:900px){.quotes{columns:2}}
@media(max-width:620px){.quotes{columns:1}}
.quote{break-inside:avoid;margin:0 0 1rem;background:var(--cream);border-radius:var(--r-md);padding:1.3rem 1.2rem}
.quote:nth-child(3n+2){background:var(--tea)}
.quote:nth-child(3n+3){background:var(--sage)}
.quote:nth-child(3n+2)::before{color:var(--forest)}
.quote:nth-child(3n+3)::before{color:var(--cream);font-size:2.1rem}
.quote:nth-child(3n+3) .quote__by{color:var(--ink)}
.quote::before{content:"❝";font-family:var(--poster);font-size:1.7rem;line-height:.7;color:var(--cherry);display:block;margin-bottom:.5rem}
.quote p{font-size:1.02rem;line-height:1.5;margin:0 0 .8rem}
.quote__by{font-size:.95rem;color:var(--moss)}
.quote__by b{display:block;color:var(--ink);font-size:1.02rem;font-weight:700}
.quote--empty{text-align:center}

/* ---------- CTA ---------- */
.cta{position:relative;overflow:hidden;text-align:center}
.cta h2{font-size:clamp(2.2rem,1.3rem + 4.6vw,5.2rem);margin-bottom:.15em}
.cta .scriptline{font-family:var(--hand);text-transform:none;font-size:.8em;color:var(--cherry);display:block;transform:rotate(-3deg);line-height:.85}
.sun{width:96px;height:96px;animation:spin 30s linear infinite;margin:1rem auto 0}

/* ---------- Work page toolbar ----------
   Two dropdowns instead of thirty-one pills. At 19 types and 12 companies
   the stacked rows pushed the actual work most of a screen down the page.
   Counts live in the option labels so range still reads once opened. */
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;
  background:var(--cream);border-radius:999px;padding:.7rem 1.1rem;margin-bottom:1.5rem}
.toolbar__field{display:flex;align-items:center;gap:.55rem;
  background:var(--champagne);border:2px solid var(--forest);border-radius:999px;padding:.3rem .5rem .3rem .9rem}
.toolbar__field--pink{background:var(--tea)}
/* Forest on sage is 4.27:1, under AA for the 16px select value, so the sage
   field switches its text to ink at 6.28:1. */
.toolbar__field--sage{background:var(--sage)}
.toolbar__field--sage .toolbar__lb{color:var(--ink)}
.toolbar__field--sage .toolbar__sel{color:var(--ink);
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23232821' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")}
.toolbar__lb{font-size:.875rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--forest)}
.toolbar__sel{
  font-family:var(--sans);font-size:1rem;font-weight:700;color:var(--forest);
  background:transparent;border:0;border-radius:999px;padding:.35em 1.9em .35em .5em;
  cursor:pointer;appearance:none;-webkit-appearance:none;max-width:15rem;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%233A4433' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .55em center;background-size:.7em}
.toolbar__sel:focus-visible{outline:3px solid var(--pink-deep);outline-offset:2px}
.toolbar__clear{font-family:var(--sans);font-size:.9rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;background:none;border:0;border-bottom:2px solid var(--pink-deep);
  color:var(--pink-deep);padding:.2em 0;cursor:pointer}
.toolbar__clear:hover{color:var(--forest);border-color:var(--forest)}
.toolbar .pfcount{margin:0 0 0 auto;white-space:nowrap}
@media(max-width:700px){
  .toolbar{border-radius:var(--r-lg);align-items:stretch;flex-direction:column;gap:.6rem}
  .toolbar__field{justify-content:space-between}
  .toolbar__sel{flex:1;max-width:none;text-align:right}
  .toolbar .pfcount{margin:.2rem 0 0}
}

/* ---------- Portfolio ---------- */
.filters{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1.2rem}
.filter{font-family:var(--sans);font-size:.95rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:.55em 1.1em;border-radius:999px;border:2px solid var(--forest);background:transparent;color:var(--forest);
  cursor:pointer;transition:background .2s,color .2s,transform .2s var(--ease)}
.filter:hover{transform:translateY(-2px);background:var(--tea)}
.filter.is-on{background:var(--forest);color:var(--champagne)}
.pfcount{font-size:.9rem;letter-spacing:.14em;text-transform:uppercase;color:var(--moss);margin:0 0 1.2rem}
.pfgroup{margin-bottom:2.2rem}
.pfgroup__h{font-family:var(--poster);text-transform:uppercase;font-size:clamp(1.1rem,.95rem + .7vw,1.5rem);
  letter-spacing:.04em;color:var(--forest);margin:0 0 .8rem;padding-bottom:.5rem;
  border-bottom:2px solid var(--forest);display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.pfgroup__h span{font-family:var(--sans);font-size:.875rem;font-weight:700;letter-spacing:.1em;color:var(--moss)}
.pfgrid__inner{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem}
@media(max-width:1024px){.pfgrid__inner{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.pfgrid__inner{grid-template-columns:1fr}}
.pfgrid{display:block}
@media(max-width:1024px){.pfgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.pfgrid{grid-template-columns:1fr}}
.pcard{background:var(--cream);border-radius:var(--r-md);padding:.9rem;display:flex;flex-direction:column;gap:.35rem;position:relative;transition:transform .25s var(--ease)}
.pcard:hover{transform:translateY(-5px)}
.pcard__img{border-radius:10px;aspect-ratio:16/10;background:var(--tea);display:grid;place-items:center;overflow:hidden;margin-bottom:.25rem}
.pcard:nth-child(4n+2) .pcard__img{background:var(--sage)}
.pcard:nth-child(4n+3) .pcard__img{background:var(--cherry)}
.pcard:nth-child(4n+4) .pcard__img{background:var(--reseda)}
.pcard__img img{width:100%;height:100%;object-fit:cover}
.pcard__img span{font-family:var(--poster);text-transform:uppercase;font-size:1.1rem;color:var(--forest);opacity:.45;padding:.5rem;text-align:center}
/* Whole-composition thumbnails (logos, Van Ventures). Photos fill their box,
   these must not: they arrive at every aspect ratio, so the image is sized by
   its own proportions and merely capped by the box. width/height auto is what
   guarantees nothing is cropped, whatever shape the file turns out to be. */
.pcard__img--fit{background:#fff;place-items:center;padding:.6rem}
.pcard__img--fit img{
  width:auto;height:auto;max-width:100%;max-height:100%;
  object-fit:contain;object-position:center;margin:auto}
.pcard:nth-child(4n+2) .pcard__img--fit,
.pcard:nth-child(4n+3) .pcard__img--fit,
.pcard:nth-child(4n+4) .pcard__img--fit{background:#fff}
.pcard__img--fit span{color:var(--moss);opacity:.8}
.pcard__img--logo{padding:1.1rem;aspect-ratio:4/3}

/* ---------- Hover pop ----------
   Shared by every card that carries an image: work pieces and the home page
   Selected Works. The card shows a tidy preview, hovering shows the piece
   whole, centered on the card so it never runs off screen. Anything added to
   data.js later gets this automatically, because it keys off the image
   existing rather than off a list of categories.
   Pointer devices only, and aria-hidden since it duplicates the thumbnail. */
.popover{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%) scale(.92);
  width:min(560px,230%);background:#fff;border:3px solid var(--forest);
  border-radius:16px;padding:1.1rem;z-index:40;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s var(--ease),transform .22s var(--ease);
}
.popover img{width:100%;height:auto;max-height:62vh;object-fit:contain;display:block;margin:0 auto;border-radius:6px}
@media(hover:hover) and (min-width:761px){
  .pcard:hover,.pcard:focus-within,.wcard:hover,.wcard:focus-within{z-index:40}
  .pcard:hover .popover,.pcard:focus-within .popover,
  .wcard:hover .popover,.wcard:focus-within .popover{
    opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}
}
@media(prefers-reduced-motion:reduce){.popover{transition:opacity .18s linear}}

/* ---------- Tap to view, for touch ----------
   A phone has no hover, so the popover above never fires and the work page was
   just a wall of small thumbnails. Tapping a card opens the piece full screen
   instead. Built as its own overlay rather than reusing .popover, because a
   popover sized to a card is the wrong shape on a phone. */
.lightbox{position:fixed;inset:0;z-index:300;display:none;
  background:rgba(35,40,33,.94);padding:1rem;
  align-items:center;justify-content:center}
.lightbox.is-open{display:flex}
.lightbox__in{max-width:min(96vw,760px);max-height:92vh;display:flex;flex-direction:column;gap:.7rem}
.lightbox img{width:100%;height:auto;max-height:74vh;object-fit:contain;
  background:#fff;border-radius:12px;border:2px solid var(--champagne)}
.lightbox__cap{color:var(--champagne);font-size:.95rem;line-height:1.4;text-align:center;margin:0}
.lightbox__cap b{display:block;font-size:1.05rem;margin-bottom:.15rem}
.lightbox__x{position:absolute;top:.8rem;right:.9rem;width:44px;height:44px;border-radius:50%;
  background:var(--champagne);color:var(--forest);border:0;font-size:1.4rem;line-height:1;
  cursor:pointer;display:grid;place-items:center}
/* 44px is the minimum comfortable tap target, so the close button is a real
   one rather than a decorative x. */
body.lb-open{overflow:hidden}
/* Play badge for video pieces. */
.pcard__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:52px;height:52px;border-radius:50%;background:rgba(58,68,51,.88);color:var(--champagne);
  display:grid;place-items:center;font-size:1.15rem;padding-left:3px;pointer-events:none;
  border:3px solid var(--champagne)}
.pcard__img{position:relative}
.pcard__tag{font-size:.875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--moss)}
/* Tags describe the work: sector, market, discipline. Quieter than the role
   badges below them, because the role is the thing worth reading first. */
.pcard__tags{display:flex;flex-wrap:wrap;gap:.28rem;margin:.15rem 0 .1rem}
.pcard__tag2{font-size:.875rem;font-weight:700;letter-spacing:.03em;
  background:var(--champagne);color:var(--forest);padding:.15em .65em;border-radius:999px;line-height:1.4}

/* Role badges. Most pieces were more than one job, so they wrap as a set:
   the lead role filled, the hands-on ones outlined under it. */
.pcard__roles{display:flex;flex-wrap:wrap;gap:.3rem;margin:.1rem 0 .15rem}
.pcard__role{display:inline-block;font-size:.875rem;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;padding:.24em .7em;border-radius:999px;
  border:2px solid rgba(58,68,51,.3);background:transparent;color:var(--moss);line-height:1.35}
.pcard__role--lead{background:var(--tea);border-color:var(--tea);color:var(--forest)}
.pcard h3{margin:0;font-size:1.14rem;line-height:1.25}
.pcard p{margin:0;font-size:1.02rem;color:var(--moss);line-height:1.35}
.pfmore{display:flex;justify-content:center;margin-top:2.2rem}

/* Credit note: sits under the subhead, unboxed. The pink block moved to the
   company filter, which is what needed separating from the type filter. */
.pfnote{background:none;border-left:3px solid var(--pink-deep);border-radius:0;
  padding:.1rem 0 .1rem 1.1rem;margin:1.4rem 0 0;max-width:74ch;
  display:flex;gap:.9rem;align-items:flex-start}
.pfnote__ic{flex:none;width:32px;height:32px;border-radius:50%;background:var(--forest);color:var(--champagne);
  display:grid;place-items:center;font-size:1.02rem}
.pfnote b{display:block;font-size:.875rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--pink-deep);margin-bottom:.25rem}
.pfnote p{margin:0;font-size:1.02rem;line-height:1.55;color:var(--ink)}


/* Per-company overflow link, sits at the end of a capped group. */
.pfgroup__more{display:flex;justify-content:flex-end;margin-top:.9rem}
.pfmore__btn{font-family:var(--sans);font-size:.95rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;background:none;border:0;border-bottom:2px solid var(--pink-deep);
  color:var(--pink-deep);padding:.25em 0;cursor:pointer;transition:color .2s,border-color .2s}
.pfmore__btn:hover{color:var(--forest);border-color:var(--forest)}
/* Back control. Used on the work page after drilling into a company, and as a
   static link at the top of the case study. Same shape both places. */
.pfback{margin:0 0 1.1rem}
.pfback--end{margin:1.6rem 0 0;padding-top:1.6rem;border-top:2px solid rgba(58,68,51,.14)}
.backbtn,.backlink{display:inline-flex;align-items:center;gap:.55em;font-family:var(--sans);
  font-size:.95rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:.6em 1.2em;border-radius:999px;border:2px solid var(--forest);
  background:transparent;color:var(--forest);cursor:pointer;
  transition:background .2s,color .2s,transform .2s var(--ease)}
.backbtn:hover,.backlink:hover{background:var(--forest);color:var(--champagne);transform:translateX(-3px)}
.backbtn span,.backlink span{font-size:1.1em;line-height:1}

/* ---------- Pricing ---------- */
/* ---------- Case studies ---------- */
.csindex{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media(max-width:900px){.csindex{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.csindex{grid-template-columns:1fr}}
.cscard{position:relative;display:flex;flex-direction:column;gap:.5rem;
  background:var(--cream);border:3px solid var(--forest);border-radius:var(--r-lg);
  padding:1.1rem 1.2rem 2.8rem;transition:transform .22s var(--ease)}
.cscard:hover{transform:translateY(-5px);background:var(--tea)}
.cscard__logo{display:block;background:#fff;border-radius:10px;padding:.7rem;height:76px}
.cscard__logo img{width:100%;height:100%;object-fit:contain}
.cscard__co{font-family:var(--poster);text-transform:uppercase;letter-spacing:.04em;
  font-size:1.25rem;color:var(--forest);line-height:1.1}
.cscard__hl{font-size:1rem;line-height:1.4;color:var(--moss)}
.cscard__go{position:absolute;right:1.1rem;bottom:1.1rem;width:32px;height:32px;border-radius:50%;
  background:var(--forest);color:var(--champagne);display:grid;place-items:center;font-size:.95rem}

.cstudy__head{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;margin-bottom:1.2rem}
.cstudy__logo{flex:none;width:150px;height:82px;background:#fff;border-radius:12px;
  border:2px solid rgba(58,68,51,.18);padding:.7rem;display:grid;place-items:center}
.cstudy__logo img{width:100%;height:100%;object-fit:contain}
.cstudy__head h2{margin:0 0 .1em;font-size:clamp(1.8rem,1.2rem + 2.4vw,3rem)}
.cstudy__role{margin:0 0 .5rem;font-size:1rem;color:var(--moss)}
.cstudy__hl{font-size:clamp(1.2rem,1.05rem + .9vw,1.72rem);line-height:1.3;font-weight:700;
  color:var(--forest);max-width:34ch;margin:0 0 1.4rem}
.cstudy__body{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem clamp(1.4rem,3.5vw,3.4rem)}
@media(max-width:820px){.cstudy__body{grid-template-columns:1fr}}
.cstudy__body h3{font-size:.9rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--pink-deep);margin:0 0 .5rem}
.cstudy__body p{font-size:1.04rem;line-height:1.6;margin:0 0 1.4rem}
.cstudy__list{margin:0;padding-left:1.3rem;display:grid;gap:.7rem}
.cstudy__list li{font-size:1.04rem;line-height:1.55}
.cstudy__list li::marker{color:var(--pink-deep);font-weight:800}
.cstudy__link{font-weight:800;color:var(--pink-deep);border-bottom:2px solid var(--pink-deep);white-space:nowrap}
.cstudy__link:hover{color:var(--forest);border-color:var(--forest)}
/* Every other case study is champagne, and the page itself is champagne, so
   those blocks had no visible edge and the content read as floating. A thin
   ink outline gives all seven the same card boundary, tan on tan included. */
.cstudy{border:2px solid var(--ink)}

/* auto-fit, not repeat(4): some studies have three stats and a fixed four-column
   grid left a hole where the fourth would have been */
.cstudy__results{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.8rem;
  margin-top:.6rem;padding-top:1.4rem;border-top:2px solid rgba(58,68,51,.14)}
@media(max-width:760px){.cstudy__results{grid-template-columns:1fr 1fr}}

/* One shot per case study, sitting under the headline as the lead-in to the
   writing. Not floated and not in a side column: both made the picture fight
   the two-column body underneath. Capped at 520px rather than run full width,
   because at full width a single picture outweighed the writing it exists to
   introduce. Below 820px it caps tighter so a phone never opens on a
   full-bleed image. */
.cstudy__shot{width:min(100%,520px);margin:0 0 1.6rem}
.cstudy__shot picture{display:contents}
/* Sized by height as well as width, because these arrive at every shape: a
   square logo mark, a 3:1 spotlight card, a 2.4:1 website screenshot. Capping
   height keeps the square one from towering over the writing while the wide
   ones still run the full 520px. */
.cstudy__shot img{display:block;width:auto;height:auto;max-width:100%;max-height:300px;
  border-radius:var(--r-md);border:2px solid var(--ink);background:#fff}
.cstudy__shot figcaption{font-size:.875rem;line-height:1.4;color:var(--moss);margin-top:.55rem}
@media(max-width:820px){.cstudy__shot{max-width:340px}}
/* Named tools, as their own band. Recruiters screen on stack fluency and
   applicant tracking systems keyword-match these exact strings, so they are
   real text in the page rather than baked into a picture. */
.cstudy__stack{margin-top:1.4rem;padding-top:1.2rem;border-top:2px solid rgba(58,68,51,.14)}
.cstudy__stack h3{font-size:.9rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--pink-deep);margin:0 0 .6rem}
.cstudy__stack .pcard__tag2{background:var(--cream);border:1px solid rgba(58,68,51,.22)}
.block--cream .cstudy__stack .pcard__tag2{background:var(--champagne);border-color:rgba(58,68,51,.18)}

.cstudy__quote{margin:1.4rem 0 0;padding:1.2rem 1.4rem;background:var(--sage);border-radius:var(--r-lg)}
.cstudy__quote p{margin:0 0 .6rem;font-size:1.08rem;line-height:1.55;color:var(--ink)}
.cstudy__quote footer{font-size:.95rem;color:var(--ink)}
.cstudy__quote footer b{display:block;color:var(--ink)}

/* ---------- Two doors ----------
   A recruiter and a founder want different pages. This is the fork. */
.h1--one{max-width:none}
.doors{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:760px){.doors{grid-template-columns:1fr}}
.door{position:relative;display:block;border-radius:var(--r-xl);padding:clamp(1.4rem,1rem + 2vw,2.4rem);
  border:3px solid var(--forest);transition:transform .22s var(--ease)}
.door:hover{transform:translateY(-4px)}
.door--hire{background:var(--forest);color:var(--champagne)}
.door--hire h3{color:var(--champagne)}
.door--hire p{color:rgba(236,224,218,.85)}
.door--hire .door__lb{color:var(--cherry)}
.door--work{background:var(--tea);color:var(--ink)}
.door--work .door__lb{color:var(--forest)}
.door__lb{display:block;font-size:.9rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;margin-bottom:.6rem}
.door h3{font-size:clamp(1.3rem,1.05rem + 1vw,1.9rem);margin:0 0 .5rem}
.door p{margin:0;font-size:1.02rem;line-height:1.5;max-width:34ch}
.door__go{position:absolute;right:clamp(1.2rem,1rem + 1vw,2rem);bottom:clamp(1.2rem,1rem + 1vw,2rem);
  width:38px;height:38px;border-radius:50%;background:var(--cherry);color:var(--forest);
  display:grid;place-items:center;font-size:1.1rem}

.fulltime .ftlist li{color:var(--champagne)}
.fulltime .ftlist li::before{color:var(--cherry)}
.btn--onforest{color:var(--champagne);border-color:var(--champagne)}
.btn--onforest:hover{background:var(--champagne);color:var(--forest);border-color:var(--champagne)}
.aiblock h2{max-width:20ch}

/* Both columns stretch to the same height, then each pins its own last element
   to the bottom: the CTA button on the left, the credit note on the right.
   That drops the bullet list down so it ends level with the "best for" line. */
.onramp{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,3vw,2.6rem);align-items:stretch}
.onramp__l{display:flex;flex-direction:column}
.onramp__l .btn{margin-top:auto;align-self:flex-start}
.onramp__r{display:flex;flex-direction:column;justify-content:flex-end}
.onramp__r .pkg__list{margin-bottom:0}
@media(max-width:880px){
  .onramp{grid-template-columns:1fr}
  .onramp__r{justify-content:flex-start;margin-top:.4rem}
  .onramp__l .btn{margin-top:.4rem}
}
.onramp__flag{display:inline-block;background:var(--cherry);color:var(--forest);font-size:.875rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;padding:.4em 1em;border-radius:999px;margin-bottom:.8rem}
/* The offer is the headline. The price is a footnote to it. */
.onramp h2{color:var(--champagne);margin-bottom:.7rem;
  font-size:clamp(2.1rem,1.3rem + 2.8vw,3.5rem);max-width:14ch}
.onramp__price{font-family:var(--sans);font-size:1.06rem;font-weight:800;letter-spacing:.01em;
  line-height:1.3;color:var(--cherry);margin:0 0 1rem}
.onramp__price span{display:inline;font-family:var(--sans);font-size:1.02rem;font-weight:500;
  letter-spacing:0;color:rgba(236,224,218,.82);margin-left:.5em}
.onramp__price span::before{content:"\00b7";margin-right:.5em;color:rgba(236,224,218,.5)}
.onramp__best{color:rgba(236,224,218,.9);font-size:1rem;margin:0 0 1.2rem;max-width:36ch}
.onramp .pkg__list li{color:var(--champagne)}
.onramp .pkg__list li::before{color:var(--cherry)}
.onramp__note{margin:1rem 0 0;font-size:1.02rem;color:rgba(236,224,218,.75);font-style:italic}

/* Light variant of the audit card, for when it sits on cream rather than
   forest. This block MUST stay below the base .onramp rules above. Several of
   these selectors carry the same specificity as the ones they override, so
   source order is the only thing deciding the winner. It used to sit above,
   which meant .onramp h2 won and painted the headline champagne on a cream
   card: invisible. Every colour here is checked against cream, 4.5:1 minimum.
   forest 9.6 · ink 14.1 · moss 7.4 · pink-deep 5.6 */
.onramp--light h2{color:var(--forest)}
.onramp--light .onramp__price{color:var(--pink-deep)}
.onramp--light .onramp__price span{color:var(--moss)}
.onramp--light .onramp__price span::before{color:var(--moss)}
.onramp--light .onramp__best{color:var(--moss)}
.onramp--light .pkg__list li{color:var(--ink)}
.onramp--light .pkg__list li::before{color:var(--pink-deep)}
.onramp--light .onramp__note{color:var(--moss)}
.onramp--light .onramp__note b{color:var(--pink-deep)}
.onramp--light .onramp__flag{background:var(--forest);color:var(--champagne)}
.onramp--light .btn--light{background:var(--forest);color:var(--champagne);border-color:var(--forest)}
.onramp--light .btn--light:hover{background:var(--cherry);color:var(--forest);border-color:var(--cherry)}

.pkgs{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;align-items:stretch}
.pricing-note{font-size:1.02rem;color:var(--moss);max-width:70ch;margin:1.4rem 0 0}
@media(max-width:960px){.pkgs{grid-template-columns:1fr}}
.pkg{background:var(--cream);border-radius:var(--r-lg);padding:1.6rem 1.5rem;display:flex;flex-direction:column;position:relative}
.pkg--feat{background:var(--tea);border:3px solid var(--forest)}
.pkg__flag{position:absolute;top:-13px;left:1.5rem;background:var(--forest);color:var(--champagne);
  font-size:.875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:.4em 1em;border-radius:999px}
.pkg__name{font-family:var(--poster);text-transform:uppercase;
  font-size:clamp(2.2rem,1.5rem + 2.6vw,3.4rem);line-height:.95;letter-spacing:.03em;
  color:var(--forest);margin:0 0 .15rem}
.pkg__tag{font-size:1.02rem;font-weight:700;color:var(--pink-deep);margin:0 0 .7rem;line-height:1.25}
.pkg--feat .pkg__tag{color:var(--forest)}
/* Commitment badge: the term is the second thing you read, after the name. */
.pkg__term{display:inline-block;font-size:.875rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--forest);background:rgba(58,68,51,.1);
  border:2px solid rgba(58,68,51,.28);border-radius:999px;padding:.42em 1em;margin:0 0 .9rem}
.pkg--feat .pkg__term{background:rgba(58,68,51,.14);border-color:rgba(58,68,51,.4)}
.pkg__best{font-size:1.02rem;margin:0 0 1rem;color:var(--moss);line-height:1.45}
.pkg__list{list-style:none;margin:0 0 1.2rem;padding:0;display:grid;gap:.5rem}
.pkg__price{font-size:1.02rem;font-weight:700;color:var(--forest);margin:0 0 1rem;
  padding-top:.9rem;border-top:2px solid rgba(35,40,33,.14)}
.pkg__price span{display:block;font-family:var(--sans);font-size:.95rem;font-weight:500;
  color:var(--moss);margin-top:.15rem}
.pkg__list li{display:flex;gap:.6em;font-size:1.02rem;line-height:1.45;align-items:flex-start}
.pkg__list li::before{content:"\2733";color:var(--pink-deep);font-size:.68rem;flex:none;margin-top:.4em}
.pkg--feat .pkg__list li::before{color:var(--forest)}
.pkg .btn{margin-top:auto;align-self:flex-start}

.hr__head{margin-bottom:1rem}
.hr__rate{font-family:var(--poster);text-transform:uppercase;font-size:clamp(2.4rem,1.6rem + 2.6vw,3.6rem);
  line-height:1;letter-spacing:.02em;color:var(--forest);margin:0}
.hr__rate span{display:inline-block;font-family:var(--sans);text-transform:none;font-size:1.02rem;font-weight:600;
  letter-spacing:0;color:var(--moss);margin-left:.5rem}
.hr__note{font-size:1.02rem;color:var(--moss);margin:.5rem 0 0;max-width:44ch}
.hr__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.5rem .9rem}
@media(max-width:620px){.hr__list{grid-template-columns:1fr}}
.hr__list li{display:flex;gap:.6em;font-size:1.02rem;align-items:flex-start}
.hr__list li::before{content:"\2733";color:var(--pink-deep);font-size:.68rem;flex:none;margin-top:.4em}

.addons{list-style:none;margin:0;padding:0;display:grid;gap:0}
.addons li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.85rem .2rem;border-bottom:2px solid rgba(35,40,33,.12);font-size:1rem}
.addons li:last-child{border-bottom:0}
.addons b{font-weight:700;white-space:nowrap;color:var(--forest)}

/* Multi-column, not grid: a grid forces equal row heights, so a short answer
   beside a long one leaves a dead gap under it. Columns flow naturally and
   every entry gets the same rule and the same spacing. */
.faqs{columns:2;column-gap:2.4rem}
@media(max-width:760px){.faqs{columns:1}}
.faq{break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
  padding-bottom:1.1rem;margin-bottom:1.1rem;border-bottom:2px solid rgba(58,68,51,.12)}
.faq h3{font-size:1.05rem;margin:0 0 .35rem;color:var(--forest)}
.faq p{margin:0;font-size:1.02rem;color:var(--moss);line-height:1.55}
/* Package names written in ALL CAPS in data.js render bold wherever they appear. */
.faq b,.pricing-note b,.pkg__best b,.pkg__list b,.onramp__note b{
  color:var(--forest);font-weight:800;letter-spacing:.04em}
.onramp__note b{color:var(--cherry)}
.pkg--feat .pkg__best b,.pkg--feat .pkg__list b{color:var(--forest)}

/* ---------- Contact ---------- */
.contact__info{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;font-size:1.05rem;font-weight:700;margin:0 0 1.2rem;justify-content:center}
.contact__info a{border-bottom:3px solid var(--cherry);padding-bottom:2px}
.contact__info a:hover{border-color:var(--forest)}
.contact__sep{display:none}
.social{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-top:1.2rem}
.social a{font-size:.95rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  border:2px solid var(--forest);border-radius:999px;padding:.55em 1.2em;transition:background .2s,color .2s}
.social a:hover{background:var(--forest);color:var(--champagne)}

/* ---------- Case study ---------- */
.cs{display:grid;gap:1.4rem}
.cs__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:.9rem}
.cs__col{border-radius:var(--r-md);padding:1.3rem 1.2rem;background:var(--cream)}
.cs__col:nth-child(2){background:var(--tea)}
.cs__col:nth-child(3){background:var(--sage)}
.cs__collb{font-size:.9rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--moss);margin:0 0 .6rem}
/* moss on sage is 3.29:1, under AA for a 14px label, so the sage column uses ink */
.cs__col:nth-child(3) .cs__collb{color:var(--ink)}
.cs__col p{font-size:1rem;margin:0}
.cs__gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.8rem}
.cs__gallery figure{margin:0;overflow:hidden;background:var(--cream);aspect-ratio:1;display:grid;place-items:center;border-radius:var(--r-md)}

/* ---------- Footer ---------- */
.foot{background:var(--cream);color:var(--ink);border-radius:var(--r-xl) var(--r-xl) 0 0;margin-top:1.5rem;padding:clamp(2rem,1.6rem + 2vw,3.2rem) 0 2.2rem}
.foot__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:1.6rem}
@media(max-width:760px){.foot__grid{grid-template-columns:1fr 1fr}}
.foot__name{font-family:var(--poster);text-transform:uppercase;font-size:clamp(2rem,1.4rem + 2.4vw,3.2rem);
  line-height:.98;letter-spacing:.04em;margin:0 0 .4rem;color:var(--forest)}
/* Moss, not reseda. Reseda on the cream footer is 3.37:1, which scrapes past
   the large-text rule and fails everything else. Moss is 7.4:1 and reads as the
   same soft green at poster size. */
.foot__name span{display:block;color:var(--moss)}
.foot__h{font-size:.9rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--moss);margin:0 0 .9rem}
.foot__role{font-size:.95rem;margin:.15rem 0 0;color:var(--moss);line-height:1.5;max-width:38ch}
/* Footer call to action. The footer is cream, and the standard button is
   forest on champagne, which clears AA comfortably on that background.
   btn--sm exists because the full-size button is scaled for hero and CTA
   blocks and would out-shout the wordmark sitting directly above it. */
.btn--sm{font-size:.85rem;padding:.72em 1.25em}
.foot__cta{margin-top:1.05rem}
/* One rhythm down the Elsewhere column: email, LinkedIn all sit .55rem
   apart, then the location gets a wider gap because it is a different kind of
   fact, not another link. */
.foot__list{display:flex;flex-direction:column;gap:.55rem;font-size:1rem}
/* Hover was reseda at 3.37:1 on cream, under AA for 16px links. Pink-deep is
   5.56:1 and is already the link colour everywhere else on the site. */
.foot__list a:hover,.foot__contact a:hover{color:var(--pink-deep)}
.foot__contact{display:flex;flex-direction:column;gap:.55rem;font-size:1rem;margin:0}
.foot__social{margin-top:.55rem}
.foot__where{font-size:.95rem;margin:1rem 0 0;color:var(--moss)}
.foot__fine{margin:2.2rem 0 0;font-size:.9rem;color:var(--moss);letter-spacing:.04em}

@media(hover:none){
  .btn{padding:1em 1.6em}
  .top__nav a{padding:.5em 0}
  .filter{padding:.7em 1.2em}
  .svcs li{padding:.75rem .5rem}
}
@media(max-width:520px){
  .block{border-radius:22px;padding:1.25rem 1.1rem}
  .foot{border-radius:22px 22px 0 0}
  .wh,.works__head{gap:.8rem}
}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto}.reveal{opacity:1;transform:none}}

/* ---------- Utilities ---------- */
.mt-1{margin-top:1rem}.mt-2{margin-top:1.6rem}
.center{text-align:center}
.stack{display:grid;gap:.9rem}
.hidden{display:none!important}

/* In linkedin contact mode this paragraph is deliberately empty. Without
   this it still reserves a line and a margin, leaving a gap above the
   social links. :empty collapses it and costs nothing when it is used. */
.foot__contact:empty,.contact__info:empty{display:none;margin:0}