/* ============================================================
   Dygram Designs — inner pages
   Layered on styles.css, before dark.css. Same tokens, same
   contrast rules: lime is a FILL, never text on a light surface.
   ============================================================ */

/* ---------- breadcrumbs ----------
   Small, quiet, and genuinely useful to search engines — the
   BreadcrumbList JSON-LD on each page describes exactly this trail. */
.crumbs{padding-top:calc(var(--nav-h) + clamp(.75rem,2vw,1.5rem));font-size:var(--t-label);letter-spacing:.04em}
.crumbs ol{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:0;padding:0;color:var(--mute)}
.crumbs li+li::before{content:"/";margin-right:.4rem;opacity:.5}
.crumbs a{color:var(--mute);text-decoration:none;border-bottom:1px solid transparent}
.crumbs a:hover{color:var(--fg);border-bottom-color:currentColor}
.crumbs span{color:var(--fg)}

/* ---------- page header ---------- */
.pagehead{padding-block:clamp(2rem,4vw,3rem) clamp(2.5rem,5vw,4rem)}
/* Pages without breadcrumbs (404) still have to clear the floating pill. */
.pagehead:first-child{padding-top:calc(var(--nav-h) + clamp(1.5rem,4vw,3rem))}
.pagehead--tall{padding-block:clamp(6rem,14vw,11rem)}
.pagehead__title{
  font-family:var(--font-display);font-weight:600;
  font-size:var(--t-h1);letter-spacing:var(--ls-display);line-height:1.05;
  max-width:18ch;
}
.pagehead__title strong{font-weight:700}
.pagehead__sub{
  max-width:56ch;margin-top:clamp(1.5rem,2.5vw,2rem);
  font-size:var(--t-lead);line-height:1.55;color:var(--mute);
}

/* Section sub-line. Also used on the homepage, which does NOT load
   portfolio.css — that file's copy of this rule is not in scope there. */
.cat__line{margin-top:1.125rem;max-width:52ch;color:var(--mute);font-size:var(--t-lead);line-height:1.55}

/* ---------- deliverable lists (hexagon bullets) ---------- */
.deliv{display:flex;flex-direction:column;gap:.65rem;list-style:none;margin:0;padding:0}
.deliv li{position:relative;padding-left:1.5rem;font-size:.9375rem;color:var(--mute)}
.deliv li::before{
  content:"";position:absolute;left:0;top:.52em;width:9px;height:9px;background:var(--lime);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}

/* ============================================================
   services
   ============================================================ */
.svc__jump{
  display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:2.5rem 0 0;padding:0;
}
.svc__jump a{
  display:inline-block;padding:.5rem .95rem;border-radius:var(--r-pill);
  font-size:.875rem;color:var(--mute);text-decoration:none;
  box-shadow:inset 0 0 0 1px var(--line);
  transition:color .2s var(--ease),box-shadow .2s var(--ease);
}
.svc__jump a:hover{color:var(--fg);background:var(--surface-2);box-shadow:none}

.svc{padding-block:var(--section-y);scroll-margin-top:calc(var(--nav-h) + 1rem);border-top:1px solid var(--line)}
.svc--alt{background:transparent}
.svc__head{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--col-gap);align-items:start;
}
/* Same bed as the homepage: label on column 1, heading on column 4.
   Section headings start at the identical x on every page of the site. */
.svc__head .sec__label{grid-column:1 / 4}
.svc__main{grid-column:4 / 10}
.svc__head .deliv{grid-column:10 / 13}
.svc__head .h2{font-size:var(--t-h2)}
.svc__blurb{margin-top:clamp(1.25rem,2vw,1.75rem);max-width:56ch;font-size:var(--t-lead);line-height:1.55;color:var(--mute)}
.svc__detail{margin-top:1rem;max-width:56ch;font-size:.9375rem;line-height:1.7;color:var(--mute)}
.svc__head .btn{margin-top:1.75rem}

