/* =====================================================================
   v2 (S1.12): content-led home. Loaded after main.css, overrides v1 where names overlap.
   ===================================================================== */

/* Pill buttons with an icon island */
.pill { display: inline-flex; align-items: center; gap: 12px; min-height: 54px; padding: 0 8px 0 24px; border-radius: 999px; font: 600 1rem/1 var(--f-text); text-decoration: none; transition: transform .5s cubic-bezier(.32,.72,0,1), background-color .3s var(--ease), border-color .3s var(--ease); }
.pill:active { transform: scale(.98); }
.pill__icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(31, 36, 39, .14); transition: transform .5s cubic-bezier(.32,.72,0,1); }
.pill__icon .icon { width: 18px; height: 18px; }
.pill:hover .pill__icon { transform: translateX(3px) scale(1.05); }
.pill--brass { background: var(--c-brass); color: var(--c-deep); }
.pill--brass:hover { background: #c99a58; }
.pill--ghost { padding: 0 24px; border: 1px solid rgba(243, 244, 242, .32); color: var(--c-frost); }
.pill--ghost:hover { border-color: var(--c-frost); }
.pill--ghost .icon { width: 18px; height: 18px; }

/* Hero v2 */
.hero__grid { align-items: center; }
.hero__facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 18px 40px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--c-line-dark); }
.hero__facts dt { font-size: .8rem; color: var(--c-muted-dark); margin-bottom: 4px; }
.hero__facts dd { font-weight: 600; color: var(--c-frost); }
.modes { display: flex; justify-content: center; gap: 8px; margin-top: 28px; flex-wrap: wrap; }
.modes__btn { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px 0 10px; border-radius: 999px; border: 1px solid rgba(243, 244, 242, .22); background: rgba(243, 244, 242, .04); color: var(--c-muted-dark); font: 500 .9rem/1 var(--f-text); cursor: pointer; transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.modes__btn:hover { color: var(--c-frost); border-color: rgba(243, 244, 242, .45); }
.modes__btn.is-active { background: var(--c-frost); color: var(--c-deep); border-color: var(--c-frost); }
.modes__dial { position: relative; width: 24px; height: 24px; border-radius: 50%; border: 1px solid currentColor; opacity: .8; }
.modes__dial::after { content: ""; position: absolute; left: 50%; top: 50%; width: 2px; height: 9px; margin-left: -1px; background: var(--c-brass); border-radius: 2px; transform-origin: 50% 0; }
.modes__dial[data-dial="0"]::after { transform: rotate(0deg); }
.modes__dial[data-dial="90"]::after { transform: rotate(90deg); }
.modes__dial[data-dial="180"]::after { transform: rotate(180deg); }
.modes__caption { margin: 14px 0 0; text-align: center; font-size: .9rem; color: var(--c-muted-dark); min-height: 1.6em; }
.win .win__sash, .win .win__lever, .win .win__light { transition: transform .9s cubic-bezier(.32,.72,0,1), opacity .9s var(--ease); }
.win.is-tilt .win__light, .win.is-turn .win__light { opacity: .9; }
.win__frame::before { content: ""; position: absolute; inset: 3.2%; border: 1px solid rgba(255, 255, 255, .05); border-radius: 3px; pointer-events: none; }
.win__sash::after { content: ""; position: absolute; inset: 6.5% 7%; border: 2px solid rgba(0, 0, 0, .25); border-radius: 1px; pointer-events: none; }

/* Anatomy (cutaway) */
.anatomy__head { max-width: 720px; margin-bottom: clamp(32px, 5vw, 56px); }
.anatomy__head .section__lead { margin-top: 18px; }
.anatomy__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.anatomy__figure { margin: 0; position: sticky; top: calc(var(--header-h) + 24px); padding: clamp(16px, 2.5vw, 28px); background: #fff; border-radius: 22px; box-shadow: 0 1px 0 rgba(34,39,42,.06), 0 30px 60px -40px rgba(34,39,42,.35); }
.anatomy__figure figcaption { margin-top: 10px; font-size: .85rem; color: var(--c-muted); }
.cutaway { width: 100%; height: auto; }
.cutaway__side { font: italic 400 20px var(--f-display); fill: var(--c-muted); }
.cut { transition: opacity .4s var(--ease); }
.cut--frame path:first-child, .cut--sash path:first-child { fill: #f4f5f4; stroke: var(--c-frame); stroke-width: 2.4; }
.cut__wall { fill: none; stroke: var(--c-frame); stroke-width: 1.4; opacity: .55; }
.cut--glass rect { fill: #cfe0e6; stroke: #7f9aa4; stroke-width: 1.2; }
.cut--glass .cut__gas { fill: #eaf2f4; stroke: none; }
.cut--spacer rect { fill: #9aa3a8; }
.cut--steel path { fill: none; stroke: #7d868b; stroke-width: 4; stroke-linejoin: round; }
.cut--seal rect { fill: #1f2427; }
.cut--lock rect, .cut--lock circle { fill: var(--c-brass); }
.cut--bead { fill: #e9ecea; stroke: var(--c-frame); stroke-width: 1.6; }
.cutaway.has-focus .cut { opacity: .25; }
.cutaway.has-focus .cut.is-hot { opacity: 1; }
.hot { cursor: pointer; }
.hot circle { fill: var(--c-deep); stroke: var(--c-frost); stroke-width: 2; transition: fill .3s var(--ease); }
.hot text { fill: var(--c-frost); font: 600 14px var(--f-text); text-anchor: middle; pointer-events: none; }
.hot.is-active circle { fill: var(--c-brass); }
.hot.is-active text { fill: var(--c-deep); }
.anatomy__parts { display: grid; gap: 6px; }
.part { display: grid; grid-template-columns: 36px 1fr; gap: 14px; width: 100%; padding: 16px 16px 16px 12px; text-align: left; background: transparent; border: 0; border-radius: 16px; color: inherit; font: inherit; cursor: pointer; transition: background-color .3s var(--ease); }
.part:hover { background: rgba(34, 39, 42, .04); }
.part.is-active { background: var(--c-glass); }
.part__num { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--c-deep); color: var(--c-frost); font-weight: 600; font-size: .85rem; }
.part.is-active .part__num { background: var(--c-brass); color: var(--c-deep); }
.part__title { display: block; font: 400 1.5rem/1.15 var(--f-display); margin-bottom: 4px; }
.part__text { display: block; color: var(--c-muted); font-size: .975rem; }

/* Comparison */
.compare { background: var(--c-glass); }
.table-wrap { overflow-x: auto; border-radius: 22px; background: #fff; box-shadow: 0 30px 60px -45px rgba(34,39,42,.35); }
.compare__table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: .975rem; }
.compare__table th, .compare__table td { padding: 18px 22px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--c-line); }
.compare__table tbody tr:last-child th, .compare__table tbody tr:last-child td { border-bottom: 0; }
.compare__table thead th { font: 400 1.4rem/1.15 var(--f-display); background: var(--c-frost); }
.compare__table thead th:nth-child(2) { color: var(--c-brass-ink); }
.compare__table tbody th { width: 22%; font-weight: 600; }
.compare__table td:nth-child(2) { font-weight: 500; }
.compare__table td:nth-child(3) { color: var(--c-muted); }
.compare__more { margin-top: 24px; }

/* Catalogue (wide rows) */
.catalogue__list--wide li { border-top: 1px solid var(--c-line); }
.catalogue__list--wide li:last-child { border-bottom: 1px solid var(--c-line); }
.catalogue__list--wide .product-row { grid-template-columns: 64px minmax(180px, 260px) 1fr 22px; padding: 22px 12px; border-radius: 14px; }
.catalogue__list--wide .product-row__name { font-size: 1.9rem; }
.catalogue__list--wide .product-row__line { margin: 0; }

/* Doors */
.doors { background: var(--c-deep); color: var(--c-frost); }
.doors .section__title { color: var(--c-frost); }
.doors__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 32px 0 26px; }
.tabs [role="tab"] { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(243,244,242,.22); background: transparent; color: var(--c-muted-dark); font: 500 .95rem/1 var(--f-text); cursor: pointer; transition: background-color .3s var(--ease), color .3s var(--ease); }
.tabs [role="tab"][aria-selected="true"] { background: var(--c-frost); color: var(--c-deep); border-color: var(--c-frost); }
.doors__panels p { color: var(--c-muted-dark); max-width: 46ch; }
.doors .text-link { color: var(--c-brass); }
.door { position: relative; width: min(100%, 520px); aspect-ratio: 4 / 3.1; margin-inline: auto; }
.door__frame { position: absolute; top: 0; bottom: 20px; left: 0; right: 0; display: flex; padding: 3%; background: linear-gradient(180deg, #353b40, var(--c-frame)); border-radius: 6px; perspective: 1600px; box-shadow: 0 40px 70px -30px rgba(0,0,0,.7); transition: left .6s cubic-bezier(.32,.72,0,1), right .6s cubic-bezier(.32,.72,0,1); }
.door__outside { position: absolute; inset: 3%; border-radius: 2px; background: linear-gradient(180deg, #d4dfe2 0%, #b7cbc4 55%, #7f9a8c 100%); }
.door__leaf { position: relative; flex: 1 1 0; min-width: 0; border: 7px solid #343a3f; border-radius: 2px; background: linear-gradient(160deg, rgba(225,236,240,.6), rgba(150,178,188,.5)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); transition: transform 1s cubic-bezier(.32,.72,0,1), flex 1s cubic-bezier(.32,.72,0,1), opacity .4s var(--ease); }
.door__leaf i { position: absolute; right: 8px; top: 48%; width: 5px; height: 34px; border-radius: 3px; background: linear-gradient(90deg, #a8783d, #d6ac6e 50%, #9a6f37); }
.door__floor { position: absolute; left: -6%; right: -6%; bottom: 8px; height: 12px; border-radius: 2px; background: #2a2f33; }
/* entry: one solid leaf with a narrow glass strip */
.door[data-type="entry"] .door__frame { left: 28%; right: 28%; }
.door[data-type="entry"] .door__leaf--1 { background: linear-gradient(180deg, #3b4247, #30363a); transform-origin: 0 50%; }
.door[data-type="entry"] .door__leaf--1::before { content: ""; position: absolute; left: 30%; right: 30%; top: 10%; bottom: 40%; background: linear-gradient(160deg, rgba(225,236,240,.55), rgba(150,178,188,.45)); border-radius: 1px; }
.door[data-type="entry"] .door__leaf--2, .door[data-type="entry"] .door__leaf--3, .door[data-type="entry"] .door__leaf--4 { display: none; }
.door[data-type="entry"].is-open .door__leaf--1 { transform: rotateY(-58deg); }
/* bifold: four leaves fold to the left */
.door[data-type="bifold"] .door__leaf i { display: none; }
.door[data-type="bifold"] .door__leaf--4 i { display: block; }
.door[data-type="bifold"].is-open .door__leaf { flex: 0 0 7%; }
.door[data-type="bifold"].is-open .door__leaf--1, .door[data-type="bifold"].is-open .door__leaf--3 { transform: skewY(16deg); }
.door[data-type="bifold"].is-open .door__leaf--2, .door[data-type="bifold"].is-open .door__leaf--4 { transform: skewY(-16deg); }
/* patio + lift & slide: two leaves, the right one slides left */
.door[data-type="patio"] .door__leaf--3, .door[data-type="patio"] .door__leaf--4,
.door[data-type="lift"] .door__leaf--3, .door[data-type="lift"] .door__leaf--4 { display: none; }
.door[data-type="patio"] .door__leaf--1 i, .door[data-type="lift"] .door__leaf--1 i { display: none; }
.door[data-type="patio"] .door__leaf--2, .door[data-type="lift"] .door__leaf--2 { z-index: 2; }
.door[data-type="patio"] .door__leaf--2 i, .door[data-type="lift"] .door__leaf--2 i { right: auto; left: 8px; }
.door[data-type="patio"].is-open .door__leaf--2 { transform: translateX(-92%); }
.door[data-type="lift"].is-open .door__leaf--2 { transform: translate(-92%, -6px); }

/* Installation steps */
.install__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.install__head { position: sticky; top: calc(var(--header-h) + 24px); }
.install__head .section__lead { margin-top: 18px; }
.install__head .proto-note { margin-top: 20px; }
.steps { counter-reset: step; display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.steps li { counter-increment: step; position: relative; padding: 22px 0 22px 52px; border-top: 1px solid var(--c-line); }
.steps li::before { content: counter(step); position: absolute; left: 0; top: 20px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--c-line); display: flex; align-items: center; justify-content: center; font: 400 1.25rem/1 var(--f-display); color: var(--c-brass-ink); }
.steps h3 { font-weight: 600; font-size: 1.05rem; margin-bottom: 6px; }
.steps p { color: var(--c-muted); font-size: .95rem; margin: 0; }

/* Free quote + owner */
.quote-owner { padding-top: 0; }
.quote-owner__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 5vw, 64px); align-items: stretch; }
.checklist { padding: clamp(28px, 4vw, 52px); background: var(--c-glass); border-radius: 28px; }
.checklist__list { margin: 28px 0 32px; display: grid; gap: 14px; }
.checklist__list li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; }
.checklist__list .icon { width: 22px; height: 22px; color: var(--c-brass-ink); margin-top: 2px; }
.owner { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; padding: clamp(28px, 4vw, 52px); background: var(--c-frame); color: var(--c-frost); border-radius: 28px; }
.owner__quote { font: 400 clamp(1.8rem, 3vw, 2.5rem)/1.12 var(--f-display); margin: 0; }
.owner__list { display: grid; gap: 14px; color: var(--c-muted-dark); }
.owner__list strong { color: var(--c-frost); font-weight: 600; }
.owner__years { margin: 0; font: italic 400 1.3rem/1.2 var(--f-display); color: var(--c-brass); }

/* Regions */
.regions__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px clamp(24px, 4vw, 56px); }
.region__name { font: italic 400 1.6rem/1 var(--f-display); color: var(--c-brass-ink); padding-bottom: 12px; border-bottom: 1px solid var(--c-line); margin-bottom: 8px; }
.region li { padding: 6px 0; }
.region a { font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(134, 98, 47, .35); }
.region a:hover { color: var(--c-brass-ink); border-bottom-color: currentColor; }
.region span { color: var(--c-muted); }

/* FAQ v2 layout */
.faq__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq__grid .section__lead { margin-top: 18px; }
.faq__grid .faq__list { grid-template-columns: 1fr; }

@media (max-width: 900px) {
	.anatomy__grid, .doors__grid, .install__grid, .quote-owner__grid, .faq__grid { grid-template-columns: 1fr; }
	.anatomy__figure, .install__head { position: static; }
	.hero__facts { grid-template-columns: 1fr 1fr; }
	.steps { grid-template-columns: 1fr; }
	.regions__grid { grid-template-columns: 1fr 1fr; }
	.catalogue__list--wide .product-row { grid-template-columns: 56px 1fr 22px; }
	.catalogue__list--wide .product-row__name, .catalogue__list--wide .product-row__line { grid-column: 2; }
	.catalogue__list--wide .product-row__go { grid-column: 3; grid-row: 1 / span 2; }
	.catalogue__list--wide .product-row__icon { grid-row: 1 / span 2; }
	.hero__visual { max-width: 220px; }
	.modes { margin-top: 18px; }
	.door { width: 100%; }
}
@media (max-width: 560px) {
	.regions__grid { grid-template-columns: 1fr; }
	.hero__facts { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.win .win__sash, .win .win__lever, .door__leaf, .door__frame { transition: none; }
}

/* Dark sections: leads need the light muted tone for contrast */
.business .section__lead, .doors .section__lead, .final .section__lead, .hero .section__lead { color: var(--c-muted-dark); }
.business .section__lead a, .final .section__lead a { color: var(--c-frost); }

/* Phone: headline first, then the window; handle buttons in one row */
@media (max-width: 900px) {
	.hero__visual { order: 0; max-width: 300px; margin-top: 40px; }
	.hero__visual .win { width: 200px; }
	.modes { flex-wrap: nowrap; gap: 6px; }
	.modes__btn { padding: 0 10px 0 6px; gap: 6px; font-size: .8rem; min-height: 40px; }
	.modes__dial { width: 20px; height: 20px; }
}

/* Prototype badge out of the way of content */
.proto-badge { top: calc(var(--header-h) + 8px); bottom: auto; left: auto; right: 12px; }

/* Cutaway: drawing fills its card */
.cut--frame path:first-child, .cut--sash path:first-child { fill: #eef1f0; stroke-width: 2.6; }
.cut__wall { stroke-width: 1.6; opacity: .7; }
.cut--steel path { stroke-width: 5; }