@charset "UTF-8";
/* 2026-09-07, round 2: this file used to run its OWN entirely separate --sense-* token system
   (distinct hardcoded hex values from frontend_luxury.css's --bg/--gold/etc.) for the
   homepage's .sense-* component family - the exact duplication the user asked to unify ("is it
   possible to take this chance to unify the design schema and stylesheet?"). Every --sense-*
   value below now ALIASES the shared token from frontend_luxury.css (which loads first - see
   views/layouts/header.php's <link> order - so these vars are already defined by the time this
   file runs) instead of hardcoding its own copy. This is the actual fix for "re-theming the
   site means editing two palettes that can silently drift apart," which is exactly what
   happened across every prior redesign pass in this project's history. The --sense- names
   themselves are kept (not worth renaming ~40 call sites across this file for no visual
   change), but there is now exactly ONE place a color value lives: frontend_luxury.css.
   --sense-panel-strong (dark taupe-deep card fill under light --sense-cream text) still
   supports ~4.4:1 contrast, unchanged by this refactor - it now just reads that fact from
   --taupe-deep instead of repeating it. */
:root {
    --sense-noir: var(--bg);
    --sense-panel: rgba(163, 154, 140, 0.16);
    --sense-panel-strong: var(--taupe-deep);
    --sense-stroke: rgba(58, 47, 34, 0.12);
    --sense-gold: var(--gold);
    --sense-gold-soft: rgba(201, 160, 95, 0.16);
    --sense-ivory: var(--text-main);
    --sense-mist: var(--mist);
    --sense-cream: var(--cream);
    --sense-cream-mist: rgba(240, 230, 208, 0.78);
    --sense-taupe: var(--taupe);
    --sense-taupe-deep: var(--taupe-deep);
    --sense-coral: var(--coral);
    --sense-shadow: 0 16px 40px rgba(38, 30, 20, 0.14);
    --sense-radius: 4px;
    --sense-radius-sm: 3px;
    --sense-max: 1200px;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--sense-noir);
    color: var(--sense-ivory);
}

main {
    position: relative;
}

.sense-shell {
    width: min(var(--sense-max), calc(100% - 40px));
    margin: 0 auto;
}

.sense-section {
    padding: 88px 0;
    /* 2026-09-07 round 2 (5th pass): "remove the home background patterns" - the diagonal
       hairline texture (repeating-linear-gradient, added 2026-09-03 for the old dark Atelier
       ground) removed outright, per explicit request. */
}

.sense-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.76rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--sense-gold);
}

.sense-kicker::before {
    content: '';
    width: 36px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--sense-gold));
}

.sense-heading {
    font-family: var(--font-en-serif, 'Playfair Display', serif);
    font-size: clamp(1.8rem, 4vw, 4rem);
    line-height: 0.98;
    letter-spacing: 0.03em;
    color: var(--sense-ivory);
    margin: 18px 0 20px;
}

.sense-copy {
    color: var(--sense-mist);
    font-size: 1rem;
    line-height: 1.9;
    max-width: 62ch;
}

html[lang="zh_tw"] .sense-copy,
html[lang="zh_cn"] .sense-copy {
    font-family: var(--font-tw-serif, 'Noto Serif TC', serif);
    font-size: 1.08rem;
    line-height: 2;
}

html[lang="zh_tw"] .sense-heading,
html[lang="zh_cn"] .sense-heading {
    font-family: var(--font-tw-serif, 'Noto Serif TC', serif);
    font-size: clamp(1.6rem, 3.2vw, 3.2rem);
    line-height: 1.2;
    letter-spacing: 0.01em;
}

html[lang="zh_tw"] .sense-hero-panel h2,
html[lang="zh_cn"] .sense-hero-panel h2 {
    font-family: var(--font-tw-serif, 'Noto Serif TC', serif);
    font-size: clamp(1.45rem, 2.4vw, 2.3rem) !important;
    line-height: 1.28 !important;
}

html[lang="zh_tw"] .sense-stat-label,
html[lang="zh_cn"] .sense-stat-label {
    font-size: clamp(0.8rem, 1vw, 0.95rem);
    letter-spacing: 0.02em;
    line-height: 1.6;
    text-transform: none;
}

html[lang="zh_tw"] .sense-stat-grid,
html[lang="zh_cn"] .sense-stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

html[lang="zh_tw"] .sense-stat-grid .sense-stat:nth-child(3),
html[lang="zh_cn"] .sense-stat-grid .sense-stat:nth-child(3) {
    grid-column: auto;
}

