/* ==========================================================================
   Karoo Systems — house style v1
   Every value below comes from brand/house-style.html. Change a token here
   and it changes everywhere. Do not introduce a colour that is not a token.
   ========================================================================== */

:root{
  /* --- palette: five colours, no sixth --- */
  --bone:      #F0E9DA;   /* the paper */
  --bone-2:    #E4DCC9;   /* second light band */
  --ink:       #161210;   /* all text on bone, dark bands */
  --teal:      #0E4D46;   /* primary brand block */
  --teal-deep: #0A3B35;   /* footer only */
  --ochre:     #E39B22;   /* every call to action, one per screen */
  --clay:      #BF4526;   /* structural: strips, rails, numerals */

  /* --- derived: warm transparencies, never grey --- */
  --ink-soft:  rgba(22,18,16,.74);
  --ink-line:  rgba(22,18,16,.16);
  --bone-soft: rgba(240,233,218,.78);
  --bone-line: rgba(240,233,218,.22);
  --ochre-deep:#C07E12;   /* ochre, darkened — hover only, never a fill */

  /* derived for contrast — small text only, never used as a fill */
  --ochre-lift:#E5A73F;   /* ochre lifted: 4.58:1 on teal (was 4.14, failed AA) */
  --clay-deep: #B14124;   /* clay deepened: 4.76:1 both ways (was 4.24, failed AA) */

  /* --- type --- */
  --display: 'Chivo','Arial Black',Helvetica,sans-serif;
  --body:    'Karla','Helvetica Neue',Arial,sans-serif;

  /* --- space scale --- */
  --s1: 4px;  --s2: 8px;  --s3: 16px; --s4: 24px;
  --s5: 40px; --s6: 64px; --s7: 96px;

  /* --- radius is zero everywhere in the interface --- */
  --radius: 0;

  /* one tracking value for every uppercase micro-label.
     Six different values had crept in (.10 .11 .12 .14 .16 .17). */
  --track: .13em;

  /* display numerals — three steps, used by .build .n, .fig b,
     .pack .price b and .step .sn */
  --num-lg: clamp(2.2rem,6vw,3rem);
  --num-md: clamp(1.7rem,4.5vw,2.2rem);
  --num-sm: 1.35rem;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* the bar is sticky, so every anchor target needs to clear it */
[id]{scroll-margin-top:calc(72px + var(--s3))}
/* two-row bar on phones, so anchors have to clear more */
@media(max-width:760px){ [id]{scroll-margin-top:calc(96px + var(--s3))} }
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important;animation:none !important}
}

body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

p{margin:0}
img{max-width:100%;height:auto;display:block}

h1,h2,h3,h4{
  font-family:var(--display);
  margin:0;
  letter-spacing:-.035em;
  text-wrap:balance;
}
h1{font-weight:900;font-size:clamp(1.95rem,7.2vw,5rem);line-height:1.02;text-transform:uppercase}
h2{font-weight:900;font-size:clamp(1.45rem,4.6vw,3rem);line-height:1.02;text-transform:uppercase}
h3{font-weight:700;font-size:1.28rem;line-height:1.15;letter-spacing:-.028em}
h4{font-weight:700;font-size:1rem;letter-spacing:-.02em}

a{color:inherit}
:focus-visible{
  outline:3px solid var(--ochre);outline-offset:3px;
  box-shadow:0 0 0 6px rgba(22,18,16,.85);   /* dark half carries on bone, ochre half on teal/ink */
}

.shell{
  max-width:72rem;
  margin:0 auto;
  padding:0 clamp(1.2rem,5vw,3rem);
  width:100%;
}

/* screen-reader-only, and the skip link that appears on focus */
.sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip{
  position:absolute;left:var(--s3);top:-4rem;z-index:60;
  background:var(--ochre);color:var(--ink);
  font-family:var(--display);font-weight:700;font-size:.9rem;
  text-transform:uppercase;letter-spacing:.02em;
  padding:.7rem 1.2rem;text-decoration:none;
  transition:top .15s ease;
}
.skip:focus{top:var(--s3)}

