:root{
  --ink:#12100E; --coal:#1B1815; --slate:#2A2622;
  --bone:#F6F3EE; --paper:#FFFFFF; --sand:#EDE7DD;
  --brass:#B08A46; --brass-dk:#886A31; --teal:#1F5C5A;
  --muted:#6F675C; --line:#E2DACE; --wa:#25D366;
  --sans:'Inter','Segoe UI',system-ui,-apple-system,'Noto Sans SC',sans-serif;
  --serif:'Cormorant Garamond',Georgia,'Songti SC',serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{overflow-x:auto}
/* the header lays out on one line at ~980px; in the tablet range the
   page scrolls rather than clipping the call-to-action. Phones use the
   hamburger menu below 701px, so this does not apply there. */

body{font-family:var(--sans);color:var(--ink);background:var(--bone);
     line-height:1.65;-webkit-font-smoothing:antialiased;font-size:16px}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:1340px;margin:0 auto;padding:0 28px}
.narrow{max-width:900px;margin:0 auto;padding:0 28px}
h1,h2,h3,.serif{font-family:var(--serif);font-weight:600;line-height:1.12}
h1{font-size:clamp(34px,5vw,62px);letter-spacing:-.5px}
h2{font-size:clamp(26px,3.4vw,42px)}
h3{font-size:20px}
p{color:var(--muted)}
.lead{font-size:17px;color:var(--muted);max-width:62ch}

/* ---------- nav ---------- */
header{position:sticky;top:0;z-index:60;background:rgba(246,243,238,.92);
       backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:78px;gap:20px}
.brand{display:inline-flex;align-items:center;gap:12px;white-space:nowrap;flex:0 0 auto;
       color:inherit;text-decoration:none}
.brand .mark{height:42px;width:auto;flex:none;display:block}
.brand .btext{display:flex;flex-direction:column;justify-content:center}
.brand b{font-family:var(--serif);font-size:22px;font-weight:700;line-height:1;
       letter-spacing:.13em;text-transform:uppercase;color:var(--ink)}
.brand small{font-family:var(--sans);font-size:9.5px;font-weight:700;
       letter-spacing:.29em;color:var(--brass-dk);text-transform:uppercase;margin-top:5px}
