/* ==========================================================================
   Brilliant — Carbon / Bone / Copper
   Editorial, big and bold. Square geometry throughout: every competitor in
   this market rounds everything into pills, so sharp corners are the tell.
   ========================================================================== */
:root{
  --carbon:#0B0B0C;
  --carbon-2:#151517;
  --carbon-3:#1F1F22;
  --bone:#F2EEE9;
  --bone-2:#E5DFD7;
  --copper:#E4703A;
  --copper-deep:#B4491A;
  --ash:#6E6A66;
  --smoke:#A8A29B;
  --white:#FFFFFF;
  --rule-bone:#D8D1C7;
  --rule-carbon:#2A2A2E;

  --font-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --font-body:"IBM Plex Sans","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --wrap:1800px;
  /* Kept equal to --wrap: the header, banner and footer markup still carries
     .wrap--wide, and a single shell is what we settled on. */
  --wrap-wide:1800px;
  --gutter:clamp(20px,3.5vw,56px);
  --section-y:clamp(72px,9vw,150px);
  --header-h:82px;
}

/* ==========================================================================
   Reset
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
/* Carbon on the root so any area below a short page's footer matches the
   footer rather than showing the bone body ground. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--carbon)}
body{
  margin:0;background:var(--bone);color:var(--carbon);
  font-family:var(--font-body);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:var(--font-display);margin:0;line-height:1;text-wrap:balance}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
figure,blockquote,dl,dd{margin:0}
a{color:var(--copper-deep);text-underline-offset:3px}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--copper);outline-offset:3px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--copper);color:var(--carbon);padding:14px 22px;font-family:var(--font-display);font-weight:700}
.skip-link:focus{left:12px;top:12px}

/* ==========================================================================
   Layout
   ========================================================================== */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--wide{max-width:var(--wrap-wide)}
.section{padding-block:var(--section-y);position:relative}
.section--carbon{background:var(--carbon);color:var(--bone)}
.section--bone{background:var(--bone)}
.section--white{background:var(--white)}
.section--tight{padding-block:clamp(52px,6vw,92px)}
.section--carbon a:not(.btn){color:var(--copper)}

/* Section head: a full-width hairline opens each section, then the eyebrow and
   heading. Numbering was arbitrary — the rule marks the break without implying
   a sequence that does not exist. */
.section__head{
  display:block;margin-bottom:clamp(40px,5vw,76px);
  border-top:1px solid var(--rule-bone);padding-top:clamp(26px,3vw,40px);
}
.section--carbon .section__head,.section--white .section__head{border-top-color:var(--rule-bone)}
.section--carbon .section__head{border-top-color:var(--rule-carbon)}
.section__index{display:none}
/* Cap the measure on the heading itself, so `ch` resolves against the display
   font rather than the 17px body font on the wrapper. */
.section__headings{min-width:0}
.section__headings .h-lg{max-width:24ch}
.section__headings .lede{max-width:56ch}

.eyebrow{
  font-family:var(--font-mono);font-size:.72rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--copper-deep);
  display:flex;align-items:center;gap:12px;margin-bottom:20px;
}
.eyebrow::before{content:"";width:32px;height:2px;background:var(--copper);flex:none}
.section--carbon .eyebrow,.hero .eyebrow{color:var(--copper)}

/* Type scale — deliberately oversized. */
.h-xl{font-size:clamp(2.6rem,5.6vw,6.4rem);font-weight:800;letter-spacing:-.045em;line-height:.94}
.h-lg{font-size:clamp(1.95rem,3.6vw,3.6rem);font-weight:800;letter-spacing:-.038em;line-height:1.02}
.h-md{font-size:clamp(1.3rem,2.2vw,1.7rem);font-weight:700;letter-spacing:-.025em;line-height:1.1}
.lede{font-size:clamp(1.05rem,1.4vw,1.24rem);line-height:1.58;color:var(--ash);margin-top:22px}
.section--carbon .lede,.hero .lede{color:var(--smoke)}
.muted{color:var(--ash)}
.section--carbon .muted{color:var(--smoke)}

/* ==========================================================================
   Duotone imagery
   Grayscale base, copper laid over as hue. Keeps every photograph on-brand
   instead of reading as assorted stock.
   ========================================================================== */
.duo{position:relative;overflow:hidden;background:var(--carbon);isolation:isolate}
.duo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08) brightness(.92)}
.duo::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--copper);mix-blend-mode:color;opacity:.38;
}
.duo--deep img{filter:grayscale(1) contrast(1.14) brightness(.6)}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:17px 32px;border:1px solid transparent;
  font-family:var(--font-display);font-weight:700;font-size:1rem;letter-spacing:-.01em;
  text-decoration:none;cursor:pointer;transition:background-color .16s ease,color .16s ease,border-color .16s ease;
}
.btn--primary{background:var(--copper);color:var(--carbon);border-color:var(--copper)}
.btn--primary:hover{background:var(--white);border-color:var(--white)}
/* Ghost buttons read their colours from the surrounding context rather than
   from a hand-maintained list of dark containers. Any dark block declares the
   two variables once; the button falls back to the light treatment. Previously
   each new dark section (.svc-hero, .page-hero…) silently produced an
   invisible button until it was added to the selector list. */
.hero,.svc-hero,.page-hero,.band,.section--carbon,.own{
  --btn-ghost-fg:var(--bone);
  --btn-ghost-bd:var(--rule-carbon);
  --btn-ghost-hover:var(--bone);
}
.btn--ghost{
  background:transparent;
  color:var(--btn-ghost-fg,var(--carbon));
  border-color:var(--btn-ghost-bd,var(--rule-bone));
}
.btn--ghost:hover{border-color:var(--btn-ghost-hover,var(--carbon))}
.btn--block{width:100%}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:38px}

.arrow-link{
  display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);
  font-weight:700;font-size:.98rem;text-decoration:none;color:var(--copper-deep);
}
.arrow-link::after{content:"→";transition:transform .16s ease}
.arrow-link:hover::after{transform:translateX(4px)}
.section--carbon .arrow-link{color:var(--copper)}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{position:sticky;top:0;z-index:80;background:var(--bone);border-bottom:1px solid var(--rule-bone)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:28px;min-height:var(--header-h)}
.bs-logo{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--carbon);flex:none}
.bs-logo__text{font-family:var(--font-display);font-weight:800;font-size:1.2rem;letter-spacing:-.04em;line-height:1}
.bs-logo__text small{display:block;font-family:var(--font-mono);font-weight:500;font-size:.53rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ash);margin-top:6px}
.bs-logo--light{color:var(--bone)}
.bs-logo--light .bs-logo__text small{color:var(--smoke)}

.nav{margin-left:auto}
.nav__list{display:flex;align-items:center;gap:2px}
.nav__link{
  display:inline-flex;align-items:center;gap:7px;padding:11px 15px;
  font-family:var(--font-display);font-weight:600;font-size:.97rem;letter-spacing:-.012em;
  color:var(--carbon);text-decoration:none;background:none;border:0;cursor:pointer;
}
.nav__link:hover{color:var(--copper-deep)}
.nav__chevron{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s ease}
.nav__toggle[aria-expanded="true"] .nav__chevron{transform:rotate(225deg) translate(-1px,-1px)}
.nav__item{position:relative}

/* The panel's top edge must touch the trigger, or the mouse crosses dead space
   on the way down and mouseleave closes it. The visual gap is padding on the
   panel itself, which keeps the hover path unbroken. */
.nav__panel{position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:12px}
.nav__panel[hidden]{display:none}
.nav__panel-inner{background:var(--carbon);color:var(--bone);border:1px solid var(--rule-carbon)}
.nav__panel--services .nav__panel-inner{display:grid;grid-template-columns:repeat(4,minmax(190px,1fr));gap:30px;padding:32px 34px}
.nav__panel--products .nav__panel-inner{display:grid;gap:1px;background:var(--rule-carbon);width:min(92vw,470px)}
.nav__group-label{font-family:var(--font-mono);font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;color:var(--copper);margin-bottom:14px;padding-bottom:11px;border-bottom:1px solid var(--rule-carbon)}
.nav__service{display:block;padding:8px 0;font-size:.9rem;color:var(--bone);text-decoration:none;line-height:1.35}
.nav__service:hover{color:var(--copper)}
.nav__product{display:block;padding:22px 26px;text-decoration:none;color:var(--bone);background:var(--carbon);border-left:3px solid transparent}
.nav__product:hover{background:var(--carbon-2)}
.nav__product--blue{border-left-color:var(--bone)}
.nav__product--copper{border-left-color:var(--copper)}
.nav__product-name{font-family:var(--font-display);font-weight:800;font-size:1.1rem;letter-spacing:-.03em;display:flex;align-items:center;gap:10px;color:var(--white)}
.nav__product-name em{font-style:normal;font-family:var(--font-mono);font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;padding:3px 8px;background:var(--copper);color:var(--carbon)}
.nav__product-tag{display:block;font-size:.86rem;color:var(--smoke);margin-top:7px;line-height:1.45}

.header-cta{display:flex;align-items:center;gap:12px;flex:none}
.nav-burger{display:none;width:46px;height:46px;border:1px solid var(--rule-bone);background:none;cursor:pointer;position:relative}
.nav-burger span{position:absolute;left:12px;right:12px;height:1.5px;background:var(--carbon);transition:transform .2s ease,opacity .2s ease}
.nav-burger span:nth-child(1){top:17px}
.nav-burger span:nth-child(2){top:22px}
.nav-burger span:nth-child(3){top:27px}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

/* ==========================================================================
   Hero — type left on carbon, photograph bleeding off the right edge
   ========================================================================== */
.hero{background:var(--carbon);color:var(--bone);position:relative;overflow:hidden}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr);align-items:stretch}

.hero__text{
  position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(58px,7vw,104px);
  /* Align the left edge with the site shell without nesting inside .wrap. */
  padding-left:max(var(--gutter),calc((100vw - var(--wrap-wide)) / 2 + var(--gutter)));
  padding-right:clamp(28px,4.4vw,76px);
}
.hero__textinner{position:relative;z-index:1;width:100%}
.hero h1{color:var(--white);margin-bottom:0;font-size:clamp(2.3rem,3.9vw,4.4rem)}
.hero h1 em{font-style:normal;color:var(--copper)}
.hero__line{display:block}
.hero__lede{font-size:clamp(1.04rem,1.35vw,1.24rem);line-height:1.52;color:var(--smoke);margin-top:28px;max-width:46ch}

.hero__figure{
  position:relative;margin:0;display:flex;align-items:center;justify-content:center;
  padding:clamp(28px,3vw,56px) clamp(24px,3.4vw,64px);
  min-height:clamp(420px,46vw,660px);
}
/* Soft copper bloom so the line art sits in a field rather than floating on flat black. */
.hero__figure::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 54% at 52% 46%,rgba(228,112,58,.20),transparent 70%);
}
.hero-iso{position:relative;height:clamp(360px,42vw,600px);width:auto;max-width:100%;overflow:visible}

.iso__stack{color:var(--bone)}
.iso__plate{fill:rgba(242,238,233,.045);stroke:rgba(242,238,233,.42);stroke-width:1.5}
.iso__plate-in{fill:none;stroke:rgba(242,238,233,.18);stroke-width:1;stroke-dasharray:5 7}
.iso__spine{stroke:rgba(242,238,233,.18);stroke-width:1.2;stroke-dasharray:3 8}
.iso__pulse{fill:var(--copper);animation:iso-travel 4.2s cubic-bezier(.5,0,.5,1) infinite;animation-delay:var(--delay)}
@keyframes iso-travel{
  0%{transform:translateY(0);opacity:0}
  12%{opacity:1}
  85%{opacity:1}
  100%{transform:translateY(-288px);opacity:0}
}
.iso__dot{fill:rgba(242,238,233,.5)}
.iso__dot--hot{fill:var(--copper)}
.iso__block{fill:rgba(242,238,233,.12);stroke:rgba(242,238,233,.55);stroke-width:1.4}
.iso__block--hot{fill:rgba(228,112,58,.24);stroke:var(--copper)}
.iso__edge{stroke:rgba(242,238,233,.36);stroke-width:1.15}
.iso__node{fill:var(--carbon);stroke:rgba(242,238,233,.62);stroke-width:1.6;
  animation:iso-breathe 3.6s ease-in-out infinite;animation-delay:var(--delay)}
.iso__node--hot{fill:var(--copper);stroke:var(--copper)}
@keyframes iso-breathe{0%,100%{opacity:.68}50%{opacity:1}}
.iso__panel{fill:rgba(242,238,233,.055);stroke:rgba(242,238,233,.40);stroke-width:1.3}
.iso__panel--hot{fill:rgba(228,112,58,.20);stroke:var(--copper)}
.iso__layer{animation:iso-float 7s ease-in-out infinite;animation-delay:calc(var(--l) * .55s)}
@keyframes iso-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

.hero__statsbar{border-top:1px solid var(--rule-carbon);position:relative;z-index:2}
.hero__statsbar > .wrap,.marquee__inner{max-width:var(--wrap-wide)}
.hero__proof{display:grid;grid-template-columns:repeat(4,1fr)}
.hero__proof div{padding:30px 28px 34px 0}
.hero__proof b{display:block;font-family:var(--font-display);font-weight:800;font-size:clamp(1.8rem,3vw,2.8rem);letter-spacing:-.05em;line-height:1;color:var(--white);font-variant-numeric:tabular-nums}
.hero__proof span{display:block;font-family:var(--font-mono);font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;color:var(--smoke);margin-top:12px}

/* ==========================================================================
   Products
   ========================================================================== */
.products{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule-bone);border-block:1px solid var(--rule-bone)}
.product{background:var(--bone);padding:clamp(30px,3.4vw,52px);display:flex;flex-direction:column}
.product__top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.product__name{font-size:clamp(1.9rem,3.4vw,2.9rem);font-weight:800;letter-spacing:-.045em;line-height:1}
.product__stage{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;padding:5px 11px;white-space:nowrap;background:var(--carbon);color:var(--bone)}
.product--copper .product__stage{background:var(--copper);color:var(--carbon)}
.product__bar{height:4px;margin:26px 0 22px;background:var(--carbon)}
.product--copper .product__bar{background:var(--copper)}
.product__tagline{font-family:var(--font-display);font-weight:700;font-size:clamp(1.15rem,1.6vw,1.4rem);letter-spacing:-.025em;line-height:1.22;margin-bottom:16px}
.product__summary{font-size:1rem;line-height:1.6;color:var(--ash);margin-bottom:30px}
.product__facts{border-top:1px solid var(--rule-bone);margin-bottom:32px}
.product__facts li{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:13px 0;border-bottom:1px solid var(--rule-bone)}
.product__facts .k{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ash)}
.product__facts .v{font-family:var(--font-display);font-weight:700;font-size:1.05rem;font-variant-numeric:tabular-nums;text-align:right}
.product__cta{margin-top:auto}

/* ==========================================================================
   Services
   ========================================================================== */
.svc-groups{display:grid;gap:1px;background:var(--rule-carbon);border-block:1px solid var(--rule-carbon)}
.svc-group{background:var(--carbon);display:grid;grid-template-columns:clamp(120px,14vw,220px) 1fr;gap:clamp(20px,3vw,48px);padding:clamp(28px,3.2vw,44px) 0}
.svc-group__label{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--copper);padding-top:6px}
.svc-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:30px 40px}
.svc{text-decoration:none;color:inherit;display:block}
.svc__rule{display:block;width:30px;height:2px;background:var(--copper);margin-bottom:16px;transition:width .2s ease}
.svc:hover .svc__rule{width:56px}
.svc__name{display:block;font-family:var(--font-display);font-weight:700;font-size:1.16rem;letter-spacing:-.025em;margin-bottom:9px;color:var(--white)}
.svc:hover .svc__name{color:var(--copper)}
.svc__desc{display:block;font-size:.92rem;line-height:1.55;color:var(--smoke)}

/* ==========================================================================
   Differentiators / industries
   ========================================================================== */
.grid-4{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;background:var(--rule-bone);border-block:1px solid var(--rule-bone)}
.cell{background:var(--bone);padding:clamp(28px,3vw,42px)}
.cell__n{display:block;font-family:var(--font-display);font-weight:800;font-size:2.4rem;letter-spacing:-.05em;line-height:1;color:var(--copper);margin-bottom:22px;font-variant-numeric:tabular-nums}
.cell h3{font-size:1.3rem;font-weight:700;letter-spacing:-.028em;margin-bottom:12px;line-height:1.1}
.cell p{font-size:.95rem;line-height:1.58;color:var(--ash)}

.ind-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:var(--rule-carbon);border-block:1px solid var(--rule-carbon)}
.ind{background:var(--carbon);padding:clamp(28px,3vw,42px)}
.ind__bar{height:3px;width:38px;background:var(--copper);margin-bottom:22px}
.ind h3{font-size:1.5rem;font-weight:800;letter-spacing:-.035em;margin-bottom:12px;color:var(--white)}
.ind p{font-size:.95rem;line-height:1.56;color:var(--smoke);min-height:calc(.95rem * 1.56 * 3)}  /* three lines, so headings align across the row */

/* ==========================================================================
   Case study
   ========================================================================== */
.case{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);border:1px solid var(--rule-bone)}
.case__media{position:relative;min-height:340px}
/* Only the stock fill is absolutely positioned; a framed screenshot flows. */
.case__media:not(.case__media--shot) img{position:absolute;inset:0}
.case__body{padding:clamp(30px,3.6vw,58px);display:flex;flex-direction:column;justify-content:center;background:var(--bone)}
.case__meta{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--copper-deep);margin-bottom:22px}
.case__title{font-size:clamp(1.6rem,2.8vw,2.5rem);font-weight:800;letter-spacing:-.04em;line-height:1.04;margin-bottom:20px}
.case__excerpt{font-size:1rem;line-height:1.6;color:var(--ash);margin-bottom:32px}
.case__stats{display:flex;gap:44px;flex-wrap:wrap;margin-bottom:32px}
.case__stat b{display:block;font-family:var(--font-display);font-weight:800;font-size:clamp(2.4rem,4.2vw,3.6rem);letter-spacing:-.05em;line-height:1;color:var(--copper-deep);font-variant-numeric:tabular-nums}
.case__stat span{display:block;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ash);margin-top:12px}

/* ==========================================================================
   Scale band — full-bleed image with a figure set over it
   ========================================================================== */
.band{position:relative;isolation:isolate;background:var(--carbon);color:var(--bone)}
.band__media{position:absolute;inset:0;z-index:0}
.band__media img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1) brightness(.42)}
.band__media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,11,12,.92),rgba(11,11,12,.5) 60%,rgba(228,112,58,.22))}
.band__inner{position:relative;z-index:1;padding-block:clamp(72px,9vw,132px)}
.band h2{color:var(--white);max-width:24ch}
.band__lede{color:var(--smoke);font-size:clamp(1.02rem,1.3vw,1.18rem);line-height:1.55;margin-top:24px;max-width:52ch}

/* ==========================================================================
   Testimonials
   ========================================================================== */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1px;background:var(--rule-bone);border-block:1px solid var(--rule-bone)}
.quote{background:var(--bone);padding:clamp(28px,3vw,44px);display:flex;flex-direction:column}
.quote__mark{font-family:var(--font-display);font-size:3.4rem;font-weight:800;color:var(--copper);line-height:.6;margin-bottom:26px}
.quote__text{font-family:var(--font-display);font-weight:600;font-size:clamp(1.08rem,1.4vw,1.28rem);line-height:1.34;letter-spacing:-.022em;margin-bottom:30px;flex:1}
.quote__who{border-top:1px solid var(--rule-bone);padding-top:18px}
.quote__who b{display:block;font-family:var(--font-display);font-weight:700;font-size:1.02rem}
.quote__who span{display:block;font-size:.87rem;color:var(--ash);margin-top:4px}

/* ==========================================================================
   Insights
   ========================================================================== */