.svc__grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(.75rem,1.4vw,1.125rem);margin-top:clamp(2.25rem,4vw,3rem);
  align-items:start;
}
.svc__tile{
  display:block;position:relative;overflow:hidden;aspect-ratio:5/3;border-radius:var(--r-md);
  background:var(--surface);text-decoration:none;
}
.svc__tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.svc__tile:hover img{transform:scale(1.05)}
/* Guide covers are portrait documents — cropping them cuts the title off,
   which is the one thing a cover has to show. */
.svc__grid--guides .svc__tile{aspect-ratio:16/10;background:var(--surface)}
.svc__grid--guides .svc__tile img{object-fit:contain}
.svc__tile span{
  position:absolute;left:0;right:0;bottom:0;padding:.6rem .8rem;
  background:linear-gradient(transparent,rgba(8,8,8,.72));
  color:var(--paper);font-size:.8125rem;font-weight:500;letter-spacing:.02em;
}

.svc__reel{margin-top:clamp(2.25rem,4vw,3rem);background:var(--slab);overflow:hidden;border-radius:var(--r-lg)}
.svc__reel video{display:block;width:100%;height:auto}

/* ============================================================
   work
   ============================================================ */
.filters{
  position:sticky;top:var(--nav-h);z-index:60;
  background:var(--bg);border-bottom:1px solid var(--line);
}
.filters .wrap{display:flex;gap:.5rem;padding-block:.75rem;overflow-x:auto;scrollbar-width:none}
.filters .wrap::-webkit-scrollbar{display:none}
.filter{
  flex:none;padding:.55rem 1.05rem;border-radius:var(--r-pill);border:0;cursor:pointer;
  background:transparent;font:inherit;font-size:.875rem;font-weight:500;color:var(--mute);
  box-shadow:inset 0 0 0 1px var(--line);
  transition:color .2s var(--ease),background-color .2s var(--ease),box-shadow .2s var(--ease);
}
.filter:hover{color:var(--fg);background:var(--surface-2);box-shadow:none}
/* Ink on lime — the one contrast pair that always passes, in both themes. */
.filter.is-current{background:var(--lime);color:var(--ink);box-shadow:none;font-weight:600}

.workgrid{padding-block:clamp(2.5rem,5vw,4rem)}
.cat__grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(.75rem,1.4vw,1.125rem);
  /* Without this the grid stretches every tile to the tallest in its row,
     which silently overrides aspect-ratio and brings the cropping back. */
  align-items:start;
}
/* 5/3 is the real shape of the logo mockups (1.66). Matching it means
   object-fit:cover has nothing to crop — the composition arrives intact. */
.piece{
  display:block;position:relative;overflow:hidden;padding:0;border:0;cursor:zoom-in;border-radius:var(--r-md);
  aspect-ratio:5/3;background:var(--surface);
}
.piece img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.piece:hover img{transform:scale(1.05)}
.piece[hidden]{display:none}
/* The seven logo-type boards are PORTRAIT (1700×2542 = 2/3), not wide. They are
   full boards of many marks, so any crop loses work — 2/3 matches exactly. */
.piece--board{aspect-ratio:2/3;background:var(--surface)}
.piece--board img{object-fit:contain}
/* Guide covers vary between 1.33 and 1.78, so contain rather than a fixed crop —
   a cropped cover cuts off the brand name, which is all a cover has to show. */
.piece--guide{aspect-ratio:16/10;background:var(--surface)}
.piece--guide img{object-fit:contain}

/* A guide that has a written case study gets a real link under its cover.
   The wrapper is the grid item (it carries data-cat for the filter); the cover
   inside still opens the lightbox, so both actions stay separately reachable
   instead of one swallowing the other. */
.gcard{display:flex;flex-direction:column;gap:.5rem;margin:0}
.gcard__go{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  min-height:44px;padding:.55rem .85rem;
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--card);color:var(--fg);
  font-size:.8125rem;font-weight:600;line-height:1.3;letter-spacing:-.01em;
  text-decoration:none;
  transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease);
}
.gcard__go svg{flex:none;transition:transform .2s var(--ease)}
.gcard__go:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.gcard__go:hover svg{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.gcard__go svg{transition:none}.gcard__go:hover svg{transform:none}}