.sense-grid {
    display: grid;
    gap: 24px;
}

/* 2026-09-12: real bug found while verifying the Riviere re-theme, not introduced by it - just
   exposed by it. .sense-card/.sense-hero-inner/.sense-collection-copy's local --sense-ivory
   re-scope (below) has NEVER actually reached a plain <h1>-<h4> inside them: frontend_luxury.css
   has a sitewide `h1,h2,h3,h4{color:var(--text-main)}` rule, and an element's OWN explicit color
   rule always beats inheriting one from an ancestor, regardless of how low that rule's
   specificity is. So every heading in these three dark panels was silently rendering in
   --text-main, not --sense-ivory, this whole time - measured at ~2.7:1 against the old taupe
   panel (per the comment 6 lines down, which describes this exact risk but not that it was
   already happening), and now ~1.66:1 (functionally invisible) against the new black panel.
   Fixed with a higher-specificity override scoped to just these three containers - doesn't
   touch h1-h4 anywhere else on the page. */
.sense-hero-inner h1, .sense-hero-inner h2, .sense-hero-inner h3, .sense-hero-inner h4,
.sense-card h1, .sense-card h2, .sense-card h3, .sense-card h4,
.sense-collection-copy h1, .sense-collection-copy h2, .sense-collection-copy h3, .sense-collection-copy h4 {
    color: var(--sense-ivory);
}

.sense-card {
    /* Solid taupe-deep panel, cream text - matches the printed card's own taupe block. Every
       .sense-card use on this page (marketing card, insight cards, the editorial floating card)
       sits on the page's light cream background, so this needs its own local re-scope of
       --sense-ivory/--sense-mist the same way .sense-hero-inner does - without it, this card's
       text would default back to the page-wide DARK text color, ~2.7:1 against this background
       (measured), not the ~4.5:1 cream gets. */
    --sense-ivory: var(--sense-cream);
    --sense-mist: var(--sense-cream-mist);
    /* Redefining the custom properties above only helps descendants that reference var() again
       themselves (e.g. h1.sense-heading's own `color: var(--sense-ivory)`) - a plain <h3>/<p>
       with no color rule of its own inherits the already-COMPUTED color from the nearest
       ancestor that set one, which is body (dark, for the page's default). Re-asserting `color`
       here too makes THIS the nearest ancestor with an explicit color, so unstyled children
       correctly inherit cream instead of falling through to body's dark default. */
    color: var(--sense-ivory);
    background: var(--sense-panel-strong);
    border: 1px solid var(--sense-stroke);
    border-radius: var(--sense-radius);
    box-shadow: var(--sense-shadow);
    overflow: hidden;
    position: relative;
}