.posts{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1px;background:var(--rule-bone);border-block:1px solid var(--rule-bone)}
.post-card{background:var(--bone);padding:clamp(28px,3vw,42px);display:flex;flex-direction:column;text-decoration:none;color:inherit}
.post-card:hover{background:var(--white)}
.post-card__date{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ash);margin-bottom:22px}
.post-card__title{font-family:var(--font-display);font-weight:700;font-size:1.28rem;line-height:1.16;letter-spacing:-.03em;margin-bottom:14px}
.post-card:hover .post-card__title{color:var(--copper-deep)}
.post-card__excerpt{font-size:.93rem;line-height:1.55;color:var(--ash);flex:1}

/* ==========================================================================
   CTA + form
   ========================================================================== */
.cta-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:clamp(40px,6vw,90px);align-items:start}
.cta-contact{margin-top:44px;display:grid;gap:1px;background:var(--rule-carbon);border-top:1px solid var(--rule-carbon)}
.cta-contact a{display:block;padding:20px 0;color:var(--bone);text-decoration:none;font-family:var(--font-display);font-weight:700;font-size:1.24rem;letter-spacing:-.03em;background:var(--carbon)}
.cta-contact a:hover{color:var(--copper)}
.cta-contact small{display:block;font-family:var(--font-mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--smoke);font-weight:400;margin-bottom:8px}

.form-wrap{background:var(--bone);color:var(--carbon);padding:clamp(28px,3.2vw,44px)}
.form-wrap__title{font-size:clamp(1.4rem,2vw,1.9rem);font-weight:800;letter-spacing:-.035em;line-height:1.05}
.form{display:grid;gap:18px;margin-top:26px}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:grid;gap:8px}
.field label{font-family:var(--font-mono);font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ash)}
.field label span{text-transform:none;letter-spacing:0;font-style:italic;opacity:.75}
.field input,.field select,.field textarea{
  font-family:var(--font-body);font-size:.97rem;padding:14px 16px;
  border:1px solid var(--rule-bone);background:var(--white);color:var(--carbon);width:100%;
  transition:border-color .16s ease,box-shadow .16s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--copper);outline:none;box-shadow:0 0 0 3px rgba(228,112,58,.2)}
.field textarea{resize:vertical;min-height:130px}
.form__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__fine{font-size:.82rem;color:var(--ash);text-align:center}
.form-note{padding:15px 18px;font-size:.93rem;margin-top:18px}
.form-note--ok{background:#E4EFE6;color:#1B5E30;border-left:3px solid #1B5E30}
.form-note--err{background:#F7E3DB;color:var(--copper-deep);border-left:3px solid var(--copper-deep)}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{background:var(--carbon);color:var(--smoke);padding-top:clamp(56px,7vw,96px)}
.footer__grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:clamp(30px,4vw,56px)}
.footer__blurb{font-size:.95rem;line-height:1.6;color:var(--smoke);margin-top:22px;max-width:40ch}
.footer h3{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--copper);margin-bottom:20px;font-weight:500}
.footer__links{display:grid;gap:11px}
.footer__links a{color:var(--smoke);text-decoration:none;font-size:.92rem;line-height:1.4}
.footer__links a:hover{color:var(--copper)}
.footer__bar{margin-top:clamp(46px,6vw,76px);border-top:1px solid var(--rule-carbon);padding-block:26px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;color:var(--smoke)}
.footer__bar a{color:var(--smoke);text-decoration:none}
.footer__bar a:hover{color:var(--copper)}
.footer__legal{display:flex;gap:24px;flex-wrap:wrap}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1180px){
  .nav__panel--services .nav__panel-inner{grid-template-columns:repeat(2,minmax(180px,1fr));width:min(92vw,600px)}
}
@media (max-width:980px){
  .cta-split,.case,.products{grid-template-columns:1fr}
  .hero__grid{grid-template-columns:1fr}
  .hero__text{padding-inline:var(--gutter);order:1}
  .hero__figure{order:2;min-height:0;padding:0 var(--gutter) clamp(36px,7vw,64px)}
  .marquee__label{display:none}
  .marquee__inner{padding-inline:0}
  .marquee__viewport{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%)}
  .case__media{min-height:260px}
  .svc-group{grid-template-columns:1fr;gap:18px}
  .footer__grid{grid-template-columns:1fr 1fr}
  .hero__proof{grid-template-columns:repeat(2,1fr)}
  .hero__proof div{padding-right:18px}
}
@media (max-width:1000px){
  .nav-burger{display:block}
  .header-cta .btn{display:none}
  .nav{
    position:fixed;inset:var(--header-h) 0 0;background:var(--bone);
    overflow-y:auto;padding:24px var(--gutter) 60px;border-top:1px solid var(--rule-bone);
    visibility:hidden;opacity:0;transform:translateY(-6px);
    transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s;
  }
  .nav.is-open{visibility:visible;opacity:1;transform:translateY(0);transition:opacity .2s ease,transform .2s ease,visibility 0s}
  .nav__list{flex-direction:column;align-items:stretch;gap:0}
  .nav__item{border-bottom:1px solid var(--rule-bone)}
  .nav__link{width:100%;justify-content:space-between;padding:18px 0;font-size:1.1rem}
  .nav__panel{position:static;transform:none;border:0;margin-bottom:16px;padding-top:0}
  .nav__panel-inner{border:0}
  .nav__panel--services .nav__panel-inner,.nav__panel--products .nav__panel-inner{grid-template-columns:1fr;width:auto;padding:22px}
  .form__row{grid-template-columns:1fr}

}
@media (max-width:560px){
  body{font-size:16px}
  .footer__grid{grid-template-columns:1fr}
  .quotes,.posts,.ind-grid,.grid-4{grid-template-columns:1fr}
  .case__stats{gap:28px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ==========================================================================
   Motion
   The hidden state is scoped to .js so a no-JS visitor sees everything.
   ========================================================================== */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.js .reveal.is-in{opacity:1;transform:none}
.js .reveal--d1{transition-delay:.09s}
.js .reveal--d2{transition-delay:.18s}
.js .reveal--d3{transition-delay:.27s}

.js .hero__anim{opacity:0;transform:translateY(22px);animation:bs-rise .95s cubic-bezier(.22,.61,.36,1) forwards;animation-delay:calc(var(--i,0) * .11s + .12s)}
@keyframes bs-rise{to{opacity:1;transform:none}}

/* ==========================================================================
   Hero additions
   ========================================================================== */
.hero__lattice{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.26;overflow:hidden;
  animation:bs-drift 34s ease-in-out infinite alternate}
.hero__lattice svg{width:120%;height:120%;margin:-10% 0 0 -10%}
.hero__lattice line{stroke:var(--copper);stroke-width:.055;opacity:.42}
.hero__lattice circle{fill:var(--copper);animation:bs-pulse 4.5s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes bs-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-2.2%,1.6%,0)}}
@keyframes bs-pulse{0%,100%{opacity:.3;r:.3}50%{opacity:.9;r:.5}}

.hero__line{display:block}
.hero h1{margin-bottom:0}

.hero__chips{display:flex;gap:14px;flex-wrap:wrap;margin-top:44px}
.chip{
  display:flex;align-items:flex-start;gap:14px;padding:16px 20px;min-width:296px;
  background:rgba(21,21,23,.62);border:1px solid var(--rule-carbon);
  backdrop-filter:blur(9px);text-decoration:none;color:var(--bone);flex:1 1 240px;min-width:0;
  transition:border-color .2s ease,transform .2s ease,background-color .2s ease;
}
.chip:hover{border-color:var(--copper);transform:translateY(-3px);background:rgba(21,21,23,.86)}
.chip__dot{width:9px;height:9px;flex:none;background:var(--copper);position:relative;margin-top:6px}
.chip--blue .chip__dot{background:var(--bone)}
.chip__dot::after{content:"";position:absolute;inset:-5px;border:1px solid currentColor;opacity:.35}
.chip__body{display:block;flex:1;min-width:0}
.chip__name{display:block;font-family:var(--font-display);font-weight:700;font-size:1.02rem;letter-spacing:-.025em;color:var(--white)}
.chip__tag{display:block;font-size:.8rem;color:var(--smoke);margin-top:4px;line-height:1.34}
.chip__stage{font-family:var(--font-mono);font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;color:var(--copper);flex:none;align-self:flex-start;margin-top:3px}
.chip--blue .chip__stage{color:var(--bone)}

/* ==========================================================================
   Marquee — a fixed label, then a track that fades out at both edges
   ========================================================================== */
.marquee{background:var(--carbon);border-top:1px solid var(--rule-carbon);border-bottom:1px solid var(--rule-carbon);overflow:hidden}
.marquee__inner{
  max-width:var(--wrap-wide);margin-inline:auto;padding-inline:var(--gutter);
  display:flex;align-items:stretch;gap:0;
}
.marquee__label{
  flex:none;display:flex;align-items:center;padding-right:32px;margin-right:32px;
  border-right:1px solid var(--rule-carbon);
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--copper);
}
.marquee__viewport{
  flex:1;min-width:0;overflow:hidden;padding-block:26px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 11%,#000 88%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 11%,#000 88%,transparent 100%);
}
.marquee__track{display:flex;width:max-content;animation:bs-marquee 48s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__item{
  font-family:var(--font-display);font-weight:600;font-size:1.02rem;letter-spacing:-.02em;
  color:var(--bone);padding-right:30px;margin-right:30px;display:inline-flex;align-items:center;white-space:nowrap;
}
.marquee__item::after{content:"";width:6px;height:6px;background:var(--copper);transform:rotate(45deg);margin-left:30px;flex:none}
@keyframes bs-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ==========================================================================
   Service group marks
   ========================================================================== */
.svc-group__label{display:flex;flex-direction:column;gap:16px}
.group-mark{width:32px;height:32px;color:var(--copper);flex:none}

/* ==========================================================================
   Industry cards with imagery
   ========================================================================== */
.ind{position:relative;overflow:hidden;isolation:isolate;min-height:330px;display:flex;flex-direction:column;justify-content:flex-end}
.ind__media{position:absolute;inset:0;z-index:-1}
.ind__media img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1) brightness(.46);transition:transform .8s cubic-bezier(.22,.61,.36,1),filter .5s ease}
.ind__media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(11,11,12,.95) 12%,rgba(11,11,12,.55) 58%,rgba(228,112,58,.2) 100%)}
.ind:hover .ind__media img{transform:scale(1.06);filter:grayscale(.55) contrast(1.12) brightness(.55)}

/* ==========================================================================
   Product cards with imagery
   ========================================================================== */
.product__media{position:relative;aspect-ratio:16/7;margin-bottom:28px;overflow:hidden}
.product__media img{position:absolute;inset:0;transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.product:hover .product__media img{transform:scale(1.05)}

/* ==========================================================================
   Bigger footer logo
   ========================================================================== */
.site-footer .bs-logo{gap:18px}
.site-footer .bs-logo .bs-mark{width:64px;height:64px}
.site-footer .bs-logo__text{font-size:1.85rem;letter-spacing:-.045em}
.site-footer .bs-logo__text small{font-size:.62rem;letter-spacing:.26em;margin-top:9px}

@media (max-width:560px){
  .chip{min-width:0;width:100%}
  .site-footer .bs-logo .bs-mark{width:52px;height:52px}
  .site-footer .bs-logo__text{font-size:1.5rem}
}
@media (prefers-reduced-motion:reduce){
  .hero__lattice,.marquee__track,.hero__lattice circle{animation:none!important}
  .iso__pulse,.iso__node,.iso__layer{animation:none!important}
  .iso__pulse{opacity:0}
  .js .hero__anim{opacity:1;transform:none;animation:none}
}

/* ==========================================================================
   AI thesis: cost / time comparison and delivery guarantees
   ========================================================================== */
.compare{border-top:1px solid var(--rule-bone);margin-bottom:clamp(48px,6vw,84px)}
.compare__row{
  display:grid;grid-template-columns:clamp(150px,17vw,240px) 1fr;
  gap:clamp(20px,3vw,48px);padding:clamp(28px,3.4vw,44px) 0;
  border-bottom:1px solid var(--rule-bone);align-items:start;
}
.compare__label{
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--copper-deep);padding-top:4px;
}
.compare__bars{display:grid;gap:26px}
.compare__meta{display:flex;justify-content:space-between;align-items:baseline;gap:18px;margin-bottom:11px}
.compare__who{font-size:.95rem;color:var(--ash)}
.compare__value{
  font-family:var(--font-display);font-weight:800;font-size:clamp(1.15rem,1.7vw,1.5rem);
  letter-spacing:-.035em;color:var(--ash);font-variant-numeric:tabular-nums;white-space:nowrap;
}
.compare__bar--ours .compare__who{color:var(--carbon);font-weight:500}
.compare__bar--ours .compare__value{color:var(--copper-deep);font-size:clamp(1.35rem,2.2vw,1.95rem)}

.compare__track{height:14px;background:var(--bone-2);position:relative;overflow:hidden}
.compare__fill{display:block;height:100%;width:var(--w)}
.compare__fill--base{background:repeating-linear-gradient(135deg,#C9C2B7 0 6px,#D6D0C6 6px 12px)}
.compare__fill--ours{background:var(--copper)}
/* Bars grow on reveal. Without JS the .reveal hidden state never applies, so
   fills must already be at full width — hence the :not(.js) fallback. */
.js .compare__fill{width:0;transition:width 1.15s cubic-bezier(.22,.61,.36,1) .15s}
.js .compare.is-in .compare__fill{width:var(--w)}
html:not(.js) .compare__fill{width:var(--w)}

.compare__note{
  font-size:.86rem;line-height:1.55;color:var(--ash);max-width:74ch;
  padding-top:22px;border-left:2px solid var(--copper);padding-left:18px;margin-top:26px;
}

.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--rule-bone);border:1px solid var(--rule-bone)}
.pillar{background:var(--bone);padding:clamp(26px,2.8vw,38px)}
.pillar__mark{width:34px;height:34px;color:var(--copper);margin-bottom:22px}
.pillar h3{font-size:1.18rem;font-weight:700;letter-spacing:-.028em;margin-bottom:11px;line-height:1.12}
.pillar p{font-size:.92rem;line-height:1.58;color:var(--ash)}

@media (max-width:760px){
  .compare__row{grid-template-columns:1fr;gap:16px}
  .compare__label{padding-top:0}
  .compare__meta{flex-direction:column;gap:2px;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .js .compare__fill{width:var(--w);transition:none}
}

/* ==========================================================================
   Client logo wall
   Logos arrive in a dozen different colourways, so they are rendered as flat
   bone silhouettes to read as one set. --raw opts out for marks that invert
   badly (a filled shape with knocked-out type becomes a solid blob).
   ========================================================================== */
/* Explicit counts rather than auto-fit: fourteen logos divide cleanly into
   7+7 and 5+5+4, where an auto-fit column count would strand the last row. */
.logo-wall{
  display:grid;grid-template-columns:repeat(7,1fr);
  gap:1px;background:var(--rule-carbon);border:1px solid var(--rule-carbon);
}
.logo-wall__item{background:var(--carbon);display:flex;align-items:center;justify-content:center;padding:34px 26px;min-height:132px}
.logo-wall__link{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.logo-wall__img{
  max-height:44px;width:auto;max-width:100%;object-fit:contain;
  filter:brightness(0) invert(1);opacity:.62;
  transition:opacity .22s ease,transform .22s ease;
}
.logo-wall__img--raw{filter:none;opacity:.8}
.logo-wall__item:hover .logo-wall__img{opacity:1;transform:scale(1.04)}

/* ==========================================================================
   Awards band
   A light strip between the CTA and the footer. These badges are designed for
   white ground: the dark navy ones fight a carbon footer, and the ones with a
   baked-in white background need a matching ground to sit flush.
   ========================================================================== */
/* Pure white, not bone: several badges carry a baked-in #fff background and
   would otherwise show as brighter rectangles against the warmer ground. */
.awards-band{background:var(--white);border-top:1px solid var(--rule-bone)}
.awards{padding-block:clamp(32px,3.6vw,50px);display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.awards__label{
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--copper-deep);flex:none;
}
/* One equal-width track per badge, so the row always spans the full width and
   never orphans the last item. auto-fit was picking a column count from the
   track minimum and dropping the eleventh badge onto its own line. */
.awards__list{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:clamp(8px,1.3vw,22px);align-items:center;width:100%;justify-items:center}
.awards__item{
  display:flex;align-items:center;justify-content:center;width:100%;
  /* 72px is the ceiling: the smallest badge is 142px tall, so anything larger
     upscales past 2x and goes soft on a retina display. */
  height:clamp(54px,4.8vw,72px);
  transition:transform .2s ease;
}
.awards__item:hover{transform:translateY(-3px)}
.awards__item img{height:100%;width:auto;max-width:100%;object-fit:contain}

/* Eleven is prime, so auto-fit inevitably strands the last badge on its own
   line (5+5+1, 9+2). Explicit counts keep every wrapped row well filled. */
@media (max-width:1100px){
  .awards__list{grid-auto-flow:row;grid-template-columns:repeat(6,1fr);gap:clamp(14px,2vw,24px)}
}
@media (max-width:760px){
  .awards__list{grid-template-columns:repeat(4,1fr);gap:16px}
}
@media (max-width:430px){
  .awards__list{grid-template-columns:repeat(3,1fr);gap:14px}
}
@media (max-width:1200px){
  .logo-wall{grid-template-columns:repeat(5,1fr)}
}
@media (max-width:900px){
  .logo-wall{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:560px){
  .logo-wall{grid-template-columns:repeat(2,1fr)}
  .logo-wall__item{padding:24px 16px;min-height:104px}
  .awards__item{height:60px}
}

/* ==========================================================================
   Inner-page hero
   ========================================================================== */
.page-hero{position:relative;background:var(--carbon);color:var(--bone);overflow:hidden;isolation:isolate}
.page-hero__inner{position:relative;z-index:1;padding-top:clamp(56px,7vw,104px);padding-bottom:clamp(44px,5.5vw,80px)}
.page-hero__title{color:var(--white);max-width:21ch;font-size:clamp(2.3rem,4.4vw,4.6rem);margin-top:0}
.page-hero__lede{font-size:clamp(1.04rem,1.4vw,1.26rem);line-height:1.55;color:var(--smoke);margin-top:28px;max-width:60ch}
.page-hero__stats{
  display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(40px,5vw,64px);
  border-top:1px solid var(--rule-carbon);
}
.page-hero__stats div{padding:26px 24px 0 0}
.page-hero__stats b{
  display:block;font-family:var(--font-display);font-weight:800;font-size:clamp(1.6rem,2.8vw,2.5rem);
  letter-spacing:-.05em;line-height:1;color:var(--copper);font-variant-numeric:tabular-nums;
}
.page-hero__stats span{
  display:block;font-family:var(--font-mono);font-size:.64rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--smoke);margin-top:11px;
}

/* ==========================================================================
   Narrative + fact column
   ========================================================================== */
.prose-split{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.85fr);gap:clamp(32px,5vw,80px);align-items:start}
.prose-split__body p{font-size:clamp(1.02rem,1.25vw,1.15rem);line-height:1.68;color:var(--ash);margin-bottom:22px;max-width:64ch}
.prose-split__body p:last-child{margin-bottom:0}
.prose-split__label{
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--copper-deep);padding-bottom:14px;border-bottom:1px solid var(--rule-bone);
}
.factlist{margin:0}
.factlist div{display:flex;justify-content:space-between;gap:18px;padding:13px 0;border-bottom:1px solid var(--rule-bone)}
.factlist dt{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ash)}
.factlist dd{margin:0;font-family:var(--font-display);font-weight:600;font-size:.97rem;text-align:right;letter-spacing:-.01em}

/* ==========================================================================
   Principles
   ========================================================================== */
