/* SO1 Roofing — shared design system (Design 2 · Editorial).
   Extracted from the approved sppp design bundle. Fonts via Google Fonts. */
@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700&family=Barlow:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;600&display=swap");

:root{
/* --- brand base --------------------------------------------------------- */
--gold-50:#FBF7EF;--gold-100:#F4E9D2;--gold-200:#E5D0A1;--gold-300:#D6B678;
--gold-400:#C69A4C;/* SO1 brand gold */
--gold-500:#B0863B;--gold-600:#8E6A2C;--gold-700:#6B4F20;
--ink-900:#0C0C0C;--ink-800:#141414;--ink-700:#232323;--ink-600:#3A3A3A;
--ink-500:#5A5A5A;--ink-400:#808080;--ink-300:#A8A8A8;--ink-200:#D4D2CE;
--ink-100:#E9E7E3;--ink-50:#F7F5F1;--white:#FFFFFF;
/* --- semantic status ---------------------------------------------------- */
--green-500:#2E7D46;--green-50:#EAF3EC;
--amber-500:#C9821C;--amber-50:#FBF2E3;
--red-500:#B3261E;--red-50:#F9EAE9;
--blue-500:#2C5D8A;--blue-50:#EAF0F6;
/* --- semantic aliases -------------------------------------------------- */
--brand:var(--gold-400);--brand-hover:var(--gold-500);--brand-press:var(--gold-600);
--brand-soft:var(--gold-50);--brand-border:var(--gold-200);
--text-strong:var(--ink-900);--text-body:var(--ink-700);--text-muted:var(--ink-500);
--text-subtle:var(--ink-400);--text-inverse:var(--white);--text-brand:var(--gold-600);
--text-on-brand:var(--ink-900);
--surface-page:var(--ink-50);--surface-card:var(--white);--surface-sunken:var(--ink-100);
--surface-inverse:var(--ink-900);--surface-inverse-2:var(--ink-800);
--border-subtle:var(--ink-100);--border-default:var(--ink-200);--border-strong:var(--ink-900);
--border-inverse:rgba(255,255,255,.14);
--focus-ring:var(--gold-400);
--success:var(--green-500);--success-soft:var(--green-50);
--warning:var(--amber-500);--warning-soft:var(--amber-50);
--danger:var(--red-500);--danger-soft:var(--red-50);
--info:var(--blue-500);--info-soft:var(--blue-50);
--overlay:rgba(12,12,12,.62);/* @kind color */
/* photography / hero protection */
--scrim-bottom:linear-gradient(to top,rgba(12,12,12,.88) 0%,rgba(12,12,12,.55) 42%,rgba(12,12,12,0) 100%);/* @kind other */
--scrim-left:linear-gradient(to right,rgba(12,12,12,.90) 0%,rgba(12,12,12,.45) 55%,rgba(12,12,12,0) 100%);/* @kind other */
}

:root{
--font-display:"Barlow Condensed",Arial Narrow,sans-serif;
--font-body:"Barlow",Helvetica Neue,sans-serif;
--font-mono:"IBM Plex Mono",ui-monospace,monospace;

--fs-display-1:76px;--fs-display-2:60px;--fs-h1:46px;--fs-h2:34px;--fs-h3:26px;
--fs-h4:21px;--fs-lg:19px;--fs-body:16px;--fs-sm:14px;--fs-xs:12.5px;--fs-eyebrow:13px;

--lh-tight:0.94;/* @kind other */--lh-heading:1.06;/* @kind other */--lh-snug:1.3;/* @kind other */--lh-body:1.62;/* @kind other */

--fw-regular:400;/* @kind other */--fw-medium:500;/* @kind other */--fw-semibold:600;/* @kind other */--fw-bold:700;/* @kind other */

--ls-display:-0.015em;/* @kind other */--ls-heading:0;/* @kind other */--ls-body:0;/* @kind other */--ls-eyebrow:0.16em;/* @kind other */--ls-button:0.06em;/* @kind other */

/* composed roles */
--type-display:var(--fw-bold) var(--fs-display-1)/var(--lh-tight) var(--font-display);/* @kind font */
--type-h1:var(--fw-bold) var(--fs-h1)/var(--lh-heading) var(--font-display);/* @kind font */
--type-h2:var(--fw-bold) var(--fs-h2)/var(--lh-heading) var(--font-display);/* @kind font */
--type-h3:var(--fw-semibold) var(--fs-h3)/var(--lh-snug) var(--font-display);/* @kind font */
--type-h4:var(--fw-semibold) var(--fs-h4)/var(--lh-snug) var(--font-body);/* @kind font */
--type-body:var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-body);/* @kind font */
--type-eyebrow:var(--fw-semibold) var(--fs-eyebrow)/1.2 var(--font-body);/* @kind font */
--type-button:var(--fw-semibold) var(--fs-sm)/1 var(--font-body);/* @kind font */
}

