/* ==========================================================
   IvyPresto Display, self hosted
   ========================================================== */
@font-face{
  font-family:'Inter';
  src:url('fonts/inter-var.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'IvyPresto Display';
  src:url('fonts/ivypresto-light.woff2') format('woff2');
  font-weight:300;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'IvyPresto Display';
  src:url('fonts/ivypresto-regular.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'IvyPresto Display';
  src:url('fonts/ivypresto-semibold.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap;
}

/* ==========================================================
   Bolt Branding — editorial build
   Warm paper + charcoal base, layered gold accent scale
   ========================================================== */

:root{
  /* Paper and ink */
  --paper:#FBFAF7;
  --paper-alt:#F4F1EA;
  --champagne:#FAF3E3;
  --ink:#191817;
  --ink-soft:#3B3833;
  --muted:#6E6960;
  --line:rgba(25,24,23,0.11);
  --line-soft:rgba(25,24,23,0.055);
  --white:#ffffff;

  /* Gold scale */
  --gold:#EAB431;
  --gold-deep:#8F6612;
  --gold-mid:#D3A02A;
  --gold-soft:#F0DCA4;
  --gold-wash:rgba(234,180,49,0.12);

  /* Warm paper family, so no section is ever flat white */
  --paper-warm:#FAF6EC;
  --champagne:#F8EFDA;
  --champagne-deep:#F2E4C3;

  /* Supporting hues for drenched sections */
  --sage:#DEE6DC;
  --sage-deep:#CEDACB;
  --sage-line:#B6C7B3;
  --clay:#8A4A32;
  --clay-tint:#F7E7DE;

  --r:10px;
  --rl:16px;
  --maxw:1180px;
  --maxw-text:740px;

  --font-display:'IvyPresto Display',Georgia,'Times New Roman',serif;
  --font-ui:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;

  --pad:32px;
  --sec:120px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-ui);
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.narrow{max-width:var(--maxw-text)}

/* ---------- Type ---------- */
.eyebrow{
  display:inline-block;
  font-size:11px;font-weight:700;
  letter-spacing:0.2em;text-transform:uppercase;
  color:var(--gold-deep);
  margin-bottom:22px;
}
.eyebrow.on-dark{color:var(--gold)}

.display{
  font-family:var(--font-display);
  font-size:clamp(40px,6.6vw,84px);
  font-weight:400;
  letter-spacing:-0.004em;
  line-height:1.04;
  color:var(--ink);
}
h2.sec-title{
  font-family:var(--font-display);
  font-size:clamp(28px,3.9vw,50px);
  font-weight:400;
  letter-spacing:-0.002em;
  line-height:1.12;
  color:var(--ink);
}
h3{font-family:var(--font-display);font-size:20.5px;font-weight:600;letter-spacing:0;line-height:1.32}

.lede{
  font-size:clamp(17px,1.5vw,20px);
  font-weight:300;
  color:var(--muted);
  line-height:1.72;
  max-width:600px;
}
.body{font-size:15.5px;color:var(--muted);line-height:1.78}

/* Gold hairline above section titles */
.rule{
  width:44px;height:2px;
  background:var(--gold);
  margin-bottom:26px;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-size:14.5px;font-weight:600;
  padding:15px 28px;border-radius:var(--r);
  transition:transform .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease;
  border:1px solid transparent;
  white-space:nowrap;
}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink:hover{background:#000;transform:translateY(-2px)}
.btn-gold{background:var(--gold);color:var(--ink);font-weight:700}
.btn-gold:hover{background:var(--gold-mid);transform:translateY(-2px);box-shadow:0 12px 30px rgba(234,180,49,.34)}
.btn-line{border-color:var(--line);color:var(--ink);background:transparent}
.btn-line:hover{border-color:var(--ink);transform:translateY(-2px)}
.btn-line.on-dark{border-color:rgba(255,255,255,.22);color:var(--paper)}
.btn-line.on-dark:hover{border-color:var(--paper)}

.txtlink{
  display:inline-flex;align-items:center;gap:8px;
  font-size:14.5px;font-weight:600;color:var(--gold-deep);
  padding-bottom:3px;
  border-bottom:1px solid var(--gold-soft);
  transition:border-color .2s,gap .2s;
}
.txtlink:hover{border-color:var(--gold-deep);gap:12px}

/* ---------- Nav ---------- */
.nav{
  position:sticky;top:0;z-index:80;
  background:rgba(250,246,236,.92);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
}
.nav-in{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);
  height:74px;display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:16.5px;letter-spacing:-0.03em}
.brand-mark{height:25px;width:auto;display:block;flex-shrink:0}
.brand-word{font-weight:800;letter-spacing:-0.03em}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{
  font-size:14.5px;font-weight:500;color:var(--ink-soft);
  transition:color .18s;position:relative;padding:4px 0;
}
.nav-links a:hover{color:var(--ink)}
.nav-links a[aria-current="page"]{color:var(--ink);font-weight:600}
.nav-links a[aria-current="page"]::after{
  content:'';position:absolute;left:0;right:0;bottom:-2px;
  height:2px;background:var(--gold);
}
.nav-right{display:flex;align-items:center;gap:20px}
.nav-cta{font-size:13.5px;font-weight:600;padding:11px 20px;border-radius:8px;background:var(--ink);color:var(--paper);transition:transform .2s,background .2s}
.nav-cta:hover{background:#000;transform:translateY(-2px)}

.burger{display:none;background:none;border:0;cursor:pointer;padding:8px;margin-right:-8px}
.burger span{display:block;width:20px;height:1.8px;background:var(--ink);border-radius:2px}
.burger span+span{margin-top:5px}
.mob{display:none;border-top:1px solid var(--line-soft);background:var(--paper-warm);padding:10px var(--pad) 22px}
.mob.open{display:block}
.mob a{display:block;padding:13px 0;font-size:16px;font-weight:500;border-bottom:1px solid var(--line-soft)}
.mob a:last-of-type{border-bottom:0}
.mob .btn{margin-top:16px;width:100%;justify-content:center}

/* ---------- Sections ---------- */
section{padding:var(--sec) 0}
.sec-alt{
  background:
    radial-gradient(66% 58% at 50% 50%, rgba(234,180,49,.10), transparent 74%),
    var(--paper-alt);
}

/* A soft gold wash, centred so the section edges stay pure */
.sec-wash{
  background:
    radial-gradient(66% 58% at 50% 50%, rgba(234,180,49,.10), transparent 74%),
    var(--paper-warm);
}
/* Gold tint, an even vertical tone so both edges blend cleanly */
.sec-champagne{background:var(--champagne)}
/* Soft sage: a calm pastel counterpoint to the gold */
.sec-sage{background:var(--sage)}
.sec-sage .why{
  background:rgba(255,255,255,.62);
  border-color:rgba(255,255,255,.9);
}
.sec-sage .why:hover{background:rgba(255,255,255,.85);border-color:var(--gold-soft)}
.sec-ink{background:var(--ink);color:var(--paper)}
.sec-ink h2.sec-title,.sec-ink .display{color:var(--paper)}
.sec-ink .lede,.sec-ink .body{color:rgba(251,250,247,.62)}
.sec-tight{padding:84px 0}

/* Section header: title left, supporting copy right */
.sec-head{
  display:grid;grid-template-columns:1fr 1fr;gap:56px;
  align-items:end;margin-bottom:64px;
}
.sec-head.stack{grid-template-columns:1fr;gap:20px;align-items:start;max-width:var(--maxw-text)}

/* ---------- Hero ---------- */
.hero{padding:108px 0 96px;background:var(--paper-warm)}
.hero .display{
  max-width:15ch}
.hero .lede{margin-top:28px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:40px}
.hero-meta{
  display:flex;gap:40px;flex-wrap:wrap;
  margin-top:64px;padding-top:32px;border-top:1px solid var(--line);
}
.hero-meta div{min-width:120px}
.hero-meta dt{font-size:11px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:7px}
.hero-meta dd{font-size:15px;color:var(--ink-soft);font-weight:500}

/* ---------- Work grid ---------- */
.work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:52px 40px}
.work-grid.three{grid-template-columns:repeat(3,1fr);gap:44px 32px}
.work-item{display:block;group:work}
.work-shot{
  overflow:hidden;border-radius:var(--rl);
  background:var(--paper-alt);
  border:1px solid var(--line-soft);
  aspect-ratio:4/3;
}
.work-shot img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.3,1);
}
.work-item:hover .work-shot img{transform:scale(1.035)}
.work-cat{
  font-size:11px;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;
  color:var(--gold-deep);margin:20px 0 8px;
}
.work-name{font-size:20px;font-weight:700;letter-spacing:-0.02em;line-height:1.25}
.work-desc{font-size:14.5px;color:var(--muted);line-height:1.65;margin-top:8px;max-width:44ch}

/* ---------- Capability rows (editorial list) ---------- */
.caps{border-top:1px solid var(--line)}
.cap{
  display:grid;grid-template-columns:1fr 1.15fr;gap:40px;
  padding:34px 0;border-bottom:1px solid var(--line);
  align-items:start;
}
.cap h3{padding-top:1px}
.cap p{font-size:15px;color:var(--muted);line-height:1.72}

/* ---------- Why blocks ---------- */
.why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.why{
  padding:40px 38px;
  background:var(--paper);
  border:1px solid var(--line-soft);
  border-radius:var(--rl);
}
.sec-alt .why,.sec-champagne .why{background:rgba(255,255,255,.66)}
.why-bar{width:34px;height:2px;background:var(--gold);margin-bottom:22px}
.why h3{margin-bottom:12px}
.why p{font-size:15px;color:var(--muted);line-height:1.72}

/* ---------- Process ---------- */
.steps{border-top:1px solid var(--line)}
.step{
  display:grid;grid-template-columns:1fr 1.15fr;gap:40px;
  padding:38px 0;border-bottom:1px solid var(--line);align-items:start;
}
.step h3{font-size:22px;letter-spacing:-0.02em;padding-top:6px}
.step p{font-size:15.5px;color:var(--muted);line-height:1.74}

/* ---------- Quote ---------- */
.quote{max-width:880px;margin:0 auto;text-align:center}
.quote-mark{font-size:64px;line-height:1;color:var(--gold);font-weight:800;margin-bottom:8px}
.quote p{font-family:var(--font-display);
  font-size:clamp(21px,2.5vw,31px);
  font-weight:400;line-height:1.45;letter-spacing:-0.018em;color:var(--ink);
}
.quote cite{
  display:block;margin-top:30px;font-style:normal;
  font-size:13.5px;font-weight:600;color:var(--muted);letter-spacing:0.02em;
}

/* ---------- Service cards (home) ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.svc{
  display:flex;flex-direction:column;
  padding:42px 36px 36px;
  background:var(--paper);
  border:1px solid var(--line-soft);
  border-radius:var(--rl);
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.svc:hover{transform:translateY(-4px);border-color:var(--gold-soft);box-shadow:0 18px 46px rgba(25,24,23,.07)}
.svc-bar{width:34px;height:2px;background:var(--gold);margin-bottom:22px}
.svc h3{font-size:24px;letter-spacing:-0.025em;margin-bottom:14px}
.svc p{font-size:15px;color:var(--muted);line-height:1.72;flex:1}
.svc ul{margin:22px 0 26px;display:flex;flex-direction:column;gap:9px}
.svc li{font-size:14px;color:var(--ink-soft);padding-left:18px;position:relative}
.svc li::before{
  content:'';position:absolute;left:0;top:8px;
  width:6px;height:6px;border-radius:50%;background:var(--gold);
}
.svc .txtlink{align-self:flex-start;margin-top:auto}

/* ---------- Pricing ---------- */
.price-lead{
  display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;
  padding:48px;background:var(--paper);border:1px solid var(--line);border-radius:var(--rl);
}
.price-fig{display:flex;align-items:baseline;gap:10px;margin:6px 0 10px}
.price-from{font-size:14px;font-weight:600;color:var(--muted)}
.price-num{font-family:var(--font-display);font-size:clamp(46px,6vw,68px);font-weight:600;letter-spacing:-0.04em;line-height:1}
.price-note{font-size:14.5px;color:var(--muted)}
.price-col-t{font-size:11px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:18px}
.ticks{display:flex;flex-direction:column;gap:12px}
.ticks li{font-size:15px;color:var(--ink-soft);padding-left:26px;position:relative;line-height:1.55}
.ticks li::before{
  content:'';position:absolute;left:0;top:6px;width:15px;height:15px;border-radius:50%;
  background:var(--gold);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-4.8' stroke='%23191817' stroke-width='1.9' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;
}
.plus{display:flex;flex-direction:column;gap:12px}
.plus li{font-size:15px;color:var(--muted);padding-left:26px;position:relative;line-height:1.55}
.plus li::before{content:'+';position:absolute;left:2px;top:-1px;color:var(--gold-mid);font-weight:700;font-size:16px}

.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.tier{
  padding:36px 32px;background:var(--paper);
  border:1px solid var(--line-soft);border-radius:var(--rl);
  display:flex;flex-direction:column;position:relative;
}
.tier.pop{border-color:var(--gold);box-shadow:0 14px 40px rgba(234,180,49,.14)}
.tier-badge{
  position:absolute;top:-11px;left:32px;
  background:var(--gold);color:var(--ink);
  font-size:10.5px;font-weight:700;letter-spacing:0.13em;text-transform:uppercase;
  padding:5px 12px;border-radius:100px;
}
.tier h3{font-size:18px;margin-bottom:12px}
.tier-price{font-family:var(--font-display);font-size:34px;font-weight:600;letter-spacing:-0.035em;line-height:1;margin-bottom:6px}
.tier-price span{font-size:15px;font-weight:500;color:var(--muted);letter-spacing:0}
.tier-desc{font-size:14px;color:var(--muted);line-height:1.6;margin-bottom:24px;min-height:44px}
.tier ul{display:flex;flex-direction:column;gap:11px;margin-bottom:28px}
.tier li{font-size:14px;color:var(--ink-soft);padding-left:22px;position:relative;line-height:1.5}
.tier li::before{
  content:'';position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:50%;background:var(--gold-mid);
}
.tier .btn{margin-top:auto;justify-content:center}

.quoted{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
}
.quoted-card{
  padding:44px 40px;background:var(--paper);
  border:1px solid var(--line-soft);border-radius:var(--rl);
}
.quoted-card .price-num{font-family:var(--font-display);font-size:30px;letter-spacing:-0.03em}

/* ---------- CTA band ---------- */
.cta-band{background:var(--ink);color:var(--paper);padding:104px 0}
.cta-band h2{font-family:var(--font-display);
  font-size:clamp(30px,4.2vw,54px);font-weight:400;letter-spacing:-0.032em;
  line-height:1.05;color:var(--paper);max-width:16ch;
}
.cta-band h2 em{font-style:normal;color:var(--gold)}
.cta-band p{font-size:17px;font-weight:300;color:rgba(251,250,247,.6);line-height:1.7;max-width:440px;margin-top:20px}
.cta-in{display:grid;grid-template-columns:1.25fr 1fr;gap:56px;align-items:end}
.cta-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:flex-end}

