/*
Theme Name: YUNSHAN
Author: ZeroY
Description: Custom beauty packaging — YUNSHAN Packaging marketing site.
*/

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--color-canvas);color:var(--color-ink);font-family:var(--font-body);font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:500;line-height:1.12;letter-spacing:-.01em;margin:0 0 .5em;text-wrap:balance}
p{margin:0 0 1em}
a{color:inherit;text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}
::selection{background:var(--color-signal);color:#fff}

.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.container--narrow{max-width:820px}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--color-espresso);color:var(--color-canvas);padding:.7em 1em;z-index:100}
.skip-link:focus{left:12px;top:12px}

/* ---------- Typography helpers ---------- */
.eyebrow{font-size:.72rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--color-signal);margin:0 0 1rem}
.section__title{font-size:clamp(2rem,4vw,2.75rem);max-width:20ch}
.section__lede{font-size:1.1rem;max-width:var(--measure);color:var(--color-ink-soft)}
.section__note{max-width:var(--measure);color:var(--color-ink-soft);font-size:.95rem}
.section{padding-block:var(--space-section)}
.section--tint{background:var(--color-surface-warm)}

/* ---------- Buttons ---------- */
.button{display:inline-flex;align-items:center;gap:.5em;padding:.85em 1.4em;border-radius:var(--radius-control);font-weight:600;font-size:.95rem;letter-spacing:.01em;text-decoration:none;border:1.5px solid transparent;transition:transform .15s ease,background .15s ease,color .15s ease,border-color .15s ease}
.button:hover{transform:translateY(-1px)}
.button--solid,.button--signal{background:var(--color-espresso);color:var(--color-canvas)}
.button--solid:hover,.button--signal:hover{background:#241b16}
.button--ghost{background:transparent;color:var(--color-espresso);border-color:var(--color-espresso)}
.button--ghost:hover{background:var(--color-espresso);color:var(--color-canvas)}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--color-canvas) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--color-line)}
.site-header__inner{max-width:var(--container);margin-inline:auto;padding:.9rem var(--gutter);display:flex;align-items:center;gap:2rem}
.brand{display:inline-flex;flex-direction:column;line-height:1;text-decoration:none;letter-spacing:.02em}
.brand__mark{font-family:var(--font-display);font-weight:500;font-size:1.5rem;letter-spacing:.16em}
.brand__sub{font-size:.6rem;font-weight:600;letter-spacing:.42em;color:var(--color-ink-soft);margin-top:.35rem}
.nav-desktop{display:flex;gap:1.75rem;margin-left:auto;align-items:center}
.nav-desktop a{font-size:.92rem;font-weight:500;text-decoration:none;position:relative}
.nav-desktop a::after{content:"";position:absolute;left:0;right:100%;bottom:-.35rem;height:2px;background:var(--color-signal);transition:right .2s ease}
.nav-desktop a:hover::after{right:0}
.header-cta{margin-left:.25rem}
.nav-mobile{display:none}

/* Mobile disclosure */
.nav-toggle{background:none;border:1.5px solid var(--color-espresso);border-radius:var(--radius-control);padding:.6em .9em;font:inherit;font-size:.92rem;font-weight:600;color:var(--color-espresso);cursor:pointer}
.nav-panel{display:flex;flex-direction:column;gap:.5rem;padding:1rem 0 0}
.nav-panel a{padding:.5rem .25rem;text-decoration:none;font-size:1.05rem;border-bottom:1px solid var(--color-line)}

/* ---------- Hero ---------- */
.hero{padding-block:clamp(44px,5.2vw,78px) clamp(44px,4.8vw,68px);border-bottom:1px solid var(--color-line)}
.hero__title{font-size:clamp(2.7rem,6.4vw,4.6rem);margin:.4rem 0 1.2rem;max-width:15ch}
.hero__lede{font-size:clamp(1.05rem,1.6vw,1.25rem);max-width:58ch;color:var(--color-ink-soft);margin-bottom:2rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:2.5rem}
.hero__facts{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem 2rem;margin:0;padding:1.4rem 0 0;border-top:1px solid var(--color-line)}
.hero__facts li{font-size:.88rem;font-weight:600;letter-spacing:.03em;color:var(--color-ink);display:flex;align-items:center;gap:.55em}
.hero__facts li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--color-signal);flex:none}
.hero__quote{margin:1.15rem 0 0;max-width:34ch}
.hero__quote blockquote{margin:0;font-size:.9rem;line-height:1.55;color:var(--color-ink-soft)}
.hero__quote cite{display:block;margin-top:.4rem;font-style:normal;font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--color-ink-soft)}

/* ---------- Cards ---------- */
.card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;margin-top:2.5rem}
.card-grid--three{grid-template-columns:repeat(3,1fr)}
.card{background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-card);padding:1.6rem}
.card h3{font-size:1.35rem;margin-bottom:.5rem}
.card p{margin:0;color:var(--color-ink-soft);font-size:.98rem}

/* ---------- Service list ---------- */
.service-list{list-style:none;margin:2.5rem 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--color-line)}
.service-list li{padding:1.6rem 1.6rem 1.6rem 0;border-bottom:1px solid var(--color-line)}
.service-list li:nth-child(odd){padding-right:2.5rem}
.service-list li:nth-child(even){padding-left:2.5rem;border-left:1px solid var(--color-line)}
.service-list h3{font-size:1.3rem;margin-bottom:.4rem}
.service-list p{margin:0;color:var(--color-ink-soft);font-size:.98rem;max-width:52ch}

/* ---------- Steps ---------- */
.steps{list-style:none;margin:2.5rem 0 1.5rem;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.steps li{background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-card);padding:1.5rem}
.steps__num{display:inline-block;font-family:var(--font-display);font-size:1.1rem;color:var(--color-signal);font-weight:500;margin-bottom:.6rem}
.steps h3{font-size:1.2rem;margin-bottom:.4rem}
.steps p{margin:0;color:var(--color-ink-soft);font-size:.95rem}

/* ---------- About ---------- */
.about{display:grid;grid-template-columns:1.4fr .9fr;gap:clamp(2rem,5vw,4rem);align-items:start;margin-top:2rem}
.about__text p{font-size:1.08rem;color:var(--color-ink-soft);max-width:var(--measure)}
.about__facts{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:1.25rem 1.5rem}
.about__facts div{border-top:1px solid var(--color-line);padding-top:.9rem}
.about__facts dt{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--color-ink-soft);margin-bottom:.4rem}
.about__facts dd{margin:0;font-family:var(--font-display);font-size:1.5rem}