/* ---------- lightbox ---------- */
.lb{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  padding:clamp(1rem,4vw,3rem);background:rgba(8,8,8,.94);
  opacity:0;transition:opacity .3s var(--ease);
}
.lb[hidden]{display:none}
.lb.is-open{opacity:1}
.lb__img{max-width:100%;max-height:100%;object-fit:contain;border-radius:var(--r-md);box-shadow:0 40px 90px -30px rgba(0,0,0,.8)}
.lb__close{
  position:absolute;top:1rem;right:1.25rem;width:48px;height:48px;border:0;cursor:pointer;
  border-radius:var(--r-pill);background:rgba(255,255,255,.14);color:var(--paper);
  font-size:1.75rem;line-height:1;display:grid;place-items:center;
  transition:background-color .2s var(--ease);
}
.lb__close:hover{background:rgba(250,250,247,.2)}

/* ============================================================
   process
   ============================================================ */
.steps--full .step h2{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.25rem,2.2vw,1.625rem);letter-spacing:-.015em;
}

.intake{padding-block:clamp(3.5rem,7vw,6rem)}
.intake__lead{max-width:60ch;margin-top:1.5rem;color:var(--paper-70);font-size:1.0625rem;line-height:1.65}
.intake__list{
  counter-reset:i;list-style:none;margin:clamp(2rem,4vw,3rem) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem clamp(2rem,4vw,3.5rem);
}
.intake__list li{
  counter-increment:i;position:relative;padding:1rem 0 1rem 3rem;
  border-top:1px solid rgba(250,250,247,.14);
  color:var(--paper-70);font-size:.9375rem;line-height:1.6;
}
.intake__list li::before{
  content:counter(i,decimal-leading-zero);position:absolute;left:0;top:1rem;
  font-family:var(--font-display);font-weight:600;font-size:.8125rem;
  letter-spacing:.08em;color:var(--lime);
}

.revpolicy{padding-block:clamp(3.5rem,7vw,6rem)}
.revpolicy__grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(2rem,5vw,4rem);margin-top:clamp(2rem,4vw,3rem);
}

.revpolicy h3{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.125rem,1.9vw,1.375rem);letter-spacing:-.012em;
}
.revpolicy p{margin-top:.85rem;color:var(--ink-70);font-size:1rem;line-height:1.7;max-width:46ch}

/* ---------- FAQ ----------
   <details> so the answers are in the DOM and indexable even when
   collapsed — which is what the FAQPage JSON-LD is claiming. */
.faq{padding-block:var(--section-y);border-top:1px solid var(--line)}
.faq__list{margin-top:clamp(2rem,4vw,3rem);border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item summary{
  list-style:none;cursor:pointer;padding:1.35rem 3rem 1.35rem 0;position:relative;
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1rem,1.5vw,1.1875rem);letter-spacing:-.01em;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{
  content:"";position:absolute;right:.35rem;top:50%;width:13px;height:13px;
  border-right:2px solid var(--fg);border-bottom:2px solid var(--fg);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease);
}
.faq__item[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
.faq__item summary:hover{color:var(--mute)}
.faq__item p{padding:0 3rem 1.6rem 0;max-width:72ch;color:var(--ink-70);font-size:1rem;line-height:1.75}

/* ============================================================
   about
   ============================================================ */
.story{padding-block:clamp(3.5rem,7vw,6rem)}
.story__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:start;
}
.story__body p{color:var(--ink-70);font-size:1.0625rem;line-height:1.75;max-width:56ch}
.story__body p+p{margin-top:1.25rem}

.facts{padding-block:clamp(3.5rem,7vw,6rem)}
.facts__grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;margin-top:clamp(2rem,4vw,3rem);
}
.facts__grid>div{padding:1.5rem 1.25rem 1.5rem 0;border-top:1px solid rgba(250,250,247,.14)}
.facts__grid dt{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--lime)}
.facts__grid dd{
  margin:.6rem 0 0;font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.0625rem,1.6vw,1.25rem);letter-spacing:-.01em;line-height:1.35;
  color:var(--paper);
}

