/*
 * CHINAPORT , internal page system.
 *
 * Editorial layout built from the homepage vocabulary: dark framing, sharp
 * corners, mono micro-labels, hairline rules, red as a precise accent.
 *
 * Composition rule: backgrounds run edge to edge, content sits on a measured
 * grid. Section headers use an asymmetric label/heading split so a short block
 * of copy still occupies the page instead of drifting to one side.
 *
 * Motion is opt-in from script (html.has-motion) and always has a failsafe, so
 * content is never left hidden if the observer never runs.
 *
 * Tokens come from :root in main.css.
 */

/* ============================================================
   frame
   ============================================================ */

.cp-page{--pad-x:1.25rem;--rail:clamp(6rem,14vw,13rem);--gap:clamp(1.5rem,3vw,3rem)}
@media (min-width:640px){.cp-page{--pad-x:2.5rem}}
@media (min-width:1280px){.cp-page{--pad-x:4rem}}

.cp-page :where(h1,h2,h3,h4){letter-spacing:var(--track-tight);text-wrap:balance}
.cp-page :where(p){text-wrap:pretty}

.section{position:relative;padding-block:clamp(4rem,8vw,8rem)}
.section>.container{width:min(100% - (var(--pad-x) * 2),var(--container));max-width:none;margin-inline:auto;padding-inline:0}
.section-sand{background:var(--sand)}
.section-dark{background:var(--navy-deep);color:#fff}
.section-dark :where(h2,h3,h4){color:#fff}
.section-dark p{color:rgba(255,255,255,.65)}

/* ============================================================
   editorial section header
   ============================================================ */

.sec-head{display:grid;gap:var(--gap);margin-block-end:clamp(2.5rem,5vw,4.5rem)}
@media (min-width:900px){.sec-head{grid-template-columns:var(--rail) minmax(0,1fr);align-items:start}}
.sec-label{display:flex;align-items:baseline;gap:.75rem;font-family:var(--mono);font-size:0.75rem;font-weight:700;letter-spacing:.24em;color:var(--red)}
.sec-label::before{content:"";flex:none;width:1.75rem;height:1px;background:currentColor;transform:translateY(-.28em)}
.sec-label:empty::before{width:3rem}
.sec-head h2,.sec-head h3{margin:0;font-size:var(--display-3);font-weight:900;line-height:.92;letter-spacing:var(--track-tighter)}
/* Centred variant: one full-width column instead of the rail plus text pair. */
.sec-head-center{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
@media (min-width:900px){.sec-head-center{grid-template-columns:minmax(0,1fr)}}
.sec-head-center>div{width:100%}
.sec-lead{max-width:56ch;margin-block:1.25rem 0;font-size:1.05rem;line-height:1.7;color:var(--muted)}
.section-dark .sec-lead{color:rgba(255,255,255,.6)}

/* Hooks kept for templates that still call the older heading component. */
.section-heading{margin-block-end:clamp(2.5rem,5vw,4.5rem)}
.section-heading h2,.section-heading h3{margin:0;font-size:var(--display-3);font-weight:900;line-height:.92;letter-spacing:var(--track-tighter)}
.section-lead{max-width:56ch;margin-block:1.25rem 0;font-size:1.05rem;line-height:1.7;color:var(--muted)}
.section-dark .section-lead{color:rgba(255,255,255,.6)}
.section-heading-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.5rem}
.section-heading-row>a{font-family:var(--mono);font-size:0.75rem;font-weight:700;letter-spacing:.2em;color:var(--red);white-space:nowrap}

.button-outline{border-color:var(--navy);color:var(--navy);background:transparent}
.button-outline:hover{background:var(--navy);color:var(--white)}
.button{border-radius:0;letter-spacing:.04em;font-weight:800}
.disclaimer{margin-block-start:1.25rem;font-family:var(--mono);font-size:0.75rem;line-height:1.5;letter-spacing:.06em;color:var(--muted)}
.section-dark .disclaimer{color:rgba(255,255,255,.4)}

/* ============================================================
   hero
   ============================================================ */

.page-hero{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(3.5rem,6vw,6rem) clamp(3rem,5vw,4.5rem);background:var(--navy);color:#fff}
.page-hero>.container{position:relative;width:min(100% - (var(--pad-x) * 2),var(--container));margin-inline:auto;padding-inline:0}
.page-hero::before{content:"";position:absolute;z-index:-2;inset:0;background:radial-gradient(120% 90% at 85% 0%,rgba(122,106,85,.55),transparent 55%),linear-gradient(to top,var(--navy-deep),transparent 65%)}
.page-hero::after{content:"";position:absolute;z-index:-1;inset:0;opacity:.1;background:repeating-linear-gradient(90deg,rgba(255,255,255,.7) 0,rgba(255,255,255,.7) 1px,transparent 1px,transparent 7vw)}
.page-hero-ghost{position:absolute;z-index:-1;inset-inline-start:1vw;bottom:-3vw;white-space:nowrap;user-select:none;pointer-events:none;font-size:clamp(6rem,14vw,15rem);font-weight:900;line-height:1;letter-spacing:var(--track-tighter);color:rgba(255,255,255,.04)}

.page-hero-grid{display:block}
.page-hero-eyebrow:empty{display:none}

.page-hero h1{max-width:24ch;margin:.9rem 0 0;color:#fff;font-size:var(--display-2);font-weight:900;line-height:.86;letter-spacing:var(--track-tighter)}
.page-hero-eyebrow{display:block;margin:0;font-family:var(--mono);font-size:0.75rem;font-weight:700;letter-spacing:.24em;color:rgba(255,255,255,.75)}
.page-hero-lead{max-width:52ch;margin-block:1.5rem 0;font-size:clamp(1rem,1.3vw,1.2rem);line-height:1.7;color:rgba(255,255,255,.72)}
.page-hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-block-start:2rem}

.page-hero-actions .button-primary{background:#fff;color:var(--ink);transition:background-color .3s var(--ease),color .3s var(--ease)}
.page-hero-actions .button-primary:hover,.page-hero-actions .button-primary:focus-visible{background:var(--red);color:#fff;transform:none}
.page-hero-actions .button-outline{border-color:var(--line-soft);color:#fff}
.page-hero-actions .button-outline:hover{border-color:var(--red);background:transparent;color:var(--red);transform:none}

/* ---------- breadcrumbs ---------- */

.breadcrumbs{margin-block-end:1.5rem}
.breadcrumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:0;padding:0;list-style:none;font-family:var(--mono);font-size:0.75rem;font-weight:700;letter-spacing:.16em;color:rgba(255,255,255,.7)}
.breadcrumbs li+li::before{content:"/";margin-inline-end:.5rem;color:var(--red)}
.breadcrumbs a:hover{color:#fff}
.breadcrumbs [aria-current="page"]{color:rgba(255,255,255,.8)}

/* ============================================================
   marquee divider
   ============================================================ */

.marquee-break{position:relative;overflow:hidden;background:var(--navy-deep)}
.marquee-break-inner{position:relative;padding-block:.7rem;background:var(--red);transform:skewY(-1.4deg)}
.marquee-track{display:flex;width:max-content;gap:2.5rem;white-space:nowrap;animation:page-marquee 46s linear infinite}
.marquee-track span{display:flex;align-items:center;gap:2.5rem;font-size:clamp(.9rem,1.4vw,1.25rem);font-weight:900;letter-spacing:-.01em;color:#fff}
.marquee-track i{color:rgba(255,255,255,.5);font-style:normal}
@keyframes page-marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(25%,0,0)}}

/* ============================================================
   article layout
   ============================================================ */

.page-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2.5rem,4vw,4rem)}
@media (min-width:1100px){.page-layout{grid-template-columns:minmax(0,1fr) minmax(0,320px)}}
@media (min-width:1280px){.page-layout.has-toc{grid-template-columns:minmax(0,150px) minmax(0,1fr) minmax(0,320px);column-gap:2rem}}
/* The rail should not be paid for out of the article's measure: on wide
   screens the layout widens to absorb it instead. */
@media (min-width:1440px){.section>.container.page-layout.has-toc{width:min(100% - 3rem,1440px)}}

/* Contents rail. Desktop only , on narrow screens the article speaks for
   itself and the rail would cost more space than it returns. */
.page-toc{display:none}
@media (min-width:1280px){
  .page-toc{display:block;position:sticky;inset-block-start:calc(var(--header-height) + 1.5rem);align-self:start}
  /* The admin bar pushes the sticky header down; the rail has to follow or its
     title ends up underneath it. */
  .admin-bar .page-toc{inset-block-start:calc(var(--header-height) + 32px + 1.5rem)}
  .page-toc .cp-toc{margin:0;padding:0 0 0 .25rem;border:0;border-inline-start:2px solid var(--red);padding-inline-start:1rem;background:transparent}
  .page-toc .cp-toc ol{grid-template-columns:minmax(0,1fr);gap:0}
  .page-toc .cp-toc a{gap:.45rem;padding-block:.45rem;font-size:.78rem;line-height:1.3}
  .page-toc .cp-toc li+li{border-block-start:1px solid var(--line)}
  .page-toc .cp-toc-index{font-size:0.75rem}
}
.page-content{min-width:0}
.page-content>section+section{margin-block-start:clamp(3.5rem,6vw,5.5rem)}
.page-content h2{margin:0 0 clamp(1.75rem,3vw,2.5rem);font-size:clamp(1.6rem,3vw,2.5rem);font-weight:900;line-height:.98;letter-spacing:var(--track-tighter)}

.page-sidebar{display:grid;gap:1px;align-content:start;align-self:start;background:var(--line)}
@media (min-width:1100px){.page-sidebar{position:sticky;inset-block-start:calc(var(--header-height) + 1.5rem)}}
.sidebar-card{position:relative;padding:1.75rem;background:var(--white)}
.sidebar-card-form::before{content:"";position:absolute;inset-inline-start:0;top:0;width:2.5rem;height:2.5rem;background:var(--red);clip-path:polygon(0 0,100% 0,0 100%);pointer-events:none}
/* Keep headings clear of the corner marker. */
.sidebar-card-form>*{position:relative}
.sidebar-card-form 
/* ============================================================
   related services , side by side, not stacked
   ============================================================ */

.related-section{background:var(--navy-deep);color:#fff}
.related-section .sec-head h2,.related-section .sec-head h3{color:#fff}
.related-grid{display:grid;gap:1px;margin:0;padding:0;list-style:none;background:var(--line-dark)}
@media (min-width:760px){.related-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}}
.related-card{position:relative;isolation:isolate;display:flex;padding:0;background:var(--navy-deep)}
.related-card::before{content:"";position:absolute;z-index:-1;inset:0;transform:scaleY(0);transform-origin:bottom;background:var(--red);transition:transform .5s var(--ease)}
.related-card:hover::before{transform:scaleY(1)}
.related-card-inner{display:flex;flex-direction:column;gap:.6rem;width:100%;padding:clamp(1.5rem,2.5vw,2rem);transition:transform .5s var(--ease)}
.related-card:hover .related-card-inner{transform:translateY(-.25rem)}
.related-card h2,.related-card h3{margin:0;font-size:clamp(1.15rem,2vw,1.5rem);font-weight:900;line-height:1.15;letter-spacing:var(--track-tight);color:#fff}
.related-card p{margin:0;font-size:.92rem;line-height:1.6;color:rgba(255,255,255,.55);transition:color .4s}
.related-card:hover p{color:rgba(255,255,255,.9)}
.related-card .card-link{margin-block-start:auto;padding-block-start:1rem;font-family:var(--mono);font-size:0.75rem;font-weight:700;letter-spacing:.18em;color:rgba(255,255,255,.55);transition:color .4s}
.related-card:hover .card-link{color:#fff}
.card-link{font-family:var(--mono);font-size:0.75rem;font-weight:700;letter-spacing:.18em;color:var(--red)}
.related-links .container{display:flex;flex-wrap:wrap;gap:.85rem}

/* ============================================================
   closing band
   ============================================================ */

.cta-band{position:relative;overflow:hidden;padding-block:clamp(4rem,7vw,6.5rem);background:var(--red);color:#fff}
.cta-band::before{content:"";position:absolute;inset:0;opacity:.09;pointer-events:none;background:repeating-linear-gradient(45deg,#fff 0 1px,transparent 1px 15px)}
.cta-band>.container{position:relative;width:min(100% - (var(--pad-x) * 2),var(--container));margin-inline:auto;padding-inline:0}
.cta-band-inner{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:2.5rem}
.cta-band h2{margin:0;max-width:16ch;color:#fff;font-size:clamp(2rem,5.5vw,4.25rem);font-weight:900;line-height:.88;letter-spacing:var(--track-tighter)}
.cta-band p{max-width:44ch;margin-block:1.25rem 0;line-height:1.6;color:#fff}
.cta-band .button-primary{background:#fff;color:var(--navy)}
.cta-band .button-primary:hover{background:var(--navy);color:#fff;transform:translateY(-3px)}

/* ============================================================
   catalog
   ============================================================ */

.filter-chips{display:flex;flex-wrap:wrap;gap:0;margin-block-end:clamp(2rem,4vw,3rem);border-block:1px solid var(--line)}
.chip{padding:.9rem 1.2rem;border:0;border-inline-start:1px solid var(--line);background:transparent;color:var(--navy);font-family:var(--mono);font-size:0.75rem;font-weight:700;letter-spacing:.14em;cursor:pointer;transition:background-color .3s,color .3s}
.chip:first-child{border-inline-start:0}
.chip:hover{background:var(--white)}
.chip.is-active{background:var(--navy-deep);color:#fff}

.catalog-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:1px;margin:0;padding:0;list-style:none;background:var(--line)}
.catalog-card{position:relative;display:flex;flex-direction:column;overflow:hidden;background:var(--sand)}
.catalog-card[hidden]{display:none}
.catalog-card-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--navy-deep)}
.catalog-card-media img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) sepia(.2) hue-rotate(165deg) saturate(1.35);transition:filter .6s var(--ease),transform .8s var(--ease)}
.catalog-card-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(23,19,16,.75),rgba(23,19,16,.3));transition:opacity .6s var(--ease)}
.catalog-card:hover .catalog-card-media img{filter:none;transform:scale(1.05)}
.catalog-card:hover .catalog-card-media::after{opacity:.3}
.catalog-card-body{display:flex;flex:1;flex-direction:column;align-items:flex-start;gap:1.1rem;padding:1.5rem}
.catalog-card-title{margin:0;font-size:1.2rem;font-weight:900;line-height:1.25;letter-spacing:var(--track-tight)}
.catalog-card-title a:hover{color:var(--red)}
.catalog-quote{margin-block-start:auto;min-height:44px;padding:.65rem 1.15rem;font-family:var(--mono);font-size:0.75rem;letter-spacing:.14em}

/* ---------- modal ---------- */

/* min-height:auto on a grid item beats max-height, so the panel grew past the
   viewport and took the close button off screen with it. */

/* ============================================================
   media strips
   ============================================================ */

/* In-content figure. Kept inside the reading measure so the image supports
   the text it sits next to instead of occupying the fold. */
.content-figure{margin:clamp(1.75rem,3vw,2.5rem) 0;padding:0}
/* Product intro: one band where text and image sit side by side. Stacked, the
   full-width image above a 66ch column read as two unrelated blocks. */
.product-intro{display:grid;gap:clamp(1.75rem,4vw,3rem);align-items:center}
@media (min-width:900px){.product-intro{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}}
.product-intro .prose{max-width:none}
.product-intro .content-figure{margin:0}
/* The duotone is a brand device for mood shots; on a product page it hides the
   product, which is the one thing the visitor came to see. */
.product-intro .content-figure img{aspect-ratio:4/3;filter:none}
.content-figure picture{display:block;position:relative;overflow:hidden;background:var(--navy-deep)}
.content-figure img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;filter:grayscale(1) sepia(.2) hue-rotate(165deg) saturate(1.35);transition:filter .6s var(--ease)}
.content-figure:hover img{filter:none}
.content-figure figcaption{margin-block-start:.75rem;padding-inline-start:.75rem;border-inline-start:2px solid var(--red);font-size:.85rem;line-height:1.6;color:var(--muted)}

.gallery-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:0;padding:0;list-style:none;background:var(--line-dark)}
@media (min-width:640px){.gallery-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
.gallery-grid li{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--navy-deep)}
.gallery-grid picture{display:block;height:100%}
.gallery-grid img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) sepia(.2) hue-rotate(165deg) saturate(1.35);transition:filter .6s var(--ease),transform .8s var(--ease)}
.gallery-grid li::after{content:"";position:absolute;inset:0;background:rgba(23,19,16,.5);transition:opacity .6s var(--ease)}
.gallery-grid li:hover img{filter:none;transform:scale(1.05)}
.gallery-grid li:hover::after{opacity:0}

/* ============================================================
   guides
   ============================================================ */

.article-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:1px;margin:0;padding:0;list-style:none;background:var(--line)}
.article-card{display:flex;flex-direction:column;overflow:hidden;background:var(--white);transition:background-color .4s}
.article-card:hover{background:var(--sand)}
.article-card-media{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--navy-deep)}
.article-card-media img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) sepia(.2) hue-rotate(165deg) saturate(1.35);transition:filter .6s var(--ease),transform .8s var(--ease)}
.article-card-media::after{content:"";position:absolute;inset:0;background:rgba(23,19,16,.5);transition:opacity .6s var(--ease)}
.article-card:hover .article-card-media img{filter:none;transform:scale(1.04)}
.article-card:hover .article-card-media::after{opacity:.15}
.article-card-media picture{display:block;height:100%}
.article-card-body{display:flex;flex:1;flex-direction:column;padding:1.6rem}
.article-card-title{margin-block-end:.75rem;font-size:1.25rem;font-weight:900;line-height:1.2;letter-spacing:var(--track-tight)}
.article-card-title a:hover{color:var(--red)}
.article-card-body p{margin:0;line-height:1.65;color:var(--muted)}
.article-card .card-link{margin-block-start:auto;padding-block-start:1.25rem}