:root{
--sp-0:0px;--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;
--sp-7:32px;--sp-8:40px;--sp-9:48px;--sp-10:64px;--sp-11:80px;--sp-12:104px;--sp-13:128px;
--gutter:24px;--container:1200px;--container-narrow:760px;
--section-y:96px;--section-y-tight:64px;
--control-h-sm:34px;--control-h-md:44px;--control-h-lg:54px;
--tap-min:44px;/* @kind spacing */
}

:root{
--radius-0:0px;--radius-sm:2px;--radius-md:4px;--radius-lg:6px;--radius-xl:10px;--radius-pill:999px;
--bw-hair:1px;/* @kind other */--bw-thick:2px;/* @kind other */--bw-rule:3px;/* @kind other */
--rule-gold:var(--bw-rule) solid var(--gold-400);/* @kind other */
--border-card:var(--bw-hair) solid var(--border-default);/* @kind other */
}

:root{
--shadow-none:none;
--shadow-sm:0 1px 2px rgba(12,12,12,.08);
--shadow-md:0 2px 6px rgba(12,12,12,.10),0 1px 1px rgba(12,12,12,.06);
--shadow-lg:0 12px 28px -10px rgba(12,12,12,.28);
--shadow-overlay:0 24px 60px -16px rgba(12,12,12,.45);
--shadow-hard:4px 4px 0 var(--ink-900);
--shadow-hard-gold:4px 4px 0 var(--gold-400);
--inset-hair:inset 0 -1px 0 var(--border-default);
--blur-glass:saturate(140%) blur(10px);/* @kind other */
}

:root{
--dur-fast:120ms;/* @kind other */--dur-base:180ms;/* @kind other */--dur-slow:280ms;/* @kind other */--dur-reveal:420ms;/* @kind other */
--ease-out:cubic-bezier(.2,.8,.3,1);/* @kind other */--ease-in-out:cubic-bezier(.4,0,.2,1);/* @kind other */--ease-standard:cubic-bezier(.3,0,.2,1);/* @kind other */
--transition-control:background-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);/* @kind other */
}

/* SO1 Roofing component classes. Consumed by the React primitives in components/.
   Values are literal and intentional — do not snap them to a 4/8px grid. */

/* ---------- reset-ish base for kit surfaces ---------- */
.so1-root{font:var(--type-body);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased}
.so1-root h1,.so1-root h2,.so1-root h3{font-family:var(--font-display);letter-spacing:var(--ls-display);margin:0}
.so1-root a{color:var(--text-brand);text-decoration:none;border-bottom:1px solid var(--brand-border);transition:var(--transition-control)}
.so1-root a:hover{color:var(--gold-500);border-bottom-color:var(--gold-400)}

/* ---------- Button ---------- */
.so1-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font:var(--type-button);letter-spacing:var(--ls-button);text-transform:uppercase;border:var(--bw-thick) solid transparent;border-radius:var(--radius-md);cursor:pointer;white-space:nowrap;transition:var(--transition-control),transform var(--dur-fast) var(--ease-out);text-decoration:none}
.so1-btn:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.so1-btn:active{transform:translateY(1px)}
.so1-btn--sm{height:var(--control-h-sm);padding:0 14px;font-size:var(--fs-xs)}
.so1-btn--md{height:var(--control-h-md);padding:0 22px}
.so1-btn--lg{height:var(--control-h-lg);padding:0 30px;font-size:var(--fs-lg);letter-spacing:.05em}
.so1-btn--primary{background:var(--brand);color:var(--text-on-brand);border-color:var(--brand)}
/* Force exact-black, bold label on the gold CTA. Needed so anchor buttons beat
   the global `.so1-root a` link colour (which otherwise renders the text dark
   gold on gold). Higher specificity + explicit weight. */
.so1-root a.so1-btn--primary,.so1-btn--primary{color:#000;font-weight:var(--fw-bold)}
.so1-btn--primary:hover{background:var(--brand-hover);border-color:var(--brand-hover)}
.so1-btn--primary:active{background:var(--brand-press);border-color:var(--brand-press)}
.so1-btn--dark{background:var(--ink-900);color:var(--white);border-color:var(--ink-900)}
.so1-btn--dark:hover{background:var(--ink-700);border-color:var(--ink-700)}
.so1-btn--outline{background:transparent;color:var(--text-strong);border-color:var(--ink-900)}
.so1-btn--outline:hover{background:var(--ink-900);color:var(--white)}
.so1-btn--outline-light{background:transparent;color:var(--white);border-color:rgba(255,255,255,.55)}
.so1-btn--outline-light:hover{background:var(--white);color:var(--ink-900);border-color:var(--white)}
.so1-btn--ghost{background:transparent;color:var(--text-strong);border-color:transparent;text-transform:none;letter-spacing:0}
.so1-btn--ghost:hover{background:var(--ink-100)}
.so1-btn[disabled],.so1-btn--disabled{opacity:.42;pointer-events:none}
.so1-btn--block{width:100%}

/* ---------- IconButton ---------- */
.so1-iconbtn{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-md);border:var(--bw-hair) solid var(--border-default);background:var(--surface-card);color:var(--text-strong);cursor:pointer;transition:var(--transition-control)}
.so1-iconbtn--sm{width:34px;height:34px}
.so1-iconbtn--md{width:44px;height:44px}
.so1-iconbtn--lg{width:54px;height:54px}
.so1-iconbtn:hover{border-color:var(--ink-900);background:var(--ink-50)}
.so1-iconbtn:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.so1-iconbtn--solid{background:var(--ink-900);color:var(--white);border-color:var(--ink-900)}
.so1-iconbtn--solid:hover{background:var(--ink-700);border-color:var(--ink-700)}
.so1-iconbtn--brand{background:var(--brand);color:var(--ink-900);border-color:var(--brand)}
.so1-iconbtn--brand:hover{background:var(--brand-hover);border-color:var(--brand-hover)}
.so1-iconbtn--bare{border-color:transparent;background:transparent}
.so1-iconbtn--bare:hover{background:var(--ink-100);border-color:transparent}
.so1-iconbtn[disabled]{opacity:.42;pointer-events:none}

