/* =============================================================================
   Aurora — StrmLine AI-Builder Theme
   /themes/aurora/aurora.css

   A clean, CSS-only, token-driven theme for AI-generated sites. Every visual
   decision is a CSS custom property ("design token") that the AI sets per site
   from the brand + design prompt. NO theme JavaScript — so the GrapesJS editor
   canvas is an accurate WYSIWYG and there are no runtime crashes/preloaders.

   Layout (wd/layouts/aurora/standard.php) sets the per-site token overrides on
   the root element from wd_sites.brand_settings_json. Section widgets
   (Aurora*Widget) emit semantic markup that consumes these tokens.
   ============================================================================= */

/* ----------------------------------------------------------------------------
   DESIGN-TOKEN CONTRACT — defaults. The AI overrides these per site.
   ---------------------------------------------------------------------------- */
:root {
    /* Header band. The HEADER owns its height; the logo scales inside it and can
       never push it taller (see .au-brand img). To give a big logo more room,
       raise --au-hdr-h deliberately per site rather than letting the image
       dictate the layout. */
    --au-hdr-h:         68px;
    --au-logo-h:        40px;

    /* Palette */
    --au-bg:            #ffffff;
    --au-surface:       #f5f7f9;
    --au-ink:           #141922;
    --au-muted:         #5b6675;
    --au-primary:       #1a3a6b;
    --au-on-primary:    #ffffff;
    --au-accent:        #1a3a6b;
    --au-line:          #e6e9ee;

    /* Typography */
    --au-font-display:  system-ui, -apple-system, "Segoe UI", sans-serif;
    --au-font-body:     system-ui, -apple-system, "Segoe UI", sans-serif;
    --au-display-weight:   700;
    --au-display-tracking: -0.01em;
    --au-display-transform: none;
    --au-display-size:  clamp(2rem, 4.4vw, 3.5rem);

    /* Shape */
    --au-radius:        14px;
    --au-btn-radius:    10px;
    --au-border:        1px solid var(--au-line);

    /* Rhythm */
    --au-container:     1200px;
    --au-section-py:    clamp(48px, 7vw, 100px);
    --au-gap:           28px;

    /* Effects */
    --au-shadow:        0 18px 44px rgba(20, 25, 34, .10);
}

/* ----------------------------------------------------------------------------
   BASE
   ---------------------------------------------------------------------------- */
/* No browser default gap around the page (WD-BODY-MARGIN-2026-10-25). */
body.au-root { margin: 0; }
.au-root {
    background: var(--au-bg);
    color: var(--au-ink);
    font-family: var(--au-font-body);
    -webkit-font-smoothing: antialiased;
    line-height: 1.55;
}
.au-root *, .au-root *::before, .au-root *::after { box-sizing: border-box; }

.au-container {
    max-width: var(--au-container);
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 40px);
}
.au-section { padding: var(--au-section-py) 0; }
.au-section--tight { padding: clamp(28px, 4vw, 56px) 0; }
.au-surface { background: var(--au-surface); }

/* Display type */
.au-display {
    font-family: var(--au-font-display);
    font-weight: var(--au-display-weight);
    letter-spacing: var(--au-display-tracking);
    text-transform: var(--au-display-transform);
    line-height: 1.05;
    margin: 0;
}
.au-eyebrow {
    display: inline-block;
    font-family: var(--au-font-body);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--au-accent);
}
.au-lead { color: var(--au-muted); font-size: clamp(1rem, 1.2vw, 1.12rem); }

/* Buttons */
.au-btn {
    display: inline-block;
    font-family: var(--au-font-body);
    font-weight: 700;
    font-size: .95rem;
    padding: 13px 26px;
    border-radius: var(--au-btn-radius);
    text-decoration: none;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform .15s ease, filter .15s ease;
}
.au-btn:hover { transform: translateY(-2px); }
.au-btn--primary { background: var(--au-primary); color: var(--au-on-primary); border-color: var(--au-primary); }
.au-btn--primary:hover { filter: brightness(1.06); }
.au-btn--ghost { background: transparent; color: var(--au-ink); border-color: currentColor; }