.tldr{position:relative;padding:1.9rem;border-inline-start:3px solid var(--red);background:var(--sand)}
.section-sand .tldr{background:var(--white)}
.tldr h2{margin:0 0 .7rem;font-family:var(--mono);font-size:0.75rem;font-weight:700;letter-spacing:.22em;color:var(--red)}
.tldr p{margin:0;font-size:1.1rem;font-weight:800;line-height:1.6;color:var(--navy)}

.prose{max-width:72ch;margin-inline:auto;line-height:1.85;color:var(--ink)}
.prose p+p{margin-block-start:1.4rem}
.prose a{color:var(--red);text-decoration:underline;text-underline-offset:4px}
.section-dark .prose{color:rgba(255,255,255,.7)}

.author-box{margin-block-start:clamp(3rem,5vw,4.5rem);padding-block-start:2rem;border-block-start:1px solid var(--line)}
.author-box h2{margin:0 0 .8rem;font-family:var(--mono);font-size:0.75rem;font-weight:700;letter-spacing:.22em;color:var(--muted)}
.author-box p{margin:0;font-weight:900;letter-spacing:var(--track-tight);color:var(--navy)}
.author-box p+p{margin-block-start:.5rem;font-weight:400;letter-spacing:normal;line-height:1.7;color:var(--muted)}