.sense-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: radial-gradient(circle at top, rgba(147,113,63,0.10), transparent 60%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.sense-card:hover::before {
    opacity: 1;
}

.sense-card-body {
    padding: 28px;
}

/* .sense-pill/.sense-button/.sense-stat are only ever used inside a taupe-deep panel context
   (.sense-hero-inner or .sense-collection-copy, both of which re-scope --sense-cream* above) -
   so their translucent overlays are cream-based directly rather than needing their own
   re-scoping. Was rgba(255,255,255,*)/#fff, tuned for Atelier's dark ground; cream (240,230,208)
   reads the same way against this taupe-deep panel. */
.sense-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    border: 1px solid rgba(240, 230, 208, 0.22);
    background: rgba(240, 230, 208, 0.08);
    color: var(--sense-cream);
    padding: 10px 16px;
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.sense-button,
.sense-button:link,
.sense-button:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 54px;
    padding: 0 28px;
    border-radius: 999px;
    border: 1px solid rgba(240, 230, 208, 0.28);
    color: var(--sense-cream);
    background: rgba(240, 230, 208, 0.08);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.78rem;
    transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.sense-button:hover {
    transform: translateY(-2px);
    border-color: var(--sense-gold);
    box-shadow: 0 16px 36px rgba(38, 30, 20, 0.28);
    color: var(--sense-cream);
}

.sense-button-primary {
    background: linear-gradient(135deg, var(--sense-gold) 0%, #e0c387 100%);
    color: #0b0b0b;
    border-color: transparent;
}

.sense-button-primary:hover {
    color: #0b0b0b;
    background: linear-gradient(135deg, #e0c387 0%, var(--sense-gold) 100%);
}

.sense-button-ghost {
    background: rgba(240, 230, 208, 0.05);
}

.sense-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
}

.sense-stat-grid .sense-stat:nth-child(3) {
    grid-column: 1 / -1;
}

.sense-stat {
    padding: 14px 16px;
    border-radius: var(--sense-radius-sm);
    background: rgba(240, 230, 208, 0.08);
    border: 1px solid rgba(240, 230, 208, 0.16);
}

.sense-stat-value {
    display: block;
    color: var(--sense-cream);
    font-family: var(--font-en-serif, 'Playfair Display', serif);
    font-size: clamp(1.3rem, 2vw, 2rem);
}

.sense-stat-label {
    display: block;
    margin-top: 6px;
    color: var(--sense-mist);
    font-size: clamp(0.64rem, 0.75vw, 0.78rem);
    line-height: 1.45;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sense-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

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

/* 2026-09-07: the hero no longer puts text over the photo at all (user's explicit request) -
   the photo is now a contained banner with nothing overlaid on it, and every text element
   (kicker/heading/subtitle/buttons + the "Total Solution" aside) lives in a solid taupe-deep
   panel below it. See home.php for the matching markup change (.sense-hero-media is now a
   plain <img>, not an absolutely-positioned full-bleed background). */
.sense-hero {
    position: relative;
    padding: 40px 0 0;
}

.sense-hero-media-wrap {
    width: min(var(--sense-max), calc(100% - 40px));
    margin: 0 auto;
    border-radius: var(--sense-radius);
    overflow: hidden;
    box-shadow: var(--sense-shadow);
}

.sense-hero-media {
    display: block;
    width: 100%;
    height: clamp(260px, 40vw, 460px);
    object-fit: cover;
    object-position: center;
    /* 2026-09-07, round 2: "provide an animated image... but make sure it's very smooth and
       fluid and small in size" - a real furniture-factory video needs either the user's own
       footage or a licensed stock clip, neither of which this pass can source or fabricate on
       its own, so this is a placeholder motion treatment instead: a slow Ken Burns zoom on the
       existing hero photo. transform-only (GPU-accelerated, no layout thrash) and zero added
       network payload - genuinely "smooth and small" - so it can be swapped for a <video>
       element later without touching anything else here. animation-play-state respects
       reduced-motion below. */
    animation: sense-hero-kenburns 22s ease-in-out infinite alternate;
}

@keyframes sense-hero-kenburns {
    from { transform: scale(1); }
    to   { transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
    .sense-hero-media { animation: none; }
}

.sense-hero-inner {
    position: relative;
    z-index: 2;
    width: min(var(--sense-max), calc(100% - 40px));
    margin: 32px auto 0;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 28px;
    align-items: start;
    background: var(--sense-taupe-deep);
    border-radius: var(--sense-radius);
    padding: clamp(28px, 4vw, 52px);
    box-shadow: var(--sense-shadow);
    /* Solid panel, not a photo - cream text at ~4.5:1 against --sense-taupe-deep (measured).
       See .sense-card above for why `color` is re-asserted here, not just the custom property. */
    --sense-ivory: var(--sense-cream);
    --sense-mist: var(--sense-cream-mist);
    color: var(--sense-ivory);
}

.sense-hero-inner > * {
    min-width: 0;
}

.sense-hero-panel {
    padding: clamp(16px, 2.5vw, 28px);
    border-radius: var(--sense-radius);
    background: rgba(240, 230, 208, 0.08);
    border: 1px solid rgba(240, 230, 208, 0.18);
}

.sense-hero-inner > .sense-hero-panel {
    max-width: 560px;
    width: 100%;
    justify-self: end;
}

.sense-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px;
}

.sense-hero-side-media {
    margin-top: 32px;
    border-radius: var(--sense-radius);
    overflow: hidden;
    max-height: 220px;
}

.sense-hero-side-media img {
    display: block;
    width: 100%;
    height: 220px;
    object-fit: cover;
    object-position: center;
}

.sense-collection-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 24px;
}

/* 2026-09-07: was an absolutely-positioned photo with a bottom dark-scrim gradient and the
   copy floated on top of it - the exact "text on the image" pattern the user asked to remove.
   Now a plain top-image/bottom-panel card: the photo is a normal flow element with a fixed
   height, the copy is a normal flow element below it on a solid taupe-deep panel. No overlay,
   no scrim, nothing for legibility to depend on. */
.sense-collection-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--sense-radius);
    overflow: hidden;
    border: 1px solid var(--sense-stroke);
    box-shadow: var(--sense-shadow);
    background: var(--sense-taupe-deep);
}

