/* ============================================================
   Finish Work Studio — mobile-first refinement layer · v8
   Shared by every public HTML page.
   ============================================================ */

/* 01 · Fluid foundations and safe-area spacing */
:root{--tap:44px;--mobile-gutter:clamp(16px,5vw,30px)}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:88px}
body{min-width:0;overflow-x:clip;overflow-wrap:break-word}
main,header,footer,section,.wrap{min-width:0}
section[id]{scroll-margin-top:96px}
.wrap{width:100%}

/* 02 · Media that can never force horizontal overflow */
:where(img,picture,video,canvas,iframe){max-width:100%;height:auto}
:where(svg){max-width:100%}
:where(.panel,.card,.split-media,.svc-art,.art-screen,.mc-screen,.tablet,.hero-cover){min-width:0}

/* 03 · Readable controls and reliable touch behavior */
:where(button,input,select,textarea){font:inherit}
:where(button,.btn,[role="button"],summary){touch-action:manipulation;-webkit-tap-highlight-color:rgba(255,138,56,.18)}
:where(.btn,.nav-burger,.nav-mobile-close,.nav-mobile-group-trigger,.nav-mobile-links>a,.nav-mobile-sub a,.cat-chip,.catnav-inner a,.subnav-links a,.loss-select,.flow-node,.flow-measure){min-height:var(--tap)}
:where(a,button,input,select,textarea,summary):focus-visible{outline:2px solid #ffad70;outline-offset:3px}

/* 04 · Long copy, labels, prices, and links wrap safely */
:where(h1,h2,h3,h4,p,li,a,button,.price,.amt,.rt-price,.ac-price,.br-price,.rnr-price){overflow-wrap:anywhere}
:where(.btn,.chip,.telem-pill,.price-flag,.bt-flag){max-width:100%}

/* 05 · Tables retain usable touch scrolling by default */
:where(.cmp,.rate-table,table){max-width:100%}
.cmp{overscroll-behavior-inline:contain}

/* 06 · Mobile navigation is comfortable and device-safe */
@media(max-width:1040px){
  .nav-inner{height:68px}
  .nav-burger{display:flex;width:48px;height:48px;padding:11px}
  .nav-mobile{width:min(390px,calc(100vw - 18px));max-width:none;height:100dvh;padding:calc(72px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom));overscroll-behavior:contain}
  .nav-mobile-close{top:calc(14px + env(safe-area-inset-top));right:14px;width:48px;height:48px}
  .nav-mobile-links>a,.nav-mobile-group-trigger{display:flex;align-items:center;font-size:18px;padding-block:12px}
  .nav-mobile-sub{padding:4px 0 12px 14px}
  .nav-mobile-sub a{display:flex;align-items:center;font-size:15px;padding-block:9px}
  .nav-mobile-cta .btn{width:100%;justify-content:center;white-space:normal;text-align:center}
}

/* 07 · Tablet layouts preserve hierarchy and hero artwork */
@media(max-width:920px){
  .wrap{max-width:none;padding-inline:var(--mobile-gutter)}
  .section{padding-block:clamp(64px,9vw,84px)}
  .section-head{margin-bottom:clamp(34px,6vw,48px)}
  .pagehead{padding-block:clamp(44px,7vw,64px)}
  .pagehead.has-art{padding-bottom:clamp(52px,8vw,72px)}
  .ph-grid,.split,.svc,.contact-grid,.behind-grid,.faq-wrap,.post-body-wrap,.two-col{grid-template-columns:minmax(0,1fr)!important;gap:clamp(28px,5vw,42px)!important}
  .svc:nth-child(even) .svc-text{order:0}
  .pagehead.has-art .ph-art{display:block!important;width:min(100%,620px);margin-inline:auto}
  .ph-art :where(img,svg){margin-inline:auto}
  .pagehead h1,.hero h1{max-width:19ch}
  .post-article{max-width:72ch}
  .post-sidebar{position:static}
  .cta-final{padding-block:clamp(76px,11vw,104px)}
}

