/* Interior visual system — additive only; no content or functionality is hidden. */
:root {
    --en-ink: #080506;
    --en-panel: rgba(20, 10, 13, .82);
    --en-panel-strong: rgba(27, 12, 17, .94);
    --en-gold: #d8bb68;
    --en-gold-soft: rgba(216, 187, 104, .16);
    --en-maroon: #831a34;
    --en-line: rgba(216, 187, 104, .18);
    --en-shadow: 0 24px 70px rgba(0, 0, 0, .34);
}

body.loaded {
    background:
        radial-gradient(circle at 12% 8%, rgba(122, 18, 43, .12), transparent 31rem),
        radial-gradient(circle at 88% 46%, rgba(216, 187, 104, .045), transparent 34rem),
        #080506;
}

#nav {
    border: 1px solid rgba(216,187,104,.16) !important;
    background: linear-gradient(105deg, rgba(12,7,9,.94), rgba(21,10,14,.88)) !important;
    box-shadow: 0 18px 55px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.025) !important;
    backdrop-filter: blur(22px) saturate(1.12) !important;
}

#nav::after {
    content: "";
    position: absolute;
    left: 3%;
    right: 3%;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(216,187,104,.46), transparent);
    pointer-events: none;
}

#nav .nb {
    border-color: rgba(216,187,104,.18) !important;
    background: linear-gradient(135deg, rgba(255,255,255,.035), rgba(216,187,104,.025)) !important;
}

#nav .nl > a,
#nav .corp-menu-button {
    position: relative;
    font-weight: 680 !important;
    letter-spacing: .015em;
}

#nav .nl > a::after {
    content: "";
    position: absolute;
    left: 22%;
    right: 22%;
    bottom: -8px;
    height: 1px;
    background: var(--en-gold);
    transform: scaleX(0);
    transition: transform .22s ease;
}

#nav .nl > a:hover::after { transform: scaleX(1); }

.hero {
    isolation: isolate;
    background:
        radial-gradient(circle at 70% 42%, rgba(123,20,45,.15), transparent 32rem),
        linear-gradient(150deg, rgba(6,3,4,.2), rgba(18,7,11,.12)) !important;
}

.hero .ctn { position: relative; z-index: 3; }

.hero .ctn::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 9% auto 8% -3%;
    width: 48%;
    border: 1px solid rgba(216,187,104,.08);
    border-radius: 30px;
    background: linear-gradient(145deg, rgba(255,255,255,.018), transparent 60%);
    pointer-events: none;
}

.hero h1,
.hero .hero-title {
    filter: drop-shadow(0 18px 32px rgba(0,0,0,.42));
}

.hero .btn {
    min-height: 54px;
    border-radius: 999px !important;
    font-weight: 760 !important;
    letter-spacing: .015em;
    box-shadow: 0 15px 36px rgba(0,0,0,.3) !important;
}