/* ---------- Badge / Tag ---------- */
.so1-badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:var(--radius-sm);font:var(--fw-semibold) var(--fs-xs)/1 var(--font-body);letter-spacing:.05em;text-transform:uppercase}
.so1-badge--brand{background:var(--brand);color:var(--ink-900)}
.so1-badge--dark{background:var(--ink-900);color:var(--white)}
.so1-badge--soft{background:var(--brand-soft);color:var(--gold-700);box-shadow:inset 0 0 0 1px var(--brand-border)}
.so1-badge--success{background:var(--success-soft);color:var(--success)}
.so1-badge--warning{background:var(--warning-soft);color:var(--warning)}
.so1-badge--danger{background:var(--danger-soft);color:var(--danger)}
.so1-badge--info{background:var(--info-soft);color:var(--info)}
.so1-badge--neutral{background:var(--ink-100);color:var(--ink-600)}
.so1-tag{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;border:var(--bw-hair) solid var(--border-default);border-radius:var(--radius-pill);background:var(--surface-card);font:var(--fw-medium) var(--fs-sm)/1 var(--font-body);color:var(--text-body);cursor:default;transition:var(--transition-control)}
.so1-tag--interactive{cursor:pointer}
.so1-tag--interactive:hover{border-color:var(--ink-900)}
.so1-tag--selected{background:var(--ink-900);border-color:var(--ink-900);color:var(--white)}
.so1-tag__x{display:inline-flex;cursor:pointer;opacity:.55}
.so1-tag__x:hover{opacity:1}

/* ---------- Card ---------- */
.so1-card{background:var(--surface-card);border:var(--border-card);border-radius:var(--radius-md);transition:box-shadow var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out)}
.so1-card--flat{box-shadow:none}
.so1-card--raised{box-shadow:var(--shadow-md)}
.so1-card--hard{box-shadow:var(--shadow-hard);border-color:var(--ink-900)}
.so1-card--inverse{background:var(--surface-inverse);border-color:var(--border-inverse);color:var(--white)}
.so1-card--interactive{cursor:pointer}
.so1-card--interactive:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--ink-300)}
.so1-card__rule{height:var(--bw-rule);background:var(--brand);border-radius:var(--radius-md) var(--radius-md) 0 0}
.so1-card__body{padding:var(--sp-6)}
.so1-card__body--tight{padding:var(--sp-4)}
.so1-card__body--roomy{padding:var(--sp-7)}

/* ---------- SectionHeading ---------- */
.so1-eyebrow{display:inline-flex;align-items:center;gap:9px;font:var(--type-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-brand)}
.so1-eyebrow::before{content:"";width:22px;height:var(--bw-thick);background:var(--brand)}
.so1-eyebrow--inverse{color:var(--gold-300)}
.so1-secthead{display:flex;flex-direction:column;gap:var(--sp-3)}
.so1-secthead--center{align-items:center;text-align:center}
.so1-secthead__title{font:var(--type-h2);color:var(--text-strong);text-transform:uppercase;letter-spacing:var(--ls-display)}
.so1-secthead__title--inverse{color:var(--white)}
.so1-secthead__sub{font:var(--type-body);color:var(--text-muted);max-width:56ch;margin:0}
.so1-secthead__sub--inverse{color:rgba(255,255,255,.72)}

/* ---------- Stat ---------- */
.so1-stat{display:flex;flex-direction:column;gap:2px}
.so1-stat__value{font:var(--fw-bold) 44px/1 var(--font-display);color:var(--text-strong);letter-spacing:var(--ls-display)}
.so1-stat__value--brand{color:var(--brand)}
.so1-stat__value--inverse{color:var(--white)}
.so1-stat__label{font:var(--fw-semibold) var(--fs-xs)/1.3 var(--font-body);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-muted)}
.so1-stat__label--inverse{color:rgba(255,255,255,.6)}