/* 08 · Phone grids, cards, forms, and actions become one clear flow */
@media(max-width:700px){
  .section{padding-block:clamp(52px,12vw,68px)}
  .pagehead{padding-block:40px 36px}
  .hero{min-height:auto}
  .hero-inner{padding-block:48px 62px}
  .h2{font-size:clamp(28px,8.5vw,38px);line-height:1.06}
  .pagehead h1,.post-hero h1{font-size:clamp(31px,10vw,43px);line-height:1.04}
  .lede,.svc-text p,.post-article p,.dgs-why,.faq-item p{font-size:16px;line-height:1.68}
  .eyebrow{font-size:11px;letter-spacing:.15em;white-space:normal}
  :where(.pillars,.ind-grid,.steps,.price-grid,.work-grid,.values,.team,.form-row,.stat-row,.do-dont,.posts,.tiles,.msf-grid2,.addon-grid,.cat-grid,.pkg-list,.loss-lab-head,.loss-calc,.loss-fields,.loss-result-grid,.dgs-diff,.dgs-stage,.dgs-chain,.dgs-metrics,.rpt-kpis,.rpt-body,.rpt-next,.rpt-src,.flow-track){grid-template-columns:minmax(0,1fr)!important;max-width:none!important}
  :where(.hero-actions,.cta-actions){display:grid;grid-template-columns:minmax(0,1fr);width:100%;gap:12px}
  :where(.hero-actions,.cta-actions) .btn{width:100%;max-width:none;justify-content:center;white-space:normal;text-align:center}
  .btn{min-height:48px;white-space:normal;text-align:center;justify-content:center}
  :where(.pillar,.step,.ind-card,.price-card,.value,.member,.sidebar-box,.contact-aside,.callout,.pricing-block){padding:22px 20px}
  .price-desc{min-height:0}
  .price{flex-wrap:wrap}
  .form :where(input,select,textarea),.field :where(input,select,textarea),.loss-field input{font-size:16px;min-height:48px}
  .field textarea{min-height:132px}
  .cinfo{align-items:flex-start}
  .footer-grid{grid-template-columns:minmax(0,1fr)!important;gap:28px}
  .footer-bottom{align-items:flex-start}
  .serve-areas{overflow-wrap:anywhere;line-height:2!important}
  .to-top{right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom))}
}

/* 09 · The homepage comparison becomes a true mobile card list */
@media(max-width:700px){
  .loss-table-wrap{overflow:visible!important;border:0!important;background:transparent!important}
  .loss-table,.loss-table tbody,.loss-table tr,.loss-table td{display:block;width:100%;min-width:0!important}
  .loss-table thead{display:none}
  .loss-table tbody{display:grid;gap:14px}
  .loss-table tbody tr{padding:18px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.025)}
  .loss-table tbody tr.is-active{border-color:rgba(236,119,38,.55);background:rgba(236,119,38,.075)}
  .loss-table td{padding:8px 0!important;border:0!important;font-size:15px!important}
  .loss-table td:nth-child(n+2)::before{display:block;margin-bottom:5px;font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
  .loss-table td:nth-child(2)::before{content:"What you risk losing"}
  .loss-table td:nth-child(3)::before{content:"Planning benchmark"}
  .loss-table td:nth-child(4)::before{content:"System response"}
  .loss-select{width:100%;font-size:17px!important;text-align:left}
  .loss-metric{font-size:17px!important}
  .loss-source{white-space:normal!important}
  .loss-insight{grid-template-columns:minmax(0,1fr)!important;padding:20px!important}
  .loss-insight a{grid-column:1!important;min-height:44px;display:inline-flex;align-items:center;width:max-content;max-width:100%}
  .loss-calc{border-radius:18px!important}
  .loss-calc-inputs,.loss-results{padding:24px 20px!important}
  .loss-results-main{font-size:clamp(42px,15vw,58px)!important}
  .loss-sources{padding:16px!important}
}

