@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;
}

.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;
    }
}