.hero .btn-p {
    border: 1px solid rgba(255,255,255,.08) !important;
    background: linear-gradient(115deg, #9c173a, #681128) !important;
}

.hero .btn-o,
.hero .btn-fb {
    color: #f6e8bc !important;
    border: 1px solid rgba(216,187,104,.28) !important;
    background: linear-gradient(115deg, rgba(38,17,22,.94), rgba(18,9,12,.94)) !important;
}

.hero .btn:hover { transform: translateY(-3px) !important; }

.hero .btn-fb:hover,
.hero .btn-o:hover {
    border-color: rgba(216,187,104,.58) !important;
    box-shadow: 0 18px 44px rgba(0,0,0,.38), 0 0 28px rgba(216,187,104,.08) !important;
}

.hero .stats,
.hero [class*="stat"] {
    backdrop-filter: blur(14px);
}

.sec {
    position: relative;
    border-top: 1px solid rgba(216,187,104,.07);
}

.sec-a {
    background:
        linear-gradient(180deg, rgba(255,255,255,.012), transparent 20rem),
        rgba(12,6,8,.46) !important;
}

.sh h2,
.sh .st,
.se {
    text-wrap: balance;
}

.pg { gap: clamp(18px, 2vw, 28px) !important; }

.pc {
    border-color: rgba(216,187,104,.13) !important;
    background: linear-gradient(155deg, rgba(29,14,19,.94), rgba(12,7,9,.98)) !important;
    box-shadow: 0 18px 48px rgba(0,0,0,.26), inset 0 1px rgba(255,255,255,.018) !important;
    transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease !important;
}

.pc:hover {
    transform: translateY(-7px) !important;
    border-color: rgba(216,187,104,.38) !important;
    box-shadow: 0 28px 70px rgba(0,0,0,.4), 0 0 30px rgba(216,187,104,.055) !important;
}

.pc .pimg-wrap {
    background:
        radial-gradient(circle at 50% 45%, rgba(216,187,104,.09), transparent 52%),
        rgba(8,5,6,.58) !important;
}

/* Three-card mascot experiment: visible on hover without covering the product. */
.pc .pimg-wrap > img.card-mascot-guide {
    position: absolute !important;
    z-index: 5 !important;
    right: 8px !important;
    bottom: 7px !important;
    width: clamp(54px, 28%, 78px) !important;
    height: auto !important;
    aspect-ratio: 1 !important;
    object-fit: contain !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    opacity: .18;
    transform: translateY(10px) scale(.9) !important;
    filter: drop-shadow(0 10px 14px rgba(0,0,0,.5)) saturate(.88) !important;
    pointer-events: none;
    transition: opacity .28s ease, transform .36s cubic-bezier(.2,.75,.2,1) !important;
}
.pc:hover .pimg-wrap > img.card-mascot-guide,
.pc:focus-within .pimg-wrap > img.card-mascot-guide {
    opacity: .94;
    transform: translateY(0) scale(1) !important;
}

/* Refined trial: brand curator badge below the image, replacing sticker overlays. */
.engineer-pick {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: 38px minmax(0,1fr) 22px;
    align-items: center;
    gap: 9px;
    margin: -2px 13px 13px;
    padding: 8px 10px 8px 8px;
    border: 1px solid rgba(216,184,93,.25);
    border-radius: 13px;
    background: linear-gradient(110deg, rgba(214,180,86,.11), rgba(255,255,255,.025));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
    overflow: hidden;
    transition: border-color .3s ease, background .3s ease, transform .35s cubic-bezier(.2,.75,.2,1);
}
.engineer-pick::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(100deg, transparent 20%, rgba(255,231,164,.1) 45%, transparent 70%);
    transform: translateX(-110%);
    transition: transform .65s ease;
}
.pc:hover .engineer-pick {
    transform: translateY(-3px);
    border-color: rgba(224,193,102,.48);
    background: linear-gradient(110deg, rgba(214,180,86,.17), rgba(255,255,255,.04));
}
.pc:hover .engineer-pick::after { transform: translateX(110%); }
.engineer-pick__avatar {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(216,184,93,.4);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 32%, #5a1c2b, #10080b 72%);
    box-shadow: 0 8px 18px rgba(0,0,0,.34);
    overflow: hidden;
}
.pc .engineer-pick__avatar > img {
    width: 34px !important;
    height: 34px !important;
    aspect-ratio: 1 !important;
    object-fit: contain !important;
    transform: none !important;
    filter: none !important;
}
.engineer-pick__copy { min-width: 0; }
.engineer-pick__copy small {
    display: block;
    margin-bottom: 3px;
    color: #d8b95f;
    font: 850 7px/1 ui-monospace, Consolas, monospace;
    letter-spacing: .12em;
}
.engineer-pick__copy b {
    display: block;
    overflow: hidden;
    color: rgba(248,241,232,.86);
    font-size: 10px;
    line-height: 1.25;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.engineer-pick > i {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: #17100b;
    background: #d5b65d;
    font-size: 10px;
    font-style: normal;
    font-weight: 900;
}

/* V8: premium expanding mascot seal in the image's lower-right corner. */
.pc .pimg-wrap .engineer-pick {
    position: absolute;
    z-index: 8;
    right: 10px;
    bottom: 10px;
    display: flex;
    grid-template-columns: none;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    width: 58px;
    height: 58px;
    margin: 0;
    padding: 5px;
    border: 1px solid rgba(235,204,112,.62);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(28,9,15,.96), rgba(83,20,38,.94));
    box-shadow: 0 16px 34px rgba(0,0,0,.62), 0 0 0 5px rgba(215,181,84,.06), inset 0 1px 0 rgba(255,255,255,.08);
    overflow: visible;
    transition: width .42s cubic-bezier(.2,.8,.2,1), border-color .3s ease, transform .35s ease;
}
.pc .pimg-wrap .engineer-pick::before {
    content: "EN PICK";
    position: absolute;
    right: -5px;
    top: -8px;
    padding: 4px 6px;
    border-radius: 999px;
    color: #1a0d0e;
    background: linear-gradient(90deg,#efd477,#b8862f);
    box-shadow: 0 5px 12px rgba(0,0,0,.34);
    font: 900 6px/1 ui-monospace, Consolas, monospace;
    letter-spacing: .08em;
    white-space: nowrap;
}
.pc .pimg-wrap .engineer-pick::after {
    border-radius: 999px;
}
.pc .pimg-wrap .engineer-pick__avatar {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border-color: rgba(239,209,121,.55);
}
.pc .pimg-wrap .engineer-pick__avatar > img {
    width: 42px !important;
    height: 42px !important;
}
.pc .pimg-wrap .engineer-pick__copy {
    order: -1;
    width: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateX(10px);
    white-space: nowrap;
    transition: width .38s ease, opacity .24s ease .05s, transform .36s ease;
}
.pc .pimg-wrap .engineer-pick > i { display: none; }
.pc:hover .pimg-wrap .engineer-pick,
.pc:focus-within .pimg-wrap .engineer-pick {
    width: 174px;
    transform: translateY(-3px);
    border-color: rgba(244,214,126,.88);
}
.pc:hover .pimg-wrap .engineer-pick__copy,
.pc:focus-within .pimg-wrap .engineer-pick__copy {
    width: 104px;
    opacity: 1;
    transform: translateX(0);
}
.pc .pimg-wrap .engineer-pick__copy small { font-size: 6px; }
.pc .pimg-wrap .engineer-pick__copy b { font-size: 9px; }
@media (hover: none) {
    .pc .pimg-wrap .engineer-pick { width: 58px; transform: none; }
    .pc .pimg-wrap .engineer-pick__copy { display: none; }
}

/* V9: mascot becomes a subtle backdrop behind the actual product. */
.pc .pimg-wrap { isolation: isolate; }
.pc .pimg-wrap > img.blur-up {
    position: relative !important;
    z-index: 3 !important;
}
.pc .pimg-wrap > img.product-mascot-backdrop {
    position: absolute !important;
    z-index: 1 !important;
    right: -5% !important;
    bottom: -7% !important;
    width: 78% !important;
    height: 78% !important;
    aspect-ratio: 1 !important;
    object-fit: contain !important;
    object-position: right bottom !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    opacity: .14;
    transform: scale(.96) !important;
    filter: grayscale(.3) sepia(.18) saturate(.8) drop-shadow(0 0 24px rgba(210,176,78,.16)) !important;
    pointer-events: none;
    transition: opacity .38s ease, transform .55s cubic-bezier(.2,.75,.2,1), filter .4s ease !important;
}
.pc .pimg-wrap::after {
    content: "EN ENGINEER PICK";
    position: absolute;
    z-index: 4;
    right: 10px;
    bottom: 9px;
    padding: 5px 7px;
    border: 1px solid rgba(218,185,91,.25);
    border-radius: 999px;
    color: rgba(226,199,117,.72);
    background: rgba(12,7,8,.52);
    font: 800 6px/1 ui-monospace, Consolas, monospace;
    letter-spacing: .1em;
    opacity: 0;
    transform: translateY(5px);
    transition: opacity .3s ease, transform .35s ease;
    pointer-events: none;
}
.pc:has(.product-mascot-backdrop):hover .pimg-wrap > img.product-mascot-backdrop,
.pc:has(.product-mascot-backdrop):focus-within .pimg-wrap > img.product-mascot-backdrop {
    opacity: .3;
    transform: scale(1.04) translate(-2%, -1%) !important;
    filter: grayscale(.1) sepia(.12) saturate(.95) drop-shadow(0 0 30px rgba(210,176,78,.24)) !important;
}

/* V11: mascot physically sits behind the whole card and peeks over its edge. */
.pg { padding-top: 76px; }
.pc:has(.card-mascot-behind) {
    overflow: visible !important;
    isolation: isolate;
}
.pc > img.card-mascot-behind {
    position: absolute !important;
    z-index: -1 !important;
    top: -88px !important;
    right: 14px !important;
    width: 150px !important;
    height: 150px !important;
    aspect-ratio: 1 !important;
    object-fit: contain !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    opacity: .88;
    transform: rotate(2deg) translateY(12px) !important;
    filter: saturate(.82) brightness(.82) drop-shadow(0 18px 24px rgba(0,0,0,.65)) !important;
    pointer-events: none;
    transition: transform .48s cubic-bezier(.2,.8,.2,1), opacity .32s ease, filter .35s ease !important;
}
.pc:has(.card-mascot-behind)::after {
    content: "";
    position: absolute;
    z-index: -2;
    top: -54px;
    right: 16px;
    width: 138px;
    height: 80px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(126,26,48,.42), transparent 70%);
    filter: blur(18px);
    pointer-events: none;
}
.pc:has(.card-mascot-behind):hover > img.card-mascot-behind,
.pc:has(.card-mascot-behind):focus-within > img.card-mascot-behind {
    opacity: 1;
    transform: rotate(-2deg) translateY(-5px) !important;
    filter: saturate(.95) brightness(.96) drop-shadow(0 22px 30px rgba(0,0,0,.72)) !important;
}
@media (max-width: 680px) {
    .pg { padding-top: 58px; }
    .pc > img.card-mascot-behind {
        top: -66px !important;
        right: 12px !important;
        width: 118px !important;
        height: 118px !important;
    }
}

/* V19: real art-direction shift — contrasting chapters instead of one repeated dark skin. */
#why {
    color: #160d0f !important;
    background:
      linear-gradient(90deg,rgba(79,52,38,.065) 1px,transparent 1px),
      #e8e1d6 !important;
    background-size: 92px 100%,auto !important;
}
#why::before { -webkit-text-stroke-color: rgba(77,27,38,.09); }
#why::after { color: rgba(91,25,41,.58); }
#why .sh h2 span { color: #171011 !important; }
#why .sh h2 em { color: #7b1730 !important; }
#why .sh p { color: #655a54 !important; }
#why .sh .se { color: #70162c !important; background: rgba(255,255,255,.4); border-color: rgba(106,22,44,.18); }
#why .mascot-stage::before {
    border-color: rgba(105,25,44,.18);
    background:
      linear-gradient(90deg,transparent 49.7%,rgba(104,24,43,.12) 50%,transparent 50.3%),
      linear-gradient(transparent 49.7%,rgba(104,24,43,.1) 50%,transparent 50.3%),
      radial-gradient(circle,rgba(129,24,49,.12),transparent 70%);
}
#why .mascot-stage::after { background: rgba(244,239,231,.8); color:#74172e; border-color:rgba(112,23,45,.2); }
#why .wc {
    color: #f7efe8 !important;
    background: #1a0d11 !important;
    border-color: rgba(112,23,45,.26) !important;
    box-shadow: 0 24px 70px rgba(57,26,25,.16) !important;
}
#why .wc:nth-child(2) { background: #781831 !important; }
#why .wc h4 { color: #f0d170 !important; }
#why .wc p { color: rgba(255,246,239,.66) !important; }