/* ---------- Field primitives ---------- */
.so1-field{display:flex;flex-direction:column;gap:7px}
.so1-field__label{font:var(--fw-semibold) var(--fs-xs)/1.2 var(--font-body);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-600)}
.so1-field__req{color:var(--danger);margin-left:3px}
.so1-field__hint{font:var(--fw-regular) var(--fs-xs)/1.45 var(--font-body);color:var(--text-subtle)}
.so1-field__error{font:var(--fw-medium) var(--fs-xs)/1.45 var(--font-body);color:var(--danger)}
.so1-input{width:100%;box-sizing:border-box;height:var(--control-h-md);padding:0 13px;font:var(--type-body);color:var(--text-strong);background:var(--surface-card);border:var(--bw-hair) solid var(--border-default);border-radius:var(--radius-md);transition:var(--transition-control)}
.so1-input::placeholder{color:var(--text-subtle)}
.so1-input:hover{border-color:var(--ink-300)}
.so1-input:focus{outline:none;border-color:var(--ink-900);box-shadow:0 0 0 3px rgba(198,154,76,.32)}
.so1-input--lg{height:var(--control-h-lg);font-size:var(--fs-lg);padding:0 16px}
.so1-input--invalid{border-color:var(--danger)}
.so1-input--invalid:focus{box-shadow:0 0 0 3px rgba(179,38,30,.2)}
.so1-input[disabled]{background:var(--ink-50);color:var(--text-subtle)}
.so1-input--textarea{height:auto;min-height:118px;padding:11px 13px;line-height:var(--lh-body);resize:vertical}
.so1-input__wrap{position:relative;display:flex;align-items:center}
.so1-input__affix{position:absolute;left:13px;display:flex;color:var(--text-subtle);pointer-events:none}
.so1-input--has-affix{padding-left:40px}
.so1-select{width:100%;box-sizing:border-box;height:var(--control-h-md);padding:0 38px 0 13px;font:var(--type-body);color:var(--text-strong);background:var(--surface-card);border:var(--bw-hair) solid var(--border-default);border-radius:var(--radius-md);appearance:none;cursor:pointer;transition:var(--transition-control)}
.so1-select:hover{border-color:var(--ink-300)}
.so1-select:focus{outline:none;border-color:var(--ink-900);box-shadow:0 0 0 3px rgba(198,154,76,.32)}
.so1-select__wrap{position:relative}
.so1-select__caret{position:absolute;right:13px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--ink-500)}

/* ---------- Checkbox / Radio / Switch ---------- */
.so1-check{display:inline-flex;align-items:flex-start;gap:11px;cursor:pointer;font:var(--type-body);color:var(--text-body)}
.so1-check input{position:absolute;opacity:0;width:0;height:0}
.so1-check__box{flex:0 0 auto;width:20px;height:20px;margin-top:2px;border:var(--bw-thick) solid var(--ink-300);border-radius:var(--radius-sm);background:var(--surface-card);display:flex;align-items:center;justify-content:center;color:transparent;transition:var(--transition-control)}
.so1-check:hover .so1-check__box{border-color:var(--ink-900)}
.so1-check--checked .so1-check__box{background:var(--ink-900);border-color:var(--ink-900);color:var(--brand)}
.so1-check--radio .so1-check__box{border-radius:var(--radius-pill)}
.so1-check--radio.so1-check--checked .so1-check__box{background:var(--surface-card);border-color:var(--ink-900)}
.so1-check__dot{width:10px;height:10px;border-radius:var(--radius-pill);background:var(--ink-900)}
.so1-check--disabled{opacity:.45;pointer-events:none}
.so1-check__text{display:flex;flex-direction:column;gap:1px}
.so1-check__desc{font-size:var(--fs-sm);color:var(--text-muted)}
.so1-switch{display:inline-flex;align-items:center;gap:11px;cursor:pointer;font:var(--type-body);color:var(--text-body)}
.so1-switch__track{width:46px;height:26px;border-radius:var(--radius-pill);background:var(--ink-300);position:relative;transition:background-color var(--dur-base) var(--ease-out)}
.so1-switch__knob{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:var(--radius-pill);background:var(--white);box-shadow:var(--shadow-sm);transition:transform var(--dur-base) var(--ease-out)}
.so1-switch--on .so1-switch__track{background:var(--ink-900)}
.so1-switch--on .so1-switch__knob{transform:translateX(20px);background:var(--brand)}

/* ---------- OptionCard (quote flow selectable) ---------- */
.so1-option{display:flex;align-items:center;gap:var(--sp-4);width:100%;box-sizing:border-box;padding:var(--sp-4);text-align:left;background:var(--surface-card);border:var(--bw-thick) solid var(--border-default);border-radius:var(--radius-md);cursor:pointer;font:var(--type-body);transition:var(--transition-control)}
.so1-option:hover{border-color:var(--ink-400)}
.so1-option--selected{border-color:var(--ink-900);box-shadow:var(--shadow-hard-gold)}
.so1-option__icon{flex:0 0 auto;width:44px;height:44px;border-radius:var(--radius-md);background:var(--ink-50);display:flex;align-items:center;justify-content:center;color:var(--ink-900)}
.so1-option--selected .so1-option__icon{background:var(--brand);color:var(--ink-900)}
.so1-option__title{font:var(--fw-semibold) var(--fs-lg)/1.25 var(--font-body);color:var(--text-strong)}
.so1-option__desc{font-size:var(--fs-sm);color:var(--text-muted);line-height:1.45}

