/* LeShoes visual identity: charcoal, chalk and cool steel. */
body.leshoes-atelier-page { background:#17191b; }
.ls-site { --paper:#17191b; --ink:#f2f3f1; --muted:#b4babe; --copper:#a9bed0; --line:rgba(255,255,255,.17); color:#f2f3f1; background:var(--paper); }
.ls-site em { color:#a9bed0; font-style:normal; }
/* Vector symbols retain the same monochrome appearance on phones and desktops. */
.ls-site .ui-icon { display:inline-flex; flex:0 0 auto; align-items:center; justify-content:center; vertical-align:middle; line-height:1; }
.ls-site .ui-icon svg { width:1em; height:1em; }
.site-header { border-bottom-color:rgba(255,255,255,.21); background:rgba(15,17,19,.2); }
.brand { min-width:160px; }
.brand-image { display:block; height:59px; width:auto; max-width:145px; object-fit:contain; object-position:left center; }
.desktop-nav a:hover, .text-link:hover, .under-link:hover { color:#a9bed0; }
.header-contact { background:#f2f3f1; color:#1a1d1e!important; }
.header-contact:hover,.button-dark:hover { background:#b7cbd9; color:#17191b!important; }
.hero { background:#1a1c1d; }
.hero-art { filter:grayscale(1) contrast(1.08) brightness(.64); object-position:center 50%; }
.hero-shade { background:linear-gradient(90deg,#121516 0%,rgba(18,21,22,.96) 23%,rgba(18,21,22,.70) 48%,rgba(18,21,22,.07) 100%); }
.hero-eyebrow { color:#d5dde1; }
.eyebrow-line { background:#9cb3c3; }
.hero h1,.ls-site h2,.ls-site h3 { font-family:Arial,Helvetica,sans-serif; font-weight:500; letter-spacing:-.075em; }
.hero h1 { max-width:860px; font-size:clamp(72px,8.6vw,135px); line-height:.98; }
.hero-intro { color:#d7dcda; }
.button-dark { background:#f2f3f1; color:#181b1d!important; }
.text-link { color:#eff0ec!important; }
.tiny-mark { border-color:#f2f3f1; }
.intro-section { background:#17191b; }
.eyebrow { color:#a9bed0; }
.section-aside { color:#aeb5b6; }
.service-upper { color:#f0f1ef; background:#25292c; }
.service-wrapping { color:#f0f1ef; background:#20262b; }
.service-application { grid-column:1 / -1; min-height:430px; color:#f0f1ef; background:#283036; }
.service-application .service-symbol { margin:-38px 6% -60px auto; }
.service-application .service-card-content { max-width:650px; margin-top:12px; }
.service-application h3 em { color:#a9bed0; }
.service-application p { max-width:540px; }
.service-application .service-tags li { border-color:rgba(223,234,239,.29); }
.service-card { border:1px solid rgba(255,255,255,.09); }
.service-card:hover { box-shadow:0 25px 60px rgba(0,0,0,.29); }
.service-symbol { margin:auto 0 0 auto; position:relative; width:max-content; color:rgba(201,216,222,.15); font-family:Arial,Helvetica,sans-serif; font-size:clamp(130px,16vw,245px); font-weight:500; letter-spacing:-.1em; line-height:.9; }
.service-symbol span { display:block; position:absolute; right:8px; bottom:-13px; color:#a8b5bb; font-size:10px; letter-spacing:.2em; white-space:nowrap; font-weight:700; }
.service-card-content { margin-top:52px; }
.service-card h3 { font-size:clamp(46px,4.8vw,74px); }
.service-upper h3 em,.service-wrapping h3 em { color:#a9bed0; }
.service-card p { color:#d1d7d9; opacity:1; }
.service-upper .service-tags li,.service-wrapping .service-tags li { border-color:rgba(223,234,239,.29); }
.service-note { color:#a9b3b5; }
.service-note a { color:#f0f1ef; border-color:#f0f1ef; }
.explore-section { background:#1d2226; }
.explore-intro { color:#b7c0c1; }
.explore-option { color:#adb9c0; }
.explore-option:hover,.explore-option.is-active { color:#f5f6f4; }
.explore-detail { color:#afc4d3; }
.model-shell { background:#20262a; border-color:#455059; box-shadow:24px 30px 70px rgba(0,0,0,.27); }
.model-head,.model-foot { color:#aebcc4; border-color:rgba(255,255,255,.13); }
.model-status i { background:#9fb8c9; }
.model-stage { background:#fafbfc; }
.model-stage.has-shoe-3d { background:radial-gradient(ellipse at 50% 38%,#fff 0%,#f2f4f5 76%,#e5e9eb 100%); }
.model-stage.has-shoe-3d .model-rotator { display:none; }
.shoe-canvas { position:absolute; z-index:2; inset:0; display:block; pointer-events:none; }
.model-stage::after { bottom:12%; left:20%; width:65%; height:9%; background:rgba(22,28,32,.12); filter:blur(24px); }
.model-orbit { border-color:rgba(35,43,50,.11); }
.model-rotator { width:min(94%,620px); height:auto; aspect-ratio:618 / 411; overflow:hidden; transform:rotateX(var(--rx, -3deg)) rotateY(var(--ry, 4deg)); }
.ls-site .shoe-photo { display:block; width:145%; max-width:none; height:145%; object-fit:contain; transform:translate(-6%, -13%); mix-blend-mode:multiply; user-select:none; -webkit-user-drag:none; }
.model-label { color:#f4f5f5; background:#272c30; box-shadow:0 6px 20px rgba(16,24,28,.14); }
.label-upper { top:22%; right:9%; }
.label-sole { bottom:8%; left:41%; }
.label-heel { bottom:24%; left:7%; right:auto; }
.model-shell[data-mode="tomaia"] .label-upper,.model-shell[data-mode="fasciatura"] .label-sole,.model-shell[data-mode="fasciatura"] .label-heel { background:#aa302e; }
.about-section { background:#17191b; }
.about-text p { color:#bbc2c3; }
.about-text strong { color:#f3f4f2; }
.about-rule { background:#a9bed0; }
.under-link { border-color:#d9dfde; }
.about-stripe { color:#5a656a; }
.about-stripe .asterisk { color:#a9bed0; }
.about-stripe { font-family:Arial,Helvetica,sans-serif; font-weight:500; letter-spacing:-.05em; }
.contact-section { background:#111619; }
.contact-section .eyebrow,.contact-section h2 em { color:#a9bed0; }
.contact-main>p:not(.eyebrow) { color:#bdc6c8; }
.contact-email { border-color:#a9bed0; }
.contact-email { font-family:Arial,Helvetica,sans-serif; font-weight:500; }
.contact-email:hover { color:#a9bed0; }
.contact-logo { width:220px; max-width:100%; height:auto; opacity:.9; }
.contact-facts>span { color:#a9bed0; }
.footer-bottom { color:#9aa8ad; }
.footer-logo img { width:125px; height:auto; }
/* Content remains visible while images load, scripts initialize and pages are printed. */
.reveal,.reveal.is-visible { opacity:1; transform:none; transition:none; }
@media(max-width:820px) {
  .menu-toggle { border-color:#dde4e5; }
  .menu-toggle span { background:#dde4e5; }
  .mobile-nav:not([hidden]) { background:#202629; }
  .hero-shade { background:linear-gradient(90deg,#121516 0%,rgba(18,21,22,.91) 41%,rgba(18,21,22,.2) 100%); }
}
@media(max-width:600px) {
  .brand-image { height:53px; }
  .hero-art { filter:grayscale(1) contrast(1.08) brightness(.5); object-position:67% center; }
  .hero-shade { background:linear-gradient(180deg,#121516 4%,rgba(18,21,22,.93) 45%,rgba(18,21,22,.38) 100%); }
  .hero h1 { font-size:clamp(54px,12.8vw,78px); }
  .service-symbol { font-size:165px; }
  .service-card h3 { font-size:58px; }
  .about-stripe { font-size:clamp(15px,4.2vw,25px); gap:5px; }
  .contact-logo { width:125px; }
  .model-rotator { width:104%; height:auto; }
  .label-upper { top:17%; right:3%; }
  .label-sole { bottom:6%; left:37%; }
  .label-heel { bottom:23%; left:2%; right:auto; }
  .model-foot { letter-spacing:.07em; }
}

/* Animated process viewer */
.process-group { margin:25px 0 0; }
.process-heading { font-size:10px; color:#9aa8ad; letter-spacing:.18em; margin:0 0 8px; font-weight:700; }
.explore-option { padding:12px 5px; }
.explore-detail { min-height:48px; max-width:410px; line-height:1.5; text-transform:none; letter-spacing:.02em; font-size:12px; }
.model-stage { touch-action:pan-y; background:radial-gradient(ellipse at 47% 41%,#333b3e 0%,#22292c 56%,#141a1d 100%); }
.model-stage::after { display:none; }
.model-orbit { pointer-events:none; opacity:.22; }
.process-canvas { position:absolute; inset:0; width:100%; height:100%; z-index:2; }
.model-fallback { font:600 20px Arial,sans-serif; color:#cdd4d5; letter-spacing:.2em; }
.model-fallback span { color:#a9bed0; }
.model-stage.has-process-3d .model-fallback { display:none; }
.model-foot { gap:10px; }
@media(max-width:600px) { .process-group { margin-top:22px; } .explore-option { padding:11px 4px; } .explore-detail { margin-top:18px; } }

/* Ten individually selectable 3D processes. */
.process-heading {font-size:11px;letter-spacing:.15em;color:#9baeb9;margin:24px 0 10px}
.process-group .explore-options {gap:0;margin:0}
.process-group .explore-option {padding:12px 0}
.process-group .explore-option strong {font-size:18px}
.explore-layout {align-items:start}
.model-shell {position:sticky;top:100px;background:#1b2329;color:#e7eeee;border:1px solid #44515b}
.model-stage {height:440px;min-height:0;touch-action:pan-y;background:radial-gradient(ellipse at 50% 42%,#394955 0%,#1b2329 70%)}
.model-stage canvas {position:absolute;inset:0;width:100%;height:100%}
.model-stage .model-orbit {display:none}
.model-stage.has-shoe-3d .model-fallback {display:none}
.model-head,.model-foot {color:#b9c8d1;border-color:#40515c}
.process-caption {padding:18px 24px;border-top:1px solid #40515c;display:grid;gap:8px}
.process-caption strong {font-size:17px;font-weight:500;color:#fff}
.process-caption span,.process-note {font-size:12px;color:#acbecb}
.process-controls {display:flex;flex-wrap:wrap;gap:8px;padding:0 24px;align-items:center}
.process-controls button {background:#2b3943;border:1px solid #637784;padding:9px 12px;color:white;border-radius:3px;cursor:pointer;font:inherit;font-size:12px}
.process-controls label {display:flex;align-items:center;gap:8px;flex:1;font-size:11px;min-width:130px}
.process-controls input {width:100%;min-width:60px;accent-color:#bbd5e7}
.process-controls button:focus-visible,.model-stage:focus-visible {outline:2px solid #d5edf9;outline-offset:3px}
.process-note {margin:14px 24px}.model-foot{font-size:9px}
@media(max-width:1000px){.model-shell{position:relative;top:0}.model-stage{height:390px}}
@media(max-width:600px){.model-stage{height:320px}.process-controls{padding:0 15px}.process-caption{padding:15px}.process-controls label{flex-basis:100%;order:3}.process-note{margin-left:15px}.process-group .explore-option strong{font-size:17px}}



.model-stage.has-shoe-3d {background:radial-gradient(ellipse at 50% 42%,#394955 0%,#1b2329 70%)}
@media(max-width:600px){.service-application{min-height:500px}.service-application .service-symbol{font-size:155px;margin:24px 6% 0 auto}.service-application .service-card-content{margin-top:18px}.service-application h3{font-size:clamp(42px,11vw,58px)}}

/* Keep the viewer beside the fully expanded choices, including on shorter screens. */
/* clip avoids the scrolling ancestor that prevented position:sticky from working. */
.ls-site {overflow:clip}
.explore-section {--explore-top:24px}
body.admin-bar .explore-section {--explore-top:56px}
@media(min-width:821px) {
  .model-shell {position:sticky;top:var(--explore-top);display:flex;flex-direction:column;max-height:calc(100dvh - var(--explore-top) - 24px)}
  .model-shell .model-stage {flex:1 1 auto;height:clamp(180px,calc(100dvh - var(--explore-top) - 318px),440px)}
  .model-head,.model-foot,.process-caption,.process-controls,.process-note {flex-shrink:0}
}
@media(max-width:820px) {
  .model-shell {position:relative;top:0;max-height:none;scroll-margin-top:20px}
}