@font-face{font-family:'Bricolage Grotesque';src:url(/a/assets/fonts/bricolage-grotesque.woff2) format('woff2');font-weight:200 800;font-display:swap}
@font-face{font-family:'Figtree';src:url(/a/assets/fonts/figtree.woff2) format('woff2');font-weight:300 900;font-display:swap}
/* Concept A · "Su marca": her brand palette (navy #103150 + teal #37ADB9), already the r3 tokens. Fonts kept. */
:root{--f-display:'Bricolage Grotesque',system-ui,sans-serif;--f-body:'Figtree',system-ui,sans-serif;--f-mono:'Figtree',system-ui,sans-serif}
/* A-D-01: the checklist ticks itself off one item after another (keyframes run even when the item is revealed on the first frame) */
.js-motion .checklist .box{background:transparent;color:transparent;transition:none;animation:boxOn 260ms ease forwards;animation-delay:calc(800ms + var(--ri,0) * 420ms)}
.js-motion .checklist .box svg path{stroke-dasharray:24;stroke-dashoffset:24;transition:none;animation:tickOn 420ms cubic-bezier(.22,1,.36,1) forwards;animation-delay:calc(860ms + var(--ri,0) * 420ms)}
@keyframes boxOn{to{background:var(--c-accent);color:var(--c-accent-ink)}}
@keyframes tickOn{to{stroke-dashoffset:0}}
.js-motion .checklist li[data-reveal]{opacity:1;transform:none}
/* A-D-04: Katherine visible right under the headline on phones */
.hero-chip{display:none}
@media (max-width:820px){.hero-chip{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:.95rem}.hero-chip img{width:40px;height:40px;border-radius:50%;object-fit:cover;object-position:50% 20%}}
/* r3 A-D-01: explicit start state + fill both, and the r3 site.css "is-in" end state no longer pre-fills */
.js-motion .checklist li.is-in .box{animation:boxOn 260ms ease both;animation-delay:calc(800ms + var(--ri,0) * 420ms)}
.js-motion .checklist li.is-in .box svg path{animation:tickOn 420ms cubic-bezier(.22,1,.36,1) both;animation-delay:calc(860ms + var(--ri,0) * 420ms)}
@keyframes boxOn{from{background:transparent;color:transparent}to{background:var(--c-accent);color:var(--c-accent-ink)}}
@keyframes tickOn{from{stroke-dashoffset:24}to{stroke-dashoffset:0}}
/* r3 A2-03: help cards side by side, guarantee below them; A2-05: 44px story link */
#how-we-help .split--art{grid-template-columns:1fr}
@media (min-width:981px){#how-we-help .help{grid-template-columns:1fr 1fr}}
#how-we-help .split--art > .guarantee{position:static;grid-template-columns:auto 1fr auto;align-items:center;gap:24px}
@media (max-width:760px){#how-we-help .split--art > .guarantee{grid-template-columns:1fr}}
.founder .btn-link{display:inline-flex;align-items:center;min-height:44px}
/* r4 A3-05: at 380px and below the kicker separator becomes an invisible line break ("Utah County" on its own line) */
@media (max-width:380px){.hero .kicker .sep{display:block;height:0;overflow:hidden;visibility:hidden}}
/* r4 A3-01: her Seiso sentence as a pull quote inside the About story */
.story .founder-q.story-q{margin:22px 0;padding-left:18px;border-left:3px solid var(--c-accent);font-size:clamp(1.2rem,1rem + .8vw,1.6rem)}
.story .founder-q.story-q p{margin:0}
/* r4 A3-02: promise line under the Contact cards */
.sec .contact-promise{margin:20px 0 0;font-weight:600;line-height:1.5}
/* r6 A4-01: promise items stay whole; stacked on phones */
.contact-promise .cp-item{white-space:nowrap}
@media (max-width:600px){.contact-promise .cp-item{display:block;white-space:normal}.contact-promise .sep{display:none}}
/* r7 A6-01 + D6-04: dots ride with the item before them; stacked items get a teal check */
.contact-promise .cp-dot{white-space:nowrap}
@media (max-width:600px){.contact-promise .cp-dot{display:none}.contact-promise .cp-item{margin:3px 0}.contact-promise .cp-item::before{content:"\2713\00a0";color:var(--c-accent);font-weight:700}}

/* ===== 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)}