/*=========================================================
SAVITUR THEME - SHARED STYLES

Loaded on every page. Everything here is genuinely shared:
reset, tokens, layout, typography, header, footer and the
components that appear on more than one page.

Anything used by a single page belongs in that page's sheet,
which is enqueued conditionally alongside this one.

BREAKPOINTS - use only these, max-width, no space after @media:
    1200px  large desktop down
     992px  tablet
     768px  phone landscape
     480px  phone portrait
=========================================================*/


/*=========================================================
RESET
=========================================================*/

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:var(--font-body);
    font-size:16px;
    line-height:1.7;
    color:#3f3a36;
    background:var(--background);
    -webkit-font-smoothing:antialiased;

    /* Long unbroken strings (URLs, IDs) wrap instead of overflowing. */
    overflow-wrap:break-word;

    /* `clip` not `hidden`: both contain the negative-margin hero
       images, but `hidden` makes body a scroll container and breaks
       the sticky header. Still a containment bandaid - the real fix
       is to stop the hero images overflowing. */
    overflow-x:clip;
}

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

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

ul{
    list-style:none;
}

button{
    border:none;
    background:none;
    cursor:pointer;
    font-family:inherit;
}


/*=========================================================
VARIABLES
=========================================================*/

/*
 * Every value here is taken from the Boutique Services page, which is the
 * design reference for the theme. Page sheets use these tokens rather than
 * their own hex values - that is what keeps the pages consistent.
 */
:root{
    /* Brand */
    --primary:#b88b46;          /* muted gold - dividers, hovers, active nav */
    --gold-soft:#d8c3a5;        /* card border on hover */
    --gold-ring:#d4b07c;        /* large badge ring */
    --accent:#d9b4af;           /* rose - primary button */
    --accent-dark:#cda19b;      /* rose, hover */
    --rose-deep:#b47270;        /* rose eyebrow variant */
    --terracotta:#b87d66;       /* the reference eyebrow colour */

    /* Ink */
    --text:#36322f;
    --text-light:#666666;
    --text-on-accent:#3f302d;

    /* Surfaces */
    --background:#faf8f4;       /* page / alternating section */
    --surface:#ffffff;          /* cards, sections */
    --surface-tint:#fbf8f4;     /* tinted card (reference .appointment-card) */
    --rose-tint:#f7efe9;        /* rose-washed sections and bands */
    --white:#ffffff;

    /* Lines - one border colour, one tint. The pages previously used nine
       near-identical greys between #e4ddd5 and #ece7df. */
    --border:#ece6df;
    --border-tint:#efe8de;
    --border-light:#efebe5;

    /* Type */
    --font-heading:"Cormorant Garamond",serif;
    --font-body:"Inter",sans-serif;
    --font-script:"Montez",cursive;

    --fs-h1-hero:46px;          /* reference hero */
    --fs-h3-card:22px;          /* reference card heading */
    --fs-body:15px;
    --fs-meta:14px;
    --fs-dense:13.5px;          /* feature strips, 4-6 across */
    --fs-eyebrow:13px;

    /* Icons */
    --icon-lg:58px;             /* reference .service-card */
    --icon-md:44px;             /* feature strips */
    --icon-sm:34px;             /* inline / value rows */

    /* Spacing */
    --sp-sm:20px;
    --sp-md:32px;
    --sp-lg:48px;
    --gap-grid:22px;            /* reference .services-grid */

    /* Metrics */
    --container:1200px;
    --header-max:1400px;
    --transition:.35s ease;
    --transition-border:border-color .25s ease;
}


/*=========================================================
ACCESSIBILITY
=========================================================*/

/* Every interactive element gets a visible keyboard ring.
   Declared once here so no component has to remember it. */
:focus-visible{
    outline:2px solid var(--primary);
    outline-offset:3px;
}

.screen-reader-text{
    position:absolute !important;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap;
    border:0;
}