/* ---------- Start a project / form ---------- */
.section--cta{background:var(--color-espresso);color:var(--color-canvas)}
.section--cta .eyebrow{color:var(--color-canvas)}
.section--cta .section__title,.section--cta .section__lede{color:var(--color-canvas)}
.section--cta .section__lede{color:#e0d5cd}
.project-form{margin-top:2.5rem}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-bottom:1.5rem}
.field{display:flex;flex-direction:column;gap:.45rem;font-size:.85rem;font-weight:600;letter-spacing:.04em}
.field--wide{grid-column:1/-1}
.field span{color:#e6ddd6}
.field input,.field select,.field textarea{font:inherit;font-size:1rem;padding:.7em .85em;border-radius:var(--radius-control);border:1.5px solid #6a5a50;background:#2e241f;color:var(--color-canvas);width:100%}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#c9b9ae 50%),linear-gradient(135deg,#c9b9ae 50%,transparent 50%);background-position:calc(100% - 1.1em) 1.25em,calc(100% - .75em) 1.25em;background-size:8px 8px;background-repeat:no-repeat;padding-right:2.6em}
.field textarea{resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#a8978c}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--color-signal)}
.field input[type=file]{padding:.6em;font-size:.9rem;background:#2e241f}
.form-status{min-height:1.5em;margin:1rem 0 0;font-size:.95rem}
.form-status[data-state=error]{color:#ffb0b8}
.form-status[data-state=success]{color:#bfe6c2}

/* ---------- Footer ---------- */
.site-footer{background:var(--color-canvas);border-top:1px solid var(--color-line);padding-block:clamp(48px,7vw,80px) 0}
.site-footer__inner{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem}
.brand--footer{margin-bottom:1rem}
.site-footer__tagline{color:var(--color-ink-soft);max-width:34ch;font-size:.95rem}
.site-footer__nav{display:flex;flex-direction:column;gap:.6rem}
.site-footer__nav a{text-decoration:none;font-size:.95rem}
.site-footer__nav a:hover{color:var(--color-signal)}
.site-footer__contact{font-size:.92rem;color:var(--color-ink-soft)}
.site-footer__line{margin:0 0 .5em}
.site-footer__legal{max-width:var(--container);margin:2.5rem auto 0;padding:1.5rem var(--gutter);border-top:1px solid var(--color-line);font-size:.82rem;color:var(--color-ink-soft)}

/* ---------- Archives / singles (index.php components) ---------- */
main:not(#main){max-width:var(--container);margin-inline:auto;padding:clamp(48px,8vw,96px) var(--gutter)}
.post-list{list-style:none;padding:0;margin:2rem 0;display:grid;gap:2.5rem}
.post-list h2{margin:0 0 .4em;font-size:clamp(1.5rem,3vw,2.25rem)}
.post-list h2 a{text-decoration:none}
.post-list__image{display:block;margin-bottom:1rem}
.pagination{display:flex;gap:1rem;margin-top:2.5rem}
.zeroy-breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.5em;padding:0;margin:0 0 1.5rem;font-size:.9rem;opacity:.8}
.zeroy-breadcrumbs li+li::before{content:"/";margin-right:.5em;opacity:.5}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .card-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .service-list{grid-template-columns:1fr}
  .service-list li,.service-list li:nth-child(odd),.service-list li:nth-child(even){padding:1.4rem 0;border-left:0}
  .about{grid-template-columns:1fr}
}
@media (max-width:860px){
  .nav-desktop,.header-cta{display:none}
  .nav-mobile{display:block;margin-left:auto}
  .site-footer__inner{grid-template-columns:1fr;gap:2rem}
}
@media (max-width:640px){
  body{font-size:16px}
  .card-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .hero__facts{flex-direction:column;gap:.5rem}
}

/* ---------- Logo ---------- */
.brand{align-items:flex-start}
.brand__logo{height:clamp(46px,5vw,64px);width:auto;display:block}
.brand--footer .brand__logo{height:clamp(54px,6vw,78px)}

/* ---------- CTA contact note ---------- */
.section--cta .section__note{color:#c9b9ae;margin-top:1.5rem;font-size:.95rem}
.section--cta .section__note a{color:var(--color-canvas);text-decoration:underline;text-underline-offset:2px}

/* ---------- Product grid & cards ---------- */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.5rem 0 2rem}
.chip{display:inline-flex;align-items:center;padding:.45em 1em;border:1px solid var(--color-line);border-radius:999px;font-size:.9rem;text-decoration:none;color:var(--color-ink);background:var(--color-canvas);transition:border-color .15s}
.chip:hover{border-color:var(--color-signal)}
.chip.is-active{background:var(--color-espresso);border-color:var(--color-espresso);color:var(--color-canvas)}
.chips--static{margin:0}
.chip--static{font-size:.82rem}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem;margin-top:.5rem}
.pcard{display:flex;flex-direction:column;text-decoration:none;color:inherit;border:1px solid var(--color-line);border-radius:var(--radius-card);overflow:hidden;background:var(--color-surface);transition:box-shadow .2s,transform .2s}
.pcard:hover{box-shadow:0 14px 34px -22px rgba(57,45,38,.45);transform:translateY(-2px)}
.pcard__media{aspect-ratio:1/1;background:#efe7df;display:flex;align-items:center;justify-content:center;overflow:hidden}
.pcard__img{width:100%;height:100%;object-fit:contain;display:block}
.pcard__ph{font-family:var(--font-display);letter-spacing:.28em;font-size:.8rem;color:var(--color-ink-soft)}
.pcard__body{padding:1.1rem 1.2rem 1.3rem}
.pcard__range{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--color-signal)}
.pcard__title{margin:.35rem 0 .35rem;font-size:1.15rem}
.pcard__meta{margin:0;font-size:.88rem;color:var(--color-ink-soft)}
.pempty{color:var(--color-ink-soft);max-width:var(--measure)}
.pagination{display:flex;gap:1rem;margin-top:2.5rem;align-items:center;flex-wrap:wrap}
.pagination .nav-links{display:flex;gap:.5rem;flex-wrap:wrap}
.pagination a,.pagination span.current{padding:.4em .9em;border:1px solid var(--color-line);border-radius:8px;text-decoration:none}

/* ---------- Single product ---------- */
.crumbs{font-size:.85rem;color:var(--color-ink-soft);display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:2rem}
.crumbs a{text-decoration:none}
.product-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.product-media{display:grid;gap:.75rem}
.product-media__item{border-radius:var(--radius-card);overflow:hidden;background:#efe7df;border:1px solid var(--color-line)}
.product-media__img{width:100%;height:auto;display:block}
.product-media__ph{aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;border:1px solid var(--color-line);border-radius:var(--radius-card);font-family:var(--font-display);letter-spacing:.3em;color:var(--color-ink-soft)}
.product-title{font-size:clamp(2rem,4vw,3rem);margin:.2rem 0 .8rem}
.product-lede{color:var(--color-ink-soft);max-width:52ch;font-size:1.05rem}
.product-facts{list-style:none;margin:1.75rem 0;padding:0;display:grid;gap:.1rem}
.product-facts li{display:flex;justify-content:space-between;gap:1rem;padding:.75rem 0;border-top:1px solid var(--color-line);font-size:.95rem}
.product-facts li span{color:var(--color-ink-soft)}
.product-decor{margin:1.5rem 0}
.product-decor h2{font-size:.95rem;letter-spacing:.04em;margin-bottom:.6rem}
.spec-table{width:100%;border-collapse:collapse;margin-top:1.5rem;font-size:.95rem}
.spec-table th{text-align:left;color:var(--color-ink-soft);font-weight:600;width:42%;padding:.85rem .5rem .85rem 0;border-top:1px solid var(--color-line);vertical-align:top}
.spec-table td{padding:.85rem 0;border-top:1px solid var(--color-line)}
.product-body img{border-radius:var(--radius-card)}

@media (max-width:1024px){
  .product-hero{grid-template-columns:1fr}
  .pgrid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .pgrid{grid-template-columns:1fr}
}

/* ---------- Linked cards (homepage categories) ---------- */
a.card{display:block;text-decoration:none;color:inherit;transition:border-color .2s,transform .2s}
a.card:hover{border-color:var(--color-signal);transform:translateY(-2px)}

/* ---------- Section head with inline link ---------- */
.section__head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:.5rem}
.section__head .section__title{margin-bottom:0}
.textlink{font-weight:600;font-size:.95rem;text-decoration:none;color:var(--color-signal);white-space:nowrap}
.textlink:hover{text-decoration:underline}

/* ---------- Phase-1 image placeholders (visual, not blank) ---------- */
.media{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.55rem;background:radial-gradient(130% 130% at 28% 18%,#f4ede5 0%,#e7dbcd 55%,#dbcbb9 100%);color:#a08a72;overflow:hidden}
.media::before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(45deg,rgba(120,90,60,.05) 0 1px,transparent 1px 12px);pointer-events:none}
/* The hatch is a placeholder texture: once a real photo is in the box it goes
   away, so the picture keeps its own texture instead of a drawn-on pattern. */
.media:has(> img)::before{content:none}
.media svg{width:30px;height:30px;stroke:currentColor;fill:none;stroke-width:1.4;opacity:.72;position:relative}
.media__cap{position:relative;font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:#a08a72}

.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.hero__visual{aspect-ratio:1/1;min-height:320px;max-height:520px;border-radius:calc(var(--radius-card) + 8px);border:1px solid var(--color-line)}
.hero__visual svg{width:46px;height:46px}

.card--media{padding:0;overflow:hidden;display:flex;flex-direction:column;align-items:stretch;gap:0}
.card--media .card__media{height:auto;aspect-ratio:1/1;border-radius:0}
.card--media .card__body{padding:1.3rem 1.4rem 1.5rem}
.card--media .card__body p{margin:0;color:var(--color-ink-soft);font-size:.95rem}

.about__media{grid-column:1 / -1;aspect-ratio:4/3;height:auto;border-radius:var(--radius-card);margin-bottom:.6rem;background:var(--color-espresso)}
.about__img{width:100%;height:100%;object-fit:cover;object-position:44% 46%;display:block;filter:saturate(.66) contrast(.98) brightness(1.04) sepia(.1)}
.about__media:has(.about__img)::before{content:none}
.about__media:has(.about__img)::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(57,45,38,.42) 0%,rgba(57,45,38,.05) 42%,rgba(57,45,38,.32) 100%)}
@media (min-width:760px){
  .about__media{aspect-ratio:16/6}
}

/* ---------- Full-bleed factory band (About) ---------- */
.factory-band{position:relative;width:100%;overflow:hidden;background:var(--color-espresso);line-height:0}
.factory-band .about__img{width:100%;height:clamp(240px,30vw,440px);object-fit:cover;object-position:50% 50%;display:block}
.factory-band::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(57,45,38,.46) 0%,rgba(57,45,38,.04) 38%,rgba(57,45,38,.07) 62%,rgba(57,45,38,.42) 100%)}
.factory-band:not(:has(.about__img)){display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.55rem;height:clamp(240px,30vw,440px);color:#a08a72;line-height:1.2}

/* ---------- Factory photo strip ---------- */
.factory-strip{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(6px,.8vw,14px);background:var(--color-espresso);line-height:0}
.factory-strip::before{content:"";position:absolute;inset:0 0 auto;height:26%;background:linear-gradient(180deg,rgba(57,45,38,.34),rgba(57,45,38,0));pointer-events:none;z-index:2}
.factory-strip__item{margin:0;overflow:hidden}
.factory-strip__img{display:block;width:100%;height:clamp(200px,24vw,320px);object-fit:cover;object-position:50% 45%;filter:saturate(.72) brightness(1.03) contrast(.96)}
@media (max-width:759px){
  .factory-strip__img{height:auto;aspect-ratio:1/1}
}

/* ---------- About: portrait hero ---------- */
.about-hero{display:grid;grid-template-columns:1fr;gap:clamp(1.75rem,4vw,3rem);align-items:center}
.about-hero__media{margin:0}
.about-hero__img{display:block;width:100%;height:auto;border-radius:var(--radius-card);object-fit:cover}
@media (min-width:760px){
  .about-hero{grid-template-columns:1.25fr .82fr;gap:clamp(2rem,5vw,4rem)}
  .about-hero__img{aspect-ratio:4/5;object-position:50% 18%}
}

/* ---------- Founder story ---------- */
.founder{margin-top:clamp(2.5rem,6vw,4.25rem)}
.founder__block{display:grid;grid-template-columns:1fr;gap:.5rem;padding:1.6rem 0;border-top:1px solid var(--color-line)}
.founder__block:last-child{border-bottom:1px solid var(--color-line)}
.founder__label{display:flex;align-items:baseline;gap:.6rem}
.founder__num{font-family:var(--font-display);font-size:.78rem;letter-spacing:.1em;color:var(--color-signal)}
.founder__block h2{font-size:1.3rem;margin:0}
.founder__block p{margin:0 0 .7rem;color:var(--color-ink-soft)}
.founder__block p:last-child{margin-bottom:0}
.founder__list,.founder__chips{list-style:none;margin:.1rem 0 0;padding:0}
.founder__list{display:grid;grid-template-columns:1fr;gap:.5rem}
.founder__list li{font-size:.95rem;line-height:1.55;color:var(--color-ink-soft)}
.founder__list li strong{color:var(--color-ink);font-weight:600}
.founder__block .founder__after{margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--color-line);color:var(--color-ink);font-size:.95rem}
.founder__chips{display:flex;flex-wrap:wrap;gap:.42rem}
.founder__chips li{font-size:.75rem;letter-spacing:.05em;text-transform:uppercase;padding:.4em .75em;border:1px solid var(--color-line);border-radius:999px;color:var(--color-ink-soft);background:#fff}
@media (min-width:760px){
  .founder__block{grid-template-columns:.62fr 1.7fr;gap:clamp(1.25rem,3vw,2.5rem);align-items:start}
  .founder__label{display:block}
  .founder__num{display:block;margin-bottom:.3rem}
  .founder__block h2{font-size:1.42rem;line-height:1.2}
}

.pcard__media{background:radial-gradient(130% 130% at 28% 18%,#f4ede5 0%,#e7dbcd 55%,#dbcbb9 100%)}
.pcard__media:has(.pcard__img){background:#fff}
.pcard__ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;color:#a08a72;width:100%;height:100%}
.pcard__ph svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.4;opacity:.72}

@media (max-width:900px){
  .hero__grid{grid-template-columns:1fr}
  .hero__visual{aspect-ratio:16/10;min-height:0;max-height:none}
}

/* ---------- Hero visual tile board ---------- */
.hero__visual{padding:clamp(.8rem,2vw,1.2rem)}
.hero__tiles{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;width:100%;flex:1;min-height:0}
.hero__tile{display:flex;align-items:center;justify-content:center;border:1px dashed rgba(160,138,114,.55);border-radius:10px;background:rgba(255,255,255,.3);color:#a08a72;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase}

/* ---------- Cookie consent ---------- */
.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:999;background:var(--color-espresso);color:var(--color-canvas);box-shadow:0 -14px 40px -24px rgba(0,0,0,.55);padding:1.05rem 0}
.cookie-banner__inner{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap}
.cookie-banner__text{margin:0;flex:1 1 300px;font-size:.95rem;line-height:1.55;color:#e0d5cd;max-width:70ch}
.cookie-banner__actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-left:auto}
.cookie-banner__btn{font:inherit;font-weight:600;font-size:.92rem;letter-spacing:.01em;padding:.62em 1.25em;border-radius:var(--radius-control);cursor:pointer;border:1.5px solid transparent;transition:background .15s,color .15s,border-color .15s,transform .15s}
.cookie-banner__btn:hover{transform:translateY(-1px)}
.cookie-banner__btn--ghost{background:transparent;color:var(--color-canvas);border-color:rgba(247,243,239,.55)}
.cookie-banner__btn--ghost:hover{background:rgba(247,243,239,.12)}
.cookie-banner__btn--solid{background:var(--color-signal);color:#fff}
.cookie-banner__btn--solid:hover{background:#e00147}
.cookie-settings-link{background:none;border:none;padding:0;font:inherit;font-size:.82rem;color:var(--color-ink-soft);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.cookie-settings-link:hover{color:var(--color-signal)}
.site-footer__legal{display:flex;align-items:center;justify-content:space-between;gap:.75rem 1rem;flex-wrap:wrap}
.site-footer__legal p{margin:0}


/* category card media images */
.card--media .card__media.media--img{display:block;background:#f4efe9;padding:0}
.card--media .card__media.media--img::before{display:none}
.card--media .card__media.media--img .card__media-img,.card--media .card__media.media--img img{width:100%;height:100%;object-fit:cover;display:block}
.card--family-makeup .card__media img{object-position:50% 50%}
.card--family-skincare .card__media img{object-position:50% 50%}
.card--family-custom .card__media img{object-position:66% 50%}

/* ---------- Page scaffolding (framework layer) ---------- */
.page-head{padding-block:clamp(56px,8vw,100px) clamp(24px,4vw,40px);border-bottom:1px solid var(--color-line)}
.page-head__title{font-family:var(--font-display);font-size:clamp(2.2rem,5vw,3.4rem);line-height:1.05;margin:.4rem 0 1rem;max-width:20ch}
.page-head__lede{font-size:clamp(1.02rem,1.6vw,1.2rem);color:var(--color-ink-soft);max-width:60ch;margin:0}

.prose{max-width:var(--measure);color:var(--color-ink)}
.prose p,.prose li{font-size:1.02rem;line-height:1.7;color:var(--color-ink-soft)}
.prose h2{margin:2rem 0 .6rem;font-size:1.5rem}
.prose h3{margin:1.5rem 0 .5rem;font-size:1.2rem}
.prose a{color:var(--color-signal)}
.prose ul,.prose ol{padding-left:1.2rem}
.prose p.prose__lede{font-size:1.18rem;line-height:1.6;color:var(--color-ink)}
.prose figure{margin:0}
/* A pair of photographs that breaks out of the reading column */
.prose .media-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(8px,1.2vw,16px);margin:2.2rem 0;position:relative;left:50%;transform:translateX(-50%);width:min(820px,calc(100vw - 2*var(--gutter)))}
.media-pair img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 26%;border-radius:var(--radius-card);display:block}
.media-pair figcaption{margin-top:.55rem;font-size:.8rem;line-height:1.5;color:var(--color-ink-soft)}
/* A photo mosaic an article can open with: one wide establishing shot, then three portraits */
.media-mosaic{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,1.1vw,14px);margin:1.6rem 0 2.2rem;position:relative;left:50%;transform:translateX(-50%);width:min(980px,calc(100vw - 2*var(--gutter)))}
.media-mosaic figure{margin:0;min-width:0}
.media-mosaic .m-full{grid-column:1/-1}
.media-mosaic img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 45%;border-radius:var(--radius-card);display:block}
.media-mosaic .m-full img{aspect-ratio:21/9;object-position:50% 55%}
.media-mosaic figcaption{margin-top:.5rem;font-size:.78rem;line-height:1.45;color:var(--color-ink-soft)}
.media-mosaic .m-zoom{overflow:hidden;border-radius:var(--radius-card);line-height:0}
.media-mosaic .m-zoom img{transform:scale(1.5);transform-origin:37% 30%;border-radius:0}
@media(max-width:640px){.media-mosaic{grid-template-columns:1fr}.media-mosaic .m-full img{aspect-ratio:16/9}.media-mosaic .m-zoom img{transform:scale(1.35);transform-origin:40% 32%}}
/* Three upright photos in a row (portrait sources) */
.media-mosaic.is-portrait img{aspect-ratio:3/4;object-position:50% 42%}
@media(max-width:640px){.media-mosaic.is-portrait img{aspect-ratio:4/3;object-position:50% 30%}}

.card--link{color:inherit;text-decoration:none}
.card__title{font-size:1.2rem;margin:0 0 .4rem}
.card__excerpt{margin:0;color:var(--color-ink-soft);font-size:.95rem}
.card--media .card__body{padding:1.2rem 1.3rem 1.4rem}

.breadcrumb{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;font-size:.8rem;letter-spacing:.04em;color:var(--color-ink-soft);margin-bottom:1.2rem}
.breadcrumb a{color:var(--color-ink-soft);text-decoration:none}
.breadcrumb a:hover{color:var(--color-signal)}
.breadcrumb span[aria-current]{color:var(--color-ink)}

.record__media{margin:1.6rem 0;border-radius:var(--radius-card);overflow:hidden}
.record__media img{width:100%;height:auto;display:block;max-height:540px;object-fit:cover;object-position:50% 22%}
.record__fields{display:grid;grid-template-columns:1fr 1fr;gap:1rem 2rem;margin:2rem 0;border-top:1px solid var(--color-line);padding-top:1.2rem}
.record__fields dt{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--color-ink-soft);margin-bottom:.3rem}
.record__fields dd{margin:0;font-size:.98rem}
.record__cta{margin-top:2rem}

.contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.contact-details{border-left:1px solid var(--color-line);padding-left:clamp(1.5rem,3vw,2.5rem)}
.contact-details h2{font-size:1.3rem;margin:0 0 1rem}
.contact-details p{margin:0 0 .9rem;font-size:.95rem;color:var(--color-ink-soft)}
.contact-details__label{display:block;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--color-ink);margin-bottom:.2rem}
.contact-details__note{font-style:italic}
.contact-details a{color:var(--color-signal)}

.search-form{display:flex;gap:.6rem;margin:1.4rem 0 2rem;max-width:560px}
.search-form input[type=search]{flex:1;padding:.7rem .9rem;border:1px solid var(--color-line);border-radius:var(--radius-card);font:inherit;background:var(--color-surface)}
.search-form .button{padding:.7rem 1.2rem}

.callout{background:var(--color-surface-warm);border-radius:var(--radius-card);padding:1.4rem 1.6rem;margin:1.6rem 0}
.callout h2{font-size:1.15rem;margin:0 0 .6rem}
.callout ol{margin:0;padding-left:1.2rem;color:var(--color-ink-soft)}

.pagination{margin-top:2.5rem}
.pagination .nav-links{display:flex;gap:.5rem;flex-wrap:wrap}
.pagination a,.pagination span{display:inline-flex;padding:.45rem .8rem;border:1px solid var(--color-line);border-radius:8px;text-decoration:none;color:inherit;font-size:.9rem}
.pagination .current{background:var(--color-espresso);color:var(--color-canvas);border-color:var(--color-espresso)}

.page-links a{color:var(--color-signal);text-decoration:none}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Primary nav dropdown */
.nav-dropdown{position:relative;display:inline-flex;align-items:center}
.nav-dropdown__toggle{display:inline-flex;align-items:center;gap:.3rem}
.nav-dropdown__menu{position:absolute;top:calc(100% + .6rem);left:0;min-width:210px;background:var(--color-canvas);border:1px solid var(--color-line);border-radius:10px;padding:.5rem;display:none;flex-direction:column;gap:.1rem;box-shadow:0 18px 40px -24px rgba(57,45,38,.45);z-index:60}
.nav-dropdown__menu a{padding:.5rem .7rem;border-radius:6px;text-decoration:none;color:inherit;font-size:.9rem}
.nav-dropdown__menu a::after{display:none}
.nav-dropdown__menu a:hover{background:var(--color-surface-warm);color:var(--color-signal)}
.nav-dropdown:hover .nav-dropdown__menu,.nav-dropdown:focus-within .nav-dropdown__menu{display:flex}
.nav-panel__sub{padding-left:1rem;font-size:.92rem;opacity:.85}

/* Footer: four columns with resource + legal links */
.site-footer__inner{grid-template-columns:1.4fr 1fr 1fr 1.1fr}
.site-footer__heading{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--color-ink);margin:0 0 .6rem}
.site-footer__legal-links a{color:var(--color-ink-soft);text-decoration:none}
.site-footer__legal-links a:hover{color:var(--color-signal)}
.is-placeholder{opacity:.9}

@media (max-width:900px){
  .contact-grid{grid-template-columns:1fr}
  .contact-details{border-left:0;padding-left:0;border-top:1px solid var(--color-line);padding-top:1.5rem}
  .record__fields{grid-template-columns:1fr}
  .site-footer__inner{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .site-footer__inner{grid-template-columns:1fr}
}

/* Product category tree (3 levels) — SEO hub + interlinking */
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1.6rem 0 2rem}
.cat-grid--children{grid-template-columns:repeat(3,1fr)}
.cat-card{display:flex;flex-direction:column;gap:.4rem;padding:1.1rem 1.2rem;border:1px solid var(--color-line);border-radius:var(--radius-card);background:var(--color-surface);text-decoration:none;color:inherit;transition:border-color .18s ease,transform .18s ease}
.cat-card:hover{border-color:var(--color-signal);transform:translateY(-2px)}
.cat-card h2{font-size:1rem;margin:0;letter-spacing:.01em}
.cat-card p{margin:0;font-size:.82rem;color:var(--color-ink-soft);line-height:1.5}
@media (max-width:900px){.cat-grid,.cat-grid--children{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.cat-grid,.cat-grid--children{grid-template-columns:1fr}}

/* Two films on the About page — click to load, nothing is fetched from YouTube until asked */
.ys-videos{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.2vw,30px);margin-top:clamp(22px,3vw,36px)}
.ys-video{margin:0}
.ys-video__frame{position:relative;display:block;overflow:hidden;border-radius:var(--radius-card);background:var(--color-espresso);box-shadow:0 1px 0 rgba(57,45,38,.05),0 24px 50px -34px rgba(57,45,38,.6);outline-offset:3px}
.ys-video__frame::before{content:"";display:block;padding-top:56.25%}
.ys-video__poster,.ys-video__frame iframe{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;border:0}
.ys-video__veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(57,45,38,0) 42%,rgba(57,45,38,.62));transition:opacity .35s ease}
.ys-video__play{position:absolute;left:50%;top:50%;width:clamp(58px,5.4vw,74px);height:clamp(58px,5.4vw,74px);transform:translate(-50%,-50%);border-radius:50%;background:rgba(255,253,249,.95);display:grid;place-items:center;box-shadow:0 12px 34px rgba(0,0,0,.3);transition:transform .3s ease,background .3s ease}
.ys-video__play::after{content:"";width:0;height:0;margin-left:5px;border-left:16px solid var(--color-signal);border-top:10px solid transparent;border-bottom:10px solid transparent}
.ys-video__frame:hover .ys-video__play,.ys-video__frame:focus-visible .ys-video__play{transform:translate(-50%,-50%) scale(1.07);background:#fff}
.ys-video__frame:hover .ys-video__veil{opacity:.86}
.ys-video__tag{position:absolute;left:clamp(14px,1.5vw,20px);bottom:clamp(12px,1.3vw,18px);color:#fff;font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.ys-video figcaption{margin-top:.75rem;color:var(--color-ink-soft);font-size:.92rem;line-height:1.55;max-width:46ch}
.ys-video__frame.is-playing .ys-video__poster,.ys-video__frame.is-playing .ys-video__veil,.ys-video__frame.is-playing .ys-video__play,.ys-video__frame.is-playing .ys-video__tag{display:none}
@media (max-width:720px){.ys-videos{grid-template-columns:1fr}.ys-video figcaption{max-width:none}}

/* Floating WhatsApp button — every page, bottom right, with the first message pre-filled */
.wa-float{position:fixed;right:calc(clamp(14px,2vw,24px) + env(safe-area-inset-right,0px));bottom:calc(clamp(14px,2.2vw,26px) + env(safe-area-inset-bottom,0px));z-index:70;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:#25D366;color:#fff;text-decoration:none;box-shadow:0 14px 30px -10px rgba(37,211,102,.55),0 3px 10px rgba(57,45,38,.22);transition:transform .25s ease,box-shadow .25s ease,background .25s ease}
.wa-float:hover{transform:translateY(-2px) scale(1.05);background:#1EBE5A;box-shadow:0 18px 36px -12px rgba(37,211,102,.6),0 4px 12px rgba(57,45,38,.24)}
.wa-float:focus-visible{outline:3px solid var(--color-espresso);outline-offset:4px}
.wa-float__icon{width:31px;height:31px;display:block}
.wa-float__tip{position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%) translateX(6px);white-space:nowrap;background:var(--color-espresso);color:var(--color-canvas);font-size:.78rem;font-weight:600;letter-spacing:.02em;padding:.42rem .7rem;border-radius:6px;opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease}
.wa-float:hover .wa-float__tip,.wa-float:focus-visible .wa-float__tip{opacity:1;transform:translateY(-50%) translateX(0)}
@media (max-width:600px){.wa-float{width:54px;height:54px}.wa-float__icon{width:29px;height:29px}.wa-float__tip{display:none}}
@media (prefers-reduced-motion:reduce){.wa-float{transition:none}.wa-float:hover{transform:none}}

/* One soft nudge three seconds after load — a single short hop, not a loop */
@media (prefers-reduced-motion: no-preference){
  .wa-float{animation:wa-nudge 1.5s cubic-bezier(.36,.07,.19,.97) 3s 1 both}
}
@keyframes wa-nudge{
  0%,72%,100%{transform:translateY(0) scale(1)}
  38%{transform:translateY(-6px) scale(1.035)}
  52%{transform:translateY(0) scale(1)}
  60%{transform:translateY(-2px) scale(1.01)}
}
.wa-float:hover,.wa-float:focus-visible{animation:none}

/* Download card meta line: "Brochure · 3.2 MB · Download" */
.card__meta{margin-top:.55rem;font-size:.76rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--color-signal)}
.card--link:hover .card__meta{text-decoration:underline}

/* Downloads archive — three catalog covers as one visual system (media 92 / 93 / 94).
   All sources are square, so the 1:1 frame crops nothing; the veil and the graded
   floor edge pull three different studio backdrops toward the site's warm canvas
   without resampling the photograph. */
.post-type-archive-download .card--media .card__media{position:relative;aspect-ratio:1/1;background:var(--color-canvas);box-shadow:inset 0 0 0 1px rgba(57,45,38,.07)}
.post-type-archive-download .card--media .card__media::before{content:none}
.post-type-archive-download .card--media .card__media img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block;filter:saturate(.93) brightness(1.03) contrast(1.02)}
.post-type-archive-download .card--media .card__media::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(247,243,239,.14) 0%,rgba(247,243,239,.05) 44%,rgba(57,45,38,.12) 100%)}
.post-type-archive-download .card--media .card__body{padding:1.35rem 1.45rem 1.55rem}
.post-type-archive-download .card__title{font-size:1.16rem;line-height:1.28;min-height:2.56em;text-wrap:balance}
@media (max-width:640px){
  .post-type-archive-download .card__title{min-height:0}
}