.principles{display:grid;gap:1px;background:var(--rule-carbon);border-block:1px solid var(--rule-carbon);list-style:none;padding:0;margin:0}
.principle{
  background:var(--carbon);display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(20px,3.5vw,56px);padding:clamp(28px,3.2vw,44px) 0;
}
.principle__n{
  font-family:var(--font-display);font-weight:800;font-size:clamp(1.6rem,2.6vw,2.4rem);
  letter-spacing:-.05em;line-height:1;color:var(--copper);font-variant-numeric:tabular-nums;
}
.principle__body h3{font-size:clamp(1.3rem,2.1vw,1.75rem);font-weight:700;letter-spacing:-.032em;color:var(--white);margin-bottom:12px;line-height:1.12}
.principle__body > p{font-size:1rem;line-height:1.62;color:var(--smoke);max-width:62ch;margin-bottom:20px}
.principle__proof{display:flex;flex-wrap:wrap;gap:10px}
.principle__proof li{
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.04em;line-height:1.4;
  color:var(--bone);border:1px solid var(--rule-carbon);padding:8px 13px;
}
.principle__proof li::before{content:"✓";color:var(--copper);margin-right:9px}

/* ==========================================================================
   Investment figures
   ========================================================================== */
.invest{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--rule-bone);border:1px solid var(--rule-bone)}
.invest__item{background:var(--bone);padding:clamp(28px,3vw,42px)}
.invest__item b{
  display:block;font-family:var(--font-display);font-weight:800;
  font-size:clamp(2.4rem,4.4vw,3.6rem);letter-spacing:-.05em;line-height:1;
  color:var(--copper-deep);font-variant-numeric:tabular-nums;
}
.invest__item span{display:block;font-size:.95rem;line-height:1.5;color:var(--ash);margin-top:16px;max-width:26ch}

@media (max-width:900px){
  .prose-split{grid-template-columns:1fr}
  .page-hero__stats{grid-template-columns:repeat(2,1fr)}
  .page-hero__stats div{padding-right:16px}
}
@media (max-width:640px){
  .principle{grid-template-columns:1fr;gap:12px}
  .principle__proof{flex-direction:column}
}

/* ==========================================================================
   Paired imagery
   ========================================================================== */
.image-duo{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(16px,2vw,28px);margin-top:clamp(40px,5vw,72px)}
.image-duo__item{position:relative;margin:0}
/* Column widths are 1.55fr / 1fr, so these aspect ratios land both images at
   the same height and keep the captions on one baseline. */
.image-duo__media{width:100%;aspect-ratio:1.62}
.image-duo__item:last-child .image-duo__media{aspect-ratio:1.05}
.image-duo__media img{width:100%;height:100%;object-fit:cover;display:block}
/* Lighter copper here: these source photos are bright, and the full-strength
   tint reads as a sepia wash rather than a duotone. */
.image-duo__media::after{opacity:.2}
.image-duo__media img{filter:grayscale(1) contrast(1.14) brightness(.93)}
.image-duo__item figcaption{
  font-family:var(--font-mono);font-size:.68rem;line-height:1.5;letter-spacing:.03em;
  color:var(--ash);margin-top:14px;max-width:46ch;
}

/* ==========================================================================
   Engagement stages
   ========================================================================== */
.stages{list-style:none;padding:0;margin:0;display:grid;gap:0}
.stage{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:stretch}
.stage__rail{position:relative;width:2px;background:var(--rule-bone);justify-self:center}
.stage:first-child .stage__rail{background:linear-gradient(to bottom,transparent 0 26px,var(--rule-bone) 26px)}
.stage:last-child .stage__rail{background:linear-gradient(to bottom,var(--rule-bone) 0 26px,transparent 26px)}
.stage__dot{
  position:absolute;top:20px;left:50%;transform:translateX(-50%);
  width:13px;height:13px;background:var(--copper);border:3px solid var(--bone);border-radius:50%;
}
.stage__card{padding:clamp(20px,2.4vw,32px) 0 clamp(24px,3vw,40px)}
.stage__mark{width:30px;height:30px;color:var(--copper-deep);margin-bottom:16px}
.stage__when{
  font-family:var(--font-mono);font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ash);margin-bottom:10px;
}
.stage__card h3{font-size:clamp(1.24rem,1.9vw,1.6rem);font-weight:700;letter-spacing:-.03em;margin-bottom:12px;line-height:1.14}
.stage__body{font-size:1rem;line-height:1.62;color:var(--ash);max-width:62ch}

/* ==========================================================================
   Ownership
   ========================================================================== */
.own__grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(36px,5vw,84px);align-items:start}
.own__intro h2{color:var(--white)}
.own__list{display:grid;gap:1px;background:var(--rule-carbon);border:1px solid var(--rule-carbon);list-style:none;padding:0;margin:0}
.own__item{background:var(--carbon);padding:clamp(24px,2.6vw,34px)}
.own__item h3{
  font-size:1.14rem;font-weight:700;letter-spacing:-.026em;color:var(--white);
  margin-bottom:10px;display:flex;align-items:baseline;gap:11px;line-height:1.2;
}
.own__item h3::before{content:"";width:9px;height:9px;background:var(--copper);flex:none;transform:translateY(-1px)}
.own__item p{font-size:.94rem;line-height:1.6;color:var(--smoke)}

@media (max-width:900px){
  .image-duo{grid-template-columns:1fr}
  .own__grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .stage{grid-template-columns:auto minmax(0,1fr);gap:16px}
}

/* ==========================================================================
   Stage list + schedule chart
   ========================================================================== */
.stages-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:clamp(32px,5vw,72px);align-items:start}
.stages-figure{
  position:sticky;top:calc(var(--header-h) + 32px);margin:0;
  border:1px solid var(--rule-bone);padding:clamp(20px,2.4vw,30px);background:var(--white);
}
.stages-figure figcaption{
  font-size:.8rem;line-height:1.55;color:var(--ash);margin-top:18px;
  padding-top:16px;border-top:1px solid var(--rule-bone);
}

.gantt{width:100%;height:auto;color:var(--copper);display:block}
.gantt__grid line{stroke:var(--rule-bone);stroke-width:1}
.gantt__tick,.gantt__axis,.gantt__label,.gantt__note,.gantt__launch-label{
  font-family:var(--font-mono);fill:var(--ash);
}
.gantt__tick{font-size:11px}
.gantt__axis{font-size:10px;letter-spacing:.16em}
.gantt__label{font-size:10px;letter-spacing:.1em}
.gantt__note{font-size:9.5px;letter-spacing:.12em;fill:var(--copper-deep)}
.gantt__bar{fill:var(--carbon)}
.gantt__bar--accent{fill:var(--copper)}
.gantt__tail{color:var(--copper)}
.gantt__launch{stroke:var(--copper-deep);stroke-width:1;stroke-dasharray:3 4}
.gantt__launch-label{font-size:9px;letter-spacing:.12em;fill:var(--copper-deep)}

@media (max-width:1000px){
  .stages-layout{grid-template-columns:1fr}
  .stages-figure{position:static;order:-1;margin-bottom:clamp(28px,4vw,44px)}
}

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */
.crumbs{margin-bottom:clamp(28px,3.5vw,44px)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em}
.crumbs li{display:flex;align-items:center;gap:8px;color:var(--ash)}
.crumbs li:not(:last-child)::after{content:"/";color:var(--rule-bone)}
.crumbs a{color:var(--ash);text-decoration:none}
.crumbs a:hover{color:var(--copper-deep)}
.crumbs li[aria-current]{color:var(--carbon)}

/* ==========================================================================
   Product feature card (index)
   ========================================================================== */
.product-feature{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);
  gap:clamp(28px,4vw,64px);align-items:center;
  padding-block:clamp(36px,4.5vw,64px);border-top:1px solid var(--rule-bone);
}
.product-feature:last-of-type{border-bottom:1px solid var(--rule-bone)}
.product-feature__media{align-self:stretch;min-height:260px;position:relative}
.product-feature__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.product-feature__top{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.product-feature__name{font-size:clamp(2rem,3.6vw,3rem);font-weight:800;letter-spacing:-.045em;line-height:1}
.product-feature__tagline{font-family:var(--font-display);font-weight:700;font-size:clamp(1.1rem,1.6vw,1.4rem);letter-spacing:-.025em;margin-bottom:14px}
.product-feature__sub{font-size:1rem;line-height:1.6;color:var(--ash);margin-bottom:26px;max-width:56ch}
.product-feature__stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;border-top:1px solid var(--rule-bone);padding-top:22px}
.product-feature__stats b{display:block;font-family:var(--font-display);font-weight:800;font-size:clamp(1.2rem,2vw,1.7rem);letter-spacing:-.04em;line-height:1;color:var(--copper-deep);font-variant-numeric:tabular-nums}
.product-feature__stats span{display:block;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ash);margin-top:9px;line-height:1.35}

/* Dark variant of the four-cell grid, for carbon sections. */
.grid-4--dark{background:var(--rule-carbon);border-color:var(--rule-carbon)}
.grid-4--dark .cell{background:var(--carbon)}
.grid-4--dark .cell h3{color:var(--white)}
.grid-4--dark .cell p{color:var(--smoke)}

/* ==========================================================================
   Product detail
   ========================================================================== */
.product-shot{margin-top:clamp(36px,4.5vw,64px);aspect-ratio:2.5;position:relative}
.product-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.flow{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--rule-carbon);border:1px solid var(--rule-carbon)}
.flow__step{background:var(--carbon);padding:clamp(26px,2.8vw,38px)}
.flow__n{display:block;font-family:var(--font-display);font-weight:800;font-size:2rem;letter-spacing:-.05em;line-height:1;color:var(--copper);margin-bottom:20px;font-variant-numeric:tabular-nums}
.flow__step h3{font-size:1.2rem;font-weight:700;letter-spacing:-.028em;color:var(--white);margin-bottom:11px;line-height:1.15}
.flow__step p{font-size:.94rem;line-height:1.58;color:var(--smoke)}

.taglist__label{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--copper-deep);margin:clamp(36px,4vw,52px) 0 16px}
.taglist{display:flex;flex-wrap:wrap;gap:10px}
.taglist li{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.04em;padding:9px 15px;border:1px solid var(--rule-bone);color:var(--ash)}

/* Worker table */
.table-scroll{overflow-x:auto;border:1px solid var(--rule-bone)}
.worker-table{width:100%;border-collapse:collapse;background:var(--bone);min-width:760px}
.worker-table th,.worker-table td{text-align:left;padding:16px 18px;border-bottom:1px solid var(--rule-bone);vertical-align:top}
.worker-table thead th{
  font-family:var(--font-mono);font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ash);font-weight:500;background:var(--white);
}
.worker-table tbody th{font-family:var(--font-display);font-weight:700;font-size:1rem;letter-spacing:-.02em;white-space:nowrap}
.worker-table td{font-size:.92rem;line-height:1.5;color:var(--ash)}
.worker-table__cat{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.06em;color:var(--copper-deep);white-space:nowrap}
.worker-table__num{font-family:var(--font-mono);font-size:.82rem;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--carbon)}
.worker-table tbody tr:last-child th,.worker-table tbody tr:last-child td{border-bottom:0}

.built-list{display:grid;gap:16px}
.built-list li{
  font-size:1.02rem;line-height:1.62;color:var(--ash);
  padding-left:26px;position:relative;max-width:62ch;
}
.built-list li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:2px;background:var(--copper)}
.service-links{display:grid;gap:1px;background:var(--rule-bone);border:1px solid var(--rule-bone)}
.service-links a{
  display:block;padding:15px 18px;background:var(--bone);text-decoration:none;
  font-family:var(--font-display);font-weight:600;font-size:.97rem;color:var(--carbon);
}
.service-links a:hover{background:var(--white);color:var(--copper-deep)}

@media (max-width:980px){
  .product-feature{grid-template-columns:1fr}
  .product-feature__media{min-height:220px}
}
@media (max-width:560px){
  .product-feature__stats{grid-template-columns:repeat(2,1fr)}
}


/* ==========================================================================
   Service hero (AI Development)
   ========================================================================== */
.svc-hero{background:var(--carbon);color:var(--bone);position:relative;overflow:hidden}
.svc-hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(32px,4.5vw,72px);align-items:center;padding-block:clamp(52px,6.5vw,96px)}
.svc-hero__title{color:var(--white);font-size:clamp(2.1rem,3.6vw,3.9rem);max-width:21ch}
.svc-hero__lede{font-size:clamp(1.02rem,1.35vw,1.22rem);line-height:1.56;color:var(--smoke);margin-top:26px;max-width:52ch}
.svc-hero__figure{margin:0}
.svc-hero__figcap{font-family:var(--font-mono);font-size:.68rem;line-height:1.5;color:var(--smoke);margin-top:16px;max-width:52ch}
.svc-hero__stats{border-top:1px solid var(--rule-carbon)}

.pipe{width:100%;height:auto;color:var(--bone);overflow:visible}
.pipe__edges path,.pipe__edges line{stroke:rgba(242,238,233,.26);stroke-width:1.2}
.pipe__loop{stroke:var(--copper);stroke-width:1.2;stroke-dasharray:4 5}
.pipe__loop-label,.pipe__cap,.pipe__sub{font-family:var(--font-mono);font-size:9px;letter-spacing:.14em}
.pipe__loop-label{fill:var(--copper)}
.pipe__cap,.pipe__sub{fill:var(--smoke)}
.pipe__pulse{fill:var(--copper)}
.pipe__node{fill:var(--carbon-2);stroke:rgba(242,238,233,.5);stroke-width:1.4}
.pipe__node--model{fill:rgba(228,112,58,.16);stroke:var(--copper)}
.pipe__doc{fill:var(--carbon-2);stroke:rgba(242,238,233,.32);stroke-width:1.2}
.pipe__doc-rule{stroke:rgba(242,238,233,.28);stroke-width:1.4}
.pipe__gate{fill:none;stroke:var(--copper);stroke-width:1.5;stroke-dasharray:5 4}
.pipe__cite{stroke:var(--copper);stroke-width:1.6}
.pipe__label{font-family:var(--font-display);font-weight:600;font-size:12px;fill:var(--bone);letter-spacing:.04em}

/* ==========================================================================
   Demo-to-production gap
   ========================================================================== */
.gap-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(30px,4.5vw,72px);align-items:start}
.gap-list{list-style:none;padding:0;margin:0;display:grid;gap:1px;background:var(--rule-bone);border:1px solid var(--rule-bone)}
.gap-list li{background:var(--bone);padding:22px 24px;display:grid;grid-template-columns:auto 1fr;gap:18px;font-size:1rem;line-height:1.58;color:var(--ash)}
.gap-list__n{font-family:var(--font-mono);font-size:.72rem;color:var(--copper-deep);padding-top:.28em}
.gap-figure{margin:0}
.gap-figure figcaption{font-size:.95rem;line-height:1.6;color:var(--carbon);font-family:var(--font-display);font-weight:600;letter-spacing:-.015em;margin-top:18px}

/* ==========================================================================
   Capability grid
   ========================================================================== */
/* Six capabilities: three columns fills two rows exactly. auto-fit chose four
   and left two empty cells showing the grid's own background. */
.cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule-carbon);border:1px solid var(--rule-carbon)}
.cap{background:var(--carbon);padding:clamp(26px,2.8vw,36px)}
.cap h3{font-size:1.2rem;font-weight:700;letter-spacing:-.028em;color:var(--white);margin-bottom:11px;line-height:1.16}
.cap h3::before{content:"";display:block;width:26px;height:2px;background:var(--copper);margin-bottom:16px}
.cap p{font-size:.94rem;line-height:1.6;color:var(--smoke)}

/* ==========================================================================
   AI acceleration
   ========================================================================== */
.accel__grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr);gap:clamp(30px,4.5vw,72px);align-items:start}
.accel__body{font-size:clamp(1.02rem,1.25vw,1.16rem);line-height:1.66;color:var(--ash);max-width:52ch}
.accel__list{display:grid;gap:1px;background:var(--rule-bone);border:1px solid var(--rule-bone)}
.accel__list li{background:var(--bone);padding:20px 24px;display:grid;gap:7px}
.accel__list b{font-family:var(--font-display);font-weight:700;font-size:1.02rem;letter-spacing:-.02em}
.accel__list b::before{content:"↗";color:var(--copper);margin-right:10px;font-weight:400}
.accel__list span{font-size:.92rem;line-height:1.55;color:var(--ash)}

/* ==========================================================================
   Delivery phases
   ========================================================================== */
/* Three phases: three across, or stacked. A two-column fallback strands one. */
.phases{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule-carbon);border:1px solid var(--rule-carbon)}
.phase-card{background:var(--carbon);padding:clamp(26px,2.8vw,36px);display:flex;flex-direction:column}
.phase-card__head{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;margin-bottom:18px}
.phase-card__n{font-family:var(--font-display);font-weight:800;font-size:1.9rem;letter-spacing:-.05em;line-height:1;color:var(--copper);font-variant-numeric:tabular-nums}
.phase-card__head h3{font-size:1.22rem;font-weight:700;letter-spacing:-.028em;color:var(--white);line-height:1.14}
.phase-card__when{font-family:var(--font-mono);font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;color:var(--smoke);margin-top:8px}
.phase-card__body{font-size:.94rem;line-height:1.6;color:var(--smoke);margin-bottom:22px;flex:1}
.phase-card__out{display:grid;gap:9px;border-top:1px solid var(--rule-carbon);padding-top:18px}
.phase-card__out li{font-family:var(--font-mono);font-size:.7rem;line-height:1.45;color:var(--bone);padding-left:18px;position:relative}
.phase-card__out li::before{content:"→";position:absolute;left:0;color:var(--copper)}

.taglist__label--dark{color:var(--copper)}
.taglist--dark li{border-color:var(--rule-carbon);color:var(--smoke)}

/* ==========================================================================
   Proof band
   ========================================================================== */
.proof-band{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(30px,4.5vw,72px);align-items:center}
.proof-band__media{aspect-ratio:1.15;position:relative}
.proof-band__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{display:grid;gap:1px;background:var(--rule-bone);border:1px solid var(--rule-bone)}
.faq__item{background:var(--bone)}
.faq__item summary{
  cursor:pointer;list-style:none;padding:22px 26px;
  font-family:var(--font-display);font-weight:700;font-size:clamp(1.02rem,1.4vw,1.18rem);
  letter-spacing:-.022em;display:flex;justify-content:space-between;gap:20px;align-items:baseline;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+";color:var(--copper);font-weight:400;flex:none;font-size:1.3em;line-height:1}
.faq__item[open] summary::after{content:"–"}
.faq__item summary:hover{color:var(--copper-deep)}
.faq__answer{padding:0 26px 24px}
.faq__answer p{font-size:.98rem;line-height:1.66;color:var(--ash);max-width:70ch}

.service-links--row{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));list-style:none}

@media (max-width:1080px){
  .cap-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .svc-hero__grid,.gap-grid,.accel__grid,.proof-band{grid-template-columns:1fr}
  .svc-hero__figure{order:-1}
}
@media (max-width:900px){
  .phases{grid-template-columns:1fr}
}
@media (max-width:600px){
  .cap-grid{grid-template-columns:1fr}
}

/* ==========================================================================
   Cost crossover chart
   ========================================================================== */
.xover{width:100%;height:auto;overflow:visible}
.xover__grid line{stroke:var(--rule-carbon);stroke-width:1}
.xover__axis-line{stroke:var(--rule-carbon);stroke-width:1.4}
.xover__tick,.xover__axis,.xover__be-label,.xover__series{font-family:var(--font-mono)}
.xover__tick{font-size:11px;fill:var(--smoke)}
.xover__axis{font-size:9.5px;letter-spacing:.16em;fill:var(--smoke)}
.xover__be{stroke:var(--copper);stroke-width:1;stroke-dasharray:3 4}
.xover__be-dot{fill:var(--copper)}
.xover__be-label{font-size:9.5px;letter-spacing:.12em;fill:var(--copper)}
.xover__line{fill:none;stroke-width:2.4;stroke-linecap:round}
.xover__line--licence{stroke:var(--smoke)}
.xover__line--custom{stroke:var(--copper)}
.xover__series{font-size:10px;letter-spacing:.13em}
.xover__series--licence{fill:var(--smoke)}
.xover__series--custom{fill:var(--copper)}