#reviews {
    color: #14100f !important;
    background:
      radial-gradient(circle at 82% 26%,rgba(188,145,47,.16),transparent 25%),
      #f2eee7 !important;
}
#reviews::before { -webkit-text-stroke-color: rgba(24,16,15,.065); }
#reviews::after { color: rgba(105,68,28,.58); }
#reviews .sh h2 span { color:#151111 !important; }
#reviews .sh h2 em { color:#8b1834 !important; }
#reviews .sh p { color:#6b625c !important; }
#reviews .sh .se { color:#78172e !important; background:rgba(255,255,255,.5); border-color:rgba(110,22,44,.16); }
#reviews .mascot-stage::before { border-color:rgba(111,22,43,.16); background:radial-gradient(circle,rgba(126,23,47,.12),transparent 68%); }
#reviews .mascot-stage::after { background:#181012; }
#reviews .rc {
    color:#f5eee8 !important;
    background:#171011 !important;
    border-color:rgba(110,22,43,.2) !important;
    box-shadow:0 28px 80px rgba(42,26,22,.18) !important;
}
#reviews .rc:nth-child(2) { background:#7a1831 !important; }
#reviews .rt { color:#f8f0e9 !important; }
#reviews .ra { color:#e1c469 !important; }

#faq {
    background:
      linear-gradient(120deg,rgba(243,204,95,.06),transparent 42%),
      #6f152c !important;
}
#faq::before { -webkit-text-stroke-color:rgba(255,231,179,.07); }
#faq::after { color:rgba(255,226,147,.65); }
#faq .sh h2 span { color:#fff6ed !important; }
#faq .sh h2 em { color:#edcf76 !important; }
#faq .sh .se { color:#f0d173 !important; background:rgba(20,8,12,.22); }
#faq .mascot-stage::before { border-color:rgba(255,225,144,.16); background:radial-gradient(circle,rgba(11,5,7,.28),transparent 68%); }
#faq .fq {
    background:rgba(27,8,14,.68) !important;
    border-color:rgba(238,207,118,.2) !important;
    box-shadow:0 24px 60px rgba(28,5,12,.2) !important;
}
#faq .fq:hover { background:rgba(20,7,11,.82) !important; }

#blog {
    color:#171211 !important;
    background:#ded8ce !important;
}
#blog::before { -webkit-text-stroke-color:rgba(85,38,42,.075); }
#blog::after { color:rgba(100,34,46,.58); }
#blog .sh h2 span { color:#171211 !important; }
#blog .sh h2 em { color:#78172f !important; }
#blog .sh p { color:#685e57 !important; }
#blog .sh .se { color:#74162d !important; background:rgba(255,255,255,.4); border-color:rgba(111,23,45,.15); }
#blog .mascot-stage::before { border-color:rgba(112,25,45,.15); background:radial-gradient(circle,rgba(124,23,47,.12),transparent 68%); }
#blog .mascot-stage::after { background:#171012; }
#blog .blog-profile {
    color:#f6eee7 !important;
    background:#171011 !important;
    border-color:rgba(112,23,44,.22) !important;
}
#blog .blog-profile-card { background:rgba(255,255,255,.025) !important; }
#blog .blog-card {
    color:#f8f1ea !important;
    background:#171011 !important;
    border-color:rgba(112,23,44,.2) !important;
    box-shadow:0 28px 75px rgba(48,31,28,.17) !important;
}
#blog .blog-card:nth-child(2), #blog .blog-card:nth-child(5) { background:#77172f !important; }
#blog .blog-card h3, #blog .blog-card h3 a { color:#fff5ed !important; }
#blog .blog-card p { color:rgba(255,244,235,.64) !important; }
#blog .blog-card-date, #blog .blog-read-more { color:#e4c66f !important; }
#blog .blog-cta-btn { background:#74162d !important; color:#fff4ec !important; border-color:#74162d !important; }