.navlinks{display:flex;align-items:center;gap:26px;font-size:14px;font-weight:600}
.langwrap{margin-inline-start:auto}
/* Collections dropdown: same pattern as the language switcher */
.navdrop{position:relative;display:inline-flex}
.navdropbtn{display:inline-flex;align-items:center;gap:6px;background:none;border:0;
    font:inherit;font-weight:600;color:#3A342C;cursor:pointer;padding:6px 0;white-space:nowrap}
.navdropbtn .caret{font-size:10px;opacity:.6;transition:transform .2s}
.navdrop:hover .navdropbtn .caret,.navdrop.open .navdropbtn .caret{transform:rotate(180deg)}
.navdropbtn:hover{color:var(--brass-dk)}
.navdropmenu{position:absolute;top:calc(100% + 10px);inset-inline-start:0;
    min-width:230px;background:#fff;border:1px solid var(--line);border-radius:12px;
    padding:8px;box-shadow:0 16px 38px rgba(40,30,15,.18);
    display:flex;flex-direction:column;gap:2px;
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .18s,visibility .18s,transform .18s;z-index:70}
.navdrop:hover .navdropmenu,.navdrop:focus-within .navdropmenu,.navdrop.open .navdropmenu{
    opacity:1;visibility:visible;transform:none}
.navdropmenu a{padding:9px 12px;border-radius:8px;font-size:13.5px;color:#3A342C;
    white-space:nowrap;border-bottom:0}
.navdropmenu a:hover,.navdropmenu a[aria-current]{background:var(--sand);color:var(--brass-dk)}
.navdropmenu a[aria-current]{font-weight:700}
.navlinks a{white-space:nowrap}
.navlinks::-webkit-scrollbar{display:none}
.navlinks a{color:#3A342C;padding:6px 0;border-bottom:2px solid transparent}
.navlinks a:hover,.navlinks a[aria-current]{color:var(--brass-dk);border-color:var(--brass)}
.navcta{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:#fff;
       padding:11px 20px;border-radius:999px;font-size:14px;font-weight:600;white-space:nowrap}
.navcta:hover{background:var(--brass-dk)}
.menubtn{display:none;background:none;border:0;font-size:24px;cursor:pointer;color:var(--ink)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;padding:14px 26px;border-radius:999px;
     font-weight:600;font-size:15px;border:0;cursor:pointer;transition:.2s}
.btn-wa{background:var(--wa);color:#053B1E}
.btn-wa:hover{filter:brightness(.95)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:var(--brass-dk)}
.btn-ghost{background:transparent;border:1.5px solid var(--ink);color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}
.btn-row{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- hero ---------- */
.hero{padding:64px 0 74px}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:700;
     letter-spacing:.15em;text-transform:uppercase;color:var(--brass-dk);margin-bottom:18px}
.eyebrow:before{content:"";width:26px;height:1.5px;background:var(--brass)}
.hero h1 em{font-style:italic;color:var(--brass-dk)}
.hero .lead{margin:20px 0 28px}
.hero-media{position:relative;border-radius:18px;overflow:hidden;
     box-shadow:0 26px 60px rgba(30,22,10,.20)}
/* height:auto is required: without it the height attribute in the markup wins over
   aspect-ratio, and the frame becomes as tall as the file's pixel height. */
.hero-media img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.hero-badge{position:absolute;left:20px;bottom:20px;background:rgba(18,16,14,.88);
     color:#fff;padding:13px 18px;border-radius:12px;font-size:13px;backdrop-filter:blur(6px)}
.hero-badge b{display:block;font-family:var(--serif);font-size:17px;color:var(--brass);font-weight:600}

/* ---------- stat strip ---------- */
.stats{background:var(--coal);color:#EFE7D8;padding:38px 0}
.stats-in{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
.stats b{display:block;font-family:var(--serif);font-size:clamp(20px,2.1vw,26px);
     line-height:1.22;color:var(--brass);font-weight:600;letter-spacing:.005em}
.stats span{font-size:13px;opacity:.75;letter-spacing:.03em}

/* ---------- sections ---------- */
section{padding:74px 0}
.sec-head{margin-bottom:38px}
.sec-head p{margin-top:12px}
.dark{background:var(--coal);color:#EFE7D8}
.dark h2,.dark h3{color:#FBF6EC}
.dark p{color:#C9BFAC}
.dark .eyebrow{color:var(--brass)}
.sand{background:var(--sand)}

/* ---------- collection cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:16px;
      overflow:hidden;display:block;transition:.25s}
.card:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(60,45,20,.14)}
.card .ph{aspect-ratio:4/3;overflow:hidden;background:var(--sand)}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:.5s}
.card:hover .ph img{transform:scale(1.05)}
.card .body{padding:20px 22px 24px}
.card h3{font-size:21px;margin-bottom:6px}
.card .zh{font-size:12.5px;color:var(--brass-dk);font-weight:600;letter-spacing:.04em;
      margin-bottom:9px}
.card p{font-size:14px;line-height:1.6}
.card .go{display:inline-block;margin-top:12px;color:var(--brass-dk);font-weight:700;font-size:13.5px}

/* ---------- feature grid ---------- */
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.feat{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:26px}
.feat .ic{width:46px;height:46px;border-radius:12px;background:var(--sand);
      display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:14px}
.feat h3{font-size:17px;margin-bottom:7px}
.feat p{font-size:14px;line-height:1.6}
.dark .feat{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}

/* ---------- product grid ---------- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.gallery figure{margin:0;background:var(--paper);border:1px solid var(--line);
      border-radius:13px;overflow:hidden}
.gallery img{width:100%;aspect-ratio:1/1;object-fit:cover;cursor:zoom-in;transition:.4s}
.gallery figure:hover img{transform:scale(1.04)}
.gallery figcaption{font-size:12.5px;color:var(--muted);padding:9px 12px}
/* Product photographs: large, two across, natural aspect ratio.
   The collection grid above is four across with a square crop, which is right for
   small category cards but far too small to judge a product by. */
.pgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:6px}
.pgrid figure{margin:0;width:100%;min-width:0;background:var(--paper);
    border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:.25s}
.pgrid figure:hover{box-shadow:0 14px 32px rgba(60,45,20,.13)}
/* a fixed frame keeps every card the same shape; object-fit:cover crops the
   photograph rather than letterboxing it, so nothing is distorted */
.pgrid img{display:block;width:100%!important;max-width:100%;height:300px;object-fit:cover;cursor:zoom-in;transition:.4s}
.pgrid figure:hover img{transform:scale(1.025)}
.pgrid figcaption{font-size:12.5px;color:var(--muted);padding:10px 14px}
/* company-profile figures on the factory page */
.shot{margin:0}
.shot img{display:block;width:100%;height:auto;border-radius:14px;
    border:1px solid var(--line);background:var(--paper)}
.shot figcaption{font-size:12.5px;color:var(--muted);padding:9px 2px 0}
.shot.wide{max-width:980px;margin:0 auto}
/* ---------------- company profile ---------------- */
/* Designed band rather than a pasted page image: a warm wash over the aerial
   photograph, fading into the page at the bottom and top, so the text sits on a
   surface that belongs to the site. */
.prof{position:relative;overflow:hidden;padding:0 0 54px}
.prof-bg{position:absolute;inset:0;pointer-events:none;background-color:#EDE7DC;
    background-image:url("../img/company/profile-bg.webp");
    background-size:cover;background-position:center 52%;
    opacity:.55;filter:saturate(.62) contrast(1.02)}
.prof-bg::after{content:"";position:absolute;inset:0;
    background:
      linear-gradient(180deg,rgba(246,243,238,.86) 0%,rgba(246,243,238,.30) 20%,
                      rgba(246,243,238,.28) 74%,rgba(246,243,238,.80) 100%),
      linear-gradient(90deg,rgba(246,243,238,.88) 0%,rgba(246,243,238,.58) 42%,
                      rgba(246,243,238,.14) 100%)}
.prof .wrap{position:relative;z-index:1}
.prof-in{max-width:790px;margin-top:26px}
.prof h1{font-size:clamp(30px,4vw,54px);margin:12px 0 18px}
.prof-lead{font-size:clamp(17px,1.5vw,20px);color:#413A31;margin:0 0 24px}
.prof-list{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.prof-list li{position:relative;padding-inline-start:26px;color:#4A4238;
    font-size:15.5px;line-height:1.6}
.prof-list li::before{content:"";position:absolute;inset-inline-start:0;top:9px;
    width:9px;height:9px;border-radius:50%;background:var(--brass);
    box-shadow:0 0 0 3px rgba(176,138,70,.18)}
.prof-note{margin:26px 0 0;padding:16px 20px;border-inline-start:3px solid var(--brass);
    background:rgba(255,255,255,.62);border-radius:0 12px 12px 0;
    color:#3E372E;font-size:15.5px;line-height:1.66}
@media(max-width:700px){.prof-bg{opacity:.22}.prof-in{max-width:none}}

/* honours shown as a list, because the words are the substance and the wall
   photograph is too low-resolution to read */
.honours{list-style:none;margin:6px 0 0;padding:0;display:grid;
    grid-template-columns:1fr 1fr;gap:12px 34px;max-width:1080px}
.honours li{position:relative;padding-inline-start:24px;color:#4A4238;
    font-size:15px;line-height:1.55}
.honours li::before{content:"";position:absolute;inset-inline-start:0;top:8px;
    width:8px;height:8px;background:var(--brass-dk);border-radius:2px;
    transform:rotate(45deg)}
@media(max-width:820px){.honours{grid-template-columns:1fr}}

/* full catalogue sheets: the image already carries a faded edge, so no border or
   radius is applied and the aspect ratio is preserved */
.sheet{margin:0}
.sheet img{display:block;width:100%;height:auto;border:0;background:transparent}
.sheet figcaption{font-size:12.5px;color:var(--muted);padding:6px 2px 0;text-align:center}
.sheet.wide{max-width:1100px;margin:0 auto}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:38px;align-items:center}
@media(max-width:900px){.frow{grid-template-columns:1fr;gap:26px}}
/* the profile sheet is wide, so it sits under the text on one column */
/* the profile sheet is the point of its section, so it gets the full width and the
   paragraphs sit above it rather than beside it */
.prose{max-width:760px;margin:0 0 26px}
.prose p{margin:0 0 14px}
.sheetrow{margin:0}
@media(max-width:1180px){.pgrid{grid-template-columns:repeat(4,1fr);gap:15px}.pgrid img{height:280px}}
@media(max-width:900px){.pgrid{grid-template-columns:repeat(3,1fr);gap:14px}.pgrid img{height:250px}}
@media(max-width:680px){.pgrid{grid-template-columns:repeat(2,1fr);gap:12px}.pgrid img{height:210px}}


/* ---------- catalogue category cards (collections index) ---------- */
.cats{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.cat-card{background:var(--paper);border:1px solid var(--line);border-radius:14px;
      overflow:hidden;display:block;transition:.25s}
.cat-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(60,45,20,.14)}
/* the catalogue images are page layouts: the product photo sits on the left with
   the printed spec panel beside it. The card shows only the left portion, so the
   thumbnail reads as a product rather than a page of dimensions. */
.cat-card .ph{aspect-ratio:1/1;overflow:hidden;background:var(--sand);position:relative}
.cat-card .ph img{width:100%;height:100%;object-fit:cover;object-position:left center}
.cat-card .ph img{width:100%;height:100%;object-fit:cover;transition:.5s}
.cat-card:hover .ph img{transform:scale(1.05)}
.cat-card .body{padding:15px 16px 17px}
.cat-card h3{font-size:17px;margin-bottom:4px}
.cat-card .zh{font-size:12px;color:var(--brass-dk);font-weight:600;letter-spacing:.04em;
      margin-bottom:9px}
.cat-card .go{display:inline-block;color:var(--brass-dk);font-weight:700;font-size:13px}

/* ---------- spec table ---------- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--paper)}
table.spec{width:100%;border-collapse:collapse;font-size:13.5px;min-width:820px}
table.spec th{background:var(--sand);text-align:left;padding:13px 14px;font-weight:700;
      font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:#4A4238;
      border-bottom:1px solid var(--line);white-space:nowrap}
table.spec td{padding:12px 14px;border-bottom:1px solid var(--line);color:#4A4238}
table.spec tr:last-child td{border-bottom:0}
table.spec tr:nth-child(even) td{background:#FCFAF6}
table.spec td.code{font-weight:700;color:var(--ink);white-space:nowrap}

/* ---------- FAQ ---------- */
.faq details{background:var(--paper);border:1px solid var(--line);border-radius:13px;
      padding:18px 22px;margin-bottom:11px}
.faq summary{cursor:pointer;font-weight:600;font-size:15.5px;list-style:none;
      display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";color:var(--brass-dk);font-size:22px;line-height:1;flex:0 0 auto}
.faq details[open] summary:after{content:"\2212"}
.faq p{margin:12px 0 0;font-size:14.5px;line-height:1.7}

/* ---------- forms ---------- */
.form{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:30px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
label{display:block;font-size:13px;font-weight:600;margin:0 0 6px;color:#4A4238}
input,select,textarea{width:100%;padding:13px 15px;border:1px solid var(--line);
      border-radius:10px;font-family:inherit;font-size:15px;background:#FDFCFA;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brass);outline-offset:1px;
      border-color:var(--brass)}
.field{margin-bottom:16px}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.cinfo dt{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
      color:var(--brass-dk);margin-top:18px}
.cinfo dd{font-size:16px;margin-top:3px}

/* ---------- breadcrumb ---------- */
.crumb{font-size:13px;color:var(--muted);padding:22px 0 0}
.crumb a:hover{color:var(--brass-dk)}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:200;background:rgba(12,9,6,.94);display:none;
    align-items:center;justify-content:center;padding:24px}
.lb.open{display:flex}
/* the arrows share the image's row, so they sit at the middle of its sides
   whatever the picture's height */
.lbrow{display:flex;align-items:center;justify-content:center;gap:16px;
    width:100%;height:100%}
.lb img{max-width:calc(100vw - 190px);max-height:88vh;object-fit:contain;
    border-radius:8px;cursor:zoom-out}
.lbclose{position:absolute;top:20px;right:26px;background:none;border:0;color:#fff;
    font-size:34px;cursor:pointer;line-height:1;z-index:3}
.lbnav{flex:none;background:rgba(255,255,255,.14);border:0;color:#fff;
    font-size:30px;line-height:1;width:56px;height:82px;border-radius:10px;
    cursor:pointer;transition:.2s;display:flex;align-items:center;justify-content:center}
.lbnav:hover{background:rgba(255,255,255,.3)}
.lbnav[disabled]{opacity:.25;cursor:default}
.lbcount{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);
    color:#EDE7DD;font-size:13px;letter-spacing:.06em;background:rgba(0,0,0,.4);
    padding:6px 14px;border-radius:999px;font-variant-numeric:tabular-nums}
.lbcap{position:absolute;top:22px;left:26px;color:#EDE7DD;font-size:14px;
    letter-spacing:.04em;max-width:62vw}
@media (max-width:640px){
  .lbnav{width:44px;height:64px;font-size:24px}
  .lb img{max-width:calc(100vw - 130px)}
  .lbrow{gap:6px}
}

/* ---------- footer ---------- */
footer{background:var(--ink);color:#B9AF9F;padding:56px 0 30px;font-size:14px}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px}
footer h4{color:#FBF6EC;font-family:var(--serif);font-size:17px;margin-bottom:14px;font-weight:600}
footer a{display:block;padding:4px 0;color:#B9AF9F}
footer a:hover{color:var(--brass)}
.foot-bot{border-top:1px solid rgba(255,255,255,.1);margin-top:38px;padding-top:22px;
    display:flex;justify-content:space-between;gap:16px;font-size:12.5px;flex-wrap:wrap}
.wa-fab{position:fixed;right:22px;bottom:22px;z-index:80;display:flex;
    align-items:center;gap:12px}
.wa-float{position:relative;width:56px;height:56px;flex:none;border-radius:50%;
    background:var(--wa);display:flex;align-items:center;justify-content:center;
    box-shadow:0 10px 26px rgba(0,0,0,.25);text-decoration:none;
    transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .22s;
    animation:wa-bounce 7s ease-in-out infinite}
.wa-float svg{width:30px;height:30px;fill:#fff;position:relative;z-index:2}
/* expanding ring: the slow breathing cue */
.wa-float::after{content:"";position:absolute;inset:0;border-radius:50%;
    background:var(--wa);z-index:1;pointer-events:none;
    animation:wa-breathe 2.8s ease-out infinite}
@keyframes wa-breathe{
    0%{transform:scale(1);opacity:.55}
    70%{transform:scale(1.55);opacity:0}
    100%{transform:scale(1.55);opacity:0}}
/* the periodic nudge: two small hops, well spaced so it never nags */
@keyframes wa-bounce{
    0%,86%,100%{transform:translateY(0) scale(1)}
    88%{transform:translateY(-9px) scale(1.05)}
    91%{transform:translateY(0) scale(.97)}
    94%{transform:translateY(-4px) scale(1.02)}
    97%{transform:translateY(0) scale(1)}}
.wa-float:hover,.wa-float:focus-visible{transform:scale(1.1);animation:none;
    box-shadow:0 16px 34px rgba(0,0,0,.32)}
.wa-float:hover::after,.wa-float:focus-visible::after{animation:none;opacity:0}
.wa-float:active{transform:scale(1.02)}
/* label that slides out beside the button */
.wa-tip{position:relative;background:var(--ink);color:#F6F3EE;font-size:13.5px;
    font-weight:600;line-height:1;padding:11px 15px;border-radius:10px;
    white-space:nowrap;display:flex;align-items:center;gap:7px;
    box-shadow:0 8px 22px rgba(0,0,0,.24);
    opacity:0;visibility:hidden;clip-path:inset(0 0 0 100%);
    transition:opacity .2s ease,visibility .2s,clip-path .28s ease}
.wa-tip::after{content:"";position:absolute;right:-5px;top:50%;margin-top:-6px;
    border:6px solid transparent;border-left-color:var(--ink);border-right:0}
.wa-tip b{color:var(--wa);font-weight:700}
.wa-fab:hover .wa-tip,.wa-fab:focus-within .wa-tip{opacity:1;visibility:visible;
    clip-path:inset(0 0 0 0)}
@media (prefers-reduced-motion:reduce){
    .wa-float,.wa-float::after{animation:none}
    .wa-float{transition:none}}

/* ---------- language switcher ---------- */
.langwrap{position:relative;flex:0 0 auto}
.langbtn{display:inline-flex;align-items:center;gap:7px;background:transparent;
     border:1.5px solid var(--line);border-radius:999px;padding:9px 15px;font-size:13.5px;
     font-weight:600;color:#3A342C;cursor:pointer;font-family:inherit;white-space:nowrap}
.langbtn:hover{border-color:var(--brass);color:var(--brass-dk)}
.langmenu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;min-width:150px;
     background:#fff;border:1px solid var(--line);border-radius:12px;padding:6px;
     box-shadow:0 14px 34px rgba(40,30,15,.16);display:none;z-index:70}
.langmenu.open{display:block}
.langitem{display:block;width:100%;text-align:start;background:none;border:0;
     padding:9px 13px;border-radius:8px;font-size:14px;font-family:inherit;
     color:#3A342C;cursor:pointer}
.langitem:hover{background:var(--sand);color:var(--brass-dk)}

/* ---------- back to top ---------- */
.to-top{position:fixed;inset-inline-start:22px;bottom:22px;z-index:80;display:inline-flex;
     align-items:center;gap:8px;background:rgba(18,16,14,.5);color:rgba(255,255,255,.92);
     border:1px solid rgba(255,255,255,.18);cursor:pointer;backdrop-filter:blur(4px);
     border-radius:999px;padding:11px 17px;font-family:inherit;font-size:13px;font-weight:600;
     box-shadow:0 6px 18px rgba(0,0,0,.14);opacity:0;visibility:hidden;
     transform:translateY(12px);transition:opacity .25s,background .2s,border-color .2s,transform .25s}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:rgba(18,16,14,.9);color:#fff;border-color:rgba(255,255,255,.3)}
.to-top span[aria-hidden]{font-size:16px;line-height:1}

/* ---------- RTL ---------- */
[dir="rtl"] .eyebrow:before{margin-inline-end:9px}
[dir="rtl"] body{text-align:right}
[dir="rtl"] .navlinks,[dir="rtl"] .btn-row,[dir="rtl"] .stats-in{flex-direction:row}
[dir="rtl"] .langmenu{inset-inline-end:auto;inset-inline-start:0}
[dir="rtl"] .crumb{direction:rtl}
[dir="rtl"] table.spec th,[dir="rtl"] table.spec td{text-align:right}
[dir="rtl"] .faq summary:after{float:left}
[dir="rtl"] .to-top{inset-inline-start:auto;inset-inline-end:22px}
[dir="rtl"] .wa-fab{inset-inline-end:auto;inset-inline-start:22px}
[dir="rtl"] .wa-fab{flex-direction:row-reverse}
[dir="rtl"] .wa-tip::after{right:auto;left:-5px;border-left-color:transparent;
    border-right:6px solid var(--ink);border-left:0}
[dir="rtl"] .wa-tip{clip-path:inset(0 0 0 100%)}
[dir="rtl"] .wa-fab:hover .wa-tip,[dir="rtl"] .wa-fab:focus-within .wa-tip{
    clip-path:inset(0 0 0 0)}

/* nav bar has more items now; tighten on medium screens */
/* seven top-level items, with the five catalogue categories inside the Collections
   dropdown, so the desktop spacing steps down twice before the tablet rules */
/* the row needs ~1290px at full size, so it steps down from 1500px to stay
   comfortably inside the 1340px container (1284px of usable width) */
@media(max-width:1220px){
  .navlinks{gap:22px;font-size:13.5px}
}
@media(max-width:1060px){
  .navlinks{gap:20px;font-size:13px}
  .navcta{padding:10px 15px;font-size:13px}
  .brand b{font-size:20px}
}
@media(max-width:940px){
  .navlinks{gap:18px;font-size:12.5px}
  .brand b{font-size:18px;letter-spacing:.11em}
  .brand .mark{height:32px}
  .brand{gap:10px}
  .langbtn{padding:8px 12px;font-size:12.5px}
}
/* Seven top-level items plus the brand, the language picker and the call-to-action do
   not fit on one line below roughly 940px. These two rules used to force the container
   to 1120-1130px instead, which made the page scroll sideways on every screen between
   701px and 1135px - a phone in landscape, or a small tablet. The menu now takes over
   below 940px, so the container can simply follow the viewport. */
@media(max-width:700px){
  .langwrap{order:3}
  .langbtn{padding:8px 12px;font-size:12.5px}
  .to-top{padding:10px 14px;font-size:12.5px}
  .to-top-txt{display:none}
}

/* ---------- responsive ---------- */
@media(max-width:1000px){
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .hero-media img{height:auto;aspect-ratio:16/11}
  .cards,.feats{grid-template-columns:1fr 1fr}
  .cats{grid-template-columns:repeat(3,1fr)}
  .gallery{grid-template-columns:repeat(3,1fr)}
  .stats-in{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr 1fr}
}
@media(max-width:940px){
  .navlinks{display:none;position:absolute;top:78px;left:0;right:0;background:var(--bone);
     flex-direction:column;padding:18px 28px;border-bottom:1px solid var(--line);gap:4px}
  .navlinks.open{display:flex}
  .menubtn{display:block}
  .navcta{display:none}
}
/* The stacking changes below belong to phones only; the header switches to the menu
   earlier, at 940px, because seven items plus the brand, picker and button do not fit. */
@media(max-width:700px){
  .cards,.feats,.gallery,.frow,.foot{grid-template-columns:1fr}
  .cats{grid-template-columns:1fr 1fr}
  section{padding:52px 0}
  .wrap,.narrow{padding:0 20px}
}

/* ---------- catalogue album: whole pages, never cropped ---------- */
.catsec{padding:42px 0 6px}
.albgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:14px}
.albcard{margin:0;background:var(--paper);border:1px solid var(--line);
  border-radius:12px;overflow:hidden;transition:.25s;cursor:zoom-in}
.albcard:hover{box-shadow:0 16px 34px rgba(60,45,20,.16);transform:translateY(-2px)}
.albcard img{display:block;width:100%;height:auto}
.albcard figcaption{display:flex;justify-content:space-between;align-items:center;
  gap:8px;padding:9px 12px;font-size:12px;color:var(--muted);
  border-top:1px solid var(--line)}
.albcard .pno{font-weight:600;color:var(--brass-dk);font-variant-numeric:tabular-nums}
@media (max-width:900px){.albgrid{grid-template-columns:repeat(2,1fr);gap:14px}}
@media (max-width:600px){.albgrid{grid-template-columns:1fr;gap:12px}}

/* ---------- viewer with previous / next ---------- */
.lbnav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.12);
  border:0;color:#fff;font-size:30px;line-height:1;width:56px;height:76px;
  border-radius:10px;cursor:pointer;transition:.2s;display:flex;
  align-items:center;justify-content:center}
.lbnav:hover{background:rgba(255,255,255,.26)}
.lbprev{left:18px}
.lbnext{right:18px}
.lbcount{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);
  color:#EDE7DD;font-size:13px;letter-spacing:.06em;background:rgba(0,0,0,.35);
  padding:6px 14px;border-radius:999px;font-variant-numeric:tabular-nums}
.lbcap{position:absolute;top:22px;left:26px;color:#EDE7DD;font-size:14px;
  letter-spacing:.04em;max-width:60vw}
@media (max-width:640px){
  .lbnav{width:44px;height:60px;font-size:24px}
  .lbprev{left:8px}.lbnext{right:8px}
}

/* The language picker and the WhatsApp button travel together on the right, so the
   header has one deliberate gap there instead of space-between scattering the two. */
.navright{display:inline-flex;align-items:center;gap:16px;flex:0 0 auto}
@media (max-width:900px){.navright{gap:10px}}
@media (max-width:700px){
  .navright{margin-inline-start:0}
  /* the rule that hid the language control here has been removed: it is now shown in the
     header at every width, which is the whole point of moving it out of this group */
  }

/* ------------------------------------------------ header rhythm (final say)
   The sheet declares .navlinks several times; these rules come last so the gap and
   type size are uniform and stated once per width rather than whichever earlier
   declaration happened to win. */
.navlinks{gap:26px;font-size:14px}
@media (max-width:1200px){.navlinks{gap:22px;font-size:13.5px}}
@media (max-width:1050px){.navlinks{gap:18px;font-size:13px}}
@media (max-width:950px){.navlinks{gap:15px;font-size:12.5px}}

/* A catalogue page is a landscape sheet, so it gets a landscape frame and is shown
   whole. Cover-cropping it to the portrait frame used for product photographs cut most
   of the page away and hid the products. */
.hero-media-wide img{height:auto;aspect-ratio:1.41;object-fit:contain;background:var(--paper)}
@media (min-width:901px){
  .hero-grid:has(.hero-media-wide){grid-template-columns:1fr 1.35fr;gap:44px}
}

/* ------------------------------------------------ touch targets (final say)
   Measured in the browser: the language button was 38px tall and the rows in its menu
   about 34px, both under the 44px comfortable minimum. The WhatsApp button beside it
   already measures 45px, so only these two needed adjusting. These rules come last
   because the button is restyled at two narrower breakpoints earlier in the sheet. */
.langbtn{padding:13px 15px;font-size:12.5px;min-height:44px}
.langitem{padding:13px 14px;min-height:44px;display:flex;align-items:center}

/* ------------------------------------------------ language in the header
   The picker used to sit in the right-hand group, which the header hid below 700px, so a
   phone user had no way to change language at all. It is now a direct child of the header
   and stays in the top bar at every width. Living outside the navigation panel matters
   for a second reason: that panel is an absolutely positioned dropdown, so a menu opened
   from inside it would be clipped or overdrawn by it, and its z-index is raised above. */
@media (max-width:940px){
  .menubtn{order:3;margin-inline-start:0;display:block;font-size:24px;
    padding:6px 8px;min-height:44px;min-width:44px;line-height:1}
  .langwrap{order:2;margin-inline-start:auto}
  .navright{order:3;margin-inline-start:0}
  .langmenu{z-index:80}
  /* on a phone the picker shows the globe and the code only, so it does not crowd the
     wordmark; the full language name is still read out as the button's text */
  .langbtn{padding:13px 12px;font-size:12.5px;min-height:44px;gap:6px}
}