/* ==========================================================================
   Build vs buy
   ========================================================================== */
.decide{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule-bone);border:1px solid var(--rule-bone)}
.decide__col{background:var(--bone);padding:clamp(26px,3vw,40px)}
.decide__title{
  font-size:clamp(1.2rem,1.9vw,1.55rem);font-weight:700;letter-spacing:-.03em;
  padding-bottom:18px;margin-bottom:22px;border-bottom:2px solid var(--carbon);
}
.decide__col--build .decide__title{border-bottom-color:var(--copper);color:var(--copper-deep)}
.decide__col ul{display:grid;gap:16px}
.decide__col li{font-size:.99rem;line-height:1.6;color:var(--ash);padding-left:26px;position:relative}
.decide__col--buy li::before{content:"○";position:absolute;left:0;color:var(--ash)}
.decide__col--build li::before{content:"●";position:absolute;left:0;color:var(--copper)}

/* ==========================================================================
   System rows (alternating image / copy)
   ========================================================================== */
.sysrows{display:grid;gap:1px;background:var(--rule-bone);border:1px solid var(--rule-bone)}
.sysrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:var(--white);align-items:stretch}
.sysrow--flip .sysrow__media{order:2}
.sysrow__media{position:relative;min-height:280px}
.sysrow__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sysrow__body{padding:clamp(28px,3.4vw,52px);display:flex;flex-direction:column;justify-content:center}
.sysrow__body h3{font-size:clamp(1.4rem,2.4vw,2rem);font-weight:800;letter-spacing:-.035em;margin-bottom:14px;line-height:1.08}
.sysrow__body h3::before{content:"";display:block;width:30px;height:2px;background:var(--copper);margin-bottom:20px}
.sysrow__body p{font-size:1rem;line-height:1.64;color:var(--ash);max-width:52ch}

/* Dark variant of the acceleration block */
.accel--dark .accel__body{color:var(--smoke)}
.accel--dark .accel__list{background:var(--rule-carbon);border-color:var(--rule-carbon)}
.accel--dark .accel__list li{background:var(--carbon)}
.accel--dark .accel__list b{color:var(--white)}
.accel--dark .accel__list span{color:var(--smoke)}

/* ==========================================================================
   Numbered process steps
   ========================================================================== */
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule-bone);border:1px solid var(--rule-bone)}
.steps__item{background:var(--bone);padding:clamp(24px,2.8vw,36px)}
.steps__n{
  display:block;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;
  color:var(--copper-deep);margin-bottom:18px;
}
.steps__item h3{font-size:1.16rem;font-weight:700;letter-spacing:-.026em;margin-bottom:11px;line-height:1.16}
.steps__item p{font-size:.94rem;line-height:1.6;color:var(--ash)}

@media (max-width:900px){
  .decide,.sysrow{grid-template-columns:1fr}
  .sysrow--flip .sysrow__media{order:0}
  .sysrow__media{min-height:220px}
  .steps{grid-template-columns:1fr}
}
@media (min-width:901px) and (max-width:1200px){
  .steps{grid-template-columns:repeat(2,1fr)}
}

/* ==========================================================================
   Acceleration figures: the headline commercial claim
   ========================================================================== */
.accel__figures{
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(28px,5vw,72px);
  padding:clamp(26px,3vw,40px) 0;margin-bottom:clamp(28px,3.5vw,48px);
  border-block:1px solid var(--rule-bone);
}
.accel--dark .accel__figures{border-color:var(--rule-carbon)}
.accel__figure b{
  display:block;font-family:var(--font-display);font-weight:800;
  font-size:clamp(3rem,7vw,5.6rem);letter-spacing:-.05em;line-height:.9;
  color:var(--copper-deep);font-variant-numeric:tabular-nums;
}
.accel--dark .accel__figure b{color:var(--copper)}
.accel__figure span{
  display:block;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ash);margin-top:14px;
}
.accel--dark .accel__figure span{color:var(--smoke)}
.accel__cta{margin-left:auto}
.accel__note{
  font-size:.85rem;line-height:1.6;color:var(--ash);max-width:78ch;
  margin-top:clamp(26px,3vw,40px);padding-left:18px;border-left:2px solid var(--copper);
}
.accel--dark .accel__note{color:var(--smoke)}

@media (max-width:700px){
  .accel__cta{margin-left:0;width:100%}
}

/* ==========================================================================
   Load vs latency chart (Enterprise)
   ========================================================================== */
.load{width:100%;height:auto;overflow:visible}
.load__grid line{stroke:var(--rule-carbon);stroke-width:1}
.load__tick,.load__axis,.load__event-label,.load__series{font-family:var(--font-mono)}
.load__tick{font-size:10px;fill:var(--smoke)}
.load__axis{font-size:9.5px;letter-spacing:.15em;fill:var(--smoke)}
.load__bar{fill:rgba(242,238,233,.13)}
.load__event{stroke:var(--copper);stroke-width:1;stroke-dasharray:3 4;opacity:.55}
.load__event-dot{fill:var(--copper)}
.load__event-label{font-size:9px;letter-spacing:.12em;fill:var(--copper)}
.load__line{fill:none;stroke:var(--copper);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.load__series{font-size:10px;letter-spacing:.13em;fill:var(--copper)}

/* ==========================================================================
   Failure seams
   ========================================================================== */
.seams{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule-bone);border:1px solid var(--rule-bone)}
.seam{background:var(--bone);padding:clamp(26px,3vw,40px)}
.seam__n{display:block;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;color:var(--copper-deep);margin-bottom:18px}
.seam h3{font-size:clamp(1.2rem,1.9vw,1.5rem);font-weight:700;letter-spacing:-.03em;margin-bottom:12px;line-height:1.14}
.seam p{font-size:.97rem;line-height:1.62;color:var(--ash);max-width:52ch}

/* ==========================================================================
   Wide figure with caption
   ========================================================================== */
.wide-figure{margin:clamp(40px,5vw,72px) 0 0}
.wide-figure .duo{aspect-ratio:2.9;position:relative}
.wide-figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wide-figure figcaption{
  font-size:.95rem;line-height:1.62;color:var(--ash);margin-top:18px;max-width:74ch;
  padding-left:18px;border-left:2px solid var(--copper);
}

/* ==========================================================================
   Compliance grid
   ========================================================================== */
.compliance{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule-bone);border:1px solid var(--rule-bone)}
.compliance__item{background:var(--white);padding:clamp(24px,2.8vw,36px)}
.compliance__item h3{
  font-family:var(--font-mono);font-size:.9rem;letter-spacing:.1em;font-weight:600;
  color:var(--copper-deep);margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--rule-bone);
}
.compliance__item p{font-size:.94rem;line-height:1.6;color:var(--ash)}

@media (max-width:900px){
  .seams{grid-template-columns:1fr}
  .compliance{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .compliance{grid-template-columns:1fr}
}

/* ==========================================================================
   Sectors
   ========================================================================== */
.sectors{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule-bone);border:1px solid var(--rule-bone)}
.sector{background:var(--white);padding:clamp(26px,2.8vw,36px);display:flex;flex-direction:column}
.sector h3{font-size:1.16rem;font-weight:700;letter-spacing:-.026em;margin-bottom:12px;line-height:1.16}
.sector h3::before{content:"";display:block;width:26px;height:2px;background:var(--copper);margin-bottom:16px}
.sector p{font-size:.94rem;line-height:1.6;color:var(--ash);flex:1}
.sector__focus{
  font-family:var(--font-mono);font-size:.68rem;line-height:1.5;letter-spacing:.03em;
  color:var(--copper-deep);margin-top:18px;padding-top:16px;border-top:1px solid var(--rule-bone);flex:none;
}

/* Capability sub-points */
.cap__list{margin-top:18px;padding-top:16px;border-top:1px solid var(--rule-carbon);display:grid;gap:8px}
.cap__list li{font-family:var(--font-mono);font-size:.7rem;line-height:1.45;color:var(--bone);padding-left:16px;position:relative}
.cap__list li::before{content:"·";position:absolute;left:0;color:var(--copper);font-size:1.4em;line-height:1}

/* ==========================================================================
   Architecture principles
   ========================================================================== */
.principles-grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule-bone);border:1px solid var(--rule-bone)}
.principle-card{background:var(--bone);padding:clamp(24px,2.8vw,36px)}
.principle-card__n{display:block;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;color:var(--copper-deep);margin-bottom:16px}
.principle-card h3{font-size:1.14rem;font-weight:700;letter-spacing:-.026em;margin-bottom:11px;line-height:1.16}
.principle-card p{font-size:.93rem;line-height:1.6;color:var(--ash)}

/* ==========================================================================
   De-risking
   ========================================================================== */
.derisk{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule-carbon);border:1px solid var(--rule-carbon)}
.derisk__item{background:var(--carbon);padding:clamp(24px,2.8vw,36px)}
.derisk__item h3{font-size:1.12rem;font-weight:700;letter-spacing:-.026em;color:var(--white);margin-bottom:11px;line-height:1.18;display:flex;gap:11px;align-items:baseline}
.derisk__item h3::before{content:"✓";color:var(--copper);font-weight:400;flex:none}
.derisk__item p{font-size:.93rem;line-height:1.6;color:var(--smoke)}

.wide-figure--dark figcaption{color:var(--smoke)}

/* Four items need four tracks; the three-column default stranded the last one. */
.derisk--four{grid-template-columns:repeat(4,1fr)}

@media (max-width:1080px){
  .sectors,.principles-grid,.derisk,.derisk--four{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:700px){
  .sectors,.principles-grid,.derisk{grid-template-columns:1fr}
}

/* ==========================================================================
   Tenancy diagram (SaaS)
   ========================================================================== */
.svc-hero__grid--wide{grid-template-columns:minmax(0,1fr) minmax(0,1.02fr)}
.tenancy{width:100%;height:auto}
.tenancy__frame{fill:rgba(242,238,233,.03);stroke:rgba(242,238,233,.18);stroke-width:1}
.tenancy__col--accent .tenancy__frame{stroke:var(--copper);fill:rgba(228,112,58,.06)}
.tenancy__name{font-family:var(--font-display);font-weight:600;font-size:11px;fill:var(--bone);letter-spacing:.16em}
.tenancy__col--accent .tenancy__name{fill:var(--copper)}
.tenancy__tenant{fill:var(--carbon-2);stroke:rgba(242,238,233,.4);stroke-width:1.1}
.tenancy__app{fill:rgba(242,238,233,.1);stroke:rgba(242,238,233,.45);stroke-width:1.2}
.tenancy__db{fill:rgba(228,112,58,.18);stroke:var(--copper);stroke-width:1.2}
.tenancy__wire{stroke:rgba(242,238,233,.24);stroke-width:1}
.tenancy__tlabel,.tenancy__layer,.tenancy__desc,.tenancy__axis{font-family:var(--font-mono)}
.tenancy__tlabel{font-size:9px;fill:var(--smoke)}
.tenancy__layer{font-size:9px;fill:var(--bone);letter-spacing:.14em}
.tenancy__desc{font-size:9.5px;fill:var(--smoke);letter-spacing:.04em}
.tenancy__axis{font-size:9px;fill:var(--smoke);letter-spacing:.14em}
.tenancy__scale{stroke:rgba(242,238,233,.2);stroke-width:1;stroke-dasharray:3 4}

/* ==========================================================================
   Tenancy cards
   ========================================================================== */
.tenancy-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule-bone);border:1px solid var(--rule-bone)}
.tenancy-card{background:var(--white);padding:clamp(26px,2.8vw,38px);position:relative;display:flex;flex-direction:column}
.tenancy-card--pick{background:var(--bone);border-top:3px solid var(--copper)}
.tenancy-card__flag{
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--copper-deep);display:block;margin-bottom:14px;
}
.tenancy-card h3{font-size:1.35rem;font-weight:800;letter-spacing:-.032em;margin-bottom:12px}
.tenancy-card__shape{
  font-family:var(--font-mono);font-size:.72rem;line-height:1.5;color:var(--carbon);
  padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--rule-bone);
}
.tenancy-card p{font-size:.94rem;line-height:1.6;color:var(--ash)}
.tenancy-card__caveat{
  margin-top:auto;padding-top:18px;font-size:.88rem;line-height:1.55;
  color:var(--copper-deep);
}

/* Four-across step list */
.steps--four{grid-template-columns:repeat(4,1fr)}
.steps--four .steps__n{color:var(--copper-deep)}