/* ============================================================
   get started
   ============================================================ */
.start{padding-block:clamp(2rem,4vw,3rem) clamp(3.5rem,7vw,6rem)}
.start__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(2.5rem,5vw,5rem);align-items:start;
}
.start__intro .pagehead__title{font-size:clamp(2.125rem,4vw,3.25rem)}
.start__points{list-style:none;margin:2.5rem 0 0;padding:0;display:grid;gap:0}
.start__points li{
  padding:1.05rem 0;border-top:1px solid var(--line);
  font-size:.9375rem;color:var(--mute);line-height:1.55;
}
.start__points b{
  display:block;font-family:var(--font-display);font-weight:600;font-size:1rem;
  color:var(--fg);margin-bottom:.2rem;
}

.form{padding:clamp(1.75rem,3vw,2.5rem);background:var(--surface);border-radius:var(--r-lg)}
.form__row{margin-bottom:1.25rem}
.form__row label{
  display:block;margin-bottom:.45rem;
  font-size:.8125rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--fg);
}
.form__row label span{color:var(--mute)}
.form input,.form select,.form textarea{
  width:100%;padding:.9rem 1.1rem;border:0;border-radius:var(--r-sm);
  background:var(--bg);color:var(--fg);
  font:inherit;font-size:1rem;line-height:1.5;
  box-shadow:inset 0 0 0 1px var(--line);
  transition:box-shadow .2s var(--ease);
}
.form textarea{resize:vertical;min-height:9rem}
.form input:focus,.form select:focus,.form textarea:focus{
  outline:none;box-shadow:inset 0 0 0 2px var(--fg);
}
.form small{display:block;margin-top:.5rem;font-size:.8125rem;color:var(--mute)}
.form .btn{width:100%;justify-content:center;margin-top:.5rem}
.form__note{margin-top:.9rem;text-align:center;font-size:.8125rem;color:var(--mute)}
/* Netlify honeypot — a real field bots fill in and humans never see. */
.form__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form__sent{
  padding:1rem 1.15rem;margin-bottom:1.5rem;border-radius:var(--r-sm);
  background:var(--lime);color:var(--ink);font-weight:600;font-size:.9375rem;
}

/* ============================================================
   responsive
   ============================================================ */
@media (max-width:980px){
  .svc__head,.story__grid,.start__grid,.revpolicy__grid{grid-template-columns:minmax(0,1fr);gap:1.75rem}
  .svc__grid,.cat__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:860px){
  .crumbs{padding-top:calc(var(--nav-h) + .75rem)}
  .pagehead:first-child{padding-top:calc(var(--nav-h) + 1.5rem)}
  .filters{top:var(--nav-h)}
  .intake__list{grid-template-columns:minmax(0,1fr)}
  /* Editorial columns collapse to one stack, same as the base system. */
  .svc__head .sec__label,.svc__main,.svc__head .deliv{grid-column:1 / -1}
  .svc__head .deliv{margin-top:1.5rem}
}

@media (max-width:620px){
  .svc__grid,.cat__grid{grid-template-columns:minmax(0,1fr);gap:.75rem}
  .facts__grid{grid-template-columns:minmax(0,1fr)}
  .piece--board{grid-column:span 1}
  .faq__item summary{padding-right:2.25rem}
  .faq__item p{padding-right:0}
}

@media (prefers-reduced-motion:reduce){
  .svc__tile img,.piece img,.faq__item summary::after{transition:none}
  .svc__tile:hover img,.piece:hover img{transform:none}
}

/* Packages moved to editorial rows in styles.css (.pkrow). The old boxed
   three-column card block lived here and, loading after styles.css, was
   forcing the new rows back into columns. Deleted rather than overridden. */


/* ============================================================
   case studies
   Same tokens as everything else. The only genuinely new shapes
   are the index card (cover image + text) and the wide figure,
   which needs to break out of the reading column without
   breaking out of the grid.
   ============================================================ */
.case{padding-block:0 clamp(1.5rem,3vw,2.5rem)}

/* Guide covers are documents, not photographs — contain, never crop,
   or the cover loses the one thing it exists to show. */