/* Focusable sr-only elements must come back into view when reached by
   keyboard - undo every part of the hiding above, clip-path included. */
.screen-reader-text:focus{
    width:auto;
    height:auto;
    margin:0;
    overflow:visible;
    clip-path:none;
    white-space:normal;
}

.skip-link:focus{
    left:16px;
    top:16px;
    z-index:9999;
    padding:12px 20px;
    background:var(--white);
    color:var(--text);
    font-size:14px;
    font-weight:600;
    line-height:1;
    text-decoration:underline;
    box-shadow:0 4px 16px rgba(0,0,0,.15);
}

/* Honour the OS "reduce motion" setting: keep state changes,
   drop the travel. */
@media(prefers-reduced-motion:reduce){

    html{
        scroll-behavior:auto;
    }

    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
    }

}


/*=========================================================
LAYOUT
=========================================================*/

.container{
    width:min(92%,var(--container));
    margin:0 auto;
}

/* Scoped to the theme's own sections so Gutenberg blocks and plugin
   markup are not restyled from under us. :where() keeps specificity
   at zero, so a page sheet's `.visit-hero{padding:0}` still wins. */
.section,
:where(.site-main) > section{
    padding:55px 0;
}

.section-tight  { padding:40px 0; }
.section-normal { padding:55px 0; }
.section-large  { padding:70px 0; }

.section-divider{
    width:52px;
    height:2px;
    background:var(--primary);
    margin:5px 0;
}


/*=========================================================
TYPOGRAPHY
=========================================================*/

h1,
h2,
h3,
h4{
    font-family:var(--font-heading);
    font-weight:400;
    color:var(--text);
}

/* The reference page's (Boutique Services) hero heading treatment.
   Every h1 in this theme is a hero heading - there is no other use of
   <h1> anywhere in the templates - so this one rule is the standard
   for all ten pages. Page sheets may add page-specific layout (a
   max-width forced by their hero's grid, a background-colour patch)
   but must not redeclare font-size, line-height, letter-spacing or
   margin-bottom here. Deliberately constant across breakpoints too -
   the reference itself never shrinks its heading. */
h1{
    font-size:46px;
    line-height:1.08;
    letter-spacing:-0.5px;
    margin-bottom:12px;
}

h2{
    font-size:33px;
    line-height:1.2;
}

h3{
    font-size:24px;
    line-height:1.3;
}

p{
    color:var(--text-light);
    font-size:15px;
    line-height:1.7;
    margin-bottom:12px;
}


/*=========================================================
HEADER
=========================================================*/

.site-header{
    position:sticky;
    top:0;
    left:0;
    width:100%;
    background:var(--white);
    z-index:999;
    border-bottom:1px solid var(--border-light);
}

.header-container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    max-width:var(--header-max);
    margin:auto;
    padding:18px 50px;
}

.site-logo{
    flex-shrink:0;
    margin-right:30px;
}

.site-logo img{
    max-height:58px;
    width:auto;
}

.logo-text{
    font-family:var(--font-script);
    font-size:42px;
    line-height:1;
    color:#F00976;
    display:flex;
    align-items:center;
    gap:8px;
}

.header-logo-svg{
    height:40px;
    width:auto;
}


/*=========================================================
NAVIGATION
=========================================================*/

.main-navigation{
    flex:1;
    display:flex;
    justify-content:center;
}

.primary-menu{
    display:flex;
    align-items:center;
    flex-wrap:nowrap;
    gap:26px;
    margin:0;
    padding:0;
    list-style:none;
}

.primary-menu li{
    position:relative;
    white-space:nowrap;
}

.primary-menu a{
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:1.3px;
    font-weight:600;
    color:#3d3935;
    transition:var(--transition);
}

.primary-menu a:hover{
    color:var(--primary);
}

.current-menu-item a{
    color:var(--primary);
}

.header-actions{
    width:120px;
    display:flex;
    justify-content:flex-end;
}