.ctab {
    color:#180f10 !important;
    background:
      radial-gradient(circle at 84% 40%,rgba(119,22,47,.17),transparent 28%),
      #e4c568 !important;
    border-color:#e4c568 !important;
}
.ctab h3 { color:#170e10 !important; }
.ctab p { color:#594626 !important; }
.ctab::before { color:#76172f !important; border-color:rgba(117,22,47,.26); }
.ctab .btn-p { background:#75172f !important; color:#fff !important; }
.ctab .btn-fb { border-color:rgba(24,13,15,.28) !important; color:#1b1012 !important; }
.ctab .nl-input { background:rgba(255,255,255,.48) !important; color:#171010 !important; border-color:rgba(23,13,15,.18) !important; }
.ctab .nl-submit { background:#171011 !important; color:#f1d071 !important; }

@media (max-width:760px) {
    #why .wc:nth-child(2), #reviews .rc:nth-child(2) { translate:none; }
}

/* V20: original EN engineering world — blueprint narrative created for this brand. */
.engineering-manifesto {
    position: relative;
    min-height: min(78vw,880px);
    display: grid;
    align-items: center;
    overflow: hidden;
    padding: clamp(70px,9vw,130px) max(24px,7vw);
    color:#f4ede6;
    background:
      linear-gradient(90deg,rgba(7,5,6,.14),rgba(7,5,6,.05) 48%,rgba(7,5,6,.18)),
      url('images/en-engineering-blueprint-world-v1.png') center/cover no-repeat;
    border-block:1px solid rgba(221,187,90,.18);
}
.engineering-manifesto::before {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(8,5,6,.82) 0%,rgba(8,5,6,.24) 48%,rgba(8,5,6,.08) 100%);
    pointer-events:none;
}
.em-grid { position:relative; z-index:1; width:min(1180px,100%); margin:auto; }
.em-code {
    margin-bottom:clamp(28px,5vw,70px);
    color:#e1c166;
    font:700 9px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
    letter-spacing:.2em;
}
.em-grid h2 {
    max-width:780px;
    margin:0;
    font:900 clamp(58px,8.3vw,126px)/.78 "Arial Black",sans-serif;
    letter-spacing:-.075em;
    text-transform:uppercase;
    text-shadow:0 28px 80px rgba(0,0,0,.6);
}
.em-grid h2 em { color:transparent; -webkit-text-stroke:1px #e1c36d; font-style:normal; }
.em-grid h2 span { color:#d9b84f; }
.em-grid p {
    width:min(520px,100%);
    margin:clamp(30px,5vw,68px) 0 0 auto;
    padding-left:24px;
    border-left:2px solid #d9b84f;
    color:rgba(255,244,235,.72);
    font-size:clamp(14px,1.4vw,19px);
    line-height:1.75;
}
.em-parts {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1px;
    margin-top:clamp(42px,7vw,90px);
    border:1px solid rgba(220,186,89,.18);
    background:rgba(220,186,89,.18);
}
.em-parts span {
    padding:16px;
    color:#d8bc6d;
    background:rgba(9,6,7,.74);
    backdrop-filter:blur(10px);
    font:700 8px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
    letter-spacing:.13em;
}
#products { position:relative; }
#products::before {
    content:"CATALOGUE / ENGINEERED OBJECTS / EN-01—09";
    position:absolute;
    top:42px; right:5%;
    color:rgba(221,189,98,.35);
    font:700 8px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
    letter-spacing:.18em;
}
@media(max-width:760px){
    .engineering-manifesto { min-height:780px; background-position:44% center; }
    .engineering-manifesto::before { background:rgba(8,5,6,.66); }
    .em-grid h2 { font-size:clamp(48px,15vw,76px); }
    .em-grid p { margin-left:0; }
    .em-parts { grid-template-columns:1fr 1fr; }
}

/* V13: mascot treatment on every product; editorial status badges removed. */
.pg {
    column-gap: clamp(18px, 2.2vw, 28px) !important;
    row-gap: 100px !important;
}
.pc > .pbadge { display: none !important; }
@media (max-width: 680px) {
    .pg { row-gap: 78px !important; }
}

/* V14: each trust/content section gets a distinct mascot role. */
.mascot-stage { position: relative; }
.mascot-stage > .sh {
    position: relative;
    z-index: 3;
    max-width: min(72%, 760px);
}
.section-mascot {
    position: absolute;
    z-index: 2;
    top: -54px;
    right: clamp(0px, 3vw, 48px);
    width: clamp(190px, 22vw, 310px);
    height: clamp(190px, 22vw, 310px);
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(0 30px 42px rgba(0,0,0,.48));
    transform-origin: 50% 100%;
    animation: sectionMascotBreathe 5.4s ease-in-out infinite;
}
.mascot-stage::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: -10px;
    right: 0;
    width: min(32vw, 380px);
    aspect-ratio: 1;
    border: 1px solid rgba(216,184,94,.11);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(121,21,44,.22), transparent 68%);
}
.mascot-stage--reviews .section-mascot { top: -72px; right: 5%; transform: rotate(2deg); }
.mascot-stage--faq .section-mascot { right: auto; left: 1%; top: 82px; width: clamp(180px,20vw,270px); }
.mascot-stage--faq > .sh,
.mascot-stage--faq .fg { margin-left: clamp(170px,22vw,300px); }
.mascot-stage--blog .section-mascot { top: -36px; right: 1%; width: clamp(180px,20vw,275px); }
.mascot-stage--blog > .sh { padding-right: clamp(160px,21vw,285px); max-width: 100%; }
@keyframes sectionMascotBreathe {
    0%,100% { translate: 0 0; }
    50% { translate: 0 -8px; }
}

.ctab { position: relative; overflow: visible !important; padding-right: clamp(210px,27vw,350px) !important; }
.cta-mascot {
    position: absolute;
    z-index: 2;
    right: clamp(18px,5vw,78px);
    bottom: -8px;
    width: clamp(190px,24vw,320px);
    height: clamp(190px,24vw,320px);
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(0 28px 40px rgba(0,0,0,.55));
}
@media (max-width: 760px) {
    .mascot-stage > .sh { max-width: 100%; padding-right: 0; }
    .section-mascot {
        position: relative;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        display: block;
        width: min(58vw,220px) !important;
        height: auto !important;
        margin: -24px auto 12px;
    }
    .mascot-stage--faq .fg { margin-left: 0; }
    .mascot-stage::before { display: none; }
    .ctab { padding-right: 18px !important; padding-bottom: 220px !important; }
    .cta-mascot { right: 50%; bottom: -6px; width: 220px; height: 220px; transform: translateX(50%); }
}

/* V16: editorial engineering chapters with stronger visual hierarchy. */
.mascot-chapter {
    position: relative;
    isolation: isolate;
    overflow: clip;
    border-top: 1px solid rgba(215,182,88,.08);
}
.mascot-chapter::before {
    content: attr(data-word);
    position: absolute;
    z-index: -1;
    top: clamp(90px,10vw,150px);
    left: 50%;
    translate: -50% 0;
    color: transparent;
    -webkit-text-stroke: 1px rgba(224,194,107,.055);
    font: 900 clamp(72px,13vw,190px)/.8 "Arial Black", sans-serif;
    letter-spacing: -.065em;
    white-space: nowrap;
    pointer-events: none;
}
.mascot-chapter::after {
    content: "0" attr(data-chapter) "  /  EN ENTERPRISE SYSTEM";
    position: absolute;
    z-index: 4;
    top: 34px;
    left: max(24px,calc((100% - 1180px)/2));
    color: rgba(226,199,113,.58);
    font: 700 9px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
    letter-spacing: .18em;
    pointer-events: none;
}
.mascot-floor {
    position: absolute;
    z-index: 1;
    top: 282px;
    right: clamp(14px,3vw,48px);
    width: clamp(180px,24vw,320px);
    height: 28px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(223,185,79,.28), rgba(108,18,40,.2) 46%, transparent 72%);
    filter: blur(6px);
    pointer-events: none;
}
#faq .mascot-floor { right: auto; left: clamp(14px,3vw,48px); top: 365px; }
#blog .mascot-floor { top: 250px; }
.mascot-stage > .sh .se {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 12px;
    border: 1px solid rgba(218,185,92,.18);
    border-radius: 999px;
    background: rgba(18,9,11,.44);
    backdrop-filter: blur(12px);
}
.mascot-stage > .sh h2 {
    text-wrap: balance;
    text-shadow: 0 18px 55px rgba(0,0,0,.52);
}
.mascot-stage > .sh h2::after {
    content: "";
    display: block;
    width: 74px;
    height: 2px;
    margin: 18px auto 0;
    background: linear-gradient(90deg,#e2c369,transparent);
    box-shadow: 0 0 18px rgba(226,195,105,.38);
}
.mascot-stage .wc,
.mascot-stage .rc,
.mascot-stage .fq,
.mascot-stage .blog-profile-card,
.mascot-stage .blog-card { backdrop-filter: blur(14px); }
.mascot-stage .wc::before,
.mascot-stage .rc::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 42px;
    height: 2px;
    background: linear-gradient(90deg,#dfbd60,transparent);
}
.mascot-stage .wc,
.mascot-stage .rc { position: relative; overflow: hidden; }
.mascot-stage--reviews .rc:nth-child(2) { translate: 0 -14px; }
.mascot-stage--why .wc:nth-child(2) { translate: 0 14px; }
.section-mascot { animation: sectionMascotBreathe 5.4s ease-in-out infinite, mascotGlowPulse 4s ease-in-out infinite; }
@keyframes mascotGlowPulse {
    0%,100% { filter: drop-shadow(0 30px 42px rgba(0,0,0,.55)) drop-shadow(0 0 12px rgba(212,174,76,.1)); }
    50% { filter: drop-shadow(0 34px 48px rgba(0,0,0,.62)) drop-shadow(0 0 27px rgba(212,174,76,.2)); }
}
@media (max-width: 760px) {
    .mascot-chapter::before { top: 120px; font-size: 23vw; opacity: .65; }
    .mascot-chapter::after { top: 24px; left: 18px; }
    .mascot-floor { display: none; }
    .mascot-stage--reviews .rc:nth-child(2),
    .mascot-stage--why .wc:nth-child(2) { translate: none; }
    .mascot-stage > .sh h2::after { margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .section-mascot { animation: none !important; }
}

/* V17: Behance-inspired product editorial — one bold image, modular facts, real whitespace. */
#products > .ctn {
    display: grid;
    grid-template-columns: minmax(0,1.02fr) minmax(340px,.98fr);
    column-gap: clamp(34px,6vw,90px);
    align-items: center;
}
#products .product-heading {
    grid-column: 1;
    align-self: center;
    max-width: 620px;
    text-align: left;
    padding: clamp(28px,5vw,70px) 0 20px;
}
#products .product-heading h2 {
    font-size: clamp(50px,6.6vw,94px);
    line-height: .88;
    letter-spacing: -.065em;
    text-wrap: balance;
}
#products .product-heading p { max-width: 540px; margin-inline: 0; }
#products .product-editorial {
    position: relative;
    grid-column: 2;
    grid-row: 1;
    min-height: clamp(470px,49vw,650px);
    overflow: hidden;
    border: 1px solid rgba(222,190,98,.2);
    border-radius: clamp(28px,4vw,58px) clamp(28px,4vw,58px) 10px clamp(28px,4vw,58px);
    background:
      linear-gradient(rgba(217,185,92,.07) 1px, transparent 1px),
      linear-gradient(90deg,rgba(217,185,92,.07) 1px, transparent 1px),
      radial-gradient(circle at 52% 54%,rgba(132,20,47,.66),rgba(31,8,14,.72) 44%,#090708 76%);
    background-size: 68px 68px,68px 68px,auto;
    box-shadow: 0 45px 120px rgba(0,0,0,.48), inset 0 1px rgba(255,255,255,.04);
}
#products .product-editorial::before {
    content: "";
    position: absolute;
    inset: 8%;
    border: 1px solid rgba(226,195,103,.15);
    border-radius: 50%;
}
.product-editorial > img {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: -3%;
    translate: -50% 0;
    width: min(92%,560px);
    height: 84%;
    object-fit: contain;
    filter: drop-shadow(0 36px 55px rgba(0,0,0,.68));
    animation: editorialMascotFloat 6s ease-in-out infinite;
}
.product-editorial-word {
    position: absolute;
    z-index: 1;
    top: 7%;
    left: 6%;
    color: rgba(247,238,229,.92);
    font: 900 clamp(42px,5vw,72px)/.78 "Arial Black",sans-serif;
    letter-spacing: -.07em;
}
.pe-note {
    position: absolute;
    z-index: 3;
    padding: 8px 11px;
    border: 1px solid rgba(224,192,97,.28);
    border-radius: 999px;
    color: #e7cd7d;
    background: rgba(8,6,7,.72);
    backdrop-filter: blur(12px);
    font: 700 8px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
    letter-spacing: .13em;
}
.pe-note--one { top: 7%; right: 5%; }
.pe-note--two { left: 5%; bottom: 5%; }
.pe-note--three { right: 5%; bottom: 14%; }
@keyframes editorialMascotFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
#products .sort-bar,
#products .filter-bar,
#products .search-wrap,
#products .pg,
#products .view-all-wrap,
#products .recently-section { grid-column: 1 / -1; }
#products .sort-bar {
    margin-top: clamp(40px,6vw,84px);
    padding-top: 24px;
    border-top: 1px solid rgba(221,188,94,.13);
}
@media (max-width: 860px) {
    #products > .ctn { display: block; }
    #products .product-heading { text-align: center; padding-top: 20px; }
    #products .product-heading h2 { font-size: clamp(46px,13vw,76px); }
    #products .product-heading p { margin-inline: auto; }
    #products .product-editorial { min-height: min(118vw,570px); margin-top: 28px; }
    .product-editorial-word { font-size: clamp(38px,11vw,62px); }
}
@media (prefers-reduced-motion: reduce) {
    .product-editorial > img { animation: none !important; }
}

/* V18: complete Behance-inspired visual system across the whole storefront. */
html { scroll-behavior: smooth; }
body {
    background-color: #090607 !important;
    background-image:
      radial-gradient(circle at 18% 14%,rgba(116,18,42,.13),transparent 28%),
      radial-gradient(circle at 82% 60%,rgba(217,183,83,.045),transparent 25%) !important;
}
.wave-divider { height: 1px !important; opacity: .55; background: linear-gradient(90deg,transparent,rgba(220,187,93,.28),transparent); }
.wave-divider svg { display: none !important; }
header, .hdr, .navbar {
    box-shadow: 0 24px 70px rgba(0,0,0,.28) !important;
    backdrop-filter: blur(24px) saturate(1.25) !important;
}
.hero { border-bottom: 1px solid rgba(217,184,91,.14); }
.hero::after {
    content: "EN / 2026     KHON KAEN · THAILAND     OFFICIAL STORE";
    position: absolute;
    z-index: 3;
    left: 5%; right: 5%; bottom: 20px;
    display: flex;
    color: rgba(228,201,119,.48);
    font: 700 8px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
    letter-spacing: .18em;
    pointer-events: none;
}
.en-system-stage {
    margin: clamp(18px,3vw,44px) !important;
    border: 1px solid rgba(37,24,19,.16);
    border-radius: clamp(24px,4vw,58px);
    overflow: clip;
    box-shadow: 0 50px 120px rgba(0,0,0,.38);
}
#products, #why, #reviews, #faq, #blog { padding-block: clamp(95px,11vw,170px) !important; }
#why, #faq { background: linear-gradient(180deg,#0a0708,#10090b 58%,#090607) !important; }
#reviews, #blog { background: linear-gradient(180deg,#0b0708,#160a0f 56%,#090607) !important; }
.sh h2 { letter-spacing: -.055em !important; }
.wg, .rg { gap: clamp(18px,2vw,28px) !important; }
.wc, .rc { min-height: 260px; border-radius: 26px !important; }
.wc:nth-child(1), .rc:nth-child(1) { border-radius: 48px 18px 18px 18px !important; }
.wc:nth-child(3), .rc:nth-child(3) { border-radius: 18px 48px 18px 18px !important; }
.wi { font-size: 34px !important; filter: drop-shadow(0 12px 18px rgba(0,0,0,.45)); }
.fg { max-width: 980px; }
.fq {
    border-radius: 18px !important;
    margin-bottom: 12px !important;
    overflow: hidden;
}
.fq::before {
    content: "FAQ";
    position: absolute;
    right: 60px;
    color: rgba(224,192,97,.18);
    font: 900 28px/1 Arial,sans-serif;
    letter-spacing: -.05em;
}
.fqq { min-height: 76px; padding-inline: 26px 72px !important; }
.blog-profile { border-radius: 42px 16px 42px 16px !important; overflow: hidden; }
.blog-grid { grid-template-columns: repeat(12,minmax(0,1fr)) !important; gap: 22px !important; }
.blog-card { grid-column: span 4; border-radius: 28px !important; overflow: hidden; }
.blog-card:first-child { grid-column: span 8; }
.blog-card:nth-child(4) { grid-column: span 5; }
.blog-card:nth-child(5) { grid-column: span 7; }
.blog-card-img { min-height: 190px; }
.blog-card:first-child .blog-card-img { min-height: 280px; }
.ctab {
    max-width: min(1180px,calc(100% - 36px)) !important;
    margin: clamp(40px,8vw,110px) auto !important;
    min-height: 390px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    gap: 12px;
    border-radius: 56px 16px 56px 16px !important;
}
.ctab h3, .ctab p, .ctab::before, .ctab .nl-wrap, .ctab .nl-msg { width: 100%; }
footer {
    position: relative;
    display: grid !important;
    grid-template-columns: 1.2fr 1fr;
    gap: 34px 70px;
    padding: clamp(70px,9vw,130px) max(24px,7vw) 50px !important;
    border-top: 1px solid rgba(221,189,97,.2) !important;
    background:
      linear-gradient(90deg,rgba(217,184,91,.045) 1px,transparent 1px),
      linear-gradient(#090607,#050404) !important;
    background-size: 80px 100%,auto !important;
    text-align: left !important;
}
footer::before {
    content: "EN";
    position: absolute;
    right: 4%; bottom: -5%;
    color: transparent;
    -webkit-text-stroke: 1px rgba(220,188,94,.07);
    font: 900 clamp(180px,30vw,430px)/.7 "Arial Black",sans-serif;
    pointer-events: none;
}
.flogo { font-size: clamp(34px,5vw,72px) !important; line-height: .9 !important; letter-spacing: -.05em !important; max-width: 620px; }
.finfo { align-self: end; max-width: 520px; line-height: 1.8 !important; }
.flink { grid-column: 1/-1; display: flex !important; flex-wrap: wrap; gap: 10px !important; padding-top: 26px; border-top: 1px solid rgba(221,189,97,.13); }
.flink a, .print-catalog-btn {
    padding: 10px 14px !important;
    border: 1px solid rgba(221,189,97,.15) !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.018) !important;
}
.view-counter { justify-self: end; }
.cookie-consent {
    left: 50% !important;
    right: auto !important;
    width: min(900px,calc(100% - 36px));
    translate: -50% 0;
    padding: 11px 14px !important;
    border-radius: 18px !important;
    background: rgba(14,10,10,.88) !important;
    backdrop-filter: blur(24px) saturate(1.2);
}
@media (max-width: 900px) {
    .blog-grid { display: grid !important; grid-template-columns: 1fr !important; }
    .blog-card, .blog-card:first-child, .blog-card:nth-child(4), .blog-card:nth-child(5) { grid-column: auto !important; }
    .ctab { border-radius: 34px 12px 34px 12px !important; }
    footer { grid-template-columns: 1fr; }
    .flink { grid-column: auto; }
    .view-counter { justify-self: start; }
}
@media (max-width: 680px) {
    .en-system-stage { margin: 10px !important; border-radius: 24px; }
    #products,#why,#reviews,#faq,#blog { padding-block: 56px !important; }
    .wc,.rc { min-height: 0; border-radius: 24px !important; }
    .ctab { min-height: 0; }
    footer { padding-inline: 20px !important; }
    .cookie-consent { width: calc(100% - 20px); padding: 12px !important; }
}
@media (prefers-reduced-motion: reduce) {
    .section-mascot { animation: none !important; }
}

/* V15: cinematic mascot stations — integrated scenery, not floating stickers. */
.mascot-stage::before {
    top: -34px;
    right: 0;
    width: min(34vw, 410px);
    border-color: rgba(221,190,102,.2);
    background:
        linear-gradient(90deg, transparent 49.7%, rgba(221,190,102,.12) 50%, transparent 50.3%),
        linear-gradient(transparent 49.7%, rgba(221,190,102,.09) 50%, transparent 50.3%),
        radial-gradient(circle, rgba(129,24,49,.34), rgba(33,7,15,.5) 54%, transparent 70%);
    box-shadow: inset 0 0 60px rgba(216,184,94,.06), 0 0 80px rgba(91,12,32,.18);
}
.mascot-stage::after {
    content: "QUALITY CONTROL  /  EN-01";
    position: absolute;
    z-index: 3;
    top: 232px;
    right: clamp(16px,4vw,60px);
    padding: 8px 13px;
    border: 1px solid rgba(220,187,94,.28);
    border-radius: 999px;
    color: #e1c66f;
    background: rgba(12,7,8,.72);
    box-shadow: 0 10px 30px rgba(0,0,0,.34);
    font: 700 9px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
    letter-spacing: .16em;
    backdrop-filter: blur(12px);
}
.mascot-stage--reviews::after { content: "CUSTOMER RATED  /  4.9 ★"; top: 210px; }
.mascot-stage--faq::before { right: auto; left: 0; }
.mascot-stage--faq::after { content: "ANSWER DESK  /  ONLINE"; top: 340px; right: auto; left: clamp(16px,4vw,60px); }
.mascot-stage--blog::after { content: "KNOWLEDGE LAB  /  UPDATED"; top: 220px; }
.section-mascot {
    filter: drop-shadow(0 30px 42px rgba(0,0,0,.55)) drop-shadow(0 0 18px rgba(212,174,76,.12));
}
.mascot-stage .wg,
.mascot-stage .rg,
.mascot-stage .fg,
.mascot-stage .blog-profile,
.mascot-stage .blog-grid { position: relative; z-index: 2; }
.mascot-stage .wc,
.mascot-stage .rc,
.mascot-stage .fq,
.mascot-stage .blog-profile-card,
.mascot-stage .blog-card {
    border-color: rgba(216,184,94,.18) !important;
    background-image: linear-gradient(145deg, rgba(255,255,255,.025), rgba(112,16,39,.05)) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.025), 0 22px 70px rgba(0,0,0,.16);
    transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s ease, box-shadow .35s ease;
}
.mascot-stage .wc:hover,
.mascot-stage .rc:hover,
.mascot-stage .fq:hover,
.mascot-stage .blog-profile-card:hover,
.mascot-stage .blog-card:hover {
    transform: translateY(-5px);
    border-color: rgba(225,194,104,.42) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.045), 0 28px 80px rgba(0,0,0,.3), 0 0 35px rgba(108,16,38,.09);
}
.ctab {
    isolation: isolate;
    border: 1px solid rgba(222,188,92,.3) !important;
    background:
        linear-gradient(110deg, rgba(83,11,28,.72), rgba(16,8,10,.9) 62%),
        radial-gradient(circle at 85% 40%, rgba(219,183,84,.16), transparent 30%) !important;
    box-shadow: 0 35px 100px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.04);
}
.ctab::before {
    content: "EN SUPPORT  •  RESPONSE 24 HRS";
    display: inline-flex;
    margin-bottom: 16px;
    padding: 7px 11px;
    border: 1px solid rgba(225,194,104,.28);
    border-radius: 999px;
    color: #e4c96f;
    font: 700 9px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
    letter-spacing: .15em;
}
.cta-mascot { z-index: -1; filter: drop-shadow(0 28px 44px rgba(0,0,0,.64)) drop-shadow(0 0 24px rgba(210,173,73,.12)); }
@media (max-width: 760px) {
    .mascot-stage::after { display: none; }
    .ctab::before { margin-inline: auto; }
    .mascot-stage .wc:hover,
    .mascot-stage .rc:hover,
    .mascot-stage .fq:hover,
    .mascot-stage .blog-profile-card:hover,
    .mascot-stage .blog-card:hover { transform: none; }
}