/* --------------------------------------------------------------------------
   Colour bands. No two bands of the same colour ever touch.
   -------------------------------------------------------------------------- */
.block{padding:clamp(3rem,8vw,var(--s7)) 0}
.b-bone {background:var(--bone);   color:var(--ink)}
.b-bone2{background:var(--bone-2); color:var(--ink)}
.b-teal {background:var(--teal);   color:var(--bone)}
.b-ink  {background:var(--ink);    color:var(--bone)}

.sec-label{
  font-weight:700;font-size:.74rem;letter-spacing:var(--track);
  text-transform:uppercase;opacity:.62;margin-bottom:var(--s2);
}
.b-ink .sec-label{color:var(--ochre);opacity:1}
.b-teal .sec-label{color:var(--ochre-lift);opacity:1}

.intro{
  max-width:40rem;              /* ~65 characters at 1.05rem */
  margin-top:var(--s4);
  font-size:1.05rem;
  color:var(--ink-soft);
}
.b-teal .intro,.b-ink .intro{color:var(--bone-soft)}

/* --------------------------------------------------------------------------
   Header — the name is set live in type, no logo file
   -------------------------------------------------------------------------- */
.bar{
  position:sticky;top:0;z-index:40;
  background:var(--ink);color:var(--bone);
  border-bottom:1px solid rgba(240,233,218,.1);
}
.bar .shell{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s3);min-height:72px;
}
.mark{
  /* baseline, not centre: a flex item's baseline for a replaced element is its
     bottom edge, so the mark's foot lands exactly on the type's baseline and
     stays there at any size instead of rounding a pixel either way. */
  display:flex;align-items:baseline;
  font-family:var(--display);font-weight:900;
  font-size:1.5rem;letter-spacing:-.035em;text-transform:uppercase;
  color:var(--bone);text-decoration:none;white-space:nowrap;
}
/* The mark IS the K of Karoo, so it butts straight against "aroo" and is sized
   to the cap height of the type beside it — a touch larger, because its stroke
   is lighter than Chivo Black and it reads thin at matched height. The link
   carries aria-label="Karoo Systems" so it is never read out as "aroo". */
.mark img{
  display:block;height:.78em;width:auto;   /* a shade over Chivo's cap height:
     the mark's stroke is lighter than the type, so matched height reads thin */
  margin-right:.03em;
  position:relative;top:.014em;   /* foot flush with the type's baseline */
}
.mark b{font-weight:inherit}
.mark span{color:var(--ochre);margin-left:.28rem}

.bar nav{display:flex;align-items:center;gap:1.5rem}
.bar nav a{
  color:var(--bone-soft);text-decoration:none;
  font-weight:700;font-size:.74rem;letter-spacing:var(--track);text-transform:uppercase;
  padding:.35rem 0;border-bottom:2px solid transparent;
  display:inline-flex;align-items:center;min-height:44px;   /* finger-sized */
}
.bar nav a:hover{color:var(--ochre)}
.bar nav a.now{color:var(--bone);border-bottom-color:var(--ochre)}

/* On phones the links drop to a second row that scrolls sideways, and the
   ochre Contact button stays up top. No hamburger: nothing is hidden behind
   a tap, and the page is long enough that Packages and Questions have to
   stay reachable from the bar. */
.bar .nav-full{display:flex}
/* Contact is the one thing in the bar that should not look like the rest of
   the bar, so it is an ochre button at every width and the plain nav link
   for the same anchor stands down. */
.bar .nav-mini{
  display:inline-flex;align-items:center;background:var(--ochre);color:var(--ink);
  font-family:var(--display);font-weight:700;font-size:.78rem;
  letter-spacing:.06em;text-transform:uppercase;
  padding:.6rem 1.1rem;text-decoration:none;border-bottom:0;
  min-height:44px;
}
.bar .nav-mini:hover{background:var(--bone);color:var(--ink)}
.bar .nav-full a[href="#contact"]{display:none}
@media(max-width:760px){
  .bar .shell{flex-wrap:wrap;min-height:0;padding-top:.55rem}
  .mark{order:1}
  .bar .nav-mini{order:2;padding:.5rem 1rem;min-height:0}
  .bar .nav-full{
    order:3;flex:0 0 100%;
    margin:.55rem calc(-1 * clamp(1.2rem,5vw,3rem)) 0;
    padding:0 clamp(1.2rem,5vw,3rem);
    gap:1.25rem;
    overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;-ms-overflow-style:none;
    border-top:1px solid rgba(240,233,218,.1);
  }
  .bar .nav-full::-webkit-scrollbar{display:none}
  .bar .nav-full a{flex:0 0 auto;white-space:nowrap;min-height:40px}
}