/* ---------- Footer ---------- */
.foot{background:var(--ink);color:var(--paper);padding:0 0 0}
.foot-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.foot-grid{
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:44px;
  padding:72px 0 56px;border-top:1px solid rgba(255,255,255,.09);
}
.foot-brand .brand{color:var(--paper);margin-bottom:16px}
.foot-brand .brand-mark{height:22px}
.foot-tag{font-size:14px;color:rgba(251,250,247,.45);line-height:1.65;max-width:250px;margin-bottom:18px}
.foot-mail{font-size:14.5px;color:var(--gold);font-weight:500}
.foot-mail:hover{text-decoration:underline}
.foot-t{font-size:11px;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;color:rgba(251,250,247,.9);margin-bottom:18px}
.foot-col ul{display:flex;flex-direction:column;gap:11px}
.foot-col a{font-size:14px;color:rgba(251,250,247,.45);transition:color .18s}
.foot-col a:hover{color:var(--paper)}
.foot-bot{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:22px 0 30px;border-top:1px solid rgba(255,255,255,.07);
}
.foot-bot span,.foot-bot a{font-size:12.5px;color:rgba(251,250,247,.32)}
.foot-bot a:hover{color:rgba(251,250,247,.7)}
.foot-legal{display:flex;gap:22px}

