/* ===== RESET & BASE ===== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;font-family:var(--font);background:#fff;color:#111113}
/* Korean wraps at word boundaries, never mid-word */
body{word-break:keep-all;overflow-wrap:break-word}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer}

/* Neutral system — the logo and photographs bring the only colour */
:root{
    --paper:#ffffff;
    --surface:#f4f4f5;
    --ink:#111113;
    --ink-mid:rgba(17,17,19,0.62);
    --ink-soft:rgba(17,17,19,0.42);
    --line:rgba(17,17,19,0.1);
    --faint:#a1a1aa;
    --outline:#d4d4d8;
    --cyan:#1AA7E0;          /* precision accent: lines, rings, live dots */
    --cyan-ink:#0B7FB0;      /* the same hue, dark enough for small text */
    --font:'Geist','Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
}

/* Plain white ground */
body,.intro{background:var(--paper)}
.menu-screen{background:transparent}

/* ===== SKIP BUTTON ===== */
.skip-btn{
    position:fixed;bottom:40px;right:40px;z-index:2000;
    padding:10px 28px;
    background:rgba(255,255,255,0.7);border:1px solid var(--line);border-radius:0;
    color:var(--ink-soft);font-size:12px;font-weight:600;letter-spacing:3px;
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    transition:all 0.3s;
}
.skip-btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ===== INTRO ===== */
.intro{position:fixed;inset:0;z-index:1000;overflow:hidden}
.intro-phase{
    position:absolute;inset:0;z-index:1;
    display:flex;align-items:center;justify-content:center;flex-direction:column;
    opacity:0;transition:opacity 0.4s ease;pointer-events:none;
}
.intro-phase.active{opacity:1}

/* Logo — the official artwork exactly as designed, simply faded in.
   Same width as the Empower Your Everyday line that follows (10.54 x its font size). */
.intro-logo{
    display:block;
    width:calc(clamp(24px,4vw,50px) * 10.54);height:auto;
    opacity:0;transform:translateY(12px);
    transition:opacity 0.5s ease,transform 0.6s cubic-bezier(0.2,0.8,0.3,1);
}
.intro-logo.show{opacity:1;transform:translateY(0)}

/* Slogan */
.slogan-wrap{text-align:center}
.slogan-en{
    font-family:var(--font);
    font-size:clamp(24px,4vw,50px);
    font-weight:600;letter-spacing:-0.045em;
    background:linear-gradient(100deg,#111113 0%,#111113 50%,#71717a 100%);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    opacity:0;transform:translateY(30px);
}
.slogan-ko{
    font-size:clamp(16px,2vw,22px);
    font-weight:300;letter-spacing:0.15em;
    color:var(--ink-mid);
    margin-top:18px;
    opacity:0;transform:translateY(20px);
}
.slogan-en.show,.slogan-ko.show{
    opacity:1;transform:translateY(0);
    transition:opacity 0.5s ease,transform 0.5s ease;
}

/* Main backdrop — the photograph holds the right half, the words drift beneath it.
   An opening page slides in over the photograph; only the drifting words step aside. */
.deco{
    position:fixed;inset:0;z-index:50;
    pointer-events:none;
    opacity:0;transition:opacity 0.6s ease;
}
body:has(.menu-screen.active) .deco{opacity:1;transition-duration:1.2s}
.deco-marquee{transition:opacity 0.5s ease}
body:has(.menu-screen[data-mode="locked"]) .deco-marquee{opacity:0}
/* translucent, with its left edge melting into the white page */
.deco-card{
    position:absolute;top:0;right:0;bottom:0;left:42%;z-index:1;
    overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 30%);
            mask-image:linear-gradient(90deg,transparent 0%,#000 30%);
}
.deco-card img{
    position:absolute;inset:0;
    width:100%;height:100%;object-fit:cover;object-position:50% 45%;
    opacity:0;transition:opacity 0.7s ease;
    animation:decoZoom 18s ease-in-out infinite alternate;
}
/* hovering a menu word crossfades to that page photo, kept translucent so the words keep the lead */
.deco-card img.is-on{opacity:0.42}
/* the main photograph shows in full; the page photos above stay translucent */
.deco-card img.is-on[data-key="main"]{opacity:1}
@keyframes decoZoom{from{transform:scale(1.02)}to{transform:scale(1.1)}}

.deco-marquee{position:absolute;z-index:0;left:0;right:0;bottom:clamp(20px,3vh,36px);overflow:hidden}
.deco-track{
    display:flex;align-items:center;width:max-content;
    animation:decoSlide 70s linear infinite;
}
.deco-track span{
    font-size:clamp(64px,9.4vw,168px);font-weight:600;
    letter-spacing:-0.06em;line-height:1.08;
    text-transform:uppercase;white-space:nowrap;
    color:transparent;-webkit-text-stroke:1px var(--outline);
}
.deco-track i{
    flex:none;width:clamp(12px,1.1vw,18px);aspect-ratio:1;border-radius:50%;
    border:1px solid var(--cyan);
    margin:0 clamp(26px,3.2vw,56px);
}
@keyframes decoSlide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
    .deco-card img,.deco-track{animation:none}
}

/* ===== MENU SCREEN ===== */
.menu-screen{
    position:fixed;inset:0;z-index:100;
    display:flex;flex-direction:column;
    opacity:0;pointer-events:none;
    transition:opacity 0.6s ease;
    overflow:hidden;
}
.menu-screen.active{opacity:1;pointer-events:auto}