@media (max-width:1080px){
  .tenancy-cards{grid-template-columns:1fr}
  .steps--four{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:700px){
  .steps--four{grid-template-columns:1fr}
}


/* ==========================================================================
   Measure control at the 1800 shell
   Grid tracks are much wider now, so card copy needs an explicit measure or
   lines run past comfortable reading length.
   ========================================================================== */
.cap p,.sector p,.derisk__item p,.seam p,.principle-card p,
.steps__item p,.tenancy-card p,.cell p,.ind p,.own__item p,
.flow__step p,.compliance__item p,.post-card__excerpt,.quote__text{max-width:46ch}
.accel__list span,.cap__list li,.phase-card__body{max-width:52ch}
.section__headings .lede{max-width:62ch}
.svc-hero__lede,.page-hero__lede,.hero__lede{max-width:54ch}


/* ==========================================================================
   Measure: a few blocks were still running past a comfortable line length
   once the shell went to 1800.
   ========================================================================== */
.lede{max-width:62ch}
.accel__note{max-width:74ch}
.faq__answer p{max-width:72ch}
/* Cap the text, never the grid item: capping the item leaves the container's
   own background exposed as a block down the right-hand side. */
.own__item p,.accel__list span{max-width:56ch}
.form__fine{max-width:46ch;margin-inline:auto}
.product__summary{max-width:52ch}
.case__excerpt{max-width:58ch}

/* ==========================================================================
   Breakpoints
   1600 and 1440 are the two screens this site is most often opened on, so they
   are tuned explicitly rather than left to the clamp curve.
   ========================================================================== */
@media (max-width:1600px){
  :root{
    --gutter:clamp(20px,3vw,44px);
    --section-y:clamp(64px,7.5vw,112px);
  }
  .h-xl{font-size:clamp(2.6rem,5.4vw,5.4rem)}
  .h-lg{font-size:clamp(1.95rem,3.5vw,3.2rem)}
  .page-hero__title{font-size:clamp(2.3rem,4.4vw,4.1rem)}
  .svc-hero__title{font-size:clamp(2.1rem,3.6vw,3.5rem)}
  .hero h1{font-size:clamp(2.3rem,3.9vw,4rem)}
}

@media (max-width:1440px){
  :root{
    --gutter:clamp(20px,2.8vw,38px);
    --section-y:clamp(58px,7vw,100px);
  }
  .h-xl{font-size:clamp(2.5rem,5.2vw,4.9rem)}
  .h-lg{font-size:clamp(1.9rem,3.4vw,2.95rem)}
  .page-hero__title{font-size:clamp(2.2rem,4.2vw,3.7rem)}
  .svc-hero__title{font-size:clamp(2rem,3.5vw,3.2rem)}
  .hero h1{font-size:clamp(2.2rem,3.8vw,3.6rem)}
  .section__head{margin-bottom:clamp(34px,4vw,60px)}
}

/* ==========================================================================
   Delivery time comparison
   Fills the space beside the acceleration list and shows the 5x claim rather
   than only stating it.
   ========================================================================== */
.accel__left{display:flex;flex-direction:column;gap:clamp(28px,3.4vw,46px)}
.delivery{margin:0;border-top:1px solid var(--rule-bone);padding-top:clamp(22px,2.4vw,30px)}
.accel--dark .delivery{border-top-color:var(--rule-carbon)}
.delivery__label{
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--copper-deep);margin-bottom:22px;
}
.accel--dark .delivery__label{color:var(--copper)}
.delivery__row + .delivery__row{margin-top:20px}
.delivery__meta{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:9px}
.delivery__who{font-size:.92rem;color:var(--ash)}
.delivery__value{
  font-family:var(--font-display);font-weight:700;font-size:1.05rem;letter-spacing:-.02em;
  color:var(--ash);font-variant-numeric:tabular-nums;white-space:nowrap;
}
.accel--dark .delivery__who,.accel--dark .delivery__value{color:var(--smoke)}
.delivery__row--ours .delivery__who{color:var(--carbon);font-weight:500}
.delivery__row--ours .delivery__value{color:var(--copper-deep);font-size:1.35rem}
.accel--dark .delivery__row--ours .delivery__who{color:var(--white)}
.accel--dark .delivery__row--ours .delivery__value{color:var(--copper)}
.delivery__track{height:12px;background:var(--bone-2);overflow:hidden}
.accel--dark .delivery__track{background:var(--carbon-3)}
.delivery__fill{display:block;height:100%;width:var(--w);background:repeating-linear-gradient(135deg,#C9C2B7 0 6px,#D6D0C6 6px 12px)}
.accel--dark .delivery__fill{background:repeating-linear-gradient(135deg,#2A2A2E 0 6px,#35353A 6px 12px)}
.delivery__row--ours .delivery__fill{background:var(--copper)}
/* Grow on reveal; without JS the widths are already correct. */
.js .delivery__fill{width:0;transition:width 1.1s cubic-bezier(.22,.61,.36,1) .2s}
.js .accel__grid.is-in .delivery__fill{width:var(--w)}
html:not(.js) .delivery__fill{width:var(--w)}
@media (prefers-reduced-motion:reduce){.js .delivery__fill{width:var(--w);transition:none}}

/* ==========================================================================
   Scope chart (MVP)
   ========================================================================== */
.scope{width:100%;height:auto}
.scope__grid line{stroke:rgba(242,238,233,.08);stroke-width:1}
.scope__axis-line{stroke:rgba(242,238,233,.28);stroke-width:1.2}
.scope__axis,.scope__plabel,.scope__cut-label,.scope__key{font-family:var(--font-mono)}
.scope__axis{font-size:9.5px;fill:var(--smoke);letter-spacing:.15em}
.scope__cut{stroke:var(--copper);stroke-width:1.4;stroke-dasharray:5 4}
.scope__cut-label{font-size:9px;fill:var(--copper);letter-spacing:.14em}
.scope__dot{fill:var(--carbon-2);stroke:rgba(242,238,233,.45);stroke-width:1.4}
.scope__dot--in{fill:var(--copper);stroke:var(--copper)}
.scope__plabel{font-size:9.5px;fill:var(--smoke)}
.scope__plabel--in{fill:var(--bone)}
.scope__key{font-size:9px;fill:var(--smoke);letter-spacing:.13em}
.scope__key--in{fill:var(--copper)}

/* ==========================================================================
   Scope decision rows (MVP)
   ========================================================================== */
.cutrows{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule-bone);border:1px solid var(--rule-bone)}
.cutrow{background:var(--white);padding:clamp(26px,2.8vw,38px)}
.cutrow--in{background:var(--bone);border-top:3px solid var(--copper)}
.cutrow h3{font-size:1.3rem;font-weight:800;letter-spacing:-.032em;margin-bottom:14px}
.cutrow--in h3{color:var(--copper-deep)}
.cutrow p{font-size:.96rem;line-height:1.62;color:var(--ash);max-width:46ch}

@media (max-width:900px){ .cutrows{grid-template-columns:1fr} }

/* ==========================================================================
   Release adoption chart (Mobile)
   ========================================================================== */
.adopt{width:100%;height:auto}
.adopt__grid line{stroke:rgba(242,238,233,.1);stroke-width:1}
.adopt__tick,.adopt__axis,.adopt__gate-label,.adopt__note,.adopt__caption{font-family:var(--font-mono)}
.adopt__tick{font-size:10px;fill:var(--smoke)}
.adopt__axis{font-size:9.5px;fill:var(--smoke);letter-spacing:.15em}
.adopt__area{fill:rgba(228,112,58,.16)}
.adopt__line{stroke:var(--copper);stroke-width:2.4;fill:none;stroke-linecap:round}
.adopt__gate{stroke:rgba(242,238,233,.45);stroke-width:1;stroke-dasharray:3 4}
.adopt__gate-label{font-size:9px;fill:var(--smoke);letter-spacing:.13em}
.adopt__dot{fill:var(--copper)}
.adopt__note{font-size:9px;fill:var(--copper);letter-spacing:.12em}
.adopt__caption{font-size:9px;fill:var(--smoke);letter-spacing:.1em}

/* ==========================================================================
   Load waterfall (Web Application)
   ========================================================================== */
.wf{width:100%;height:auto}
.wf__grid line{stroke:rgba(242,238,233,.1);stroke-width:1}
.wf__tick,.wf__axis,.wf__label,.wf__seg-label,.wf__total,.wf__threshold-label{font-family:var(--font-mono)}
.wf__tick{font-size:10px;fill:var(--smoke)}
.wf__axis{font-size:9px;fill:var(--smoke);letter-spacing:.14em}
.wf__label{font-size:9.5px;fill:var(--bone);letter-spacing:.12em}
.wf__threshold{stroke:var(--smoke);stroke-width:1;stroke-dasharray:3 4}
.wf__threshold-label{font-size:9px;fill:var(--smoke);letter-spacing:.12em}
.wf__row--slow .wf__seg{fill:rgba(242,238,233,.14);stroke:rgba(242,238,233,.3);stroke-width:1}
.wf__row--slow .wf__seg--1{fill:rgba(242,238,233,.1)}
.wf__row--slow .wf__seg--2{fill:rgba(242,238,233,.06)}
.wf__row--good .wf__seg{fill:var(--copper);stroke:none}
.wf__row--good .wf__seg--1{fill:rgba(228,112,58,.66)}
.wf__row--good .wf__seg--2{fill:rgba(228,112,58,.38)}
.wf__seg-label{font-size:9px;fill:var(--bone);letter-spacing:.06em}
.wf__row--good .wf__seg-label{fill:var(--carbon)}
.wf__total{font-size:11px;fill:var(--smoke)}
.wf__row--good .wf__total{fill:var(--copper)}

/* Dark variant of the proof band */
.proof-band--dark .lede{color:var(--smoke)}

/* ==========================================================================
   Frontend Development Services
   ========================================================================== */

/* The drift diagram. Left panel is deliberately noisy, right panel is not. */
.drift{width:100%;height:auto;display:block}
.drift__title{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;fill:var(--smoke)}
.drift__title--good{fill:var(--bone)}
.drift__count{font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;fill:var(--ash)}
.drift__count--good{fill:var(--copper)}
.drift__ghost{fill:var(--smoke);fill-opacity:.2;stroke:var(--smoke);stroke-opacity:.34;stroke-width:1;opacity:var(--o,.6)}
.drift__divider{stroke:var(--rule-carbon);stroke-width:1}
.drift__btn--primary{fill:var(--copper)}
.drift__btn--secondary{fill:none;stroke:var(--bone);stroke-width:1}
.drift__btn--quiet{fill:var(--bone);fill-opacity:.1}
.drift__btn-label{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;fill:var(--bone)}
.drift__btn--primary-label{fill:var(--carbon)}
.drift__spec{font-family:var(--font-mono);font-size:10px;letter-spacing:.07em;fill:var(--ash)}
.drift__foot{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;fill:var(--copper)}

/* Decay: a sticky argument on the left, the four symptoms stacked on the right. */
.fe-decay{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,88px);align-items:stretch}
.fe-decay__aside .section__head{margin-bottom:0}
.fe-decay__media{margin:clamp(26px,3vw,42px) 0 0}
.fe-decay__media .duo{aspect-ratio:1.28}
.fe-decay__media figcaption{margin-top:16px;font-size:.95rem;line-height:1.6;color:var(--ash);max-width:44ch}
.fe-decay__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;justify-content:space-between}
.fe-row{display:grid;grid-template-columns:minmax(0,.4fr) minmax(0,.6fr);gap:clamp(16px,2.4vw,44px);
  align-items:start;padding-block:clamp(22px,2.4vw,34px);border-top:1px solid var(--rule-bone)}
.fe-row:first-child{border-top:0;padding-top:0}
.fe-row:last-child{padding-bottom:0}
.fe-row h3{margin:0;font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(20px,1.5vw,27px);line-height:1.14;max-width:14ch}
.fe-row p{margin:0;color:var(--ash);max-width:58ch}

/* The system, drawn as layers. The copper bar shows how much rests underneath. */
.fe-stack{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(30px,4vw,72px);align-items:start}
.fe-stack__main .section__head{margin-bottom:clamp(30px,3.4vw,52px)}
.fe-stack__layers{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.fe-layer{display:grid;grid-template-columns:3px minmax(0,1fr);gap:clamp(18px,2vw,28px);
  padding:clamp(20px,2.1vw,30px);background:var(--carbon-2);border:1px solid var(--rule-carbon);
  margin-left:calc((var(--d,1) - 1) * clamp(0px,1.4vw,24px))}
.fe-layer__depth{grid-row:1 / -1;align-self:stretch;background:
  linear-gradient(var(--copper),var(--copper)) top/100% calc(var(--d,1) * 25%) no-repeat,
  rgba(242,238,233,.16)}
.fe-layer__body{grid-column:2}
.fe-layer h3{margin:0 0 10px;font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(19px,1.35vw,25px);color:var(--white)}
.fe-layer p{margin:0;color:var(--smoke);max-width:56ch}
.fe-layer__dep{grid-column:2;margin-top:14px;font-family:var(--font-mono);font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ash)}
.fe-stack__media{margin:0;position:sticky;top:calc(var(--header-h) + 28px)}
.fe-stack__media .duo{aspect-ratio:.86}
.fe-stack__media figcaption{margin-top:16px;font-size:.95rem;line-height:1.6;color:var(--smoke);max-width:46ch}

/* Accessibility checks, each wearing the focus ring the section is arguing for. */
.fe-checks{list-style:none;margin:0;padding:8px;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(26px,2.2vw,34px)}
.fe-check{padding:clamp(22px,2vw,30px);background:var(--bone);
  outline:2px solid var(--copper);outline-offset:5px}
.fe-check h3{margin:0 0 10px;font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(18px,1.25vw,22px);line-height:1.16}
.fe-check p{margin:0;color:var(--ash);font-size:.98rem;line-height:1.62}

@media (max-width:1440px){
  .fe-decay{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr)}
  .fe-checks{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1080px){
  .fe-decay,.fe-stack{grid-template-columns:1fr}
  .fe-decay__list{display:block}
  .fe-stack__media{position:static;max-width:640px}
  .fe-layer{margin-left:0}
}
@media (max-width:700px){
  .fe-row{grid-template-columns:1fr;gap:12px}
  .fe-row h3{max-width:none}
  .fe-checks{grid-template-columns:1fr}
}

/* ==========================================================================
   Backend Development Services
   ========================================================================== */

/* Response time by percentile. Linear y, so the tail reads as the cliff it is. */
.tail{width:100%;height:auto;display:block}
.tail__grid{stroke:var(--rule-carbon);stroke-width:1}
.tail__axis{stroke:var(--smoke);stroke-opacity:.5;stroke-width:1}
.tail__tick{stroke:var(--smoke);stroke-opacity:.5;stroke-width:1}
.tail__zone{fill:var(--copper);fill-opacity:.07}
.tail__zone-label{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;fill:var(--copper);fill-opacity:.8}
.tail__area{fill:var(--copper);fill-opacity:.1}
.tail__avg{stroke:var(--smoke);stroke-width:1;stroke-dasharray:4 4;stroke-opacity:.6}
.tail__line{stroke:var(--copper);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.tail__dot{fill:var(--carbon);stroke:var(--copper);stroke-width:2}
.tail__mark{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;fill:var(--bone)}
.tail__flat{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;fill:var(--bone)}
.tail__flat--avg{fill:var(--smoke)}
.tail__ytick,.tail__xtick{font-family:var(--font-mono);font-size:10px;fill:var(--ash)}
.tail__xlabel{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;fill:var(--ash)}
.tail__foot{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;fill:var(--copper)}

/* Failure register: class, name, what happens. Reads as an incident log. */
.ledger{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule-bone)}
.ledger__row{display:grid;grid-template-columns:minmax(0,.16fr) minmax(0,.26fr) minmax(0,.58fr);
  gap:clamp(16px,2.6vw,48px);align-items:baseline;
  padding-block:clamp(22px,2.3vw,32px);border-bottom:1px solid var(--rule-bone)}
.ledger__class{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--copper)}
.ledger__title{margin:0;font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(19px,1.4vw,25px);line-height:1.15}
.ledger__body{margin:0;color:var(--ash);max-width:70ch}

/* The latency budget: one bar, five proportional segments, five notes below. */
.budget__bar{display:flex;gap:3px;height:56px;margin-bottom:14px}
.budget__seg{flex:var(--share) 1 0;background:var(--copper);min-width:8px;
  display:grid;place-items:center;overflow:hidden}
.budget__seg b{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;
  color:var(--carbon);font-weight:500}
.budget__scale{display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ash);padding-bottom:clamp(36px,4vw,60px);border-bottom:1px solid var(--rule-carbon)}
.budget__total{color:var(--bone)}
.budget__hops{list-style:none;margin:clamp(30px,3.4vw,48px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(18px,2vw,34px)}
.hop{border-top:2px solid var(--copper);padding-top:18px}
.hop__ms{display:block;font-family:var(--font-mono);font-size:clamp(22px,1.8vw,30px);
  color:var(--copper);letter-spacing:-.02em;margin-bottom:10px}
.hop__name{margin:0 0 10px;font-family:var(--font-display);font-weight:700;letter-spacing:-.015em;
  font-size:clamp(17px,1.15vw,21px);color:var(--white)}
.hop__note{margin:0;color:var(--smoke);font-size:.95rem;line-height:1.62}
.budget__note{margin:clamp(30px,3.2vw,44px) 0 0;padding-left:18px;border-left:2px solid var(--copper);
  color:var(--smoke);max-width:82ch}

/* Commitments, with the infrastructure they are made about. */
.pledge{display:grid;grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr);
  gap:clamp(32px,4.5vw,84px);align-items:start}
.pledge__list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.pledge__list li{padding-block:clamp(20px,2.1vw,28px);border-top:1px solid var(--rule-carbon)}
.pledge__list li:first-child{border-top:0;padding-top:0}
.pledge__list h3{margin:0 0 10px;font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(18px,1.3vw,23px);color:var(--white)}
.pledge__list p{margin:0;color:var(--smoke);max-width:62ch}
.pledge__media{margin:0}
.pledge__media .duo{aspect-ratio:.72}
.pledge__media figcaption{margin-top:16px;font-size:.95rem;line-height:1.6;color:var(--smoke);max-width:46ch}

@media (max-width:1440px){
  .ledger__row{grid-template-columns:minmax(0,.2fr) minmax(0,.3fr) minmax(0,.5fr)}
}
@media (max-width:1080px){
  .pledge{grid-template-columns:1fr}
  .pledge__media{max-width:560px}
  /* Two up, with the last hop taking the full row so no cell is left empty. */
  .budget__hops{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hop:nth-child(5){grid-column:1 / -1}
}
@media (max-width:900px){
  .ledger__row{grid-template-columns:1fr;gap:10px}
  .ledger__body{max-width:none}
  .budget__bar{height:44px}
  .budget__scale{font-size:10px}
  .budget__seg b{display:none}
}
@media (max-width:600px){
  .budget__hops{grid-template-columns:1fr}
}

/* ==========================================================================
   UX/UI Design Services
   ========================================================================== */

/* Onboarding drop-off. The copper wedge is where the people went. */
.funnel{width:100%;height:auto;display:block}
.funnel__title{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;fill:var(--smoke)}
.funnel__sub{font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;fill:var(--ash)}
.funnel__body{fill:var(--bone);fill-opacity:.1}
.funnel__loss{fill:var(--copper);fill-opacity:.22}
.funnel__rule{stroke:var(--smoke);stroke-opacity:.45;stroke-width:1}
.funnel__rule--drop{stroke:var(--copper);stroke-opacity:1;stroke-width:2}
.funnel__pct{font-family:var(--font-mono);font-size:13px;fill:var(--bone)}
.funnel__pct--drop{fill:var(--copper)}
.funnel__step{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;fill:var(--ash)}
.funnel__lead{stroke:var(--copper);stroke-width:1}
.funnel__loss-label{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;fill:var(--copper)}
.funnel__foot{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;fill:var(--smoke)}

/* Four costs, each led by the number it shows up as. */
.cost-grid{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,2.2vw,38px)}
.cost{padding-top:22px;border-top:2px solid var(--carbon)}
.cost__metric{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--copper);margin-bottom:16px}
.cost h3{margin:0 0 12px;font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(19px,1.35vw,24px);line-height:1.15}
.cost p{margin:0;color:var(--ash);font-size:.98rem;line-height:1.62}

/* The discovery week: heading and the wall on one row, then the five days. */
.week__intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:clamp(30px,4vw,76px);align-items:start;margin-bottom:clamp(40px,4.5vw,72px)}
.week__intro .section__head{margin-bottom:0}
.week__media{margin:0}
.week__media .duo{aspect-ratio:1.45}
.week__media figcaption{margin-top:14px;font-size:.95rem;line-height:1.6;color:var(--smoke);max-width:50ch}
.week{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(18px,2vw,32px)}
.day{border-top:1px solid var(--rule-carbon);padding-top:20px;position:relative}
.day::before{content:"";position:absolute;top:-1px;left:0;width:34px;height:2px;background:var(--copper)}
.day__label{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--copper);margin-bottom:14px}
.day__title{margin:0 0 10px;font-family:var(--font-display);font-weight:700;letter-spacing:-.015em;
  font-size:clamp(17px,1.15vw,21px);color:var(--white)}
.day__note{margin:0;color:var(--smoke);font-size:.95rem;line-height:1.62}
.week__note{margin:clamp(32px,3.4vw,48px) 0 0;padding-left:18px;border-left:2px solid var(--copper);
  color:var(--smoke);max-width:86ch}

/* Evidence, with the session it comes from. */
.evidence{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(32px,4.5vw,84px);align-items:start}
.evidence__media{margin:0;position:sticky;top:calc(var(--header-h) + 28px)}
.evidence__media .duo{aspect-ratio:.72}
.evidence__media figcaption{margin-top:16px;font-size:.95rem;line-height:1.6;color:var(--smoke);max-width:44ch}
.evidence__list{list-style:none;margin:0;padding:0}
.evidence__list li{padding-block:clamp(20px,2.1vw,28px);border-top:1px solid var(--rule-carbon)}
.evidence__list li:first-child{border-top:0;padding-top:0}
.evidence__list h3{margin:0 0 10px;font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(18px,1.3vw,23px);color:var(--white)}
.evidence__list p{margin:0;color:var(--smoke);max-width:64ch}

@media (max-width:1440px){
  .cost-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,44px)}
}
@media (max-width:1080px){
  .week__intro,.evidence{grid-template-columns:1fr}
  .evidence__media{position:static;max-width:560px}
  /* Two up, with the last day taking the full row so no cell is left empty. */
  .week{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.4vw,34px)}
  .day:nth-child(5){grid-column:1 / -1}
}
@media (max-width:700px){
  .cost-grid,.week{grid-template-columns:1fr}
  .day:nth-child(5){grid-column:auto}
}

/* ==========================================================================
   DevOps Services
   ========================================================================== */

/* Deployment cadence, before and after. Weekdays down, weeks across. */
.deploy{width:100%;height:auto;display:block}
.deploy__title{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;fill:var(--ash)}
.deploy__label{font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;fill:var(--bone)}
.deploy__sub{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;fill:var(--ash)}
.deploy__sub--bad{fill:var(--smoke)}
.deploy__sub--good{fill:var(--copper)}
.deploy__cell{fill:var(--bone);fill-opacity:.06;stroke:var(--rule-carbon);stroke-width:1}
.deploy__cell--l1{fill:var(--copper);fill-opacity:.35;stroke:none}
.deploy__cell--l2{fill:var(--copper);fill-opacity:.65;stroke:none}
.deploy__cell--l3{fill:var(--copper);fill-opacity:1;stroke:none}
.deploy__foot{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;fill:var(--copper)}

/* Release night, as a timestamped log. */
.night{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:clamp(32px,4.5vw,84px);align-items:stretch}
.night__aside .section__head{margin-bottom:0}
.night__media{margin:clamp(26px,3vw,42px) 0 0}
.night__media .duo{aspect-ratio:1.3}
.night__media figcaption{margin-top:16px;font-size:.95rem;line-height:1.6;color:var(--ash);max-width:44ch}
.night__log{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;justify-content:space-between}
.entry{display:grid;grid-template-columns:96px minmax(0,1fr);gap:clamp(18px,2.4vw,40px);
  padding-block:clamp(20px,2.2vw,30px);border-top:1px solid var(--rule-bone);position:relative}
.entry:first-child{border-top:0;padding-top:0}
.entry:last-child{padding-bottom:0}
.entry__time{font-family:var(--font-mono);font-size:15px;letter-spacing:.04em;color:var(--copper)}
.entry__body h3{margin:0 0 10px;font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(19px,1.35vw,24px);line-height:1.15}
.entry__body p{margin:0;color:var(--ash);max-width:66ch}
.night__note{margin:clamp(34px,3.6vw,52px) 0 0;padding-left:18px;border-left:2px solid var(--copper);
  color:var(--ash);max-width:88ch}

/* The four measures, each with the movement we aim for. */
.measures{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,2.2vw,38px)}
.measure{padding:clamp(24px,2.2vw,32px);background:var(--carbon-2);border:1px solid var(--rule-carbon)}
.measure__name{margin:0 0 16px;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--smoke);font-weight:400}
.measure__target{margin:0 0 16px;font-family:var(--font-display);font-weight:700;letter-spacing:-.025em;
  font-size:clamp(20px,1.5vw,27px);line-height:1.14;color:var(--copper)}
.measure__note{margin:0;color:var(--smoke);font-size:.95rem;line-height:1.62}

/* Handover: the argument on the left, what you keep on the right. */
.handover{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(32px,4.5vw,84px);align-items:start}
.handover__text .section__head{margin-bottom:0}
.handover__list{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,2.4vw,40px)}
.handover__list li{border-top:2px solid var(--copper);padding-top:20px}
.handover__list h3{margin:0 0 10px;font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(18px,1.25vw,22px);color:var(--white)}
.handover__list p{margin:0;color:var(--smoke);font-size:.95rem;line-height:1.62}

@media (max-width:1440px){
  .measures{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,2.6vw,34px)}
}
@media (max-width:1080px){
  .night,.handover{grid-template-columns:1fr}
  .night__log{display:block}
  .night__media{max-width:560px}
}
@media (max-width:700px){
  .measures,.handover__list{grid-template-columns:1fr}
  .entry{grid-template-columns:1fr;gap:8px}
}

/* ==========================================================================
   Cybersecurity Services
   ========================================================================== */

/* The exposure window: disclosure to patch, with the risky part shaded. */
.expo{width:100%;height:auto;display:block}
.expo__title{font-family:var(--font-mono);font-size:12px;letter-spacing:.13em;fill:var(--bone)}
.expo__sub{font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;fill:var(--ash)}
.expo__window{fill:var(--copper);fill-opacity:.16}
.expo__window-label{font-family:var(--font-mono);font-size:13px;letter-spacing:.1em;fill:var(--copper)}
.expo__axis{stroke:var(--smoke);stroke-opacity:.55;stroke-width:1}
.expo__tick{stroke:var(--smoke);stroke-opacity:.3;stroke-width:1}
.expo__stem{stroke:var(--smoke);stroke-opacity:.5;stroke-width:1}
.expo__stem--ours{stroke:var(--copper);stroke-opacity:1;stroke-width:2}
.expo__dot{fill:var(--carbon);stroke:var(--smoke);stroke-width:2}
.expo__dot--ours{stroke:var(--copper)}
.expo__event{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;fill:var(--bone)}
.expo__event--ours{fill:var(--copper)}
.expo__foot{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;fill:var(--smoke)}