.pagination{display:flex;justify-content:center;margin-block-start:3.5rem}
.pagination .nav-links{display:flex;flex-wrap:wrap;gap:1px;background:var(--line)}
.pagination a,.pagination span{display:grid;place-items:center;min-width:48px;min-height:48px;padding:0 .9rem;background:var(--white);font-family:var(--mono);font-size:.8rem;font-weight:700}
.pagination a:hover{background:var(--sand);color:var(--red)}
.pagination .current{background:var(--navy-deep);color:#fff}

/* ============================================================
   contact
   ============================================================ */

.contact-layout{display:grid;align-items:start;gap:clamp(2.5rem,5vw,4.5rem)}
@media (min-width:1000px){.contact-layout{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}}
.contact-layout>*{min-width:0}
.contact-details h2{margin:0 0 1.9rem;font-family:var(--mono);font-size:0.75rem;font-weight:700;letter-spacing:.22em;color:var(--muted)}
.contact-list-block{list-style:none;margin:0;padding:0;border-block-start:1px solid var(--line)}
.contact-list-block li{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding-block:1.25rem;border-block-end:1px solid var(--line)}
.contact-list-block span{font-family:var(--mono);font-size:0.75rem;font-weight:700;letter-spacing:.18em;color:var(--muted)}
.contact-list-block a,.contact-list-block strong{font-size:1.15rem;font-weight:900;letter-spacing:var(--track-tight);color:var(--navy);transition:color .3s}
.contact-list-block a:hover{color:var(--red)}
.map-placeholder{display:grid;place-items:center;min-height:280px;margin-block-start:2.5rem;border:1px solid var(--line);background:var(--sand);font-family:var(--mono);font-size:0.75rem;font-weight:700;letter-spacing:.2em;color:var(--muted)}

/* ============================================================
   scroll motion
   ============================================================
   Applies only once script confirms it can drive it. Without .has-motion the
   page renders fully visible, so a failed observer can never hide content.
   ============================================================ */

.has-motion [data-anim]{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--anim-delay,0ms)}
.has-motion [data-anim="mask"]{transform:none;clip-path:inset(0 0 105% 0);transition:clip-path .9s var(--ease),opacity .5s linear}
.has-motion [data-anim].is-in{opacity:1;transform:none;clip-path:inset(0 0 -20% 0)}