/* Feedbacks archive — one slow rail of client voices.
   The rail prints the list twice and slides it by exactly one copy, so the loop
   never jumps. It pauses whenever the pointer or keyboard focus is on it, and
   visitors who ask for reduced motion get a plain sideways-scrolling strip. */
.fb-rail{position:relative;margin-top:clamp(24px,3vw,40px);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.fb-track{display:flex;width:max-content;animation:fb-scroll 110s linear infinite}
.fb-rail:hover .fb-track,.fb-rail:focus-within .fb-track,.fb-track:hover{animation-play-state:paused}
.fb-group{display:flex;gap:clamp(14px,1.5vw,20px);padding-right:clamp(14px,1.5vw,20px)}
.fb-card{width:clamp(288px,29vw,382px);display:flex;flex-direction:column;gap:.85rem;
  background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-card);
  padding:clamp(20px,2vw,28px);margin:0}
.fb-card__kicker{margin:0;font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--color-signal)}
.fb-card__quote{margin:0;flex:1;font-size:.96rem;line-height:1.62;color:var(--color-ink)}
.fb-card__quote::before{content:"\201C";display:block;font-family:var(--font-display);font-size:2.1rem;line-height:.5;color:var(--color-signal);margin-bottom:.55rem}
.fb-card__person{display:flex;align-items:center;gap:.72rem;border-top:1px solid var(--color-line);padding-top:.85rem}
.fb-card__avatar{flex:0 0 44px;width:44px;height:44px;border-radius:50%;overflow:hidden;display:block;background:var(--color-surface-warm)}
.fb-card__avatar img{width:100%;height:100%;object-fit:cover;display:block}
.fb-card__avatar--bare{display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:1.15rem;color:var(--color-espresso)}
.fb-card__meta{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.fb-card__name{font-weight:600;font-size:.95rem;color:var(--color-espresso)}
.fb-card__place{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--color-ink-soft)}
.fb-hint{margin:1.2rem 0 0;padding:0 var(--gutter);text-align:center;font-size:.85rem;color:var(--color-ink-soft)}
@keyframes fb-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:640px){
  .fb-card{width:min(78vw,320px)}
  .fb-rail{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%)}
}
@media (prefers-reduced-motion: reduce){
  .fb-track{animation:none}
  .fb-rail{overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.5rem;
    -webkit-mask-image:none;mask-image:none}
  .fb-group[aria-hidden="true"]{display:none}
  .fb-card{scroll-snap-align:start}
}