/* ---------- StepProgress ---------- */
.so1-steps{display:flex;align-items:center;gap:0;width:100%}
.so1-steps__item{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.so1-steps__dot{width:28px;height:28px;border-radius:var(--radius-pill);display:flex;align-items:center;justify-content:center;font:var(--fw-bold) var(--fs-xs)/1 var(--font-body);background:var(--ink-100);color:var(--ink-500);border:var(--bw-thick) solid transparent;transition:var(--transition-control)}
.so1-steps__item--active .so1-steps__dot{background:var(--brand);color:var(--ink-900)}
.so1-steps__item--done .so1-steps__dot{background:var(--ink-900);color:var(--brand)}
.so1-steps__label{font:var(--fw-semibold) var(--fs-xs)/1 var(--font-body);letter-spacing:.09em;text-transform:uppercase;color:var(--text-subtle);white-space:nowrap}
.so1-steps__item--active .so1-steps__label,.so1-steps__item--done .so1-steps__label{color:var(--text-strong)}
.so1-steps__bar{flex:1 1 auto;height:var(--bw-thick);background:var(--ink-100);margin:0 12px}
.so1-steps__bar--done{background:var(--ink-900)}

/* ---------- Tabs ---------- */
.so1-tabs{display:flex;gap:var(--sp-6);border-bottom:var(--bw-hair) solid var(--border-default)}
.so1-tabs__tab{position:relative;padding:0 2px 13px;background:none;border:none;cursor:pointer;font:var(--fw-semibold) var(--fs-sm)/1 var(--font-body);letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted);transition:color var(--dur-fast) var(--ease-out)}
.so1-tabs__tab:hover{color:var(--text-strong)}
.so1-tabs__tab--active{color:var(--text-strong)}
.so1-tabs__tab--active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:var(--bw-rule);background:var(--brand)}
.so1-tabs--inverse{border-bottom-color:var(--border-inverse)}
.so1-tabs--inverse .so1-tabs__tab{color:rgba(255,255,255,.6)}
.so1-tabs--inverse .so1-tabs__tab--active,.so1-tabs--inverse .so1-tabs__tab:hover{color:var(--white)}

/* ---------- Accordion ---------- */
.so1-acc{border-top:var(--bw-hair) solid var(--border-default)}
.so1-acc__item{border-bottom:var(--bw-hair) solid var(--border-default)}
.so1-acc__btn{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);width:100%;padding:var(--sp-5) 0;background:none;border:none;cursor:pointer;text-align:left;font:var(--fw-semibold) var(--fs-h4)/1.35 var(--font-body);color:var(--text-strong)}
.so1-acc__btn:hover{color:var(--gold-600)}
.so1-acc__chev{flex:0 0 auto;color:var(--brand);transition:transform var(--dur-base) var(--ease-out)}
.so1-acc__item--open .so1-acc__chev{transform:rotate(180deg)}
.so1-acc__panel{overflow:hidden;max-height:0;transition:max-height var(--dur-slow) var(--ease-out)}
.so1-acc__item--open .so1-acc__panel{max-height:420px}
.so1-acc__inner{padding:0 0 var(--sp-5);color:var(--text-muted);max-width:72ch}

/* ---------- Alert ---------- */
.so1-alert{display:flex;gap:13px;padding:14px 16px;border-radius:var(--radius-md);border-left:var(--bw-rule) solid var(--ink-900);background:var(--ink-50);font:var(--type-body);color:var(--text-body)}
.so1-alert__title{font-weight:var(--fw-semibold);color:var(--text-strong)}
.so1-alert--success{background:var(--success-soft);border-left-color:var(--success)}
.so1-alert--warning{background:var(--warning-soft);border-left-color:var(--warning)}
.so1-alert--danger{background:var(--danger-soft);border-left-color:var(--danger)}
.so1-alert--info{background:var(--info-soft);border-left-color:var(--info)}
.so1-alert__icon{flex:0 0 auto;margin-top:2px}

/* ---------- Toast ---------- */
.so1-toast{display:flex;align-items:center;gap:12px;padding:13px 16px;background:var(--ink-900);color:var(--white);border-radius:var(--radius-md);box-shadow:var(--shadow-overlay);font:var(--fw-medium) var(--fs-sm)/1.4 var(--font-body);min-width:290px}
.so1-toast__accent{width:var(--bw-rule);align-self:stretch;background:var(--brand);border-radius:var(--radius-pill)}
.so1-toast__close{margin-left:auto;opacity:.6;cursor:pointer;display:flex}
.so1-toast__close:hover{opacity:1}