.has-motion [data-anim-group]>*{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.has-motion [data-anim-group].is-in>*{opacity:1;transform:none}
.has-motion [data-anim-group].is-in>*:nth-child(1){transition-delay:0ms}
.has-motion [data-anim-group].is-in>*:nth-child(2){transition-delay:70ms}
.has-motion [data-anim-group].is-in>*:nth-child(3){transition-delay:140ms}
.has-motion [data-anim-group].is-in>*:nth-child(4){transition-delay:210ms}
.has-motion [data-anim-group].is-in>*:nth-child(5){transition-delay:280ms}
.has-motion [data-anim-group].is-in>*:nth-child(6){transition-delay:350ms}
.has-motion [data-anim-group].is-in>*:nth-child(n+7){transition-delay:420ms}

.has-motion [data-anim-rule]{transform:scaleX(0);transform-origin:right;transition:transform 1s var(--ease)}
.has-motion [data-anim-rule].is-in{transform:scaleX(1)}

/* ============================================================
   responsive
   ============================================================ */

@media (max-width:899px){
  .sec-head,.faq-layout{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:680px){
  .page-hero{padding-block:2.5rem 2.5rem}
  .page-hero h1{font-size:clamp(1.95rem,9vw,2.9rem)}
  .page-hero-actions{display:grid}
  .page-hero-actions .button{justify-content:center}
  .cta-band-inner{display:block}
  .cta-band .button{margin-block-start:2rem}
  .sidebar-contact{grid-template-columns:1fr}
  .step-list li{grid-template-columns:3rem minmax(0,1fr);gap:1rem}
  .step-list::before{inset-inline-start:calc(1.5rem - 1px)}
  .step-number{width:2rem;height:2rem}
  .form-grid{grid-template-columns:1fr}
  .contact-list-block li{display:grid;gap:.35rem}
  .related-links .container{display:grid}
  .feature-card{padding-inline:0!important;border-inline-start:0!important}
}

@media (prefers-reduced-motion:reduce){
  .marquee-track{animation:none;transform:none}
  .has-motion [data-anim],
  .has-motion [data-anim-group]>*,
  .has-motion [data-anim-rule]{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
}

/* Editor-authored body copy inside the article column. */
.prose{max-width:72ch;margin-inline:auto}
.prose h2{margin:clamp(2.25rem,4vw,3rem) 0 1rem;font-size:clamp(1.3rem,2.2vw,1.75rem);font-weight:900;line-height:1.15;letter-spacing:var(--track-tight)}
.prose h2:first-child{margin-block-start:0}
.prose h3{margin:1.75rem 0 .6rem;font-size:1.1rem;font-weight:900;letter-spacing:var(--track-tight)}
.prose ul{margin:1rem 0;padding-inline-start:0;list-style:none}
.prose li{position:relative;padding-inline-start:1.25rem;margin-block-end:.6rem;line-height:1.75}
.prose li::before{content:"";position:absolute;inset-inline-start:0;top:.75em;width:.5rem;height:1px;background:var(--red)}

/* ============================================================
   in-page contents , sits inside the article, not in the sidebar, so the
   lead form stays at the top of the sidebar and visible without scrolling.
   ============================================================ */

.cp-toc{margin-block:0 clamp(2rem,3.5vw,2.75rem);padding:1.4rem 1.6rem;border-inline-start:2px solid var(--red);background:var(--white)}
.cp-toc-title{display:block;margin-block-end:.9rem;font-family:var(--mono);font-size:0.75rem;font-weight:700;letter-spacing:.22em;color:var(--muted)}
.cp-toc ol{display:grid;gap:.1rem;list-style:none;margin:0;padding:0}
@media (min-width:760px){.cp-toc ol{grid-template-columns:1fr 1fr;column-gap:1.75rem}}
.cp-toc a{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.6rem;align-items:baseline;padding-block:.45rem;font-size:.92rem;font-weight:700;line-height:1.45;color:var(--navy);transition:color .25s}
.cp-toc a:hover,.cp-toc a.is-current{color:var(--red)}
.cp-toc-index{font-family:var(--mono);font-size:0.75rem;font-weight:700;letter-spacing:.08em;color:var(--red)}

/* ============================================================
   scroll affordance for wide tables
   Site rule: any table that overflows must say so. The hint sits above the
   table, level with the section heading, so it is read before the table is
   reached rather than discovered at its foot.
   It appears only when the table actually scrolls and retires once the end
   is reached. RTL: hidden content lies to the left, so the arrow points left.
   ============================================================ */

/* Outer box is not clipped, so the hint can sit above the scrolling area. */
.table-scroll{position:relative}
.table-wrap{position:relative}

.table-scroll-hint{position:absolute;z-index:2;inset-block-end:calc(100% + .6rem);inset-inline-end:0;display:none;align-items:center;gap:.45rem;padding:.35rem .65rem;background:var(--red);color:#fff;pointer-events:none}
.table-scroll-hint i{font-style:normal;font-size:.95rem;line-height:1;animation:table-nudge 1.4s ease-in-out infinite}
.table-scroll-hint b{font-family:var(--mono);font-size:0.75rem;font-weight:700;letter-spacing:.12em;white-space:nowrap}
.table-scroll.is-scrollable .table-scroll-hint{display:inline-flex}
.table-scroll.is-scroll-end .table-scroll-hint{opacity:0;transition:opacity .3s}

@keyframes table-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(-.3rem)}}

@media (prefers-reduced-motion:reduce){
  .table-scroll-hint i{animation:none}
}

/* ============================================================
   article furniture , byline, share rail, author box
   ============================================================ */

.article-byline{display:flex;align-items:center;gap:.9rem;margin-block-end:clamp(1.75rem,3vw,2.5rem);padding-block-end:1.25rem;border-block-end:1px solid var(--line)}
.article-byline-photo{flex:none;width:44px;height:44px;object-fit:cover;border-radius:50%}
.article-byline-text{min-width:0}
.article-byline-name{margin:0;font-size:.95rem;line-height:1.4}
.article-byline-name span{color:var(--muted)}
.article-byline-name b{font-weight:800;color:var(--navy)}
.article-byline-name i{font-style:normal;color:var(--muted)}
.article-byline-name i::before{content:"·";margin-inline:.4rem;color:var(--red)}
.article-byline-dates{display:flex;flex-wrap:wrap;gap:.35rem .9rem;margin:.35rem 0 0;font-family:var(--mono);font-size:0.75rem;letter-spacing:.06em;color:var(--muted)}
.article-byline-dates span+span::before{content:"·";margin-inline-end:.9rem;color:var(--line)}
.article-byline-dates a{color:var(--red);font-weight:700}

/* Share rail. Sits under the contents list, so it follows the reader down. */

/* On narrow screens the rail is hidden, so the buttons ride with the article. */
@media (min-width:1280px){.share-inline{display:none}}

.author-box{display:grid;gap:1.25rem;margin-block-start:clamp(2.5rem,5vw,3.5rem);padding:clamp(1.5rem,3vw,2rem);background:var(--white);border-inline-start:3px solid var(--red)}
@media (min-width:640px){.author-box{grid-template-columns:auto minmax(0,1fr);align-items:start}}
.author-box-photo{width:96px;height:96px;object-fit:cover;border-radius:50%}
.author-box-label{display:block;margin-block-end:.4rem;font-family:var(--mono);font-size:0.75rem;font-weight:700;letter-spacing:.22em;color:var(--muted)}
.author-box-name{margin:0;font-size:1.25rem;font-weight:900;letter-spacing:var(--track-tight)}
.author-box-role{margin:.3rem 0 0;font-size:.9rem;font-weight:700;color:var(--red)}
.author-box-bio{margin:.75rem 0 0;line-height:1.7;color:var(--muted)}
.author-box-link{display:inline-block;margin-block-start:.85rem;font-family:var(--mono);font-size:0.75rem;font-weight:700;letter-spacing:.12em;color:var(--navy);border-block-end:1px solid var(--red)}

/* Outbound sources , deliberately plain, so they read as citation not promo. */
.sources{margin-block-start:clamp(2.5rem,5vw,3.5rem);padding:clamp(1.25rem,2.5vw,1.75rem);background:var(--white);border:1px solid var(--line)}
.sources h2{margin:0 0 1rem;font-family:var(--mono);font-size:0.75rem;font-weight:700;letter-spacing:.22em;color:var(--muted)}
.sources ol{display:grid;gap:.7rem;margin:0;padding:0;list-style:none;counter-reset:src}
.sources li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.65rem;align-items:baseline;font-size:.92rem;line-height:1.5}
.sources li::before{counter-increment:src;content:counter(src,decimal-leading-zero);font-family:var(--mono);font-size:0.75rem;font-weight:700;color:var(--red)}
.sources a{font-weight:700;color:var(--navy);border-block-end:1px solid var(--line);transition:color .25s,border-color .25s}
.sources a:hover{color:var(--red);border-color:var(--red)}
.sources-publisher{display:block;grid-column:2;font-family:var(--mono);font-size:0.75rem;letter-spacing:.06em;color:var(--muted)}
.article-byline-dates .is-reviewed{color:var(--navy);font-weight:700}

/* Inline citation: a source link that sits inside a sentence, marked so the
   reader can tell it leaves the site without it looking like an ad. */
.prose a[rel~="noopener"][target="_blank"]{border-block-end:1px solid var(--red);font-weight:700;color:var(--navy)}
.prose a[rel~="noopener"][target="_blank"]::after{content:"↗";margin-inline-start:.2em;font-size:.72em;color:var(--red);vertical-align:.25em}
.prose a[rel~="noopener"][target="_blank"]:hover{color:var(--red)}

/* An editor table sits inside .prose, which has its own rhythm. */
.prose .table-scroll{margin-block:clamp(1.75rem,3vw,2.5rem)}
.prose .price-table{min-width:520px}
.prose .price-table thead th{white-space:nowrap}

/* Whole-tile click target. The title keeps the link so the accessible name and
   the tab stop stay where they belong; the pseudo-element does the reaching. */
.article-card{position:relative}
.article-card-title a::after{content:"";position:absolute;inset:0;z-index:1}
.article-card:has(a:focus-visible){outline:2px solid var(--red);outline-offset:3px}
.article-card-title a:focus-visible{outline:none}
.article-card .card-link{margin-block-start:auto;font-family:var(--mono);font-size:0.75rem;font-weight:700;letter-spacing:.2em;color:var(--red)}
.article-card:hover .card-link{color:var(--navy)}
/* The image tint sits over the stretched link's area; it must not eat clicks. */
.article-card-media,.article-card-media::after,.article-card-media img{pointer-events:none}

.guides-featured{display:block;margin-block-end:2.5rem;padding:clamp(1.75rem,4vw,2.75rem);background:var(--navy);color:var(--white);border-inline-start:4px solid var(--red);text-decoration:none;transition:background-color .4s var(--ease)}
.guides-featured:hover{background:var(--navy-deep)}
.guides-featured:focus-visible{outline:3px solid var(--red-on-dark);outline-offset:3px}
.guides-featured-kicker{display:block;font-size:.75rem;letter-spacing:.08em;color:var(--red-on-dark);margin-block-end:.75rem}
.guides-featured-title{margin:0 0 .75rem;font-size:clamp(1.4rem,3vw,2.1rem);line-height:1.2;letter-spacing:var(--track-tight);color:var(--white)}
.guides-featured-text{margin:0 0 1.25rem;max-width:60ch;color:rgba(255,255,255,.82)}
.guides-featured .card-link{color:var(--white)}

/* ------------------------------------------------------------------
   Featured image on service and area pages. The same file the page uses
   as its social card, so a share preview and the page itself agree.
   ------------------------------------------------------------------ */
.page-feature{margin:0 auto;max-width:var(--container);padding:0 var(--pad-x)}
.page-feature-image{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;border:1px solid var(--line)}
@media (max-width:640px){.page-feature-image{aspect-ratio:4/3}}


/* About intro: featured image sits beside the opening copy, not above it. */
.about-intro-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:2.5rem;align-items:center}
.about-intro-copy>*:first-child{margin-top:0}
.about-intro-copy>*:last-child{margin-bottom:0}
.about-intro-media{margin:0}
.about-intro-image{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--line)}
@media (max-width:900px){.about-intro-grid{grid-template-columns:1fr;gap:1.5rem}.about-intro-media{order:-1}.about-intro-image{aspect-ratio:3/2}}