/* Hidden here - shown only ≤992px, where .main-navigation switches
   to collapsed-by-default (see RESPONSIVE below). Desktop keeps the
   nav inline exactly as it already was. */
.menu-toggle{
    display:none;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:5px;
    width:44px;
    height:44px;
    padding:0;
    border:none;
    background:none;
    cursor:pointer;
    flex:none;
}

.menu-toggle-bar{
    display:block;
    width:22px;
    height:2px;
    background:var(--text);
    transition:transform .25s ease, opacity .25s ease;
}

.menu-toggle:hover .menu-toggle-bar{
    background:var(--primary);
}

.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(1){
    transform:translateY(7px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(2){
    opacity:0;
}

.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(3){
    transform:translateY(-7px) rotate(-45deg);
}

@media(prefers-reduced-motion:reduce){
    .menu-toggle-bar{
        transition:none;
    }
}


/*=========================================================
BUTTONS

One definition each. Page sheets may adjust size or colour
inside their own section, but must not redefine the base.
=========================================================*/

.btn-primary,
.btn-outline{
    display:inline-block;
    font-weight:600;
    text-transform:uppercase;
    transition:var(--transition);
}

.btn-primary{
    padding:14px 28px;
    margin-top:16px;
    background:var(--accent);
    color:#3f302d;
    font-size:12px;
    letter-spacing:2px;
}

.btn-primary:hover{
    background:var(--accent-dark);
}

.btn-outline{
    padding:16px 36px;
    border:1px solid #8d7c73;
    background:var(--white);
    color:#3b312d;
    font-size:13px;
    letter-spacing:1.8px;
}

.btn-outline:hover{
    background:#3b312d;
    color:var(--white);
    border-color:#3b312d;
}

/* Deeper-rose primary variant - reference is the Style Report/
   Founder/Designers heroes. Same shape as .btn-primary, its own
   colour; kept separate rather than folding into .btn-primary
   because those three pages' rose is deliberately deeper than the
   site-wide accent. */
.btn-rose{
    display:inline-block;
    margin-top:18px;
    padding:14px 28px;
    background:#c07f7d;
    color:var(--white);
    font-size:12px;
    font-weight:600;
    letter-spacing:2px;
    text-transform:uppercase;
    transition:var(--transition);
}

.btn-rose:hover{
    background:#a4615f;
}


/*=========================================================
SHARED COMPONENTS
=========================================================*/

/* Centred heading block used above most section grids. */
.section-heading{
    text-align:center;
    margin-bottom:5px;
}

.section-heading h2{
    margin-bottom:7px;
}

.section-heading .section-divider{
    margin:0 auto;
}

/* Legacy alias - .section-title predates .section-heading. */
.section-title{
    text-align:center;
    margin-bottom:60px;
}

.section-title h2{
    margin-bottom:20px;
}

.section-title .section-divider{
    margin:14px auto 0;
}

/* Small uppercase label above a heading. Values are the reference
   page's. Colour modifiers only - the base owns the layout. */
.eyebrow{
    display:block;
    font-size:var(--fs-eyebrow);
    font-weight:600;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--terracotta);
    margin-bottom:18px;
}

.eyebrow-rose{
    color:var(--rose-deep);
}

.eyebrow-gold{
    color:var(--primary);
}

/* Italic serif variant, not uppercase. Stands alone. */
.eyebrow-script{
    display:block;
    font-family:var(--font-heading);
    font-style:italic;
    font-size:17px;
    color:#b08c74;
    margin-bottom:6px;
}

.text-center{
    text-align:center;
}


/*=========================================================
STANDARD COMPONENT: ICON CARD

The reference page's .service-card. A bordered white box, centred,
icon over heading over copy, tinting its border on hover.

Every page's equivalent card is aliased onto this one definition, so
the treatment is set in exactly one place. Page sheets set only the
grid that holds them and any genuine size difference.
=========================================================*/

.icon-card,
.service-card,
.planning-card,
.connect-card,
.appointment-card{
    background:var(--surface);
    border:1px solid var(--border);
    /* The reference page's value. Cards in a looser grid (Visit's three
       across) raise it in their own sheet - card density is a real
       layout difference, unlike colour and type. */
    padding:var(--card-padding,10px);
    text-align:center;
    transition:var(--transition-border);
}

.icon-card:hover,
.icon-card:focus-within,
.service-card:hover,
.service-card:focus-within,
.planning-card:hover,
.planning-card:focus-within,
.connect-card:hover,
.connect-card:focus-within{
    border-color:var(--gold-soft);
}

/* Tinted variant - reference .appointment-card */
.icon-card--tint,
.appointment-card{
    background:var(--surface-tint);
    border-color:var(--border-tint);
}

.icon-card img,
.service-card img,
.appointment-card img{
    width:var(--icon-lg);
    height:var(--icon-lg);
    margin:0 auto 25px;
}

.icon-card h3,
.service-card h3,
.planning-card h3,
.appointment-card h3{
    font-size:var(--fs-h3-card);
    line-height:1.3;
    margin-bottom:18px;
}

.icon-card p,
.service-card p{
    margin:0;
    line-height:1.8;
    color:var(--text-light);
}


/*=========================================================
STANDARD COMPONENT: FEATURE STRIP

A row of 4-6 centred icon/heading/copy items separated by hairlines.
This shape appears on eight of the ten pages; it previously carried
five different divider greys and five different icon sizes.

Dividers use :not(:last-child) rather than a border on every item
plus overrides, so they stay correct however the row reflows.
=========================================================*/

.feature-strip{
    display:grid;
    grid-template-columns:repeat(var(--strip-cols,5),minmax(0,1fr));
}

/* Layout + typography for every strip item. */
.feature-item,
.philosophy-item,
.designers-step,
.designers-why-item,
.founder-why-item,
.journey-step,
.showroom-feature,
.report-benefit,
.report-step,
.expect-item,
.edit-why-item{
    text-align:center;
    padding:0 22px;
}

/* Hairline dividers, for the strips that have them. Items in a
   multi-row grid (Policies) need their end-of-row divider cleared by
   an nth-child rule in the page sheet - the column count lives
   there, so the reset does too. */
.feature-item,
.philosophy-item,
.designers-step,
.designers-why-item,
.founder-why-item,
.showroom-feature,
.report-benefit,
.report-step,
.policy-card,
.policies-help-channel,
.edit-why-item{
    border-right:1px solid var(--border);
}

.feature-item:last-child,
.philosophy-item:last-child,
.designers-step:last-child,
.designers-why-item:last-child,
.founder-why-item:last-child,
.showroom-feature:last-child,
.report-benefit:last-child,
.report-step:last-child,
.policy-card:last-child,
.policies-help-channel:last-child,
.edit-why-item:last-child{
    border-right:none;
}

.feature-item img,
.philosophy-item img,
.designers-step img,
.designers-why-item img,
.founder-why-item img,
.journey-step img,
.showroom-feature img,
.report-benefit img,
.report-step-icon,
.edit-why-item img{
    width:var(--icon-md);
    height:var(--icon-md);
    margin:0 auto 18px;
}

.feature-item h3,
.designers-step h3,
.designers-why-item h3,
.founder-why-item h3,
.journey-step h3,
.showroom-feature h3,
.edit-why-item h3{
    font-size:20px;
    margin-bottom:12px;
}

.feature-item p,
.philosophy-item p,
.designers-step p,
.designers-why-item p,
.founder-why-item p,
.journey-step p,
.showroom-feature p,
.report-benefit p,
.report-step p,
.edit-why-item p{
    margin:0;
    font-size:var(--fs-dense);
    line-height:1.8;
    color:var(--text-light);
}


/*=========================================================
STANDARD COMPONENT: BADGE, CHECK, PANEL
=========================================================*/

/* Large ringed icon - reference .closing-icon */
.badge-circle,
.closing-icon,
.policy-badge,
.policies-help-badge,
.report-gift-badge,
.promise-badge{
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    flex-shrink:0;
}

.badge-circle,
.closing-icon{
    width:82px;
    height:82px;
    border:2px solid var(--gold-ring);
}

.badge-circle img,
.closing-icon img{
    width:40px;
    height:40px;
}

/* Reference .check-circle - the tick used in benefit lists */
.check-circle{
    display:flex;
    align-items:center;
    justify-content:center;
    width:18px;
    height:18px;
    flex-shrink:0;
    border:1px solid #d7b68b;
    border-radius:50%;
    color:#c69b62;
    font-size:14px;
}

.benefits-list{
    list-style:none;
    padding:0;
    margin:0;
}

.benefits-list li{
    display:flex;
    align-items:flex-start;
    gap:16px;
    margin-bottom:var(--sp-sm);
    font-size:var(--fs-meta);
}

/* Reference .closing-panel - a bordered band split into two columns */
.panel,
.closing-panel{
    border:1px solid var(--border);
    background:var(--surface);
}


/*=========================================================
STANDARD COMPONENT: SPLIT HERO

Showroom, Founder, Policies, Style Report, Designers and
Collections all use the same hero shape: a photo on the right
with object-fit:cover, and a text panel on the left whose
padding narrows in the same three steps on every one of them.

Each page still owns its own .xxx-hero (background), .xxx-hero
-inner (grid-template-columns ratio + min-height) and any
margin-top on its own h1 - those are real differences tied to
that page's photograph and copy length, not drift. What was
identical, byte for byte, is aliased here.
=========================================================*/

.showroom-hero-text,
.founder-hero-text,
.policies-hero-text,
.report-hero-text,
.designers-hero-text,
.collections-hero-text{
    padding:70px 55px 70px max(40px, calc((100vw - 1200px) / 2 + 20px));
}

.showroom-hero-text p,
.founder-hero-text p,
.policies-hero-text p,
.report-hero-text p,
.designers-hero-text p,
.collections-hero-text p{
    font-size:14px;
    line-height:1.9;
}

.showroom-hero-image img,
.founder-hero-image img,
.policies-hero-image img,
.report-hero-image img,
.designers-hero-image img,
.collections-hero-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* Soft fade where the photo meets the text panel, on the three
   heroes designed with one (Showroom, Founder, Policies) plus
   Founder's mid-page "What Drives Me" band, which reuses the same
   technique. `transparent` needs no colour value, so - unlike the
   three hand-picked rgba approximations this replaced - it can never
   drift out of sync with --rose-tint. Width is real page-by-page
   tuning (matched to each photograph) and stays local to each page. */
.showroom-hero-image::before,
.founder-hero-image::before,
.founder-drives-image::before,
.policies-hero-image::before{
    content:"";
    position:absolute;
    inset:0 auto 0 0;
    background:linear-gradient(to right, var(--rose-tint), transparent);
    z-index:2;
}


/*=========================================================
STANDARD COMPONENT: CTA BAND

The image-and-text band used to close the Designers, Style
Report and Founder ("Come Say Hello") pages: a photo, a short
pitch, one or two buttons, and a faint leaf watermark. All
three were built from the same values with a pixel or two of
accidental drift between them (28px vs 30px padding, 29px vs
28px heading, opacity .18 vs .16 vs .14) - unified here.

Grid ratio, image height and leaf position/size are kept
page-local: they're tuned to each specific photograph rather
than being arbitrary.
=========================================================*/

.designers-cta-band,
.report-cta-band,
.founder-hello-band{
    position:relative;
    display:grid;
    align-items:center;
    gap:40px;
    background:var(--rose-tint);
    overflow:hidden;
}

.designers-cta-image img,
.report-cta-image img,
.founder-hello-image img{
    width:100%;
    height:250px;
    object-fit:cover;
}

.designers-cta-text,
.report-cta-text,
.founder-hello-text{
    padding:28px 40px 28px 0;
}

.designers-cta-text h3,
.report-cta-text h3,
.founder-hello-text h3{
    font-size:29px;
    margin-bottom:12px;
}

.designers-cta-text p,
.report-cta-text p,
.founder-hello-text p{
    font-size:13.5px;
    line-height:1.8;
    margin-bottom:6px;
}

.designers-cta-actions,
.report-cta-actions{
    display:flex;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
}

.designers-cta-leaf,
.report-cta-leaf{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    opacity:.17;
    pointer-events:none;
}

@media(max-width:992px){

    .designers-cta-band,
    .report-cta-band,
    .founder-hello-band{
        grid-template-columns:1fr;
        gap:0;
    }

    .designers-cta-text,
    .report-cta-text,
    .founder-hello-text{
        padding:0 24px 30px;
        text-align:center;
    }

    .designers-cta-actions,
    .report-cta-actions{
        justify-content:center;
    }

    .designers-cta-leaf,
    .report-cta-leaf{
        display:none;
    }

}


/*=========================================================
FAQ ACCORDION

Used by the Visit and Policies pages, driven by script.js.
=========================================================*/

.faq-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:26px;
}