/* ---------- Reveal ---------- */
.js .rev{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}
.js .rev.in{opacity:1;transform:none}
.d1{transition-delay:.07s}.d2{transition-delay:.14s}.d3{transition-delay:.21s}
@media (prefers-reduced-motion:reduce){
  .js .rev{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ---------- Responsive ---------- */
@media(max-width:1000px){
  :root{--sec:88px}
  .sec-head{grid-template-columns:1fr;gap:20px;align-items:start}
  .svc-grid,.tiers{grid-template-columns:1fr}
  .work-grid.three{grid-template-columns:repeat(2,1fr)}
  .price-lead{grid-template-columns:1fr;gap:36px;padding:36px}
  .quoted{grid-template-columns:1fr}
  .cta-in{grid-template-columns:1fr;gap:32px;align-items:start}
  .cta-actions{justify-content:flex-start}
  .foot-grid{grid-template-columns:1fr 1fr;gap:36px}
}
@media(max-width:820px){
  .nav-links,.nav-right .nav-cta{display:none}
  .burger{display:block}
  .cap{grid-template-columns:1fr;gap:10px}
  .step{grid-template-columns:1fr;gap:10px}
  .hero-meta{gap:28px}
}
@media(max-width:640px){
  :root{--pad:20px;--sec:72px}
  .hero{padding:72px 0 64px}
  .work-grid,.work-grid.three,.why-grid{grid-template-columns:1fr;gap:36px}
  .why-grid{gap:8px}
  .foot-grid{grid-template-columns:1fr;gap:32px}
  .hero-actions .btn,.cta-actions .btn{width:100%;justify-content:center}
}

/* ---------- Quote form ---------- */
.form-wrap{display:grid;grid-template-columns:1fr 1.35fr;gap:72px;align-items:start}
.form-side .body{margin-top:18px}
.form-side .ticks{margin-top:28px}
.form-card{
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--rl);padding:44px;
}
.sec-alt .form-card{background:var(--paper)}
.fgroup{margin-bottom:26px}
.fgroup:last-of-type{margin-bottom:0}
.fgroup label,.flegend{
  display:block;font-size:12px;font-weight:700;
  letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-soft);
  margin-bottom:10px;
}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.finput,.fselect,.ftext{
  width:100%;font-family:inherit;font-size:15.5px;color:var(--ink);
  background:var(--white);border:1px solid var(--line);border-radius:9px;
  padding:14px 15px;transition:border-color .18s,box-shadow .18s;
}
.finput:focus,.fselect:focus,.ftext:focus{
  outline:none;border-color:var(--gold-mid);
  box-shadow:0 0 0 3px var(--gold-wash);
}
.ftext{min-height:130px;resize:vertical;line-height:1.6}
.fselect{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5l5-5' stroke='%236E6960' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;padding-right:40px;
}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{
  display:inline-block;cursor:pointer;
  font-size:14px;font-weight:500;color:var(--ink-soft);
  padding:11px 19px;border:1px solid var(--line);border-radius:100px;
  background:var(--white);transition:all .18s;
}
.chip span:hover{border-color:var(--gold-mid)}
.chip input:checked+span{
  background:var(--gold);border-color:var(--gold);color:var(--ink);font-weight:600;
}
.chip input:focus-visible+span{box-shadow:0 0 0 3px var(--gold-wash)}
.form-card .btn{width:100%;justify-content:center;margin-top:8px}
.fnote{font-size:13px;color:var(--muted);margin-top:16px;text-align:center;line-height:1.6}
.fdone{display:none;text-align:center;padding:20px 0}
.fdone.show{display:block}
.fdone .tick{
  width:54px;height:54px;border-radius:50%;background:var(--gold);
  display:grid;place-items:center;margin:0 auto 22px;font-size:26px;
}
.fdone h3{font-size:24px;letter-spacing:-0.02em;margin-bottom:12px}
.fdone p{font-size:15.5px;color:var(--muted);line-height:1.7;max-width:38ch;margin:0 auto}
@media(max-width:1000px){
  .form-wrap{grid-template-columns:1fr;gap:44px}
}
@media(max-width:640px){
  .form-card{padding:28px 22px}
  .frow{grid-template-columns:1fr;gap:22px}
}

