/*
 * EGO BLINDS by Viala Living — a window-coverings studio.
 *
 * The look is editorial rather than retail: wide margins, a warm paper ground,
 * Cormorant for anything that carries the brand's voice and Jost for the
 * interface around it. Photographs are the loudest thing on any page.
 */

/* ---------- Fonts ---------- */

/* Served from the site itself rather than from Google Fonts. The Google
   stylesheet blocked the first paint while a phone opened two more
   connections for it, which held back the hero photograph by about two
   seconds on a mobile connection. These are the same files Google served:
   variable fonts, one file for every weight, so each face below declares the
   whole range the site uses. The site is in English, so only the Latin and
   Latin Extended subsets are kept, and the extended file is downloaded only if
   a page holds a character from it. base.html.twig
   preloads the three Latin files the first screen needs. */
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 300 600;
    font-display: swap;
    src: url("../fonts/cormorant-garamond-latin-1nPjtOG.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 300 600;
    font-display: swap;
    src: url("../fonts/cormorant-garamond-latin-ext-yjdli-z.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Cormorant Garamond';
    font-style: italic;
    font-weight: 300 400;
    font-display: swap;
    src: url("../fonts/cormorant-garamond-italic-latin-Z98TJlT.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Cormorant Garamond';
    font-style: italic;
    font-weight: 300 400;
    font-display: swap;
    src: url("../fonts/cormorant-garamond-italic-latin-ext-ey1rlQ5.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Jost';
    font-style: normal;
    font-weight: 300 500;
    font-display: swap;
    src: url("../fonts/jost-latin-kGYPfft.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Jost';
    font-style: normal;
    font-weight: 300 500;
    font-display: swap;
    src: url("../fonts/jost-latin-ext-Fd9ExEZ.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --paper: #fbf9f6;
    --paper-deep: #f2ede6;
    --ink: #24211e;
    --ink-soft: #57504a;
    /* 5.35:1 on paper and 4.82:1 on the deeper paper, so the small print it
       carries — form hints, photo names, the sub-pages in the phone menu —
       clears WCAG AA's 4.5:1. At #8a8179 it was 3.64:1, which in California
       is not only hard to read but an ADA/Unruh exposure. */
    --muted: #6f665e;
    --line: #e4ddd3;
    --accent: #9a7f5f;
    --accent-dark: #7d6549;
    --white: #fff;

    --display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
    --sans: 'Jost', 'Helvetica Neue', Arial, sans-serif;

    --wrap: 1180px;
    --gutter: clamp(1.25rem, 5vw, 4rem);
    --section: clamp(4rem, 9vw, 7.5rem);

    --shadow: 0 24px 60px -32px rgba(36, 33, 30, .45);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* A safety net, not a fix: nothing on the page should be wider than the phone,
   and if something one day is, it must not turn the whole site into a sideways
   scroll. */
html,
body {
    overflow-x: clip;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

h1, h2, h3, h4 {
    font-family: var(--display);
    font-weight: 400;
    line-height: 1.15;
    margin: 0 0 .6em;
    letter-spacing: .01em;
}

h1 { font-size: clamp(2.4rem, 5.4vw, 4.1rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
h3 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); }

p { margin: 0 0 1.1em; }

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--ink);
    color: var(--paper);
    padding: .75rem 1.25rem;
}

.skip-link:focus {
    left: 1rem;
    top: 1rem;
}

/* ---------- Buttons ---------- */

.btn {
    display: inline-block;
    /* A label that wraps on a phone stays centred in its box. */
    text-align: center;
    font-family: var(--sans);
    font-size: .78rem;
    font-weight: 400;
    letter-spacing: .18em;
    text-transform: uppercase;
    padding: 1rem 2.1rem;
    border: 1px solid var(--ink);
    background: var(--ink);
    color: var(--paper);
    cursor: pointer;
    transition: background .25s ease, color .25s ease, border-color .25s ease;
}

.btn:hover,
.btn:focus-visible {
    background: transparent;
    color: var(--ink);
}

.btn-outline {
    background: transparent;
    color: var(--ink);
}

.btn-outline:hover,
.btn-outline:focus-visible {
    background: var(--ink);
    color: var(--paper);
}

.btn-light {
    background: transparent;
    border-color: var(--paper);
    color: var(--paper);
}

.btn-light:hover,
.btn-light:focus-visible {
    background: var(--paper);
    color: var(--ink);
}

.btn-sm {
    padding: .7rem 1.3rem;
    font-size: .68rem;
    letter-spacing: .14em;
}

.link-arrow {
    font-size: .78rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--accent);
    padding-bottom: .25rem;
    transition: color .25s ease, border-color .25s ease;
}

.link-arrow::after {
    content: ' \2192';
}

.link-arrow:hover {
    color: var(--accent-dark);
}

/* ---------- Header ---------- */

/* A jump to #product-slug on a collection page (where the switched-off product
   pages send visitors) stops below the sticky header, not under it. */
html {
    scroll-padding-top: calc(77px + 1.5rem);
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(251, 249, 246, .92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
}

.header-inner {
    max-width: 1360px;
    margin-inline: auto;
    padding: .85rem var(--gutter);
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.brand {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
    margin-right: auto;
}

.brand-name {
    font-family: var(--sans);
    font-size: 1.02rem;
    font-weight: 400;
    letter-spacing: .34em;
    text-transform: uppercase;
}

.brand-suffix {
    font-family: var(--display);
    font-style: italic;
    font-size: .92rem;
    color: var(--muted);
    letter-spacing: .04em;
}

/* "Est. 2007", the third line of the lockup: small tracked capitals after a
   hairline, quiet enough that the name stays the mark. */
.brand-est {
    display: flex;
    align-items: center;
    gap: .55em;
    margin-top: .35rem;
    font-family: var(--sans);
    font-size: .64rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--muted);
}

.brand-est::before {
    content: '';
    width: 1.1rem;
    height: 1px;
    background: currentColor;
    opacity: .6;
}

.site-nav ul {
    display: flex;
    gap: clamp(1rem, 2.2vw, 2.1rem);
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-nav a {
    font-size: .74rem;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: var(--ink-soft);
    padding-block: .4rem;
    border-bottom: 1px solid transparent;
    transition: color .2s ease, border-color .2s ease;
}

.site-nav a[href]:hover,
.site-nav a[aria-current] {
    color: var(--ink);
    border-bottom-color: var(--accent);
}

/* Collections and Design open a small panel under their name. It opens on
   hover and on keyboard focus alike (:focus-within), so Tab reaches it too. */
.site-nav .has-sub {
    position: relative;
}

.site-nav .sub-nav {
    position: absolute;
    top: 100%;
    left: -1.25rem;
    min-width: 13rem;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: .9rem 1.25rem;
    background: var(--paper);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
    z-index: 50;
}

.site-nav .has-sub:hover > .sub-nav,
.site-nav .has-sub:focus-within > .sub-nav {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .2s ease, transform .2s ease, visibility 0s;
}

.site-nav .sub-nav a {
    display: inline-block;
    padding-block: .45rem;
    white-space: nowrap;
}

.breadcrumb span {
    margin-inline: .5em;
    color: var(--line);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.header-phone {
    font-size: .8rem;
    letter-spacing: .08em;
    color: var(--ink-soft);
    white-space: nowrap;
}

.header-phone:hover {
    color: var(--accent-dark);
}

/* The handset only appears in the phone header, where it marks the number as
   something to tap. */
.header-phone-icon {
    display: none;
}

.nav-toggle {
    display: none;
    width: 2.4rem;
    height: 2.4rem;
    border: 1px solid var(--line);
    background: transparent;
    position: relative;
    cursor: pointer;
}

.nav-toggle-bar,
.nav-toggle-bar::before,
.nav-toggle-bar::after {
    position: absolute;
    left: 50%;
    width: 1.1rem;
    height: 1px;
    background: var(--ink);
    transform: translateX(-50%);
    transition: transform .25s ease, opacity .2s ease;
}

.nav-toggle-bar {
    top: 50%;
    margin-top: -.5px;
}

.nav-toggle-bar::before,
.nav-toggle-bar::after {
    content: '';
    left: 0;
    transform: none;
}

.nav-toggle-bar::before { top: -6px; }
.nav-toggle-bar::after { top: 6px; }

.nav-open .nav-toggle-bar { background: transparent; }
.nav-open .nav-toggle-bar::before { transform: translateY(6px) rotate(45deg); }
.nav-open .nav-toggle-bar::after { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Hero ---------- */

.hero {
    position: relative;
    min-height: min(78vh, 720px);
    display: flex;
    align-items: stretch;
    color: var(--paper);
    overflow: hidden;
}

.hero-media,
.hero-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Ken Burns: a slow push in with a drift to the right, then back. Slow enough
   to read as a living room, not a moving picture; the text never has to chase it. */
.hero-media img {
    transform-origin: 30% 55%;
    animation: hero-pan-zoom 14s ease-in-out infinite alternate;
    will-change: transform;
}

@keyframes hero-pan-zoom {
    from { transform: scale(1) translate3d(0, 0, 0); }
    to   { transform: scale(1.14) translate3d(-3%, -1.5%, 0); }
}

/* The slideshow's Pause button stills every movement that starts by itself
   on the page, this one included (WCAG 2.2.2). */
.motion-paused .hero-media img,
.slideshow.is-paused .slide.is-active img {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    /* The global rule below only shortens animations; an infinite alternate one
       would flicker, so this one is switched off outright. */
    .hero-media img {
        animation: none;
    }
}

/* No wash over the photograph: the room is as bright as on the old
   egoblinds.com (client, 2026-09-26). The text-shadows on the hero lines are
   what keep them legible over the pale wall. The last wash (an oval up to
   .52 behind the text, .5 along the bottom, .12 over all) took the picture
   from 127 to 84 of 255 in mean brightness. */

.hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding: clamp(3rem, 9vw, 6rem) var(--gutter);
    text-align: center;
    /* Two groups: the name in the middle of the picture, the dealer line and
       the buttons centred on the middle of its bottom third (5/6 of the
       height), where the client placed them. */
    display: flex;
    flex-direction: column;
}

.hero-lead {
    margin-block: auto;
}

.hero-foot {
    position: absolute;
    top: 83.333%;
    left: 0;
    right: 0;
    padding-inline: var(--gutter);
    transform: translateY(-50%);
}

/* The header's lockup, at display size: the name in wide-tracked Jost capitals,
   "by Viala Living" in Cormorant italic under it. The tracking is a little
   tighter than the header's, because at this size .34em pulls the letters
   apart into single marks. */
.hero-brand {
    margin: 0 0 clamp(1rem, 3vh, 1.75rem);
    line-height: 1;
}

.hero-brand-name {
    display: block;
    font-family: var(--sans);
    font-size: clamp(2.3rem, 8vw, 5rem);
    font-weight: 400;
    letter-spacing: .24em;
    /* Tracking also follows the last letter, which would push a centred name
       off to the left; the same space in front puts it back in the middle. */
    text-indent: .24em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--paper);
    text-shadow: 0 1px 3px rgba(18, 16, 14, .45), 0 2px 36px rgba(18, 16, 14, .6);
}

.hero-brand-suffix {
    display: block;
    margin-top: .35em;
    font-family: var(--display);
    font-style: italic;
    font-size: clamp(1.25rem, 3vw, 2.2rem);
    letter-spacing: .04em;
    color: rgba(251, 249, 246, .92);
    text-shadow: 0 1px 3px rgba(18, 16, 14, .5), 0 1px 20px rgba(18, 16, 14, .6);
}

/* The studio's line, and once the name has flown into the header the
   loudest words on the photograph: the client wanted the accent on it, above
   the dealer line. Set in the display serif, large and in full white, where
   the dealer line stays small tracked capitals. */
.hero-kicker {
    font-family: var(--display);
    /* 20% smaller than first set, at the client's request (2026-09-24). */
    font-size: clamp(1.36rem, 2.32vw, 2.08rem);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: .015em;
    color: var(--paper);
    text-shadow: 0 1px 3px rgba(18, 16, 14, .5), 0 2px 28px rgba(18, 16, 14, .55);
    /* Clear of "by Viala Living" above it, which is the same serif at a
       similar size during the first second. It collapses with the name's
       own margin, so it has to be the larger of the two to count. */
    margin-top: clamp(1.5rem, 4.5vh, 2.75rem);
    margin-bottom: 0;
    /* Centred on a phone it breaks into two lines; balanced, the second one
       is not a lone word. */
    text-wrap: balance;
}

/* The starred words of the setting ("*Design Studio*") in bold, at the
   client's request: 600 is the heaviest weight the self-hosted Cormorant file
   carries. */
.hero-kicker strong {
    font-weight: 600;
}

/* "Exclusive Hunter Douglas Authorized Dealer", all in the same small tracked
   capitals; balanced if a narrow phone breaks it in two. */
.hero-dealer {
    font-size: .74rem;
    text-wrap: balance;
    letter-spacing: .2em;
    /* The tracking also follows the last letter; the same space in front
       keeps the centred line in the middle. */
    text-indent: .2em;
    text-transform: uppercase;
    color: rgba(251, 249, 246, .9);
    text-shadow: 0 1px 3px rgba(18, 16, 14, .5);
    margin-bottom: clamp(1.25rem, 3vh, 1.75rem);
}

/* A button's short label is for phones only. */
.label-short {
    display: none;
}

/* The dealer line's margin is the pause before them. */
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .9rem;
}

/* The page's h1 and the studio's paragraph, under the photograph.
   No padding below: the studio section that follows opens with its own. */
.hero-statement {
    padding-top: clamp(3rem, 6vw, 5rem);
    text-align: center;
}

/* The home page's two text sections share one scheme, at the client's
   request (2026-09-24): the serif for headings, the sans for reading text.
   The headline is the first level, "The Studio" the second in the same
   serif one size down, and every paragraph the same size, colour and
   measure, so the two sections read as one. */
.hero-statement h1,
.section-intro h2 {
    margin: 0 auto 1.1rem;
    font-weight: 300;
    text-wrap: balance;
    color: var(--ink);
}

.hero-statement h1 {
    /* Two even lines, as it read on the photograph. */
    max-width: 32ch;
    font-size: clamp(1.8rem, 3.4vw, 2.7rem);
}

.section-intro h2 {
    font-size: clamp(1.5rem, 2.4vw, 2rem);
}

.home-copy {
    max-width: 40rem;
    margin: 0 auto;
    font-size: 1.08rem;
    line-height: 1.7;
    color: var(--ink-soft);
}

.home-copy + .home-copy {
    margin-top: 1em;
}

/* Desktop: header and hero fill the first screen. 77.1px is the sticky
   header (77.09, three lines since "Est. 2007" moved into its lockup),
   rounded up so the photograph never ends a fraction of a pixel past the
   fold; the type and spacing shrink with the window's height so a 1280×720
   laptop still gets the buttons. */
@media (min-width: 901px) {
    .hero {
        min-height: calc(100vh - 77.1px);
        min-height: calc(100svh - 77.1px);
    }

    /* The padding is slack: the hero centres its text inside a fixed height,
       so this only keeps the block off the edges when it is tall. It gives up
       what the gap under the descriptor now takes. */
    .hero-inner {
        padding-block: clamp(1.25rem, 3vh, 3rem);
    }

    .hero-brand-name {
        font-size: clamp(3rem, min(5.2vw, 9vh), 6.5rem);
    }

    .hero-brand-suffix {
        font-size: clamp(1.4rem, min(2.3vw, 4vh), 2.6rem);
    }

}

/* ---------- Home slideshow ----------
   Under the headline: ten photographs from different collections, the
   product's name under each. The movement is The Shade Store's home-page
   hero (measured from its video, 2026-09-23): a hard cut, and inside each
   shot a steady 3.6% zoom on the centre, in on one picture and out on the
   next. Their cut comes every 1.46s; with still photographs the client
   asked for 2.5s. */

.slideshow {
    padding-top: clamp(2.25rem, 4.5vw, 3.5rem);
}

.slideshow-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--line);
}

.slide {
    position: absolute;
    inset: 0;
    margin: 0;
    /* Out of the layout, so its lazy photograph is not fetched: only the
       slide showing and the one after it (laid out but unseen, so its picture
       arrives before its turn) are. With all ten merely invisible, the
       browser took the slideshow for "near the screen" and fetched 2.7 MB
       at load (audit 2026-09-24). */
    display: none;
    visibility: hidden;
}

.slide.is-active,
.slide.is-next {
    display: block;
}

.slide.is-active {
    visibility: visible;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The class is put on again at each cut, which restarts the zoom. */
.slide.is-active img {
    animation: slide-zoom-in 2.5s linear both;
}

.slide.is-active:nth-child(even) img {
    animation-name: slide-zoom-out;
}

@keyframes slide-zoom-in {
    from { transform: scale(1); }
    to   { transform: scale(1.036); }
}

@keyframes slide-zoom-out {
    from { transform: scale(1.036); }
    to   { transform: scale(1); }
}

.slideshow-arrow {
    position: absolute;
    top: 50%;
    width: 3rem;
    height: 3rem;
    margin-top: -1.5rem;
    border: 1px solid rgba(251, 249, 246, .7);
    border-radius: 50%;
    background: rgba(18, 16, 14, .18);
    color: var(--paper);
    cursor: pointer;
    opacity: 0;
    transition: opacity .3s ease, background .3s ease;
}

.slideshow-arrow::before {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: .6rem;
    height: .6rem;
    border-top: 1px solid currentColor;
    border-left: 1px solid currentColor;
}

.slideshow-arrow.is-prev { left: 1.25rem; }
.slideshow-arrow.is-prev::before { transform: translateX(.12rem) rotate(-45deg); }
.slideshow-arrow.is-next { right: 1.25rem; }
.slideshow-arrow.is-next::before { transform: translateX(-.12rem) rotate(135deg); }

.slideshow-frame:hover .slideshow-arrow,
.slideshow-arrow:focus-visible {
    opacity: 1;
}

.slideshow-arrow:hover {
    background: rgba(18, 16, 14, .38);
}

.slideshow-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
}

.slideshow-caption {
    margin: 0;
    font-size: .74rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.slideshow-count {
    margin-right: 1.1em;
    color: var(--muted);
}

.slideshow-controls {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.slideshow-dots {
    display: flex;
    gap: .25rem;
}

/* Pause / play: two bars, or a triangle once paused. 28px, the same target
   as the lines beside it. */
.slideshow-toggle {
    position: relative;
    flex: none;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 1px solid var(--muted);
    border-radius: 50%;
    background: none;
    color: var(--ink);
    cursor: pointer;
    transition: border-color .25s ease;
}

.slideshow-toggle:hover {
    border-color: var(--ink);
}

.slideshow-toggle::before,
.slideshow-toggle::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 2px;
    height: .55rem;
    margin-top: -.275rem;
    background: currentColor;
}

.slideshow-toggle::before { left: calc(50% - 3.5px); }
.slideshow-toggle::after  { left: calc(50% + 1.5px); }

.slideshow-toggle.is-paused::before {
    left: calc(50% - 2px);
    width: 0;
    height: 0;
    margin-top: -.3rem;
    background: none;
    border-style: solid;
    border-width: .3rem 0 .3rem .5rem;
    border-color: transparent transparent transparent currentColor;
}

.slideshow-toggle.is-paused::after {
    display: none;
}

/* A 28px target around a short line; the current slide's line is the long,
   dark one. */
.slideshow-dots button {
    position: relative;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.slideshow-dots button::before {
    content: '';
    position: absolute;
    left: .25rem;
    right: .25rem;
    top: 50%;
    height: 1px;
    background: var(--muted);
    opacity: .5;
    transition: opacity .3s ease, background .3s ease;
}

.slideshow-dots button[aria-current='true']::before {
    background: var(--ink);
    opacity: 1;
    height: 2px;
    margin-top: -.5px;
}

@media (max-width: 600px) {
    .slideshow .wrap {
        padding-inline: 0;
    }

    .slideshow-frame {
        aspect-ratio: 4 / 3;
    }

    /* A thumb swipes on a phone; the arrows would only cover the picture. */
    .slideshow-arrow {
        display: none;
    }

    /* Ten lines beside the name left it a few letters a line: on a phone
       they run across the full width first, the name under them. */
    .slideshow-bar {
        padding-inline: var(--gutter);
        flex-direction: column-reverse;
        align-items: stretch;
        gap: .5rem;
        margin-top: .5rem;
    }

    .slideshow-controls {
        gap: .5rem;
    }

    .slideshow-dots {
        flex: 1;
        gap: 0;
    }

    .slideshow-dots button {
        flex: 1;
        width: auto;
    }

    .slideshow-dots button::before {
        left: .15rem;
        right: .15rem;
    }

    /* Room for the count and two lines of name, so a long name does not push
       the page down each time it comes round. */
    .slideshow-caption {
        font-size: .6875rem;
        letter-spacing: var(--phone-tracking);
        line-height: 1.6;
        min-height: 3.2em;
    }
}

@media (prefers-reduced-motion: reduce) {
    .slide.is-active img {
        animation: none;
    }
}

/* ---------- Brand intro (home page) ----------
   As on fidens.ro: after a beat, "EGO BLINDS / by Viala Living" leaves the
   photograph, shrinking into the header's lockup; the descriptor stays. The script flies fixed copies of the two
   lines; these rules only hide what must not be seen twice. */

.brand-intro .site-header .brand-name,
.brand-intro .site-header .brand-suffix {
    opacity: 0;
}

.brand-fly {
    position: fixed;
    z-index: 60;
    margin: 0;
    white-space: nowrap;
    pointer-events: none;
    line-height: 1;
    transition-property: top, left, font-size, letter-spacing, color, text-shadow;
    transition-duration: 2s;
    transition-timing-function: cubic-bezier(.35, 0, .15, 1);
}

.hero-brand.is-gone {
    visibility: hidden;
}

/* ---------- Sections ---------- */

.section {
    padding-block: var(--section);
}

.section-tight {
    padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.section-paper {
    background: var(--paper-deep);
}

.section-ink {
    background: var(--ink);
    color: var(--paper);
}

.section-head {
    max-width: 62ch;
    margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.section-head.is-centered {
    margin-inline: auto;
    text-align: center;
}

/* The studio section is one short block; the full section rhythm around it
   reads as a gap rather than as breathing room. */
.section-intro {
    padding-block: clamp(3rem, 6vw, 5rem);
    text-align: center;
}

.eyebrow {
    font-size: .72rem;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--accent-dark);
    margin-bottom: 1rem;
}

.lede {
    font-size: 1.08rem;
    color: var(--ink-soft);
}

/* Two short lede paragraphs that read as one intro (Design concepts): the
   full paragraph margin left a blank line between them. */
.lede.is-joined {
    margin-bottom: .3em;
}

.page-head {
    padding-block: clamp(3rem, 7vw, 5.5rem) clamp(1.5rem, 3vw, 2.5rem);
}

.page-head h1 {
    max-width: 20ch;
}

/* The contact page: the same head, with the air taken out of it. */
.page-head.is-tight {
    padding-block: clamp(1.75rem, 3.5vw, 3rem) clamp(.75rem, 1.5vw, 1.25rem);
}

.page-head.is-tight h1 {
    margin-bottom: .35em;
}

.section-tight.is-flush {
    padding-block-start: clamp(1rem, 2vw, 1.75rem);
}

/* ---------- Collection cards ---------- */

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: clamp(1.75rem, 3.5vw, 3rem);
}

.card {
    display: flex;
    flex-direction: column;
}

.card-media {
    position: relative;
    aspect-ratio: 4 / 5;
    max-width: 100%;
    overflow: hidden;
    background: var(--paper-deep);
}

.card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s cubic-bezier(.22, .61, .36, 1);
}

.card:hover .card-media img {
    transform: scale(1.04);
}

.card-title {
    font-size: 1.4rem;
    margin: 1.3rem 0 .5rem;
}

.card-feel {
    font-family: var(--display);
    font-style: italic;
    font-size: 1.05rem;
    color: var(--accent-dark);
    margin-bottom: .6rem;
}

.card-impact {
    color: var(--ink-soft);
    font-size: .95rem;
    margin-bottom: 1rem;
}

.card-foot {
    margin-top: auto;
}

/* ---------- Feature rows (alternating image / text) ---------- */

.feature {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}

.feature + .feature {
    margin-top: clamp(3rem, 7vw, 6rem);
}

.feature-media {
    display: block;
}

.feature-media img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* A collection page with no photograph yet: its text alone, at reading width. */
.feature.is-text-only .feature-body {
    max-width: 44rem;
}

.group-image {
    width: 100%;
    aspect-ratio: 16 / 7;
    object-fit: cover;
    margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.feature.is-reversed .feature-media {
    order: 2;
}

/* Every photograph-and-text row types like the Alustra page — products on
   Shades, the Collections and Design cards, the Design studies (client,
   2026-09-26: "consistent font and size on all pages ... as on the Alustra
   subpage"). One title size, and the text under it in the body face at the
   lede's size: Feel is no longer a smaller serif italic, Impact no longer
   smaller than the rest. */
.feature-body h2 {
    font-size: clamp(1.6rem, 2.6vw, 2.2rem);
    margin-bottom: .7rem;
}

.feature-body .card-feel,
.feature-body .card-impact,
.feature-body .lede {
    font-family: var(--sans);
    font-style: normal;
    font-size: 1.08rem;
    color: var(--ink-soft);
}

/* A collection page's long text, under its intro in the head: the two read
   as one opening, at one measure. */
.page-head.is-group .lede,
.prose.page-head-body {
    max-width: 40rem;
}

.page-head-body {
    margin-top: 1rem;
}

.page-head-body p {
    font-size: 1.08rem;
    color: var(--ink-soft);
}

/* The photograph-and-heading sections of a collection page (Alustra's five
   rooms): the photograph a little wider than the text, at its own shape. */
.group-sections .feature {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}

@media (min-width: 901px) {
    .group-sections .feature {
        grid-template-columns: 7fr 5fr;
    }

    .group-sections .feature.is-reversed {
        grid-template-columns: 5fr 7fr;
    }
}

.group-sections .feature-media img {
    aspect-ratio: 3 / 2;
}

/* The maker and the place under a product's name (seo.product_line). */
.product-maker {
    max-width: 40rem;
}

/* ---------- Design concepts ---------- */

.concept + .concept {
    margin-top: clamp(3.5rem, 8vw, 6.5rem);
    padding-top: clamp(3.5rem, 8vw, 6.5rem);
    border-top: 1px solid var(--line);
}

.concept-title {
    font-family: var(--sans);
    font-size: .78rem;
    font-weight: 400;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--accent-dark);
    margin-bottom: 2rem;
}

.concept-label {
    font-size: .72rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 1.25rem 0 .35rem;
}

/* ---------- Steps (how the studio works) ---------- */

.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: clamp(2rem, 4vw, 3.5rem);
    counter-reset: step;
}

.step {
    counter-increment: step;
}

.step::before {
    content: counter(step, decimal-leading-zero);
    display: block;
    font-family: var(--display);
    font-size: 2.6rem;
    color: var(--accent);
    line-height: 1;
    margin-bottom: .9rem;
}

.step h3 {
    font-size: 1.25rem;
}

.section-ink .step p {
    color: rgba(251, 249, 246, .76);
}

.section-ink .lede {
    color: rgba(251, 249, 246, .8);
}

/* ---------- Gallery ---------- */

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 1.25rem;
}

.gallery img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

/* ---------- Prose ---------- */

.prose {
    max-width: 68ch;
    font-size: 1.03rem;
    color: var(--ink-soft);
}

.prose h2,
.prose h3 {
    color: var(--ink);
    margin-top: 1.8em;
}

.prose a {
    border-bottom: 1px solid var(--accent);
}

/* ---------- Profile page (a written page with a photograph) ---------- */

.profile {
    padding-block: clamp(3rem, 7vw, 5.5rem) var(--section);
}

.profile-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2.5rem, 6vw, 5.5rem);
    align-items: start;
}