.prose figure{margin:2rem auto;max-width:768px}
.prose figure img{display:block;width:100%;height:auto}
.prose figcaption{margin-top:.6rem;color:var(--muted);font-size:.9375rem;line-height:1.6}


/* ==================================================================
   Document block system for internal pages. Ported from the sibling
   theme with its media queries intact and re-tokenised: every colour
   resolves through the TZALAMUS variables.
   ================================================================== */
/* ------------------------------------------------------------------
   Niche template (page-niche.php)

   A composition, not a prose page. Every block below is measured against
   the palette tokens; nothing here introduces a raw colour.
   ------------------------------------------------------------------ */

.niche-kicker{display:inline-block;margin-block-end:.75rem;font-family:var(--mono);font-size:.75rem;font-weight:700;letter-spacing:.2em;color:var(--red)}.section-dark .niche-kicker{color:var(--red-on-dark)}/* hero */
.niche-hero{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(3rem,5vw,5rem);background:var(--navy);color:var(--white)}.niche-hero::before{content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(90% 70% at 80% 0%,rgba(var(--steel-rgb),.45),transparent 60%),linear-gradient(to top,var(--navy-deep),transparent 70%)}/* h1,h2,h3 carry color:var(--navy) as an element rule, which beats inheritance
   from .niche-hero. The H1 sits on navy, so it has to be set explicitly. */
.niche-hero-title{max-width:20ch;margin:1rem 0 0;color:var(--white);font-size:var(--display-2);font-weight:900;line-height:1.02;letter-spacing:var(--track-tighter)}.niche-hero-promise{max-width:56ch;margin:1.25rem 0 0;font-size:clamp(1.05rem,1.5vw,1.35rem);line-height:1.6;color:rgba(255,255,255,.82)}.niche-proof{display:grid;gap:1px;margin-block:2.25rem 0;padding:0;list-style:none;background:var(--line-dark);border:1px solid var(--line-dark)}.niche-proof li{display:flex;flex-direction:column;gap:.35rem;padding:1.25rem;background:var(--navy)}.niche-proof b{font-size:clamp(1.6rem,3vw,2.4rem);font-weight:900;line-height:1;color:var(--red-on-dark)}.niche-proof span{font-weight:700}.niche-proof i{font-style:normal;font-size:.82rem;color:rgba(255,255,255,.6)}.niche-hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-block-start:2rem}.niche-hero-note{margin-block-start:.9rem;font-size:.82rem;color:rgba(255,255,255,.6)}/* self audit */
.niche-audit-head,.niche-compare-head{max-width:60ch;margin-block-end:clamp(1.75rem,3vw,2.5rem)}.niche-audit-head p,.niche-compare-head p{margin-block-start:.85rem;color:var(--muted)}.section-dark .niche-compare-head p{color:rgba(255,255,255,.72)}.niche-audit-list{display:grid;gap:0;margin:0;padding:0;list-style:none;border-block-start:1px solid var(--line)}.niche-audit-list li{display:flex;gap:1rem;padding-block:1.35rem;border-block-end:1px solid var(--line)}.niche-audit-num{flex:none;font-family:var(--mono);font-size:.78rem;font-weight:700;line-height:1.7;color:var(--red)}.niche-audit-claim{margin:0;font-weight:700;color:var(--ink)}.niche-audit-fail{margin:.4rem 0 0;font-size:.9rem;line-height:1.6;color:var(--muted)}.niche-audit-fail strong{color:var(--red-dark)}/* structural comparison */
.niche-compare-grid{display:grid;gap:1.25rem}.niche-panel{display:flex;flex-direction:column;padding:1.5rem;border:1px solid var(--line-dark);background:rgba(255,255,255,.03)}.niche-panel-label{font-family:var(--mono);font-size:.75rem;font-weight:700;letter-spacing:.16em;color:rgba(255,255,255,.55)}.niche-panel-good .niche-panel-label{color:var(--red-on-dark)}.niche-panel h3{margin:.6rem 0 1.25rem;color:var(--white);font-size:1.15rem;line-height:1.35}.niche-panel-note{margin:1.25rem 0 0;font-size:.9rem;line-height:1.65;color:rgba(255,255,255,.7)}.niche-funnel{display:flex;flex-direction:column;align-items:center;gap:.6rem}.niche-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem;margin:0;padding:0;list-style:none}.niche-chips li{padding:.3rem .6rem;border:1px dashed var(--line-soft);font-size:.78rem;color:rgba(255,255,255,.7)}.niche-arrow{font-size:1.2rem;line-height:1;color:rgba(255,255,255,.45)}.niche-box{display:block;padding:.55rem .7rem;border:1px solid var(--red-on-dark);font-size:.82rem;font-weight:700;text-align:center;color:var(--white)}.niche-box-single{width:min(100%,16rem);border-style:dashed;border-color:var(--line-soft);color:rgba(255,255,255,.7)}.niche-pairs{display:grid;gap:.5rem}/* timeline */
.niche-steps{display:grid;gap:0;margin:0;padding:0;list-style:none;border-block-start:1px solid var(--line)}.niche-steps li{padding-block:1.5rem;border-block-end:1px solid var(--line)}.niche-step-when{display:block;font-family:var(--mono);font-size:.75rem;font-weight:700;letter-spacing:.16em;color:var(--red)}.niche-steps h3{margin:.6rem 0 .5rem;font-size:1.05rem}.niche-steps p{margin:0;font-size:.92rem;line-height:1.65;color:var(--muted)}/* accountability */
.niche-trust-grid,.niche-avoid-grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}.niche-trust-grid article,.niche-avoid-grid article{padding:1.5rem;background:var(--white)}.section-sand .niche-avoid-grid article{background:var(--sand)}.niche-trust-grid h3,.niche-avoid-grid h3{margin:0 0 .55rem;font-size:1.05rem}.niche-trust-grid p,.niche-avoid-grid p{margin:0;font-size:.93rem;line-height:1.7;color:var(--muted)}.niche-avoid-mark{display:inline-flex;align-items:center;justify-content:center;width:1.6rem;height:1.6rem;margin-block-end:.75rem;border:1px solid var(--red);font-size:.8rem;color:var(--red)}/* offer */
.niche-offer .quote-intro h2{max-width:22ch}/* niche hero: copy and photograph side by side from 960px up */
.niche-hero-grid{display:grid;gap:clamp(1.75rem,3vw,3rem);align-items:center}/* The portrait is the tallest thing in the row, so it is the one element that
   decides whether the hero fits. Capped against viewport height, it scales with
   the screen instead of cropping on it. */
.niche-hero .founder-figure img{max-height:min(58vh,560px);width:auto;margin-inline-start:auto}/* The aside is a stack: portrait, then the call to action underneath it. */
.niche-hero-aside{display:grid;align-content:end;gap:clamp(.75rem,1.5vw,1.15rem);min-width:0}.niche-hero-aside .founder-figure{align-self:end}.niche-hero-aside .hero-act{display:grid;gap:.6rem}.niche-hero-aside .niche-hero-actions{margin:0}.niche-hero-media{position:relative;margin:0;overflow:hidden;border:1px solid var(--line-dark)}.niche-hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(var(--navy-deep-rgb),.55),transparent 55%)}.niche-hero-photo,.niche-hero-media img{display:block;width:100%;height:100%;aspect-ratio:4/3;object-fit:cover}/* accountability block gains a photograph */
.niche-trust-layout{display:grid;gap:1.5rem;align-items:start}.niche-trust-media{position:relative;margin:0;overflow:hidden;border:1px solid var(--line)}.niche-trust-photo,.niche-trust-media img{display:block;width:100%;height:100%;aspect-ratio:3/4;object-fit:cover}/* byline, answer-first summary, captions and the YMYL disclaimer */