/* 10 · Small screens, landscape phones, and motion preferences */
@media(max-width:480px){
  :root{--mobile-gutter:16px}
  html{scroll-padding-top:76px}
  section[id]{scroll-margin-top:82px}
  .nav-inner{height:62px}
  .brand{gap:8px}
  .brand-logo{width:34px;height:34px}
  .brand .wm{font-size:15px}
  .nav-burger{width:46px;height:46px}
  .section{padding-block:50px}
  .pagehead{padding-block:34px 30px}
  .pagehead h1,.post-hero h1,.hero h1{font-size:clamp(30px,10.8vw,39px)}
  .h2{font-size:clamp(27px,9vw,34px)}
  .cta-h{font-size:clamp(30px,10vw,38px)}
  .chip{white-space:normal;line-height:1.35}
  :where(.pillar,.step,.ind-card,.price-card,.value,.member,.sidebar-box,.contact-aside,.callout,.pricing-block,.faq-item){border-radius:16px}
  .faq-item{padding-inline:18px}
  .faq-item summary{font-size:16px;line-height:1.35;padding-block:18px}
  .post-article h2{font-size:25px;line-height:1.2}
  .post-article h3{font-size:20px;line-height:1.25}
  .post-article :where(ul,ol){padding-left:0}
  .stat-strip{grid-template-columns:minmax(0,1fr)!important}
  .rate-table td{padding-inline:16px!important}
  .rate-table .rt-name{font-size:14px}
  .rate-table .rt-price{font-size:17px}
  .addon-card,.rate-bundle,.addon-bundle,.bundle-row,.retainer-note-row,.contact-row{align-items:flex-start!important}
  .addon-card{padding:18px 16px;gap:10px}
}

@media(max-width:360px){
  :root{--mobile-gutter:14px}
  .brand-logo{width:32px;height:32px}
  .brand .wm{font-size:13px}
  .pagehead h1,.post-hero h1,.hero h1{font-size:30px}
  .btn{padding-inline:17px}
  .loss-table tbody tr{padding:16px 14px}
}

@media(max-width:920px) and (orientation:landscape){
  .hero{min-height:auto}
  .hero-inner{padding-block:36px 48px}
  .nav-mobile{padding-top:calc(62px + env(safe-area-inset-top))}
}

