@font-face{font-family:'Schibsted Grotesk';src:url(/c/assets/fonts/schibsted-grotesk.woff2) format('woff2');font-weight:400 900;font-display:swap}
@font-face{font-family:'Source Sans 3';src:url(/c/assets/fonts/source-sans-3.woff2) format('woff2');font-weight:200 900;font-display:swap}
/* Concept C · "Agua" r2: away from A's navy (C-D-01): slate-teal ink, aqua panels, a LIGHT mist footer, lemon as a real secondary. */
:root{
  --c-bg:#F4FAFB;--c-surface:#FFFFFF;--c-surface2:#E2F3F5;--c-ink:#1B3A40;--c-muted:#48626A;--c-line:#CBE4E9;
  --c-accent:#0B7285;--c-accent-ink:#FFFFFF;--c-accent2:#F2C94C;--c-paper:#DDF1F3;--c-paper-ink:#1B3A40;--c-paper-muted:#3F5A61;
  --f-display:'Schibsted Grotesk',system-ui,sans-serif;--f-body:'Source Sans 3',system-ui,sans-serif;--f-mono:'Source Sans 3',system-ui,sans-serif;
  --t-display-weight:760;--t-display-tracking:-0.03em;
}
/* panels and cards in aqua, not navy */
.panel,.oplan,.est-card,.hero-est-price,.guarantee,.est-mini{background:var(--c-accent)}
.panel .lead,.oplan-meta,.est-final,.est-sub{color:#E3F6F8}
.oplan li{color:#F0FAFB}
.oplan-size,.oplan li svg,.panel::after{color:var(--c-accent2)}
.oplan-flag{background:var(--c-accent2)}
.oplan.is-popular{box-shadow:0 0 0 3px var(--c-accent2)}
.panel .btn-primary{background:var(--c-accent2);color:var(--c-ink)}
.photo--tint::after{background:#0B7285}
.sheet::before{background:color-mix(in srgb,var(--c-accent2) 70%,transparent)}
.room-btn[aria-pressed="true"]{background:var(--c-accent2);color:var(--c-ink);border-color:var(--c-ink)}
.art .room.is-hl .room-fill{fill:#FBEAB0}
.gallery-note,.social-note{background:#FFF6D6}
/* light mist footer with ink text; scalloped edge in mist */
.ftr{background:#DDF1F3;color:var(--c-ink);--c-muted:#3F5A61;--c-line:rgba(27,58,64,.18)}
.ftr::before{background:radial-gradient(circle at 10px 10px,#DDF1F3 6.5px,transparent 7px) 0 0/20px 10px repeat-x}
.ftr a,.ftr .ftr-h,.ftr .ftr-es,.ftr .mini-form label{color:var(--c-ink)}
.ftr p,.ftr li,.ftr-base{color:#3F5A61}
.ftr .mini-form .btn-primary{background:var(--c-accent);color:#fff}
.ftr :focus-visible{outline-color:var(--c-accent)}
.ftr .err{color:#A1361D}
.social-note{color:var(--c-ink);border-color:rgba(27,58,64,.4)}
.actionbar a.is-primary{background:var(--c-accent)}
/* r2 contrast on aqua */
.oplan-size,.oplan-price span,.oplan-price span:last-child,.est-card .kicker,.oplan-meta{color:#FFFFFF}
.est-card .kicker::before{background:var(--c-accent2)}
/* r3: C2-02 footer text readable on the light footer (shared site.css forces white) */
.ftr .ftr-es{color:var(--c-ink) !important}
/* X1: C's own action colour = lemon with ink text */
.btn-primary,.nav .btn-primary,.nav .btn-primary:hover,.actionbar a.is-primary,.ftr .mini-form .btn-primary{background:var(--c-accent2);color:#1B3A40}
.btn-primary:hover{box-shadow:0 10px 28px -10px #B8901A}
.nav .btn[aria-current="page"]{color:#1B3A40}
.panel .btn-primary{background:#fff;color:#1B3A40}
/* r7 D6-02: icon ring visible on the light aqua footer */
.ftr .social a{border-color:rgba(27,58,64,.3)}

/* ===== shared additions for the 3-concept run (fixes + new hero components) ===== */
/* APX3-01: a focused field keeps its label visible under the sticky header */
#calc input,#calc select,#calc textarea,.calc-step{scroll-margin-top:52px}
/* APX3-04 / APX3-06 */
.gallery{justify-content:center}
.hero--page{border-bottom:0}
/* APX3-03: the Paint card gets a drawn icon instead of empty space */
.partners{align-items:stretch}
.has-icon .paint-icon{width:56px;height:56px;color:var(--c-accent);margin-bottom:12px}
/* O5: social links pending */
.social-note{font-size:.88rem;color:#E6EEF4;border:1px dashed rgba(255,255,255,.45);border-radius:8px;padding:8px 10px;max-width:30ch}

/* A: founder sign-off inside the hero sheet */
.sheet-sign{display:flex;align-items:center;gap:12px;margin-top:16px;margin-left:46px}
.sheet-sign img{width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:50% 20%;border:2px solid var(--c-surface);box-shadow:0 0 0 2px var(--c-accent2)}
.sheet-sign p{font-size:.95rem;line-height:1.35}
.sheet-sign span{color:var(--c-muted);font-size:.88rem}
@media (max-width:640px){.sheet-sign{margin-left:42px}}

/* B: hero estimator */
.hero-est{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-lg);padding:26px;display:grid;gap:14px;box-shadow:0 30px 60px -40px rgba(0,0,0,.45);max-width:460px;justify-self:end;width:100%}
.hero-est-h{font:700 .82rem/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--c-muted)}
.hero-est-price{display:grid;gap:2px;padding:14px 16px;border-radius:var(--r-md);background:var(--c-ink);color:#fff}
.hero-est-price span{font:400 clamp(2.2rem,1.8rem + 1.6vw,3rem)/1.05 var(--f-display);letter-spacing:-.01em}
.hero-est-price small{color:#DCE8E3;font-size:.92rem}
.hero-est .btn{width:100%}
.hero-est-note{font-size:.86rem;color:var(--c-muted)}
@media (max-width:980px){.hero-est{justify-self:stretch;max-width:none}}

/* C: hero floor plan + rooms */
.hero-plan{display:grid;gap:18px}
.plan--hero{margin:0;max-width:480px;color:var(--c-ink)}
.rooms-h{font-weight:700;margin-bottom:10px}
.room-btns{display:flex;flex-wrap:wrap;gap:8px}
.room-btn{min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid var(--c-ink);background:var(--c-surface);color:var(--c-ink);font:700 .95rem var(--f-body);cursor:pointer}
.room-btn[aria-pressed="true"],.room-btn.is-hl{background:var(--c-ink);color:#fff}
.room-btn:focus-visible{outline:3px solid var(--c-accent);outline-offset:2px}
.room-lists{margin-top:12px}
.room-list{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-md);padding:14px 16px;margin-top:8px}
.room-list-h{font-weight:800;margin-bottom:6px}
.room-list ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.room-list li{display:flex;gap:8px;align-items:flex-start}
.room-list li svg{flex:none;color:var(--c-accent);margin-top:3px}
/* with JS: only the chosen room's list; before a choice, a hint */
.rooms.is-live .room-list{display:none}
.rooms.is-live .room-list.is-on{display:block}
.js-motion .rooms.is-live .room-list.is-on{animation:roomIn var(--m-dur-m) var(--m-ease-out)}
@keyframes roomIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.art .room.is-hl .room-fill{fill:color-mix(in srgb,var(--c-accent2) 45%,#fff);opacity:1}
.hero--c .hero-grid{align-items:start}
@media (prefers-reduced-motion:reduce){.js-motion .rooms.is-live .room-list.is-on{animation:none}}

/* ===== round 2 (3-proposal run): modules, separators, mobile hero order ===== */
.sep{display:inline-block;margin:0 .22em}
.js-motion [data-split] .w{padding-bottom:.16em;margin-bottom:-.16em}
.photo--tint::after{opacity:.32}
@media (max-width:820px){.hero-cta .btn-secondary{display:none}}
/* founder module (A home, A services) */
.founder-in{display:grid;grid-template-columns:minmax(220px,360px) 1fr;gap:clamp(24px,5vw,64px);align-items:center}
.founder-q{margin:14px 0 8px;font:600 clamp(1.4rem,1.1rem + 1.2vw,2.1rem)/1.25 var(--f-display);letter-spacing:-.015em}
.founder-promise{display:grid;gap:4px;margin:18px 0 10px;padding:14px 16px;border-left:4px solid var(--c-accent2);background:var(--c-surface);border-radius:0 var(--r-md) var(--r-md) 0;max-width:52ch}
.founder-promise span{color:var(--c-muted)}
.founder .btn-link{padding:0}
@media (max-width:760px){.founder-in{grid-template-columns:1fr}.founder .photo{max-width:280px}}
/* guarantee card (A how-we-help) */
.guarantee{background:var(--c-ink);color:#fff;border-radius:var(--r-lg);padding:28px;display:grid;gap:10px;align-self:center}
.guarantee b{font:700 clamp(3rem,2.4rem + 2vw,4.4rem)/1 var(--f-display);color:var(--c-accent2)}
.guarantee p{color:#E6EEF4}
.guarantee .btn-link{color:#fff;padding:0;justify-self:start}
.guarantee :focus-visible{outline-color:var(--c-accent2)}
/* help without a figure (B, C) */
.help-wide .help{grid-template-columns:1fr 1fr}
@media (max-width:760px){.help-wide .help{grid-template-columns:1fr}}
/* price board (B home) */
.price-board{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.price-tile{display:grid;gap:6px;align-content:start;padding:20px;border-radius:var(--r-lg);background:var(--c-surface);border:1px solid var(--c-line);text-decoration:none;color:var(--c-ink);min-height:44px}
.price-tile:first-child{background:var(--c-ink);color:#fff;border-color:var(--c-ink)}
.price-tile:first-child span{color:#DCE8E3}
.price-tile:hover{border-color:var(--c-accent)}
.price-tile b{font-size:1.45rem;font-family:var(--f-body);font-weight:800;font-variant-numeric:lining-nums tabular-nums}
.price-tile span{color:var(--c-muted)}
.price-k{font-weight:700;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase}
.price-tile:first-child:focus-visible{outline-color:var(--c-accent2)}
@media (max-width:980px){.price-board{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.price-board{grid-template-columns:1fr}}
/* process route (C home) */
.route-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:s;position:relative}
.route-steps::before{content:'';position:absolute;left:12px;right:12px;top:14px;height:4px;background:var(--c-accent2);border-radius:4px}
.route-steps li{position:relative;padding:40px 18px 0 0;display:grid;gap:6px}
.route-steps li::before{content:'';position:absolute;top:4px;left:0;width:24px;height:24px;border-radius:50%;background:var(--c-accent);border:4px solid var(--c-bg)}
.route-steps b{font-size:1.1rem}
.route-steps span{color:var(--c-muted)}
@media (max-width:820px){.route-steps{grid-template-columns:1fr;gap:18px}.route-steps::before{left:10px;right:auto;top:0;bottom:0;width:4px;height:auto}.route-steps li{padding:0 0 0 40px}}
/* room checklist (C services) */
.rooms-all{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.rooms-all .room-list{display:block;margin:0}
@media (max-width:820px){.rooms-all{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.rooms-all{grid-template-columns:1fr}}
/* C hero rooms (C-04, C-05) */
.room-btn.is-hl:not([aria-pressed="true"]){background:var(--c-surface2);color:var(--c-ink)}
.room-btns{gap:6px}
@media (min-width:1180px){.room-btn{padding:0 12px;font-size:.9rem}}
.rooms-next{display:inline-block;margin-top:10px;padding:0}
.room-lists{min-height:178px}
/* B and C: on mobile the hero widget follows the headline */
@media (max-width:980px){
  .hero--b .hero-copy,.hero--c .hero-copy{display:contents}
  .hero--b .hero-grid,.hero--c .hero-grid{display:flex;flex-direction:column;align-items:stretch;gap:16px}
  .hero--b .kicker,.hero--c .kicker{order:1}.hero--b .hero-h1,.hero--c .hero-h1{order:2}
  .hero--b .hero-est,.hero--c .hero-plan{order:3}
  .hero--b .lead,.hero--c .lead{order:4;margin-top:0}.hero--b .hero-cta,.hero--c .hero-cta{order:5;margin-top:0}.hero--b .hero-call,.hero--c .hero-call{order:6}
}

/* round 2: A-01 ring off the text on phones; A-04 focus never waits for a reveal; A-02/A-07 strip only once a size is entered */
@media (max-width:640px){.panel::after{display:none}}
.js-motion [data-reveal]:focus-within{opacity:1;transform:none;transition:none}
.est-mini{visibility:hidden}
.calc.has-size .est-mini{visibility:visible}
@media (max-width:980px){.calc:not(.has-size) .est-mini{display:none}}
@media (max-width:400px){.seg{grid-template-columns:1fr}}

/* ===== round 3 (3-proposal run) ===== */
/* separators: a fixed, centred box so the dot sits in the middle in every font (B-01/B2-06) */
.sep{display:inline-block;width:1.1em;margin:0;text-align:center}
/* kicker wraps as plain text on small phones (A-N3, B2-04) */
@media (max-width:480px){.kicker{display:block;letter-spacing:.08em}.kicker::before{display:inline-block;vertical-align:middle;margin-right:8px}}
/* hint under an input never overlaps it (B2-02) */
.hero-est .hint{margin-top:2px}
/* inline "Text us" link: a bigger, separate target (B2-10) */
.hero-call a{display:inline-block;padding:10px 4px;margin:-10px 0}
/* C2-01: only the room shapes take clicks on the hero plan */
.plan--hero .art .route,.plan--hero .art .route-start,.plan--hero .art .route-end,.plan--hero .art .tick,.plan--hero .art .art-label,.plan--hero .art .draw.thin{pointer-events:none}
.plan--hero .art .room-fill{pointer-events:all}
/* C-D-04: the room list area keeps one height */
.room-lists{min-height:236px}
.rooms-next{margin:10px 0 0}
/* C2-04: room checklist in 2 columns on phones */
@media (max-width:520px){.rooms-all{grid-template-columns:1fr 1fr;gap:10px}.rooms-all .room-list{padding:10px 12px;font-size:.92rem}}
/* A-N1: the guarantee card sits at the top and follows the reader */
.split--art > .guarantee{align-self:start;position:sticky;top:110px}
/* A-N4: one Katherine in the first phone screen */
@media (max-width:820px){.sheet-sign{display:none}}
/* C-N2: route steps top-aligned, line ends at the last dot, stronger dots */
.route-steps{align-items:start}
.route-steps::before{right:calc(25% - 14px)}
.route-steps li::before{width:28px;height:28px;top:2px}
@media (max-width:820px){.route-steps::before{right:auto}}

/* r6 ARB3P-04: proposal note before every submit */
.form-note{margin:4px 0 10px;font-size:.92rem;line-height:1.4;font-style:italic;color:inherit}
/* r6 D4-10: the email breaks only after "@" */
.contact-cards a span{overflow-wrap:normal !important;word-break:normal !important}

/* r7 D6-01/D6-05: the note groups with its button; one size everywhere */
form .form-note{font-size:.875rem;margin:20px 0 -4px}
/* r7 D6-03: visible hover on footer social icons */
.ftr .social a{transition:background-color .15s ease,color .15s ease,border-color .15s ease}
.ftr .social a:hover{background:var(--c-accent);color:var(--c-accent-ink);border-color:var(--c-accent)}