/* =============================================================================
   SERVICE-PAGE VOCABULARY (shared by web-design, seo, wordpress, hosting, …)
   Loaded after tropical.css. Reuses the same tokens.
   ============================================================================= */
.sec{border-bottom:1px solid var(--rule);}
.sec .inner{margin-inline:auto;max-width:1200px;padding:5rem 1.5rem;}
@media(min-width:1024px){.sec .inner{padding:7rem 2.5rem;}}
.sec--tint{background:rgba(var(--sage-rgb),.06);}
.sec--dark{background:var(--ink);color:var(--cream);}
.eyebrow{font-size:.75rem;text-transform:uppercase;letter-spacing:.22em;color:rgba(var(--ink-rgb),.55);margin:0;}
.sec--dark .eyebrow{color:rgba(var(--cream-rgb),.55);}
.h2d{font-family:var(--font-serif);font-size:1.875rem;line-height:1.15;letter-spacing:-0.01em;margin:0;}
@media(min-width:768px){.h2d{font-size:2.75rem;}}
.h2d.sm{font-size:1.875rem;}
@media(min-width:768px){.h2d.sm{font-size:2.25rem;}}
.prose-lg{font-size:1.0625rem;line-height:1.7;color:rgba(var(--ink-rgb),.75);}
.prose-lg p+p{margin-top:1.5rem;}
.sec--dark .prose-lg{color:rgba(var(--cream-rgb),.75);}
.mut{font-size:.9375rem;line-height:1.7;color:rgba(var(--ink-rgb),.65);}
.serif-it{font-family:var(--font-serif);font-style:italic;}
.mt-sm{margin-top:1rem;}.mt-md{margin-top:1.5rem;}.mt-lg{margin-top:2rem;}
.maxw-xl{max-width:36rem;}.maxw-2xl{max-width:42rem;}.maxw-3xl{max-width:48rem;}
.lg-2{grid-template-columns:1fr;}
@media(min-width:1024px){.lg-2{grid-template-columns:1fr 1fr;}}
.md-3{grid-template-columns:1fr;}
@media(min-width:768px){.md-3{grid-template-columns:repeat(3,1fr);}}
.md-bias{grid-template-columns:1fr;}
@media(min-width:1024px){.md-bias{grid-template-columns:1fr 1.4fr;gap:5rem;}}
.price-split{grid-template-columns:1fr;}
@media(min-width:1024px){.price-split{grid-template-columns:1fr 1.4fr;gap:4rem;padding:3rem;}}

/* Service hero: text left, engraving right */
.svc-hero .inner{display:grid;grid-template-columns:minmax(0,1fr);gap:3rem;margin-inline:auto;max-width:1200px;padding:5rem 1.5rem;}
@media(min-width:1024px){.svc-hero .inner{grid-template-columns:1.1fr minmax(0,1fr);gap:4rem;padding:7rem 2.5rem;align-items:center;}}
.svc-hero h1{margin-top:1.5rem;font-family:var(--font-serif);font-size:2.25rem;line-height:1.05;letter-spacing:-0.02em;}
@media(min-width:640px){.svc-hero h1{font-size:3rem;}}
@media(min-width:1024px){.svc-hero h1{font-size:3.75rem;}}
.svc-hero .h1-sub{margin-top:1.75rem;max-width:36rem;font-size:1.125rem;line-height:1.7;color:rgba(var(--ink-rgb),.7);}
.svc-hero .h1-it{margin-top:1rem;font-family:var(--font-serif);font-style:italic;color:rgba(var(--ink-rgb),.6);}
.svc-hero .cta-row{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.75rem;}
.svc-hero .hero-art-wrap{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.svc-hero .hero-art-wrap img{width:100%;max-width:28rem;}
.svc-hero .art-caption{margin-top:1.5rem;max-width:20rem;text-align:center;font-family:var(--font-serif);font-style:italic;font-size:.875rem;line-height:1.7;color:rgba(var(--ink-rgb),.55);}
.svc-hero .art-caption .lead{font-style:normal;font-weight:500;letter-spacing:.02em;color:rgba(var(--ink-rgb),.7);}
.btn-up{text-transform:uppercase;letter-spacing:.14em;}
.btn-cream{background:var(--sage);color:var(--ink);}
.btn-cream:hover{background:var(--cream);}
/* art-left hero variant (WordPress) */
.svc-hero.art-left .inner{grid-template-columns:minmax(0,1fr);}
@media(min-width:1024px){.svc-hero.art-left .inner{grid-template-columns:320px 1fr;}}
.svc-hero.art-left .hero-art-wrap{order:-1;}
@media(min-width:1024px){.svc-hero.art-left .hero-art-wrap img{max-width:none;}}
.svc-hero h1.xl{font-size:3rem;line-height:1.02;}
@media(min-width:768px){.svc-hero h1.xl{font-size:3.75rem;}}
@media(min-width:1024px){.svc-hero h1.xl{font-size:4.5rem;}}

/* Icon feature cards */
.sec--dark .grid-panel{background:rgba(246,244,238,.12);border-color:rgba(246,244,238,.12);}
.sec--dark .icard{background:var(--ink);}
.sec--dark .icard h3{color:var(--cream);}
.sec--dark .icard p{color:rgba(246,244,238,.7);}
/* Dark stat strip + clients namestrip */
.dstat{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;overflow:hidden;background:rgba(246,244,238,.1);}
@media(min-width:1024px){.dstat{grid-template-columns:repeat(6,1fr);}} /* 6 cells seat in one desktop row */
.dstat .cell{background:var(--ink);padding:2rem 1.5rem;}
.dstat .k{font-family:var(--font-serif);font-size:1.875rem;color:var(--sage);}
@media(min-width:768px){.dstat .k{font-size:2.25rem;}}
.dstat .v{margin-top:.5rem;font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:rgba(246,244,238,.6);}
.namestrip{margin-top:2rem;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;font-family:var(--font-serif);font-size:1.125rem;color:rgba(28,28,26,.75);}
.namestrip a{text-decoration:underline;text-decoration-color:rgba(138,157,122,.4);text-underline-offset:4px;transition:color .2s;}
.namestrip a:hover{color:var(--sage);}
.namestrip .dot{color:rgba(28,28,26,.3);}
.icard{display:flex;flex-direction:column;background:var(--cream);padding:2rem;}
.icard .ic{width:1.75rem;height:1.75rem;color:var(--sage);}
.icard h3{margin-top:1.25rem;font-family:var(--font-serif);font-size:1.25rem;line-height:1.3;letter-spacing:-0.01em;}
.icard p{margin-top:.75rem;font-size:.9375rem;line-height:1.7;color:rgba(var(--ink-rgb),.7);}
.icard.sm h3{font-size:1.125rem;}

/* Editorial portfolio list */
.pf-list{margin-top:3rem;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);}
.pf-row{border-bottom:1px solid var(--rule);}
.pf-row:last-child{border-bottom:0;}
.pf-row a{display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:.5rem 1.5rem;padding:1.75rem 0;}
@media(min-width:768px){.pf-row a{grid-template-columns:3rem 1.2fr 1.5fr auto;align-items:center;gap:2.5rem;padding:2rem 0;}}
.pf-row .num{font-family:var(--font-serif);font-size:.875rem;font-variant-numeric:tabular-nums;color:rgba(var(--ink-rgb),.45);}
.pf-row h3{font-family:var(--font-serif);font-size:1.5rem;line-height:1.1;letter-spacing:-0.01em;transition:color .2s;}
@media(min-width:768px){.pf-row h3{font-size:1.875rem;}}
.pf-row a:hover h3{color:var(--sage);}
.pf-row .sect{margin-top:.25rem;font-size:.75rem;text-transform:uppercase;letter-spacing:.18em;color:rgba(var(--ink-rgb),.55);}
.pf-row .sect .b{color:rgba(var(--ink-rgb),.4);}
.pf-row .note{grid-column:1/-1;max-width:36rem;font-size:1rem;line-height:1.7;color:rgba(var(--ink-rgb),.7);}
@media(min-width:768px){.pf-row .note{grid-column:auto;}}
.pf-row .arr{color:rgba(var(--ink-rgb),.35);transition:color .2s;}
.pf-row a:hover .arr{color:var(--sage);}

/* Two-column split */
.split{display:grid;gap:3rem;margin-inline:auto;max-width:1200px;padding:5rem 1.5rem;}
@media(min-width:1024px){.split{padding:7rem 2.5rem;gap:5rem;}}
.split.c-bias{grid-template-columns:1fr;}
@media(min-width:1024px){.split.c-bias{grid-template-columns:.85fr 1.15fr;}}
.split.even{grid-template-columns:1fr;}
@media(min-width:1024px){.split.even{grid-template-columns:1fr 1fr;}}
.split-head h2{margin-top:1.25rem;}

/* Section head with optional aside */
.sec-head{margin-bottom:3.5rem;display:flex;flex-direction:column;gap:1rem;}
@media(min-width:768px){.sec-head{flex-direction:row;align-items:flex-end;justify-content:space-between;}}
.sec-head h2{margin-top:1rem;}
.sec-head .aside{max-width:28rem;}