.niche-hero-media figcaption,.niche-trust-media figcaption{padding:.7rem .85rem;font-size:.8rem;line-height:1.55}.niche-hero-media figcaption{background:rgba(var(--navy-deep-rgb),.85);color:rgba(255,255,255,.75)}.niche-trust-media figcaption{background:var(--sand);color:var(--muted);border-block-start:1px solid var(--line)}.niche-disclaimer{padding-block:1.5rem;background:var(--sand)}.niche-disclaimer p{max-width:88ch;margin:0;padding-inline-start:.9rem;border-inline-start:3px solid var(--line-strong);font-size:.88rem;line-height:1.7;color:var(--muted)}/* the ordered-step list also runs on dark ground in the service template */
.niche-steps-dark{border-block-start-color:var(--line-dark)}.niche-steps-dark li{border-block-end-color:var(--line-dark)}.section-dark .niche-step-when{color:var(--red-on-dark)}.section-dark .niche-steps p{color:rgba(255,255,255,.7)}/* ==================================================================
   Dossier layout

   Swiss-grid derived: a strict asymmetric two-column head, an oversized
   outlined index numeral as the structural motif, visible column rules,
   and the accent used only three ways: the index, the active rail marker,
   and the primary action. No new colours are introduced.
   ================================================================== */

.doc-head{display:grid;gap:.75rem 2rem;align-items:start;margin-block-end:clamp(2rem,4vw,3.25rem);padding-block-end:1.25rem;border-block-end:3px solid var(--red)}.doc-index{font-family:var(--mono);
  font-size:clamp(3rem,8vw,6.5rem);
  font-weight:700;
  line-height:.8;
  letter-spacing:-.04em;
  color:transparent;
  -webkit-text-stroke:2px var(--red);
  text-stroke:2px var(--red);
  font-variant-numeric:tabular-nums;}.doc-title{margin:0;font-size:clamp(1.7rem,3.4vw,2.9rem);line-height:1.04;letter-spacing:var(--track-tight)}.doc-lead{max-width:62ch;margin:.85rem 0 0;font-size:clamp(1rem,1.2vw,1.1rem);line-height:1.7;color:var(--muted)}.section-dark .doc-lead{color:rgba(255,255,255,.72)}/* column rules make the grid readable rather than implied */

.niche-audit-num{font-variant-numeric:tabular-nums}.niche-proof b,.niche-step-when{font-variant-numeric:tabular-nums}.niche-proof b{font-family:var(--mono);letter-spacing:-.02em}/* sticky section rail */
.doc-rail{display:none}/* compact sticky action */
.doc-sticky-cta{position:fixed;z-index:70;inset-inline:0;inset-block-end:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;padding:.7rem clamp(1rem,4vw,2.5rem);background:rgba(var(--navy-deep-rgb),.97);border-block-start:1px solid var(--line-dark);backdrop-filter:blur(12px);transform:translateY(110%);transition:transform .3s var(--ease)}.doc-sticky-cta.is-in{transform:none}.doc-sticky-cta p{margin:0;font-size:.85rem;color:rgba(255,255,255,.75)}.doc-sticky-cta .button{min-height:44px}/* ---------- hero: a ruled sheet, not a gradient ---------- */

.niche-hero{padding-block:clamp(3.5rem,6vw,6rem) 0;border-block-end:var(--rule) solid var(--line-dark)}.niche-hero::before{background:linear-gradient(to top,var(--navy-deep),transparent 78%)}/* Twelve-column guide. Decorative, low contrast, and it gives the hero the
   measured look the rest of the page then keeps. */
.niche-hero::after{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;
  background:repeating-linear-gradient(to left,rgba(255,255,255,.055) 0 1px,transparent 1px 8.3333%);}.niche-hero-copy{position:relative}/* A short accent rule sits above the H1 and anchors it to the grid. */
.niche-hero-title::before{content:"";display:block;width:clamp(3rem,7vw,5.5rem);height:3px;
  margin-block-end:clamp(1rem,2vw,1.6rem);background:var(--red-on-dark);}.niche-hero-title{max-width:18ch;margin-block-start:0;line-height:.98}.niche-hero-promise{max-width:52ch;font-weight:400;color:rgba(255,255,255,.78)}/* proof becomes a data strip: hairlines and numerals, no panels */
.niche-proof{margin-block-start:clamp(.9rem,1.6vw,1.25rem);gap:0;background:none;
  border:0;border-block-start:var(--rule) solid var(--line-dark);}.niche-proof li{gap:.15rem;padding:.6rem 0 .7rem;background:none;
  border-block-end:var(--rule) solid var(--line-dark);}.niche-proof b{font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:.95;letter-spacing:-.04em}.niche-proof span{font-size:.86rem;font-weight:700;color:rgba(255,255,255,.92)}.niche-proof i{font-size:.75rem;line-height:1.5}/* ---------- contents strip ---------- */

.doc-index-strip{padding-block:clamp(.7rem,1.4vw,1rem) clamp(.5rem,1vw,.75rem)}.doc-index-strip ol{display:grid;gap:var(--rule);margin:0;padding:0;list-style:none;
  background:var(--line-dark);border-block:var(--rule) solid var(--line-dark);}/* A label that wraps to two lines makes its cell taller than the rest. Without
   these the shorter cells keep their own height and the strip shows the rule
   colour through the gaps underneath them. */
.doc-index-strip li{display:flex}.doc-index-strip a{flex:1;display:flex;align-items:baseline;gap:var(--s-2);min-height:44px;
  padding:.55rem var(--s-3);background:var(--navy);
  font-size:.86rem;font-weight:700;color:rgba(255,255,255,.8);
  transition:background-color .2s var(--ease),color .2s var(--ease);}.doc-index-strip span{font-family:var(--mono);font-size:.75rem;font-weight:700;letter-spacing:.1em;color:var(--red-on-dark);font-variant-numeric:tabular-nums}.doc-index-strip em{font-style:normal}.doc-index-strip a:hover,.doc-index-strip a:focus-visible{background:var(--navy-deep);color:#fff}/* ---------- section head: hairline rule with an accent segment ---------- */

.doc-head{position:relative;border-block-end:var(--rule) solid var(--line);padding-block-end:var(--s-6)}.section-dark .doc-head{border-block-end-color:var(--line-dark)}.doc-head::after{content:"";position:absolute;inset-block-end:calc(var(--rule) * -1);inset-inline-start:0;
  width:clamp(3rem,6vw,5rem);height:3px;background:var(--red);}.section-dark .doc-head::after{background:var(--red-on-dark)}.doc-index{-webkit-text-stroke-width:1.5px;opacity:.9}.section-dark .doc-index{-webkit-text-stroke-color:var(--red-on-dark);text-stroke:1.5px var(--red-on-dark)}.doc-lead{font-weight:400}/* ---------- audit list: numerals hang, rows answer to the pointer ---------- */

.niche-audit-list li{position:relative;gap:var(--s-4);padding-block:var(--s-6);transition:background-color .2s var(--ease)}.niche-audit-list li::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:2px;
  background:var(--red);transform:scaleY(0);transform-origin:top;
  transition:transform .25s var(--ease);}.niche-audit-list li:hover::before{transform:scaleY(1)}.niche-audit-num{width:2.25rem;font-size:1rem;line-height:1.5;letter-spacing:-.02em;color:var(--line-strong)}.niche-audit-list li:hover .niche-audit-num{color:var(--red)}.niche-audit-claim{font-size:1.08rem;font-weight:800;line-height:1.4;letter-spacing:var(--track-tight)}/* ---------- steps: a marked track rather than four boxes ---------- */

.niche-steps li{position:relative}.niche-step-when{display:flex;align-items:center;gap:var(--s-2)}.niche-step-when::before{content:"";flex:none;width:.5rem;height:.5rem;background:var(--red)}.section-dark .niche-step-when::before{background:var(--red-on-dark)}.niche-steps h3{letter-spacing:var(--track-tight)}/* ---------- trust and anti-pattern cards: the accent arrives on hover ---------- */

.niche-trust-grid article,.niche-avoid-grid article{position:relative;transition:background-color .25s var(--ease)}.niche-trust-grid article::after,.niche-avoid-grid article::after{content:"";position:absolute;inset-block-end:0;inset-inline:0;height:2px;
  background:var(--red);transform:scaleX(0);transform-origin:right;
  transition:transform .3s var(--ease);}.niche-trust-grid article:hover::after,.niche-avoid-grid article:hover::after{transform:scaleX(1)}.niche-trust-grid h3,.niche-avoid-grid h3{letter-spacing:var(--track-tight)}/* ---------- sticky action: reading progress on its top edge ---------- */

.doc-progress{position:absolute;inset-block-start:0;inset-inline:0;height:2px;background:var(--red-on-dark);transform:scaleX(0);transform-origin:right}/* ---------- motion budget ---------- */