/* --------------------------------------------------------------------------
   Buttons — primary is always ochre, one per screenful
   -------------------------------------------------------------------------- */
.btn{
  font-family:var(--display);font-weight:700;font-size:.95rem;
  text-transform:uppercase;letter-spacing:.02em;text-decoration:none;
  padding:.9rem 1.6rem;display:inline-flex;align-items:center;gap:var(--s2);
  border:2px solid transparent;border-radius:var(--radius);
  cursor:pointer;transition:transform .12s ease,background-color .12s ease;
}
.btn:active{transform:translateY(2px)}
.btn-ochre{background:var(--ochre);color:var(--ink)}
.btn-ochre:hover{background:var(--ochre-deep)}
.btn-out{border-color:var(--bone-line);color:var(--bone);background:transparent}
.btn-out:hover{border-color:var(--ochre);color:var(--ochre)}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero{
  background:var(--teal);color:var(--bone);
  padding:clamp(3.2rem,10vw,7rem) 0 clamp(3rem,8vw,5rem);
}
.hero .kicker{
  font-weight:700;font-size:.8rem;letter-spacing:var(--track);
  text-transform:uppercase;color:var(--ochre);margin-bottom:var(--s4);
}
.hero h1 mark{
  background:var(--ochre);color:var(--ink);
  padding:.02em .1em .06em;
  line-height:1;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.hero .lede{
  font-size:clamp(1.02rem,2.1vw,1.32rem);
  max-width:40rem;margin-top:var(--s5);color:var(--bone-soft);
}
.hero .cta{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5)}

/* proof strip that closes the hero */
.strip{
  /* ink, not clay: a full-bleed warm-red band under the hero read as an alert
     bar. Ink separates teal hero from the bone section below, and echoes the
     header so the hero sits framed between two dark bars. */
  background:var(--ink);color:var(--bone);
  font-family:var(--display);font-weight:700;font-size:.8rem;
  letter-spacing:var(--track);text-transform:uppercase;padding:.85rem 0;
}
.strip .shell{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);justify-content:space-between}

/* --------------------------------------------------------------------------
   What we build — four disciplines with big clay numerals
   -------------------------------------------------------------------------- */
.builds{
  display:grid;grid-template-columns:1fr;
  gap:var(--s5) clamp(1.5rem,3vw,3rem);margin-top:var(--s6);
}
@media(min-width:700px){ .builds{grid-template-columns:repeat(2,minmax(0,1fr))} }
.build{display:grid;gap:var(--s2);align-content:start}
.build .n{
  font-family:var(--display);font-weight:900;font-size:var(--num-lg);
  line-height:1;letter-spacing:-.05em;color:var(--clay);
  font-variant-numeric:tabular-nums;
}
.build p{color:var(--ink-soft);font-size:1rem}

/* --------------------------------------------------------------------------
   How it works — four steps, a real sequence so numbering is honest
   -------------------------------------------------------------------------- */
.steps{display:grid;margin-top:var(--s6);border-top:1px solid var(--ink-line)}
.step{
  display:grid;grid-template-columns:3.4rem minmax(0,1fr) 9rem;
  gap:var(--s4);padding:var(--s4) 0;
  border-bottom:1px solid var(--ink-line);align-items:start;
}
@media(max-width:760px){
  .step{grid-template-columns:3.4rem minmax(0,1fr);gap:var(--s2) var(--s3)}
  .step .when{grid-column:2;margin-top:var(--s1)}
}
.step .sn{
  font-family:var(--display);font-weight:900;font-size:var(--num-sm);
  color:var(--clay);font-variant-numeric:tabular-nums;line-height:1.25;
}
.step h3{margin-bottom:var(--s1)}
.step p{color:var(--ink-soft);font-size:1rem;max-width:52ch}
.step .when{
  font-family:var(--display);font-weight:700;font-size:.74rem;
  letter-spacing:var(--track);text-transform:uppercase;color:var(--ink-soft);
  line-height:1.5;padding-top:.35rem;
}