/* Process / numbered grid (rounded panel, hairline cells) */
.grid-panel{display:grid;gap:1px;overflow:hidden;border-radius:1.5rem;border:1px solid var(--rule);background:var(--rule);}
.grid-panel.cols-3{grid-template-columns:1fr;}
@media(min-width:768px){.grid-panel.cols-3{grid-template-columns:repeat(3,1fr);}}
.grid-panel.cols-2{grid-template-columns:1fr;}
@media(min-width:640px){.grid-panel.cols-2{grid-template-columns:repeat(2,1fr);}}
.grid-panel.cols-4{grid-template-columns:1fr;}
@media(min-width:640px){.grid-panel.cols-4{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1024px){.grid-panel.cols-4{grid-template-columns:repeat(4,1fr);}}
.grid-panel.cols-5{grid-template-columns:1fr;}
@media(min-width:640px){.grid-panel.cols-5{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1024px){.grid-panel.cols-5{grid-template-columns:repeat(5,1fr);}}
.cell{display:flex;flex-direction:column;gap:.75rem;background:var(--cream);padding:2rem;}
.cell .n{font-family:var(--font-serif);font-size:.875rem;color:var(--sage);}
.cell h3{font-family:var(--font-serif);letter-spacing:-0.01em;}
.cell.big h3{font-size:1.875rem;}
.cell h3.x{font-size:1.25rem;}
.cell p{font-size:.9375rem;line-height:1.7;color:rgba(var(--ink-rgb),.65);}
.cell.hoverable{transition:background .2s;}
.cell.hoverable:hover{background:rgba(var(--sage-rgb),.10);}

/* Bordered card grid */
.card-grid{display:grid;gap:1rem;}
@media(min-width:640px){.card-grid.c2{grid-template-columns:repeat(2,1fr);}}
@media(min-width:640px){.card-grid.c3{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1024px){.card-grid.c3{grid-template-columns:repeat(3,1fr);}}
.bcard{border:1px solid var(--rule);border-radius:1.5rem;background:var(--cream);padding:1.75rem;transition:border-color .2s,background .2s;}
.bcard:hover{border-color:var(--sage);background:rgba(var(--sage-rgb),.05);}
.bcard h3{font-family:var(--font-serif);font-size:1.5rem;letter-spacing:-0.01em;}
.bcard.sm h3{font-size:1.125rem;}
.bcard p{margin-top:1rem;font-size:.9375rem;line-height:1.7;color:rgba(var(--ink-rgb),.65);}
.bcard.plain{border-radius:1rem;}
.bcard.plain:hover{border-color:var(--rule);background:var(--cream);}

/* Before/After drag slider */
.ba{overflow:hidden;border-radius:1.5rem;border:1px solid var(--rule);background:var(--cream);}
.ba+.ba{margin-top:2rem;}
.ba-stage{position:relative;aspect-ratio:16/10;width:100%;user-select:none;overflow:hidden;background:rgba(var(--ink-rgb),.05);cursor:ew-resize;}
.ba-after{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;}
.ba-before{position:absolute;inset:0;overflow:hidden;width:50%;}
.ba-before img{position:absolute;inset:0;height:100%;width:100%;object-fit:cover;object-position:top;max-width:none;}
.ba-tag{position:absolute;top:1rem;border-radius:9999px;padding:.25rem .75rem;font-size:10px;text-transform:uppercase;letter-spacing:.18em;}
.ba-tag-before{left:1rem;background:rgba(var(--ink-rgb),.8);color:var(--cream);}
.ba-tag-after{right:1rem;background:var(--sage);color:var(--ink);}
.ba-handle{pointer-events:none;position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);}
.ba-line{height:100%;width:1px;background:rgba(var(--cream-rgb),.9);box-shadow:0 0 0 1px rgba(28,28,26,.25);}
.ba-knob{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:9999px;background:var(--cream);color:var(--ink);font-size:.75rem;box-shadow:0 8px 20px -6px rgba(28,28,26,.35);}
.ba-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;}
.ba-meta{display:grid;gap:1rem;padding:1.75rem;}
@media(min-width:768px){.ba-meta{grid-template-columns:1fr 2fr;padding:2.5rem;}}
.ba-cat{font-size:.75rem;text-transform:uppercase;letter-spacing:.18em;color:rgba(var(--ink-rgb),.55);}
.ba-meta h3{margin-top:.75rem;font-family:var(--font-serif);font-size:1.5rem;letter-spacing:-0.01em;}
@media(min-width:768px){.ba-meta h3{font-size:1.875rem;}}
.ba-body{font-size:.9375rem;line-height:1.7;color:rgba(var(--ink-rgb),.75);}

/* Portfolio marquee */
.marquee-sec{overflow:hidden;border-bottom:1px solid var(--rule);background:var(--ink);color:var(--cream);padding-block:2.5rem;}
.marquee-head{margin-inline:auto;max-width:1200px;display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;padding:0 1.5rem 1.5rem;}
@media(min-width:1024px){.marquee-head{padding-inline:2.5rem;}}
.marquee-head .eyebrow{color:rgba(var(--cream-rgb),.55);}
.marquee-head a{display:none;font-size:.75rem;text-transform:uppercase;letter-spacing:.18em;color:var(--sage);}
@media(min-width:640px){.marquee-head a{display:inline-flex;}}
.marquee-track-wrap{position:relative;}
.marquee-track{display:flex;width:max-content;gap:1.5rem;animation:marquee 45s linear infinite;}
.marquee-track-wrap:hover .marquee-track{animation-play-state:paused;}
.mq-fig{width:340px;flex-shrink:0;overflow:hidden;border-radius:.75rem;border:1px solid rgba(var(--cream-rgb),.1);background:rgba(var(--cream-rgb),.05);margin:0;}
.mq-fig .shot{aspect-ratio:16/10;overflow:hidden;background:rgba(var(--ink-rgb),.4);}
.mq-fig .shot img{width:100%;height:100%;object-fit:cover;object-position:top;}
.mq-fig figcaption{padding:.75rem 1rem;font-size:12px;text-transform:uppercase;letter-spacing:.16em;color:rgba(var(--cream-rgb),.7);}

/* Recent work cards */
.work-grid{display:grid;gap:1.5rem;}
@media(min-width:768px){.work-grid{grid-template-columns:repeat(2,1fr);}}
.work{overflow:hidden;border-radius:1.5rem;border:1px solid var(--rule);background:var(--cream);}
.work .shot{aspect-ratio:16/10;overflow:hidden;background:rgba(var(--sage-rgb),.1);}
.work .shot img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .7s;}
.work:hover .shot img{transform:scale(1.03);}
.work .meta{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1.75rem;}
.work .cat{font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:rgba(var(--ink-rgb),.55);}
.work h3{margin-top:.5rem;font-family:var(--font-serif);font-size:1.5rem;letter-spacing:-0.01em;}
.work .note{margin-top:.75rem;max-width:28rem;font-size:.875rem;line-height:1.7;color:rgba(var(--ink-rgb),.65);}
.work .arr{margin-top:.25rem;flex-shrink:0;color:rgba(var(--ink-rgb),.4);transition:color .2s;}
.work:hover .arr{color:var(--sage);}

/* Compare table */
.cmp-wrap{overflow-x:auto;border-radius:1.5rem;border:1px solid var(--rule);}
.cmp{display:grid;min-width:820px;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:1px;background:var(--rule);text-align:left;}
.cmp .hd{padding:1rem 1.25rem;font-size:12px;text-transform:uppercase;letter-spacing:.14em;background:var(--cream);color:rgba(var(--ink-rgb),.55);}
.cmp .hd.us{background:var(--ink);color:var(--sage);}
.cmp .f{background:var(--cream);padding:1.25rem;font-family:var(--font-serif);font-size:.9375rem;color:var(--ink);}
.cmp .c{background:var(--cream);padding:1.25rem;}
.cmp .c.us{background:rgba(var(--sage-rgb),.1);}
.cmp .mark{display:flex;align-items:flex-start;gap:.5rem;}
.cmp .mark svg{margin-top:2px;width:1rem;height:1rem;flex-shrink:0;}
.cmp .mark.yes{color:var(--sage);}
.cmp .mark.no{color:rgba(var(--ink-rgb),.35);}
.cmp .mark.mid{color:rgba(var(--ink-rgb),.55);}
.cmp .mark span{font-size:.875rem;line-height:1.4;color:rgba(var(--ink-rgb),.75);}

/* AI-ready split list */
.airead-list{display:grid;gap:1rem;align-self:center;}
.airead-list li{border:1px solid var(--rule);border-radius:1rem;background:var(--cream);padding:1.5rem;}
.airead-list h3{font-family:var(--font-serif);font-size:1.125rem;letter-spacing:-0.01em;}
.airead-list p{margin-top:.5rem;font-size:.875rem;line-height:1.7;color:rgba(var(--ink-rgb),.65);}
code{background:rgba(var(--sage-rgb),.15);padding:.1rem .35rem;border-radius:.25rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85em;color:var(--ink);}

/* FAQ accordion (native <details>) */
.faq-split{display:grid;gap:3rem;margin-inline:auto;max-width:1200px;padding:5rem 1.5rem;}
@media(min-width:1024px){.faq-split{grid-template-columns:.7fr 1.3fr;gap:4rem;padding:7rem 2.5rem;}}
.faq-list{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);}
.faq-item{border-bottom:1px solid var(--rule);}
.faq-item:last-child{border-bottom:0;}
.faq-item summary{display:flex;cursor:pointer;list-style:none;align-items:flex-start;justify-content:space-between;gap:1.5rem;padding:1.5rem 0;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary .q{font-family:var(--font-serif);font-size:1.25rem;letter-spacing:-0.01em;color:var(--ink);}
.faq-item summary .pl{margin-top:.25rem;display:grid;width:1.75rem;height:1.75rem;flex-shrink:0;place-items:center;border:1px solid var(--rule);border-radius:9999px;color:rgba(var(--ink-rgb),.6);transition:transform .2s,color .2s,border-color .2s;}
.faq-item[open] summary .pl{transform:rotate(45deg);border-color:var(--sage);color:var(--sage);}
.faq-item .a{margin:0 0 1.5rem;max-width:42rem;font-size:.9375rem;line-height:1.7;color:rgba(var(--ink-rgb),.7);}

/* CTA band (dark, horizontal) */
.cta-band{background:var(--ink);color:var(--cream);}
.cta-band .inner{margin-inline:auto;max-width:1200px;display:flex;flex-direction:column;align-items:flex-start;gap:2rem;padding:6rem 1.5rem;}
@media(min-width:1024px){.cta-band .inner{flex-direction:row;align-items:center;justify-content:space-between;padding-inline:2.5rem;}}
.cta-band h2{font-family:var(--font-serif);font-size:1.875rem;line-height:1.15;letter-spacing:-0.01em;}
@media(min-width:768px){.cta-band h2{font-size:3rem;}}
.cta-band p{margin-top:1.25rem;max-width:36rem;color:rgba(var(--cream-rgb),.7);}

/* Stat strip */
.stat-strip{border-bottom:1px solid var(--rule);background:var(--cream);}
.stat-strip .inner{margin-inline:auto;max-width:1200px;display:grid;gap:2rem;padding:3rem 1.5rem;grid-template-columns:repeat(2,1fr);}
@media(min-width:768px){.stat-strip .inner{grid-template-columns:repeat(4,1fr);padding-inline:2.5rem;}}
.stat .num{font-family:var(--font-serif);font-size:2.5rem;letter-spacing:-0.02em;color:var(--ink);}
.stat .lbl{margin-top:.25rem;font-size:.8125rem;text-transform:uppercase;letter-spacing:.14em;color:rgba(var(--ink-rgb),.55);}

/* Client logo / name strip */
.client-strip{display:flex;flex-wrap:wrap;gap:.625rem;}
.client-chip{border:1px solid var(--rule);border-radius:9999px;padding:.5rem 1rem;font-size:.8125rem;color:rgba(var(--ink-rgb),.7);transition:border-color .2s,color .2s;}
a.client-chip:hover{border-color:var(--sage);color:var(--sage);}
.logo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;}
@media(min-width:640px){.logo-grid{grid-template-columns:repeat(3,1fr);}}
@media(min-width:1024px){.logo-grid{grid-template-columns:repeat(4,1fr);}}
.logo-grid .cellbox{display:grid;place-items:center;border:1px solid var(--rule);border-radius:1rem;background:var(--card);padding:1.5rem;aspect-ratio:3/2;}
.logo-grid img{max-height:5rem;width:auto;object-fit:contain;}