/* ==================================================================
   Design v3 , the page as a document, not a stack of bands

   Three changes carry it, and each one is visible before any text is
   read: the page runs on one paper ground with two dark bands instead
   of alternating light and dark; the hero hands over to a full-bleed
   monochrome photographic band; and every section is a two-column
   grid whose numbered head stays put on the inline-start edge while
   its content scrolls past it.
   ================================================================== */

.section-paper{background:var(--sand)}.section-paper .niche-trust-grid article,
.section-paper .niche-avoid-grid article{background:var(--white)}/* ---------- hero: statement, then photograph ---------- */

/* The hero has to finish inside a 14 inch laptop viewport, which is roughly
   860px tall once the browser chrome and the admin bar are removed. Both the
   top padding and the display size are therefore capped against viewport
   height, not width alone: on a wide but short screen, vw alone produced a
   112px headline and pushed the portrait and the buttons past the fold. */
.niche-hero{padding-block:clamp(2rem,min(4.5vw,5vh),4rem) 0}.niche-hero::after{background:repeating-linear-gradient(to left,rgba(255,255,255,.07) 0 1px,transparent 1px 8.3333%)}.niche-hero-title{max-width:15ch;font-size:clamp(2.6rem,min(6.4vw,9.4vh),5.25rem);line-height:.94;letter-spacing:-.05em}.hero-split .niche-hero-promise{margin:0;max-width:50ch}.hero-act .niche-hero-actions{margin:0}.hero-act .niche-hero-note{margin:0}/* A photograph belongs with the section it supports, not in a band of its own.
   It sits in the head column beside the title, monochrome so that a stock frame
   reads as documentation rather than decoration. */
.doc-figure{position:relative;margin:clamp(1.25rem,2.5vw,1.75rem) 0 0;max-width:34rem}.doc-figure-photo,.doc-figure img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;filter:grayscale(1) contrast(1.06) brightness(.96)}.doc-figure figcaption{margin-block-start:.6rem;padding-inline-start:.7rem;border-inline-start:2px solid var(--red);font-size:.8rem;line-height:1.55;color:var(--muted)}.section-dark .doc-figure figcaption{border-inline-start-color:var(--red-on-dark);color:rgba(255,255,255,.7)}.niche-hero .container+.container{padding-block-start:clamp(1.5rem,3vw,2.25rem)}.niche-proof{margin-block-start:0}/* ---------- document grid: heads stay, content moves ---------- */

.doc-grid{display:grid;gap:clamp(1.5rem,3vw,2.25rem)}.doc-body{min-width:0}/* ---------- steps become a stacked register ---------- */

.niche-steps-stack{display:grid;grid-template-columns:minmax(0,1fr);border-block-start:1px solid var(--line)}.niche-steps-stack li{display:grid;gap:.35rem;padding:1.5rem 0;border-block:0;border-block-end:1px solid var(--line);border-inline:0}.niche-steps-stack.niche-steps-dark{border-block-start-color:var(--line-dark)}.niche-steps-stack.niche-steps-dark li{border-block-end-color:var(--line-dark)}.niche-steps-stack h3{margin:0;font-size:1.1rem}.niche-steps-stack p{max-width:64ch}/* ---------- the FAQ now sits on paper ---------- */

.section-paper .faq-item button i{background:var(--navy)}.section-paper .faq-item button[aria-expanded="true"] i{background:var(--red)}/* A proof value that is a word, not a number, cannot carry display size:
   at 3rem in mono it reads as a mistake. It steps down and keeps the row. */
.niche-proof b.is-word{font-size:clamp(1.25rem,1.9vw,1.75rem);letter-spacing:-.01em;line-height:1.2}/* The floating WhatsApp button and the sticky action bar both live in the
   bottom inline-end corner. While the bar is showing, the button rides above
   it instead of sitting on top of the label. */
body.has-doc-cta .whatsapp-float,body:has(.doc-sticky-cta:not([hidden])) .whatsapp-float{inset-block-end:calc(1.2rem + 4.75rem)}/* The service and niche hero becomes two columns: the argument, and the
   person making it with the call to action under him. The copy centres against
   that stack rather than sitting on its baseline: aligned to the foot, the
   headline was pushed to the bottom of a 700px column. */
.niche-hero-grid{display:grid;gap:clamp(1.75rem,3vw,2.5rem);align-items:center}.niche-hero-copy{min-width:0}/* Below the split the portrait would dominate the fold, so it is capped and
   sits after the copy rather than before it. */



/* ---------- scroll cue ----------
   A pill at the foot of the hero that tells the reader there is more below.
   The bounce is 2px and slow on purpose: it has to read as an invitation, not
   as a notification. Motion is removed entirely when the visitor asked for
   less of it, and the arrow stays put so the meaning survives. */
.scroll-cue{display:flex;justify-content:center;padding-block:clamp(.35rem,.9vh,.7rem) clamp(.6rem,1.4vh,1.1rem);}.scroll-cue a{display:grid;place-items:center;width:2.35rem;height:3.5rem;
  border:1px solid rgba(255,255,255,.32);border-radius:999px;
  color:rgba(255,255,255,.78);
  transition:border-color .25s var(--ease),color .25s var(--ease),background-color .25s var(--ease);}.scroll-cue a:hover,.scroll-cue a:focus-visible{border-color:var(--red-on-dark);color:#fff;background:rgba(255,255,255,.05)}.scroll-cue svg{width:1.15rem;height:1.15rem;animation:scroll-cue-bob 2.4s var(--ease) infinite}/* Consent line: the rules live in main.css, which every page loads. The quote
   modal renders on the homepage too, and the homepage does not load this file,
   so keeping them here left the checkbox unstyled and stacked above its label. */

/* ---------- breadcrumbs in the dossier hero ----------
   The page hero centres its trail; the dossier hero is a two-column grid whose
   copy runs from the inline start, so the trail follows the headline instead of
   floating in the middle of the column. */
.niche-hero .breadcrumbs{margin-block:1rem 0}.niche-hero .breadcrumbs ol{justify-content:flex-start}
@media (min-width:720px){.niche-proof{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:900px){.niche-audit-list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:2.5rem}}
@media (min-width:900px){.niche-compare-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:520px){.niche-pairs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){.niche-steps:not(.niche-steps-stack){grid-template-columns:repeat(4,minmax(0,1fr));border-block-start:0}}
@media (min-width:900px){.niche-steps:not(.niche-steps-stack) li{padding:1.5rem 1.25rem;border-block:1px solid var(--line);border-inline-start:1px solid var(--line)}.niche-steps:not(.niche-steps-stack) li:last-child{border-inline-end:1px solid var(--line)}}
@media (min-width:760px){.niche-trust-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){.niche-avoid-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:960px){.niche-hero-aside .hero-act{justify-items:stretch}.niche-hero-aside .niche-hero-actions{display:flex;flex-wrap:wrap;gap:.6rem}.niche-hero-aside .niche-hero-actions .button{flex:1 1 auto;justify-content:center;padding-block:.85rem}}
@media (min-width:960px){.niche-hero-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}
@media (max-width:959px){.niche-hero-media{order:-1}.niche-hero-photo,.niche-hero-media img{aspect-ratio:16/9}}
@media (min-width:960px){.niche-trust-layout{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}}
@media (max-width:959px){.niche-trust-photo,.niche-trust-media img{aspect-ratio:16/9}}
@media (min-width:900px){.niche-steps-dark:not(.niche-steps-stack) li{border-block-color:var(--line-dark);border-inline-start-color:var(--line-dark)}.niche-steps-dark:not(.niche-steps-stack) li:last-child{border-inline-end-color:var(--line-dark)}}
@media (min-width:760px){.doc-head{grid-template-columns:clamp(4.5rem,9vw,9rem) minmax(0,1fr)}}
@media (min-width:900px){.niche-audit-list{position:relative;column-gap:0}.niche-audit-list li{padding-inline:0 2.5rem}.niche-audit-list li:nth-child(even){padding-inline:2.5rem 0;border-inline-start:1px solid var(--line)}}
@media (min-width:1180px){.doc-rail{display:block;position:fixed;z-index:60;inset-inline-start:1.25rem;inset-block-start:50%;transform:translateY(-50%)}.doc-rail ol{display:grid;gap:.55rem;margin:0;padding:0;list-style:none}.doc-rail a{display:flex;align-items:center;gap:.6rem;padding:.15rem .2rem;font-family:var(--mono);font-size:.75rem;font-weight:700;letter-spacing:.12em;color:var(--muted);transition:color .2s var(--ease)}.doc-rail a span{position:relative;padding-inline-start:1.6rem;font-variant-numeric:tabular-nums}.doc-rail a span::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:50%;width:1rem;height:1px;background:var(--line-strong);transition:background-color .2s var(--ease),width .2s var(--ease)}.doc-rail a em{max-width:0;overflow:hidden;white-space:nowrap;font-style:normal;opacity:0;transition:max-width .25s var(--ease),opacity .2s var(--ease)}.doc-rail a:hover,.doc-rail a:focus-visible,.doc-rail .is-current a{color:var(--red)}.doc-rail a:hover span::before,.doc-rail a:focus-visible span::before,.doc-rail .is-current a span::before{background:var(--red);width:1.5rem}.doc-rail a:hover em,.doc-rail a:focus-visible em,.doc-rail .is-current a em{max-width:14rem;opacity:1}}
@media (max-width:520px){.doc-sticky-cta p{display:none}.doc-sticky-cta .button{width:100%}}
@media (prefers-reduced-motion:reduce){.doc-sticky-cta{transition:none}.doc-rail a,.doc-rail a span::before,.doc-rail a em{transition:none}}
@media (min-width:720px){.niche-proof li{padding-inline:0 var(--s-6)}.niche-proof li+li{padding-inline-start:var(--s-6);border-inline-start:var(--rule) solid var(--line-dark)}}
@media (min-width:600px){.doc-index-strip ol{grid-template-columns:repeat(auto-fit,minmax(9rem,1fr))}}
@media (prefers-reduced-motion:reduce){.doc-progress{display:none}.niche-audit-list li,
  .niche-audit-list li::before,
  .niche-trust-grid article::after,
  .niche-avoid-grid article::after,
  .doc-index-strip a{transition:none}}