.sense-collection-card img {
    display: block;
    width: 100%;
    height: 220px;
    object-fit: cover;
    object-position: center;
    transition: transform 1.4s ease;
}

.sense-collection-card:hover img {
    transform: scale(1.08);
}

.sense-collection-copy {
    --sense-ivory: var(--sense-cream);
    --sense-mist: var(--sense-cream-mist);
    color: var(--sense-ivory);
    padding: 28px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.sense-collection-copy h3 {
    font-size: clamp(1.4rem, 2.5vw, 2.3rem);
    margin-bottom: 10px;
}

.sense-collection-copy p {
    color: var(--sense-mist);
    max-width: 34ch;
}

/* 2026-09-07, round 2: was span 7 / span 5 - a deliberate "one large + two small" mosaic that
   only tiles cleanly when the number of cards divides evenly into that pattern. With exactly 3
   collections (Furniture/Lighting/Accessories), 7+5 filled row one and the third card sat alone
   on row two with 7 of 12 columns empty beside it - reported as "too much space left, looks
   incomplete." Equal thirds fill one row completely regardless of card count changing later. */
.sense-mosaic-large,
.sense-mosaic-small {
    grid-column: span 4;
}

.sense-editorial-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 28px;
    align-items: stretch;
}

.sense-editorial-visual {
    min-height: 430px;
    border-radius: var(--sense-radius);
    overflow: hidden;
    position: relative;
    border: 1px solid var(--sense-stroke);
}

.sense-editorial-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sense-editorial-floating {
    position: absolute;
    right: 24px;
    bottom: 24px;
    max-width: 280px;
}

.sense-detail-list {
    display: grid;
    gap: 16px;
    margin-top: 34px;
}

.sense-detail-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: start;
    padding: 18px 0;
    border-top: 1px solid var(--sense-stroke);
}

.sense-detail-item i {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--sense-gold-soft);
    color: var(--sense-gold);
}

/* 2026-09-07 round 2 (5th pass): "remove the home background patterns" - the radial gold glow
   wash removed too, same reasoning as the diagonal texture and body noise grain above. */
.sense-section.luxe-cards {
    position: relative;
}

/* footer rules deferred to frontend_luxury.css */
.sense-footer { /* intentionally minimal - layout in frontend_luxury.css */ }

/* Legacy footer classes - no longer used in HTML, kept for safety */
.sense-footer-grid,
.sense-footer-panel,
.sense-footer-brandpanel,
.sense-footer-kicker,
.sense-footer-title,
.sense-footer-lead,
.sense-footer-line,
.sense-footer-menu-dropdown,
.sense-footer-menu-toggle,
.sense-socials,
.sense-footer-button,
.sense-footer-dropdown-menu { display: none; }

/* .sense-fineprint deferred to frontend_luxury.css */

@media (max-width: 1199.98px) {
    .sense-hero-inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .sense-editorial-grid {
        grid-template-columns: 1fr;
    }

    .sense-mosaic-large,
    .sense-mosaic-small {
        grid-column: span 12;
    }
}

@media (max-width: 1024.98px) {
    .sense-hero-inner {
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 20px;
    }

    .sense-hero-inner > .sense-hero-panel {
        max-width: none;
        justify-self: stretch;
    }

    .sense-stat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }

    .sense-stat-grid .sense-stat:nth-child(3) {
        grid-column: auto;
    }

    .sense-stat {
        padding: 18px 16px;
    }
}

@media (max-width: 900px) {
    .sense-mosaic-large,
    .sense-mosaic-small {
        grid-column: span 12;
    }
}

@media (max-width: 767.98px) {
    .sense-footer {
        margin-top: 30px;
        padding: 4px 0;
    }

    .sense-fineprint {
        padding: 4px 12px;
        font-size: 0.64rem;
        white-space: normal;
    }

    .sense-section {
        padding: 68px 0;
    }

    .sense-shell,
    .sense-hero-inner {
        width: min(var(--sense-max), calc(100% - 24px));
    }

    .sense-stat-grid {
        grid-template-columns: 1fr;
    }

    .sense-hero {
        padding-top: 20px;
    }

    .sense-hero-media {
        height: 220px;
    }

    .sense-heading {
        font-size: clamp(1.9rem, 9vw, 3rem);
    }

    .sense-hero-panel,
    .sense-card-body,
    .sense-collection-copy {
        padding: 22px;
    }

    .sense-collection-card img {
        height: 180px;
    }

    .sense-editorial-visual {
        min-height: 340px;
    }

    .sense-fineprint {
        flex-direction: column;
    }
}