/* --------------------------------------------------------------------------
   Packages — the 8px rail is the repeating brand device
   -------------------------------------------------------------------------- */
/* Two tiers: what can be priced in advance, and what has to be quoted. The
   label is what stops R1 950 reading as the ceiling of the whole business. */
.tier-label{
  margin-top:var(--s6);padding-bottom:var(--s2);
  border-bottom:1px solid var(--bone-line);
  font-family:var(--display);font-weight:700;font-size:.78rem;
  letter-spacing:var(--track);text-transform:uppercase;color:var(--ochre-lift);
}
.tier-label + .packs{margin-top:var(--s4)}
/* Four fixed-price cards on ONE row so the ladder reads left to right:
   1 950 - 2 950 - 5 500 - 9 500. */
@media(min-width:68rem){ .packs.fixed{grid-template-columns:repeat(4,1fr)} }

/* Recurring, not once-off, so it gets a slim strip rather than a fifth card. */
.keepstrip{
  margin-top:var(--s4);padding:var(--s4);
  background:rgba(240,233,218,.07);border:1px solid var(--bone-line);
  display:grid;gap:var(--s3);align-items:center;
}
@media(min-width:60rem){ .keepstrip{grid-template-columns:1fr auto;gap:var(--s5)} }
.keepstrip p{font-size:.95rem;color:var(--bone-soft);line-height:1.55}
.keepstrip .kind{
  font-family:var(--display);font-weight:700;font-size:.72rem;
  letter-spacing:var(--track);text-transform:uppercase;color:var(--ochre-lift);
  margin-bottom:var(--s2);
}
.keepstrip .price{display:grid;gap:2px}
.keepstrip .price b{
  font-family:var(--display);font-weight:900;font-size:var(--num-sm);
  color:var(--bone);line-height:1;
}
.keepstrip .price span{font-size:.78rem;color:var(--bone-soft)}

/* The biggest thing on the page must not be drawn as a peer of the cheapest.
   Full-width ink band: a different category, so a different treatment. */
.customband{
  margin-top:var(--s6);padding:clamp(1.6rem,4vw,2.6rem);
  background:var(--ink);color:var(--bone);
  display:grid;gap:var(--s5);
}
@media(min-width:60rem){ .customband{grid-template-columns:1.4fr 1fr} }
.customband .kind{
  font-family:var(--display);font-weight:700;font-size:.72rem;
  letter-spacing:var(--track);text-transform:uppercase;color:var(--ochre);
}
.customband h3{font-size:1.5rem;margin:var(--s2) 0 var(--s3)}
.customband p{color:var(--bone-soft);line-height:1.6;margin-bottom:var(--s4)}
.customband ul{list-style:none;margin:0;padding:0;align-self:center}
.customband li{
  padding:var(--s3) 0;border-top:1px solid var(--bone-line);
  font-size:.92rem;color:var(--bone-soft);
}
.customband li:last-child{border-bottom:1px solid var(--bone-line)}
.packs{margin-top:var(--s4)}
/* Four fixed-price cards must sit on ONE row so the ladder reads left to
   right: 1 950 - 2 950 - 5 500 - 9 500. auto-fit was landing on three and
   orphaning the fourth. */
@media(min-width:68rem){ .packs.fixed{grid-template-columns:repeat(4,1fr)} }
/* The quoted tier has one card with a list and one without, so let each take
   its own height instead of stretching to a void. */
