/* Sew & Sew Interiors, CR-02 (website-brief.md 3.5): styles for the six engagement features, loaded
   only on the pages that carry one. Tokens and type are main.css's. Enhanced states key on the
   feature's own .is-ready class (set by its script), so a feature whose script fails stays in its
   complete no-JavaScript layout. Every movement sits inside prefers-reduced-motion: no-preference. */

.ss-explorer [hidden], .ss-measure [hidden], .ss-measure-form [hidden], .ss-layers [hidden], .ss-tryon [hidden] { display: none !important; }

/* ------------------------------------------------------------------ shared SVG drawing */
.ss-diagram__svg, .ss-heading-fig__svg, .ss-layers__svg { display: block; width: 100%; height: auto; overflow: visible; }
.ss-win { fill: none; stroke: var(--line-input); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.ss-win .ss-win__glass { stroke-width: 1.5; }
.ss-win .ss-win__fill { fill: var(--stone-200); }
.ss-win .ss-win__curtain { stroke: var(--green-900); stroke-width: 2.5; }
.ss-win .ss-blind { stroke: var(--green-900); stroke-dasharray: 8 6; stroke-width: 2; }
.ss-guide { stroke: var(--line-input); stroke-width: 1.5; stroke-dasharray: 5 5; }
.ss-m .ss-draw, .ss-svghead { stroke: var(--green-900); stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ss-svgnum circle { fill: var(--green-900); }
.ss-svgnum text { fill: var(--cream-50); font-family: var(--sans); font-size: 26px; font-weight: 600; }

/* ------------------------------------------------------------------ measuring guide */
.ss-guide-intro { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(32px, 5vw, 80px); align-items: center; }
.ss-guide-intro__text { display: flex; flex-direction: column; gap: 28px; }
.ss-measure__nav { margin-top: clamp(32px, 4vw, 56px); }
.ss-measure__label { margin-bottom: 14px; }
.ss-measure__links, .ss-measure__tabs { display: flex; flex-wrap: wrap; gap: 10px; }
.ss-measure__link, .ss-measure__tab { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px; border: 1px solid var(--line-input); background: var(--paper); color: var(--green-900); font-family: var(--sans); font-size: 15px; line-height: 1.3; cursor: pointer; text-decoration: none; }
.ss-measure__link:hover { opacity: 1; border-color: var(--green-900); }
.ss-measure__tab[aria-selected="true"] { background: var(--green-900); border-color: var(--green-900); color: var(--cream-50); font-weight: 600; box-shadow: inset 0 -3px 0 var(--green-accent-light); }
.ss-measure__frame { margin: 28px 0 0; max-width: 68ch; }
.ss-measure__panels { display: flex; flex-direction: column; gap: clamp(64px, 8vw, 120px); margin-top: clamp(40px, 5vw, 64px); }
.ss-measure.is-ready .ss-measure__panels { gap: 0; }
.ss-measure__win { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: clamp(32px, 5vw, 72px); align-items: start; scroll-margin-top: 140px; }
.ss-diagram { background: var(--cream-50); border: 1px solid var(--line); padding: clamp(10px, 3vw, 32px); display: flex; flex-direction: column; gap: 18px; max-width: 560px; }
.ss-diagram__svg { min-width: 0; }
.ss-diagram__key ol { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.ss-diagram__key li { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; line-height: 1.4; color: var(--green-900); }
.ss-diagram__n, .ss-measure__n, .ss-layers__n { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--green-900); color: var(--cream-50); font-size: 14px; font-weight: 600; line-height: 1; }
.ss-diagram__replay { align-self: flex-start; min-height: 44px; padding: 8px 16px; background: none; border: 1px solid var(--green-900); color: var(--green-900); font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; }
.ss-measure__text { display: flex; flex-direction: column; gap: 22px; }
.ss-measure__h { font-family: var(--serif); font-size: clamp(32px, 3vw, 46px); line-height: 1.05; font-weight: 400; }
.ss-measure__steps { display: flex; flex-direction: column; gap: 16px; }
.ss-measure__steps li { display: flex; gap: 14px; align-items: flex-start; font-size: 16px; line-height: 1.65; }
.ss-measure__steps .ss-measure__n { margin-top: 1px; }
.ss-measure__visit { border-top: 1px solid var(--line); padding-top: 18px; font-size: 15px; line-height: 1.65; color: var(--green-900); }
.ss-measure__see { display: grid; grid-template-columns: 140px 1fr; gap: 18px; align-items: center; }
.ss-measure__see a, .ss-measure-next__links a { text-decoration: underline; text-underline-offset: 3px; }
.ss-measure-send .ss-sechead { margin-bottom: clamp(32px, 4vw, 56px); }
.ss-measure-form { display: flex; flex-direction: column; gap: 28px; max-width: 900px; }
.ss-measure-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.ss-measure-form__m { display: flex; flex-direction: column; gap: 18px; }
.ss-measure-form__group { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line) !important; padding-top: 16px !important; }
.ss-measure-form__gl { font-size: 15px; font-weight: 600; color: var(--green-900); padding: 0; }
.ss-measure-form__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 8px 24px; }
.ss-measure-form__helper { color: var(--green-900); }
.ss-measure-form .ss-btn { align-self: flex-start; }
.ss-inline-light { color: var(--cream-50); text-decoration: underline; text-underline-offset: 3px; }
.ss-measure-next__links { margin-top: clamp(32px, 4vw, 56px); max-width: 68ch; }