/* Findings, with how often we see each one. The bar is the evidence. */
.finds{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule-bone)}
.find{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.72fr);
  gap:clamp(20px,3vw,64px);align-items:center;
  padding-block:clamp(22px,2.3vw,32px);border-bottom:1px solid var(--rule-bone)}
.find__text h3{margin:0 0 10px;font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(19px,1.35vw,24px);line-height:1.16}
.find__text p{margin:0;color:var(--ash);font-size:.98rem;line-height:1.62;max-width:62ch}
.finds__key{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.72fr);
  gap:clamp(20px,3vw,64px);margin-bottom:14px}
.finds__key span:last-child{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ash)}
.find__rate{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center}
.find__track{height:12px;background:var(--bone-2);position:relative;overflow:hidden}
.find__fill{position:absolute;inset:0 auto 0 0;width:var(--pct);background:var(--copper)}
.find__pct{font-family:var(--font-mono);font-size:clamp(17px,1.3vw,22px);color:var(--copper)}
.finds__note{margin:clamp(30px,3.2vw,44px) 0 0;padding-left:18px;border-left:2px solid var(--copper);
  color:var(--ash);max-width:88ch}

/* Pipeline gates: what each one refuses to let through. */
.gates__intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.88fr);
  gap:clamp(30px,4vw,76px);align-items:start;margin-bottom:clamp(40px,4.5vw,72px)}
.gates__intro .section__head{margin-bottom:0}
.gates__media{margin:0}
.gates__media .duo{aspect-ratio:1.5}
.gates__media figcaption{margin-top:14px;font-size:.95rem;line-height:1.6;color:var(--smoke);max-width:52ch}
.gates{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.2vw,38px)}
.gate{padding:clamp(22px,2.1vw,30px);background:var(--carbon-2);
  border:1px solid var(--rule-carbon);border-left:2px solid var(--copper)}
.gate__name{margin:0 0 14px;font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(18px,1.3vw,23px);color:var(--white)}
.gate__blocks{margin:0 0 14px;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;
  color:var(--copper);display:flex;gap:10px;align-items:baseline}
.gate__blocks span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ash);flex:none}
.gate__note{margin:0;color:var(--smoke);font-size:.95rem;line-height:1.62}

/* Incident response commitments. */
.response{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(32px,4.5vw,84px);align-items:start}
.response__media{margin:0;position:sticky;top:calc(var(--header-h) + 28px)}
.response__media .duo{aspect-ratio:.78}
.response__media figcaption{margin-top:16px;font-size:.95rem;line-height:1.6;color:var(--smoke);max-width:44ch}
.response__list{list-style:none;margin:0;padding:0}
.response__list li{padding-block:clamp(20px,2.1vw,28px);border-top:1px solid var(--rule-carbon)}
.response__list li:first-child{border-top:0;padding-top:0}
.response__list h3{margin:0 0 10px;font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(18px,1.3vw,23px);color:var(--white)}
.response__list p{margin:0;color:var(--smoke);max-width:64ch}

@media (max-width:1440px){
  .find,.finds__key{grid-template-columns:minmax(0,1fr) minmax(0,.5fr)}
}
@media (max-width:1080px){
  .gates__intro,.response{grid-template-columns:1fr}
  .response__media{position:static;max-width:560px}
  /* Two up, with the last gate taking the full row so no cell is left empty. */
  .gates{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  .find{grid-template-columns:1fr;gap:16px}
  .finds__key{display:none}
  .gates{grid-template-columns:1fr}
}

/* ==========================================================================
   Software Consulting
   ========================================================================== */

/* Two routes out of the same legacy system. */
.fork{width:100%;height:auto;display:block}
.fork__title{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;fill:var(--bone)}
.fork__path{stroke:var(--smoke);stroke-opacity:.4;stroke-width:1.5;stroke-dasharray:5 5}
.fork__path--ours{stroke:var(--copper);stroke-opacity:1;stroke-width:2.5;stroke-dasharray:none}
.fork__start{fill:var(--carbon);stroke:var(--bone);stroke-width:2}
.fork__start-label{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;fill:var(--bone)}
.fork__lane{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;fill:var(--smoke)}
.fork__lane--ours{fill:var(--copper)}
.fork__dot{fill:var(--carbon);stroke:var(--smoke);stroke-width:2}
.fork__dot--ours{stroke:var(--copper)}
.fork__step{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.05em;fill:var(--smoke)}
.fork__step--ours{fill:var(--bone)}
.fork__foot{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;fill:var(--copper)}

/* The questions, as questions. */
.asks__intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.88fr);
  gap:clamp(30px,4vw,76px);align-items:start;margin-bottom:clamp(40px,4.5vw,72px)}
.asks__intro .section__head{margin-bottom:0}
.asks__media{margin:0}
.asks__media .duo{aspect-ratio:1.5}
.asks__media figcaption{margin-top:14px;font-size:.95rem;line-height:1.6;color:var(--ash);max-width:52ch}
.asks{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule-bone)}
.ask{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);
  gap:clamp(18px,2.6vw,52px);align-items:start;
  padding-block:clamp(24px,2.4vw,34px);border-bottom:1px solid var(--rule-bone)}
.ask__q h3{margin:0 0 12px;font-family:var(--font-display);font-weight:700;letter-spacing:-.025em;
  font-size:clamp(21px,1.6vw,29px);line-height:1.12}
.ask__trigger{margin:0;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;
  color:var(--copper);line-height:1.6;max-width:40ch}
.ask__answer{margin:0;color:var(--ash);max-width:68ch}

/* Three engagement shapes. */
.shapes{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,2.4vw,42px)}
.shape{display:flex;flex-direction:column;padding:clamp(26px,2.4vw,36px);
  background:var(--carbon-2);border:1px solid var(--rule-carbon)}
.shape__name{margin:0 0 8px;font-family:var(--font-display);font-weight:700;letter-spacing:-.025em;
  font-size:clamp(24px,1.9vw,34px);color:var(--white)}
.shape__len{margin:0 0 22px;font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--copper)}
.shape__note{margin:0 0 22px;color:var(--smoke);line-height:1.66;flex:1}
.shape__fit{margin:0;padding-top:20px;border-top:1px solid var(--rule-carbon);
  font-size:.95rem;line-height:1.6;color:var(--ash)}

/* What we will say that costs us work. */
.honest{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:clamp(32px,4.5vw,84px);align-items:start}
.honest__text .section__head{margin-bottom:clamp(30px,3.4vw,48px)}
.honest__list{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,2.4vw,40px)}
.honest__list li{border-top:2px solid var(--copper);padding-top:20px}
.honest__list h3{margin:0 0 10px;font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(18px,1.3vw,23px);color:var(--white)}
.honest__list p{margin:0;color:var(--smoke);font-size:.95rem;line-height:1.62}
.honest__media{margin:0;position:sticky;top:calc(var(--header-h) + 28px)}
.honest__media .duo{aspect-ratio:.8}
.honest__media figcaption{margin-top:16px;font-size:.95rem;line-height:1.6;color:var(--smoke);max-width:44ch}

@media (max-width:1440px){
  .ask{grid-template-columns:minmax(0,.46fr) minmax(0,.54fr)}
}
@media (max-width:1080px){
  .asks__intro,.honest{grid-template-columns:1fr}
  .honest__media{position:static;max-width:560px}
  .shapes{grid-template-columns:1fr}
}
@media (max-width:700px){
  .ask{grid-template-columns:1fr;gap:14px}
  .honest__list{grid-template-columns:1fr}
}

/* ==========================================================================
   Contact
   ========================================================================== */

/* The form sits in the banner, so the page opens on the thing it is for. */
.contact-hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(36px,4.5vw,88px);align-items:start;
  padding-block:clamp(52px,6vw,104px)}
.contact-hero .svc-hero__title{max-width:18ch}
.contact-hero__form{position:sticky;top:calc(var(--header-h) + 24px)}

/* Direct channels, under the lede. */
.direct{list-style:none;margin:clamp(30px,3.4vw,46px) 0 0;padding:0;
  display:grid;gap:0;border-top:1px solid var(--rule-carbon)}
.direct li{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);
  gap:20px;align-items:baseline;padding-block:18px;border-bottom:1px solid var(--rule-carbon)}
.direct span{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ash)}
.direct a{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(17px,1.25vw,22px);color:var(--bone);text-decoration:none}
.direct a:hover{color:var(--copper)}

/* What happens after you press send. */
.afterlist{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,2.2vw,38px)}
.after{border-top:2px solid var(--carbon);padding-top:20px}
.after__when{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--copper);margin-bottom:14px}
.after__what{margin:0 0 10px;font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(19px,1.35vw,24px);line-height:1.14}
.after__note{margin:0;color:var(--ash);font-size:.97rem;line-height:1.62}

/* Offices and the practical detail beside them. */
.reach{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(32px,4.5vw,84px);align-items:start}
.reach__offices .section__head{margin-bottom:clamp(30px,3.4vw,48px)}
.offices{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,2.6vw,44px)}
.office{border-top:2px solid var(--copper);padding-top:22px}
.office__country{display:block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ash);margin-bottom:12px}
.office__city{margin:0 0 14px;font-family:var(--font-display);font-weight:700;letter-spacing:-.025em;
  font-size:clamp(21px,1.6vw,28px);color:var(--white)}
.office__address{font-style:normal;color:var(--bone);line-height:1.66;margin-bottom:12px}
.office__note{margin:0;color:var(--smoke);font-size:.95rem;line-height:1.6}
.reach__aside{padding:clamp(26px,2.4vw,36px);background:var(--carbon-2);border:1px solid var(--rule-carbon)}
.reach__title{margin:0 0 18px;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--copper);font-weight:400}
.reach__title--spaced{margin-top:32px;padding-top:28px;border-top:1px solid var(--rule-carbon)}
.hours{margin:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 20px}
.hours dt{color:var(--smoke);font-size:.97rem}
.hours dd{margin:0;font-family:var(--font-mono);font-size:.9rem;color:var(--bone);text-align:right}
.reach__note{margin:22px 0 0;color:var(--smoke);font-size:.93rem;line-height:1.62}
.include{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.include li{position:relative;padding-left:22px;color:var(--smoke);font-size:.95rem;line-height:1.55}
.include li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:1px;background:var(--copper)}

/* The selling point, kept compact on a page that already has a job. */
.usp-strip{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(30px,4vw,72px);
  align-items:start;padding-top:clamp(28px,3vw,40px);border-top:2px solid var(--carbon)}
.usp-strip__figures{display:flex;gap:clamp(24px,2.6vw,44px)}
.usp-strip__figures b{display:block;font-family:var(--font-display);font-weight:800;
  letter-spacing:-.05em;font-size:clamp(2.6rem,4.4vw,4.4rem);line-height:.92;color:var(--copper)}
.usp-strip__figures span{display:block;margin-top:10px;font-family:var(--font-mono);font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ash)}
.usp-strip__text h2{margin:0 0 14px;max-width:22ch}
.usp-strip__text p{margin:0;color:var(--ash);max-width:78ch}

@media (max-width:1440px){
  .afterlist{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,40px)}
}
@media (max-width:1080px){
  .contact-hero__grid,.reach{grid-template-columns:1fr}
  .contact-hero__form{position:static}
  .contact-hero .svc-hero__title{max-width:none}
  .offices{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  .afterlist,.offices{grid-template-columns:1fr}
  .direct li{grid-template-columns:1fr;gap:6px}
  .usp-strip{grid-template-columns:1fr;gap:28px}
}

/* ==========================================================================
   Schedule a meeting
   ========================================================================== */

.book-hero__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(36px,4.5vw,88px);align-items:start;padding-block:clamp(52px,6vw,104px)}
.book-facts{list-style:none;margin:0;padding:0;display:grid;gap:0;
  border-top:1px solid var(--rule-carbon)}
.book-facts li{display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,.66fr);
  gap:clamp(16px,2vw,32px);align-items:baseline;padding-block:clamp(18px,1.8vw,24px);
  border-bottom:1px solid var(--rule-carbon)}
.book-facts b{font-family:var(--font-display);font-weight:800;letter-spacing:-.035em;
  font-size:clamp(1.5rem,2vw,2.1rem);color:var(--copper);line-height:1}
.book-facts span{color:var(--smoke);font-size:.97rem;line-height:1.6}

/* The scheduler itself. */
.calendar{display:grid;gap:clamp(22px,2.4vw,34px)}
.calendar__head{display:flex;gap:clamp(20px,3vw,48px);align-items:end;justify-content:space-between;flex-wrap:wrap}
.calendar__head > div{display:grid;gap:12px;max-width:64ch}
.calendar__head p{margin:0;color:var(--ash)}
.calendar__direct{flex:none}
.calendar__frame{background:var(--white);border:1px solid var(--rule-bone);
  min-height:720px;position:relative;display:grid}
.calendar__standby{position:absolute;inset:auto 0 auto 0;top:clamp(40px,6vw,90px);z-index:0;
  margin:0;text-align:center;color:var(--ash);font-size:.95rem;line-height:1.7;padding-inline:20px}
.calendar__standby a{color:var(--copper)}
.calendar__frame iframe{position:relative;z-index:1;width:100%;min-height:720px;border:0;display:block}
.calendar__fallback{margin:0;font-size:.93rem;color:var(--ash);line-height:1.7}
.calendar__fallback a{color:var(--copper)}

/* What it is, and what it is not. */
.isnot{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,56px)}
.isnot__col{padding:clamp(24px,2.4vw,34px);border:1px solid var(--rule-carbon);background:var(--carbon-2)}
.isnot__col--is{border-top:2px solid var(--copper)}
.isnot__col--not{border-top:2px solid var(--rule-carbon);opacity:.86}
.isnot__label{margin:0 0 20px;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--copper);font-weight:400}
.isnot__col--not .isnot__label{color:var(--smoke)}
.isnot ul{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.isnot li{position:relative;padding-left:26px;color:var(--bone);line-height:1.6}
.isnot__col--not li{color:var(--smoke)}
.isnot li::before{content:"";position:absolute;left:0;top:.66em;width:12px;height:1px;background:var(--copper)}
.isnot__col--not li::before{background:var(--rule-carbon);width:12px}

/* Preparation, optional. */
.prep{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(30px,4vw,76px);align-items:start}
.prep__text .section__head{margin-bottom:0}
.prep__list{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,2.4vw,40px)}
.prep__list li{border-top:2px solid var(--carbon);padding-top:20px}
.prep__list h3{margin:0 0 10px;font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(18px,1.25vw,22px)}
.prep__list p{margin:0;color:var(--ash);font-size:.96rem;line-height:1.62}

/* The written alternative. */
.otherway{display:grid;grid-template-columns:minmax(0,1.3fr) auto;gap:clamp(28px,3.5vw,64px);
  align-items:center;padding-top:clamp(26px,3vw,38px);border-top:2px solid var(--carbon)}
.otherway h2{margin:14px 0 12px}
.otherway p{margin:0;color:var(--ash);max-width:70ch}
.otherway__links{display:flex;gap:14px;flex-wrap:wrap}

@media (max-width:1080px){
  .book-hero__grid,.prep,.otherway{grid-template-columns:1fr}
  .otherway__links{justify-content:flex-start}
}
@media (max-width:700px){
  .isnot,.prep__list{grid-template-columns:1fr}
  .book-facts li{grid-template-columns:1fr;gap:8px}
  .calendar__frame,.calendar__frame iframe{min-height:640px}
}

/* ==========================================================================
   FAQ hub
   ========================================================================== */

.faqhub{display:grid;grid-template-columns:minmax(0,.32fr) minmax(0,1fr);
  gap:clamp(32px,4.5vw,88px);align-items:start}

/* Sticky index. */
.faqhub__index{position:sticky;top:calc(var(--header-h) + 28px)}
.faqhub__index-label{margin:0 0 18px;font-family:var(--font-mono);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ash)}
.faqhub__index ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule-bone)}
.faqhub__index li{border-bottom:1px solid var(--rule-bone)}
.faqhub__index a{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding-block:15px;text-decoration:none;color:var(--carbon);
  font-family:var(--font-display);font-weight:700;letter-spacing:-.015em;font-size:1.02rem}
.faqhub__index a:hover{color:var(--copper)}
.faqhub__index a b{font-family:var(--font-mono);font-size:.72rem;font-weight:400;color:var(--ash)}
.faqhub__index a:hover b{color:var(--copper)}
.faqhub__ask{margin-top:clamp(26px,3vw,38px);padding-top:24px;border-top:2px solid var(--carbon)}
.faqhub__ask p{margin:0 0 14px;font-size:.95rem;color:var(--ash)}

/* Groups. */
.faqhub__groups{display:grid;gap:clamp(46px,5vw,86px)}
.faqgroup{scroll-margin-top:calc(var(--header-h) + 28px)}
.faqgroup__head{margin-bottom:clamp(20px,2.2vw,30px);padding-bottom:18px;
  border-bottom:2px solid var(--carbon)}
.faqgroup__title{margin:0 0 12px;font-family:var(--font-display);font-weight:800;
  letter-spacing:-.035em;font-size:clamp(1.7rem,2.6vw,2.6rem);line-height:1.06}
.faqgroup__intro{margin:0;color:var(--ash);max-width:74ch}

@media (max-width:1080px){
  .faqhub{grid-template-columns:1fr}
  .faqhub__index{position:static}
  .faqhub__index ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 clamp(20px,3vw,40px)}
  .faqhub__ask{max-width:420px}
}
@media (max-width:600px){
  .faqhub__index ul{grid-template-columns:1fr}
}

/* ==========================================================================
   Legal documents
   ========================================================================== */

/* Plain-English summary, above the actual terms. */
.legal-summary{padding:clamp(26px,2.8vw,40px);background:var(--carbon);color:var(--bone);
  margin-bottom:clamp(40px,4.5vw,72px)}
.legal-summary__head{margin:0 0 20px;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--copper);font-weight:400}
.legal-summary ul{list-style:none;margin:0;padding:0;display:grid;gap:14px;
  grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,3vw,56px)}
.legal-summary li{position:relative;padding-left:24px;line-height:1.6;max-width:60ch}
.legal-summary li::before{content:"";position:absolute;left:0;top:.66em;width:12px;height:1px;background:var(--copper)}
.legal-summary__note{margin:24px 0 0;padding-top:20px;border-top:1px solid var(--rule-carbon);
  font-size:.9rem;color:var(--smoke)}

.legal{display:grid;grid-template-columns:minmax(0,.3fr) minmax(0,1fr);
  gap:clamp(32px,4.5vw,88px);align-items:start}

/* Contents. */
.legal__index{position:sticky;top:calc(var(--header-h) + 28px)}
.legal__index-label{margin:0 0 16px;font-family:var(--font-mono);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ash)}
.legal__index ol{list-style:none;margin:0;padding:0;counter-reset:legal;
  border-top:1px solid var(--rule-bone)}
.legal__index li{counter-increment:legal;border-bottom:1px solid var(--rule-bone)}
.legal__index a{display:grid;grid-template-columns:26px minmax(0,1fr);gap:8px;
  padding-block:12px;text-decoration:none;color:var(--carbon);font-size:.95rem;line-height:1.45}
.legal__index a::before{content:counter(legal,decimal-leading-zero);
  font-family:var(--font-mono);font-size:.72rem;color:var(--ash);padding-top:.2em}
.legal__index a:hover{color:var(--copper)}
.legal__index a:hover::before{color:var(--copper)}
.legal__updated{margin:24px 0 0;padding-top:18px;border-top:2px solid var(--carbon);
  display:grid;gap:4px}
.legal__updated span{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ash)}
.legal__updated time{font-family:var(--font-display);font-weight:700;letter-spacing:-.015em}