/* Numbered process list (logo, ecommerce) */
.proc-step{display:grid;gap:1rem;border-bottom:1px solid var(--rule);padding:1.5rem;}
.proc-step:last-child{border-bottom:0;}
@media(min-width:768px){.proc-step{grid-template-columns:80px 1fr 3fr;align-items:start;gap:2.5rem;padding:2rem;}}
.proc-step .pn{font-family:var(--font-serif);font-size:1.875rem;color:var(--sage);}
@media(min-width:768px){.proc-step .pn{font-size:2.25rem;}}
.proc-step h3{font-family:var(--font-serif);font-size:1.25rem;line-height:1.2;letter-spacing:-0.01em;}
@media(min-width:768px){.proc-step h3{font-size:1.5rem;}}
.proc-step p{color:rgba(var(--ink-rgb),.7);line-height:1.7;}
/* Deliverables chip grid */
.deliv-grid{display:grid;gap:.75rem;grid-template-columns:1fr;}
@media(min-width:640px){.deliv-grid{grid-template-columns:repeat(2,1fr);}}
.deliv-grid li{display:flex;align-items:flex-start;gap:.75rem;border:1px solid var(--rule);border-radius:.75rem;background:var(--cream);padding:.75rem 1rem;font-size:.875rem;color:rgba(var(--ink-rgb),.8);}
.deliv-grid li::before{content:"";flex:none;margin-top:.3rem;width:.85rem;height:.85rem;background:var(--sage);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;}
.grid4{grid-template-columns:1fr;}
@media(min-width:768px){.grid4{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1024px){.grid4{grid-template-columns:repeat(4,1fr);}}
.cta-2col{grid-template-columns:1fr;}
@media(min-width:1024px){.cta-2col{grid-template-columns:1.4fr 1fr;align-items:end;}}
.int-grid{grid-template-columns:1fr;}
@media(min-width:1024px){.int-grid{grid-template-columns:1fr 1.2fr;gap:4rem;}}
.trust-grid{grid-template-columns:1fr;}
@media(min-width:1024px){.trust-grid{grid-template-columns:1.2fr 1fr;gap:4rem;}}
.proven-grid{grid-template-columns:1fr;}
@media(min-width:1024px){.proven-grid{grid-template-columns:1fr auto;gap:4rem;align-items:center;}}
/* Phased process (e-commerce) */
.phase{display:grid;gap:2.5rem;}
.phase+.phase{margin-top:4rem;}
@media(min-width:1024px){.phase{grid-template-columns:220px 1fr;gap:4rem;}}
.phase .ph-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.22em;color:rgba(var(--ink-rgb),.45);}
.phase .ph-name{margin-top:.75rem;font-family:var(--font-serif);font-style:italic;font-size:1.875rem;color:var(--sage);}
.step-list{display:flex;flex-direction:column;gap:2rem;border-left:1px solid var(--rule);padding-left:2rem;}
.step-list li{position:relative;}
.step-list .sn{position:absolute;left:-42px;display:flex;width:1.75rem;height:1.75rem;align-items:center;justify-content:center;border:1px solid var(--rule);border-radius:9999px;background:var(--cream);font-family:var(--font-serif);font-size:.875rem;color:rgba(var(--ink-rgb),.7);}
.step-list h4{font-family:var(--font-serif);font-size:1.25rem;line-height:1.3;letter-spacing:-0.01em;}
.step-list p{margin-top:.5rem;font-size:.9375rem;line-height:1.7;color:rgba(var(--ink-rgb),.7);}

/* Pricing cards */
.price-grid{display:grid;gap:1.5rem;}
@media(min-width:768px){.price-grid.c3{grid-template-columns:repeat(3,1fr);}}
.price-card{display:flex;flex-direction:column;border:1px solid var(--rule);border-radius:1.5rem;background:var(--card);padding:2rem;}
.price-card.feature{background:var(--ink);color:var(--cream);border-color:var(--ink);}
.price-card h3{font-family:var(--font-serif);font-size:1.5rem;letter-spacing:-0.01em;}
.price-card .amt{margin-top:.75rem;font-family:var(--font-serif);font-size:2.25rem;letter-spacing:-0.02em;}
.price-card .amt small{font-size:.9375rem;color:rgba(var(--ink-rgb),.55);}
.price-card.feature .amt small{color:rgba(var(--cream-rgb),.6);}
.price-card ul{margin-top:1.5rem;display:flex;flex-direction:column;gap:.625rem;font-size:.9375rem;color:rgba(var(--ink-rgb),.7);}
.price-card.feature ul{color:rgba(var(--cream-rgb),.75);}
.price-card ul li{padding-left:1.25rem;position:relative;}
.price-card ul li::before{content:"";position:absolute;left:0;top:.5rem;width:.4rem;height:.4rem;border-radius:9999px;background:var(--sage);}
.price-card .price-cta{margin-top:auto;padding-top:1.5rem;}

/* Pill chips */
.chip{display:inline-flex;align-items:center;gap:.5rem;border:1px solid rgba(var(--ink-rgb),.15);border-radius:9999px;background:var(--cream);padding:.5rem 1rem;font-size:.875rem;color:rgba(var(--ink-rgb),.75);}
.chip .d{width:.4rem;height:.4rem;border-radius:9999px;background:var(--sage);}
.chip.up{font-size:.75rem;text-transform:uppercase;letter-spacing:.12em;padding:.375rem .75rem;}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;}
.sys-list{display:grid;gap:.5rem;}
@media(min-width:640px){.sys-list{grid-template-columns:repeat(2,1fr);}}

/* HOA spotlight */
.spot{display:grid;gap:2.5rem;align-items:center;}
.spot+.spot{margin-top:3rem;}
@media(min-width:1024px){.spot{grid-template-columns:1fr 1fr;gap:4rem;}.spot.rev .spot-img{order:2;}}
.spot-img{overflow:hidden;border-radius:.75rem;border:1px solid var(--rule);background:var(--cream);box-shadow:0 30px 60px -30px rgba(28,28,26,.25);}
.spot-img img{width:100%;display:block;}
.spot .region{font-size:.75rem;text-transform:uppercase;letter-spacing:.22em;color:var(--sage);}
.spot h3{margin-top:.75rem;font-family:var(--font-serif);font-size:1.875rem;line-height:1.1;letter-spacing:-0.01em;}
@media(min-width:768px){.spot h3{font-size:2.25rem;}}
.spot .loc{margin-top:.5rem;font-size:.875rem;text-transform:uppercase;letter-spacing:.16em;color:rgba(var(--ink-rgb),.55);}