/* ---------- Anniversary marquee ---------- */
.mq{display:block;background:#F5E3B0;overflow:hidden;position:relative}
.mq:hover{background:#F1DCA1}
.mq-track{display:flex;width:max-content;animation:mqroll 42s linear infinite}
.mq:hover .mq-track{animation-play-state:paused}
.mq-seg{display:flex;align-items:center;flex-shrink:0}
.mq-item{
  display:inline-flex;align-items:center;
  padding:11px 0;white-space:nowrap;
  font-size:12.5px;font-weight:600;letter-spacing:0.03em;
  color:rgba(25,24,23,.78);
}
.mq-dot{width:4px;height:4px;border-radius:50%;background:rgba(25,24,23,.32);margin:0 24px;flex-shrink:0}
.mq-num{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:800}
.mq-strong{color:var(--ink);font-weight:800}
.mq-cta{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:3px}
@keyframes mqroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .mq-track{animation:none}
  .mq-seg+.mq-seg{display:none}
}

/* ---------- Story / anniversary page ---------- */
.prose p{font-size:17px;line-height:1.82;color:var(--ink-soft);max-width:62ch}
.prose p+p{margin-top:22px}
.prose .big{font-family:var(--font-display);
  font-size:clamp(21px,2.3vw,29px);font-weight:400;
  letter-spacing:-0.022em;color:var(--ink);line-height:1.42;max-width:24ch;
}
.prose .gold{color:var(--gold-deep);font-weight:600}

.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.stat{
  padding:34px 30px;background:var(--paper);
  border:1px solid var(--line-soft);border-radius:var(--rl);
}
.stat-n{font-family:var(--font-display);font-size:clamp(30px,3.4vw,42px);font-weight:600;letter-spacing:-0.04em;line-height:1;color:var(--ink)}
.stat-n span{color:var(--gold)}
.stat-l{font-size:13.5px;color:var(--muted);margin-top:10px;line-height:1.5}

.tl{border-left:2px solid var(--gold-soft);margin-left:7px}
.tl-item{position:relative;padding:0 0 60px 46px}
.tl-item:last-child{padding-bottom:0}
.tl-dot{
  position:absolute;left:-9px;top:5px;width:16px;height:16px;border-radius:50%;
  background:var(--gold);border:3px solid var(--paper);
}
.sec-alt .tl-dot{border-color:var(--paper-alt)}
.tl-year{
  font-size:11px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--gold-deep);margin-bottom:10px;
}
.tl-item h3{font-size:clamp(22px,2.4vw,28px);letter-spacing:-0.025em;margin-bottom:13px;line-height:1.2}
.tl-item p{font-size:16px;color:var(--muted);line-height:1.8;max-width:58ch}
.tl-item p+p{margin-top:16px}