/* V12: cinematic close-up — only the hard hat, plush face and eyes peek out. */
.pg { padding-top: 68px; }
.pc > img.card-mascot-behind {
    top: -66px !important;
    right: 50% !important;
    width: 210px !important;
    height: 112px !important;
    object-fit: cover !important;
    object-position: center 17% !important;
    border-radius: 34px 34px 0 0 !important;
    opacity: .92;
    transform: translateX(50%) translateY(18px) scale(.96) !important;
    filter: saturate(.72) brightness(.7) contrast(1.1) drop-shadow(0 16px 26px rgba(0,0,0,.75)) !important;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 100%);
}
.pc:has(.card-mascot-behind)::after {
    top: -58px;
    right: 50%;
    width: 230px;
    height: 105px;
    transform: translateX(50%);
    background: radial-gradient(ellipse, rgba(128,22,46,.62), rgba(74,11,27,.22) 48%, transparent 74%);
    filter: blur(14px);
}
.pc:has(.card-mascot-behind):hover > img.card-mascot-behind,
.pc:has(.card-mascot-behind):focus-within > img.card-mascot-behind {
    opacity: 1;
    transform: translateX(50%) translateY(-2px) scale(1.02) !important;
    filter: saturate(.9) brightness(.88) contrast(1.12) drop-shadow(0 20px 30px rgba(0,0,0,.8)) !important;
}
@media (max-width: 680px) {
    .pg { padding-top: 55px; }
    .pc > img.card-mascot-behind {
        top: -54px !important;
        right: 50% !important;
        width: 176px !important;
        height: 94px !important;
        transform: translateX(50%) translateY(15px) scale(.96) !important;
    }
    .pc:has(.card-mascot-behind):hover > img.card-mascot-behind,
    .pc:has(.card-mascot-behind):focus-within > img.card-mascot-behind {
        transform: translateX(50%) translateY(0) scale(1) !important;
    }
}
.pc:has(.product-mascot-backdrop):hover .pimg-wrap::after,
.pc:has(.product-mascot-backdrop):focus-within .pimg-wrap::after {
    opacity: 1;
    transform: translateY(0);
}
@media (hover: none) {
    .pc .pimg-wrap > img.product-mascot-backdrop { opacity: .2; }
}

