/* First Ridge: site styles.
 *
 * SOURCE OF TRUTH: the owner-approved mock, design/canvas/project/Mix2.dc.html
 * (homepage, approved 2026-11-07), FormStates.dc.html and PolicyPage.dc.html.
 * Sections 1 to 3 are the mock's own CSS, transcribed rule for rule so the
 * computed styles match; inline styles from the mock became the small classes
 * marked "was inline". Sections 4 onward are the boards and what WordPress
 * needs. DESIGN.md documents the system; where it and the mock disagree, the
 * mock wins.
 */

/* 0. Self-hosted Schibsted Grotesk (OFL 1.1, assets/fonts/OFL.txt). The same
   variable files Google Fonts serves for weights 400 to 800. */
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/schibsted-grotesk-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/schibsted-grotesk-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* 1. Tokens and base (mock) */
:root{--ink:#161616;--ink-2:#4A4A4A;--ridge:#737373;--line:#E3E3E3;--paper:#FFFFFF;--night:#161616;--on-night:#D4D4D4;--yellow:#EDD24B;--r:6px;--r-sm:4px;--gut:clamp(20px,5vw,56px);--err-night:#FF8A80;--err-yellow:#7A1414}
body{margin:0;background:var(--paper)}
.fr{font-family:'Schibsted Grotesk',system-ui,sans-serif;color:var(--ink);font-size:18px;line-height:1.6;background:var(--paper)}
.fr *{box-sizing:border-box}
.fr a{color:var(--ink)}
.fr :focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.wrap{max-width:calc(1240px + 2 * var(--gut));margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.h2{margin:0 0 14px;font-size:clamp(30px,3.3vw,44px);line-height:1.08;font-weight:700;letter-spacing:-0.02em;text-wrap:balance}
.lede{margin:0;color:var(--ink-2);max-width:34em}
.fr p,.fr figcaption{text-wrap:pretty}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 26px;border:0;border-radius:var(--r-sm);font:inherit;font-size:18px;font-weight:700;text-decoration:none;cursor:pointer;white-space:nowrap}
.btn-y{background:var(--yellow);color:var(--ink)}
.btn-k{background:var(--ink);color:#FFFFFF}
.fld label{display:block;margin:0 0 6px;font-size:17px;font-weight:600}
.fld input{display:block;width:100%;height:54px;padding:0 14px;font:inherit;font-size:18px;color:var(--ink);background:#FFFFFF;border:1.5px solid var(--ridge);border-radius:var(--r-sm)}
.fld input::placeholder{color:#6B6B6B}

/* 2. Sections (mock) */

/* header */
.top{border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:14px;padding-bottom:14px}
.logo{display:flex;align-items:center;min-height:44px}
.logo img{height:36px;width:auto;display:block}
.nav{display:flex;align-items:center;gap:28px;font-size:17px;font-weight:500}
.nav a{text-decoration:none;padding:10px 0}
.nav a:hover{text-decoration:underline;text-underline-offset:4px}
.call{display:inline-flex;align-items:center;min-height:46px;padding:0 18px;border:1.5px solid var(--ink);border-radius:var(--r-sm);font-weight:700;text-decoration:none}
.call .short{display:none}
.nav .call{padding:0 18px}

/* hero */
.hero{padding-top:36px}
.hero-head{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:20px 56px;align-items:end;margin-bottom:28px}
.hero h1{margin:0;font-size:clamp(38px,4.3vw,62px);line-height:1.02;font-weight:800;letter-spacing:-0.03em}
.hero h1>span{display:block;text-wrap:balance}
.nw{white-space:nowrap}
.hero-intro{margin:0;font-size:19px;line-height:1.5;color:var(--ink-2)}
.hero-fig{margin:0} /* was inline */
.ba{position:relative;height:clamp(320px,calc(100vh - 360px),549px);border-radius:var(--r);overflow:hidden;background:var(--night);--split:46%}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;display:block}
.ba img.ba-before{clip-path:inset(0 calc(100% - var(--split)) 0 0)} /* was inline, driven by the slider */
.ba-line{position:absolute;top:0;bottom:0;width:3px;margin-left:-1.5px;background:#FFFFFF;box-shadow:0 0 0 1px #161616;pointer-events:none;z-index:2;left:var(--split)}
.ba-grip{position:absolute;top:42%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:#FFFFFF;border:2px solid #161616;box-shadow:0 2px 12px rgba(0,0,0,.38);display:grid;place-items:center;pointer-events:none;z-index:2;left:var(--split)}
.ba-tag{position:absolute;top:16px;z-index:2;padding:5px 12px;border-radius:var(--r-sm);font-size:17px;font-weight:700;line-height:1.4;pointer-events:none}
.ba-tag.b{left:16px;background:var(--night);color:#FFFFFF}
.ba-tag.a{right:16px;background:var(--yellow);color:var(--ink)}
.ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y;-webkit-appearance:none;appearance:none;background:transparent;z-index:3}
.ba-range::-webkit-slider-runnable-track{height:100%}
.ba-range::-webkit-slider-thumb{-webkit-appearance:none;width:52px;height:100%}
.ba-range::-moz-range-thumb{width:52px;height:100%;border:0}
.ba-range:focus-visible~.ba-grip{box-shadow:0 0 0 3px var(--ink),0 0 0 7px var(--yellow)}
.offer{position:relative;z-index:4;margin:-78px 32px 0;padding:20px 24px 18px;background:var(--night);color:#FFFFFF;border-radius:var(--r);box-shadow:0 14px 34px rgba(0,0,0,.2)}
.offer form{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) auto;gap:10px 12px;align-items:end}
.offer .fld input{border-color:#FFFFFF}
.offer-note{grid-column:1/-1;margin:2px 0 0;font-size:17px;color:#C8C8C8}
.hero-cap{margin:14px 32px 0;max-width:62ch;font-size:17px;color:var(--ink-2)}

/* sean */
.sean{padding:64px 0 60px}
.sean .wrap{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:32px 72px;align-items:center}
.sean-who{display:flex;gap:28px;align-items:center}
.sean-who img{width:128px;height:128px;border-radius:50%;object-fit:cover;object-position:center 30%;flex:none;display:block}
.sean-who p{margin:0;color:var(--ink-2)}
.facts{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);border-top:1px solid var(--line)}
.facts dt,.facts dd{margin:0;padding:11px 0;border-bottom:1px solid var(--line);font-size:17px}
.facts dt{padding-right:24px;white-space:nowrap;color:var(--ink-2)}
.facts dd a{font-weight:700;text-decoration:none;display:inline-flex;align-items:center;min-height:44px;margin:-11px 0}

/* work */
.work{padding:88px 0 76px;border-top:1px solid var(--line)}
.work-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:12px 48px;margin-bottom:36px}
.work-head .h2{margin:0} /* was inline */
.pairs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.pair{margin:0}
.pair .shots{display:grid;gap:6px;border-radius:var(--r);overflow:hidden}
.pair .shot{position:relative}
.pair img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block} /* height:auto added: theme images carry width and height attributes, which would otherwise beat aspect-ratio */
.pair .tag{position:absolute;left:12px;top:12px;padding:3px 10px;border-radius:var(--r-sm);font-size:17px;font-weight:700;line-height:1.4}
.pair .tag.b{background:var(--night);color:#FFFFFF}
.pair .tag.a{background:var(--yellow);color:var(--ink)}
.pair figcaption{margin-top:12px;font-size:17px}
.pair figcaption span{color:var(--ink-2)}

/* how */
.how{padding:72px 0 88px;background:var(--paper);border-top:1px solid var(--line)}
.how .h2{margin:0} /* was inline */
.steps{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.steps li{border-top:2px solid var(--ink);padding-top:18px}
.steps .n{display:block;margin-bottom:10px;font-size:40px;font-weight:700;line-height:1;color:var(--ridge)}
.steps h3{margin:0 0 8px;font-size:22px;line-height:1.25;font-weight:700}
.steps p{margin:0;color:var(--ink-2)}

/* job site */
.site{background:var(--night);color:#FFFFFF;padding:88px 0 72px}
.site .lede{color:var(--on-night)}
.site-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:36px}
.arrows{display:flex;gap:10px;flex:none}
.arrow{width:52px;height:52px;border-radius:50%;border:1.5px solid #A3A3A3;background:transparent;color:#FFFFFF;display:grid;place-items:center;cursor:pointer}
.arrow:hover{background:#2A2A2A}
.site :focus-visible,.offer :focus-visible,.foot :focus-visible,.mbar :focus-visible{outline-color:var(--yellow)}
.strip{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 0 14px;scrollbar-color:#737373 var(--night)}
.strip figure{margin:0;flex:0 0 calc((100% - 60px) / 4);scroll-snap-align:start}
.strip img{width:100%;height:auto;aspect-ratio:300/380;object-fit:cover;border-radius:var(--r);display:block}
.strip figcaption{margin-top:12px;font-size:17px;color:var(--on-night)}
.strip figcaption b{display:block;color:#FFFFFF;font-weight:700}

/* why */
.why{padding:96px 0}
.why .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px 80px;align-items:start}
.why .h2{margin-bottom:20px} /* was inline */
.why p{margin:0 0 16px;color:var(--ink-2)}
.why .why-body>p:last-child{margin:0} /* was inline */
.compare{width:100%;table-layout:fixed;border-collapse:collapse;margin:0 0 28px;font-size:17px;line-height:1.4}
.compare th,.compare td{padding:14px 12px 14px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.compare thead th,.compare thead td{padding-top:0;padding-bottom:12px;border-bottom:2px solid var(--ink);font-weight:700;color:var(--ink)}
.compare tbody th{width:28%;font-weight:600;color:var(--ink)}
.compare td{color:var(--ink-2)}
.compare td.us{font-weight:600;color:var(--ink)}
.why .quote{margin:0;font-size:21px;line-height:1.45;font-weight:600;color:var(--ink)}

/* ask */
.ask{background:var(--yellow);padding:64px 0}
.ask .wrap{display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,1.4fr);gap:28px 56px;align-items:center}
.ask-who{display:flex;gap:22px;align-items:center}
.ask-who img{width:96px;height:96px;border-radius:50%;object-fit:cover;object-position:center 30%;border:2px solid var(--ink);flex:none;display:block}
.ask h2{margin:0;font-size:clamp(28px,3vw,40px);line-height:1.1;font-weight:700;letter-spacing:-0.02em}
.ask form{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) auto;gap:10px 12px;align-items:end}
.ask .fld input{border:2px solid var(--ink)}
.ask-note{grid-column:1/-1;margin:2px 0 0;font-size:17px} /* was inline */

/* footer */
.foot{background:var(--night);color:var(--on-night);font-size:17px}
.foot .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:28px 56px;padding-top:48px;padding-bottom:48px}
.foot img{height:32px;width:auto;display:block}
.foot a{color:#FFFFFF;text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.foot .c{display:flex;flex-direction:column}
.foot .tel{font-weight:700} /* was inline */
.foot .legal{flex-basis:100%;display:flex;flex-wrap:wrap;gap:0 28px;padding-top:20px;border-top:1px solid #2E2E2E}
.foot .legal a{color:var(--on-night);text-decoration:underline;text-underline-offset:4px}

.mbar{display:none}
@keyframes mbar-in{from{transform:translateY(110%)}to{transform:none}}

/* 3. Breakpoints (mock) */
@media (max-width:900px){
  .hero-head{grid-template-columns:minmax(0,1fr)}
  .sean .wrap,.why .wrap,.ask .wrap{grid-template-columns:minmax(0,1fr)}
  .offer form,.ask form{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .offer form .btn,.ask form .btn{grid-column:1/-1}
  .strip figure{flex-basis:calc((100% - 40px) / 3)}
}
@media (max-width:760px){
  .fr{font-size:17px;padding-bottom:76px}
  .top .wrap{padding-top:10px;padding-bottom:10px}
  .logo img{height:26px}
  .nav a:not(.call){display:none}
  .nav .call{padding:0 16px}
  .call .full{display:none}
  .call .short{display:inline}
  .hero{padding-top:24px}
  .hero-head{margin-bottom:20px}
  .hero h1{font-size:38px}
  .hero-intro{font-size:18px}
  .ba{height:auto;aspect-ratio:3/2;margin:0 calc(-1 * var(--gut));border-radius:0}
  .ba-grip{top:50%;width:48px;height:48px;margin:-24px 0 0 -24px}
  .ba-tag{top:12px}
  .ba-tag.b{left:12px}.ba-tag.a{right:12px}
  .offer{margin:-24px 0 0;padding:18px 16px 16px}
  .offer form,.ask form{grid-template-columns:minmax(0,1fr)}
  .hero-cap{margin:12px 0 0}
  .sean{padding:48px 0}
  .sean-who{flex-direction:column;align-items:flex-start;gap:18px}
  .sean-who img{width:96px;height:96px}
  .work{padding:56px 0 64px}
  .pairs,.steps{grid-template-columns:minmax(0,1fr)}
  .how{padding:56px 0}
  .site{padding:64px 0}
  .arrows{display:none}
  .strip{margin-right:calc(50% - 50vw);padding-right:var(--gut)}
  .strip figure{flex-basis:260px}
  .strip img{width:260px;height:330px}
  .why{padding:64px 0}
  .ask{padding:48px 0}
  .mbar{animation:mbar-in linear both;animation-timeline:scroll(root);animation-range:780px 880px}
  .fr:has(input:focus) .mbar{visibility:hidden}
  .mbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:20;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:var(--night)}
  .mbar .btn{min-height:52px;padding:0 18px}
  .mbar .btn-o{background:transparent;color:#FFFFFF;border:1.5px solid #FFFFFF}
}

/* 4. Form states (FormStates.dc.html). Errors say what to add, never colour
   alone: a 3px border, an icon and a sentence under the field. */
.err-msg{display:flex;gap:8px;align-items:flex-start;margin:8px 0 0;font-size:17px;font-weight:600;line-height:1.4}
.err-msg svg{flex:none;margin-top:2px}
.offer .err-msg{color:var(--err-night)}
.offer .fld.err input{border:3px solid var(--err-night)}
.ask .err-msg{color:var(--err-yellow)}
.ask .fld.err input{border:3px solid var(--err-yellow)}
.offer form.errs,.ask form.errs{align-items:start}
.offer form.errs .btn,.ask form.errs .btn{margin-top:33px}
.btn[aria-disabled=true]{cursor:progress}
.spin{width:20px;height:20px;margin-right:10px;border-radius:50%;border:3px solid rgba(22,22,22,.25);border-top-color:#161616;animation:spin .8s linear infinite}
.btn-k .spin{border-color:rgba(255,255,255,.3);border-top-color:#FFFFFF}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation:none}}
.fld input[readonly]{background:#EDEDED}
.sent{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px 18px;align-items:center}
.sent .ok{width:48px;height:48px;border-radius:50%;background:var(--yellow);display:grid;place-items:center}
.ask .sent .ok{background:var(--ink)}
.sent .sent-h{margin:0;font-size:22px;line-height:1.3;font-weight:700;letter-spacing:normal}
.sent p{margin:0;font-size:17px}
.offer .sent p{color:var(--on-night)}
.sent .body{display:flex;flex-direction:column;gap:4px}
.linkbtn{font:inherit;font-size:17px;font-weight:700;background:none;border:0;padding:0 4px;min-height:44px;color:inherit;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
a.linkbtn{display:inline-flex;align-items:center}
.offer .linkbtn,.offer .sent a{color:#FFFFFF}
.alert{grid-column:1/-1;display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-sm);border:2px solid var(--err-night);color:#FFFFFF;font-size:17px;line-height:1.45}
.alert svg{flex:none;margin-top:2px;color:var(--err-night)}
.alert a{color:#FFFFFF;font-weight:700}
/* The board draws the alert on night only; on the yellow band it takes the
   band's own error colour (#7A1414, 7.2:1) and ink text. */
.ask .alert{border-color:var(--err-yellow);color:var(--ink)}
.ask .alert svg{color:var(--err-yellow)}
.ask .alert a{color:var(--ink)}
@media (max-width:900px){
  .offer form.errs .btn,.ask form.errs .btn{margin-top:0}
}
@media (max-width:760px){
  .sent{grid-template-columns:auto minmax(0,1fr)}
  .sent .linkbtn{grid-column:2;justify-self:start}
}

/* 5. Text pages (PolicyPage.dc.html) */
.legal-page{padding:72px 0 104px}
.legal-page .col{max-width:720px}
.legal-page h1{margin:0 0 10px;font-size:clamp(36px,4vw,52px);line-height:1.05;font-weight:800;letter-spacing:-0.025em}
.legal-page h1.no-eff{margin-bottom:40px;padding-bottom:28px;border-bottom:1px solid var(--line)}
.legal-page .eff{margin:0 0 40px;padding-bottom:28px;border-bottom:1px solid var(--line);color:var(--ink-2);font-size:17px}
.legal-page h2{margin:44px 0 12px;font-size:24px;line-height:1.25;font-weight:700;letter-spacing:-0.01em}
.legal-page p{margin:0 0 16px;color:var(--ink-2)}
.legal-page ul{margin:0 0 16px;padding-left:22px;color:var(--ink-2)}
.legal-page li{margin:0 0 6px}
.legal-page a{color:var(--ink);font-weight:600;text-underline-offset:3px}
.legal-page .contact{margin:0}
.legal-page .contact a{display:inline-flex;align-items:center;min-height:44px}
.ph{background:#FFF6C7;color:var(--ink);padding:0 4px;border-radius:3px}

/* 6. Prose fields (ACF WYSIWYG). Each section's own p rule sets the type and
   the first margin; this only spaces a second paragraph or a list a client
   adds, so the design holds whatever they type. */
.prose>p+p{margin-top:16px}
.prose ul,.prose ol{margin:12px 0 0;padding-left:22px}
.prose li{margin:0 0 6px}
.hero-intro p{margin:0}

/* 7. WordPress and theme plumbing */
/* <picture> wrappers drop out of layout so the mock's img selectors (flex
   rows, absolute fills) apply unchanged. Their <source> children would
   otherwise become empty flex items and add a gap. */
.fr picture{display:contents}
.fr picture>source{display:none}
.skip-link{position:absolute;left:12px;top:-200px;z-index:100;padding:12px 18px;border-radius:var(--r-sm);background:var(--ink);font-weight:700;text-decoration:none}
.fr .skip-link{color:#FFFFFF}
.skip-link:focus{top:12px}
.fr .skip-link:focus-visible{outline-color:var(--yellow)}
.sr-only,.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.fr [tabindex="-1"]:focus{outline:none}
.fr form[hidden]{display:none}
/* Honeypot. Also hidden by an inline style in the markup, so a stylesheet
   that fails to load can never expose it to a person. */
.hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* Phone bar, with JavaScript: it appears once the hero form has scrolled off
   the top (IntersectionObserver in site.js), not at a fixed scroll distance.
   Without JavaScript the mock's scroll-timeline rule above still applies. */
@media (max-width:760px){
  .mbar.fr-io{animation:none;transform:translateY(110%);visibility:hidden;transition:transform .22s ease-out,visibility 0s linear .22s}
  .mbar.fr-io.is-on{transform:none;visibility:visible;transition:transform .22s ease-out,visibility 0s}
}
@media (prefers-reduced-motion:reduce){
  .mbar.fr-io,.mbar.fr-io.is-on{transition:none}
}