.faq-column{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.faq-item{
    border:1px solid var(--border);
    background:var(--white);
}

.faq-question{
    width:100%;
    padding:18px 24px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    font-size:17px;
    font-weight:600;
    color:#3d3935;
    text-align:left;
}

.faq-icon{
    font-size:24px;
    line-height:1;
    color:#8f847b;
    flex-shrink:0;
    transition:transform .3s ease;
}

/* Animating grid-template-rows rather than max-height means a long
   answer can never be clipped the way a fixed max-height clips it.
   The collapsing child must carry no padding of its own - overflow
   zeroes a box's automatic minimum content size, but its padding
   still contributes, which would leave a sliver of text showing.
   Hence the inner wrapper: it collapses, the <p> inside it holds the
   padding. */
.faq-answer{
    display:grid;
    grid-template-rows:0fr;
    transition:grid-template-rows .35s ease;
}

.faq-answer-inner{
    overflow:hidden;
    min-height:0;
}

.faq-answer p{
    padding:0 24px 22px;
    margin:0;
    line-height:1.8;
}

.faq-item.active .faq-answer{
    grid-template-rows:1fr;
}

.faq-item.active .faq-icon{
    transform:rotate(45deg);
}


/*=========================================================
FOOTER
=========================================================*/

.site-footer{
    background:var(--white);
    padding:50px 0 20px;
    border-top:1px solid #ece7df;
}

.footer-grid{
    display:grid;
    grid-template-columns:2fr 1fr 1.4fr 1.8fr;
    gap:35px;
}

.footer-col{
    padding-right:20px;
    border-right:1px solid #ece7df;
}

.footer-col:last-child{
    border-right:none;
}

.footer-col h4{
    font-family:var(--font-body);
    font-size:14px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    margin-bottom:15px;
}

.footer-logo{
    width:75px;
    margin-bottom:10px;
}

.footer-logo img{
    height:72px;
}

.footer-about{
    margin-bottom:20px;
}

.footer-menu li{
    margin-bottom:12px;
}

.footer-menu a{
    color:#444;
    font-size:14px;
    transition:var(--transition);
}

.footer-menu a:hover{
    color:var(--primary);
}

.footer-social{
    display:flex;
    gap:18px;
}

.footer-social a{
    display:flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    border:1px solid #ece7df;
    border-radius:50%;
    transition:var(--transition);
}

.footer-social a:hover{
    border-color:var(--primary);
}

.footer-social img{
    width:20px;
    height:20px;
}

.footer-col:nth-child(3) p{
    font-size:13.5px;
    line-height:1.65;
}

.footer-contact li{
    display:flex;
    align-items:flex-start;
    gap:12px;
    margin-bottom:12px;
    font-size:13.5px;
    line-height:1.65;
    color:#444;
}

.footer-contact img{
    width:20px;
    height:20px;
    flex-shrink:0;
    margin-top:2px;
}

.newsletter{
    display:flex;
    margin:30px 0;
}

.newsletter input{
    flex:1;
    border:1px solid #e4ddd5;
    padding:14px;
    font-size:15px;
}

.newsletter button{
    width:60px;
    background:#ddb3ae;
    color:var(--white);
    font-size:22px;
}

.footer-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap;
    margin-top:40px;
    padding-top:22px;
    border-top:1px solid #ece7df;
}