/* Product photos have opaque dark canvases; blend the mascot above that canvas
   at low opacity so it reads visually as a background layer. */
.pc .pimg-wrap > img.product-mascot-backdrop {
    z-index: 4 !important;
    right: -3% !important;
    bottom: -10% !important;
    width: 82% !important;
    height: 82% !important;
    opacity: .26;
    mix-blend-mode: screen;
    filter: grayscale(.28) sepia(.15) saturate(.75) brightness(.72) drop-shadow(0 0 22px rgba(210,176,78,.12)) !important;
}
.pc .pimg-wrap::after { content: none !important; }
.pc:has(.product-mascot-backdrop):hover .pimg-wrap > img.product-mascot-backdrop,
.pc:has(.product-mascot-backdrop):focus-within .pimg-wrap > img.product-mascot-backdrop {
    opacity: .46;
    transform: scale(1.05) translate(-3%, -2%) !important;
    filter: grayscale(.12) sepia(.1) saturate(.9) brightness(.86) drop-shadow(0 0 30px rgba(210,176,78,.2)) !important;
}
@media (hover: none) {
    .pc .pimg-wrap > img.card-mascot-guide { opacity: .82; transform: none !important; }
}

.pc h3 { color: #f4ede5 !important; }
.pc .pp { color: #e1c570 !important; }

.pbtn,
.sort-btn,
.filter-btn {
    border-radius: 999px !important;
    transition: transform .2s ease, border-color .2s ease, background .2s ease !important;
}

.pbtn:hover,
.sort-btn:hover,
.filter-btn:hover { transform: translateY(-2px); }

.sort-bar,
.filter-bar,
.search-wrap {
    border-color: rgba(216,187,104,.13) !important;
}

.panel,
.review-card,
.faq-item,
.blog-card,
.biz-card,
.trust-card {
    border-color: rgba(216,187,104,.12) !important;
    box-shadow: 0 16px 44px rgba(0,0,0,.2) !important;
}

input:focus,
select:focus,
textarea:focus,
button:focus-visible,
a:focus-visible {
    outline: 2px solid rgba(216,187,104,.72) !important;
    outline-offset: 3px !important;
}

@media (max-width: 760px) {
    #nav { border-radius: 16px !important; }
    .hero .ctn::before { display: none; }
    .hero .btn { width: 100%; justify-content: center; }
    .pg { gap: 18px !important; }
    .pc:hover { transform: translateY(-3px) !important; }
}

@media (prefers-reduced-motion: reduce) {
    .pc,
    .hero .btn,
    .pbtn,
    .sort-btn,
    .filter-btn { transition: none !important; }
}

/* Storefront mascot — carries the Intro character into the shopping experience. */
.hero-visual { position: relative; }

.storefront-mascot {
    position: absolute;
    z-index: 6;
    left: clamp(-128px, -8vw, -78px);
    bottom: clamp(36px, 6vh, 68px);
    width: clamp(172px, 15vw, 220px);
    aspect-ratio: 1;
    padding: 5px;
    overflow: hidden;
    pointer-events: none;
    border: 1px solid rgba(221,190,103,.5);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 38%, rgba(93,28,38,.86), rgba(7,5,7,.98) 70%);
    box-shadow: 0 22px 48px rgba(0,0,0,.62), 0 0 0 8px rgba(215,178,82,.035), inset 0 0 26px rgba(215,178,82,.08);
    animation: storefrontMascotFloat 4.8s ease-in-out infinite;
}

.storefront-mascot::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 20% 3% 3%;
    border-radius: 50%;
    background: rgba(127, 20, 45, .24);
    filter: blur(34px);
}