/* ----------------------------------------------------------------------------
   CSS-ART BACKGROUNDS — the AI picks one per section (no image needed).
   ---------------------------------------------------------------------------- */
.au-art { position: absolute; inset: 0; z-index: 0; }
.au-art--solid   { background: var(--au-surface); }
.au-art--subtle  { background: radial-gradient(120% 130% at 82% 8%,
                    color-mix(in srgb, var(--au-surface) 60%, #fff) 0%,
                    var(--au-surface) 58%,
                    color-mix(in srgb, var(--au-surface) 70%, #000 6%) 100%); }
.au-art--mesh    { background:
                    radial-gradient(55% 75% at 12% 18%, color-mix(in srgb, var(--au-primary) 55%, transparent), transparent 60%),
                    radial-gradient(50% 70% at 88% 26%, color-mix(in srgb, var(--au-accent) 60%, transparent), transparent 60%),
                    radial-gradient(85% 95% at 55% 108%, color-mix(in srgb, var(--au-primary) 45%, transparent), transparent 60%),
                    var(--au-ink); }
.au-art--stripes { background:
                    repeating-linear-gradient(135deg,
                    color-mix(in srgb, var(--au-ink) 96%, #fff) 0 20px,
                    var(--au-ink) 20px 40px),
                    radial-gradient(90% 120% at 90% -10%, color-mix(in srgb, var(--au-accent) 22%, transparent), transparent 55%); }

/* ----------------------------------------------------------------------------
   SECTION: HERO  (Aurora\AuroraHeroWidget)
   ---------------------------------------------------------------------------- */
.au-hero { position: relative; overflow: hidden; border-radius: var(--au-radius); background: var(--au-bg); }
.au-hero--flush { border-radius: 0; }
.au-hero-inner { position: relative; z-index: 2; padding: clamp(40px, 6vw, 84px) clamp(24px, 4vw, 56px); }
.au-hero--h-sm .au-hero-inner { min-height: 300px; }
.au-hero--h-md .au-hero-inner { min-height: 440px; }
.au-hero--h-lg .au-hero-inner { min-height: 600px; }
.au-hero-grid { display: grid; grid-template-columns: 1.55fr .95fr; gap: var(--au-gap); align-items: center; height: 100%; }
.au-hero--centered .au-hero-grid { grid-template-columns: 1fr; text-align: center; justify-items: center; }

.au-hero .au-eyebrow { margin-bottom: 16px; }
.au-hero-title { font-size: var(--au-display-size); margin-bottom: 16px; color: inherit; }
.au-hero-sub  { margin: 0 0 26px; max-width: 46ch; }
.au-hero--centered .au-hero-sub { margin-inline: auto; }
.au-hero-cta  { display: flex; gap: 12px; flex-wrap: wrap; }
.au-hero--centered .au-hero-cta { justify-content: center; }
.au-hero-meta { margin-top: 22px; font-size: .85rem; color: var(--au-muted); }

/* Optional floating card (e.g. a price/offer highlight) */
.au-hero-card {
    justify-self: end;
    min-width: 190px;
    background: var(--au-bg);
    color: var(--au-ink);
    border: var(--au-border);
    border-radius: calc(var(--au-radius) + 6px);
    box-shadow: var(--au-shadow);
    padding: 24px;
}
.au-hero--centered .au-hero-card,
.au-hero--nocard  .au-hero-card { display: none; }
.au-hero-card-badge { display:inline-block; font-weight:700; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color: var(--au-on-primary); background: var(--au-primary); padding: 5px 11px; border-radius: 999px; margin-bottom: 14px; }
.au-hero-card-price { font-family: var(--au-font-display); font-weight: var(--au-display-weight); font-size: 2rem; line-height: 1; }
.au-hero-card-label { font-size: .9rem; color: var(--au-muted); margin-top: 6px; }

/* On dark art backgrounds the hero text inverts via a modifier the widget adds.
   The solid --au-ink fallback guarantees a dark backdrop even if the art layer
   fails to paint (e.g. unsupported CSS) — so white hero text is never white-on-white. */
.au-hero--on-dark { color: #fff; background: var(--au-ink); }
.au-hero--on-dark .au-hero-title,
.au-hero--on-dark .au-hero-sub,
.au-hero--on-dark .au-hero-meta { color: #fff; }
.au-hero--on-dark .au-btn--ghost { color: #fff; }

@media (max-width: 820px) {
    .au-hero-grid { grid-template-columns: 1fr; }
    .au-hero-card { justify-self: start; }
}

/* ----------------------------------------------------------------------------
   EDITOR-CANVAS ONLY: this stylesheet is loaded live too, but these hints are
   gated by the .wd-edit-mode body class the layout adds only in the designer.
   ---------------------------------------------------------------------------- */
.wd-edit-mode .au-hero { outline: 1px dashed color-mix(in srgb, var(--au-primary) 40%, transparent); outline-offset: 3px; }

/* ----------------------------------------------------------------------------
   CHROME — header & footer (rendered by wd/layouts/brexons/standard.php). Kept
   here rather than in the layout <head> so the chrome also styles inside the
   editor canvas, which strips the document <head>.
   ---------------------------------------------------------------------------- */
.au-hdr { position: sticky; top: 0; z-index: 50; background: var(--au-bg); border-bottom: var(--au-border); }
.au-hdr-in { display: flex; align-items: center; gap: 24px; min-height: var(--au-hdr-h); }
.au-brand { font-family: var(--au-font-display); font-weight: var(--au-display-weight); font-size: 1.3rem; color: var(--au-ink); text-decoration: none; letter-spacing: var(--au-display-tracking); }
/* The min() is the guarantee: however large --au-logo-h is set, the logo is
   still capped at the header band minus its breathing room, so a big or square
   badge scales down instead of stretching the nav bar. Header height stays a
   deliberate choice, never a side effect of the image someone uploaded. */
.au-brand img {
    max-height: min(var(--au-logo-h), calc(var(--au-hdr-h) - 16px));
    max-width: 260px; width: auto; display: block; object-fit: contain;
}
.au-nav { display: flex; gap: 22px; margin-left: 8px; }
.au-nav a { color: var(--au-ink); text-decoration: none; font-weight: 600; font-size: .95rem; opacity: .85; }
.au-nav a:hover { opacity: 1; color: var(--au-primary); }
.au-hdr-actions { margin-left: auto; display: flex; gap: 18px; align-items: center; }
.au-hdr-actions a { color: var(--au-ink); text-decoration: none; font-weight: 600; font-size: .9rem; }
.au-ftr { background: var(--au-surface); border-top: var(--au-border); }
.au-ftr-in { padding: 40px 0; display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; color: var(--au-muted); font-size: .9rem; }
.au-ftr-brand { font-family: var(--au-font-display); font-weight: var(--au-display-weight); color: var(--au-ink); font-size: 1.1rem; }
@media (max-width: 640px) { .au-nav { display: none; } }

/* ----------------------------------------------------------------------------
   SECTION LIBRARY — shared bits + the section widgets the AI composes with.
   All token-driven, CSS-only.
   ---------------------------------------------------------------------------- */
.au-section-head { max-width: 720px; margin: 0 auto clamp(28px, 4vw, 52px); text-align: center; }
.au-section-head .au-eyebrow { margin-bottom: 12px; }
.au-section-head h2 { font-family: var(--au-font-display); font-weight: var(--au-display-weight); letter-spacing: var(--au-display-tracking); text-transform: var(--au-display-transform); font-size: clamp(1.6rem, 3vw, 2.4rem); margin: 0 0 12px; line-height: 1.1; }
.au-section-head p { color: var(--au-muted); margin: 0; font-size: 1.05rem; }

/* Shared column grids */
.au-cols-2 { grid-template-columns: repeat(2, 1fr); }
.au-cols-3 { grid-template-columns: repeat(3, 1fr); }
.au-cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .au-cols-3, .au-cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .au-cols-2, .au-cols-3, .au-cols-4 { grid-template-columns: 1fr; } }

/* Feature grid */
.au-features { display: grid; gap: 20px; }
.au-feature { background: var(--au-bg); border: var(--au-border); border-radius: var(--au-radius); padding: 26px; }
.au-surface .au-feature { background: var(--au-surface); }
.au-feature-icon { font-size: 1.7rem; line-height: 1; margin-bottom: 14px; display: inline-flex; width: 52px; height: 52px; align-items: center; justify-content: center; border-radius: calc(var(--au-radius) - 2px); background: color-mix(in srgb, var(--au-primary) 12%, transparent); }
.au-feature-title { font-family: var(--au-font-display); font-weight: var(--au-display-weight); letter-spacing: var(--au-display-tracking); text-transform: var(--au-display-transform); font-size: 1.15rem; margin: 0 0 8px; }
.au-feature-text { color: var(--au-muted); margin: 0; font-size: .96rem; }

/* Category grid */
.au-catgrid { display: grid; gap: 16px; }
.au-cat-tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 150px; padding: 20px; border-radius: var(--au-radius); background: var(--au-surface); border: var(--au-border); text-decoration: none; color: var(--au-ink); overflow: hidden; transition: transform .15s; }
.au-cat-tile:hover { transform: translateY(-3px); }
.au-cat-tile-icon { font-size: 1.9rem; line-height: 1; margin-bottom: auto; }
.au-cat-tile-label { font-family: var(--au-font-display); font-weight: var(--au-display-weight); letter-spacing: var(--au-display-tracking); text-transform: var(--au-display-transform); font-size: 1.05rem; }

/* Rich text */
.au-rich { max-width: 760px; }
.au-rich--center { margin: 0 auto; text-align: center; }
.au-rich h2 { font-family: var(--au-font-display); font-weight: var(--au-display-weight); letter-spacing: var(--au-display-tracking); text-transform: var(--au-display-transform); font-size: clamp(1.6rem, 3vw, 2.4rem); margin: 0 0 18px; line-height: 1.12; }
.au-rich p { color: var(--au-ink); font-size: 1.05rem; line-height: 1.7; margin: 0 0 16px; }
.au-rich .au-eyebrow { margin-bottom: 12px; }

/* CTA band */
.au-cta { position: relative; overflow: hidden; border-radius: var(--au-radius); padding: clamp(36px, 5vw, 64px) clamp(24px, 4vw, 48px); text-align: center; background: var(--au-surface); }
.au-cta-inner { position: relative; z-index: 2; max-width: 640px; margin: 0 auto; }
.au-cta-inner h2 { font-family: var(--au-font-display); font-weight: var(--au-display-weight); letter-spacing: var(--au-display-tracking); text-transform: var(--au-display-transform); font-size: clamp(1.7rem, 3.4vw, 2.6rem); margin: 0 0 14px; line-height: 1.08; }
.au-cta-inner p { color: var(--au-muted); font-size: 1.08rem; margin: 0 0 24px; }
.au-cta--on-dark { background: var(--au-ink); }
.au-cta--on-dark .au-cta-inner h2 { color: #fff; }
.au-cta--on-dark .au-cta-inner p { color: rgba(255,255,255,.85); }

/* Editorial split */
.au-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.au-split-media { position: relative; min-height: 340px; border-radius: var(--au-radius); overflow: hidden; }
.au-split--media-right .au-split-media { order: 2; }
.au-split-copy h2 { font-family: var(--au-font-display); font-weight: var(--au-display-weight); letter-spacing: var(--au-display-tracking); text-transform: var(--au-display-transform); font-size: clamp(1.6rem, 3vw, 2.4rem); margin: 0 0 16px; line-height: 1.12; }
.au-split-copy p { color: var(--au-muted); font-size: 1.05rem; line-height: 1.7; margin: 0 0 18px; }
.au-split .au-eyebrow { margin-bottom: 12px; }
@media (max-width: 820px) { .au-split { grid-template-columns: 1fr; } .au-split--media-right .au-split-media { order: 0; } .au-split-media { min-height: 220px; } }
.au-split-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ----------------------------------------------------------------------------
   IMAGERY + DEPTH — real product photos + a bit more polish so pages don't
   read as flat. (Design-quality pass.)
   ---------------------------------------------------------------------------- */

/* Category tiles backed by a real product photo */
.au-cat-tile--img { color: #fff; min-height: 210px; background-size: cover; background-position: center; border-color: transparent; }
.au-cat-tile--img::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(10,14,20,.05) 0%, rgba(10,14,20,.62) 100%); }
.au-cat-tile--img .au-cat-tile-label { position: relative; z-index: 1; color: #fff; }

/* Depth / motion polish on existing bits */
.au-btn--primary { box-shadow: 0 10px 24px color-mix(in srgb, var(--au-primary) 26%, transparent); }
.au-feature { transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.au-feature:hover { transform: translateY(-3px); box-shadow: var(--au-shadow); border-color: transparent; }
.au-cat-tile:hover { box-shadow: var(--au-shadow); }

/* SECTION: Product showcase (real products) */
.au-showcase { display: grid; gap: 24px; }
.au-showcard { display: flex; flex-direction: column; text-decoration: none; color: inherit; border: var(--au-border); border-radius: var(--au-radius); overflow: hidden; background: var(--au-bg); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.au-showcard:hover { transform: translateY(-4px); box-shadow: var(--au-shadow); border-color: transparent; }
.au-showcard-img { aspect-ratio: 4/5; background: var(--au-surface); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.au-showcard-img img { width: 100%; height: 100%; object-fit: contain; padding: 14px; transition: transform .3s ease; }
.au-showcard:hover .au-showcard-img img { transform: scale(1.04); }
.au-showcard-noimg { color: var(--au-muted); font-size: .9rem; text-align: center; padding: 18px; }
.au-showcard-body { padding: 15px 16px 18px; display: flex; flex-direction: column; gap: 5px; }
.au-showcard-name { font-weight: 600; line-height: 1.3; }
.au-showcard-price { font-weight: 700; color: var(--au-primary); }
.au-showcard--skeleton { opacity: .5; pointer-events: none; }
.au-showcase-cta { text-align: center; margin-top: 36px; }

/* SECTION: Stats / trust band */
.au-stats { border-radius: var(--au-radius); padding: clamp(34px, 4.5vw, 58px) clamp(22px, 3vw, 44px); }
.au-stats--primary { background: var(--au-primary); color: var(--au-on-primary, #fff); }
.au-stats--ink { background: var(--au-ink); color: #fff; }
.au-stats--surface { background: var(--au-surface); color: var(--au-ink); }
.au-stats-head { text-align: center; font-family: var(--au-font-display); font-weight: var(--au-display-weight); font-size: clamp(1.4rem, 2.6vw, 2rem); margin: 0 0 28px; }
.au-stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.au-stat-value { font-family: var(--au-font-display); font-weight: var(--au-display-weight); letter-spacing: var(--au-display-tracking); font-size: clamp(1.9rem, 4vw, 2.9rem); line-height: 1; }
.au-stat-label { margin-top: 9px; font-size: .92rem; opacity: .82; }
@media (max-width: 720px) { .au-stats-row { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; } }

/* SECTION: Testimonial */
.au-quote { max-width: 880px; margin: 0 auto; text-align: center; border-radius: var(--au-radius); padding: clamp(36px, 5vw, 68px) clamp(24px, 4vw, 56px); }
.au-quote--surface { background: var(--au-surface); }
.au-quote--ink { background: var(--au-ink); color: #fff; }
.au-quote-text { font-family: var(--au-font-display); font-weight: var(--au-display-weight); letter-spacing: var(--au-display-tracking); font-size: clamp(1.3rem, 2.7vw, 2.05rem); line-height: 1.32; margin: 0 0 24px; }
.au-quote-text::before { content: "\201C"; }
.au-quote-text::after { content: "\201D"; }
.au-quote-cite { display: flex; flex-direction: column; gap: 2px; }
.au-quote-author { font-weight: 700; }
.au-quote-role { color: var(--au-muted); font-size: .9rem; }
.au-quote--ink .au-quote-role { color: rgba(255,255,255,.72); }

/* SECTION: Logo / sponsor strip */
.au-logostrip-head { text-align: center; color: var(--au-muted); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; margin: 0 0 22px; }
.au-logostrip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 46px; }
.au-logostrip-item img { max-height: 40px; width: auto; opacity: .7; filter: grayscale(1); transition: opacity .15s ease, filter .15s ease; }
.au-logostrip-item img:hover { opacity: 1; filter: none; }
.au-logostrip-word { font-family: var(--au-font-display); font-weight: var(--au-display-weight); letter-spacing: .01em; font-size: 1.15rem; color: var(--au-muted); opacity: .8; }

/* ----------------------------------------------------------------------------
   MOTION — reveal + parallax states.
   Gated under `html.au-motion`, which the layout's head bootstrap adds ONLY on
   live/preview (never the editor canvas, never under prefers-reduced-motion, and
   auto-removed if the motion engine fails to load). So the editor and any
   no-JS/reduced-motion visitor always see the final, fully-visible state.
   ---------------------------------------------------------------------------- */
.au-motion [data-au-reveal] { opacity: 0; transition: opacity .7s ease, transform .75s cubic-bezier(.22,.61,.36,1); }
.au-motion [data-au-reveal="fade-up"]     { transform: translateY(30px); }
.au-motion [data-au-reveal="zoom"]        { transform: scale(.94); }
.au-motion [data-au-reveal="slide-left"]  { transform: translateX(44px); }
.au-motion [data-au-reveal="slide-right"] { transform: translateX(-44px); }
.au-motion [data-au-reveal].au-in         { opacity: 1; transform: none; }
[data-au-parallax] { will-change: transform; }
/* Oversize parallax background art so drifting never reveals an edge gap. */
.au-art[data-au-parallax] { top: -14%; height: 128%; }

/* Marquee ticker (used by the marquee section; track is duplicated by the JS) */
.au-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.au-marquee-row { display: flex; width: max-content; align-items: center; }
.au-motion .au-marquee-row[data-au-marquee-done] { animation: au-marquee 34s linear infinite; }
.au-marquee-row:hover { animation-play-state: paused; }
@keyframes au-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Marquee section styling */
.au-marqueeband { padding: clamp(22px, 3vw, 40px) 0; }
.au-marqueeband--primary { background: var(--au-primary); color: var(--au-on-primary, #fff); }
.au-marqueeband--ink { background: var(--au-ink); color: #fff; }
.au-marquee-item { font-family: var(--au-font-display); font-weight: var(--au-display-weight); letter-spacing: var(--au-display-tracking); font-size: clamp(1.3rem, 3.2vw, 2.4rem); padding: 0 clamp(20px, 3vw, 44px); display: inline-flex; align-items: center; gap: clamp(20px, 3vw, 44px); white-space: nowrap; }
.au-marquee-item::after { content: "•"; opacity: .4; }

/* ----------------------------------------------------------------------------
   RICH FOOTER — multi-column (brand + blurb + socials, shop cats, company
   links, contact + newsletter, payment bar). Overrides the minimal chrome
   footer rules above.
   ---------------------------------------------------------------------------- */
.au-ftr { background: var(--au-surface); border-top: var(--au-border); color: var(--au-muted); }
.au-ftr-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 40px; padding: 58px 0 40px; }
.au-ftr-brand { display: inline-block; font-family: var(--au-font-display); font-weight: var(--au-display-weight); color: var(--au-ink); font-size: 1.25rem; text-decoration: none; letter-spacing: var(--au-display-tracking); }
.au-ftr-brand img { max-height: 42px; width: auto; display: block; }
.au-ftr-blurb { margin: 14px 0 0; font-size: .92rem; line-height: 1.6; max-width: 34ch; }
.au-ftr-social { display: flex; gap: 10px; margin-top: 18px; }
.au-ftr-social a { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--au-ink) 8%, transparent); color: var(--au-ink); transition: background .15s ease, color .15s ease, transform .15s ease; }
.au-ftr-social a:hover { background: var(--au-primary); color: var(--au-on-primary, #fff); transform: translateY(-2px); }
.au-ftr-h { font-family: var(--au-font-display); font-weight: var(--au-display-weight); color: var(--au-ink); font-size: .95rem; margin: 0 0 14px; letter-spacing: .02em; }
.au-ftr-links, .au-ftr-contact { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.au-ftr-links a, .au-ftr-contact a { color: var(--au-muted); text-decoration: none; font-size: .92rem; }
.au-ftr-links a:hover, .au-ftr-contact a:hover { color: var(--au-primary); }
.au-ftr-contact li { font-size: .92rem; line-height: 1.5; }
.au-ftr-hours { opacity: .85; }
.au-ftr-news { display: flex; gap: 8px; margin-top: 16px; max-width: 300px; }
.au-ftr-news input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--au-line); border-radius: var(--au-btn-radius); background: var(--au-bg); color: var(--au-ink); font: inherit; font-size: .9rem; }
.au-ftr-news input:focus { outline: 2px solid var(--au-primary); outline-offset: 1px; }
.au-ftr-news button { border: 0; border-radius: var(--au-btn-radius); background: var(--au-primary); color: var(--au-on-primary, #fff); font: 700 .88rem/1 inherit; padding: 0 16px; cursor: pointer; }
.au-ftr-bar { border-top: var(--au-border); padding: 20px 0; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; font-size: .85rem; }
.au-ftr-pay { opacity: .8; letter-spacing: .02em; }
@media (max-width: 820px) { .au-ftr-cols { grid-template-columns: 1fr 1fr; gap: 32px 24px; } }
@media (max-width: 520px) { .au-ftr-cols { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------------------------
   PHASE B — new section shapes: FAQ, bento, gallery, big-image CTA.
   ---------------------------------------------------------------------------- */

/* FAQ accordion (CSS-only <details>) */
.au-faq { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.au-faq-item { border: var(--au-border); border-radius: var(--au-radius); background: var(--au-bg); overflow: hidden; }
.au-faq-item summary { list-style: none; cursor: pointer; padding: 18px 22px; font-family: var(--au-font-display); font-weight: var(--au-display-weight); font-size: 1.05rem; color: var(--au-ink); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.au-faq-item summary::-webkit-details-marker { display: none; }
.au-faq-ico { position: relative; width: 16px; height: 16px; flex: 0 0 auto; }
.au-faq-ico::before, .au-faq-ico::after { content: ""; position: absolute; background: var(--au-primary); border-radius: 2px; transition: transform .2s ease; }
.au-faq-ico::before { top: 7px; left: 0; width: 16px; height: 2px; }
.au-faq-ico::after { top: 0; left: 7px; width: 2px; height: 16px; }
.au-faq-item[open] .au-faq-ico::after { transform: scaleY(0); }
.au-faq-a { padding: 0 22px 20px; color: var(--au-muted); line-height: 1.65; }

/* Bento grid */
.au-bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(160px, auto); gap: 16px; }
.au-bento-tile { border-radius: var(--au-radius); padding: 26px; border: var(--au-border); background: var(--au-surface); position: relative; overflow: hidden; display: flex; flex-direction: column; }
.au-bento-hero { grid-column: span 2; grid-row: span 2; background: var(--au-bg); justify-content: center; }
.au-bento-hero h2 { font-family: var(--au-font-display); font-weight: var(--au-display-weight); letter-spacing: var(--au-display-tracking); font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin: 8px 0 12px; line-height: 1.1; }
.au-bento-hero p { color: var(--au-muted); line-height: 1.6; margin: 0 0 20px; }
.au-bento-hero .au-btn { align-self: flex-start; }
.au-bento-img { grid-column: span 2; min-height: 180px; background-size: cover; background-position: center; color: #fff; justify-content: flex-end; text-decoration: none; }
.au-bento-img::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,14,20,.05), rgba(10,14,20,.5)); }
.au-bento-imglabel { position: relative; z-index: 1; font-weight: 700; }
.au-bento-art { padding: 0; }
.au-bento-stat { justify-content: center; }
.au-bento-stat-v { font-family: var(--au-font-display); font-weight: var(--au-display-weight); font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1; color: var(--au-primary); }
.au-bento-stat-l { color: var(--au-muted); font-size: .9rem; margin-top: 8px; }
@media (max-width: 820px) { .au-bento { grid-template-columns: repeat(2, 1fr); } .au-bento-hero { grid-column: span 2; grid-row: span 1; } .au-bento-img { grid-column: span 2; } }
@media (max-width: 520px) { .au-bento { grid-template-columns: 1fr; } .au-bento-hero, .au-bento-img { grid-column: span 1; } }

/* Gallery / lookbook */
.au-gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 14px; }
.au-gallery-tile { position: relative; border-radius: var(--au-radius); overflow: hidden; background: var(--au-surface) center/cover no-repeat; text-decoration: none; display: flex; align-items: flex-end; color: #fff; }
.au-gallery-big { grid-column: span 2; grid-row: span 2; }
.au-gallery-tile::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,14,20,0) 45%, rgba(10,14,20,.55)); opacity: 0; transition: opacity .2s ease; }
.au-gallery-tile:hover::before { opacity: 1; }
.au-gallery-cap { position: relative; z-index: 1; padding: 16px; opacity: 0; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease; display: flex; flex-direction: column; gap: 2px; }
.au-gallery-tile:hover .au-gallery-cap { opacity: 1; transform: none; }
.au-gallery-name { font-weight: 600; }
.au-gallery-price { font-weight: 700; }
.au-gallery-tile--none { background: var(--au-surface); }
@media (max-width: 820px) { .au-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; } .au-gallery-big { grid-column: span 2; grid-row: span 1; } }
@media (max-width: 520px) { .au-gallery { grid-template-columns: 1fr; } .au-gallery-big { grid-column: span 1; } }

/* Big-image CTA */
.au-bigcta { position: relative; overflow: hidden; min-height: clamp(360px, 52vh, 560px); display: flex; align-items: center; color: #fff; }
.au-bigcta-bg, .au-bigcta .au-art { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; }
.au-bigcta-bg[data-au-parallax], .au-bigcta .au-art[data-au-parallax] { top: -12%; height: 124%; }
.au-bigcta-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10,14,20,.35), rgba(10,14,20,.6)); }
.au-bigcta-inner { position: relative; z-index: 2; max-width: 640px; }
.au-bigcta--center { justify-content: center; text-align: center; }
.au-bigcta--center .au-bigcta-inner { margin: 0 auto; }
.au-bigcta-eyebrow { color: #fff; opacity: .85; }
.au-bigcta-title { font-family: var(--au-font-display); font-weight: var(--au-display-weight); letter-spacing: var(--au-display-tracking); font-size: clamp(2rem, 4.5vw, 3.2rem); line-height: 1.05; margin: 12px 0 14px; color: #fff; }
.au-bigcta-sub { font-size: clamp(1rem, 1.4vw, 1.2rem); color: rgba(255,255,255,.9); margin: 0 0 26px; }

/* ----------------------------------------------------------------------------
   PHASE C — expanded procedural art + duotone photo treatment.
   ---------------------------------------------------------------------------- */
.au-art--glow { background:
    radial-gradient(60% 80% at 28% 18%, color-mix(in srgb, var(--au-primary) 65%, transparent), transparent 60%),
    radial-gradient(55% 75% at 86% 82%, color-mix(in srgb, var(--au-accent) 55%, transparent), transparent 60%),
    var(--au-ink); }
.au-art--geo { background-color: var(--au-ink); background-image:
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--au-primary) 26%, transparent) 0 2px, transparent 2px 22px),
    repeating-linear-gradient(45deg,  color-mix(in srgb, var(--au-accent) 18%, transparent) 0 2px, transparent 2px 22px); }
.au-art--grain::after { content: ""; position: absolute; inset: 0; opacity: .07; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* Duotone photo treatment — brand-tinted image (opt-in wrapper) */
.au-duotone { position: relative; overflow: hidden; }
.au-duotone > img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.au-duotone::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, var(--au-primary), var(--au-accent)); mix-blend-mode: color; pointer-events: none; }

/* Videos and sized pictures from the shared article editor (SL-RTE-2026-10-25). */
.au-root .sl-rte-video { position: relative; width: 100%; max-width: 760px; aspect-ratio: 16 / 9; margin: 1.4em 0; border-radius: var(--au-radius, 10px); overflow: hidden; background: #000; }
.au-root .sl-rte-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.au-root img[width$="%"] { height: auto; }