@media (min-width:1080px){.doc-grid{grid-template-columns:minmax(0,19rem) minmax(0,1fr);column-gap:clamp(2.5rem,5vw,5rem);align-items:start}.doc-grid .doc-head{position:sticky;inset-block-start:calc(var(--header-height) + 2rem);
    display:block;margin:0;padding:0;border:0;}.doc-grid .doc-head::after{position:static;display:block;width:clamp(3rem,6vw,5rem);height:3px;margin-block-start:1.25rem}.doc-grid .doc-index{display:block;margin-block-end:.35rem;line-height:.85}.doc-grid .doc-title{font-size:clamp(1.6rem,2.4vw,2.3rem)}.doc-grid .doc-lead{font-size:.98rem;max-width:34ch}/* One column of findings inside a narrower measure reads better than two. */
  .doc-grid .niche-audit-list{grid-template-columns:minmax(0,1fr)}.doc-grid .niche-audit-list li,
  .doc-grid .niche-audit-list li:nth-child(even){padding-inline:0;border-inline-start:0}.doc-grid .niche-avoid-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}}
@media (min-width:760px){.niche-steps-stack li{grid-template-columns:minmax(5rem,8rem) minmax(0,1fr);column-gap:2rem;align-items:baseline;padding:1.75rem 0}.niche-steps-stack li>h3,.niche-steps-stack li>p{grid-column:2}.niche-steps-stack li>.niche-step-when{grid-row:1;grid-column:1}}
@media (max-width:680px){body.has-doc-cta .whatsapp-float,body:has(.doc-sticky-cta:not([hidden])) .whatsapp-float{inset-block-end:calc(.9rem + 4.5rem)}}
@media (min-width:1000px){.niche-hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,clamp(20rem,32vw,30rem));column-gap:clamp(2.5rem,5vw,4.5rem)}/* A cut-out has no frame to bleed, so it stands inside the column. */
  .niche-hero-grid .founder-figure{align-self:end}.niche-hero-grid .niche-hero-aside{align-self:stretch}}
@media (max-width:999px){.niche-hero .founder-figure{width:min(100%,17rem);justify-self:start}}
@media (prefers-reduced-motion:reduce){.scroll-cue svg{animation:none}}

/* Numbered stack: one row per step, numeral in its own column. The 4 up grid
   above is for the compact variant only. */
@media (min-width:760px){.niche-steps-stack li{grid-template-columns:minmax(4.5rem,6rem) minmax(0,1fr);column-gap:clamp(1.5rem,3vw,2.5rem);align-items:start;padding-block:clamp(1.5rem,2.6vw,2rem)}.niche-steps-stack li>.niche-step-when{font-size:.8rem;padding-block-start:.2rem}}
.niche-steps-stack h3{line-height:1.3}
.niche-steps-stack li>p{max-width:68ch}

/* Proof clip inside the document column. Never wider than the text measure,
   because a clip that outruns the paragraph reads as an ad. */
.doc-video{margin:clamp(1.75rem,3vw,2.5rem) 0 0;padding:0;max-width:44rem}
.doc-video-el{display:block;width:100%;height:auto;background:var(--navy-deep);border:var(--rule) solid var(--line)}
.doc-video figcaption{margin-block-start:.6rem;font-size:.9375rem;line-height:1.6;color:var(--muted)}
.section-dark .doc-video-el{border-color:var(--line-dark)}
.section-dark .doc-video figcaption{color:rgba(255,255,255,.7)}
/* Gallery grid. Square-ish cards on a fluid track so a phone shows one and a
   desktop shows three, with the caption under each frame rather than over it. */
.tz-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:clamp(.75rem,2vw,1.25rem);margin:clamp(1.5rem,3vw,2.25rem) 0}
.tz-gallery figure{margin:0;padding:0;background:#fff;border:var(--rule) solid var(--line)}
.tz-gallery img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.tz-gallery figcaption{margin:0;padding:.7rem .9rem 1rem;font-size:.9rem;line-height:1.5;color:var(--muted)}
.prose .tz-gallery{max-width:none}


/* ---------- mobile tap targets ----------
   A 12px breadcrumb line measured 14px tall on a 375px screen, which is under
   the 24px minimum for a touch target. Padding on the anchor grows the hit box
   without moving the trail, and the same fix applies to links inside prose. */
@media (max-width:768px){
.breadcrumbs a,.breadcrumbs [aria-current="page"]{display:inline-block;padding-block:.35rem}
.cp-page .content a,.page-body a,.entry-content a{padding-block:.15rem}
}


/* ---------- consent checkbox on touch ----------
   The box painted 18px on a 375px screen, under the 24px touch minimum, and it
   gates the form submit. Sizing the control itself keeps the label aligned. */
@media (max-width:768px){
.field-consent input[type="checkbox"]{width:24px;height:24px;min-width:24px;min-height:24px}
}

/* Price table stacks on phones: three columns needed a 520px sideways swipe
   with no affordance, and the price is the one thing the visitor came for. */
@media (max-width:639px){
.table-wrap{overflow-x:visible;border:0;background:transparent}
.prose .price-table,.price-table{min-width:0;width:100%;display:block}
.price-table thead{display:none}
.price-table tbody,.price-table tr,.price-table th,.price-table td{display:block;width:auto}
.price-table tbody tr{border:1px solid var(--line);background:var(--white);border-radius:.85rem;padding:.95rem 1.1rem;margin-block-end:.75rem}
.price-table tbody tr:hover{background:var(--white)}
.price-table th,.price-table td{padding:.2rem 0;border-block-end:0}
.price-table tbody th{font-size:1.0625rem}
.price-table tbody td:first-of-type{font-weight:800;color:var(--navy)}
.table-scroll-hint{display:none}
.price-table tbody td[data-label]::before{content:attr(data-label) ": ";font-weight:700;color:var(--navy)}
}

.page-byline{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem 1.1rem;margin:.7rem 0 0;font-size:.8rem;line-height:1.5;color:var(--muted,#726a5d)}
.page-byline .page-byline-author{color:inherit;font-weight:700;text-decoration:none;border-bottom:1px solid currentColor}
.page-byline i{font-style:normal;opacity:.85}
.page-byline-who{display:inline-flex;flex-wrap:wrap;gap:.3rem .5rem;align-items:center}
.page-byline-dates{display:inline-flex;flex-wrap:wrap;gap:.35rem 1.1rem}

.wed-checklist{list-style:none;margin:1rem 0;padding:0}
.wed-checklist li{position:relative;padding-inline-start:1.9rem;margin:.5rem 0;line-height:1.6}
.wed-checklist li::before{content:"";position:absolute;inset-inline-start:0;top:.2em;width:1em;height:1em;border:2px solid var(--accent,#8a5a22);border-radius:3px;background:transparent;box-sizing:border-box}
@media print{.wed-checklist li::before{border-color:#000}}