/* The portrait stays in view while the longer text column scrolls. */
.profile-media {
    position: sticky;
    top: calc(71px + 2rem);
}

.profile-media img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: 50% 30%;
    box-shadow: var(--shadow);
}

.profile-body {
    padding-top: clamp(0rem, 2vw, 1.5rem);
}

/* The name stays the heading but no longer dominates the page: the site's
   h1 scale (2.4rem / 5.4vw / 4.1rem) at 68% (client, 2026-09-26). */
.profile-body h1 {
    font-size: clamp(1.63rem, 3.67vw, 2.79rem);
    margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}

.profile-body .prose {
    max-width: 60ch;
}

/* The opening paragraph introduces the person; it keeps the brand's voice
   but at the body text's size — 18px against 16.5px, within the 5–10% the
   client allowed (2026-09-26). */
.profile-body .prose > p:first-child {
    font-family: var(--display);
    font-size: 1.125rem;
    line-height: 1.5;
    color: var(--ink);
}

.profile-body .prose h2 {
    font-size: clamp(1.5rem, 2.2vw, 1.9rem);
    margin: 2.2em 0 .6em;
    padding-top: 1.6rem;
    border-top: 1px solid var(--line);
}

@media (max-width: 900px) {
    .profile-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .profile-media {
        position: static;
        max-width: 26rem;
    }
}