.packs.quoted{align-items:start}
@media(min-width:68rem){ .packs.quoted{grid-template-columns:1.6fr 1fr} }
.packs{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
  gap:clamp(1rem,2.4vw,1.6rem);margin-top:var(--s6);
}
.pack{
  background:var(--bone);color:var(--ink);
  padding:var(--s4) var(--s4) var(--s5);
  display:flex;flex-direction:column;gap:var(--s3);
}
.pack .rail{height:8px;background:var(--clay);width:100%}
.pack .kind{font-weight:700;font-size:.72rem;letter-spacing:var(--track);text-transform:uppercase;opacity:.66}
.pack > p{font-size:1rem;color:var(--ink-soft)}
.pack ul{list-style:none;margin:0;padding:0;display:grid}
.pack li{padding:.62rem 0;border-bottom:1px solid var(--ink-line);font-size:.94rem;line-height:1.45}
.pack li:last-child{border-bottom:0}
.pack .foot{
  margin-top:auto;padding-top:var(--s3);
  font-family:var(--display);font-weight:700;font-size:.78rem;
  letter-spacing:var(--track);text-transform:uppercase;color:var(--ink-soft);
}
/* the middle card inverts for emphasis — one per row, never two */
.pack.invert{background:var(--ink);color:var(--bone)}
.pack.invert .rail{background:var(--ochre)}
.pack.invert > p{color:var(--bone-soft)}
.pack.invert li{border-bottom-color:var(--bone-line)}
.pack.invert .foot{color:var(--bone-soft)}

/* --------------------------------------------------------------------------
   The numbers
   -------------------------------------------------------------------------- */
.numbers-band{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(1.8rem,5vw,3.5rem);align-items:start;margin-top:var(--s6);
}
@media(max-width:820px){.numbers-band{grid-template-columns:1fr}}
.story{display:grid;gap:var(--s3);font-size:1.08rem;max-width:38rem}
.story strong{font-weight:700}
.figures{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--ink-line)}
.fig{background:var(--ochre);color:var(--ink);padding:var(--s4) var(--s3);display:grid;gap:var(--s1)}
.fig b{
  font-family:var(--display);font-weight:900;
  font-size:var(--num-lg);line-height:1;letter-spacing:-.05em;
  font-variant-numeric:tabular-nums;
}
.fig span{font-weight:700;font-size:.7rem;letter-spacing:var(--track);text-transform:uppercase;line-height:1.4;opacity:.85}

/* --------------------------------------------------------------------------
   Questions
   -------------------------------------------------------------------------- */
.qa{display:grid;margin-top:var(--s6);border-top:1px solid var(--ink-line)}
.qa details{border-bottom:1px solid var(--ink-line)}
.qa summary{
  cursor:pointer;list-style:none;padding:var(--s4) 3rem var(--s4) 0;
  min-height:44px;display:flex;align-items:center;
  font-family:var(--display);font-weight:700;font-size:1.1rem;
  letter-spacing:-.025em;position:relative;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:"";position:absolute;right:.4rem;top:50%;
  width:14px;height:2px;background:var(--clay);
  transform:translateY(-50%);   /* was sitting 1px low */
}
.qa summary::before{
  content:"";position:absolute;right:.4rem;top:50%;
  width:14px;height:2px;background:var(--clay);
  transform:translateY(-50%) rotate(90deg);transition:transform .15s ease;
}
.qa details[open] summary::before{transform:translateY(-50%) rotate(0deg)}
.qa .answer{padding:0 3rem var(--s4) 0;color:var(--ink-soft);font-size:1rem;max-width:44rem}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.contact-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
  gap:clamp(1.8rem,5vw,3.5rem);margin-top:var(--s6);
}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr}}