.case__hero{
  margin:0;background:var(--surface);border:1px solid var(--card-line);
  border-radius:var(--r-lg);overflow:hidden;
}
.case__hero img{display:block;width:100%;height:auto}

.case__facts{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:0;margin:clamp(2rem,4vw,3rem) 0 0;
}
.case__facts>div{padding:1.25rem 1.25rem 1.25rem 0;border-top:1px solid var(--line)}
.case__facts dt{font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.case__facts dd{
  margin:.55rem 0 0;font-family:var(--font-display);font-weight:600;
  font-size:.9375rem;letter-spacing:-.01em;line-height:1.4;color:var(--fg);
}

/* Same reading bed as an article: columns 4–11 is ~68ch, and starting at
   column 4 puts the prose on the identical x as every other page. */
.case__body{
  max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter);
  padding-block:clamp(2rem,4vw,3rem);
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 var(--col-gap);
}
.case__body>*{grid-column:4 / 11}
.case__body p{margin-top:1.25rem;font-size:1.0625rem;line-height:1.75;color:var(--ink-70)}
.case__body h2{
  margin-top:2.75rem;font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.375rem,2.4vw,1.875rem);letter-spacing:-.022em;line-height:1.2;
}
.case__body a{color:var(--fg);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.case__body a:hover{color:var(--mute)}

/* The honesty note is a first-class part of the page, so it is styled as
   one rather than tucked into small print at the bottom. */
.case__note{
  margin-top:0;padding:var(--card-pad);
  background:var(--surface);border:1px solid var(--card-line);border-radius:var(--r-lg);
  font-size:.9375rem;line-height:1.65;color:var(--mute);
}
.case__note b{display:block;margin-bottom:.4rem;color:var(--fg)}
.case__note a{color:var(--fg)}
.case__note--index{max-width:74ch;margin-top:clamp(2rem,4vw,3rem)}

.case__lede{font-size:var(--t-lead)!important;line-height:1.6!important;color:var(--fg)!important}

/* Wider than the prose, narrower than the page: the figure has to read as
   evidence for the paragraph above it, not as a section break. */
.case__fig{grid-column:2 / 12;margin:clamp(1.75rem,3vw,2.5rem) 0 0}
.case__fig img{
  display:block;width:100%;height:auto;border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--card-line);
}
.case__fig figcaption{margin-top:.8rem;font-size:.8125rem;line-height:1.5;color:var(--mute)}

.case__back{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:clamp(1.75rem,3vw,2.5rem)}

/* ---------- index cards ---------- */
.cgrid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem,1.8vw,1.5rem);align-items:stretch;
  margin-top:clamp(2rem,4vw,3rem);
}
.ccard{
  background:var(--surface);border:1px solid var(--card-line);border-radius:var(--r-lg);
  overflow:hidden;
  transition:box-shadow .25s var(--ease),transform .25s var(--ease);
}
.ccard:hover{box-shadow:var(--shadow-float);transform:translateY(-3px)}
.ccard>a{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit}
.ccard__shot{display:block;background:var(--surface-2);border-bottom:1px solid var(--card-line)}
.ccard__shot img{
  display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:contain;
}
.ccard__body{display:flex;flex-direction:column;flex:1;padding:var(--card-pad)}
.ccard__meta{
  font-size:.6875rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);
}
.ccard h2{
  margin-top:.85rem;font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.125rem,1.7vw,1.3125rem);letter-spacing:-.018em;line-height:1.25;
}
.ccard p{margin-top:.7rem;font-size:.9375rem;line-height:1.6;color:var(--mute)}
.ccard__go{
  margin-top:auto;padding-top:1.25rem;
  font-size:.8125rem;font-weight:600;color:var(--fg);
}