@media(hover:none),(pointer:coarse){
  :where(.pillar,.ind-card,.price-card,.work-card,.prob,.addon-card,.addon-bundle):hover{transform:none}
  :where(a,button,summary){-webkit-tap-highlight-color:rgba(255,138,56,.2)}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* 11 · City-page growth foundation */
.pagehead .city-service-h1{font-size:clamp(30px,3.3vw,44px);line-height:1.04;margin:14px 0 0;max-width:30ch}
.city-service-h1 .city-h1-line{display:block;white-space:nowrap}
.city-service-h1 .city-h1-place{color:var(--hot)}
.city-growth-foundation{overflow:hidden;background:
  radial-gradient(720px 380px at 16% 8%,rgba(236,119,38,.11),transparent 68%),
  radial-gradient(620px 360px at 88% 72%,rgba(111,168,255,.07),transparent 70%),
  linear-gradient(180deg,#0d1018 0%,#090b11 100%)}
.city-growth-foundation::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.28;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,#000,transparent 86%)}
.city-growth-foundation .wrap{position:relative;z-index:1}
.city-growth-head{max-width:780px;margin-bottom:42px}
.city-growth-head .h2{margin-top:16px}
.city-growth-head .lede{margin:18px 0 0;max-width:72ch}
.city-growth-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.city-growth-card{position:relative;display:flex;min-width:0;min-height:330px;flex-direction:column;padding:30px 28px;border:1px solid rgba(255,255,255,.09);border-radius:20px;background:linear-gradient(155deg,rgba(24,28,38,.96),rgba(12,14,21,.94));box-shadow:0 24px 62px -44px rgba(0,0,0,.9);overflow:hidden;transition:transform .3s cubic-bezier(.2,.7,.2,1),border-color .3s ease,box-shadow .3s ease}
.city-growth-card::before{content:"";position:absolute;inset:-1px;background:radial-gradient(380px 170px at 12% 0%,rgba(236,119,38,.16),transparent 70%);opacity:.45;transition:opacity .3s ease;pointer-events:none}
.city-growth-card:hover{transform:translateY(-5px);border-color:rgba(255,138,56,.45);box-shadow:0 28px 72px -42px rgba(236,119,38,.45)}
.city-growth-card:hover::before{opacity:1}
.city-growth-no{position:relative;display:inline-flex;width:38px;height:38px;align-items:center;justify-content:center;margin-bottom:24px;border:1px solid rgba(255,138,56,.42);border-radius:12px;background:rgba(236,119,38,.09);color:var(--hot);font-size:12px}
.city-growth-card h3{position:relative;font-size:24px;line-height:1.12;margin:0 0 14px}
.city-growth-card h3 a:hover{color:var(--hot)}
.city-growth-card p{position:relative;color:var(--muted);font-size:15px;line-height:1.67;margin:0 0 24px}
.city-growth-link{position:relative;display:inline-flex;align-items:center;gap:8px;width:fit-content;margin-top:auto;color:#fff;font-size:14px;font-weight:700;border-bottom:1px solid var(--line-hot);padding-bottom:5px}
.city-growth-link span{color:var(--hot);transition:transform .2s ease}
.city-growth-link:hover span{transform:translateX(4px)}
.city-growth-more{display:grid;grid-template-columns:minmax(190px,.8fr) minmax(360px,1.5fr) auto;align-items:center;gap:24px;margin-top:20px;padding:24px 26px;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:rgba(255,255,255,.035);backdrop-filter:blur(10px)}
.city-growth-more>div:first-child>span{display:block;color:var(--hot);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.city-growth-more>div:first-child p{margin:7px 0 0;color:var(--muted);font-size:13.5px;line-height:1.5}
.city-growth-links{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.city-growth-links a{display:inline-flex;align-items:center;min-height:38px;padding:8px 13px;border:1px solid rgba(255,255,255,.1);border-radius:999px;background:rgba(255,255,255,.035);color:var(--muted);font-size:12.5px;font-weight:600;transition:color .2s ease,border-color .2s ease,background .2s ease}
.city-growth-links a:hover{color:#fff;border-color:rgba(255,138,56,.42);background:rgba(236,119,38,.09)}
.city-growth-more>.btn{justify-self:end}

@media(max-width:1040px){
  .city-growth-more{grid-template-columns:minmax(0,1fr) auto}
  .city-growth-links{grid-column:1/-1;grid-row:2}
}
@media(max-width:820px){
  .city-service-h1 .city-h1-line{white-space:normal;overflow-wrap:normal;word-break:normal;hyphens:none}
  .city-growth-grid{grid-template-columns:minmax(0,1fr)}
  .city-growth-card{min-height:0;padding:26px 24px}
  .city-growth-more{grid-template-columns:minmax(0,1fr)}
  .city-growth-links{grid-column:auto;grid-row:auto}
  .city-growth-more>.btn{justify-self:start}
}
@media(max-width:480px){
  .pagehead .city-service-h1{font-size:clamp(28px,7.1vw,32px);max-width:none}
  .city-growth-head{margin-bottom:30px}
  .city-growth-card{padding:23px 20px;border-radius:17px}
  .city-growth-card h3{font-size:22px}
  .city-growth-more{padding:21px 18px}
  .city-growth-more>.btn{width:100%}
  .city-growth-links{gap:7px}
  .city-growth-links a{width:100%;justify-content:center;text-align:center}
}
@media(hover:none),(pointer:coarse){
  .city-growth-card:hover{transform:none}
}
@media(prefers-reduced-motion:reduce){
  .city-growth-card,.city-growth-link span{transition:none}
}