.reach{display:grid;gap:var(--s3);align-content:start}
.reach > p{color:var(--bone-soft);font-size:1.05rem}
.reach a.line{
  display:flex;justify-content:space-between;align-items:center;gap:var(--s3);
  text-decoration:none;color:var(--bone);
  border-bottom:2px solid var(--bone-line);padding:.85rem 0;
  font-family:var(--display);font-weight:700;letter-spacing:-.02em;
}
.reach a.line small{
  font-family:var(--body);font-weight:700;font-size:.7rem;
  letter-spacing:var(--track);text-transform:uppercase;color:var(--bone-soft);
}
.reach a.line:hover{color:var(--ochre);border-bottom-color:var(--ochre)}
.reach .where{
  display:flex;justify-content:space-between;gap:var(--s3);
  padding:.85rem 0;border-bottom:2px solid var(--bone-line);
  font-family:var(--display);font-weight:700;letter-spacing:-.02em;
}
.reach .where small{
  font-family:var(--body);font-weight:700;font-size:.7rem;
  letter-spacing:var(--track);text-transform:uppercase;color:var(--bone-soft);
}

form{display:grid;gap:var(--s4)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
@media(max-width:520px){.two{grid-template-columns:1fr}}
.field{display:grid;gap:var(--s1)}
label{font-weight:700;font-size:.72rem;letter-spacing:var(--track);text-transform:uppercase;color:var(--bone-soft)}
input,select,textarea{
  font-family:var(--body);font-size:1rem;
  padding:.78rem .9rem;width:100%;border-radius:var(--radius);
  border:2px solid var(--bone-line);
  background:rgba(240,233,218,.06);color:var(--bone);
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ochre)}
select option{color:var(--ink);background:var(--bone)}
textarea{min-height:7rem;resize:vertical}
.formnote{font-size:.85rem;color:var(--bone-soft);line-height:1.5}
.formnote a{color:var(--ochre-lift)}
/* the honeypot: bots fill it in, humans never see it */
.trap{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

.notice{border-left:8px solid var(--ochre);padding:var(--s3) var(--s4);background:rgba(240,233,218,.07);font-size:.97rem}
.notice.bad{border-left-color:var(--clay)}
.notice ul{margin:var(--s2) 0 0;padding-left:1.1rem}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Footer — the page should sign off, not just stop. Brand and a closing line
   on the left, then the two things people come down here looking for: where
   to go, and how to reach a person.
   -------------------------------------------------------------------------- */
footer{
  background:var(--teal-deep);color:var(--bone-soft);
  border-top:3px solid var(--ochre);
  font-size:.9rem;
}
.foot-top{
  display:grid;gap:var(--s5);
  padding-top:clamp(2.5rem,6vw,4rem);padding-bottom:clamp(2rem,5vw,3rem);
}
@media(min-width:56rem){ .foot-top{grid-template-columns:1.6fr 1fr 1fr;gap:var(--s6)} }

footer .mark{color:var(--bone);font-size:1.5rem}
.foot-brand p{
  margin-top:var(--s3);max-width:34ch;
  color:var(--bone-soft);line-height:1.6;
}
.foot-col{display:flex;flex-direction:column;gap:var(--s2);align-items:flex-start}
.foot-col h4{
  font-family:var(--display);font-weight:700;font-size:.72rem;
  letter-spacing:var(--track);text-transform:uppercase;color:var(--ochre);
  margin-bottom:var(--s2);
}
.foot-col a,.foot-col span{color:var(--bone-soft);text-decoration:none;line-height:1.7}
.foot-col a{border-bottom:1px solid transparent}
.foot-col a:hover{color:var(--ochre);border-bottom-color:var(--ochre)}

/* one quiet outline button, so the footer still offers a way in */
.foot-cta{
  margin-top:var(--s3);
  font-family:var(--display);font-weight:700;font-size:.78rem;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--bone) !important;padding:.6rem 1rem;
  border:1px solid var(--bone-line) !important;
}
.foot-cta:hover{background:var(--ochre);color:var(--ink) !important;border-color:var(--ochre) !important}

.foot-base{
  display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);
  justify-content:space-between;align-items:center;
  padding-top:var(--s4);padding-bottom:var(--s4);
  border-top:1px solid rgba(240,233,218,.12);
  font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;
  font-weight:700;
}
.foot-base a{color:var(--bone-soft);text-decoration:none;border-bottom:1px solid var(--bone-line)}
.foot-base a:hover{color:var(--ochre);border-bottom-color:var(--ochre)}

/* --------------------------------------------------------------------------
   Inner pages (thank you, privacy, 404) — one narrow column on bone
   -------------------------------------------------------------------------- */