.storefront-mascot img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    object-position: center 52%;
    border-radius: 50%;
    mix-blend-mode: screen;
    filter: brightness(1.05) contrast(1.14) saturate(.9);
}

.storefront-mascot > span {
    display: block;
    width: max-content;
    max-width: 100%;
    margin: -10px auto 0;
    padding: 6px 10px;
    border: 1px solid rgba(216,187,104,.28);
    border-radius: 999px;
    color: #e3c871;
    background: rgba(9,6,7,.9);
    font: 850 7px/1 ui-monospace, Consolas, monospace;
    letter-spacing: .1em;
    text-align: center;
}

.storefront-mascot__message {
    position: absolute;
    z-index: 2;
    left: 72%;
    top: 6%;
    width: 172px;
    padding: 11px 13px;
    border: 1px solid rgba(216,187,104,.22);
    border-radius: 15px 15px 15px 3px;
    color: #f5eddf;
    background: rgba(18,9,12,.94);
    box-shadow: 0 16px 36px rgba(0,0,0,.36);
    backdrop-filter: blur(14px);
}

.storefront-mascot__message small {
    display: block;
    margin-bottom: 5px;
    color: #d8bb68;
    font: 850 7px/1 ui-monospace, Consolas, monospace;
    letter-spacing: .16em;
}

.storefront-mascot__message strong {
    display: block;
    font-size: 11px;
    line-height: 1.55;
}

@keyframes storefrontMascotFloat {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50% { transform: translateY(-8px) rotate(1deg); }
}

@media (max-width: 980px) {
    .storefront-mascot {
        left: -20px;
        bottom: 34px;
        width: clamp(145px, 20vw, 185px);
        opacity: .94;
    }
}

@media (max-width: 680px) {
    .storefront-mascot {
        position: relative;
        left: auto;
        bottom: auto;
        width: min(52vw, 205px);
        margin: 8px auto 18px;
    }
}

/* Brand manifesto between catalogue and trust proof. */
.en-system-stage {
    position: relative;
    overflow: hidden;
    padding: clamp(54px, 7vw, 92px) max(22px, calc((100vw - 1180px) / 2));
    color: #121011;
    background: #eeeae3;
}
.en-system-stage__word {
    position: absolute;
    top: -3vw;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(20,16,17,.055);
    font: 900 clamp(110px, 25vw, 350px)/.8 "Mitr", sans-serif;
    letter-spacing: -.09em;
    white-space: nowrap;
}
.en-system-stage__content { position: relative; z-index: 1; max-width: 1180px; margin: auto; }
.en-system-stage__topline {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 17px;
    border-bottom: 1px solid rgba(20,16,17,.18);
    color: rgba(20,16,17,.6);
    font: 800 9px/1 ui-monospace, Consolas, monospace;
    letter-spacing: .14em;
}
.en-system-stage__content > img {
    display: block;
    width: 100%;
    height: clamp(270px, 38vw, 500px);
    object-fit: cover;
    object-position: center;
    mix-blend-mode: multiply;
}
.en-system-stage__bottom {
    display: grid;
    grid-template-columns: 1.2fr .9fr .48fr .48fr;
    align-items: stretch;
    gap: 10px;
    margin-top: -54px;
}
.en-system-stage__headline,
.en-system-stage__intro,
.en-system-stage__metric {
    position: relative;
    padding: clamp(20px, 2.5vw, 34px);
    border: 1px solid rgba(20,16,17,.12);
    background: rgba(245,242,236,.93);
    box-shadow: 0 16px 46px rgba(44,30,30,.1);
    backdrop-filter: blur(14px);
}
.en-system-stage__headline > span {
    display: block;
    margin-bottom: 10px;
    color: #78162e;
    font: 850 9px/1 ui-monospace, Consolas, monospace;
    letter-spacing: .12em;
}
.en-system-stage__headline h2 {
    margin: 0 0 20px;
    font: 850 clamp(28px, 3.5vw, 48px)/1 "Mitr", sans-serif;
    letter-spacing: -.045em;
}
.en-system-stage__headline a {
    color: #fff;
    background: #171315;
    padding: 10px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}