/* ---------- Contact ---------- */

.contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
}

.form-field {
    margin-bottom: 1.4rem;
}

.form-field label {
    display: block;
    font-size: .72rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: .5rem;
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    font-family: var(--sans);
    font-size: 1rem;
    font-weight: 300;
    color: var(--ink);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 0;
    padding: .85rem 1rem;
    transition: border-color .2s ease;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: none;
    border-color: var(--accent);
}

.form-field textarea {
    resize: vertical;
}

.form-error {
    color: #a4333a;
    font-size: .85rem;
    margin-top: .4rem;
    /* It is a <ul> now, so the messages carry an id a field can point at. */
    list-style: none;
    padding: 0;
    margin-bottom: 0;
}

/* The honeypot: off-screen for people, an ordinary input to a bot. */
.hp-field,
.form-field:has(.hp-field) {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden;
}

.contact-aside {
    background: var(--paper-deep);
    padding: clamp(1.75rem, 3.5vw, 2.5rem);
}

.contact-aside h2 {
    font-size: 1.25rem;
}

.contact-aside dl {
    margin: 0;
}

.contact-aside dt {
    font-size: .72rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 1.4rem;
}

.contact-aside dd {
    margin: .35rem 0 0;
}

/* WhatsApp beside the phone number, the only WhatsApp on the site (client,
   2026-09-27): the number, then the WhatsApp logo alone, no frame;
   greyed, with the hours under it, when tapped outside them. */