.menu-header{
    position:relative;z-index:3;flex:none;
    padding:28px clamp(24px,3.5vw,48px) 20px;
    display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.menu-logo{height:clamp(38px,3.6vw,52px);opacity:0.95}
.menu-tag{
    font-family:var(--font);
    font-size:11px;font-weight:400;letter-spacing:2px;
    color:var(--ink-soft);
}

/* ===== Scattered text menu — no frames, the words are the interface ===== */
.menu-scatter{
    position:relative;z-index:3;flex:1;
    min-height:0;
}


.mi{
    position:absolute;
    left:var(--x);top:var(--y);
    display:flex;flex-direction:column;gap:3px;
    width:max-content;cursor:pointer;
    color:var(--ink);
    opacity:0;
    transition:
        opacity 0.6s ease,
        color 0.35s ease,
        left 1s cubic-bezier(0.25,0.6,0.3,1),
        top 1s cubic-bezier(0.25,0.6,0.3,1),
        font-size 0.88s ease,
        transform 0.5s cubic-bezier(0.2,0.7,0.3,1);
}
.mi.show{opacity:1}

.mi-k{
    font-size:10px;font-weight:600;letter-spacing:3px;
    color:var(--ink-soft);
    font-variant-numeric:tabular-nums;
    transition:color 0.35s ease;
}
.mi-t{
    position:relative;display:inline-block;
    font-family:var(--font);
    font-size:var(--fs,32px);
    font-weight:500;letter-spacing:-0.055em;line-height:1.02;
}
/* underline draws in from the left on hover */
.mi-t::after{
    content:'';position:absolute;
    left:0;bottom:-0.1em;
    width:100%;height:2px;background:var(--cyan);
    transform:scaleX(0);transform-origin:left;
    transition:transform 0.45s cubic-bezier(0.2,0.7,0.3,1);
}
.mi-s{
    margin-top:2px;
    font-size:11px;font-weight:500;letter-spacing:1.6px;
    color:var(--ink-mid);
    transition:color 0.35s ease;
}

/* Approach one word and the rest step back */
.menu-screen[data-mode="scatter"] .menu-scatter:has(.mi:hover) .mi.show{opacity:0.26}
.menu-screen[data-mode="scatter"] .menu-scatter .mi.show:hover{opacity:1;transform:translateX(10px)}
.mi:hover .mi-t::after{transform:scaleX(1)}
.mi:hover .mi-k{color:var(--ink)}
.mi:hover .mi-s{color:var(--ink)}

@media(hover:none){
    .menu-scatter:hover .mi.show{opacity:1}
}
@media(prefers-reduced-motion:reduce){
    .mi{transition-duration:0.01ms}
}

.menu-footer{
    position:relative;z-index:3;flex:none;
    display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px;
    padding:18px clamp(24px,3.5vw,48px) 22px;
    font-size:12px;color:var(--ink-soft);
}
.foot-ig{
    display:inline-flex;flex:none;
    width:40px;height:40px;
    transition:transform 0.25s cubic-bezier(0.2,0.7,0.3,1),filter 0.25s;
}
.foot-ig svg{width:100%;height:100%;display:block}
.foot-ig:hover{transform:translateY(-2px) scale(1.06);filter:drop-shadow(0 6px 12px rgba(214,36,159,0.28))}
.foot-links{display:inline-flex;align-items:center;gap:8px}
.foot-links a{transition:color 0.25s}
.foot-links a:hover{color:var(--ink)}
.foot-links i{font-style:normal;opacity:0.5}
.foot-copy{margin-left:auto}

/* ===== PANELS ===== */
.panel{
    position:fixed;top:0;right:0;bottom:0;left:0;z-index:500;
    background:#fff;color:#111;
    transform:translateX(100%);
    transition:transform 1.1s cubic-bezier(0.25,0.6,0.3,1),left 1.1s cubic-bezier(0.25,0.6,0.3,1);
    overflow-y:auto;overflow-x:hidden;
}
.panel.open{transform:translateX(0)}


.panel-bar{
    position:sticky;top:0;z-index:10;
    display:flex;align-items:center;gap:clamp(12px,2vw,26px);
    padding:12px clamp(20px,3vw,40px);
    background:rgba(255,255,255,0.94);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line);
}
.panel-back{
    flex:none;
    width:40px;height:40px;
    border:1px solid var(--line);border-radius:50%;
    background:none;color:var(--ink);
    display:flex;align-items:center;justify-content:center;
    transition:all 0.25s;
}
.panel-back:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* Category bar — jump straight to another page without going back */
.panel-nav{
    display:flex;align-items:stretch;
    gap:clamp(4px,1vw,14px);
    flex:1;min-width:0;
    overflow-x:auto;
    scrollbar-width:none;
}
.panel-nav::-webkit-scrollbar{display:none}
.pn{
    position:relative;flex:none;
    display:flex;flex-direction:column;gap:1px;
    padding:7px 2px 9px;
    cursor:pointer;white-space:nowrap;
    color:var(--ink-soft);
    transition:color 0.25s ease;
}
.pn-en{
    font-family:var(--font);
    font-size:clamp(11px,1.05vw,14px);
    font-weight:700;letter-spacing:-0.02em;
}
.pn-ko{font-size:10px;font-weight:400;letter-spacing:0.5px;opacity:0.8}
.pn::after{
    content:'';position:absolute;left:0;right:0;bottom:0;
    height:2px;background:var(--ink);
    transform:scaleX(0);transform-origin:center;
    transition:transform 0.32s cubic-bezier(0.2,0.7,0.3,1);
}
.pn:hover{color:var(--ink)}
.pn:hover::after{transform:scaleX(1)}
.pn.active{color:var(--ink);cursor:default}
.pn.active::after{transform:scaleX(1)}

.panel-body{min-height:100vh}

.panel-hero{position:relative;height:55vh;min-height:320px;overflow:hidden}
.panel-hero-img{width:100%;height:100%;object-fit:cover}
/* Low-resolution sources can opt out of filling, via data-fit on the menu item */
.panel-hero-over{
    position:absolute;inset:0;
    background:linear-gradient(transparent 30%,rgba(0,0,0,0.55));
    display:flex;flex-direction:column;justify-content:flex-end;
    padding:clamp(32px,6vw,72px);color:#fff;
}
.panel-hero-over h2{font-size:clamp(32px,5vw,56px);line-height:1.2;font-weight:300}
.panel-hero-over h2 b{font-weight:800}
.p-eyebrow{font-size:13px;letter-spacing:3px;margin-bottom:12px;opacity:0.75}

.panel-inner{max-width:1180px;margin:0 auto;padding:clamp(40px,5vw,72px) clamp(24px,4.4vw,72px)}
.pt-lg{padding-top:clamp(48px,5vw,80px)}