@media (max-width:980px){
  .cgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .case__facts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .case__body>*,.case__fig{grid-column:1 / -1}
}
@media (max-width:620px){
  .cgrid{grid-template-columns:minmax(0,1fr)}
  .case__facts{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .ccard{transition:none}
  .ccard:hover{transform:none}
}

/* ============================================================
   blog
   ============================================================ */
.bloglist{padding-block:clamp(2.5rem,5vw,4rem)}
.pgrid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem,1.8vw,1.5rem);align-items:stretch;
}
.pcard{
  background:var(--surface);border-radius:var(--r-lg);
  transition:box-shadow .25s var(--ease),transform .25s var(--ease);
}
.pcard:hover{box-shadow:var(--shadow-float);transform:translateY(-3px)}
.pcard>a{
  display:flex;flex-direction:column;height:100%;
  padding:clamp(1.35rem,2vw,1.75rem);text-decoration:none;color:inherit;
}
.pcard__cat{
  font-size:.6875rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mute);
}
.pcard h2,.pcard h3{
  margin-top:.85rem;font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.125rem,1.7vw,1.3125rem);letter-spacing:-.018em;line-height:1.25;
}
.pcard p{margin-top:.7rem;font-size:.9375rem;line-height:1.6;color:var(--mute)}
.pcard__meta{
  margin-top:auto;padding-top:1.25rem;
  font-size:.8125rem;color:var(--mute);
}
/* The blog index reuses the work grid's filter JS, which drives `hidden`.
   It must not inherit the work tile's fixed aspect-ratio or zoom cursor. */
.pcard.piece{aspect-ratio:auto;overflow:visible}
.pcard.piece:hover img{transform:none}

/* ---------- article ---------- */
.post__head{padding-block:clamp(1.5rem,3vw,2.5rem) clamp(1.75rem,3vw,2.5rem)}
.post__head .eyebrow a{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
.post__head .eyebrow a:hover{border-bottom-color:currentColor}
.post__title{
  margin-top:1rem;font-family:var(--font-display);font-weight:600;
  font-size:clamp(2rem,4.4vw,3.5rem);letter-spacing:-.035em;line-height:1.05;
  max-width:20ch;
}
.post__standfirst{
  margin-top:1.5rem;max-width:60ch;
  font-size:clamp(1.0625rem,1.5vw,1.25rem);line-height:1.6;color:var(--ink-70);
}
.post__meta{margin-top:1.5rem;font-size:.875rem;color:var(--mute)}

/* On the grid rather than a centred measure. A centred column lands a few
   pixels off the site's column-4 edge, and near-alignment reads worse than
   deliberate difference. Columns 4–11 give ~68ch, which is the readable limit. */
.post__body{
  max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter);
  padding-bottom:clamp(2rem,4vw,3rem);
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 var(--col-gap);
}
.post__body>*{grid-column:4 / 11}
.post__body p{margin-top:1.25rem;font-size:1.0625rem;line-height:1.75;color:var(--ink-70)}
.post__body h2{
  margin-top:2.75rem;font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.375rem,2.4vw,1.875rem);letter-spacing:-.022em;line-height:1.2;
}
.post__body h3{
  margin-top:2rem;font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.0625rem,1.7vw,1.25rem);letter-spacing:-.012em;
}
.post__body ul,.post__body ol{margin-top:1.25rem;padding-left:1.35rem}
.post__body li{margin-top:.6rem;font-size:1.0625rem;line-height:1.7;color:var(--ink-70)}
.post__body li::marker{color:var(--mute)}
.post__body strong{color:var(--fg);font-weight:600}
.post__body a{color:var(--fg);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.post__body a:hover{color:var(--mute)}

.post__foot{
  max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter);
  padding-bottom:clamp(2.5rem,5vw,4rem);
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--col-gap);
}
.post__cta{grid-column:4 / 11}
.post__cta{padding:clamp(1.75rem,3vw,2.5rem);background:var(--slab);border-radius:var(--r-lg)}
.post__cta h2{
  font-family:var(--font-display);font-weight:700;color:var(--paper);
  font-size:clamp(1.25rem,2vw,1.5rem);letter-spacing:-.02em;
}
.post__cta p{margin-top:.85rem;color:var(--paper-70);font-size:1rem;line-height:1.65}
.post__ctabtns{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}