.contact-aside .contact-phone {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
}

/* The wrapper only carries the hours for the script: its button and message
   are laid out as if they sat straight in the row, button beside the number. */
.contact-aside .contact-whatsapp {
    display: contents;
}

.contact-aside .contact-whatsapp-link {
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    /* The logo alone, no frame (client, 2026-09-27); the square stays as
       the tap target. */
    border-color: transparent;
    background: transparent;
}

.contact-aside .contact-whatsapp-link:hover,
.contact-aside .contact-whatsapp-link:focus-visible {
    border-color: transparent;
    background: transparent;
    opacity: .75;
}

.contact-whatsapp-link svg {
    width: 1.35rem;
    height: 1.35rem;
    fill: #25d366;
}

.contact-whatsapp-link.is-offline {
    opacity: .45;
}

.contact-whatsapp-link.is-offline svg {
    fill: currentColor;
}

.contact-whatsapp-offline {
    display: block;
    flex-basis: 100%;
    margin-top: .2rem;
    font-size: .85rem;
    line-height: 1.5;
    color: var(--muted);
}

.contact-whatsapp-offline[hidden] {
    display: none;
}

.contact-whatsapp-hours {
    display: block;
    margin-top: .3rem;
    color: var(--ink-soft);
}

/* "Get directions", right under the address (client, 2026-09-27). */
.contact-aside .contact-directions {
    margin-top: .9rem;
}