.pull{font-family:var(--font-display);
  border-left:3px solid var(--gold);padding:6px 0 6px 28px;margin:44px 0;
  font-size:clamp(20px,2.2vw,27px);font-weight:400;letter-spacing:-0.02em;
  line-height:1.42;color:var(--ink);max-width:26ch;
}
@media(max-width:1000px){.stat-row{grid-template-columns:1fr 1fr}}
@media(max-width:640px){
  .stat-row{grid-template-columns:1fr}
  .tl-item{padding-left:32px;padding-bottom:48px}
  .mq-dot{margin:0 16px}
}

/* ==========================================================
   Orbit hero — 3 services with icons circling on an ellipse
   Pure CSS. Nesting explained:
     .orbit-field  scaleY(--sq)      turns the circle into an ellipse
     .orbit-item   rotate(360deg)    sweeps the orb around
     .orbit-orb    rotate(-360deg)   keeps the icon upright
     .orb-in       scaleY(1/--sq)    undoes the ellipse squash
   ========================================================== */
.orbit{
  --sq:.46;              /* vertical squash of the orbit path */
  --rx:44%;              /* horizontal radius */
  --orb:56px;
  --dur:34s;
  position:relative;overflow:hidden;
  padding:92px 0 100px;
  background:var(--paper-warm);
}
.orbit-stage{
  position:relative;
  max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);
  min-height:400px;
  display:flex;align-items:center;justify-content:center;
}
.orbit-ring{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:100%;height:auto;pointer-events:none;
}
.orbit-ring ellipse{fill:none;stroke:var(--gold-soft);stroke-width:1}
.orbit-ring .r2{stroke:var(--line);stroke-dasharray:2 8}