/* The document itself. */
.legal__body{display:grid;gap:clamp(34px,3.6vw,54px)}
.legal__section{scroll-margin-top:calc(var(--header-h) + 28px)}
.legal__section h2{margin:0 0 18px;font-family:var(--font-display);font-weight:800;
  letter-spacing:-.03em;font-size:clamp(1.4rem,2.1vw,2.05rem);line-height:1.1;max-width:24ch}
.legal__section p{margin:0 0 16px;color:var(--ash);line-height:1.72;max-width:78ch}
.legal__section p:last-child{margin-bottom:0}
.legal__list{margin:0 0 16px;padding:0;list-style:none;display:grid;gap:12px}
.legal__list li{position:relative;padding-left:26px;color:var(--ash);line-height:1.66;max-width:76ch}
.legal__list li::before{content:"";position:absolute;left:0;top:.72em;width:14px;height:1px;background:var(--copper)}
.legal__defs{margin:0 0 16px;display:grid;gap:16px}
.legal__defs dt{font-family:var(--font-display);font-weight:700;letter-spacing:-.015em;
  font-size:1.02rem;margin-bottom:6px}
.legal__defs dd{margin:0;color:var(--ash);line-height:1.7;max-width:76ch;
  padding-left:18px;border-left:2px solid var(--rule-bone)}
.legal__foot{margin:0;padding-top:26px;border-top:1px solid var(--rule-bone);color:var(--ash)}
.legal__foot a{color:var(--copper)}

@media (max-width:1080px){
  .legal{grid-template-columns:1fr}
  .legal__index{position:static}
  .legal__index ol{columns:2;column-gap:clamp(24px,3vw,44px)}
  .legal__index li{break-inside:avoid}
}
@media (max-width:700px){
  .legal-summary ul{grid-template-columns:1fr}
  .legal__index ol{columns:1}
}

/* ==========================================================================
   Insights: index, article, sidebar, prose
   ========================================================================== */

/* ---- Post cards ---- */
.postlist{display:grid;gap:clamp(26px,2.6vw,44px)}
.postlist--two{grid-template-columns:repeat(2,minmax(0,1fr))}
.postlist--related{grid-template-columns:repeat(3,minmax(0,1fr))}
.post-item__link{display:grid;gap:16px;text-decoration:none;color:inherit;height:100%;align-content:start}
.post-item__media{aspect-ratio:1.7;overflow:hidden;background:var(--bone-2)}
.post-item__media img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;
  transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.post-item__link:hover .post-item__media img{transform:scale(1.03)}
.post-item__meta{margin:0 0 10px;display:flex;gap:14px;font-family:var(--font-mono);
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ash)}
.post-item__title{margin:0 0 10px;font-family:var(--font-display);font-weight:700;
  letter-spacing:-.026em;font-size:clamp(1.1rem,1.25vw,1.38rem);line-height:1.2}
.post-item__link:hover .post-item__title{color:var(--copper-deep)}
.post-item__excerpt{margin:0 0 14px;color:var(--ash);font-size:.95rem;line-height:1.6}
.post-item__more{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--copper)}
.post-item__more::after{content:" \2192"}

/* Lead item: image left, words right, kept in proportion. */
.postlist--lead{margin-bottom:clamp(34px,3.6vw,58px);padding-bottom:clamp(30px,3.2vw,50px);
  border-bottom:1px solid var(--rule-bone)}
.post-item--lead .post-item__link{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(28px,3.4vw,60px);align-items:center}
.post-item--lead .post-item__media{aspect-ratio:1.55}
.post-item--lead .post-item__title{font-size:clamp(1.5rem,2.1vw,2.15rem);letter-spacing:-.032em;line-height:1.1}
.post-item--lead .post-item__excerpt{font-size:1.02rem;line-height:1.66;max-width:52ch}

/* ---- Article banner: headline and picture share the width ---- */
.article__head{background:var(--carbon);color:var(--bone)}
.article__head-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(32px,4vw,76px);align-items:center;
  padding-block:clamp(44px,5vw,80px)}
.article__head-grid--plain{grid-template-columns:minmax(0,1fr)}
.article__meta{margin:0 0 22px;display:flex;flex-wrap:wrap;gap:18px;align-items:baseline;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--smoke)}
.article__cat{color:var(--copper);text-decoration:none}
.article__cat:hover{text-decoration:underline}
.article__title{margin:0;color:var(--white);font-family:var(--font-display);font-weight:800;
  letter-spacing:-.032em;font-size:clamp(1.85rem,2.9vw,3rem);line-height:1.08;max-width:22ch}
.article__standfirst{margin:22px 0 0;font-size:clamp(1.02rem,1.25vw,1.18rem);line-height:1.6;
  color:var(--smoke);max-width:56ch}
.article__figure{margin:0}
.article__figure img{width:100%;height:auto;display:block}

/* ---- Body beside the sidebar ---- */
/* Sidebar sits on the left visually, but the article stays first in the source
   so screen readers and crawlers reach the content before the furniture. */
.article__grid{display:grid;grid-template-columns:390px minmax(0,1fr);
  gap:clamp(28px,2.6vw,50px);align-items:start}
.article__main{min-width:0;grid-column:2;grid-row:1}
.article__grid > .aside{grid-column:1;grid-row:1}
/* The reading column keeps its measure but sits hard against the sidebar, so
   the slack falls in the right margin rather than between the two columns. */
.article__main > *{max-width:76ch;margin-inline:0}
.article__grid--index .article__main > *{max-width:none}
.article__tags{margin:clamp(34px,3.4vw,48px) 0 0;display:flex;flex-wrap:wrap;gap:12px;align-items:baseline}
.article__tags span{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ash)}
.article__tags a{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.06em;
  padding:6px 12px;border:1px solid var(--rule-bone);color:var(--carbon);text-decoration:none}
.article__tags a:hover{border-color:var(--carbon);color:var(--copper-deep)}
.article__foot{margin-top:clamp(30px,3.2vw,44px);padding-top:clamp(24px,2.6vw,34px);
  border-top:2px solid var(--carbon);max-width:74ch}
.article__foot span{display:block;font-family:var(--font-mono);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ash);margin-bottom:8px}
.article__foot b{display:block;font-family:var(--font-display);font-weight:800;
  letter-spacing:-.03em;font-size:clamp(1.2rem,1.6vw,1.55rem);margin-bottom:12px}
.article__foot p{margin:0;color:var(--ash);max-width:62ch}

/* ---- Sidebar ---- */
.aside{position:sticky;top:calc(var(--header-h) + 24px);display:grid;gap:18px;min-width:0}
.aside-card{padding:clamp(20px,1.8vw,26px);border:1px solid var(--rule-bone);background:var(--white)}
.aside-card__title{margin:0 0 16px;font-family:var(--font-mono);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ash);font-weight:400}
.aside-card__note{margin:0 0 16px;font-size:.92rem;line-height:1.6;color:var(--ash)}

/* Contents, with the section you are reading marked. */
.toc{list-style:none;margin:0;padding:0;display:grid;gap:2px;counter-reset:toc;
  max-height:min(52vh,520px);overflow-y:auto}
.toc__item a{display:block;padding:7px 0 7px 14px;border-left:2px solid var(--rule-bone);
  text-decoration:none;color:var(--ash);font-size:.9rem;line-height:1.45}
.toc__item a:hover{color:var(--carbon);border-left-color:var(--smoke)}
.toc__item--h3 a{padding-left:26px;font-size:.85rem}
.toc__item.is-current > a{color:var(--carbon);border-left-color:var(--copper);font-weight:600}

/* Share. */
.share{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.share a,.share__copy{display:inline-block;padding:8px 14px;border:1px solid var(--rule-bone);
  background:none;font-family:var(--font-mono);font-size:.76rem;letter-spacing:.08em;
  color:var(--carbon);text-decoration:none;cursor:pointer}
.share a:hover,.share__copy:hover{border-color:var(--carbon);color:var(--copper-deep)}
.share__copy.is-copied{border-color:var(--copper);color:var(--copper)}

/* Subscribe. */
.aside-card--sub{background:var(--carbon);border-color:var(--carbon);color:var(--bone)}
.aside-card--sub .aside-card__title{color:var(--copper)}
.aside-card--sub .aside-card__note{color:var(--smoke)}
.subform{display:grid;gap:10px}
.subform input[type=email]{width:100%;padding:12px 14px;background:var(--carbon-2);
  border:1px solid var(--rule-carbon);color:var(--bone);font:inherit;font-size:.95rem}
.subform input[type=email]::placeholder{color:var(--ash)}
.subform input[type=email]:focus{border-color:var(--copper);outline:none;
  box-shadow:0 0 0 3px rgba(228,112,58,.2)}
.aside-card--sub .form-note{margin:0 0 12px}

/* Topics. */
.topics{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule-bone)}
.topics li{border-bottom:1px solid var(--rule-bone)}
.topics a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:11px 0;text-decoration:none;color:var(--carbon);font-size:.95rem}
.topics a:hover{color:var(--copper-deep)}
.topics b{font-family:var(--font-mono);font-size:.72rem;font-weight:400;color:var(--ash)}
.topics .is-current a{color:var(--copper-deep);font-weight:700}

.aside-card--cta{background:var(--bone-2);border-color:var(--bone-2)}

/* ---- Pagination ---- */
.pagination{margin-top:clamp(36px,4vw,60px);padding-top:24px;border-top:1px solid var(--rule-bone)}
.pagination .nav-links{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.pagination .page-numbers{display:inline-grid;place-items:center;min-width:42px;height:42px;
  padding-inline:13px;border:1px solid var(--rule-bone);text-decoration:none;color:var(--carbon);
  font-family:var(--font-mono);font-size:.84rem}
.pagination .page-numbers:hover{border-color:var(--carbon)}
.pagination .page-numbers.current{background:var(--carbon);color:var(--bone);border-color:var(--carbon)}
.pagination .page-numbers.dots{border:0}

/* ---- Prose ---- */
.prose{max-width:76ch;font-size:clamp(1.02rem,1.15vw,1.14rem);line-height:1.72;color:var(--carbon)}
.prose > * + *{margin-top:1.15em}
.prose p{color:var(--ash)}
.prose h2{font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(1.4rem,2vw,1.95rem);line-height:1.12;color:var(--carbon);
  margin-top:1.9em;margin-bottom:.55em;max-width:26ch;scroll-margin-top:calc(var(--header-h) + 24px)}
.prose h3{font-family:var(--font-display);font-weight:700;letter-spacing:-.022em;
  font-size:clamp(1.14rem,1.5vw,1.4rem);line-height:1.2;color:var(--carbon);
  margin-top:1.6em;margin-bottom:.5em;max-width:32ch;scroll-margin-top:calc(var(--header-h) + 24px)}
.prose h4{font-family:var(--font-display);font-weight:700;font-size:1.06rem;margin-top:1.5em;margin-bottom:.45em}
.prose strong{color:var(--carbon);font-weight:700}
.prose a{color:var(--copper-deep);text-underline-offset:3px}
.prose a:hover{color:var(--copper)}
.prose ul,.prose ol{padding-left:0;list-style:none;display:grid;gap:.7em}
.prose ol{counter-reset:prose}
.prose li{position:relative;padding-left:30px;color:var(--ash)}
.prose ul > li::before{content:"";position:absolute;left:2px;top:.72em;width:14px;height:1px;background:var(--copper)}
.prose ol > li{counter-increment:prose}
.prose ol > li::before{content:counter(prose,decimal-leading-zero);position:absolute;left:0;
  font-family:var(--font-mono);font-size:.76rem;color:var(--copper);top:.32em}
.prose li > ul,.prose li > ol{margin-top:.6em}
.prose blockquote{margin-inline:0;padding:4px 0 4px 26px;border-left:2px solid var(--copper);
  font-family:var(--font-display);font-weight:600;font-size:1.14em;line-height:1.42;
  letter-spacing:-.018em;color:var(--carbon)}
.prose blockquote p{color:inherit}
.prose hr{border:0;height:1px;background:var(--rule-bone);margin-block:2.4em}
.prose img{height:auto;display:block;max-width:100%}
.prose figure{margin-inline:0}
.prose figcaption{margin-top:12px;font-size:.88rem;color:var(--ash);line-height:1.55}
.prose code{font-family:var(--font-mono);font-size:.86em;background:var(--bone-2);padding:.15em .4em;border-radius:2px}
.prose pre{background:var(--carbon);color:var(--bone);padding:clamp(18px,2vw,26px);
  overflow-x:auto;font-family:var(--font-mono);font-size:.86rem;line-height:1.6}
.prose pre code{background:none;padding:0;color:inherit;font-size:1em}
.prose table{width:100%;border-collapse:collapse;font-size:.95rem}
.prose th,.prose td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--rule-bone)}
.prose th{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ash);font-weight:400}
.prose .wp-block-table{overflow-x:auto}

@media (max-width:1400px){
  .article__grid{grid-template-columns:330px minmax(0,1fr);gap:clamp(26px,2.4vw,44px)}
}
@media (max-width:1080px){
  .article__head-grid{grid-template-columns:1fr;gap:clamp(26px,3vw,40px)}
  /* Stacked: content first, furniture after. */
  .article__grid{grid-template-columns:1fr}
  .article__main{grid-column:1;grid-row:1}
  .article__grid > .aside{grid-column:1;grid-row:2}
  .aside{position:static;grid-template-columns:repeat(2,minmax(0,1fr));
    margin-top:clamp(40px,4.5vw,64px)}
  .aside-card--toc{grid-column:1 / -1}
  .toc{max-height:none}
  .post-item--lead .post-item__link{grid-template-columns:1fr}
  .postlist--related{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  .postlist--two,.postlist--related,.aside{grid-template-columns:1fr}
  .article__title{max-width:none}
}

/* Tighter setting for article bodies only. The generic .prose above still
   serves the fallback page template; this scopes the change to posts. */
.article .prose{line-height:1.6}
.article .prose > * + *{margin-top:.85em}
.article .prose ul,.article .prose ol{gap:.3em}
.article .prose li{line-height:1.5}
.article .prose ul > li::before{top:.62em}
.article .prose ol > li::before{top:.22em}
.article .prose li > ul,.article .prose li > ol{margin-top:.3em}
/* Headings in an article run the full reading measure. The narrow caps above
   are a marketing-page device and read as arbitrary wrapping in body copy. */
.article .prose h2{margin-top:1.5em;margin-bottom:.45em;max-width:none}
.article .prose h3{margin-top:1.25em;margin-bottom:.35em;max-width:none}
.article .prose h4{margin-top:1.15em;margin-bottom:.3em;max-width:none}
.article .prose hr{margin-block:1.8em}
.article .prose blockquote{margin-block:1.2em}

/* Product problem statement. Numbered because these are four distinct faults,
   not a ranked list, and the reader benefits from being able to count them. */
.probs{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,2.8vw,48px)}
.prob{display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:clamp(16px,1.8vw,26px);row-gap:0;
  align-items:start;padding-top:22px;border-top:2px solid var(--carbon)}
.prob__n{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.1em;color:var(--copper);padding-top:.35em}
.prob h3{grid-column:2;margin:0 0 10px;font-family:var(--font-display);font-weight:700;
  letter-spacing:-.02em;font-size:clamp(19px,1.35vw,24px);line-height:1.16}
.prob p{grid-column:2;margin:0;color:var(--ash);font-size:.98rem;line-height:1.62;max-width:60ch}
@media (max-width:900px){.probs{grid-template-columns:1fr}}

/* Real product screenshots. Framed rather than duotoned: these are the product
   as it is, and recolouring them would defeat the point. */
.shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,2.6vw,44px)}
.shot{margin:0}
.shot--lead{grid-column:1 / -1}
.shot__frame{border:1px solid var(--rule-bone);background:var(--carbon);overflow:hidden}
.shot__frame img{width:100%;height:auto;display:block}
.shot figcaption{margin-top:14px;font-size:.93rem;line-height:1.6;color:var(--ash);max-width:70ch}
.section--carbon .shot__frame{border-color:var(--rule-carbon)}
.section--carbon .shot figcaption{color:var(--smoke)}
@media (max-width:800px){.shots{grid-template-columns:1fr}}

/* ==========================================================================
   Case study illustrations
   ========================================================================== */

/* Patient queue, before and after. */
.queue{width:100%;height:auto;display:block}
.queue__title{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;fill:var(--ash)}
.queue__label{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em}
.queue__before{fill:var(--smoke)}
.queue__after{fill:var(--copper)}
.queue__dot{fill:var(--smoke);fill-opacity:.45}
.queue__dot.queue__after{fill:var(--copper);fill-opacity:1}
.queue__mins{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em}
.queue__foot{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;fill:var(--copper)}

/* Payment path with inline scoring. */
.scorepath{width:100%;height:auto;display:block}
.scorepath__title{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;fill:var(--bone)}
.scorepath__line{stroke:var(--smoke);stroke-opacity:.4;stroke-width:1}
.scorepath__node{fill:var(--carbon);stroke:var(--smoke);stroke-width:1.5}
.scorepath__node--ours{stroke:var(--copper);stroke-width:2}
.scorepath__step{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;fill:var(--smoke)}
.scorepath__step--ours{fill:var(--bone)}
.scorepath__ms{font-family:var(--font-mono);font-size:11px;fill:var(--copper)}
.scorepath__brace{stroke:var(--copper);stroke-width:1}
.scorepath__total{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;fill:var(--copper)}
.scorepath__foot{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;fill:var(--smoke)}

/* Minutes to produce one quote. */
.quotetime{width:100%;height:auto;display:block}
.quotetime__title{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;fill:var(--ash)}
.quotetime__label{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em}
.quotetime__before{fill:var(--ash)}
.quotetime__after{fill:var(--copper-deep)}
.quotetime__block{fill:var(--ash);fill-opacity:.3}
.quotetime__block.quotetime__after{fill:var(--copper);fill-opacity:1}
.quotetime__num{font-family:var(--font-mono);font-size:13px;letter-spacing:.04em}
.quotetime__foot{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;fill:var(--copper-deep)}

/* Figures that hold these drawings. */
/* These drawings are authored on a 620 unit canvas. Left unconstrained in a
   1800px shell they scale to nearly 2.5x and the labels become headings. */
.case-figure{margin:0;max-width:860px}
.case-figure figcaption{margin-top:18px;font-size:.95rem;line-height:1.6;color:var(--ash);max-width:66ch}
.case-figure--dark figcaption{color:var(--smoke)}

/* ==========================================================================
   Case studies
   ========================================================================== */

/* Banner: the claim, the facts, then the numbers on a rule. */
.case-hero{background:var(--carbon);color:var(--bone);position:relative;isolation:isolate}
.case-hero > .wrap{padding-block:clamp(48px,5.5vw,96px) clamp(34px,4vw,58px)}
.case-hero__title{margin:0;color:var(--white);font-family:var(--font-display);font-weight:800;
  letter-spacing:-.035em;font-size:clamp(2rem,3.4vw,3.5rem);line-height:1.04;max-width:20ch}
.case-hero__lede{margin:26px 0 0;font-size:clamp(1.04rem,1.3vw,1.24rem);line-height:1.6;
  color:var(--smoke);max-width:62ch}
.case-hero__facts{margin:clamp(32px,3.6vw,48px) 0 0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,40px);
  padding-top:26px;border-top:1px solid var(--rule-carbon)}
.case-hero__facts dt{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ash);margin-bottom:8px}
.case-hero__facts dd{margin:0;color:var(--bone);font-size:1rem;line-height:1.5}
.case-hero__stats{border-top:1px solid var(--rule-carbon)}
.case-hero__stats .hero__proof{padding-block:clamp(24px,2.6vw,38px)}

/* The problem, set as an argument rather than a list. */
.case-problem{max-width:78ch;display:grid;gap:1.1em}
.case-problem p{margin:0;font-size:clamp(1.04rem,1.2vw,1.16rem);line-height:1.68;color:var(--ash)}
.case-problem p:first-child{font-size:clamp(1.14rem,1.45vw,1.35rem);line-height:1.5;
  color:var(--carbon);font-weight:500}