.p-lead{font-size:clamp(18px,2.2vw,22px);line-height:1.8;color:#222;margin-bottom:20px;font-weight:400}
.p-body{font-size:15px;line-height:2;color:#666;margin-bottom:40px}

/* Utility */
.mt-32{margin-top:32px}.mt-48{margin-top:48px}
.gap-12{gap:12px}.gap-16{gap:16px}.gap-24{gap:24px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr)}
.img-round{width:100%;aspect-ratio:1;object-fit:cover;border-radius:0}

/* Stats */
/* ===== Product roadmap — where the line goes beyond the first product ===== */
.road-intro{
    margin-top:clamp(40px,5vw,64px);
    font-size:clamp(16px,1.9vw,20px);
    font-weight:600;color:var(--ink);
    letter-spacing:-0.3px;
}
.roadmap{
    list-style:none;
    display:grid;grid-template-columns:repeat(4,1fr);
    gap:clamp(10px,1.4vw,20px);
    margin:24px 0 0;
}
.rm-step{
    position:relative;
    display:flex;flex-direction:column;align-items:center;
    text-align:center;
    padding:26px 14px 24px;
    background:#f4f4f5;
    border:1px solid rgba(17,17,19,0.08);
    border-radius:0;
}
/* connector between steps */
.rm-step + .rm-step::before{
    content:'';position:absolute;
    left:calc(-1 * clamp(10px,1.4vw,20px));width:clamp(10px,1.4vw,20px);
    top:64px;height:1px;
    background:rgba(17,17,19,0.18);
}
.rm-now{background:#ececee;border-color:rgba(17,17,19,0.35)}

.rm-media{
    display:flex;align-items:flex-end;justify-content:center;
    height:clamp(84px,9vw,112px);
    margin-bottom:16px;
    color:var(--ink);
}
.rm-media img{height:100%;width:auto;object-fit:contain}
.rm-media svg{width:clamp(40px,4.4vw,56px);height:clamp(40px,4.4vw,56px)}

.rm-badge{
    font-size:10px;font-weight:600;letter-spacing:1.4px;
    padding:4px 10px;border-radius:0;
    background:rgba(17,17,19,0.07);color:var(--ink-mid);
    margin-bottom:10px;
}
.rm-now .rm-badge{background:var(--ink);color:#fff}
.rm-name{
    font-size:clamp(14px,1.5vw,17px);font-weight:700;
    color:var(--ink);line-height:1.35;letter-spacing:-0.3px;
}
.rm-desc{
    margin-top:7px;
    font-size:12.5px;line-height:1.6;color:#8b8b93;
}

.road-close{
    margin-top:clamp(28px,3.5vw,44px);
    font-size:clamp(15px,1.8vw,19px);
    line-height:1.85;color:#555;letter-spacing:-0.3px;
}
.road-close b{font-weight:700;color:var(--ink)}

/* ===== Founder ===== */
.founder{
    margin-top:clamp(48px,6vw,80px);
    padding-top:clamp(32px,4vw,48px);
    border-top:1px solid rgba(17,17,19,0.12);
}
.fd-eyebrow{
    display:block;
    font-size:11px;font-weight:700;letter-spacing:3px;
    color:var(--ink);margin-bottom:22px;
}
.fd-grid{
    display:grid;grid-template-columns:minmax(0,0.72fr) minmax(0,1fr);
    gap:clamp(28px,4vw,56px);
}
.fd-photo{
    width:clamp(128px,12vw,164px);height:auto;aspect-ratio:3/4;
    object-fit:cover;border-radius:0;
    background:#eeeef0;margin-bottom:22px;
    box-shadow:0 10px 28px rgba(17,17,19,0.1);
}
.fd-name{
    display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
    font-size:clamp(22px,2.6vw,30px);font-weight:700;
    color:var(--ink);letter-spacing:-0.5px;
}
.fd-name span{
    font-size:12px;font-weight:500;letter-spacing:1.5px;
    color:var(--ink-soft);
}
.fd-line{
    margin-top:14px;
    font-size:14.5px;line-height:1.85;color:#5f5f67;
}
.fd-line b{font-weight:600;color:var(--ink)}
.fd-edu{
    margin-top:16px;padding-top:14px;
    border-top:1px solid rgba(17,17,19,0.08);
    font-size:13px;color:#8b8b93;
}

.fd-sub{
    font-size:11px;font-weight:700;letter-spacing:2px;
    color:var(--ink);
    padding-bottom:10px;margin-bottom:4px;
    border-bottom:1px solid rgba(17,17,19,0.1);
}
.fd-sub + *{margin-top:0}
.fd-list,.fd-rnd{list-style:none}
.fd-list li,.fd-rnd li{
    padding:13px 0;
    border-bottom:1px solid rgba(17,17,19,0.06);
    font-size:14px;color:#5f5f67;line-height:1.6;
}
.fd-list li b,.fd-rnd li b{
    font-weight:700;color:var(--ink);
}
.fd-list li span{
    display:block;margin-top:3px;
    font-size:12.5px;color:#9d9da5;
}
.fd-rnd li span{
    display:block;margin-top:5px;
    font-size:13px;line-height:1.8;color:#76767e;
}
.fd-rnd{margin-bottom:0}
.fd-body .fd-sub:nth-of-type(2){margin-top:34px}

/* ===== Exhibitions ===== */
.expo{
    margin-top:clamp(48px,6vw,80px);
    padding-top:clamp(32px,4vw,48px);
    border-top:1px solid rgba(17,17,19,0.12);
}
.expo-title{
    font-size:clamp(20px,2.4vw,28px);font-weight:700;
    color:var(--ink);letter-spacing:-0.6px;margin-bottom:26px;
}
.expo-title b{font-weight:800;color:var(--ink)}
.expo-list{list-style:none;display:flex;flex-direction:column;gap:14px}
.expo-item{
    display:grid;grid-template-columns:clamp(112px,17vw,188px) minmax(0,1fr);
    gap:clamp(16px,2.2vw,28px);align-items:center;
    padding:14px;border-radius:0;background:#f4f4f5;
    border:1px solid rgba(17,17,19,0.07);
}
.expo-media{
    display:block;border-radius:0;overflow:hidden;
    aspect-ratio:16/10;background:#ececee;
}
.expo-media img{width:100%;height:100%;object-fit:cover}
.expo-media-none{
    display:flex;align-items:center;justify-content:center;
    color:rgba(17,17,19,0.22);
}
.expo-media-none svg{width:34%;height:34%}
.expo-body{display:flex;flex-direction:column;gap:5px}
.expo-place{
    font-size:10.5px;font-weight:600;letter-spacing:1.6px;
    color:var(--ink);text-transform:uppercase;
}
.expo-name{font-size:clamp(15px,1.6vw,18px);font-weight:700;color:var(--ink)}
.expo-desc{font-size:13px;line-height:1.75;color:#76767e}

/* ===== Partners ===== */
.partners{
    margin-top:clamp(40px,5vw,64px);
    padding-top:clamp(28px,3.5vw,40px);
    border-top:1px solid rgba(17,17,19,0.12);
}
.partner-row{
    list-style:none;
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
    gap:clamp(20px,4vw,64px);align-items:center;
    padding:clamp(8px,1.4vw,18px) 0;
}
.partner-row li{
    display:flex;align-items:center;justify-content:center;
    height:clamp(56px,6.6vw,92px);
}
.partner-row img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain}

/* Check list */
.check-list{list-style:none;margin:36px 0}
.check-list li{
    padding:18px 0;border-bottom:1px solid #f0f0f0;
    font-size:15px;color:#444;
    display:flex;align-items:center;gap:12px;
}
.check-list li::before{content:'\2726';color:var(--ink);font-size:12px}

.sub-title{font-size:17px;font-weight:700;margin:52px 0 24px;color:#111;letter-spacing:-0.3px}



/* Buy link */
.buy{
    display:inline-flex;align-items:center;gap:10px;
    margin-top:clamp(28px,3.5vw,40px);
    padding:15px 26px;
    background:var(--ink);color:#fff;
    border-radius:0;
    font-size:14.5px;font-weight:600;letter-spacing:-0.2px;
    transition:background 0.25s ease,transform 0.25s ease,box-shadow 0.25s ease;
}
.buy svg{width:17px;height:17px;transition:transform 0.25s ease}
.buy:hover{background:#2a2a2e;transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,0.24)}
.buy:hover svg{transform:translateX(3px)}

/* Ingredient */
.ingr{text-align:center}
.ingr img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:0;margin-bottom:10px}
.ingr span{font-size:13px;color:#777}

/* Vision */
.vision-title{font-size:clamp(24px,3vw,34px);text-align:center;line-height:1.6;color:#111;font-weight:300;letter-spacing:-0.5px}
.vision-title b{font-weight:800;color:var(--ink)}
.v-card{background:#f8f8f8;border-radius:0;overflow:hidden;transition:transform 0.3s,box-shadow 0.3s}
.v-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,0.08)}
.v-card img{width:100%;height:190px;object-fit:cover}
.v-card-body{padding:28px 24px 32px}
.v-card-body h3{font-size:12px;font-weight:700;color:var(--ink);letter-spacing:2.5px;margin-bottom:14px}
.v-card-body p{font-size:14px;color:#666;line-height:1.9}
.v-card-body p b{color:#333;font-weight:600}

/* Business */
.biz-title{font-size:clamp(32px,5vw,52px);font-weight:900;letter-spacing:-1px;line-height:1.15;color:#111}
.biz-card{border-radius:0;overflow:hidden;background:#f8f8f8;transition:transform 0.3s}
.biz-card:hover{transform:translateY(-4px)}
.biz-card img{width:100%;height:260px;object-fit:cover}
.biz-info{padding:28px 24px 32px}
.biz-info h3{font-size:20px;font-weight:700;margin-bottom:12px;color:#111}
.biz-badge{
    display:inline-block;margin-bottom:10px;
    padding:4px 11px;border-radius:0;
    background:rgba(17,17,19,0.07);color:var(--ink-mid);
    font-size:10.5px;font-weight:600;letter-spacing:1.2px;
}
.biz-soon img{filter:saturate(0.55) opacity(0.75)}
.biz-info p{font-size:14px;color:#666;line-height:1.9}

/* Contact */
.contact-title{font-size:clamp(28px,4vw,40px);font-weight:800;margin-bottom:40px;color:#111}
.contact-grid{display:grid;grid-template-columns:1.2fr 0.8fr;gap:60px;align-items:start}
.fg{margin-bottom:22px}
.fg label{display:block;font-size:12px;font-weight:600;letter-spacing:0.5px;margin-bottom:8px;color:#555}
.fg input,.fg select,.fg textarea{
    width:100%;padding:14px 16px;
    border:1px solid #ddd;border-radius:0;
    font-size:15px;font-family:inherit;
    background:#fff;color:#111;
    transition:border-color 0.3s;
}
.fg input:focus,.fg select:focus,.fg textarea:focus{outline:none;border-color:var(--ink)}
.btn-send{
    width:100%;padding:16px;margin-top:8px;
    background:var(--ink);color:#fff;
    border:none;border-radius:0;
    font-size:15px;font-weight:600;
    transition:background 0.3s;
}
.btn-send:hover{background:#2a2a2e}

.c-info{padding-top:20px}
.ci{margin-bottom:28px}
.ci strong{display:block;font-size:12px;color:#aaa;letter-spacing:0.5px;margin-bottom:6px;text-transform:uppercase}
.ci p{font-size:15px;color:#333;line-height:1.7}

/* ===== RESPONSIVE ===== */
@media(max-width:1024px){
    .grid-3{grid-template-columns:1fr}
    .grid-4{grid-template-columns:repeat(2,1fr)}
    .contact-grid{grid-template-columns:1fr}
    .panel-bar{padding:14px 24px}
    .panel-inner{padding-left:24px;padding-right:24px}
}

/* Phones: scattering has no room, so the words stack flush left */
@media(max-width:768px){
    .menu-header{padding:20px}
    .menu-tag{display:none}
    .menu-scatter{
        display:flex;flex-direction:column;
        align-items:flex-start;justify-content:center;
        gap:clamp(14px,2.6vh,26px);
        padding:0 24px 20px;
    }
    .mi{
        position:relative;
        left:auto!important;top:auto!important;
        --fs:clamp(22px,7vw,34px)!important;
        opacity:1!important;
    }
    .mi-s{font-size:10px}
    .deco-card{display:none}
    .deco-marquee{bottom:64px}
    .deco-track span{font-size:24vw}
    .menu-footer{padding:12px 20px 16px}

    .panel-hero{height:40vh;min-height:240px}
    .panel-hero-over{padding:24px}
    .panel-hero-over h2{font-size:28px}

    .fd-grid{grid-template-columns:1fr;gap:26px}
    .fd-photo{width:120px;margin-bottom:18px}
    .fd-body .fd-sub:nth-of-type(2){margin-top:28px}

    .roadmap{grid-template-columns:repeat(2,1fr);gap:10px}
    .rm-step{padding:20px 10px 18px}
    .rm-step + .rm-step::before{display:none}
    .rm-media{height:80px;margin-bottom:12px}
    .rm-media svg{width:38px;height:38px}
    .rm-name{font-size:14px}
    .rm-desc{font-size:11.5px}

    .grid-2{grid-template-columns:1fr}
    .biz-card img{height:200px}
}

/* ===== Standalone legal documents (privacy.html / terms.html) ===== */
body.doc{overflow:auto;background:#fff}
.doc-bar{
    position:sticky;top:0;z-index:10;
    display:flex;align-items:center;gap:16px;
    padding:14px clamp(20px,4vw,48px);
    background:rgba(255,255,255,0.94);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line);
}
.doc-back{
    display:inline-flex;align-items:center;gap:8px;
    padding:8px 16px 8px 12px;
    border:1px solid rgba(17,17,19,0.16);border-radius:0;
    color:var(--ink);font-size:12.5px;font-weight:600;
    transition:background 0.25s,border-color 0.25s,color 0.25s;
}
.doc-back svg{width:15px;height:15px}
.doc-back:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.doc-logo{height:26px;margin-left:auto;opacity:0.9}

.doc-wrap{max-width:820px;margin:0 auto;padding:clamp(36px,6vw,72px) clamp(20px,4vw,32px) 96px}
.doc-wrap h1{
    font-size:clamp(24px,3.4vw,36px);font-weight:800;
    color:var(--ink);letter-spacing:-0.8px;
}
.doc-meta{
    margin-top:12px;padding-bottom:22px;
    border-bottom:1px solid var(--line);
    font-size:13px;color:#8b8b93;
}
.doc-wrap h2{
    margin-top:40px;margin-bottom:12px;
    font-size:clamp(15px,1.8vw,18px);font-weight:700;
    color:var(--ink);letter-spacing:-0.3px;
}
.doc-wrap p{font-size:14.5px;line-height:1.95;color:#5f5f67;margin-bottom:12px}
.doc-wrap ul,.doc-wrap ol{margin:0 0 14px 0;padding-left:20px}
.doc-wrap li{font-size:14.5px;line-height:1.95;color:#5f5f67;margin-bottom:6px}
.doc-wrap table{
    width:100%;border-collapse:collapse;margin:6px 0 16px;
    font-size:13.5px;
}
.doc-wrap th,.doc-wrap td{
    border:1px solid var(--line);padding:10px 12px;
    text-align:left;vertical-align:top;color:#5f5f67;line-height:1.7;
}
.doc-wrap th{background:#f4f4f5;color:var(--ink);font-weight:600;white-space:nowrap}
.doc-note{
    margin-top:36px;padding:18px 20px;
    background:#f4f4f5;border-radius:0;
    border:1px solid rgba(17,17,19,0.07);
    font-size:13px;line-height:1.85;color:#76767e;
}
.doc-foot{
    margin-top:44px;padding-top:22px;
    border-top:1px solid var(--line);
    font-size:12.5px;line-height:1.9;color:#8b8b93;
}
@media(max-width:768px){
    .doc-wrap table{display:block;overflow-x:auto}
}

@media(max-width:768px){
    .partner-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 28px}
    .partner-row li{height:58px}
}



/* Product hero is a bright scene: title sits on the empty wall, top-left, in ink */
.panel-hero-light .panel-hero-img{object-position:50% 64%}
.panel-hero-light .panel-hero-over{
    justify-content:flex-start;
    background:linear-gradient(118deg,rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.12) 36%,rgba(255,255,255,0) 58%);
    color:var(--ink);
}
.panel-hero-light .p-eyebrow{color:var(--ink);opacity:1;font-weight:700}
.panel-hero-light .panel-hero-over h2{font-weight:800;color:var(--ink);letter-spacing:-1px}



/* How to take it — one photograph per moment, the step written onto it */
.ritual{
    list-style:none;
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    gap:clamp(10px,1.4vw,18px);
}
.rt{
    position:relative;isolation:isolate;
    aspect-ratio:3/4;border-radius:0;overflow:hidden;
    background:#ececee;
}
.rt img{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    transition:transform 0.9s cubic-bezier(0.2,0.7,0.3,1);
}
.rt:hover img{transform:scale(1.045)}
.rt-over{
    position:absolute;left:0;right:0;bottom:0;
    display:flex;flex-direction:column;
    padding:72px clamp(18px,2vw,26px) clamp(18px,2vw,26px);
    background:linear-gradient(180deg,rgba(10,10,12,0) 0%,rgba(10,10,12,0.5) 45%,rgba(10,10,12,0.84) 100%);
    color:#fff;
}
.rt-k{
    font-size:clamp(30px,3.2vw,44px);font-weight:800;line-height:1;letter-spacing:-1.5px;
    color:rgba(255,255,255,0.42);font-variant-numeric:tabular-nums;
}
.rt-t{
    display:flex;align-items:baseline;gap:6px;margin-top:10px;
    font-size:clamp(20px,2.2vw,28px);font-weight:800;letter-spacing:-0.6px;line-height:1.15;
}
.rt-t em{font-style:normal;font-size:0.56em;font-weight:600;letter-spacing:0;color:rgba(255,255,255,0.72)}
.rt-d{margin-top:6px;font-size:13px;color:rgba(255,255,255,0.8)}
@media(max-width:768px){
    .ritual{
        grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:76%;
        overflow-x:auto;scroll-snap-type:x mandatory;
        scroll-padding-inline:24px;
        margin:0 -24px;padding:0 24px 4px;scrollbar-width:none;
    }
    .ritual::-webkit-scrollbar{display:none}
    .rt{scroll-snap-align:start}
}

/* Manufacturing facility — small source photo, so it stays at or below native width */
.facility{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:clamp(24px,4vw,56px);align-items:center;
    margin-top:clamp(48px,6vw,76px);
    padding:clamp(16px,2vw,26px);
    background:#f4f4f5;border:1px solid rgba(17,17,19,0.07);border-radius:0;
}
.facility-photo{margin:0;width:100%;max-width:536px;border-radius:0;overflow:hidden;background:#ececee}
.facility-photo img{width:100%;height:auto}
.facility-body{padding-right:clamp(0px,1.5vw,16px)}
.facility-k{font-size:10.5px;font-weight:700;letter-spacing:2.2px;color:var(--ink)}
.facility-t{
    margin-top:10px;
    font-size:clamp(20px,2.3vw,28px);font-weight:800;
    letter-spacing:-0.6px;line-height:1.32;color:var(--ink);
}
.facility-t b{font-weight:800;color:var(--ink)}
.facility-d{margin-top:14px;font-size:14.5px;line-height:1.85;color:#5f5f67}
.facility-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.facility-chips span{
    padding:6px 14px;border-radius:0;
    border:1px solid rgba(17,17,19,0.28);background:#fff;
    font-size:12px;font-weight:700;letter-spacing:1px;color:var(--ink);
}
.facility-src{margin-top:14px;font-size:12px;color:#9d9da5}
@media(max-width:768px){
    .facility{grid-template-columns:1fr;gap:18px}
    .facility-photo{max-width:none}
    .facility-body{padding:0 4px 6px}
}

/* About hero — the name taken apart: ALCO(HOL) + FIX */
.hero-name .panel-hero-over{
    background:linear-gradient(180deg,rgba(10,10,12,0.04) 0%,rgba(10,10,12,0.3) 48%,rgba(10,10,12,0.74) 100%);
}
.hero-name .p-eyebrow{font-size:12px;font-weight:600;letter-spacing:3.5px;opacity:0.82;margin-bottom:16px}
.hero-name .panel-hero-over .name-eq{
    display:flex;align-items:baseline;flex-wrap:wrap;gap:0 0.24em;
    font-size:clamp(36px,6.4vw,92px);
    font-weight:600;line-height:1;letter-spacing:-0.05em;
}
.ne-word{display:inline-flex;align-items:baseline}
.ne-word b{position:relative;font-weight:600}
.ne-word b::after{
    content:'';position:absolute;left:0.03em;right:0.03em;bottom:-0.13em;
    height:max(3px,0.055em);border-radius:0;
    background:#fff;
    transform:scaleX(0);transform-origin:left;
    transition:transform 0.7s cubic-bezier(0.2,0.7,0.3,1);
}
.ne-word i{font-style:normal;font-weight:600;transition:opacity 0.9s ease,font-weight 0.9s ease}
.ne-plus{font-weight:300;color:#fff}
.ne-sub{
    margin-top:clamp(18px,2.2vw,28px);
    font-size:clamp(15px,1.6vw,20px);font-weight:400;letter-spacing:-0.2px;
    color:rgba(255,255,255,0.88);
}
.ne-sub b{font-weight:700;color:#fff}
/* once the page has slid in, HOL steps back and the two halves light up */
.panel.open .ne-word i{font-weight:250;opacity:0.34;transition-delay:1s}
.panel.open .ne-word b::after{transform:scaleX(1);transition-delay:1.2s}
.panel.open .ne-plus + .ne-word b::after{transition-delay:1.4s}
@media(prefers-reduced-motion:reduce){
    .ne-word i,.ne-word b::after{transition:none}
}

/* Line breaks — headings share their lines evenly, paragraphs avoid a lone word on the last line */
.panel h2,.panel h3,.panel h4,.p-lead,.road-intro,.road-close,.vision-title,.expo-title,
.facility-t,.rm-name,.fd-line,.contact-title,.biz-title,.doc-wrap h1,.doc-wrap h2{text-wrap:balance}
.panel p,.panel li,.expo-desc,.rm-desc,.fd-list li span,.fd-rnd li span,.facility-d,
.v-card-body p,.biz-info p,.doc-wrap p,.doc-wrap li{text-wrap:pretty}
/* short two-to-three line descriptions read better with evenly shared lines */
.fd-list li span,.fd-rnd li span,.expo-desc,.rm-desc,.rt-d{text-wrap:balance}

/* Beauty line has no photograph yet — a quiet typographic block holds its place */
.biz-ph{
    height:260px;
    display:flex;flex-direction:column;justify-content:space-between;
    padding:24px;background:#ececee;color:var(--ink);
}
.biz-ph em{font-style:normal;font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:var(--ink-soft)}
.biz-ph span{font-size:clamp(26px,3vw,40px);font-weight:600;letter-spacing:-0.045em;line-height:1.05;text-transform:uppercase}
@media(max-width:768px){.biz-ph{height:200px}}

/* ===== Page bar — back on the left, the five pages centred at the top ===== */
.panel.open{z-index:510}
.panel-bar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center}
.panel-back{justify-self:start}
/* plain text links, no boxes: the current page is simply the darkest */
.panel-nav{flex:none;justify-content:center;gap:clamp(56px,6vw,110px);padding:0;border:0}
.pn{align-items:center;text-align:center;padding:8px 0;transition:color 0.25s ease}
.pn::after{display:none}
.pn-en{font-size:clamp(13px,1vw,15px);font-weight:600}
.pn:hover{color:var(--ink)}
.pn.active{color:var(--ink)}
.pn.active .pn-en{font-weight:700}
@media(max-width:900px){
    .panel-bar{display:flex}
    .panel-nav{flex:1;min-width:0;justify-content:flex-start;gap:36px}
}

/* ===== Vision — slogan pinned on the left, the story scrolls on the right ===== */
.vs{display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr)}
.vs-left{
    position:sticky;top:var(--bar-h,65px);align-self:start;
    height:calc(100vh - var(--bar-h,65px));
    display:flex;flex-direction:column;
    padding:clamp(40px,5vw,72px) clamp(24px,4vw,64px);
    border-right:1px solid var(--line);
}
.vs-eb,.vs-k{font-size:11px;font-weight:600;letter-spacing:0.22em;color:var(--ink-soft)}
.vs-title{
    margin-top:clamp(18px,2vw,28px);
    font-size:clamp(40px,5.6vw,92px);font-weight:600;
    letter-spacing:-0.06em;line-height:0.96;color:var(--ink);
}
.vs-lead{margin-top:auto;font-size:clamp(16px,1.6vw,21px);line-height:1.6;letter-spacing:-0.02em;color:var(--ink)}
.vs-lead b{font-weight:700}
.vs-count{margin-top:clamp(16px,2vw,24px);font-size:12px;letter-spacing:0.12em;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.vs-count b{font-weight:600;color:var(--ink)}
.vs-right{
    display:flex;flex-direction:column;gap:clamp(64px,9vw,120px);
    padding:clamp(40px,5vw,72px) clamp(24px,4vw,64px) clamp(80px,14vh,160px);
}
.vs-photo{margin:0;overflow:hidden;background:var(--surface)}
.vs-photo img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform 1.2s cubic-bezier(0.2,0.7,0.3,1)}
.vs-item:hover .vs-photo img{transform:scale(1.03)}
.vs-k{display:block;margin-top:24px}
.vs-h{margin-top:10px;font-size:clamp(22px,2.2vw,30px);font-weight:700;letter-spacing:-0.04em;color:var(--ink)}
.vs-item p{margin-top:12px;font-size:15px;line-height:1.85;color:#3f3f46}
.vs-values{list-style:none;margin-top:16px;border-top:1px solid var(--line)}
.vs-values li{
    display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:baseline;
    padding:14px 0;border-bottom:1px solid var(--line);
    font-size:15px;color:#3f3f46;
}
.vs-values b{font-size:17px;font-weight:700;letter-spacing:-0.03em;color:var(--ink)}
.vs-markets{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.vs-markets span{padding:7px 12px;border:1px solid var(--line);font-size:13px;color:var(--ink)}
/* each block rises in as it reaches the reader (only once the script is running) */
.vs.reveal .vs-item{opacity:0;transform:translateY(28px);transition:opacity 0.8s ease,transform 0.9s cubic-bezier(0.2,0.7,0.3,1)}
.vs.reveal .vs-item.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
    .vs.reveal .vs-item{opacity:1;transform:none;transition:none}
}
@media(max-width:900px){
    .vs{grid-template-columns:1fr}
    .vs-left{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line)}
    .vs-lead{margin-top:28px}
    .vs-count{display:none}
}

/* ===== Main menu: one column down the left, lined up with the logo ===== */
.menu-scatter{
    display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;
    gap:clamp(16px,2.6vh,28px);
    padding:clamp(20px,4vh,48px) clamp(24px,3.5vw,48px) 0;
}
.mi{position:relative;left:auto;top:auto;--fs:clamp(26px,2.8vw,44px)}
@media(max-width:768px){
    .menu-scatter{justify-content:center;padding:0 24px 20px}
}

/* ===== Main page: English words in capitals ===== */
.slogan-en,.mi-t,.foot-copy{text-transform:uppercase}
.slogan-en{letter-spacing:0.02em;font-size:calc(clamp(24px,4vw,50px) * 0.7613)}
.mi-t{letter-spacing:-0.02em}
.foot-copy{letter-spacing:0.06em}

/* ===== Core message, set on the clear sky of the main photo ===== */
.hero-copy{
    position:absolute;z-index:3;
    left:56%;right:clamp(24px,4vw,64px);top:clamp(96px,14vh,150px);
    pointer-events:none;
}
.hero-eb{font-size:12px;font-weight:600;letter-spacing:0.24em;color:var(--ink-mid)}
.hero-h{
    margin-top:12px;
    font-size:clamp(22px,2.4vw,38px);font-weight:700;
    line-height:1.32;letter-spacing:-0.03em;color:var(--ink);
}
@media(max-width:768px){
    .hero-copy{left:24px;right:24px;top:84px}
    .hero-h{font-size:20px}
}

/* ===== Menu hover: every word stays dark; the hovered one is underlined ===== */
.menu-screen[data-mode="scatter"] .menu-scatter:has(.mi:hover) .mi.show{opacity:1}
.menu-screen[data-mode="scatter"] .menu-scatter .mi.show:hover{transform:none}
.mi-t::after{background:var(--ink);height:3px;bottom:-0.12em}

/* ===== Page bar: the logo sits top-left on every page and leads back to the main screen ===== */
.panel-back{
    width:auto;height:auto;padding:4px 0;
    border:0;border-radius:0;background:none;
    transition:opacity 0.25s ease;
}
/* same size as the logo on the main screen */
.panel-back img{display:block;height:clamp(38px,3.6vw,52px);width:auto}
.panel-back:hover{background:none;border:0;opacity:0.7}
@media(max-width:900px){
    .panel-back img{height:34px}
}

/* ===== Page bar words in capitals ===== */
.pn-en{text-transform:uppercase;letter-spacing:0.02em}

/* ===== Core message on a single line ===== */
.hero-h{font-size:clamp(16px,1.45vw,22px);white-space:nowrap}
@media(max-width:768px){
    .hero-h{font-size:17px;white-space:normal}
}

/* ===== Store link sits right under the product intro ===== */
#panel-product .buy{margin-top:8px;margin-bottom:8px}

/* ===== Core message: one line on the logo's row, at the right edge ===== */
.hero-copy{
    left:auto;right:clamp(24px,3.5vw,48px);top:clamp(30px,3.6vh,40px);
    display:flex;align-items:baseline;gap:16px;
}
.hero-h{margin-top:0}
.menu-screen.active .hero-copy{animation:pgRise 1s cubic-bezier(0.2,0.7,0.2,1) 0.3s both}
@media(max-width:1100px){
    .hero-copy .hero-eb{display:none}
}
@media(max-width:768px){
    .hero-copy{left:24px;right:24px;top:84px;display:block}
    .hero-copy .hero-eb{display:block}
    .hero-h{margin-top:10px;font-size:clamp(13px,4vw,17px);white-space:nowrap}
}

/* ===== Page bar: below 1320px the nav moves right so it never runs into the logo ===== */
.panel-back img{max-width:none}
@media(min-width:901px) and (max-width:1320px){
    .panel-bar{grid-template-columns:auto minmax(0,1fr)}
    .panel-nav{justify-self:end;gap:clamp(28px,3.4vw,56px)}
}
/* a thin line draws under the page you hover, and stays under the page you are on */
.pn{position:relative}
.pn::after{
    display:block;content:'';position:absolute;left:0;right:auto;bottom:0;
    width:0;height:1.5px;background:var(--ink);transform:none;
    transition:width 0.35s cubic-bezier(0.2,0.7,0.2,1);
}
.pn:hover::after,.pn.active::after{width:100%}

/* ===== Page transitions: pages fade in place and their content rises — nothing slides sideways ===== */
@keyframes pgRise{from{opacity:0;translate:0 40px}}
@keyframes pgFade{from{opacity:0}}
@keyframes pgClear{to{opacity:0}}
@keyframes pgSettle{from{scale:1.12;filter:blur(6px)}}
.panel{
    transform:none;
    opacity:0;visibility:hidden;
    transition:opacity 0.35s ease,visibility 0s linear 0.35s;
}
.panel.open{
    opacity:1;visibility:visible;z-index:505;
    transition:opacity 0.35s ease,visibility 0s;
}
/* the page you are going to always sits above the page you are leaving */
.panel.is-current{z-index:510}
/* the white page and its bar arrive first, then the content fades up into it */
.panel.open .panel-body{animation:pgFade 0.7s cubic-bezier(0.2,0.7,0.2,1) 0.2s both}
/* leaving: the content clears away, the bar stays put */
.panel.leaving .panel-body{animation:pgClear 0.25s ease both}
/* the cover photo settles from slightly close and soft; the words above it rise one after another */
.panel.open .panel-hero-img{animation:pgSettle 2.4s cubic-bezier(0.2,0.7,0.2,1) 0.2s both}
.panel.open .panel-hero-over > *,
.panel.open .vs-left > *{animation:pgRise 1s cubic-bezier(0.2,0.7,0.2,1) 0.32s both}
.panel.open .panel-hero-over > :nth-child(2),.panel.open .vs-left > :nth-child(2){animation-delay:0.42s}
.panel.open .panel-hero-over > :nth-child(3),.panel.open .vs-left > :nth-child(3){animation-delay:0.52s}
.panel.open .panel-hero-over > :nth-child(4),.panel.open .vs-left > :nth-child(4){animation-delay:0.62s}
/* content further down waits, then rises as it scrolls into view */
.panel .rv:not(.in){opacity:0}
.panel .rv.in{animation:pgRise 0.9s cubic-bezier(0.2,0.7,0.2,1) calc(var(--rv-base,0ms) + var(--rv-d,0ms)) both}
/* the name play in the About cover resets only after the page has faded away */
.panel:not(.open) .ne-word i,.panel:not(.open) .ne-word b::after{transition-delay:0.6s}
@media(prefers-reduced-motion:reduce){
    .panel,.panel.open{transition:none}
    .panel.open .panel-body,.panel.leaving .panel-body,
    .panel.open .panel-hero-img,.panel.open .panel-hero-over > *,.panel.open .vs-left > *,
    .menu-screen.active .hero-copy{animation:none}
}

/* ===== Core message swaps with the hovered page ===== */
.hero-copy > *{transition:opacity 0.22s ease,translate 0.5s cubic-bezier(0.2,0.7,0.2,1)}
.hero-copy.is-out > *{opacity:0;translate:0 8px;transition-duration:0.16s}

/* ===== Footer band: one grey strip — mark, site links, Instagram, family site ===== */
:root{--foot-bg:#55575b}
.menu-footer{
    flex-wrap:nowrap;gap:0 clamp(20px,2.4vw,40px);
    padding:clamp(16px,2.4vh,24px) clamp(24px,3.5vw,48px);
    background:var(--foot-bg);color:#d4d4d8;font-size:13px;
}
.foot-mark{flex:none;display:block;height:clamp(34px,3vw,42px);width:auto}
.foot-main{display:flex;flex-direction:column;gap:6px;min-width:0}
.foot-links{display:flex;align-items:center;flex-wrap:wrap;gap:0}
.foot-links a{position:relative;padding:0 18px;color:#f4f4f5;font-weight:500;white-space:nowrap}
.foot-links a:first-child{padding-left:0}
.foot-links a + a::before{
    content:'';position:absolute;left:0;top:50%;
    width:1px;height:12px;margin-top:-6px;background:rgba(255,255,255,0.25);
}
.foot-links a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.foot-links .foot-strong{color:#fff;font-weight:700}
.foot-copy{margin-left:0;font-size:11px;color:#d4d4d8}
/* Instagram in plain white, like the other marks on the band */
.foot-ig{margin-left:auto;width:30px;height:30px;color:#fff}
.foot-ig:hover{transform:translateY(-1px);filter:none}
.foot-family{flex:none;display:flex;align-items:stretch}
.foot-select{
    -webkit-appearance:none;appearance:none;
    height:40px;min-width:190px;padding:0 38px 0 14px;
    border:0;border-radius:0;
    background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23111113' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center/12px 8px;
    color:var(--ink);font:500 14px/1 var(--font);cursor:pointer;
}
.foot-go{
    height:40px;padding:0 16px;border:0;border-radius:0;
    background:#d4d4d8;color:var(--ink);font:500 13px/1 var(--font);cursor:pointer;
    transition:background 0.2s ease;
}
.foot-go:hover{background:#e4e4e7}
.menu-footer a:focus-visible,.foot-select:focus-visible,.foot-go:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* the drifting words sit just above the band */
.deco-marquee{bottom:calc(var(--foot-h,88px) + clamp(10px,2vh,22px))}
.deco-track span{font-size:clamp(56px,8vw,140px)}
/* the same band closes every page */
.panel > .menu-footer{position:relative;z-index:1}
.panel-body{min-height:calc(100vh - 84px - var(--foot-h,88px))}
@media(max-width:768px){
    .menu-footer{flex-wrap:wrap;gap:12px 14px;padding:14px 20px 16px}
    .foot-mark{height:30px}
    .foot-main{flex:1 1 calc(100% - 44px)}
    .foot-links a{padding:0 10px;font-size:12px}
    .foot-ig{margin-left:0;width:26px;height:26px;align-self:center}
    .foot-family{flex:1;min-width:0}
    .foot-select{flex:1;min-width:0;height:36px}
    .foot-go{height:36px}
    .deco-marquee{bottom:calc(var(--foot-h,150px) + 8px)}
    .deco-track span{font-size:24vw}
}