/* Portfolio */
.pf-numbers{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;overflow:hidden;background:rgba(246,244,238,.1);margin-top:2rem;}
.pf-numbers > div{background:var(--ink);padding:2rem 1.5rem;}
@media(min-width:640px){.pf-numbers{grid-template-columns:repeat(4,1fr);}}
.pf-numbers .n{font-family:var(--font-serif);font-size:3rem;letter-spacing:-0.02em;color:var(--sage);}
@media(min-width:768px){.pf-numbers .n{font-size:3.75rem;}}
.pf-numbers .l{margin-top:.75rem;font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:rgba(246,244,238,.55);}
.spf{display:grid;gap:2rem;align-items:center;}
.spf+.spf{margin-top:4rem;}
@media(min-width:1024px){.spf{grid-template-columns:1.5fr 1fr;gap:3.5rem;}.spf.rev{grid-template-columns:1fr 1.5fr;}.spf.rev .spf-img{order:2;}}
.spf-img{overflow:hidden;border-radius:.5rem;background:rgba(var(--sage-rgb),.1);}
.spf-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s;}
.spf:hover .spf-img img{transform:scale(1.02);}
.spf .cat{font-size:.75rem;text-transform:uppercase;letter-spacing:.18em;color:rgba(var(--ink-rgb),.45);}
.spf h3{margin-top:.5rem;font-family:var(--font-serif);font-size:1.875rem;letter-spacing:-0.01em;}
@media(min-width:640px){.spf h3{font-size:2.25rem;}}
.spf .tag{margin-top:.5rem;font-family:var(--font-serif);font-style:italic;color:rgba(var(--ink-rgb),.65);}
.spf .body{margin-top:.75rem;font-size:.9375rem;line-height:1.7;color:rgba(var(--ink-rgb),.7);}
.spf dl{margin-top:1.25rem;display:grid;gap:.75rem;border-top:1px solid var(--rule);padding-top:1.25rem;}
.spf dl .r{display:grid;grid-template-columns:88px minmax(0,1fr);gap:1rem;font-size:.875rem;line-height:1.6;}
.spf dl dt{font-family:var(--font-serif);font-size:.75rem;text-transform:uppercase;letter-spacing:.14em;color:rgba(var(--ink-rgb),.45);margin:0;}
.spf dl dt.res{color:var(--sage);}
.spf dl dd{margin:0;color:rgba(var(--ink-rgb),.78);}
.filter-bar{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2.5rem;}
.filter-btn{border:1px solid var(--rule);border-radius:9999px;background:var(--cream);padding:.5rem 1rem;font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:rgba(var(--ink-rgb),.7);cursor:pointer;transition:border-color .15s,color .15s,background .15s;}
.filter-btn:hover{border-color:var(--sage);color:var(--sage);}
.filter-btn.active{border-color:var(--ink);background:var(--ink);color:var(--cream);}
.pf-archive{display:grid;gap:1.5rem;grid-template-columns:1fr;}
@media(min-width:640px){.pf-archive{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1024px){.pf-archive{grid-template-columns:repeat(3,1fr);}}
.pf-tile{display:block;overflow:hidden;border:1px solid var(--rule);border-radius:1rem;background:var(--cream);transition:transform .2s,border-color .2s,box-shadow .2s;}
.pf-tile:hover{transform:translateY(-4px);border-color:var(--sage);box-shadow:0 20px 40px rgba(28,28,26,.08);}
.pf-tile .chrome{display:flex;align-items:center;gap:.375rem;border-bottom:1px solid var(--rule);background:rgba(230,235,222,.4);padding:.5rem 1rem;}
.pf-tile .chrome span{width:.5rem;height:.5rem;border-radius:9999px;background:rgba(var(--ink-rgb),.15);}
.pf-tile .shot{aspect-ratio:4/3;overflow:hidden;background:rgba(230,235,222,.3);}
.pf-tile .shot img{width:100%;height:100%;object-fit:contain;object-position:top;transition:transform .7s;}
.pf-tile:hover .shot img{transform:scale(1.02);}
.pf-tile .meta{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:1rem 1.25rem;}
.pf-tile .nm{font-family:var(--font-serif);font-size:1rem;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pf-tile .ct{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:rgba(var(--ink-rgb),.45);}
.pf-tile .arr{flex:none;color:rgba(var(--ink-rgb),.4);}
.pf-tile.hidden{display:none;}

/* Blog index */
.blog-filter{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;}
.blog-filter .count{margin-left:auto;font-size:.75rem;text-transform:uppercase;letter-spacing:.14em;color:rgba(var(--ink-rgb),.5);}
.blog-badge{border-radius:9999px;padding:.25rem .75rem;font-size:11px;text-transform:uppercase;letter-spacing:.14em;}
.blog-badge.sage{background:var(--sage);color:var(--cream);}
.blog-badge.ink{background:var(--ink);color:var(--cream);}
.blog-feat{display:grid;gap:2.5rem;margin-bottom:4rem;}
@media(min-width:1024px){.blog-feat{grid-template-columns:1.2fr 1fr;align-items:center;}}
.blog-feat .img{overflow:hidden;border-radius:1rem;border:1px solid var(--rule);background:var(--sage-soft);}
.blog-feat .img img{aspect-ratio:16/10;width:100%;object-fit:cover;transition:transform .7s;}
.blog-feat:hover .img img{transform:scale(1.02);}
.blog-feat .meta{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;font-size:.75rem;text-transform:uppercase;letter-spacing:.18em;color:rgba(var(--ink-rgb),.55);}
.blog-feat h2{margin-top:1.25rem;font-family:var(--font-serif);font-size:1.875rem;line-height:1.15;letter-spacing:-0.01em;}
@media(min-width:768px){.blog-feat h2{font-size:2.25rem;}}
.blog-feat p{margin-top:1.25rem;font-size:1.125rem;line-height:1.7;color:rgba(var(--ink-rgb),.7);}
.blog-grid{display:grid;gap:2rem 2rem;grid-template-columns:1fr;}
@media(min-width:640px){.blog-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1024px){.blog-grid{grid-template-columns:repeat(3,1fr);}}
.blog-card{display:flex;flex-direction:column;}
.blog-card .img{overflow:hidden;border-radius:1rem;border:1px solid var(--rule);background:var(--sage-soft);}
.blog-card .img img{aspect-ratio:16/10;width:100%;object-fit:cover;transition:transform .7s;}
.blog-card:hover .img img{transform:scale(1.03);}
.blog-card .meta{margin-top:1.25rem;display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:rgba(var(--ink-rgb),.55);}
.blog-card h3{margin-top:1rem;font-family:var(--font-serif);font-size:1.25rem;line-height:1.3;letter-spacing:-0.01em;transition:color .15s;}
@media(min-width:768px){.blog-card h3{font-size:1.5rem;}}
.blog-card:hover h3{color:var(--sage);}
.blog-card .ex{margin-top:.75rem;font-size:.875rem;line-height:1.7;color:rgba(var(--ink-rgb),.65);}
.blog-readmore{margin-top:1rem;display:inline-flex;align-items:center;gap:.5rem;font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--sage);}

/* Blog article (full body) */
.post-head{margin-inline:auto;max-width:760px;padding:4rem 1.5rem 0;}
.post-head .meta{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;font-size:.75rem;text-transform:uppercase;letter-spacing:.18em;color:rgba(var(--ink-rgb),.55);}
.post-head h1{margin-top:1.5rem;font-family:var(--font-serif);font-size:2.25rem;line-height:1.1;letter-spacing:-0.01em;}
@media(min-width:768px){.post-head h1{font-size:3rem;}}
.post-head .byline{margin-top:1.5rem;display:flex;align-items:center;gap:.75rem;font-size:.875rem;color:rgba(var(--ink-rgb),.6);}
.post-head .byline .line{height:1px;width:2rem;background:rgba(var(--ink-rgb),.3);}
.post-hero{margin-inline:auto;max-width:1000px;padding:2.5rem 1.5rem 0;}
.post-hero img{width:100%;border-radius:1rem;border:1px solid var(--rule);}
.post-body{margin-inline:auto;max-width:720px;padding:3rem 1.5rem 5rem;}
.post-body p{font-size:1.0625rem;line-height:1.8;color:rgba(var(--ink-rgb),.82);}
.post-body p+p{margin-top:1.5rem;}
.post-body h2{margin-top:3rem;margin-bottom:.5rem;font-family:var(--font-serif);font-size:1.75rem;line-height:1.2;letter-spacing:-0.01em;}
.post-body h3{margin-top:2rem;margin-bottom:.5rem;font-family:var(--font-serif);font-size:1.375rem;line-height:1.25;letter-spacing:-0.01em;}
.post-body a{color:var(--sage);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(138,157,122,.5);}
.post-body a:hover{color:var(--ink);}
.post-body ul,.post-body ol{margin:1.25rem 0;padding-left:1.4rem;display:flex;flex-direction:column;gap:.625rem;}
.post-body li{font-size:1.0625rem;line-height:1.7;color:rgba(var(--ink-rgb),.82);}
.post-body ul li{list-style:disc;}
.post-body ol li{list-style:decimal;}
.post-body strong{font-weight:600;color:var(--ink);}
.post-body img{margin:2rem 0;width:100%;border-radius:.75rem;border:1px solid var(--rule);}
.post-hero .breadcrumb{margin-bottom:1.25rem;font-size:.8125rem;text-transform:uppercase;letter-spacing:.12em;color:rgba(var(--ink-rgb),.5);}
.post-hero .breadcrumb a{color:rgba(var(--ink-rgb),.6);}
.post-hero .breadcrumb a:hover{color:var(--sage);}
.post-hero .breadcrumb .sep{margin:0 .4rem;color:rgba(var(--ink-rgb),.3);}
.post-feature{margin-inline:auto;max-width:1000px;}
.post-feature img{width:100%;border-radius:1rem;border:1px solid var(--rule);}

/* Contact page */
.contact-grid{display:grid;gap:2.5rem;margin-inline:auto;max-width:1200px;padding:0 1.5rem 6rem;}
@media(min-width:1024px){.contact-grid{grid-template-columns:minmax(0,360px) minmax(0,1fr);padding-inline:2.5rem;}}
.contact-aside{display:flex;flex-direction:column;gap:2rem;}
.contact-aside .row{display:flex;align-items:flex-start;gap:.75rem;font-size:.875rem;color:rgba(var(--ink-rgb),.75);}
.contact-aside a.row:hover{color:var(--sage);}
.contact-aside .ic{margin-top:2px;flex:none;color:var(--sage);width:1rem;height:1rem;}
.contact-aside .lbl{margin-bottom:.5rem;font-size:.75rem;text-transform:uppercase;letter-spacing:.18em;color:rgba(var(--ink-rgb),.45);}
.cform{border:1px solid var(--rule);border-radius:1.5rem;background:var(--cream);padding:2rem;}
@media(min-width:1024px){.cform{padding:2.5rem;}}
.cform .grid{display:grid;gap:1.25rem;}
.cform .two{display:grid;gap:1.25rem;}
@media(min-width:640px){.cform .two{grid-template-columns:1fr 1fr;}}
.f-label{margin-bottom:.375rem;display:block;font-size:.75rem;text-transform:uppercase;letter-spacing:.14em;color:rgba(var(--ink-rgb),.55);}
.f-input,.f-select,.f-textarea{width:100%;min-height:44px;border:1px solid var(--rule);border-radius:.5rem;background:var(--cream);padding:.75rem 1rem;font-size:.875rem;font-family:inherit;color:var(--ink);outline:none;transition:border-color .15s;}
.f-input:focus,.f-select:focus,.f-textarea:focus{border-color:var(--sage);}
.f-textarea{resize:vertical;}
.cform .err{margin-top:.75rem;font-size:.8125rem;color:#b3261e;}
.cform-success{display:none;place-items:center;padding:4rem 0;text-align:center;}
.cform-success.show{display:grid;}
.cform.is-sent .cform-body{display:none;}
.cform-success .eyebrow{color:var(--sage);}
.cform-success h3{margin-top:.5rem;font-family:var(--font-serif);font-size:1.875rem;}
.cform-success p{margin-top:.75rem;max-width:28rem;font-size:.875rem;color:rgba(var(--ink-rgb),.65);}

/* Hold/flag note (parked G items) */
.hold-note{margin:1.5rem auto;max-width:1200px;border:1px dashed #c08a3e;background:#fbf4e8;color:#7a4f12;border-radius:.75rem;padding:1rem 1.25rem;font-size:.85rem;line-height:1.6;}
.hold-note strong{color:#7a4f12;}
.flag-caveat{font-size:11px;font-style:italic;color:#9a6b2f;}

/* SEO page: faux SERP / local pack */
.serp{margin-top:2rem;overflow:hidden;border-radius:1rem;border:1px solid var(--rule);background:var(--cream);box-shadow:0 30px 60px -40px rgba(28,28,26,.35);}
.serp-bar{display:flex;align-items:center;gap:.5rem;border-bottom:1px solid var(--rule);background:rgba(var(--sage-rgb),.1);padding:.5rem 1rem;font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:rgba(var(--ink-rgb),.55);}
.serp-bar .dot{width:.5rem;height:.5rem;border-radius:9999px;background:rgba(var(--ink-rgb),.2);}
.serp-bar .url{margin-left:.75rem;text-transform:none;letter-spacing:normal;}
.serp-row{display:flex;align-items:center;gap:1rem;border-top:1px solid var(--rule);padding:1rem 1.25rem;}
.serp-row:first-child{border-top:0;}
.serp-row.top{background:rgba(var(--sage-rgb),.15);}
.serp-row .rank{font-family:var(--font-serif);font-size:1.25rem;color:var(--sage);}
.serp-row .nm{font-family:var(--font-serif);font-size:1.0625rem;letter-spacing:-0.01em;}
.serp-row .mt{font-size:.75rem;color:rgba(var(--ink-rgb),.55);}
.serp-foot{border-top:1px solid var(--rule);padding:.75rem 1.25rem;font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:rgba(var(--ink-rgb),.45);}

/* EEAT badge cards */
.eeat{display:grid;gap:1rem;margin-top:3.5rem;grid-template-columns:1fr;}
@media(min-width:640px){.eeat{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1024px){.eeat{grid-template-columns:repeat(4,1fr);}}
.eeat li{display:flex;flex-direction:column;gap:1rem;border:1px solid var(--rule);border-radius:1.5rem;background:var(--cream);padding:1.75rem;}
.eeat .top{display:flex;align-items:center;gap:.75rem;}
.eeat .badge{display:grid;place-items:center;width:3rem;height:3rem;border-radius:9999px;background:var(--ink);font-family:var(--font-serif);font-size:1.5rem;color:var(--sage);}
.eeat .ix{font-size:.75rem;text-transform:uppercase;letter-spacing:.16em;color:rgba(var(--ink-rgb),.45);}
.eeat h3{font-family:var(--font-serif);font-size:1.5rem;letter-spacing:-0.01em;}
.eeat p{font-size:.875rem;line-height:1.7;color:rgba(var(--ink-rgb),.65);}
.kpanel{margin-top:4rem;display:grid;gap:2.5rem;border:1px solid var(--rule);border-radius:1.5rem;background:rgba(var(--sage-rgb),.07);padding:2rem;}
@media(min-width:1024px){.kpanel{grid-template-columns:1fr 1.4fr;padding:3rem;}}
.kpanel h3{font-family:var(--font-serif);font-size:1.5rem;line-height:1.15;letter-spacing:-0.01em;}
@media(min-width:768px){.kpanel h3{font-size:1.875rem;}}
.kpanel p{font-size:1rem;line-height:1.7;color:rgba(var(--ink-rgb),.75);}

/* Big numeric stats (dark) */
.bigstats{display:grid;gap:1px;overflow:hidden;background:rgba(246,244,238,.1);margin-top:3.5rem;}
.bigstat{background:var(--ink);padding:2rem 1.5rem;}
@media(min-width:768px){.bigstats{grid-template-columns:repeat(3,1fr);}}
.bigstat{border-top:1px solid rgba(var(--cream-rgb),.15);padding-top:1.5rem;}
.bigstat .n{font-family:var(--font-serif);font-size:3.75rem;letter-spacing:-0.02em;color:var(--sage);}
@media(min-width:768px){.bigstat .n{font-size:4.5rem;}}
.bigstat .l{margin-top:1rem;max-width:18rem;font-size:.875rem;line-height:1.7;color:rgba(var(--cream-rgb),.7);}

/* Islands grid */
.isle-grid{display:grid;gap:1rem;margin-top:3rem;grid-template-columns:1fr;}
@media(min-width:640px){.isle-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1024px){.isle-grid{grid-template-columns:repeat(5,1fr);}}
.isle{display:flex;height:100%;flex-direction:column;justify-content:space-between;gap:2rem;border:1px solid var(--rule);border-radius:1.5rem;background:var(--cream);padding:1.5rem;transition:border-color .2s,background .2s;}
a.isle:hover{border-color:var(--sage);background:rgba(var(--sage-rgb),.1);}
.isle.here{border-color:var(--sage);background:var(--ink);color:var(--cream);}
.isle h3{font-family:var(--font-serif);font-size:1.5rem;line-height:1.1;letter-spacing:-0.01em;}
.isle .note{font-size:.75rem;text-transform:uppercase;letter-spacing:.16em;color:rgba(var(--ink-rgb),.55);}
.isle.here .note{color:var(--sage);}

.footer-legal{display:inline-flex;gap:.5rem;align-items:center;color:rgba(28,28,26,.45);}
.footer-legal a{color:rgba(28,28,26,.55);transition:color .15s;}
.footer-legal a:hover{color:var(--sage);}

/* Hero: keep design display headline visible while a semantic <h1> carries the live value */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.svc-hero .hero-display{margin-top:1.5rem;font-family:var(--font-serif);font-size:2.25rem;line-height:1.05;letter-spacing:-0.02em;}
@media(min-width:640px){.svc-hero .hero-display{font-size:3rem;}}
@media(min-width:1024px){.svc-hero .hero-display{font-size:3.75rem;}}
.svc-hero .hero-display.xl{font-size:3rem;line-height:1.02;}
@media(min-width:768px){.svc-hero .hero-display.xl{font-size:3.75rem;}}
@media(min-width:1024px){.svc-hero .hero-display.xl{font-size:4.5rem;}}

/* ===== Client logo slider (homepage) — 11 live "Our Clients" logos, randomized on load, +20% scale (3rem→3.6rem) ===== */
.logo-slider{margin-top:4rem;border-block:1px solid var(--rule);padding-block:2rem;}
.logo-slider .truststrip-label{margin-bottom:1.5rem;text-align:center;font-family:var(--font-serif);font-size:.75rem;text-transform:uppercase;letter-spacing:.2em;color:rgba(var(--ink-rgb),.4);}
.logo-slider-viewport{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);}
.logo-track{display:flex;align-items:center;width:max-content;list-style:none;margin:0;padding:0;animation:logo-marquee 42s linear infinite;}
.logo-track li{flex:0 0 auto;margin-right:3.5rem;}
.logo-track img{height:3.6rem;width:auto;max-width:192px;object-fit:contain;opacity:.7;filter:grayscale(1);transition:opacity .2s,filter .2s;}
.logo-track img:hover{opacity:1;filter:grayscale(0);}
.logo-slider-viewport:hover .logo-track{animation-play-state:paused;}
@keyframes logo-marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media(prefers-reduced-motion:reduce){.logo-track{animation:none;flex-wrap:wrap;justify-content:center;row-gap:2rem;}}

/* Widen the footer Contact column so the email address doesn't wrap */
@media(min-width:1024px){.footer-grid{gap:2.5rem 1.5rem;}} /* even 4 columns; tighter h-gap so email fits */
.footer-col .footer-map{display:block;transition:color .15s;}
.footer-col .footer-map:hover{color:var(--sage);}

/* ===== Dark CTA bands: contain inner content. `.sec .inner` has the max-width wrapper, but
   bands using class="sec--dark" alone never got `.sec--dark .inner`, so content went full-bleed.
   This one rule fixes all 20 such bands sitewide (FinalCta, CaseResult, etc.). ===== */
.sec--dark .inner{margin-inline:auto;max-width:1200px;padding:5rem 1.5rem;}
@media(min-width:1024px){.sec--dark .inner{padding:7rem 2.5rem;}}

/* ===== Logo-design work grid → Lovable spec: 5 cols desktop / 3 tablet / 2 mobile, aspect-square cream cards ===== */
.logo-grid{gap:.75rem;}
@media(min-width:1024px){.logo-grid{grid-template-columns:repeat(5,1fr);}}
.logo-grid .cellbox{background:var(--cream);border:0;aspect-ratio:1;transition:background .2s;}
.logo-grid .cellbox:hover{background:var(--sage-soft);}
.logo-grid img{max-height:100%;max-width:100%;}

/* ===== Heading line-balance (sitewide, CSS only): even out multi-line Fraunces display
   headings and remove single-word orphans. Headings/display classes ONLY — never body or <p>
   (.hero-title is a <p> used as the hero display headline, so it's included intentionally). ===== */
h1, h2, h3, .hero-title, .h2d, .section-title { text-wrap: balance; }

/* ===== Case-study pages (/case-study/<slug>/) — faithful to the Lovable bundle design ===== */
.cs-hero{border-bottom:1px solid var(--rule);}
.cs-hero .inner{margin-inline:auto;max-width:1200px;padding:3.5rem 1.5rem 2.5rem;}
@media(min-width:1024px){.cs-hero .inner{padding:5.5rem 2.5rem 3rem;}}
.cs-back{display:inline-flex;align-items:center;gap:.4rem;font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:rgba(var(--ink-rgb),.55);}
.cs-back:hover{color:var(--sage);}
.cs-hero-grid{margin-top:2rem;display:grid;grid-template-columns:minmax(0,1fr);gap:2.5rem;align-items:center;}
.cs-hero-aside{display:flex;flex-direction:column;gap:1.5rem;}
.cs-hero-mockup img{display:block;width:100%;height:auto;}
@media(min-width:1024px){.cs-hero-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:3rem;}
  /* mockup column centers vertically next to the (top-anchored) hero text; text column
     stays flex-start so the F2 eyebrow start-line is preserved. */
  .cs-hero-aside{align-self:center;}}
.cs-eyebrow{font-size:.75rem;text-transform:uppercase;letter-spacing:.22em;color:rgba(var(--ink-rgb),.55);}
.cs-title{margin-top:1.25rem;font-family:var(--font-serif);font-size:2.5rem;line-height:1.05;letter-spacing:-0.02em;}
@media(min-width:640px){.cs-title{font-size:3rem;}}
@media(min-width:1024px){.cs-title{font-size:4rem;}}
.cs-lead{margin-top:1.5rem;max-width:42rem;font-size:1.125rem;line-height:1.7;color:rgba(var(--ink-rgb),.7);}
.cs-hero-ctas{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.75rem;}
.cs-trust{justify-content:flex-start;}
@media(min-width:1024px){.cs-trust{justify-content:flex-end;}}
.cs-frame{margin-inline:auto;max-width:1200px;padding:0 1.5rem 3.5rem;}
@media(min-width:1024px){.cs-frame{padding-inline:2.5rem;padding-bottom:4rem;}}
.cs-browser{overflow:hidden;border-radius:1rem;border:1px solid var(--rule);background:#fff;}
.cs-browser-bar{display:flex;align-items:center;gap:.4rem;border-bottom:1px solid var(--rule);background:rgba(var(--sage-rgb),.12);padding:.6rem 1rem;}
.cs-browser-bar .dot{width:.6rem;height:.6rem;border-radius:9999px;background:rgba(var(--ink-rgb),.15);}
.cs-browser-bar .u{margin-left:.5rem;font-size:11px;color:rgba(var(--ink-rgb),.45);}
.cs-browser img{display:block;width:100%;}
.cs-meta{border-top:1px solid var(--rule);background:var(--cream);}
.cs-meta .inner{margin-inline:auto;max-width:1200px;display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;padding:2rem 1.5rem;}
@media(min-width:640px){.cs-meta .inner{grid-template-columns:repeat(4,1fr);}}
@media(min-width:1024px){.cs-meta .inner{padding-inline:2.5rem;}}
.cs-meta .k{font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:rgba(var(--ink-rgb),.45);}
.cs-meta .v{margin-top:.5rem;font-family:var(--font-serif);font-size:1rem;color:var(--ink);}
.cs-process .inner{margin-inline:auto;max-width:1200px;padding:4rem 1.5rem;display:grid;gap:3rem;}
@media(min-width:1024px){.cs-process .inner{grid-template-columns:220px minmax(0,1fr);gap:5rem;padding:7rem 2.5rem;}}
.cs-toc{align-self:start;}
@media(min-width:1024px){.cs-toc{position:sticky;top:7rem;}}
.cs-toc .lbl{margin-bottom:1.25rem;font-size:11px;text-transform:uppercase;letter-spacing:.22em;color:rgba(var(--ink-rgb),.45);}
.cs-toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.75rem;}
.cs-toc a{display:block;border-left:2px solid var(--rule);padding:.25rem 0 .25rem 1rem;font-family:var(--font-serif);font-style:italic;font-size:.95rem;color:rgba(var(--ink-rgb),.55);transition:.15s;}
.cs-toc a:hover{color:var(--ink);border-color:rgba(var(--sage-rgb),.6);}
.cs-toc a.active{color:var(--ink);border-color:var(--sage);}
.cs-sections{display:flex;flex-direction:column;gap:5rem;}
.cs-section{scroll-margin-top:7rem;}
.cs-section .l{font-size:11px;text-transform:uppercase;letter-spacing:.22em;color:var(--sage);}
.cs-section h2{margin-top:1rem;font-family:var(--font-serif);font-size:1.875rem;line-height:1.2;letter-spacing:-0.01em;}
@media(min-width:640px){.cs-section h2{font-size:2.25rem;}}
.cs-section p.t{margin-top:1.5rem;max-width:60ch;font-size:1.0625rem;line-height:1.75;color:rgba(var(--ink-rgb),.75);}
.cs-section ul{margin-top:2rem;border-top:1px solid var(--rule);padding-top:1.5rem;display:grid;gap:.75rem;list-style:none;}
.cs-section ul li{position:relative;padding-left:1.4rem;font-size:.95rem;line-height:1.6;color:rgba(var(--ink-rgb),.7);}
.cs-section ul li::before{content:"";position:absolute;left:0;top:.55rem;width:.4rem;height:.4rem;border-radius:9999px;background:var(--sage);}
.cs-section ul li strong{color:rgba(var(--ink-rgb),.95);}
.cs-section ul ul{margin-top:.75rem;border-top:none;padding-top:0;}
.cs-ba{margin-top:2rem;display:grid;gap:1rem;}
@media(min-width:640px){.cs-ba{grid-template-columns:1fr 1fr;}}
.cs-ba figure{overflow:hidden;border-radius:.75rem;border:1px solid var(--rule);background:#fff;margin:0;}
.cs-ba figcaption{border-bottom:1px solid var(--rule);background:rgba(var(--sage-rgb),.12);padding:.5rem 1rem;font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:rgba(var(--ink-rgb),.55);}
.cs-ba img{display:block;width:100%;}
.cs-ba-cap{margin-top:1rem;font-style:italic;font-size:.875rem;color:rgba(var(--ink-rgb),.55);}
.cs-stats{background:var(--ink);color:var(--cream);}
.cs-stats .inner{margin-inline:auto;max-width:1200px;padding:4rem 1.5rem;}
@media(min-width:1024px){.cs-stats .inner{padding:4.5rem 2.5rem;}}
.cs-stats .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.22em;color:rgba(var(--cream-rgb),.55);}
.cs-stats .grid{margin-top:2.25rem;display:grid;grid-template-columns:repeat(2,1fr);gap:2.5rem;align-items:start;}
@media(min-width:640px){.cs-stats .grid{grid-template-columns:repeat(4,1fr);}}
.cs-stats .grid > div{border-top:1px solid rgba(var(--cream-rgb),.2);padding-top:1.1rem;}
.cs-stats .n{font-family:var(--font-serif);font-size:2.5rem;line-height:1;letter-spacing:-0.01em;color:var(--sage);white-space:nowrap;}
@media(min-width:768px){.cs-stats .n{font-size:3rem;}}
.cs-stats .l{margin-top:.9rem;font-size:10px;line-height:1.5;text-transform:uppercase;letter-spacing:.07em;color:rgba(var(--cream-rgb),.62);}
.cs-stats .cs-src{margin-top:2rem;font-size:.78rem;color:rgba(var(--cream-rgb),.5)!important;}
.cs-next{margin-inline:auto;max-width:1200px;padding:4rem 1.5rem 5rem;display:grid;gap:1.5rem;}
/* wider content ONLY inside the dark outcome band (rest of page stays 1200px) */
.cs-stats .inner{max-width:1320px;}
@media(min-width:768px){.cs-next{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding-inline:2.5rem;}}
.cs-next .card{min-width:0;display:block;border:1px solid var(--rule);border-radius:1rem;padding:2.5rem;transition:.2s;}
.cs-next .card:hover{border-color:var(--sage);background:rgba(var(--sage-rgb),.06);}
.cs-next .l{font-size:11px;text-transform:uppercase;letter-spacing:.22em;color:rgba(var(--ink-rgb),.45);}
.cs-next h3{margin-top:1rem;font-family:var(--font-serif);font-size:1.875rem;letter-spacing:-0.01em;}
.cs-next .more{margin-top:1.5rem;display:inline-block;font-size:.875rem;color:rgba(var(--ink-rgb),.65);}
.cs-next .card:hover .more{color:var(--sage);}
.cs-next .cta{min-width:0;display:flex;flex-direction:column;justify-content:space-between;border-radius:1rem;background:var(--ink);color:var(--cream);padding:2.5rem;}
.cs-next .cta .l{color:rgba(var(--cream-rgb),.55);}
.cs-next .cta h3{color:var(--cream);}
.cs-next .cta-row{margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:.75rem;}

/* Next-case teaser: one-line muted summary of the next case study (subordinate to the name) */
.cs-next .teaser{margin-top:.75rem;font-size:.9375rem;line-height:1.6;color:rgba(var(--ink-rgb),.65);}

/* ============================================================================
   MOBILE HEADER + HERO + CAPABILITIES ACCORDION (2026-07-03 consolidated)
   Appended last so it wins the cascade. Desktop (>=1024px) is UNCHANGED — every
   behavioral rule is scoped to <lg (max-width:1023px). No content/copy/SEO edits.
   ============================================================================ */

/* "Home" link shows only inside the mobile hamburger menu; hidden on the desktop nav bar */
@media(min-width:1024px){.nav-home-only{display:none;}}

/* nav action cluster: phone icon + Contact pill at mobile; Contact pill + menu at desktop */
.nav-actions{display:flex;align-items:center;gap:.5rem;}
.nav-call{display:none;align-items:center;justify-content:center;width:44px;height:44px;border-radius:9999px;color:var(--ink);transition:color .15s;}
.nav-call:hover{color:var(--sage);}
.nav-call svg{width:20px;height:20px;}
.nav-cta{min-height:44px;}

@media(max-width:1023px){
  /* ---- 3a — utility bar removed at mobile (kills the email clip + boundary line).
     Header row at mobile: logo + phone icon (tel:, phone_click) + Contact pill + hamburger.
     Email is dropped from the header and lives in the footer. Fits 360px with ~22px of
     gap between the logo and the action cluster. ---- */
  .topbar{display:none;}
  .nav-call{display:inline-flex;}
  .nav-cta{display:inline-flex;align-items:center;padding:.5rem .85rem;font-size:12px;}
  .nav{gap:.4rem;}
  .nav-logo img{height:2.28rem;}
  .nav-actions{gap:.35rem;}

  /* hero CTAs stay visible in the hero (was hidden by the 2026-07-02 bar rework) */
  .svc-hero .cta-row,.hero-ctas{display:flex;}

  /* generic (non-home) heroes: image drops below the headline */
  .svc-hero .hero-art-wrap,.svc-hero.art-left .hero-art-wrap{order:2;margin-top:.5rem;}
  .hero-grid .hero-art{order:2;margin-top:.5rem;}

  /* trust bar: centered vertical stack, one item per line */
  .trustbar{flex-direction:column;align-items:center;text-align:center;gap:.4rem;}
  .trustbar .sep{display:none;}

  /* ---- 3b — VARIANT A (LIVE): homepage hero stacked; turtle last & reduced.
     Scoped to the homepage hero only (the one carrying the client logo slider).
     display:contents hoists the two .hero-grid children into .hero's flex context
     so copy / trust bar / logo strip / turtle order across the two containers —
     the source DOM order is unchanged. ---- */
  .hero:has(> .logo-slider){display:flex;flex-direction:column;}
  .hero:has(> .logo-slider) .hero-grid{display:contents;}
  .hero:has(> .logo-slider) .hero-grid > div:not(.hero-art){order:1;}   /* copy + trust bar */
  .hero:has(> .logo-slider) > .logo-slider{order:3;margin-top:2.5rem;}  /* client logo strip */
  .hero:has(> .logo-slider) .hero-grid > .hero-art{order:4;margin-top:2.5rem;max-width:none;} /* full width so the caption stays readable */
  .hero:has(> .logo-slider) .hero-grid > .hero-art img{display:block;width:250px;max-width:100%;height:auto;margin-inline:auto;} /* turtle 250px, square (fixes the height="380" attr + object-fit:fill squash), centered */
  /* center the hero CTA pills (Schedule/Get started + Call) at mobile on EVERY page's hero */
  .hero-ctas,.svc-hero .cta-row,.cs-hero-ctas{justify-content:center;}

  /* ---- 3c — "What we handle": tabs become an in-place accordion at mobile.
     The two desktop containers (index rail + panel stack) are flattened with
     display:contents so every group header / step-row / step-detail becomes a
     sibling in one flex column, then `order` weaves each step's detail directly
     beneath its row. All detail stays in the static DOM (CSS show/hide via the
     existing .cap-step.active), so indexing parity is preserved. Desktop untouched. ---- */
  .capabilities .cap-grid{display:flex;flex-direction:column;gap:0;margin-top:2.5rem;}
  .capabilities .cap-nav,.capabilities .cap-group,.capabilities .cap-list,.capabilities .cap-panels{display:contents;}
  /* group headers */
  .capabilities .cap-group > p{order:95;margin:1.75rem 0 .25rem;padding-bottom:.5rem;font-size:.8125rem;text-transform:uppercase;letter-spacing:.12em;color:rgba(var(--ink-rgb),.55);}
  .capabilities .cap-group:nth-of-type(1) > p{order:95;margin-top:0;}
  .capabilities .cap-group:nth-of-type(2) > p{order:128;}
  .capabilities .cap-group:nth-of-type(3) > p{order:158;}
  /* step rows (buttons) — 44px tap rows with a chevron affordance */
  .capabilities .cap-tab{width:100%;min-height:44px;gap:.75rem;padding:.75rem .5rem;border-bottom:1px solid var(--rule);border-radius:0;font-size:1rem;}
  .capabilities .cap-tab.active{background:transparent;box-shadow:none;color:var(--ink);}
  .capabilities .cap-tab::after{content:"";flex:none;margin-left:auto;width:.5rem;height:.5rem;border-right:2px solid rgba(var(--ink-rgb),.5);border-bottom:2px solid rgba(var(--ink-rgb),.5);transform:rotate(45deg) translateY(-2px);transition:transform .2s;}
  .capabilities .cap-tab.active::after{transform:rotate(225deg) translateY(-2px);border-color:var(--sage);}
  /* step detail panels — open directly beneath their row; hidden ones stay in the DOM */
  .capabilities .cap-tab[data-idx="0"]{order:100;} .capabilities .cap-step[data-idx="0"]{order:105;}
  .capabilities .cap-tab[data-idx="1"]{order:110;} .capabilities .cap-step[data-idx="1"]{order:115;}
  .capabilities .cap-tab[data-idx="2"]{order:120;} .capabilities .cap-step[data-idx="2"]{order:125;}
  .capabilities .cap-tab[data-idx="3"]{order:130;} .capabilities .cap-step[data-idx="3"]{order:135;}
  .capabilities .cap-tab[data-idx="4"]{order:140;} .capabilities .cap-step[data-idx="4"]{order:145;}
  .capabilities .cap-tab[data-idx="5"]{order:150;} .capabilities .cap-step[data-idx="5"]{order:155;}
  .capabilities .cap-tab[data-idx="6"]{order:160;} .capabilities .cap-step[data-idx="6"]{order:165;}
  .capabilities .cap-tab[data-idx="7"]{order:170;} .capabilities .cap-step[data-idx="7"]{order:175;}
  .capabilities .cap-tab[data-idx="8"]{order:180;} .capabilities .cap-step[data-idx="8"]{order:185;}
  .capabilities .cap-tab[data-idx="9"]{order:190;} .capabilities .cap-step[data-idx="9"]{order:195;}
  .capabilities .cap-panel{padding:1.5rem;margin:.25rem 0 .5rem;border-radius:.75rem;}
  .capabilities .cap-panel h3{padding-right:0;}
  .capabilities .cap-badge{display:none;}   /* 3c — remove the 07/10 tab counter + prev/next at mobile */
}

/* ============================================================================
   MOBILE (2026-07-03): /web-design-website-development/ — before/after drag
   slider → stacked static images; comparison grid → stacked cards. Scoped <lg;
   desktop slider + table untouched. Both images / all cells stay in the DOM.
   ============================================================================ */
@media(max-width:1023px){
  /* before/after: stack "Before" (label + full image) then "After" (label + full image) */
  .ba-stage{position:static;aspect-ratio:auto;overflow:visible;cursor:default;display:flex;flex-direction:column;gap:.6rem;background:transparent;}
  .ba-tag{position:static;align-self:flex-start;}
  .ba-tag-before{order:1;}
  .ba-before{position:static;order:2;width:100%!important;height:auto;overflow:visible;}
  .ba-before img{position:static;width:100%!important;height:auto!important;max-width:100%;object-fit:contain;}
  .ba-tag-after{order:3;}
  .ba-after{position:static;order:4;width:100%;height:auto;object-fit:contain;}
  .ba-handle,.ba-range{display:none!important;}

  /* comparison grid → stacked cards (replaces the overflow-x:auto scroll wrapper) */
  .cmp-wrap{overflow-x:visible;border:0;border-radius:0;}
  .cmp{display:block;min-width:0;background:transparent;gap:0;}
  .cmp .hd{display:none;}
  .cmp .f{display:block;margin-top:1.5rem;padding:.5rem 0;border-top:1px solid var(--rule);font-size:1.0625rem;}
  .cmp .c{display:block;margin-top:.4rem;padding:.7rem .9rem;border:1px solid var(--rule);border-radius:.6rem;background:var(--cream);}
  .cmp .c.us{background:rgba(var(--sage-rgb),.1);border-color:rgba(var(--sage-rgb),.35);}
  .cmp .c[data-cmp-label]::before{content:attr(data-cmp-label);display:block;margin-bottom:.35rem;font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:rgba(var(--ink-rgb),.5);}

  /* client "namestrip" (hosting + website-maintenance): inline dotted run strands the
     interpunct at line breaks on mobile → 2-col grid, one name per cell, dots removed,
     left-aligned, underline kept. Shared class → fixes every page it renders on. */
  .namestrip{display:grid;grid-template-columns:1fr 1fr;gap:.6rem 1.5rem;align-items:start;}
  .namestrip .dot{display:none;}
}

/* ============================================================================
   MOBILE (2026-07-03): dark stats-band value rhythm. Portfolio (.pf-numbers) and
   island (.bigstat) values sit at 3–3.75rem, so multi-word values ("Since 2010")
   wrap tall/ragged and break row alignment vs the tighter .dstat reference
   (1.875rem, maintenance). Scale those two down at mobile + balance any wrap into a
   clean 2-line lockup. Values verbatim; desktop sizes unchanged.
   ============================================================================ */
.pf-numbers .n, .bigstat .n, .dstat .k{text-wrap:balance;}
@media(max-width:639px){
  .pf-numbers .n{font-size:1.875rem;line-height:1.15;}
  .bigstat .n{font-size:2.25rem;line-height:1.15;}
}

/* ============================================================================
   MOBILE (2026-07-03): sticky header — hide on scroll-down, show on scroll-up.
   position:sticky (NOT fixed) → stays in flow, so zero CLS and no placeholder.
   Slim profile (≤60px) once scrolled; JS toggles .hh-hidden/.hh-slim. Desktop
   (>=1024) keeps the header static — no sticky rule applies there.
   ============================================================================ */
@media(max-width:1023px){
  .site-head{position:sticky;top:0;z-index:100;transition:transform .22s ease, padding .18s ease;will-change:transform;}
  .site-head.hh-hidden{transform:translateY(-100%);}
  .site-head.hh-slim .nav{padding-block:.55rem;}   /* tighten to keep the bar ≤60px; tap targets stay 44px */
  [id]{scroll-margin-top:64px;}                     /* in-page anchors clear the sticky bar */
}

/* ============================================================================
   MOBILE (2026-07-04): interior hero top-spacing token. Service/IT/island heroes
   (.svc-hero) had 5rem top padding (80px header→eyebrow gap) vs 2rem on the
   .hero pages — inconsistent + too large. One shared mobile token (2rem) so
   eyebrow+H1+sub+CTAs sit higher. Homepage Variant A (.hero with logo slider)
   excluded. Desktop padding (>=1024) unchanged.
   ============================================================================ */
@media(max-width:1023px){
  .svc-hero .inner{padding-top:2rem;}
  .hero:not(:has(> .logo-slider)){padding-top:2rem;}
}

/* MOBILE (2026-07-04): hide the case-study "THE CASE FILE" 01–06 section list (sticky
   TOC) — content flows straight into "01 BRIEF". Stays in DOM; desktop unchanged. */
@media(max-width:1023px){ .cs-toc{display:none;} }

/* ============================================================================
   MOBILE (2026-07-04): footer bottom bar. Trust line split into units — desktop
   stays inline, dot-separated (unchanged); mobile stacks them centered with no
   dots, so no mid-name breaks and no stranded '·'. Legal names nowrap. Shared footer.
   ============================================================================ */
.fb-trust > span{white-space:nowrap;}
.fb-trust > span:not(:first-child)::before{content:"·";margin:0 .5rem;color:rgba(var(--ink-rgb),.35);}
@media(max-width:1023px){
  .footer-bottom .inner{flex-direction:column;text-align:center;justify-content:center;gap:1rem;}
  .fb-trust{display:flex;flex-direction:column;align-items:center;gap:.3rem;}
  .fb-trust > span:not(:first-child)::before{content:none;}
  .footer-legal a,.footer-legal .made{white-space:nowrap;}
}

/* ============================================================================
   Static, CSS-cycled per-page testimonials (no JS). Grid-stack so the stage
   sizes to the tallest review; slides crossfade on a timer. .n1/.n2/.n3 = count.
   Reduced-motion: show the first review only. All reviews stay in the DOM.
   ============================================================================ */
.tm-cycle .tm-stage{display:grid;}
.tm-cycle .tm-slide{grid-area:1 / 1;display:block;opacity:0;}
.tm-cycle.n1 .tm-slide{opacity:1;}
.tm-cycle.n2 .tm-slide{animation:tmfade2 16s infinite;}
.tm-cycle.n2 .tm-slide:nth-child(2){animation-delay:8s;}
.tm-cycle.n3 .tm-slide{animation:tmfade3 24s infinite;}
.tm-cycle.n3 .tm-slide:nth-child(2){animation-delay:8s;}
.tm-cycle.n3 .tm-slide:nth-child(3){animation-delay:16s;}
@keyframes tmfade2{0%{opacity:0}2%{opacity:1}48%{opacity:1}50%{opacity:0}100%{opacity:0}}
@keyframes tmfade3{0%{opacity:0}2%{opacity:1}31%{opacity:1}33%{opacity:0}100%{opacity:0}}
.tm-cycle .tm-foot .src{text-transform:uppercase;letter-spacing:.14em;font-size:.6875rem;color:rgba(var(--ink-rgb),.45);}
@media(prefers-reduced-motion:reduce){.tm-cycle .tm-slide{animation:none!important;opacity:0}.tm-cycle .tm-slide:first-child{opacity:1}}

/* DESKTOP (2026-07-04): portfolio .pf-numbers "Since 2010" wrapped 2 lines in its 4-up
   column. Width first (trim cell h-padding); the value can't fit 4-up at 3.75rem in the
   1200 band, so step the tier down UNIFORMLY to 3rem — every value now one line at
   1280–1920. Breakpoint-scoped so it doesn't fight the ≤639 mobile rhythm rule. */
@media(min-width:768px){
  .pf-numbers > div{padding:2rem 1rem;}
  .pf-numbers .n{font-size:3rem;}
}

/* ==== STREAM A: case-study desktop fixes 2026-07-04 ==== */
/* A3 — Scope/Stack/Timeline meta band: 3 items were laid into a 4-col grid,
   leaving an empty 4th column (left-weighted, dead space at right).
   Even 3-col group, evenly gutter-ed, centered within the 1200px content box. */
@media(min-width:640px){
  .cs-meta .inner{grid-template-columns:repeat(3,1fr);}
}
/* A4 — case-study PAGE hero tag row: reuse the shared .case-tags/.tag pattern,
   just give it breathing room in the hero (the card's margin-top:auto is inert here). */
.cs-hero .case-tags{margin-top:1.25rem;}
/* A4 — .tag-link (shared: Stream C reuses this class, does NOT redefine it).
   Inherits the .tag pill look via the doubled class; adds a subtle linked
   affordance — a faint inset ring at rest to read as interactive among static
   pills, filling to sage on hover/focus. */
.tag-link{text-decoration:none;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(var(--ink-rgb),.18);transition:background .15s ease,box-shadow .15s ease,color .15s ease;}
.tag-link:hover,.tag-link:focus-visible{background:var(--sage);color:#fff;box-shadow:inset 0 0 0 1px var(--sage);}
/* ==== END STREAM A ==== */
/* ==== STREAM C: portfolio spotlight + filter pills 2026-07-04 ==== */
/* C2 — Spotlight heading proximity (DESKTOP + mobile). `.section` ships padding-top:0,
   so the "Spotlight" heading sat tight under the dark "By the numbers" band while its
   3rem heading-bottom pushed it far from the first entry (above < below, backwards).
   Give the section the design system's standard section-top rhythm (mirrors `.sec .inner`:
   5rem mobile / 7rem desktop); the inline heading-bottom is trimmed to the page-standard
   2.5rem in markup. Result: space ABOVE (7rem/5rem) is clearly larger than BELOW (2.5rem)
   at both breakpoints. Scoped to portfolio via .pf-spotlight — the maintenance/hosting/IT/
   island pages use `.sec .inner` after their dark bands and already have this rhythm. */
.pf-spotlight{padding-top:5rem;}
@media(min-width:1024px){.pf-spotlight{padding-top:7rem;}}

/* C3 — "The full archive" filter pills: center the group. The container's single `gap`
   already makes wrapped-row vertical gap == horizontal pill gap; adding justify-content
   makes every wrapped row share one center axis ("ALL" stays first as source-order first).
   Portfolio is the only page with .filter-bar and it had no prior mobile treatment, so this
   applies at all widths. Mobile: enforce >=44px tap targets (base .filter-btn computes ~32px). */
.filter-bar{justify-content:center;}
@media(max-width:1023px){
  .filter-bar .filter-btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;}
}

/* ==== STRUCTURAL REPAIR 2026-07-04 ====
   Stream C3 (the @media above) shipped an UNCLOSED max-width:1023px media block. After
   the append-only merge that dangling block swallowed the Stream F and Stream G blocks into
   mobile scope: Stream F's desktop rules parsed as (min-width:1024 AND max-width:1023) = dead
   CSS (never landed on any hero), and Stream G's separator rules never applied at >=1024, so
   the hero trust bar ran on unfixed base CSS on desktop (stranded leading divider before Yelp).
   Repair: C3's @media is closed above; the Stream F block is REMOVED (fully superseded by
   Stream F2 below, which is verified to land every hero at 113px @1440 / 33px @375 incl. case
   studies); Stream G is restored to TOP LEVEL so its desktop separator rules apply. File is
   now brace-balanced. See PROJECT_LOG 2026-07-04 structural-repair entry. */

/* ==== STREAM G: separator-joined list pattern 2026-07-04 (restored to top level) ==== */
.trustbar a,
.namestrip > span:not(.dot){white-space:nowrap;position:relative;}
.trustbar .sep,
.namestrip .dot{display:none;}
.trustbar,
.namestrip{overflow:hidden;}
.trustbar a:not(:first-child)::before{
  content:"";position:absolute;top:50%;left:-.375rem;
  transform:translate(-50%,-50%);
  width:1px;height:.7rem;background:var(--rule);}
.namestrip > span:not(.dot):not(:first-child)::before{
  content:"\00b7";position:absolute;top:50%;left:-.375rem;
  transform:translate(-50%,-50%);
  color:rgba(var(--ink-rgb),.3);line-height:1;}
@media(min-width:1024px){
  .cs-trust a:not(:first-child)::before{content:none;}
  .cs-trust a:not(:last-child)::after{
    content:"";position:absolute;top:50%;right:-.375rem;
    transform:translate(50%,-50%);
    width:1px;height:.7rem;background:var(--rule);}
}
@media(max-width:1023px){
  .trustbar a:not(:first-child)::before,
  .namestrip > span:not(.dot):not(:first-child)::before{content:none;}
  .namestrip{overflow:visible;}
  .namestrip > span:not(.dot){white-space:normal;}
}

/* ==== STREAM F2: hero TEXT start-line (all 40) 2026-07-04 ==== */
/* --- The unification ---
   Anchor the FIRST hero TEXT element to ONE start line under the header on all 40 pages.
   Desktop token = 7rem top padding → first element lands 112-113px below header-bottom
   (matches the tight home/seo/hosting cluster, which measures 113 because the hero content
   box starts 1px below the 128px header edge). Mobile token = 2rem → ~33px below the 84px
   mobile header (the well-composed marketing/cs/tropical cluster measures 33 @375, NOT the
   interim 32 — reported). First element per template:
     • .svc-hero .eyebrow            (services, blog listing, island SEO)
     • tropical .hero-eyebrow        (home, about, contact, portfolio)  [already correct]
     • .cs-hero .cs-eyebrow          (case studies; sits below the .cs-back link)
     • blog-post .post-hero nav.breadcrumb
     • utility .post-head h1         (privacy/terms/thank-you — inline padding-top:4rem)
   IMAGE / illustration tops are intentionally NOT aligned this pass (deferred). */

@media(min-width:1024px){
  /* svc-hero: kill the align-items:center that vertically centered the short text column
     against the taller art column (the real inflation source); pin the 7rem token. */
  .svc-hero .inner{align-items:flex-start;padding-top:7rem;}
  /* tropical hero — re-assert the working values so F2 is the single source of truth. */
  .hero{padding-top:7rem;}
  .hero-grid{align-items:flex-start;}
  /* case study: remove the 2rem grid gap so .cs-eyebrow rises to the token (the .cs-back
     "Portfolio" link stays in the 5.5rem top pad); top-anchor so art height can't shift it. */
  .cs-hero-grid{align-items:flex-start;margin-top:0;}
  /* blog posts: the breadcrumb is the first element — pad its post-hero section to the token. */
  .post-hero{padding-top:7rem;}
  /* utility pages: post-head has an inline padding-top:4rem and no breadcrumb, so its h1 is
     first. Attribute-scope to the inline-4rem post-heads (blog-post post-heads use 1.5rem and
     are untouched); !important beats the inline style. 5.5rem puts the h1 on the same line. */
  .post-head[style*="padding-top:4rem"]{padding-top:5.5rem!important;}
}

@media(max-width:1023px){
  .svc-hero .inner{padding-top:2rem;}
  .hero{padding-top:2rem;}
  .cs-hero-grid{margin-top:0;}
  .cs-hero .inner{padding-top:0.5rem;}
  .post-hero{padding-top:2rem;}
  .post-head[style*="padding-top:4rem"]{padding-top:0.5rem!important;}
}

/* ==== HERO GRID STANDARDIZATION 2026-07-04 ==== */
/* ONE container width (1200px, homepage reference), ONE two-column proportion
   (image column 360px | text column 1fr), ONE gap (4rem). The image-left
   variant is the EXACT mirror of text-left. Desktop only; below 1024 every
   hero stays single-column (base rules + tropical !important preserved). */
:root{--hero-img-col:360px;--hero-col-gap:4rem;}
@media(min-width:1024px){
  /* marketing hero — text-left (text | image) */
  .svc-hero .inner{grid-template-columns:minmax(0,1fr) minmax(0,var(--hero-img-col));gap:var(--hero-col-gap);}
  /* marketing hero — image-left variant: exact mirror (image | text) */
  .svc-hero.art-left .inner{grid-template-columns:minmax(0,var(--hero-img-col)) minmax(0,1fr);gap:var(--hero-col-gap);}
  /* tropical hero — image-left (homepage / about / contact): image | text */
  .hero .hero-grid{grid-template-columns:minmax(0,var(--hero-img-col)) minmax(0,1fr);gap:var(--hero-col-gap);}
  /* tropical hero — text-left variant (portfolio): mirror (text | image) */
  .hero .hero-grid.art-right{grid-template-columns:minmax(0,1fr) minmax(0,var(--hero-img-col));gap:var(--hero-col-gap);}
}

/* Contact hero only: smaller lei + vertically-centered text column (balances the
   shorter right column after the reviews block moved to /thank-you/). 2026-07-08 */
@media(min-width:1024px){
  .contact-hero .hero-grid{align-items:center;}
  .contact-hero .hero-art img{max-width:270px;height:auto;}
}

/* ==== CS-TRUST two-row lockup 2026-07-04 (Row1: BBB·Expertise·Chamber / Row2: Google·Yelp) ==== */
/* The case-study aside is narrow (~530px), so the 5-item trust bar is an explicit two-row
   lockup centered under the mockup — NOT a flow-wrap. Overrides Stream G's flat single-row
   pseudo-divider treatment for .cs-trust only; dividers are inline .sep between items in a
   row, so no leading/trailing/stranded dividers. */
.cs-trust{flex-direction:column;gap:.45rem;overflow:visible;align-items:center;justify-content:center;}
.cs-trust .tb-row{display:flex;flex-wrap:nowrap;align-items:center;gap:.55rem;}
.cs-trust a::before,.cs-trust a::after{content:none!important;}
.cs-trust .tb-row .sep{display:inline-block;width:1px;height:.72rem;background:var(--rule);flex:none;}
.cs-trust .gscore{text-transform:uppercase;letter-spacing:.14em;color:inherit;}
/* Mobile: the nowrap two-row lockup only fits the ~530px aside; below 600px let the
   rows wrap and drop the inline dividers so they don't strand or overflow. 2026-07-08 */
@media(max-width:600px){
  .cs-trust .tb-row{flex-wrap:wrap;justify-content:center;}
  .cs-trust .tb-row .sep{display:none;}
}

/* Homepage contact band subline (dark band) 2026-07-04 */
.contact-sub{margin-top:1rem;font-size:1.125rem;line-height:1.6;color:rgba(var(--cream-rgb),.72);max-width:34rem;}

/* Slider: nudge the bg-removed Maui Brewing + Dept of Health logos a touch larger for optical balance 2026-07-04 */
.logo-track img.logo-bump{height:4.2rem;max-width:224px;}

/* Case-study Scope/Stack/Timeline band: center the columns (Gary) 2026-07-04 */
.cs-meta .inner{text-align:center;}

/* cta-band eyebrow slot (dark band) — cream so it reads on the dark bg; only about-us uses it 2026-07-05 */
.cta-band .eyebrow{color:rgba(var(--cream-rgb),.6);margin-bottom:1rem;}

/* ==== tm-cycle gap fix 2026-07-05: height = tallest slide (drop the JS-slider 320px floor for the CSS-cycled variant); center each slide content so short reviews do not pool at the bottom. All slides stay stacked at grid-area 1/1 (opacity crossfade) so height is fixed while cycling = no CLS. ==== */
.tm-cycle .tm-stage{min-height:0;}
.tm-cycle .tm-slide{display:flex;flex-direction:column;justify-content:center;}

/* Portfolio Spotlight: compress cards at mobile — hide the Problem/What-we-did/Result rows (stay in DOM; full content on the case-study/live pages). Desktop unchanged. 2026-07-05 */
@media(max-width:1023px){.spf dl .r:not(:has(.res)){display:none;}}