@keyframes ss-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ss-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
	/* Arrows draw in one after another, then their ends and numbers fade in: 2.5 s at most (five arrows). */
	.ss-measure.is-ready .ss-diagram.is-in .ss-diagram__svg.is-anim .ss-draw { stroke-dasharray: 1; animation: ss-draw .6s var(--ease) both; animation-delay: calc(var(--i, 0) * .42s); }
	.ss-measure.is-ready .ss-diagram.is-in .ss-diagram__svg.is-anim .ss-m__tip { animation: ss-fade .35s ease both; animation-delay: calc(var(--i, 0) * .42s + .5s); }
}

/* ------------------------------------------------------------------ project pairs */
.ss-pair__head { display: flex; flex-direction: column; gap: 18px; max-width: 760px; margin-bottom: clamp(28px, 4vw, 48px); }
.ss-pair__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
@media (max-width: 819px) { .ss-pair__grid { grid-template-columns: 1fr; } }
.ss-pair__cap { font-size: 14px; color: var(--green-900); font-weight: 600; letter-spacing: .04em; }
.ss-pair__grid.is-slider { grid-template-columns: 1fr; }
.ss-pair__stage { position: relative; cursor: ew-resize; max-width: 900px; }
.ss-pair__stage [data-pair-b] { position: absolute; inset: 0; }
.ss-pair__stage::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px; background: var(--cream-50); box-shadow: 0 0 0 1px var(--green-900); pointer-events: none; }
.ss-pair__ctl { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; }
.ss-pair__ctl input[type="range"] { flex: 1 1 220px; min-height: 44px; accent-color: var(--green-900); }

/* ------------------------------------------------------------------ Curtains: heading explorer */
.ss-explorer:not(.is-ready) .ss-options__cards { position: static; display: flex; flex-direction: column; gap: var(--gap); }
.ss-explorer .ss-options__list ul { display: flex; flex-direction: column; }
.ss-explorer .ss-options__btn[aria-pressed="true"] { color: var(--green-900); }
.ss-explorer .ss-options__btn[aria-pressed="true"] .ss-options__t { font-weight: 500; }
.ss-explorer .ss-options__btn[aria-pressed="true"] .ss-options__arrow { opacity: 1; transform: none; }
.ss-heading-fig { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.ss-heading-fig__l { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-subtle); font-weight: 600; }
.ss-heading-fig__svg { max-width: 460px; }
.ss-heading-fig__svg path, .ss-heading-fig__svg line { fill: none; stroke: var(--green-900); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ss-heading-fig__svg .ss-hline { stroke: var(--line-input); stroke-width: 2; }
@media (prefers-reduced-motion: no-preference) {
	/* Re-forms once, in under a second, each time its card is shown (display restarts the animation). */
	.ss-explorer.is-ready .ss-options__card .ss-hdraw { stroke-dasharray: 1; animation: ss-draw .9s var(--ease) both; }
}

/* ------------------------------------------------------------------ Curtains: layers */
.ss-layers-sec__intro { max-width: 60ch; }
.ss-layers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(32px, 5vw, 80px); align-items: center; margin-top: clamp(32px, 4vw, 56px); }
.ss-layers__fig { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; max-width: 460px; }
.ss-layer__sheet { stroke: var(--green-900); stroke-width: 2; }
.ss-layer__sheet--0 { fill: #e9d9c6; }
.ss-layer__sheet--1 { fill: var(--cream-50); }
.ss-layer__sheet--2 { fill: #f3efe6; stroke-dasharray: 6 4; }
.ss-layer__sheet--3 { fill: var(--stone-200); }
.ss-layer.is-hl .ss-layer__sheet { stroke-width: 5; }
.ss-layers__list { display: flex; flex-direction: column; gap: 14px; }
.ss-layers__list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 16px; line-height: 1.6; padding: 8px 10px; border: 2px solid transparent; }
.ss-layers__list li.is-hl { border-color: var(--green-900); }
.ss-layers__list a { text-decoration: underline; text-underline-offset: 3px; }
.ss-layers__name, .ss-layers__btn { font-weight: 600; }
.ss-layers__btn { background: none; border: 0; border-bottom: 1px solid currentColor; padding: 6px 0; min-height: 32px; color: var(--green-900); font: inherit; font-weight: 600; cursor: pointer; }
.ss-layers__btn[aria-pressed="true"] { font-weight: 800; border-bottom-width: 3px; }
.ss-layers__sep { margin-left: -10px; }
.ss-layers__line { margin-top: 22px; }
.ss-layer { transform: none; }
.js .ss-layers.is-closed:not(.is-in) .ss-layer, .ss-layers.is-shut .ss-layer { transform: translate(var(--tx), var(--ty)); }
@media (prefers-reduced-motion: no-preference) {
	.ss-layers.is-ready .ss-layer { transition: transform 1.6s var(--ease); }
}

/* ------------------------------------------------------------------ video slots */
.ss-video .ss-frame { position: relative; }
.ss-video__v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ss-video__btn { margin-top: 10px; color: var(--green-900); }

/* ------------------------------------------------------------------ About: behind the seams */
.ss-seams__intro { max-width: 60ch; }
.ss-seams__list { display: flex; flex-direction: column; gap: clamp(48px, 6vw, 96px); margin-top: clamp(40px, 5vw, 72px); counter-reset: none; }
.ss-seams__step { display: grid; grid-template-columns: 1fr; gap: 24px; }
.ss-seams__media { display: grid; gap: var(--gap); }
.ss-seams__step--pair .ss-seams__media { grid-template-columns: 3fr 2fr; align-items: end; }
.ss-seams__text { display: flex; flex-direction: column; gap: 14px; max-width: 52ch; }
.ss-seams__n { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 64px; line-height: .9; color: var(--green-accent-text); }
.ss-seams__t { font-family: var(--serif); font-size: clamp(30px, 2.8vw, 42px); line-height: 1.05; font-weight: 400; }
.ss-seams__text a { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 820px) {
	/* Desktop: each step's photograph holds in a sticky column while its text passes, then the next
	   step's photograph takes its place. CSS only: no scroll-linked script, no scroll-jacking. */
	.ss-seams__list { gap: 0; }
	.ss-seams__step { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 110px); min-height: 92vh; align-items: start; }
	.ss-seams__media { position: sticky; top: 120px; }
	.ss-seams__text { padding-top: 22vh; padding-bottom: 22vh; }
}