/* Sales-network map. The base drawing is a local SVG of the brand's own
   colours; the dots keep their size while the map zooms (--pin-scale is set by
   assets/js/ys-map.js), so a country pin is 11px whether you are at 1x or 4x. */
.map-panel{position:relative;margin-top:clamp(18px,2vw,28px);border:1px solid var(--color-line);
  border-radius:var(--radius-card);background:var(--color-surface);overflow:hidden}
.map-panel__bar{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;
  padding:.65rem .9rem;border-bottom:1px solid var(--color-line)}
.map-panel__count{display:flex;align-items:center;gap:.5rem;margin:0;font-size:.76rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--color-espresso)}
.map-panel__dot{width:9px;height:9px;border-radius:50%;background:var(--color-signal);box-shadow:0 0 0 3px rgba(255,2,79,.16)}
.map-panel__hint{margin:0 0 0 auto;font-size:.78rem;color:var(--color-ink-soft)}
.map-panel__zoom{display:flex;gap:.32rem}
.map-panel__btn{width:30px;height:30px;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--color-line);background:var(--color-canvas);border-radius:8px;
  color:var(--color-espresso);font:600 1rem/1 var(--font-body);transition:background .15s}
.map-panel__btn:hover{background:var(--color-surface-warm)}
.map-panel__btn--text{width:auto;padding:0 .55rem;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.map-panel__view{position:relative;overflow:hidden;touch-action:pan-y;cursor:grab;
  background:radial-gradient(120% 140% at 50% 0%,#F4EEE7 0%,#EFE7DE 100%)}
.map-panel__view.is-dragging{cursor:grabbing;touch-action:none}
.map-panel__inner{position:relative;transform-origin:0 0;will-change:transform}
.map-panel__base{display:block;width:100%;height:auto}
.pin{position:absolute;transform:translate(-50%,-50%) scale(var(--pin-scale,1));line-height:0;
  display:block;cursor:pointer}
.pin__dot{display:block;width:11px;height:11px;border-radius:50%;background:var(--color-signal);
  border:2px solid #fff;box-shadow:0 1px 3px rgba(57,45,38,.32);transition:transform .15s}
.pin:hover .pin__dot,.pin.is-open .pin__dot{transform:scale(1.5)}
.pin:focus{outline:none}
.pin:focus-visible .pin__dot{box-shadow:0 0 0 4px rgba(255,2,79,.3)}
.pin__label{position:absolute;left:50%;bottom:calc(100% + 5px);transform:translateX(-50%);
  white-space:nowrap;padding:.2rem .45rem;border-radius:4px;background:var(--color-espresso);
  color:var(--color-canvas);font:600 .7rem/1.2 var(--font-body);letter-spacing:.02em;
  opacity:0;pointer-events:none;transition:opacity .14s}
.pin:hover .pin__label,.pin:focus .pin__label,.pin.is-open .pin__label{opacity:1}
.section--markets{background:var(--color-surface);border-top:1px solid var(--color-line);border-bottom:1px solid var(--color-line)}
.markets{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,34px)}
.markets__title{display:flex;align-items:baseline;gap:.5rem;margin:0 0 .7rem;font-size:.76rem;
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--color-espresso)}
.markets__num{font-size:.72rem;font-weight:400;letter-spacing:0;color:var(--color-ink-soft)}
.markets__list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.32rem;
  font-size:.92rem;color:var(--color-ink)}
@media (max-width:900px){.markets{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.markets{grid-template-columns:1fr;gap:1.15rem}
  .map-panel__hint{display:none}.pin__dot{width:10px;height:10px}}

/* Country lists read as columns, so a long list (Europe, Asia Pacific) wraps
   into two instead of stretching the row. */
.markets__list{display:grid;grid-template-columns:minmax(0,1fr);gap:.34rem .9rem}
.markets__group--wide .markets__list{grid-template-columns:repeat(2,minmax(0,1fr));gap:.34rem 1.1rem}
.markets__list li{break-inside:avoid}
@media (min-width:900px){.markets__group--wide .markets__list{align-content:start}}
/* A dot has to read at a glance on a warm map, so give it a white ring and a
   little more presence than a hairline. */
.pin__dot{width:12px;height:12px;border-width:2px}

/* --- Map, second pass -------------------------------------------------------
   The map is resized (width) instead of transform-scaled, so the SVG is
   re-rendered as vector at each zoom level rather than stretched as a bitmap.
   The dots sit in their own layer, positioned in pixels, and never scale, so
   they stay sharp at any zoom. */
.map-panel__view{aspect-ratio:1000 / 402;height:auto}
.map-panel__inner{position:absolute;top:0;left:0;width:100%;transform-origin:0 0;will-change:auto}
.map-panel__pins{position:absolute;inset:0;pointer-events:none;visibility:hidden}
.map-panel__pins .pin{left:0;top:0;pointer-events:auto;will-change:auto}
.map-panel__pins .pin__dot{width:12px;height:12px}
.map-panel.is-zoomed .map-panel__view{touch-action:none;cursor:grab}

/* --- Guides and FAQ --------------------------------------------------------
   The five guide pages and the FAQ archive share one rhythm: a chip row to
   jump, a group heading, then whole answers. Nothing is folded away, so what a
   reader scans and what a crawler reads are the same text. */
.nav-dropdown__label{margin:.55rem 0 .15rem;padding:0 .65rem;font-size:.66rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:#9a8b80}
.nav-dropdown__label:first-child{margin-top:0}
.nav-panel__label{margin:.7rem 0 .1rem;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:#9a8b80}

.faq-toc{display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 clamp(24px,3vw,40px)}
.faq-toc a{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .75rem;
  border:1px solid var(--color-line);border-radius:999px;font-size:.82rem;text-decoration:none;
  color:var(--color-espresso);background:var(--color-surface)}
.faq-toc a:hover{background:var(--color-surface-warm)}
.faq-toc__num{font-size:.7rem;font-weight:600;color:var(--color-signal)}
.faq-group{margin-bottom:clamp(30px,4vw,52px);scroll-margin-top:90px}
.faq-group__title{font-size:clamp(1.4rem,2.4vw,1.85rem);margin:0 0 .4rem}
.faq-group__intro{margin:0 0 1.4rem;max-width:var(--measure);font-size:.98rem;color:var(--color-ink-soft)}
.faq-item{padding:1.15rem 0;border-top:1px solid var(--color-line);scroll-margin-top:90px}
.faq-item__q{margin:0 0 .5rem;font-size:1.06rem;font-weight:600;color:var(--color-espresso)}
.faq-item__a p{margin:.45rem 0}
.faq-item__a p:first-child{margin-top:0}
.faq-item__a p:last-child{margin-bottom:0}

.prose .guide-specs{margin:1.6rem 0;padding:0;list-style:none;border:1px solid var(--color-line);
  border-radius:var(--radius-card);overflow:hidden}
.guide-specs li{display:grid;grid-template-columns:minmax(120px,34%) 1fr;gap:.6rem 1rem;
  padding:.62rem .9rem;border-top:1px solid var(--color-line);font-size:.95rem}
.guide-specs li:first-child{border-top:0}
.guide-specs li:nth-child(odd){background:var(--color-surface)}
.guide-specs strong{font-weight:600;color:var(--color-espresso)}
.guide-table{width:100%;border-collapse:collapse;margin:1.4rem 0;font-size:.92rem;display:block;overflow-x:auto}
.guide-table th,.guide-table td{text-align:left;vertical-align:top;padding:.6rem .7rem;border-bottom:1px solid var(--color-line)}
.guide-table th{font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--color-ink-soft);white-space:nowrap}
.guide-table td:first-child{font-weight:600;color:var(--color-espresso)}
.guide-note{margin:1.6rem 0;padding:.9rem 1.1rem;border-left:3px solid var(--color-signal);
  background:var(--color-surface-warm);font-size:.95rem;color:var(--color-ink-soft)}
.guide-note strong{color:var(--color-espresso)}
.guide-steps{margin:1.4rem 0;padding:0;list-style:none;counter-reset:gs}
.guide-steps li{counter-increment:gs;position:relative;margin-left:.7rem;padding:0 0 1rem 2.4rem;
  border-left:1px solid var(--color-line)}
.guide-steps li:last-child{border-left-color:transparent}
.guide-steps li::before{content:counter(gs);position:absolute;left:-.72rem;top:0;width:1.45rem;height:1.45rem;
  display:grid;place-items:center;border-radius:50%;background:var(--color-espresso);
  color:var(--color-canvas);font-size:.72rem;font-weight:600}
.guide-steps strong{display:block;margin-bottom:.15rem;font-size:1rem;color:var(--color-espresso)}
.guide-related__list,.guide-continue__list{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.55rem}
.guide-related__list a,.guide-continue__list a{display:block;padding:.7rem .9rem;border:1px solid var(--color-line);
  border-radius:10px;background:var(--color-canvas);color:var(--color-espresso);font-size:.95rem;text-decoration:none}
.guide-related__list a:hover,.guide-continue__list a:hover{border-color:var(--color-espresso)}
@media(min-width:720px){.guide-related__list,.guide-continue__list{grid-template-columns:1fr 1fr}}

/* --- Reading layout -------------------------------------------------------
   Guides run at full container width: each H2 section is a block, two blocks
   sit side by side on desktop (about 60 characters a line, the range that is
   easiest to read), and sections with a table or a key-number list span both
   columns. Mobile keeps a single column in the same reading order, so nothing
   has to be scrolled back up. FAQ answers keep their two-column flow: the
   items are short and self-contained, which is what columns suit. */
.guide-toc{display:flex;flex-wrap:wrap;align-items:baseline;gap:.45rem .9rem;
  padding-bottom:1.4rem;margin-bottom:2rem;border-bottom:1px solid var(--color-line)}
.guide-toc__label{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--color-ink-soft)}
.guide-toc a{font-size:.86rem;color:var(--color-ink-soft);text-decoration:none;
  border-bottom:1px solid transparent}
.guide-toc a:hover{color:var(--color-espresso);border-bottom-color:var(--color-signal)}
.guide-intro{margin-bottom:.4rem}
.guide-cols{display:grid;gap:0 clamp(30px,4vw,64px)}
.guide-sec{margin:0 0 1.6rem;padding-top:1.4rem;border-top:1px solid var(--color-line)}
.guide-sec > h2:first-child{margin-top:0}
.guide-body__more{margin-top:.8rem}
.faq-group__items{columns:1}
.faq-item__a{max-width:none}

@media(min-width:960px){
  .faq-group__items{columns:2;column-gap:clamp(28px,4vw,72px)}
  .faq-item{break-inside:avoid;-webkit-column-break-inside:avoid}
  .faq-group__intro{max-width:70ch}
}

@media(min-width:1040px){
  .guide-cols{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .guide-sec--wide{grid-column:1 / -1;max-width:none}
  .guide-sec{margin-bottom:1.9rem;padding-top:1.7rem}
}

/* --- Guides index (home page + footer) --- */
.guide-index{display:grid;gap:0 clamp(28px,3vw,56px);border-top:1px solid var(--color-line)}
.guide-index__item{display:grid;grid-template-columns:auto 1fr;gap:.15rem .9rem;
  padding:1.15rem 0;border-bottom:1px solid var(--color-line);
  text-decoration:none;color:inherit}
.guide-index__num{font-family:var(--font-display);font-size:.9rem;color:var(--color-signal);line-height:1.5}
.guide-index__title{font-weight:600;font-size:1rem;line-height:1.35}
.guide-index__desc{grid-column:2;margin:.1rem 0 0;font-size:.86rem;line-height:1.5;color:var(--color-ink-soft)}
.guide-index__item:hover .guide-index__title{color:var(--color-signal)}
@media(min-width:900px){.guide-index{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* --- Footer now carries three link columns --- */
.site-footer__navcols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}
@media(min-width:560px){.site-footer__navcols{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:860px){
  .site-footer__inner{grid-template-columns:1.1fr 2.6fr 1.2fr;gap:2.5rem}
}
.product-note{margin:.55rem 0 1.1rem;font-size:.82rem;line-height:1.5;color:var(--color-ink-soft);max-width:52ch}

/* --- Case study single --- */
.page-head--case .page-head__img{width:100%;height:auto;max-height:none;object-fit:cover;mix-blend-mode:normal;border-radius:var(--radius-card);background:var(--color-surface-warm)}
.case-spec{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1.1rem 2rem;margin:0 0 2.2rem;padding:0 0 1.3rem;border-bottom:1px solid var(--color-line)}
.case-spec div{min-width:0}
.case-spec dt{font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--color-ink-soft);margin:0 0 .35rem}
.case-spec dd{margin:0;font-size:1rem;color:var(--color-ink)}
.case-figure{position:relative;left:50%;transform:translateX(-50%);width:min(940px,calc(100vw - 2*var(--gutter)));margin:2.4rem 0}
.case-figure img{width:100%;height:auto;display:block;border-radius:var(--radius-card)}
.case-figure--cutout img{mix-blend-mode:multiply;border-radius:0}
/* A scanned document is shown as a document: narrow, centred, on white. */
.case-figure--doc{width:min(430px,calc(100vw - 2*var(--gutter)))}
.case-figure--doc img{border:1px solid var(--color-line);background:#fff;box-shadow:0 18px 34px -26px rgba(57,45,38,.55)}
/* Two pictures side by side. Each keeps its own ratio and is top-aligned, so a
   portrait document and a landscape render sit together without any cropping. */
.case-figure--pair{display:grid;grid-template-columns:1fr;gap:1.1rem}
.case-figure--pair>figure{margin:0;min-width:0}
.case-figure--pair img{background:var(--color-surface-warm)}
@media (min-width:640px){
 .case-figure--pair{grid-template-columns:1fr 1fr;gap:clamp(.9rem,2vw,1.6rem);align-items:start}
 /* A tall picture beside a wide one: one shared frame height, each picture
    shown whole inside it, so both captions sit on the same line. */
 .case-figure--fit>figure img{width:100%;height:clamp(240px,27vw,380px);object-fit:contain}
}
.case-figure figcaption{margin-top:.7rem;font-size:.78rem;line-height:1.5;color:var(--color-ink-soft)}
.case-note{background:var(--color-surface-warm);border-left:2px solid var(--color-signal);border-radius:0 var(--radius-card) var(--radius-card) 0;padding:1.2rem 1.4rem;margin:1.9rem 0}
.case-note h2{margin:0 0 .5rem;font-size:1.05rem}
.case-note p{margin:0;font-size:.98rem}
.case-back{margin-top:2.4rem;font-size:.9rem}
.case-back a{color:var(--color-ink-soft);text-decoration:none}
.case-back a:hover{color:var(--color-signal)}
.case-cta .button--signal{background:var(--color-canvas);color:var(--color-espresso)}
.case-cta .button--signal:hover{background:#efe6de;color:var(--color-espresso)}

/* --- Page header with a cut-out product photo ---
   The picture arrives on pure white; multiply drops that white into the page's
   cream (255 x cream = cream), so only the packaging is left on the page.
   contain keeps every item whole: nothing is cropped, at any width. */
.page-head--media{padding-block:clamp(44px,6.4vw,78px) clamp(30px,4.2vw,52px)}
.page-head--media .page-head__grid{display:grid;gap:clamp(1.4rem,3vw,2.6rem);align-items:center}
.page-head__figure{margin:0;display:flex;align-items:center;justify-content:center}
.page-head__img{display:block;width:100%;height:auto;max-height:clamp(230px,26vw,400px);object-fit:contain;mix-blend-mode:multiply}
@media (min-width:900px){
 .page-head--media .page-head__grid{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr)}
}
@media (min-width:1240px){
 .page-head--media .page-head__grid{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)}
}
/* Case header: the photo fills its column edge to edge (no letterbox bands) and
   the longer case title is set smaller so it does not run to five lines. */
.page-head--case.page-head--media .page-head__img{max-height:none}
.page-head--case .page-head__title{font-size:clamp(1.9rem,2.9vw,2.5rem);line-height:1.08;max-width:26ch}
@media (min-width:900px){
 .page-head--case.page-head--media .page-head__grid{grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr)}
}

/* Case archive: compact rows — a 220px photo, then title, two-line summary and
   a read-more link. Nothing is cropped or blown up to full width. */
.case-list{list-style:none;margin:2.2rem 0 0;padding:0;border-top:1px solid var(--color-line)}
.case-row{display:grid;grid-template-columns:1fr;gap:.95rem;padding:1.5rem 0;border-bottom:1px solid var(--color-line);color:inherit;text-decoration:none}
.case-row__fig{margin:0;aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius-card);background:var(--color-surface-warm)}
.case-row__fig img{width:100%;height:100%;object-fit:cover;display:block}
.case-row__title{margin:0 0 .35rem;font-size:1.12rem;line-height:1.3}
.case-row__ex{margin:0;font-size:.94rem;line-height:1.6;color:var(--color-ink-soft);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.case-row__more{display:inline-block;margin-top:.6rem;font-size:.82rem;font-weight:600;letter-spacing:.02em;color:var(--color-signal)}
.case-row:hover .case-row__title{color:var(--color-signal)}
@media (min-width:760px){
 .case-row{grid-template-columns:220px minmax(0,1fr);gap:1.9rem;align-items:center;padding:1.35rem 0}
 /* A case with no photo yet reads as a full-width text row, not an empty box. */
 .case-row--text{grid-template-columns:minmax(0,1fr);gap:0}
}
/* Homepage: client voices on the same slow rail as /feedbacks/ */
.fb-home{margin-top:clamp(1.9rem,3.2vw,2.8rem);border-top:1px solid var(--color-line);padding-top:clamp(1.2rem,2vw,1.8rem)}
.fb-home__head{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:baseline;justify-content:space-between;margin-bottom:.4rem}
.fb-home__head .eyebrow{margin:0}
.fb-rail--home{margin-top:.9rem}
/* FAQ numbering */
.faq-item__q{display:flex;gap:.55rem;align-items:baseline}
.faq-item__no{flex:none;font-family:var(--font-display);font-size:.9rem;letter-spacing:.04em;color:var(--color-signal);font-variant-numeric:tabular-nums}