.related{padding-block:var(--section-y);border-top:1px solid var(--line)}
.related .h2{font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:clamp(1.5rem,3vw,2.25rem)}

@media (max-width:980px){ .pgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .pgrid{grid-template-columns:minmax(0,1fr)} }
@media (max-width:860px){
  .post__body>*,.post__cta{grid-column:1 / -1}
}


/* ============================================================
   faq page
   ============================================================
   /faq/ groups its questions, but it is still ONE .faq section —
   six of them would repeat the section padding and the border
   above it six times and turn the page into a stack of gaps.
   So the groups are plain blocks inside it and only need spacing
   and a heading size; .faq__list already draws its own top rule. */
.faq__group+.faq__group{margin-top:clamp(2.5rem,5vw,4rem)}
.faq__group>h2{
  font-family:var(--font-display);font-weight:600;
  font-size:var(--t-h3);letter-spacing:-.015em;line-height:1.25;
  scroll-margin-top:calc(var(--nav-h) + 1rem);
}
/* The jump list is reused from /services/; after the last group it is a
   related-links row rather than a nav, so it needs to clear the rule above. */
.faq__group+.svc__jump{margin-top:clamp(2.5rem,5vw,4rem)}

/* ============================================================
   compare page
   ============================================================
   A real <table>: the tie between a row label and its three answers
   is precisely what a table communicates to a screen reader, and a
   grid of divs would have to fake it with ARIA. Same tokens as every
   other panel — --surface fill, --card-line hairline, --r-lg.

   It scrolls sideways under ~820px rather than collapsing into three
   stacked lists, because a comparison you cannot see side by side has
   stopped being a comparison. The row headers stay put while it moves. */
.cmp{padding-block:var(--section-y);border-top:1px solid var(--line)}
.cmp .lead{margin-top:1.25rem}
.cmp__scroll{
  margin-top:clamp(2rem,4vw,3rem);overflow-x:auto;
  background:var(--surface);border:1px solid var(--card-line);border-radius:var(--r-lg);
}
.cmp__table{width:100%;min-width:820px;border-collapse:collapse;text-align:left}
.cmp__table th,.cmp__table td{
  padding:clamp(.9rem,1.5vw,1.25rem);vertical-align:top;
  border-bottom:1px solid var(--line);
}
.cmp__table tbody tr:last-child th,.cmp__table tbody tr:last-child td{border-bottom:0}
/* The row label has to survive the sideways scroll — the header block above
   promises this and the rule was missing, so scrolling right left every row
   unlabelled. Opaque fill, or the cells slide underneath it. */
.cmp__table tbody th{
  position:sticky;left:0;z-index:1;
  background:var(--surface);
  box-shadow:1px 0 0 var(--line);
}
.cmp__table thead th{
  font-family:var(--font-display);font-weight:600;color:var(--fg);
  font-size:clamp(1rem,1.5vw,1.1875rem);letter-spacing:-.015em;line-height:1.25;
  padding-top:clamp(1.1rem,2vw,1.5rem);
}
.cmp__table thead th span{
  display:block;margin-top:.45rem;
  font-family:var(--font-body);font-weight:400;font-size:.8125rem;line-height:1.45;
  letter-spacing:0;color:var(--mute);
}
.cmp__table tbody th{
  width:17%;font-family:var(--font-display);font-weight:600;
  font-size:.9375rem;letter-spacing:-.005em;line-height:1.35;color:var(--fg);
}
.cmp__table td{font-size:.9375rem;line-height:1.6;color:var(--mute)}
/* Our column is marked by FILL, never by putting lime on text — the same
   contrast rule the rest of the site follows, so it reads identically. */
.cmp__table .is-us{background:var(--surface-2)}
.cmp__note{margin-top:1.25rem;max-width:70ch;font-size:.8125rem;line-height:1.6;color:var(--mute)}

/* Bulleted lists inside the choose-one-of-three cards. .why__item styles a
   paragraph, not a list, so this is the one gap the existing rules leave. */
.why__item .deliv{margin-top:1rem}

@media (max-width:620px){
  .cmp__table th,.cmp__table td{padding:.85rem .9rem}
}