.footer-bottom p{
    margin:0;
    font-size:13px;
}

.footer-legal{
    display:flex;
    align-items:center;
    gap:10px;
}

.footer-legal a{
    color:#444;
    transition:var(--transition);
}

.footer-legal a:hover{
    color:var(--primary);
}

.footer-legal span{
    color:#c9c2b8;
}

.copyright{
    margin-top:0;
    font-size:14px;
}


/*=========================================================
RESPONSIVE

Type and spacing step DOWN as the viewport narrows. If you add
an override here, check it is smaller than the one above it.
=========================================================*/

@media(max-width:1200px){

    .primary-menu{
        gap:20px;
    }

    .header-container{
        padding:18px 30px;
    }

    .showroom-hero-text,
    .founder-hero-text,
    .policies-hero-text,
    .report-hero-text,
    .designers-hero-text,
    .collections-hero-text{
        padding:60px 40px;
    }

}

@media(max-width:992px){

    .header-container{
        flex-wrap:wrap;
        height:auto;
        padding:20px 0;
    }

    /* flex:0 0 100%, not width:100% - the base rule sets flex:1, whose
       flex-basis:0% wins over width in flex layout, so the nav never
       wrapped onto its own row and stayed crammed beside the logo.
       Collapsed by default (display:none) - the menu-toggle button
       adds .is-open via script.js to reveal it. */
    .main-navigation{
        display:none;
        flex:0 0 100%;
        order:3;
        margin-top:20px;
        justify-content:center;
    }

    .main-navigation.is-open{
        display:flex;
    }

    .menu-toggle{
        display:flex;
    }

    .primary-menu{
        flex-wrap:wrap;
        gap:18px;
    }

    .logo-text{
        font-size:34px;
    }

    h2{
        font-size:30px;
    }

    .faq-grid{
        grid-template-columns:1fr;
    }

    .footer-grid{
        grid-template-columns:1fr 1fr;
    }

    .footer-col{
        border-right:none;
        padding-right:0;
    }

    /* The fade only makes sense while the hero is still two columns -
       once it stacks to one, there is no photo edge for it to melt
       into. */
    .showroom-hero-image::before,
    .founder-hero-image::before,
    .policies-hero-image::before{
        display:none;
    }

}

@media(max-width:768px){

    .section,
    :where(.site-main) > section{
        padding:44px 0;
    }

    .primary-menu{
        flex-direction:column;
        gap:15px;
    }

    .header-actions{
        display:none;
    }

    h2{
        font-size:28px;
        margin-bottom:12px;
    }

    /* NOTE: the templates hard-break their copy with <br> to control
       line endings at desktop widths, which reads raggedly on a phone.
       Do NOT fix that by hiding the breaks - many sit between words
       with no surrounding whitespace ("Bespoke<br>Custom Stitching"),
       so display:none joins the words. It has to be fixed in the
       markup by removing the breaks. */

    .footer-grid{
        grid-template-columns:1fr;
        gap:40px;
    }

    .footer-social{
        justify-content:flex-start;
    }

    .showroom-hero-text,
    .founder-hero-text,
    .policies-hero-text,
    .report-hero-text,
    .designers-hero-text,
    .collections-hero-text{
        padding:45px 20px;
    }

}