.section--carbon .case-problem p{color:var(--smoke)}
.section--carbon .case-problem p:first-child{color:var(--bone)}

/* What we did. */
.case-steps{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,2.8vw,52px)}
.case-step{display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:clamp(16px,1.8vw,26px);row-gap:0;
  align-items:start;padding-top:22px;border-top:2px solid var(--copper)}
.case-step__n{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.1em;
  color:var(--copper);padding-top:.35em}
/* Both the heading and the body belong in the second column, or the body
   drops under the number and squeezes the heading into a narrow ribbon. */
.case-step h3{grid-column:2;margin:0 0 10px;font-family:var(--font-display);font-weight:700;
  letter-spacing:-.02em;font-size:clamp(19px,1.35vw,24px);line-height:1.16}
.case-step p{grid-column:2;margin:0;font-size:.98rem;line-height:1.64;max-width:56ch}
.section--carbon .case-step h3{color:var(--white)}
.section--carbon .case-step p{color:var(--smoke)}
.section--white .case-step p,.section--bone .case-step p{color:var(--ash)}

/* Outcomes. */
.case-results{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,2.6vw,48px)}
.case-results li{padding-top:22px;border-top:2px solid var(--carbon)}
.case-results h3{margin:0 0 10px;font-family:var(--font-display);font-weight:700;letter-spacing:-.024em;
  font-size:clamp(20px,1.5vw,26px);line-height:1.14}
.case-results p{margin:0;color:var(--ash);font-size:.96rem;line-height:1.62}
.section--carbon .case-results li{border-top-color:var(--copper)}
.section--carbon .case-results h3{color:var(--white)}
.section--carbon .case-results p{color:var(--smoke)}

/* Pull quote. */
/* The quote sits on a rule and spans the band, with the mark holding the left
   edge and the attribution closing the right, so it stops floating. */
.case-quote{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(20px,2.6vw,44px);align-items:start;
  padding-block:clamp(28px,3vw,44px);border-block:1px solid var(--rule-carbon)}
.case-quote__mark{font-family:var(--font-display);font-weight:800;font-size:clamp(3rem,5vw,5rem);
  line-height:.72;color:var(--copper);user-select:none}
.case-quote blockquote{margin:0;font-family:var(--font-display);font-weight:700;
  letter-spacing:-.03em;font-size:clamp(1.35rem,2.2vw,2.15rem);line-height:1.2;color:var(--white);
  max-width:30ch}
.case-quote figcaption{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--copper);text-align:right;padding-top:.6em;white-space:nowrap}

@media (max-width:900px){
  .case-quote{grid-template-columns:auto minmax(0,1fr);gap:16px}
  .case-quote blockquote{max-width:none}
  .case-quote figcaption{grid-column:2;text-align:left;white-space:normal;margin-top:16px}
}

/* Footer: visit the product, services used, more work. */
.case-visit{display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,48px);align-items:center;
  justify-content:space-between;padding-bottom:clamp(28px,3vw,42px);
  margin-bottom:clamp(28px,3vw,42px);border-bottom:1px solid var(--rule-bone)}
.case-visit h2{margin:12px 0 0}
.taglist__label--spaced{margin-top:clamp(28px,3vw,40px)}

/* Money flow, Open Lance. */
.money{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2vw,32px);counter-reset:money}
.money__step{position:relative;padding:clamp(20px,2vw,28px);background:var(--carbon-2);
  border:1px solid var(--rule-carbon);border-top:2px solid var(--copper)}
.money__n{display:inline-grid;place-items:center;width:26px;height:26px;margin-bottom:14px;
  background:var(--copper);color:var(--carbon);font-family:var(--font-mono);font-size:.8rem}
.money__step h3{margin:0 0 10px;font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(17px,1.2vw,21px);color:var(--white)}
.money__step p{margin:0;color:var(--smoke);font-size:.94rem;line-height:1.6}

/* The contrast, BotUp. */
.versus{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,2.6vw,44px)}
.versus__col{padding:clamp(24px,2.4vw,34px);border:1px solid var(--rule-bone);background:var(--white)}
.versus__col--ours{background:var(--carbon);border-color:var(--carbon);color:var(--bone)}
.versus__label{margin:0 0 20px;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ash);font-weight:400}
.versus__col--ours .versus__label{color:var(--copper)}
.versus ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.versus li{position:relative;padding-left:26px;line-height:1.55;color:var(--ash)}
.versus__col--ours li{color:var(--bone)}
.versus li::before{content:"";position:absolute;left:0;top:.64em;width:13px;height:1px;
  background:var(--rule-bone)}
.versus__col--ours li::before{background:var(--copper)}

/* Archive listing. */
.caselist{list-style:none;margin:0;padding:0;display:grid;gap:0;
  border-top:1px solid var(--rule-bone)}
.caseitem{border-bottom:1px solid var(--rule-bone)}
.caseitem a{display:grid;grid-template-columns:minmax(0,.2fr) minmax(0,.24fr) minmax(0,.56fr);
  gap:clamp(20px,3vw,56px);align-items:center;padding-block:clamp(26px,2.8vw,40px);
  text-decoration:none;color:inherit}
.caseitem__eyebrow{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ash)}
.caseitem__stat{display:block}
.caseitem__stat b{display:block;font-family:var(--font-display);font-weight:800;letter-spacing:-.045em;
  font-size:clamp(2rem,3vw,3rem);line-height:.95;color:var(--copper)}
.caseitem__stat span{display:block;margin-top:8px;font-family:var(--font-mono);font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ash)}
.caseitem__title{margin:0 0 10px;font-family:var(--font-display);font-weight:700;
  letter-spacing:-.028em;font-size:clamp(1.2rem,1.6vw,1.7rem);line-height:1.14}
.caseitem a:hover .caseitem__title{color:var(--copper-deep)}
.caseitem__lede{margin:0 0 12px;color:var(--ash);font-size:.97rem;line-height:1.6;max-width:62ch}
.caseitem__more{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--copper)}
.caseitem__more::after{content:" \2192"}

/* Reviews. */
.review-hero{background:var(--carbon);color:var(--bone);padding-block:clamp(48px,5.5vw,92px)}
.review-hero__title{margin:0;color:var(--white);font-family:var(--font-display);font-weight:800;
  letter-spacing:-.032em;font-size:clamp(1.8rem,3vw,3rem);line-height:1.1;max-width:24ch}
.review-body{max-width:78ch}
.review-body__quote{margin:0 0 26px;padding-left:26px;border-left:2px solid var(--copper);
  font-size:clamp(1.1rem,1.4vw,1.3rem);line-height:1.62;color:var(--carbon)}
.review-body__quote p{margin:0 0 1em}
.review-body__quote p:last-child{margin-bottom:0}
.review-body__who{margin:0 0 20px;display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline}
.review-body__who b{font-family:var(--font-display);font-weight:700;font-size:1.05rem}
.review-body__who span{font-family:var(--font-mono);font-size:.8rem;letter-spacing:.08em;color:var(--ash)}
.review-body__note{margin:0;padding-top:20px;border-top:1px solid var(--rule-bone);
  font-size:.9rem;color:var(--ash)}
.reviewlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,2.6vw,44px)}
.reviewcard{padding:clamp(24px,2.4vw,34px);background:var(--white);border:1px solid var(--rule-bone)}
.reviewcard__title{margin:0 0 14px;font-family:var(--font-display);font-weight:700;
  letter-spacing:-.024em;font-size:clamp(1.05rem,1.3vw,1.32rem);line-height:1.22}
.reviewcard__title a{color:inherit;text-decoration:none}
.reviewcard__title a:hover{color:var(--copper-deep)}
.reviewcard__body{margin:0 0 18px;color:var(--ash);font-size:.95rem;line-height:1.62}
.reviewcard__who{margin:0;padding-top:16px;border-top:1px solid var(--rule-bone);
  display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline}
.reviewcard__who b{font-family:var(--font-display);font-weight:700;font-size:.95rem}
.reviewcard__who span{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.08em;color:var(--ash)}
.quote__link{display:inline-block;margin-top:18px;font-family:var(--font-mono);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--copper);text-decoration:none}
.quote__link:hover{text-decoration:underline}

@media (max-width:1200px){
  .money{grid-template-columns:repeat(2,minmax(0,1fr))}
  .case-results{grid-template-columns:repeat(2,minmax(0,1fr))}
  .case-results li:nth-child(3){grid-column:1 / -1}
}
@media (max-width:900px){
  .case-hero__facts{grid-template-columns:1fr;gap:18px}
  .case-steps,.versus,.reviewlist{grid-template-columns:1fr}
  .caseitem a{grid-template-columns:1fr;gap:14px}
}
@media (max-width:700px){
  .case-results{grid-template-columns:1fr}
  .case-results li:nth-child(3){grid-column:auto}
  .money{grid-template-columns:1fr}
}

/* Problem section: the argument on the left, what it looked like on the right. */
.case-split{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
  gap:clamp(30px,4vw,76px);align-items:start}
.case-split .case-problem{max-width:none}
.symptoms{padding:clamp(22px,2.2vw,32px);border:1px solid var(--rule-bone);background:var(--white)}
.section--carbon .symptoms{border-color:var(--rule-carbon);background:var(--carbon-2)}
.symptoms__label{margin:0 0 20px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ash);font-weight:400}
.section--carbon .symptoms__label{color:var(--copper)}
.symptoms dl{margin:0;display:grid;gap:0}
.symptoms dl > div{padding-block:16px;border-top:1px solid var(--rule-bone)}
.symptoms dl > div:first-child{border-top:0;padding-top:0}
.section--carbon .symptoms dl > div{border-top-color:var(--rule-carbon)}
.symptoms dt{font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(1.25rem,1.7vw,1.75rem);line-height:1;color:var(--copper);margin-bottom:8px}
.symptoms dd{margin:0;font-size:.93rem;line-height:1.5;color:var(--ash)}
.section--carbon .symptoms dd{color:var(--smoke)}

/* Equal boxes for the closing link lists. */
.linkgrid{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.2vw,18px)}
.linkgrid li{display:flex}
.linkgrid a{display:flex;align-items:center;width:100%;min-height:88px;
  padding:clamp(16px,1.4vw,22px);border:1px solid var(--rule-bone);background:var(--white);
  text-decoration:none;color:var(--carbon);font-family:var(--font-display);font-weight:700;
  letter-spacing:-.018em;font-size:.98rem;line-height:1.28;transition:border-color .2s,color .2s}
.linkgrid a:hover{border-color:var(--carbon);color:var(--copper-deep)}
.section--carbon .linkgrid a{background:var(--carbon-2);border-color:var(--rule-carbon);color:var(--bone)}
.section--carbon .linkgrid a:hover{border-color:var(--copper);color:var(--copper)}

@media (max-width:1080px){
  .case-split{grid-template-columns:1fr}
  .symptoms{max-width:560px}
  .linkgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .linkgrid{grid-template-columns:1fr}
  .linkgrid a{min-height:0}
}

/* Homepage featured case: a real screenshot is shown as authored, not duotoned. */
.case__more{margin:clamp(26px,2.6vw,38px) 0 0}
.case__more a{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--copper);text-decoration:none}
.case__more a:hover{text-decoration:underline}

/* Product screenshots. The image itself, lifted off the page by a layered
   shadow. No plate, no imitation window chrome. */
.screen{position:relative}
.screen__label{margin:0 0 14px;display:flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ash)}
.screen__label span{width:22px;height:1px;background:var(--copper);flex:none}
.screen__plate{
  border-radius:3px;
  box-shadow:
    0 1px 1px rgba(11,11,12,.05),
    0 3px 6px -1px rgba(11,11,12,.07),
    0 12px 22px -6px rgba(11,11,12,.11),
    0 30px 52px -18px rgba(11,11,12,.17),
    0 60px 90px -40px rgba(11,11,12,.2);
}
.screen__plate img{width:100%;height:auto;display:block;border-radius:3px}
.section--carbon .screen__label{color:var(--smoke)}
/* Shadows do not read on carbon, so definition comes from a hairline instead. */
.section--carbon .screen__plate{
  box-shadow:
    0 0 0 1px rgba(242,238,233,.1),
    0 30px 60px -24px rgba(0,0,0,.75),
    0 60px 100px -50px rgba(0,0,0,.9);
}
.shot__frame{border:0;background:none}

/* ==========================================================================
   Project brief dialog
   ========================================================================== */

.brief{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:clamp(0px,3vw,40px)}
.brief[hidden]{display:none}
.brief__scrim{position:absolute;inset:0;background:rgba(11,11,12,.86);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .24s ease}
.brief.is-open .brief__scrim{opacity:1}
.brief__panel{position:relative;width:min(1080px,100%);max-height:100%;background:var(--carbon);
  color:var(--bone);display:grid;grid-template-rows:auto 1fr auto;overflow:hidden;
  border:1px solid var(--rule-carbon);
  opacity:0;transform:translateY(14px) scale(.99);transition:opacity .26s ease,transform .26s cubic-bezier(.2,.7,.3,1)}
.brief.is-open .brief__panel{opacity:1;transform:none}

/* Progress */
.brief__top{display:flex;align-items:center;gap:clamp(16px,2vw,28px);
  padding:clamp(16px,1.6vw,22px) clamp(20px,2.4vw,36px);border-bottom:1px solid var(--rule-carbon)}
.brief__count{margin:0;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--smoke);flex:none}
.brief__count i{font-style:normal;opacity:.4;margin:0 4px}
.brief__bar{flex:1;height:2px;background:var(--rule-carbon);overflow:hidden}
.brief__bar span{display:block;height:100%;width:0;background:var(--copper);
  transition:width .32s cubic-bezier(.2,.7,.3,1)}
.brief__close{flex:none;width:34px;height:34px;display:grid;place-items:center;background:none;
  border:1px solid var(--rule-carbon);color:var(--smoke);font-size:20px;line-height:1;cursor:pointer}
.brief__close:hover{color:var(--copper);border-color:var(--copper)}

/* Screens */
.brief__body{overflow-y:auto;padding:clamp(28px,3.6vw,60px) clamp(20px,2.4vw,36px)}
.brief__screen{display:none}
.brief__screen.is-active{display:block;animation:briefIn .3s cubic-bezier(.2,.7,.3,1) both}
@keyframes briefIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.brief__eyebrow{margin:0 0 16px;font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--copper)}
.brief__q{margin:0 0 14px;font-family:var(--font-display);font-weight:800;letter-spacing:-.038em;
  font-size:clamp(1.7rem,3.4vw,3rem);line-height:1.04;color:var(--white);max-width:20ch}
.brief__help{margin:0 0 clamp(26px,3vw,40px);color:var(--smoke);font-size:clamp(.98rem,1.2vw,1.1rem);
  line-height:1.6;max-width:58ch}

/* Options */
.brief__opts{display:grid;gap:10px}
.brief__opts--multi,.brief__opts--inline{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.brief__opt{display:flex;align-items:center;gap:16px;width:100%;text-align:left;cursor:pointer;
  padding:clamp(16px,1.5vw,22px) clamp(18px,1.7vw,26px);background:var(--carbon-2);
  border:1px solid var(--rule-carbon);color:var(--bone);font:inherit;
  font-family:var(--font-display);font-weight:600;letter-spacing:-.018em;
  font-size:clamp(1rem,1.3vw,1.18rem);line-height:1.3;transition:border-color .16s,background .16s,transform .16s}
.brief__opt:hover{border-color:var(--smoke);transform:translateX(3px)}
.brief__opt.is-on{border-color:var(--copper);background:rgba(228,112,58,.1)}
.brief__opt-key{flex:none;width:26px;height:26px;display:grid;place-items:center;
  border:1px solid var(--rule-carbon);font-family:var(--font-mono);font-size:.7rem;color:var(--ash)}
.brief__opt.is-on .brief__opt-key{background:var(--copper);border-color:var(--copper);color:var(--carbon)}
.brief__opts--inline .brief__opt{font-size:.98rem;padding:14px 18px}

/* Fields */
.brief__field{display:grid;gap:8px;margin-top:18px}
.brief__field > span{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ash)}
.brief__field > span i{font-style:italic;text-transform:none;letter-spacing:0;opacity:.7}
.brief__field input,.brief__field textarea{width:100%;padding:16px 18px;background:var(--carbon-2);
  border:1px solid var(--rule-carbon);color:var(--bone);font:inherit;font-size:1.02rem;resize:vertical}
.brief__field input::placeholder,.brief__field textarea::placeholder{color:var(--ash)}
.brief__field input:focus,.brief__field textarea:focus{border-color:var(--copper);outline:none;
  box-shadow:0 0 0 3px rgba(228,112,58,.18)}
.brief__field--big{margin-top:0}
.brief__field--big textarea{font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(1.1rem,1.6vw,1.45rem);line-height:1.35;padding:20px 22px}
.brief__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}
.brief__reveal{margin-top:18px;padding-top:18px;border-top:1px solid var(--rule-carbon);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}
.brief__error{margin:16px 0 0;color:var(--copper);font-size:.94rem}

/* Footer */
.brief__foot{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:clamp(16px,1.6vw,22px) clamp(20px,2.4vw,36px);border-top:1px solid var(--rule-carbon)}
.brief__foot-right{display:flex;align-items:center;gap:14px;margin-left:auto}
.brief__back,.brief__skip{background:none;border:0;cursor:pointer;font-family:var(--font-mono);
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ash);padding:8px 0}
.brief__back:hover,.brief__skip:hover{color:var(--copper)}
.btn--lg{padding:18px 34px;font-size:1.05rem}
.brief__actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:8px}
.brief__alt{background:none;border:0;cursor:pointer;font-family:var(--font-mono);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--smoke);text-decoration:none}
.brief__alt:hover{color:var(--copper)}

/* Done */
.brief__recap{margin:0 0 clamp(24px,2.6vw,36px);display:grid;gap:0;
  border-top:1px solid var(--rule-carbon)}
.brief__recap > div{display:grid;grid-template-columns:minmax(0,.3fr) minmax(0,.7fr);gap:20px;
  padding-block:12px;border-bottom:1px solid var(--rule-carbon)}
.brief__recap dt{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ash)}
.brief__recap dd{margin:0;color:var(--bone);font-size:.97rem;line-height:1.5}
.brief__next{list-style:none;margin:0 0 clamp(24px,2.6vw,34px);padding:0;display:grid;gap:14px}
.brief__next li{display:grid;gap:4px;padding-left:20px;position:relative}
.brief__next li::before{content:"";position:absolute;left:0;top:.6em;width:11px;height:1px;background:var(--copper)}
.brief__next b{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--copper);font-weight:400}
.brief__next span{color:var(--smoke);font-size:.97rem;line-height:1.5}
.brief__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

@media (max-width:720px){
  .brief{padding:0}
  .brief__panel{width:100%;height:100%;max-height:none;border:0}
  .brief__grid,.brief__reveal{grid-template-columns:1fr}
  .brief__opts--multi,.brief__opts--inline{grid-template-columns:1fr}
  .brief__opt-key{display:none}
}
@media (prefers-reduced-motion:reduce){
  .brief__scrim,.brief__panel,.brief__bar span,.brief__opt{transition:none}
  .brief__screen.is-active{animation:none}
}

/* Review attribution: who said it, where it was published. */
.quote__src,.reviewcard__who em{display:block;margin-top:6px;font-family:var(--font-mono);
  font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--copper);font-style:normal}
.review-body__note a{color:var(--copper);margin-left:8px}

/* Structured review sections, as published on the source platform. */
.review-body__quote h2{margin:1.6em 0 .5em;font-family:var(--font-mono);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--copper);font-weight:400}
.review-body__quote h2:first-child{margin-top:0}
.review-body__quote p{margin:0 0 .9em;font-size:1.02rem;line-height:1.66;color:var(--ash)}
.review-body__quote p:last-child{margin-bottom:0}