.contact-aside .contact-directions .btn {
    display: inline-block;
    padding: .7rem 1.3rem;
}

.notice {
    background: var(--paper-deep);
    border-left: 2px solid var(--accent);
    padding: 1.25rem 1.5rem;
    margin-bottom: 2rem;
}

/* ---------- CTA band + footer ---------- */

.cta-band {
    background: var(--ink);
    color: var(--paper);
    padding-block: clamp(2.75rem, 6vw, 4.25rem);
}

.cta-band-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: center;
    justify-content: space-between;
}

.cta-band-inner.is-button-only {
    justify-content: center;
}

.cta-band-title {
    font-family: var(--display);
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    margin: 0;
}

.site-footer {
    background: var(--paper-deep);
    padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
    font-size: .92rem;
    color: var(--ink-soft);
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: clamp(2rem, 4vw, 3.5rem);
}

.footer-brand .brand-name {
    display: block;
    color: var(--ink);
}

/* The space between the footer's blocks is the grid gap alone: a block's last
   paragraph kept its own bottom margin, so on a phone, where they stack, the
   brand stood 50px above the hours and the hours 32px above the address
   (client, 2026-09-26). */
.footer-grid > * > :last-child {
    margin-bottom: 0;
}

/* Right under "by Viala Living": the three lines read as one lockup
   (client, 2026-09-26). */