.orbit-field{position:absolute;inset:0;transform:scaleY(var(--sq));pointer-events:none;z-index:1}
.orbit-item{
  position:absolute;left:50%;top:50%;
  width:calc(var(--rx)*2);
  aspect-ratio:1;
  margin-left:calc(var(--rx)*-1);
  margin-top:calc(var(--rx)*-1);
  animation:orb-spin var(--dur) linear infinite;
  animation-delay:calc(var(--dur) / -12 * var(--i));
}
.orbit-orb{
  position:absolute;left:50%;top:0;
  width:var(--orb);height:var(--orb);
  margin-left:calc(var(--orb) / -2);
  margin-top:calc(var(--orb) / -2);
  animation:orb-spin var(--dur) linear infinite reverse;
  animation-delay:calc(var(--dur) / -12 * var(--i));
}
.orb-in{
  display:grid;place-items:center;
  width:100%;height:100%;border-radius:50%;
  transform:scaleY(calc(1 / var(--sq)));
  /* shared gradient treatment, per-icon colours set inline */
  background:linear-gradient(145deg, var(--c1,#F7E3A8), var(--c2,#EDCB70));
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 8px 22px rgba(25,24,23,.10);
  color:var(--ci,#8F6612);
}
.orb-in svg{width:24px;height:24px;display:block}
@keyframes orb-spin{to{transform:rotate(360deg)}}

.orbit-copy{position:relative;z-index:3;text-align:center;padding:14px 0}
.orbit-services{
  display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:6px 20px;
}
.orbit-svc{
  font-family:var(--font-display);
  font-size:clamp(31px,4.5vw,56px);font-weight:400;
  letter-spacing:-0.004em;line-height:1.08;color:var(--ink);
  position:relative;transition:color .22s;
}
.orbit-svc::after{
  content:'';position:absolute;left:0;right:0;bottom:.06em;height:3px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.orbit-static{cursor:default}
.orbit-static::after{display:none}
.orbit-svc:not(.orbit-static):hover{color:var(--gold-deep)}
.orbit-svc:hover::after{transform:scaleX(1)}
.orbit-plus{
  font-size:clamp(20px,2.6vw,34px);font-weight:300;color:var(--gold);
  line-height:1;transform:translateY(-.08em);
}
.orbit-sub{
  font-size:clamp(15px,1.4vw,17.5px);font-weight:300;color:var(--muted);
  line-height:1.7;max-width:46ch;margin:112px auto 0;
  position:relative;z-index:3;text-align:center;padding:0 var(--pad);
}

@media(max-width:900px){
  .orbit{--rx:42%;--orb:46px;--sq:.46}
  .orbit-stage{min-height:340px}
  .orbit-ring{width:100%}
}
@media(max-width:640px){
  .orbit{--rx:40%;--orb:38px;--sq:.62;padding:64px 0 72px}
  .orbit-stage{min-height:420px}
  .orbit-services{flex-direction:column;gap:2px}
  .orbit-plus{display:none}
  .orb-in svg{width:17px;height:17px}
}
@media(prefers-reduced-motion:reduce){
  .orbit-item,.orbit-orb{animation-play-state:paused}
}

.orbit-services,.orbit-sub{position:relative}

/* Below 900px there is not enough width for icons to circle the words without
   landing on them, so the orbit becomes a band above the copy instead. */
@media(max-width:900px){
  /* Mobile mirrors desktop exactly: same ellipse ratio (--sq .46), same
     horizontal row of words, same dotted SVG ring. Everything scales with
     the viewport rather than being restyled into a different layout. */
  .orbit{--sq:.46;--rx:44%;--orb:clamp(24px,8.2vw,56px)}
  .orbit-stage{
    display:flex;align-items:center;justify-content:center;
    min-height:calc(48vw + 96px);
  }
  .orbit-ring{display:block;width:100%}
  .orbit-field{
    position:absolute;inset:0;transform:scaleY(var(--sq));
    width:auto;height:auto;margin:0;
  }
  .orbit-services{flex-direction:row;gap:4px 12px;flex-wrap:nowrap}
  .orbit-plus{display:block;font-size:clamp(11px,2.6vw,34px);transform:translateY(-.08em)}
  .orbit-svc{font-size:clamp(14px,4.6vw,52px)}
  .orbit-sub{margin:30px auto 0;max-width:42ch}
  .orb-in svg{width:clamp(11px,3.6vw,24px);height:clamp(11px,3.6vw,24px)}
}

/* ==========================================================
   Interaction, blending and orbit motion
   ========================================================== */

/* 1. Capability rows: a gold accent on hover. Not links, just feedback. */
.cap{position:relative;transition:padding-left .34s cubic-bezier(.2,.7,.3,1)}
.cap::before{
  content:'';position:absolute;left:0;top:26px;bottom:26px;width:2px;
  background:var(--gold);transform:scaleY(0);transform-origin:top;
  transition:transform .34s cubic-bezier(.2,.7,.3,1);
}
.cap:hover{padding-left:22px}
.cap:hover::before{transform:scaleY(1)}
.cap:hover h3{color:var(--gold-deep)}
.cap h3{transition:color .28s}

/* 3. Why cards lift and warm on hover */
.why{transition:transform .32s cubic-bezier(.2,.7,.3,1),box-shadow .32s,border-color .32s,background .32s}
.why:hover{transform:translateY(-5px);box-shadow:0 18px 44px rgba(25,24,23,.09);border-color:var(--gold-soft)}
.why-bar{transition:width .34s cubic-bezier(.2,.7,.3,1)}
.why:hover .why-bar{width:58px}

/* 6. Soften every section boundary: each section bleeds its own colour
      upward into the one above, so edges blend instead of cutting. */
section,.cta-band{position:relative}
.wrap{position:relative;z-index:1}
section:not(.cta-band):not(.orbit)::after,.hero::after{
  content:'';position:absolute;left:0;right:0;top:-120px;height:120px;
  pointer-events:none;z-index:0;
}
/* default: plain sections fade from the page's own paper */
section:not(.cta-band):not(.orbit)::after{
  background:linear-gradient(180deg,rgba(251,250,247,0),rgba(251,250,247,1));
}
.sec-alt::after     {background:linear-gradient(180deg,rgba(244,241,234,0),rgba(244,241,234,1))!important}
.sec-wash::after    {background:linear-gradient(180deg,rgba(250,246,236,0),rgba(250,246,236,1))!important}
.sec-champagne::after{background:linear-gradient(180deg,rgba(248,239,218,0),rgba(248,239,218,1))!important}
.sec-sage::after    {background:linear-gradient(180deg,rgba(222,230,220,0),rgba(222,230,220,1))!important}
.hero::after        {background:linear-gradient(180deg,rgba(250,246,236,0),rgba(250,246,236,1))!important}
.orbit{z-index:1}

/* 8. Dotted orbit ring, fine and evenly spaced */
.orbit-ring ellipse{stroke-dasharray:1.5 8;stroke-linecap:round;stroke-width:2.4}
.orbit-ring .r2{display:none}

/* 7. Subtle life in the icons: a slow bob, staggered around the ring */
@keyframes orbBob{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%    {transform:translateY(-3px) rotate(-2deg)}
}
.orb-in svg{
  animation:orbBob 4.2s ease-in-out infinite;
  animation-delay:calc(var(--i,0) * -0.35s);
}
.orb-in{transition:box-shadow .4s ease, filter .4s ease}
.orbit-item:nth-child(odd) .orb-in{animation:orbGlow 6s ease-in-out infinite}
@keyframes orbGlow{
  0%,100%{box-shadow:0 8px 22px rgba(25,24,23,.10)}
  50%    {box-shadow:0 12px 30px rgba(25,24,23,.16)}
}
@media(prefers-reduced-motion:reduce){
  .orb-in svg,.orbit-item:nth-child(odd) .orb-in{animation:none}
}

/* The reveal transition sits on the same elements as the hover effects,
   so declare both together or the hover snaps instead of easing. */
.js .cap.rev{
  transition:opacity .7s ease, transform .7s ease,
             padding-left .34s cubic-bezier(.2,.7,.3,1);
}
.js .why.rev{
  transition:opacity .7s ease, transform .36s cubic-bezier(.2,.7,.3,1),
             box-shadow .32s ease, border-color .32s ease, background .32s ease;
}

/* ==========================================================
   Typewriter line + industries marquee
   ========================================================== */
.typed-line{
  font-family:var(--font-display);
  font-size:clamp(18px,2vw,27px);
  font-weight:400;line-height:1.3;
  color:var(--ink-soft);
  margin-top:14px;
  min-height:1.3em;
}
.caret{
  display:none;width:2px;height:1em;
  background:var(--gold);
  margin-left:3px;vertical-align:-0.12em;
}
.typed-line.typing .caret{display:inline-block;animation:caretBlink .85s step-end infinite}
@keyframes caretBlink{50%{opacity:0}}

/* Industries: a slow horizontal band of pastel pills */
.ind-marquee{overflow:hidden;margin-top:8px;padding:6px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.ind-track{display:flex;width:max-content;animation:indRoll 46s linear infinite}
.ind-marquee:hover .ind-track{animation-play-state:paused}
.ind-seg{display:flex;flex-shrink:0}
.ind{
  display:inline-flex;align-items:center;
  white-space:nowrap;
  margin:0 7px;padding:15px 26px;
  border-radius:12px;
  font-size:15.5px;font-weight:600;letter-spacing:-0.005em;
  background:linear-gradient(145deg, var(--c1,#F7E3A8), var(--c2,#EDCB70));
  color:var(--ci,#8F6612);
  border:0;
}
@keyframes indRoll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .ind-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  .ind-seg+.ind-seg{display:none}
  .ind-seg{flex-wrap:wrap;justify-content:center}
  .ind{margin:5px}
}
@media(max-width:640px){
  .ind{font-size:14px;padding:12px 20px;margin:0 5px}
  .typed-line{font-size:clamp(17px,4.6vw,22px)}
}