/* ------------------------------------------------------------------ Services: fabric try-on */
.ss-tryon { padding-top: clamp(56px, 7vw, 96px); }
.ss-tryon__head { display: flex; flex-direction: column; gap: 18px; max-width: 760px; margin-bottom: clamp(28px, 4vw, 48px); }
.ss-tryon__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: clamp(32px, 5vw, 72px); align-items: start; }
.ss-tryon__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 18px 14px; }
.ss-swatch { display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 0; background: none; border: 0; text-align: left; color: var(--green-900); cursor: pointer; font: inherit; }
.ss-swatch__img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; outline: 1px solid var(--line); outline-offset: 0; }
.ss-swatch__l { font-size: 13px; line-height: 1.4; }
.ss-swatch[aria-pressed="true"] .ss-swatch__img { outline: 3px solid var(--green-900); outline-offset: 3px; }
.ss-swatch[aria-pressed="true"] .ss-swatch__l { font-weight: 700; }
.ss-swatch:focus-visible { outline: 2px solid var(--green-900); outline-offset: 4px; }
.ss-tryon__note { margin-top: 28px; font-size: 14px; }
.ss-tryon__note a { text-decoration: underline; text-underline-offset: 3px; }
.ss-tryon__panel { display: flex; flex-direction: column; gap: 18px; background: var(--cream-50); padding: clamp(18px, 3vw, 32px); }
@media (min-width: 900px) { .ss-tryon__panel { position: sticky; top: 120px; } }
.ss-tryon__img { aspect-ratio: 4 / 5; overflow: hidden; background: var(--stone-200); }
.ss-tryon__img img { width: 100%; height: 100%; object-fit: cover; }
.ss-tryon__facts { display: grid; gap: 10px; }
.ss-tryon__facts dd { margin: 2px 0 0; font-family: var(--serif); font-size: 24px; line-height: 1.15; }
.ss-tryon__panel .ss-link { align-self: flex-start; }
@media (prefers-reduced-motion: no-preference) {
	.ss-tryon__panel.is-swap .ss-tryon__img { animation: ss-fade .5s ease both; }
}

/* ------------------------------------------------------------------ Contact: guide link and prefill */
.ss-contact__measure { font-size: 15px; line-height: 1.6; margin-bottom: 18px; color: var(--green-900); }
.ss-contact__measure a { text-decoration: underline; text-underline-offset: 3px; }
.ss-prefill-line { color: var(--green-900); font-weight: 600; }