/* ---------- Tooltip ---------- */
.so1-tt{position:relative;display:inline-flex}
.so1-tt__bubble{position:absolute;z-index:40;padding:7px 10px;background:var(--ink-900);color:var(--white);font:var(--fw-medium) var(--fs-xs)/1.35 var(--font-body);border-radius:var(--radius-sm);white-space:nowrap;box-shadow:var(--shadow-md);opacity:0;pointer-events:none;transition:opacity var(--dur-fast) var(--ease-out)}
.so1-tt--visible .so1-tt__bubble{opacity:1}
.so1-tt__bubble--top{bottom:calc(100% + 8px);left:50%;transform:translateX(-50%)}
.so1-tt__bubble--bottom{top:calc(100% + 8px);left:50%;transform:translateX(-50%)}
.so1-tt__bubble--right{left:calc(100% + 8px);top:50%;transform:translateY(-50%)}

/* ---------- Dialog ---------- */
.so1-dialog__scrim{position:fixed;inset:0;background:var(--overlay);display:flex;align-items:center;justify-content:center;padding:var(--sp-6);z-index:60;animation:so1-fade var(--dur-base) var(--ease-out)}
.so1-dialog{width:100%;max-width:520px;background:var(--surface-card);border-radius:var(--radius-md);box-shadow:var(--shadow-overlay);overflow:hidden;animation:so1-rise var(--dur-slow) var(--ease-out)}
.so1-dialog__rule{height:var(--bw-rule);background:var(--brand)}
.so1-dialog__head{display:flex;align-items:flex-start;gap:var(--sp-4);padding:var(--sp-6) var(--sp-6) var(--sp-3)}
.so1-dialog__title{font:var(--type-h3);text-transform:uppercase;color:var(--text-strong);letter-spacing:var(--ls-display)}
.so1-dialog__body{padding:0 var(--sp-6) var(--sp-6);color:var(--text-muted)}
.so1-dialog__foot{display:flex;justify-content:flex-end;gap:var(--sp-3);padding:var(--sp-4) var(--sp-6);background:var(--ink-50);border-top:var(--bw-hair) solid var(--border-subtle)}
@keyframes so1-fade{from{opacity:0}to{opacity:1}}
@keyframes so1-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- media placeholder (no photography supplied) ---------- */
.so1-media{position:relative;background:repeating-linear-gradient(135deg,var(--ink-100) 0 12px,var(--ink-50) 12px 24px);border:var(--bw-hair) solid var(--border-default);display:flex;align-items:center;justify-content:center;overflow:hidden}
.so1-media__label{font:var(--fw-semibold) var(--fs-xs)/1 var(--font-body);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--ink-400)}

html,body{margin:0;padding:0}
.so1-site{
--brand:var(--gold-400);--brand-hover:var(--gold-500);--brand-press:var(--gold-600);
--brand-soft:var(--gold-50);--brand-border:var(--gold-200);--focus-ring:var(--gold-400);
--success:var(--green-500);--success-soft:var(--green-50);
--warning:var(--amber-500);--warning-soft:var(--amber-50);
--danger:var(--red-500);--danger-soft:var(--red-50);
--info:var(--blue-500);--info-soft:var(--blue-50);
--text-inverse:var(--white);--surface-inverse-2:var(--ink-800);
--border-inverse:rgba(255,255,255,.14);
--border-card:var(--bw-hair) solid var(--border-default);
--inset-hair:inset 0 -1px 0 var(--border-default);
--shadow-hard:4px 4px 0 var(--ink-900);--shadow-hard-gold:4px 4px 0 var(--gold-400);
--w-inv-brand:var(--gold-400);
--w-header-bg:#0C0C0C;--w-header-text:#FFFFFF;--w-switch-bg:#000000;
--w-hero-bg:#0C0C0C;--w-hero-text:#FFFFFF;--w-hero-sub:rgba(255,255,255,.72);
--w-band-bg:#0C0C0C;--w-band-text:#FFFFFF;--w-band-sub:rgba(255,255,255,.70);
--w-footer-bg:#0C0C0C;--w-footer-text:#FFFFFF;--w-rule:rgba(255,255,255,.14);
}
.so1-site[data-m="dark"]{
--gold-50:#241B0D;--gold-100:#3A2C14;--gold-200:#6B4F20;--gold-300:#B0863B;
--gold-400:#C69A4C;--gold-500:#D9B370;--gold-600:#E7CB99;--gold-700:#EFDCB8;
--ink-900:#F7F5F1;--ink-800:#EDE9E3;--ink-700:#DAD5CC;--ink-600:#B7B1A7;
--ink-500:#948E84;--ink-400:#726D66;--ink-300:#4A4741;--ink-200:#33312E;
--ink-100:#221F1D;--ink-50:#191817;--white:#0C0C0C;
--green-500:#6BBF84;--green-50:#14251A;--amber-500:#E0A64A;--amber-50:#27200F;
--red-500:#E0736A;--red-50:#2A1614;--blue-500:#7FAAD4;--blue-50:#141C25;
--text-strong:#F7F5F1;--text-body:#D4CFC6;--text-muted:#9C968C;--text-subtle:#7A756D;
--text-brand:#D9B370;--text-on-brand:#0C0C0C;
--surface-page:#0C0C0C;--surface-card:#161514;--surface-sunken:#111010;--surface-inverse:#F7F5F1;
--border-subtle:#232220;--border-default:#34322E;--border-strong:#F7F5F1;
--border-inverse:rgba(12,12,12,.16);--brand-soft:#241B0D;--brand-border:#4A3718;
--w-inv-brand:#8E6A2C;
--w-header-bg:#0C0C0C;--w-header-text:#F7F5F1;--w-switch-bg:#000000;
--w-hero-bg:#000000;--w-hero-sub:rgba(247,245,241,.66);
--w-band-bg:#161514;--w-band-text:#F7F5F1;--w-band-sub:rgba(247,245,241,.62);
--w-footer-bg:#080807;--w-footer-text:#F7F5F1;--w-rule:rgba(247,245,241,.12);
}
.so1-site a{color:var(--text-brand);border-bottom-color:var(--gold-200)}
.so1-site a:hover{color:var(--gold-500)}