.en-system-stage__intro { display: flex; align-items: flex-end; }
.en-system-stage__intro p { margin: 0; color: rgba(20,16,17,.67); font-size: 14px; line-height: 1.75; }
.en-system-stage__metric { display: flex; flex-direction: column; justify-content: space-between; min-height: 150px; }
.en-system-stage__metric b { color: #78162e; font: 850 clamp(42px,5vw,66px)/1 "Mitr",sans-serif; }
.en-system-stage__metric span { color: rgba(20,16,17,.62); font-size: 11px; line-height: 1.5; }
@media (max-width: 820px) {
    .en-system-stage__bottom { grid-template-columns: 1fr 1fr; margin-top: -28px; }
    .en-system-stage__headline,
    .en-system-stage__intro { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
    .en-system-stage__topline span:last-child { display: none; }
    .en-system-stage__content > img { height: 245px; }
}

.en-manifesto {
    position: relative;
    overflow: hidden;
    padding: clamp(76px, 9vw, 126px) max(24px, calc((100vw - 1180px) / 2));
    border-block: 1px solid rgba(216,181,85,.16);
    background:
        radial-gradient(circle at 72% 45%, rgba(130,20,43,.24), transparent 34rem),
        linear-gradient(135deg, #070506, #13080c 58%, #050405);
}
.en-manifesto::before {
    content: "EN ENTERPRISE";
    position: absolute;
    left: -2vw;
    top: 2%;
    color: rgba(255,255,255,.025);
    font: 900 clamp(70px, 13vw, 190px)/1 "Mitr", sans-serif;
    letter-spacing: -.07em;
    white-space: nowrap;
}
.en-manifesto__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0,.9fr) minmax(380px,1.1fr);
    align-items: center;
    gap: clamp(36px, 7vw, 96px);
    max-width: 1180px;
    margin: auto;
}
.en-manifesto__eyebrow {
    display: inline-flex;
    margin-bottom: 20px;
    color: #d6b657;
    font: 850 10px/1 ui-monospace, Consolas, monospace;
    letter-spacing: .22em;
}
.en-manifesto h2 {
    margin: 0 0 24px;
    color: #f5f0e9;
    font: 800 clamp(40px, 5.2vw, 72px)/1.02 "Mitr", sans-serif;
    letter-spacing: -.045em;
}
.en-manifesto h2 em { color: #d4b255; font-style: normal; }
.en-manifesto__copy > p {
    max-width: 580px;
    margin: 0 0 28px;
    color: rgba(244,237,229,.72);
    font-size: 16px;
    line-height: 1.9;
}
.en-manifesto__tags { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 30px; }
.en-manifesto__tags span {
    padding: 8px 11px;
    border: 1px solid rgba(215,181,85,.27);
    color: #d9c47f;
    background: rgba(255,255,255,.025);
    font: 800 8px/1 ui-monospace, Consolas, monospace;
    letter-spacing: .12em;
}
.en-manifesto__art {
    position: relative;
    margin: 0;
    justify-self: center;
    width: min(100%, 520px);
}
.en-manifesto__art::before {
    content: "";
    position: absolute;
    inset: 8% -7%;
    z-index: -1;
    border: 1px solid rgba(216,181,85,.13);
    background: radial-gradient(circle, rgba(127,18,43,.2), transparent 66%);
    transform: rotate(3deg);
}
.en-manifesto__art img {
    display: block;
    width: 100%;
    max-height: 670px;
    object-fit: cover;
    object-position: center;
    border: 1px solid rgba(215,181,85,.2);
    box-shadow: 0 38px 90px rgba(0,0,0,.62);
}
.en-manifesto__art figcaption {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 18px;
    padding: 11px 14px;
    color: #170a0e;
    background: linear-gradient(90deg,#e1c468,#bc8f2f);
    font: 900 9px/1 ui-monospace, Consolas, monospace;
    letter-spacing: .12em;
    text-align: center;
}
@media (max-width: 820px) {
    .en-manifesto__grid { grid-template-columns: 1fr; }
    .en-manifesto__copy { text-align: center; }
    .en-manifesto__copy > p { margin-inline: auto; }
    .en-manifesto__tags { justify-content: center; }
    .en-manifesto__art { width: min(92vw, 500px); }
}

/* Editorial poster details adapted to the EN maroon/gold identity. */
.storefront-poster-title {
    position: absolute;
    z-index: 5;
    top: clamp(-112px, -9vw, -76px);
    right: 2%;
    width: min(92%, 520px);
    text-align: right;
    pointer-events: none;
}
.storefront-poster-title small {
    display: block;
    margin-bottom: 10px;
    color: #c5a852;
    font: 800 9px/1 ui-monospace, Consolas, monospace;
    letter-spacing: .22em;
}
.storefront-poster-title strong {
    display: block;
    color: #f3eee7;
    font: 900 clamp(28px, 3.5vw, 52px)/.88 "Mitr", sans-serif;
    letter-spacing: -.045em;
    text-shadow: 0 12px 36px rgba(0,0,0,.55);
}
.storefront-poster-title em {
    color: transparent;
    -webkit-text-stroke: 1px #d3b45d;
    font-style: normal;
}
.storefront-poster-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 2vw, 26px);
    width: min(100%, 560px);
    margin-top: -2px;
    padding: 11px 18px;
    border: 1px solid rgba(214,181,88,.22);
    background: linear-gradient(100deg, rgba(238,224,191,.96), rgba(210,178,88,.94));
    color: #18090d;
    box-shadow: 0 18px 42px rgba(0,0,0,.32);
    transform: rotate(-.5deg);
    font: 800 8px/1.2 ui-monospace, Consolas, monospace;
    letter-spacing: .08em;
}
.storefront-poster-strip b { color: #79152d; }

.hero::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
    opacity: .2;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
    background-size: 54px 54px;
    -webkit-mask-image: linear-gradient(to bottom, #000, transparent 86%);
    mask-image: linear-gradient(to bottom, #000, transparent 86%);
}

@media (max-width: 680px) {
    .storefront-poster-title {
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
        margin: 4px auto 12px;
        text-align: center;
    }
    .storefront-poster-title strong { font-size: clamp(25px, 8vw, 38px); }
    .storefront-poster-strip { flex-wrap: wrap; gap: 8px 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .storefront-mascot { animation: none !important; }
}

/* V3: Mascot-led editorial storefront hero. */
@media (min-width: 981px) {
    .hero-visual {
        display: grid !important;
        grid-template-columns: minmax(190px, .72fr) minmax(300px, 1.28fr);
        grid-template-rows: auto auto auto;
        align-items: center;
        gap: 18px 8px;
        width: calc(100% + 145px);
        margin-left: -145px;
    }
    .hero-visual .carousel { grid-column: 2; grid-row: 1; }
    .hero-visual .carousel-nav { grid-column: 2; grid-row: 2; }
    .hero-visual .ctags { grid-column: 2; grid-row: 3; }
    .hero-visual .storefront-mascot {
        position: relative;
        z-index: 6;
        grid-column: 1;
        grid-row: 1 / 4;
        justify-self: center;
        left: auto;
        bottom: auto;
        width: clamp(210px, 19vw, 285px);
        aspect-ratio: .78;
        padding: 0;
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
        filter: drop-shadow(0 30px 40px rgba(0,0,0,.72));
    }
    .hero-visual .storefront-mascot::before {
        inset: 16% 3% 4%;
        background: radial-gradient(circle, rgba(127,20,45,.38), transparent 72%);
        filter: blur(25px);
    }
    .hero-visual .storefront-mascot img {
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
        object-fit: cover;
        object-position: center;
        border-radius: 0;
        mix-blend-mode: screen;
        filter: brightness(1.08) contrast(1.12) saturate(.92);
        -webkit-mask-image: radial-gradient(ellipse 68% 84% at 50% 50%, #000 54%, rgba(0,0,0,.9) 68%, transparent 100%);
        mask-image: radial-gradient(ellipse 68% 84% at 50% 50%, #000 54%, rgba(0,0,0,.9) 68%, transparent 100%);
    }
}

@media (min-width: 681px) and (max-width: 980px) {
    .hero-visual {
        display: grid !important;
        grid-template-columns: minmax(150px, .65fr) minmax(250px, 1.35fr);
        width: 100%;
        margin-left: 0;
    }
    .hero-visual .storefront-mascot {
        position: relative;
        grid-column: 1;
        grid-row: 1 / 4;
        left: auto;
        bottom: auto;
        width: clamp(165px, 22vw, 210px);
    }
    .hero-visual .carousel { grid-column: 2; grid-row: 1; }
    .hero-visual .carousel-nav { grid-column: 2; grid-row: 2; }
    .hero-visual .ctags { grid-column: 2; grid-row: 3; }
}

/* V4: transparent mascot sits beside the product stage, not in the centre. */
@media (min-width: 681px) {
    .hero-visual {
        display: flex !important;
        width: auto !important;
        margin-left: 0 !important;
    }
    .hero-visual .carousel,
    .hero-visual .carousel-nav,
    .hero-visual .ctags { grid-column: auto; grid-row: auto; }
    .hero-visual .storefront-mascot {
        position: absolute;
        z-index: 6;
        left: clamp(-118px, -8vw, -72px);
        bottom: clamp(38px, 6vh, 70px);
        width: clamp(175px, 16vw, 225px);
        aspect-ratio: 1;
        padding: 0;
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
        filter: drop-shadow(0 24px 30px rgba(0,0,0,.62));
    }
    .hero-visual .storefront-mascot img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: 0;
        mix-blend-mode: normal;
        filter: saturate(.92) contrast(1.05);
        -webkit-mask-image: none;
        mask-image: none;
    }
}

@media (max-width: 680px) {
    .hero-visual .storefront-mascot img {
        object-fit: contain;
        border-radius: 0;
        mix-blend-mode: normal;
        -webkit-mask-image: none;
        mask-image: none;
    }
}