.page{padding:clamp(3rem,9vw,6rem) 0 clamp(3rem,8vw,5rem)}
.page .narrow{max-width:42rem}
.page h1{font-size:clamp(2.2rem,7vw,4rem)}
.page h2{font-size:clamp(1.3rem,3.4vw,1.8rem);margin-top:var(--s6)}
.page p{margin-top:var(--s4);font-size:1.05rem}
.page ul{margin:var(--s4) 0 0;padding-left:1.2rem;display:grid;gap:var(--s2)}
.page li{font-size:1.02rem}
.page .back{margin-top:var(--s6)}
.page a{color:var(--teal);text-decoration-thickness:1px;text-underline-offset:3px}

.nowrap{white-space:nowrap}

/* ==========================================================================
   Motion
   Everything here is decoration. The page is complete and readable with
   JavaScript off and with motion switched off at the OS level.
   ========================================================================== */

/* --- the clay strip becomes a slow ticker ---------------------------------
   Solves a real problem as well as looking alive: four phrases could never
   fit across a phone, and wrapping them left ragged gaps. Scrolling means
   width stops mattering. */
.ticker{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4rem,#000 calc(100% - 4rem),transparent);mask-image:linear-gradient(90deg,transparent,#000 4rem,#000 calc(100% - 4rem),transparent)}
.ticker-track{display:flex;width:max-content;animation:ticker 38s linear infinite}
.ticker-track span{display:flex;align-items:center;gap:2.6rem;padding-right:2.6rem;white-space:nowrap}
.ticker-track span::after{content:"";width:6px;height:6px;background:var(--clay);flex:none}
.strip:hover .ticker-track{animation-play-state:paused}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* --- hero arrives in order ------------------------------------------------ */
.hero .kicker,.hero h1,.hero .lede,.hero .cta{animation:rise .7s cubic-bezier(.2,.7,.25,1) backwards}
.hero .kicker{animation-delay:.05s}
.hero h1{animation-delay:.13s}
.hero .lede{animation-delay:.26s}
.hero .cta{animation-delay:.36s}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* --- the ochre highlight paints itself across the words ------------------- */
.hero h1 mark{
  /* the rule above sets background-color; clear it or there is nothing to wipe */
  background-color:transparent;
  background-image:linear-gradient(var(--ochre),var(--ochre));
  background-repeat:no-repeat;background-position:left center;background-size:0 100%;
  animation:swipe .55s cubic-bezier(.65,0,.35,1) .5s forwards;
}
@keyframes swipe{to{background-size:100% 100%}}

/* --- content lifts in as you reach it ------------------------------------- */
.rv{opacity:0;transform:translateY(16px);transition:opacity .6s cubic-bezier(.2,.7,.25,1),transform .6s cubic-bezier(.2,.7,.25,1)}
.rv.in{opacity:1;transform:none}

/* --- hover: weight and edge, never a shadow -------------------------------
   Only on things that respond to a click. The package, discipline, step and
   figure blocks are plain content, so they stay still — a card that lifts
   under the cursor promises a link that is not there. */
.reach a.line span:last-child{transition:transform .2s cubic-bezier(.2,.7,.25,1)}
.reach a.line:hover span:last-child{transform:translateX(-4px)}

/* --- questions open smoothly --------------------------------------------- */
.qa .answer{animation:unfold .32s cubic-bezier(.2,.7,.25,1)}
@keyframes unfold{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.qa summary{transition:color .18s ease}
.qa summary:hover{color:var(--clay)}

/* --- the header earns its edge only once you have scrolled --------------- */
.bar{transition:box-shadow .25s ease}
.bar.stuck{box-shadow:0 1px 0 var(--ochre)}

/* --- honour the system setting ------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .ticker-track{animation:none;width:auto;flex-wrap:wrap}
  .ticker-track span[aria-hidden="true"]{display:none}
  .hero .kicker,.hero h1,.hero .lede,.hero .cta{animation:none}
  .hero h1 mark{background-size:100% 100%;animation:none}
  .rv{opacity:1;transform:none;transition:none}
  .reach a.line:hover span:last-child{transform:none}
  .qa .answer{animation:none}
}

/* On a phone the two hero buttons sat at different widths, which read as
   untidy rather than deliberate. Full width, stacked, equal. */
@media(max-width:560px){
  .hero .cta{gap:var(--s2)}
  .hero .cta .btn{width:100%;justify-content:center}
}

/* --------------------------------------------------------------------------
   Recent work — client jobs described, never linked. Same 8px rail as the
   packages, so the two proof sections read as one family.
   -------------------------------------------------------------------------- */
.cases{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
  gap:clamp(1rem,2.4vw,1.6rem);margin-top:var(--s6);
}
.case{
  background:rgba(240,233,218,.06);
  border:1px solid var(--bone-line);
  padding:var(--s4) var(--s4) var(--s5);
  display:flex;flex-direction:column;gap:var(--s3);
}
.case .rail{height:8px;background:var(--ochre);width:100%}
.case .kind{font-weight:700;font-size:.72rem;letter-spacing:var(--track);text-transform:uppercase;color:var(--ochre-lift)}
.case h3{font-size:1.15rem}
.case > p{font-size:.98rem;color:var(--bone-soft);line-height:1.55}
.case .tech{
  margin-top:auto;padding-top:var(--s3);border-top:1px solid var(--bone-line);
  font-family:var(--display);font-weight:700;font-size:.72rem;
  letter-spacing:var(--track);text-transform:uppercase;color:var(--bone-soft);
}

/* --------------------------------------------------------------------------
   Prices — the number is the loudest thing on the card after the heading
   -------------------------------------------------------------------------- */
.pack .price{display:grid;gap:2px;margin:calc(var(--s1) * -1) 0 0}
.pack .price b{
  font-family:var(--display);font-weight:900;
  font-size:var(--num-md);line-height:1;letter-spacing:-.045em;
  font-variant-numeric:tabular-nums;color:var(--clay);
}
.pack .price span{font-size:.82rem;letter-spacing:.01em;color:var(--ink-soft);line-height:1.4}
.pack.invert .price b{color:var(--ochre)}
.pack.invert .price span{color:var(--bone-soft)}

/* the two lines of small print that sit under the three cards */
.packnote{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));
  gap:var(--s4) clamp(1.6rem,4vw,3rem);margin-top:var(--s5);
  padding-top:var(--s4);border-top:1px solid var(--bone-line);
}
.packnote small{
  display:block;font-weight:700;font-size:.72rem;letter-spacing:var(--track);
  text-transform:uppercase;color:var(--ochre-lift);margin-bottom:var(--s2);
}
.packnote p{font-size:.96rem;line-height:1.55;color:var(--bone-soft);max-width:34rem}
.packnote p b{color:var(--bone);font-weight:700}