/* ============================================================
   SO1 site chrome — header, mobile nav, footer links, helpers
   ============================================================ */
.so1-site a.so1-navlink,.so1-site a.so1-footlink{border-bottom:0}
.so1-header__brand{display:flex;align-items:center;gap:0;background:none;border:0;padding:0;cursor:pointer}
.so1-header__brand img{height:46px;width:auto;display:block}
.so1-navlink{background:none;border:0;border-bottom:3px solid transparent;cursor:pointer;padding:0 16px;height:50px;display:inline-flex;align-items:center;font:600 15.5px/1 var(--font-body);letter-spacing:.07em;text-transform:uppercase;color:var(--w-header-text);white-space:nowrap;transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.so1-navlink:hover{color:var(--gold-400)}
.so1-navlink--active{color:var(--gold-400);border-bottom-color:var(--gold-400)}
.so1-burger{display:none;margin-left:auto;width:46px;height:44px;align-items:center;justify-content:center;gap:5px;flex-direction:column;background:none;border:1px solid var(--w-rule);border-radius:var(--radius-sm);cursor:pointer}
.so1-burger span{display:block;width:20px;height:2px;background:var(--w-header-text)}
.so1-mobilenav{display:none;position:fixed;inset:0;z-index:80;background:var(--ink-900);color:#fff;flex-direction:column;padding:24px}
.so1-mobilenav.is-open{display:flex}
.so1-mobilenav a{color:#fff;border-bottom:1px solid var(--w-rule);padding:18px 4px;font:600 20px/1 var(--font-display);letter-spacing:.02em;text-transform:uppercase}
.so1-mobilenav a:hover{color:var(--gold-400)}
.so1-mobilenav__close{align-self:flex-end;background:none;border:0;color:#fff;font:600 14px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;padding:8px}

/* Sticky mobile "get a quote" button — follows the viewer on every page */
.so1-quote-fab{display:none}
@media (max-width:900px){
  .so1-quote-fab{
    display:flex;align-items:center;justify-content:center;gap:10px;
    position:fixed;left:16px;right:16px;bottom:16px;z-index:150;
    height:56px;padding:0 22px;border:0;border-radius:var(--radius-pill);
    background:var(--gold-400);color:var(--ink-900);cursor:pointer;
    font:700 15px/1 var(--font-body);letter-spacing:.07em;text-transform:uppercase;
    text-decoration:none;box-shadow:0 10px 26px rgba(12,12,12,.4),0 2px 6px rgba(12,12,12,.3);
    transition:background var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out);
  }
  .so1-quote-fab:hover{background:var(--gold-500)}
  .so1-quote-fab:active{transform:translateY(1px)}
  .so1-quote-fab svg{width:18px;height:18px;flex:0 0 auto}
  .so1-quote-fab.is-hidden{display:none}
  /* keep the footer legal line clear of the sticky button */
  .so1-site footer{padding-bottom:96px !important}
}

@media (max-width:900px){
  html,body{overflow-x:hidden}
  .so1-desknav{display:none !important}
  .so1-header__phone{display:none !important}
  /* the header quote button lives in the slide-in menu on mobile */
  .so1-site .so1-header__actions .so1-btn{display:none !important}
  .so1-burger{display:flex}

  /* --- collapse every fixed multi-column grid (space-agnostic) --- */
  .so1-site [style*="1fr 1fr"],
  .so1-site [style*="repeat(2"],
  .so1-site [style*="repeat(3"],
  .so1-site [style*="repeat(4"],
  .so1-site [style*="minmax(220px"],
  .so1-site [style*="minmax(220px,300px)"],
  .so1-site [style*="180px minmax"],
  .so1-site [style*="160px 1fr"],
  .so1-site [style*="60px minmax"],
  .so1-site [style*="60px 1fr"]{grid-template-columns:1fr !important}
  /* footer keeps two columns until phones */
  .so1-site footer [style*="2fr 1fr 1fr 1fr"]{grid-template-columns:1fr 1fr !important}

  /* tighten the big desktop gaps so stacked content sits close */
  .so1-site [style*="gap: 64px"],.so1-site [style*="gap:64px"],
  .so1-site [style*="gap: 80px"],.so1-site [style*="gap:80px"],
  .so1-site [style*="gap: 48px"],.so1-site [style*="gap:48px"]{gap:26px !important}
  .so1-site [style*="clamp(40px, 5vw, 80px)"],.so1-site [style*="clamp(40px,5vw,80px)"],
  .so1-site [style*="clamp(32px, 4vw, 64px)"]{gap:26px !important}

  /* stacked cells: drop the vertical divider rules + side padding, add a top rule */
  .so1-site [style*="border-left: 1px solid var(--w-rule)"],
  .so1-site [style*="border-left:1px solid var(--w-rule)"]{
    border-left:0 !important;border-top:1px solid var(--w-rule) !important;
    padding:24px 0 0 0 !important;
  }
  .so1-site [style*="border-left: 2px solid var(--gold-400)"]{padding-left:16px !important}

  /* nothing should stay pinned while scrolling on a phone */
  .so1-site [style*="position: sticky"],.so1-site [style*="position:sticky"]{position:static !important;top:auto !important}

  /* let display headings breathe, never overflow */
  .so1-site h1,.so1-site h2{overflow-wrap:break-word}
  .so1-site main{overflow-x:hidden}
}
@media (max-width:560px){
  .so1-site footer [style*="2fr 1fr 1fr 1fr"]{grid-template-columns:1fr !important}
  /* comfortable section padding on small phones */
  .so1-site main > section{padding-left:20px !important;padding-right:20px !important}
}

/* ============================================================
   Quote wizard modal (qm-) — shared multi-step popup
   ============================================================ */
.qm-scrim{position:fixed;inset:0;z-index:200;background:var(--overlay);display:flex;align-items:flex-start;justify-content:center;padding:6vh 20px 40px;overflow-y:auto;animation:qm-fade .2s var(--ease-out)}
.qm-scrim[hidden]{display:none!important}
.qm-dialog{position:relative;width:100%;max-width:540px;margin:auto;background:var(--surface-card);color:var(--text-body);border-radius:var(--radius-lg);box-shadow:var(--shadow-overlay);overflow:hidden;font:var(--type-body);animation:qm-rise .28s var(--ease-out)}
@keyframes qm-fade{from{opacity:0}to{opacity:1}}
@keyframes qm-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.qm-rule{height:var(--bw-rule);background:var(--gold-400)}
.qm-close{position:absolute;top:12px;right:12px;width:38px;height:38px;border:0;background:transparent;color:var(--text-muted);font-size:20px;line-height:1;cursor:pointer;border-radius:var(--radius-sm);transition:var(--transition-control)}
.qm-close:hover{background:var(--ink-100);color:var(--text-strong)}
.qm-head{padding:28px 28px 0}
.qm-steps{display:flex;align-items:center;gap:8px}
.qm-dot{flex:0 0 auto;width:26px;height:26px;border-radius:var(--radius-pill);display:flex;align-items:center;justify-content:center;font:700 12px/1 var(--font-body);background:var(--ink-100);color:var(--ink-500);transition:var(--transition-control)}
.qm-dot--active{background:var(--gold-400);color:var(--ink-900)}
.qm-dot--done{background:var(--ink-900);color:var(--gold-400)}
.qm-seg{flex:1 1 auto;height:2px;background:var(--ink-100)}
.qm-seg--done{background:var(--ink-900)}
.qm-body{padding:22px 28px 4px}
.qm-step{display:flex;flex-direction:column;gap:16px}
.qm-step[hidden]{display:none!important}
.qm-step h3{font:700 clamp(24px,3.2vw,32px)/1.02 var(--font-display);letter-spacing:-.01em;text-transform:uppercase;color:var(--text-strong);margin:0}
.qm-sub{margin:0;color:var(--text-muted);font-size:14px;line-height:1.5}
.qm-options{display:flex;flex-direction:column;gap:10px}
.qm-labelrow{display:flex;align-items:center;gap:10px}
.qm-optional{font:600 10.5px/1 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--text-subtle);border:1px solid var(--border-default);border-radius:var(--radius-pill);padding:4px 9px}
.qm-foot{display:flex;gap:12px;align-items:center;padding:18px 28px 26px}
.qm-foot .qm-next{margin-left:auto}
.qm-foot[hidden]{display:none!important}
.qm-done{align-items:center;text-align:center;padding:34px 28px 40px;gap:14px}
.qm-check{width:70px;height:70px;border-radius:var(--radius-pill);background:var(--gold-400);color:var(--ink-900);display:flex;align-items:center;justify-content:center}
@media (max-width:560px){
  .qm-scrim{padding:0}
  .qm-dialog{max-width:none;min-height:100%;border-radius:0;margin:0}
}

/* Sample photos dropped into the design's media placeholders */
.so1-media > img.so1-sample{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;z-index:1}