.footer-tagline {
    margin-top: 0;
    font-family: var(--display);
    font-size: 1.1rem;
    color: var(--ink);
}

.footer-heading {
    font-family: var(--sans);
    font-size: .72rem;
    font-weight: 400;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 1rem;
}

.footer-note {
    color: var(--muted);
    font-size: .86rem;
}

.footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    list-style: none;
    margin: 1.2rem 0 0;
    padding: 0;
    font-size: .8rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.footer-social a:hover,
.site-footer a:hover {
    color: var(--accent-dark);
}

.footer-bottom {
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    font-size: .8rem;
    color: var(--muted);
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ---------- Consultation invitation ---------- */

/* A card pinned to the lower right, in the site's own voice: paper ground,
   a Cormorant line, the dark button. Below 700px it becomes a strip across
   the bottom of the screen. */
/* ---------- Analytics consent ---------- */

/* A quiet band along the foot of the page, in the site's own paper and rule
   rather than the black slab every other site uses. It sits above the
   WhatsApp button and the invitation, because it is asked first. */
.consent {
    position: fixed;
    inset: auto 0 0;
    z-index: 70;
    background: var(--paper);
    border-top: 1px solid var(--line);
    box-shadow: 0 -12px 40px -28px rgba(36, 33, 30, .55);
    opacity: 0;
    transform: translateY(100%);
    transition: opacity .35s ease, transform .35s cubic-bezier(.22, .61, .36, 1);
}

.consent.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* An author `display` beats the browser's own [hidden] rule, so the bar has
   to be told to stay away while it is hidden. */
.consent[hidden] {
    display: none;
}

.consent-inner {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding: 1rem var(--gutter);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.consent-text {
    margin: 0;
    max-width: 62ch;
    font-size: .88rem;
    line-height: 1.6;
    color: var(--ink-soft);
}

.consent-text a {
    color: var(--ink);
    border-bottom: 1px solid var(--accent);
}

/* Both answers the same size and weight: a "no" that is harder to find than
   the "yes" is not a choice. */
.consent-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    flex: none;
}

.consent-actions .btn {
    min-width: 8.5rem;
    justify-content: center;
    text-align: center;
}

@media (max-width: 600px) {
    .consent-inner {
        padding-block: .9rem;
        gap: .75rem;
    }

    .consent-actions {
        width: 100%;
    }

    .consent-actions .btn {
        flex: 1 1 0;
        min-width: 0;
        padding-inline: .5rem;
    }
}

.consult-pop {
    position: fixed;
    right: clamp(1rem, 3vw, 1.75rem);
    bottom: clamp(1rem, 3vw, 1.75rem);
    z-index: 55;
    width: 23rem;
    padding: 1.9rem 1.9rem 1.75rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-top: 2px solid var(--accent);
    box-shadow: var(--shadow);
    opacity: 0;
    transform: translateY(1.25rem);
    transition: opacity .35s ease, transform .35s cubic-bezier(.22, .61, .36, 1);
}

/* `display` is never set here, but the pair keeps [hidden] winning should a
   later rule add one. */
.consult-pop[hidden] {
    display: none;
}

.consult-pop.is-visible {
    opacity: 1;
    transform: none;
}

.consult-pop-close {
    position: absolute;
    top: .55rem;
    right: .55rem;
    width: 2.25rem;
    height: 2.25rem;
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: color .2s ease;
}

.consult-pop-close:hover,
.consult-pop-close:focus-visible {
    color: var(--ink);
}

.consult-pop-title {
    font-family: var(--display);
    font-size: 1.6rem;
    line-height: 1.2;
    color: var(--ink);
    margin: 0 1.5rem 1.35rem 0;
}

.consult-pop-btn {
    display: block;
    text-align: center;
    padding-inline: 1rem;
}

@media (max-width: 700px) {
    .consult-pop {
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        padding: 1.1rem 1.25rem calc(1.1rem + env(safe-area-inset-bottom));
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
        transform: translateY(100%);
    }

    .consult-pop.is-visible {
        transform: none;
    }

    .consult-pop-title {
        font-size: 1.3rem;
        margin-bottom: .85rem;
    }

    /* The × is the only way out of the strip, so on a phone it gets the full
       44px target, pulled into the corner so the title keeps its width. */
    .consult-pop-close {
        top: .15rem;
        right: .15rem;
        width: 2.75rem;
        height: 2.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .consult-pop {
        transition: none;
        transform: none;
    }
}

/* ---------- Responsive ---------- */

.nav-panel-actions {
    display: none;
}

@media (max-width: 1080px) {
    .header-phone {
        display: none;
    }
}

@media (max-width: 900px) {
    .nav-toggle {
        display: block;
    }

    /* Below this width the header is the logo and the burger. Everything else
       lives in the panel — squeezing the button in is what pushed the page
       wider than the phone. */
    .header-actions > .btn {
        display: none;
    }

    .nav-panel-actions {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: .75rem;
        margin-top: 1.5rem;
        padding-top: 1.25rem;
        border-top: 1px solid var(--line);
    }

    .nav-panel-phone {
        font-size: 1.05rem;
        letter-spacing: .06em;
    }

    .site-nav .nav-panel-phone {
        padding-block: .65rem;
    }

    .brand-name {
        font-size: .92rem;
        letter-spacing: .26em;
    }

    /* The panel is as tall as the screen, and on a 667px iPhone SE the phone
       number and the consultation button sat below its bottom edge with no way
       to reach them; it scrolls on its own now, without dragging the page
       behind it along. The strip under the header's number and close button
       is a border rather than padding: a scrolling box clips its content at
       the border, so the links pass under a solid band instead of running
       behind the number. The dividing line moves to a shadow, which a border
       corner would otherwise cut off at that band. */
    .site-nav {
        position: fixed;
        inset: 0 0 0 auto;
        width: min(80vw, 320px);
        background: var(--paper);
        border-top: 5rem solid var(--paper);
        box-shadow: -1px 0 0 var(--line);
        padding: 0 2rem 2rem;
        overflow-y: auto;
        overscroll-behavior: contain;
        transform: translateX(100%);
        transition: transform .35s cubic-bezier(.22, .61, .36, 1);
        z-index: 45;
    }

    /* The WhatsApp button (50) and the consultation strip (55) are stacked
       above the header (40), so they floated over the open menu and the strip
       hid its last links. While the menu is open the header goes above both. */
    .nav-open .site-header {
        z-index: 60;
    }

    .nav-open .site-nav {
        transform: translateX(0);
    }

    /* The client asked for a fifth off the height of the rows: the panel now
       holds all twelve links plus the number and the button without the list
       running long. A row is still ~40px tall, over the 24px a target needs,
       and the gap shrinks with it so the list keeps its rhythm. */
    .site-nav ul {
        flex-direction: column;
        gap: .2rem;
    }

    .site-nav a {
        font-size: .85rem;
    }

    .contact-layout {
        grid-template-columns: 1fr;
    }

    .feature.is-reversed .feature-media {
        order: 0;
    }

    /* A product or a section on a collection page reads heading, photograph,
       then its text, as on the old egoblinds.com (client, 2026-09-26). The
       body's box is dissolved so its number and heading can step in front of
       the picture. */
    .feature.title-first {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .feature.title-first .feature-body {
        display: contents;
    }

    .feature.title-first .feature-body .eyebrow {
        order: -2;
    }

    .feature.title-first .feature-body h2 {
        order: -1;
        margin-bottom: 1rem;
    }

    .feature.title-first .feature-media {
        margin-bottom: 1.25rem;
    }

    /* backdrop-filter makes the header the containing block of every fixed
       child, so the menu panel was cut to the header's 48px — one link showed
       and the rest floated transparent over the page. Solid paper instead. */
    .site-header {
        backdrop-filter: none;
        background: var(--paper);
    }

    /* The burger doubles as the close button, so it stays above the panel. */
    .header-actions {
        position: relative;
        z-index: 46;
    }

    /* 44px: the smallest target a thumb hits on the first try. */
    .nav-toggle {
        width: 2.75rem;
        height: 2.75rem;
    }

    /* The phone number comes back into the header, just left of the burger,
       in ink rather than the desktop grey: on a phone it is the quickest way
       to reach the studio. The row is the burger's 44px, so the link is too.
       The gaps close up so logo, number and burger share a 335px phone. */
    .header-inner {
        gap: 1rem;
    }

    .header-actions {
        gap: .6rem;
    }

    .header-phone {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        min-height: 2.75rem;
        font-size: .8rem;
        letter-spacing: .06em;
        color: var(--ink);
    }

    .header-phone-icon {
        display: block;
        flex: none;
        width: .95rem;
        height: .95rem;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.6;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    /* Closed, the panel sits off-screen; hidden too, so its links are not
       reached by Tab or read out while nobody can see them. */
    .site-nav {
        visibility: hidden;
        transition: transform .35s cubic-bezier(.22, .61, .36, 1), visibility 0s linear .35s;
    }

    .nav-open .site-nav {
        visibility: visible;
        transition: transform .35s cubic-bezier(.22, .61, .36, 1), visibility 0s;
    }

    .site-nav ul a {
        display: block;
        padding-block: .55rem;
        line-height: 1.45;
    }

    /* In the phone panel the sub-pages are simply listed under their section,
       indented — there is no hover to open anything with. */
    .site-nav .sub-nav {
        position: static;
        min-width: 0;
        margin-top: .1rem;
        padding: 0 0 0 1rem;
        gap: 0;
        background: none;
        border: 0;
        border-left: 1px solid var(--line);
        box-shadow: none;
        opacity: 1;
        visibility: inherit;
        transform: none;
        transition: none;
    }

    .site-nav .sub-nav a {
        display: block;
        padding-block: .55rem;
        font-size: .76rem;
        color: var(--muted);
    }

    /* `.site-nav a` gives every link a transparent underline border, which
       erased the bottom edge of the consultation button in the panel. */
    /* "Request Free Consultation" also broke into two left-aligned lines in
       the 236px the panel has on a phone, at 10.9px. Across the panel,
       centred, at 12px and a closer tracking it measures 197px: one line. */
    .site-nav .nav-panel-actions .btn {
        border-bottom-color: var(--ink);
        padding-block: .8rem;
        align-self: stretch;
        text-align: center;
        font-size: .75rem;
        letter-spacing: .1em;
        padding-inline: .5rem;
    }
}

/* ---------- Phones ---------- */

@media (max-width: 600px) {
    /* Nothing under 12px: the uppercase labels were 11.5px with wide tracking. */
    .eyebrow,
    .concept-label,
    .concept-title,
    .footer-heading,
    .contact-aside dt,
    .form-field label,
    /* Short uppercase lines that wrap on a phone ("Exclusive Hunter Douglas
       Authorized / Dealer") break into even halves instead of leaving one
       word alone on the second line. */
    .eyebrow,
    .footer-bottom p {
        text-wrap: balance;
    }

    /* The header lockup is the way home and was a 31px target. The padding
       makes it 45px; the negative margin keeps the header its height. */
    .brand {
        padding-block: .45rem;
        margin-block: -.45rem;
    }

    /* A page heading followed by its content read as two sections: the
       heading's bottom padding, the paragraph's margin and the section's top
       padding added up to 80px of empty paper. */
    .page-head + .section-tight {
        padding-top: 1rem;
    }

    /* Breadcrumb links ("Collections / Shades") were 18px tall. An invisible
       layer around each one makes the target 45px without moving the text. */
    .eyebrow a {
        position: relative;
    }

    .eyebrow a::before {
        content: '';
        position: absolute;
        inset: -.85rem -.3rem;
    }

    /* The same for the headings that link to a collection (37px). */
    .feature-body h2 a {
        position: relative;
    }

    .feature-body h2 a::before {
        content: '';
        position: absolute;
        inset: -.25rem 0;
    }

    /* The phone gets the desktop's promise too: header and hero fill the
       first screen, with the photograph showing above and below the text.
       75.5px is the phone header (75.4). svh is the height with the browser's
       bars showing, so on an iPhone the photograph ends at the fold of the
       screen the visitor actually sees; where the text
       needs more than that, the hero simply grows. */
    .hero {
        min-height: calc(100vh - 75.5px);
        min-height: calc(100svh - 75.5px);
    }

    /* Everything down to the second button has to fit on a 375×667 iPhone SE
       under the header, so the spacing is set in small steps rather than the
       desktop's generous rhythm. */
    .hero-inner {
        padding-block: 1.5rem;
    }

    /* The name has to stay on one line at 375px, so the tracking closes up a
       little and the size follows the width of the phone. It keeps its size:
       the lockup is what the client wants seen first. */
    .hero-brand {
        margin-bottom: 1rem;
    }

    .hero-brand-name {
        font-size: clamp(1.9rem, 9.4vw, 2.4rem);
        letter-spacing: .2em;
        text-indent: .2em;
    }

    .hero-brand-suffix {
        font-size: 1.3rem;
    }

    /* Two balanced lines on a phone: "Custom Window Coverings / & Design
       Studio". */
    .hero-kicker {
        font-size: clamp(1.16rem, 5.28vw, 1.36rem);
        line-height: 1.2;
        margin-bottom: 0;
    }

    /* One line from a 360px phone up: the words at 11px, the tracking
       following the width of the phone. */
    .hero-dealer {
        font-size: .6875rem;
        letter-spacing: var(--phone-tracking);
        text-indent: var(--phone-tracking);
        margin-bottom: 1.1rem;
    }

    .hero-statement h1 {
        max-width: none;
        font-size: clamp(1.5rem, 6.8vw, 1.75rem);
        line-height: 1.2;
    }

    .section-intro h2 {
        font-size: clamp(1.3rem, 5.6vw, 1.45rem);
        line-height: 1.2;
    }

    .home-copy {
        font-size: 1rem;
    }

    /* Side by side, as the client asked, with the short labels
       ("Collections", "Design Concepts"): the long ones needed 360px of a
       375px phone's 335. Each button takes half the row; the tracking closes
       with the width of the phone so "Design Concepts" stays on one line. */
    .hero-actions {
        flex-wrap: nowrap;
        gap: .6rem;
    }

    .hero-actions .btn {
        flex: 1 1 0;
        min-width: 0;
        text-align: center;
        padding: .95rem .5rem;
        line-height: 1.2;
        letter-spacing: clamp(.06em, calc((100vw - 300px) / 600), .16em);
        white-space: nowrap;
    }

    .hero-actions .label-long {
        display: none;
    }

    .hero-actions .label-short {
        display: inline;
    }

    /* Tracking for the uppercase lines on the photograph (the kicker and the
       dealer line), following the width of the phone: 1.2px (.1em) from 375px
       up, closing to 0.6px at 345px so the lines stay whole on narrow phones. */
    :root {
        --phone-tracking: clamp(.6px, calc((100vw - 320px) / 45), 1.2px);
    }

    /* Collections two to a row: nine full-width cards made the home page ten
       screens long, and the studio's photographs are small enough that a
       half-width card is also the sharper one. */
    .card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.75rem .9rem;
    }

    .card {
        position: relative;
    }

    .card-title {
        font-size: 1.08rem;
        line-height: 1.25;
        margin: .75rem 0 .3rem;
    }

    /* The whole card is the link; the title's hit area is stretched over it. */
    .card-title a::after {
        content: '';
        position: absolute;
        inset: 0;
    }

    .card .card-feel {
        font-size: .92rem;
        line-height: 1.4;
        margin-bottom: 0;
    }

    .card .card-foot {
        display: none;
    }

    .link-arrow {
        position: relative;
        display: inline-block;
        padding-block: .6rem .25rem;
    }

    /* The padding alone left the link at 36px; the last 8px are invisible. */
    .link-arrow::before {
        content: '';
        position: absolute;
        inset: -.25rem 0;
    }

    /* "Ask about Duette® Honeycomb Shades" wraps on a phone; across the
       column and centred, its two lines read as one button. */
    .feature-body .btn {
        display: block;
        text-align: center;
        padding-inline: 1rem;
    }

    /* "Other collections" shows three; two to a row, the third would sit alone. */
    .section-paper .card-grid > .card:nth-child(3):last-child {
        display: none;
    }

    /* Phone, email and address links: 44px targets. */
    .contact-aside dd a {
        display: inline-block;
        padding-block: .6rem;
    }

    /* The footer reads as a compact card on a phone (client, 2026-09-25): the
       44px padding above spread address, phone and email a screen apart. The
       lines still leave ~29px targets, over the 24px WCAG minimum. */
    .footer-grid {
        gap: 1.75rem;
    }

    .footer-heading {
        margin-bottom: .6rem;
    }

    .footer-col p {
        margin-bottom: .3rem;
    }

    .site-footer p a {
        display: inline-block;
        padding-block: .1rem;
    }

    .footer-social {
        margin-top: .8rem;
    }

    .form-actions .btn,
    form .btn[type="submit"] {
        width: 100%;
        padding-block: 1.1rem;
    }

    .cta-band-inner .btn {
        width: 100%;
        text-align: center;
    }

    /* Copyright and legal links as one small block (client, 2026-09-25). */
    .footer-bottom {
        gap: .45rem;
    }

    .footer-bottom p {
        margin: 0;
    }

    .footer-links {
        gap: .35rem 1.25rem;
    }

}

/* Under 350px the lockup, the number and the burger no longer fit on one
   row, so the number gives way to its handset: still a 44px link that calls
   the studio, named by its aria-label. */
@media (max-width: 349px) {
    .header-phone {
        justify-content: center;
        min-width: 2.75rem;
    }

    .header-phone-number {
        display: none;
    }

    .header-phone-icon {
        width: 1.1rem;
        height: 1.1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}