/* --------------------------------------------------------------------------
   Chat line — a button styled to sit in the same stack as the email line.
   Hidden by default; index.html only reveals it once a Crisp ID is set, so
   the site never shows a chat button that does nothing.
   -------------------------------------------------------------------------- */
.reach .chatline{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s1) var(--s3);
  width:100%;text-align:left;cursor:pointer;
  background:none;border:0;border-bottom:2px solid var(--bone-line);
  padding:.85rem 0;color:var(--bone);
  font-family:var(--display);font-weight:700;font-size:1rem;letter-spacing:-.02em;
}
.reach .chatline[hidden]{display:none}
.reach .chatline small{
  font-family:var(--body);font-weight:700;font-size:.7rem;
  letter-spacing:var(--track);text-transform:uppercase;color:var(--bone-soft);
  align-self:center;
}
.reach .chatline > span{justify-self:end;align-self:center}
.reach .chatline em{
  grid-column:1 / -1;font-family:var(--body);font-style:normal;font-weight:400;
  font-size:.82rem;line-height:1.45;color:var(--bone-soft);letter-spacing:0;
}
.reach .chatline:hover{color:var(--ochre);border-bottom-color:var(--ochre)}
.reach .chatline:focus-visible{outline:3px solid var(--ochre);outline-offset:3px}