/* ANROCK — style D: warm travertine luxury editorial */
:root{
  --bg:#f3ece1;--bg2:#e9dfcf;--bg3:#dccfb9;
  --ink:#2f2821;--mute:#85776a;--acc:#9b7a4e;
  --line:rgba(155,122,78,.55);--hair:rgba(47,40,33,.14);
  --hh:72px;--pad:clamp(20px,4.4vw,72px);
  --serif:"Palatino Linotype",Palatino,"Book Antiqua","Cormorant Garamond",Georgia,"Songti SC","STSong","Noto Serif SC","Source Han Serif SC",SimSun,serif;
  --sans:"Segoe UI",-apple-system,"Microsoft YaHei","PingFang SC","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;font-family:var(--serif);color:var(--ink);background:var(--bg);line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:inherit}
svg{display:block;max-width:100%}
.wrap{max-width:1360px;margin:auto;padding:0 var(--pad)}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.04;letter-spacing:-.01em;margin:0}
:lang(zh) h1,:lang(zh) h2,:lang(zh) h3{letter-spacing:.06em;line-height:1.3;font-style:normal}
:focus-visible{outline:1px solid var(--acc);outline-offset:3px}
.sc,.nav nav,.lang,.mod-s,.entry p,.soon p,label,footer,.wa,.btn{font-variant-caps:all-small-caps;letter-spacing:.12em}
:lang(zh) .nav nav,:lang(zh) .btn,:lang(zh) footer{letter-spacing:.08em}

/* ---------- header (masthead with double rule) ---------- */
header{position:sticky;top:0;z-index:30;background:var(--bg);border-bottom:1px solid var(--hair);box-shadow:0 4px 0 -3px var(--hair)}
.nav{display:flex;flex-direction:column;align-items:center;gap:10px;min-height:72px;padding:12px var(--pad) 8px;max-width:1600px;margin:auto}
.logo{display:flex;align-items:center;gap:14px;text-decoration:none;font-size:12px;letter-spacing:.2em;font-variant-caps:all-small-caps}
.logo b{display:inline-grid;place-items:center;width:46px;height:46px;flex:none;border:1px solid var(--acc);border-radius:50%;color:var(--acc);font-size:9px;font-weight:400;letter-spacing:.1em}
.nav nav{display:flex;align-items:center;justify-content:center;gap:8px clamp(14px,2vw,32px);font-size:16px;flex-wrap:wrap;width:100%;padding-top:8px;border-top:1px solid var(--hair)}
.nav nav a{text-decoration:none;color:var(--mute);padding:2px 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.nav nav a:hover,.nav nav a[aria-current]{color:var(--ink);border-color:var(--acc)}
.lang{font:inherit;font-size:15px;font-style:italic;border:0;border-left:1px solid var(--hair);background:none;color:var(--acc);padding:2px 0 2px 16px;cursor:pointer}
.lang:hover{color:var(--ink)}

/* ---------- shared ---------- */
.btn{display:inline-block;padding:12px 26px;background:#5b4030;color:#fff8ef;text-decoration:none;border:1px solid #5b4030;cursor:pointer;font:inherit;font-size:17px;margin:4px 8px 4px 0;transition:background .25s,color .25s,border-color .25s}
.btn:hover{background:#432d21;border-color:#432d21}
.btn.o{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.o:hover{background:transparent;border-color:var(--ink)}
.ph{display:grid;place-items:center;aspect-ratio:4/3;padding:10px;text-align:center;font-size:12px;color:var(--mute);background:var(--bg3)}
section{padding:clamp(80px,10vw,160px) 0;border-top:1px solid var(--hair)}
.alt{background:var(--bg2)}
h2{font-size:clamp(42px,6.2vw,100px);font-style:italic;margin:0 0 clamp(36px,4.5vw,72px)}
h2:after{content:"";display:block;width:56px;height:1px;background:var(--acc);margin-top:22px}
.note{font-size:14px;font-style:italic;color:var(--mute);margin:32px 0 0;padding-top:14px;border-top:1px solid var(--hair);max-width:70ch}

.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:64px clamp(24px,3vw,56px);counter-reset:step;align-items:start}
.step{counter-increment:step;position:relative}
.step:nth-child(3n+2){margin-top:56px}
.step:before{content:counter(step,decimal-leading-zero);display:block;font-style:italic;font-size:clamp(40px,3.8vw,64px);line-height:1;color:var(--acc);margin-bottom:14px}
.step .ph{aspect-ratio:4/3}
.step h3{font-size:clamp(21px,1.8vw,27px);margin:18px 0 6px}
.step p{margin:0;color:var(--mute);font-size:15px;font-style:italic}
.step p:empty{display:none}

footer{border-top:1px solid var(--hair);color:var(--mute);padding:36px 0;font-size:15px;text-align:center}
.sticky{display:none}

/* ---------- home: first-screen modules (asymmetric spread) ---------- */
.mods{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:repeat(2,minmax(0,1fr));gap:clamp(14px,1.8vw,28px);height:calc(100vh - var(--hh));height:calc(100svh - var(--hh));min-height:440px;padding:clamp(16px,2.2vw,32px) var(--pad);border-top:0}
.mod{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);min-height:0;overflow:hidden;text-decoration:none;background:var(--bg2)}
.mod .ph,.mod .ph.has-img{grid-row:1;grid-column:1;aspect-ratio:auto;min-height:0;height:100%}
.mod .ph img{transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.mod .sample-note{top:8px;bottom:auto}
.mod-t{grid-row:1;grid-column:2;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:clamp(18px,2vw,32px);padding-bottom:clamp(22px,2.4vw,40px)}
.mod-t em{display:flex;align-items:center;gap:12px;font-size:16px;color:var(--acc);margin-bottom:12px}
.mod-t em:before{content:"";width:32px;height:1px;background:var(--acc)}
.mod-h{font-size:clamp(30px,3.2vw,54px);line-height:1.02}
:lang(zh) .mod-h{font-size:clamp(22px,2.3vw,40px);letter-spacing:.04em;line-height:1.25}
:lang(zh) .mod:nth-child(1) .mod-h{font-size:clamp(40px,4.6vw,84px);letter-spacing:.08em}
.mod-s{margin-top:10px;font-size:16px;color:var(--acc)}
.mod-go{position:absolute;right:clamp(14px,1.6vw,24px);bottom:clamp(14px,1.6vw,24px);display:grid;place-items:center;width:46px;height:46px;border:1px solid var(--line);border-radius:50%;background:var(--bg);color:var(--acc);font-size:18px;transition:background .3s,color .3s,transform .4s}
.mod:hover .ph img,.mod:focus-visible .ph img{transform:scale(1.04)}
.mod:hover .mod-go,.mod:focus-visible .mod-go{background:var(--ink);color:var(--bg);transform:translateX(4px)}
/* lead story: full image with a cut-out caption */
.mod:nth-child(1){grid-row:1/3;display:block;background:none}
.mod:nth-child(1) .ph{position:absolute;inset:0}
.mod:nth-child(1) .mod-t{position:absolute;left:0;bottom:0;background:var(--bg);padding:clamp(22px,2.4vw,40px) clamp(32px,4vw,64px) 0 0;max-width:80%}
.mod:nth-child(1) .mod-h{font-size:clamp(44px,5.4vw,96px)}
/* third story mirrors the second */
.mod:nth-child(3){grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
.mod:nth-child(3) .ph{grid-column:2}
.mod:nth-child(3) .mod-t{grid-column:1}
.ph.mosaic.has-img{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);gap:3px;background:var(--bg)}
.ph.mosaic.has-img img{min-width:0;min-height:0}
/* desktop: the hovered / focused story widens its column and row */
@media (hover:hover) and (pointer:fine) and (min-width:769px){
  /* shrunk row keeps room for its caption, but never more than an even split */
  .mods{--mod-min:min(calc(56px + 11vw),250px,45%);grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:minmax(var(--mod-min),1fr) minmax(var(--mod-min),1fr)}
  /* focus left behind by a mouse click must not hold the layout open */
  .mods:has(.mod:nth-child(1):focus-within:not(:focus:not(:focus-visible))),.mods:has(.mod:nth-child(1):focus-visible){grid-template-columns:minmax(0,8fr) minmax(0,4fr)}
  .mods:has(.mod:nth-child(2):focus-within:not(:focus:not(:focus-visible))),.mods:has(.mod:nth-child(2):focus-visible){grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:minmax(var(--mod-min),3fr) minmax(var(--mod-min),1fr)}
  .mods:has(.mod:nth-child(3):focus-within:not(:focus:not(:focus-visible))),.mods:has(.mod:nth-child(3):focus-visible){grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:minmax(var(--mod-min),1fr) minmax(var(--mod-min),3fr)}
  .mods:has(.mod:nth-child(1):hover){grid-template-columns:minmax(0,8fr) minmax(0,4fr);grid-template-rows:minmax(var(--mod-min),1fr) minmax(var(--mod-min),1fr)}
  .mods:has(.mod:nth-child(2):hover){grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:minmax(var(--mod-min),3fr) minmax(var(--mod-min),1fr)}
  .mods:has(.mod:nth-child(3):hover){grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:minmax(var(--mod-min),1fr) minmax(var(--mod-min),3fr)}
  .mod:nth-child(1) .mod-t{max-width:100%}
  /* right-hand headings wrap as at the default 5fr width, so widening never rewraps them */
  .mod:nth-child(n+2) .mod-h{max-width:calc((100vw - 2*var(--pad) - clamp(14px,1.8vw,28px))*5/12/2.15 - 2*clamp(18px,2vw,32px))}
  .mod .ph{transition:opacity .6s ease}
  .mod .ph img{transition:transform .7s ease}
  .mod-go{transition:background .3s,color .3s,transform .4s,opacity .3s}
  .mod:hover .ph img,.mod:focus-visible .ph img{transform:scale(1.05)}
  .mods:has(.mod:hover) .mod:not(:hover) .ph,.mods:has(.mod:focus-visible) .mod:not(:focus-visible) .ph{opacity:.85}
  .mods:has(.mod:hover) .mod:not(:hover) .mod-go,.mods:has(.mod:focus-visible) .mod:not(:focus-visible) .mod-go{opacity:0}
  .mod:focus-visible{outline:2px solid var(--acc);outline-offset:4px}
}
@media (hover:hover) and (pointer:fine) and (min-width:769px) and (prefers-reduced-motion:no-preference){
  .mods{transition:grid-template-columns .6s ease,grid-template-rows .6s ease}
}

/* ---------- home: intro (logo -> slab cut) ---------- */
.intro{padding:clamp(56px,10vw,120px) 0;position:relative;overflow:hidden;background:var(--bg)}
.intro-stage{display:flex;flex-direction:column;align-items:center;gap:40px;padding:0 var(--pad);text-align:center}
.mark-box{position:relative;width:min(80vw,540px)}
.mark{width:100%;height:auto;color:var(--acc);overflow:visible}
.mark path{stroke-width:1.2}
.mark-half.b,.blade,.scroll-cue,.mark .trace{display:none}
.mark-box .slab{margin-top:36px;filter:drop-shadow(0 22px 30px rgba(90,64,30,.18))}
.mark-box .slab svg{width:100%;height:auto}
.mark-box .slab [stroke="#b8963e"]{stroke:#9b7a4e}
.intro-brand{font-size:clamp(18px,2vw,28px);letter-spacing:.22em;line-height:1.5;max-width:30ch;font-variant-caps:all-small-caps}
:lang(zh) .intro-brand{letter-spacing:.44em}

/* ---------- home: process story ---------- */
.story-head{position:relative}
.story-bar{display:block;height:1px;background:var(--acc);transform-origin:left;margin:-8px 0 48px}
.story .steps{padding:0 var(--pad);max-width:1360px;margin:auto}

/* ---------- home: services (staggered editorial columns) ---------- */
.paths h2{margin-bottom:0}
.fork{position:relative;height:clamp(70px,12vh,130px);max-width:1360px;margin:auto}
.fork .trunk{position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--acc);transform-origin:top}
.fork .rule{position:absolute;left:var(--pad);right:var(--pad);bottom:0;height:1px;background:var(--acc);transform-origin:center}
.entries{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr);gap:clamp(20px,3vw,56px);align-items:start;max-width:1360px;margin:auto;padding:0 var(--pad);counter-reset:entry}
.entry{counter-increment:entry;position:relative;display:block;text-decoration:none;padding-top:48px}
.entry:nth-child(2){margin-top:12vh}
.entry:nth-child(3){margin-top:5vh}
.entry .tick{position:absolute;top:0;left:50%;width:1px;height:48px;background:var(--acc);transform-origin:top}
.entry .ph{aspect-ratio:4/5}
.entry:nth-child(2) .ph{aspect-ratio:1/1}
.entry:nth-child(3) .ph{aspect-ratio:3/4}
.entry img{transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.entry:hover img{transform:scale(1.04)}
.entry .t{padding-top:18px}
.entry .t:before{content:counter(entry,decimal-leading-zero);display:block;font-style:italic;font-size:18px;color:var(--acc);margin-bottom:6px}
.entry h3{font-size:clamp(26px,2.6vw,42px)}
.entry p{margin:8px 0 0;font-size:16px;color:var(--acc)}

/* ---------- home: scroll-driven layout (desktop, motion allowed, JS on) ---------- */
@keyframes trace{0%{stroke-dashoffset:1;opacity:1}70%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (min-width:769px) and (prefers-reduced-motion:no-preference){
  .js .intro{height:calc(100vh - var(--hh));min-height:600px;padding:0;display:grid;place-items:center}
  .js .intro-stage{gap:6vh}
  .js .mark-box{width:min(46vw,92vh,580px);aspect-ratio:430/240}
  .js .mark-half{position:absolute;inset:0}
  .js .mark-half.a{clip-path:inset(0 0 50% 0)}
  .js .mark-half.b{display:block;clip-path:inset(50% 0 0 0)}
  .js .mark .trace{display:inline;stroke:#6e5232;stroke-width:2;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;animation:trace 2.4s cubic-bezier(.6,0,.2,1) forwards;animation-delay:calc(var(--i)*.15s + .2s)}
  .js .mark-box .slab{position:absolute;left:0;right:0;top:50%;margin-top:-23.26%;transform:scaleY(0)}
  .js .blade{display:block;position:absolute;left:-8%;right:-8%;top:50%;height:1px;background:var(--acc);box-shadow:0 0 10px rgba(155,122,78,.6);transform:scaleX(0);transform-origin:left}
  .js .intro-brand{opacity:0}
  .js .scroll-cue{display:block;position:absolute;left:50%;bottom:28px;width:1px;height:56px;background:var(--acc);animation:cue 2.6s ease-in-out infinite}

  .js .story{height:calc(100vh - var(--hh));min-height:620px;padding:0;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
  .js .story .steps{display:flex;align-items:flex-start;gap:5vw;width:max-content;max-width:none;margin:0;padding:0 12vw 0 max(var(--pad),calc((100vw - 1360px)/2 + var(--pad)))}
  .js .story .step{width:clamp(240px,min(25vw,40vh),420px);flex:none;margin-top:0}
  .js .story .step:nth-child(even){margin-top:9vh}
  .js .story h2{font-size:clamp(42px,5vw,84px);margin-bottom:24px}
}

/* ---------- featured (staggered row) ---------- */
.featured{padding:clamp(72px,9vw,150px) 0}
.feat-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(28px,4vw,56px)}
.feat-head h2{margin:0}
.feat-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(14px,1.8vw,32px);align-items:start;max-width:1360px;margin:auto;padding:0 var(--pad) 56px}
.feat-item{display:block;text-decoration:none}
.feat-item:nth-child(even){margin-top:56px}
.feat-item .ph{display:block;position:relative;aspect-ratio:3/4;overflow:hidden}
.feat-item img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.feat-item:hover img{transform:scale(1.05)}
.feat-cap{display:flex;gap:10px;align-items:baseline;margin-top:12px;font-size:18px;font-style:italic}
.feat-cap em{color:var(--acc);font-size:14px}

/* ---------- wholesale ---------- */
.hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:0 clamp(28px,5vw,96px);min-height:calc(100vh - var(--hh));padding:clamp(20px,3vw,48px) var(--pad);max-width:1600px;margin:auto}
.hero .ph{aspect-ratio:auto;min-height:320px;outline:1px solid var(--line);outline-offset:10px;margin:10px}
.hero .in{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:clamp(32px,5vw,80px) 0}
.hero h1{font-size:clamp(44px,6.2vw,108px);margin:0 0 36px}
.hero p{max-width:50ch;margin:0 0 36px;font-size:18px;font-style:italic;color:var(--mute);padding-top:20px;border-top:1px solid var(--acc)}
.lede{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:0 5vw;align-items:start}
.lede>p{margin:0;font-size:clamp(17px,1.35vw,20px);line-height:1.75;column-count:2;column-gap:clamp(24px,3vw,48px)}
.lede>p:first-letter{float:left;font-size:4.4em;line-height:.85;padding:6px 10px 0 0;color:var(--acc)}
:lang(zh) .lede>p{font-size:clamp(16px,1.2vw,18px);line-height:2}
.trio{grid-column:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,44px);margin-top:64px;padding-top:28px;border-top:1px solid var(--hair)}
.card h3{font-size:clamp(19px,1.5vw,23px);color:var(--acc);font-variant-caps:all-small-caps;letter-spacing:.1em;margin:0 0 10px}
.card p{margin:0;color:var(--mute);font-size:15px;font-style:italic}

/* slab wall (drag to pan, staggered) */
.wall{position:relative;height:min(82vh,840px);overflow:auto;cursor:grab;scrollbar-width:none;background:var(--bg2);border-block:1px solid var(--hair);-webkit-mask-image:linear-gradient(var(--wall-mask-direction,to right),transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(var(--wall-mask-direction,to right),transparent,#000 5%,#000 95%,transparent)}
.wall::-webkit-scrollbar{display:none}
.wall.dragging{cursor:grabbing}
.wall.dragging .slab{pointer-events:none}
.slabs{display:grid;grid-template-columns:repeat(4,clamp(260px,26vw,460px));gap:5vw 4vw;width:max-content;padding:5vw 7vw 12vw;user-select:none;-webkit-user-select:none}
.slabs .slab{margin:0}
.slabs .slab:nth-child(even){transform:translateY(7vw)}
.slab-open{display:block;width:100%;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:zoom-in}
.slab-open .ph{aspect-ratio:4/5;outline:1px solid transparent;outline-offset:6px;transition:outline-color .3s}
.slab-open:hover .ph,.slab-open:focus-visible .ph{outline-color:var(--acc)}
.slab figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:14px}
.slab-name{font-size:21px;font-style:italic}
.wa{font-size:15px;color:var(--acc);text-decoration:none;border-bottom:1px solid var(--line);white-space:nowrap;-webkit-user-drag:none}
.wa:hover{color:var(--ink)}
.btn.wa{color:var(--bg);border:1px solid var(--ink);font-size:17px}

/* lightbox */
#lb{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:clamp(16px,4vw,56px);background:rgba(243,236,225,.97);opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
#lb.open{opacity:1;visibility:visible}
.lb-in{width:min(92vw,1180px);display:grid;gap:20px;transform:scale(.97);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
#lb.open .lb-in{transform:none}
#lb .ph{width:100%;aspect-ratio:16/10;max-height:68vh}
.lb-cap{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;padding-top:18px;border-top:1px solid var(--acc)}
.lb-cap .slab-name{font-size:clamp(34px,5vw,80px);line-height:1}
.lb-x{position:absolute;top:16px;right:20px;width:46px;height:46px;font-size:22px;line-height:1;background:none;color:var(--ink);border:1px solid var(--line);border-radius:50%;cursor:pointer}
.lb-x:hover{border-color:var(--ink)}

/* contact */
.contact-links{margin:0 0 8px}
form{display:grid;gap:28px 40px;grid-template-columns:1fr 1fr;margin-top:48px}
form .f{grid-column:1/-1}
label{display:block;font-size:16px;color:var(--mute);margin-bottom:2px}
input,textarea{width:100%;padding:10px 0;background:transparent;color:var(--ink);font:inherit;border:0;border-bottom:1px solid rgba(47,40,33,.3);border-radius:0}
textarea{padding:12px;border:1px solid rgba(47,40,33,.3);resize:vertical;background:rgba(255,255,255,.35)}
input:focus,textarea:focus{outline:none;border-color:var(--acc)}
input[type=file]{font-size:14px;color:var(--mute);border-bottom-style:dashed}
#ok{display:none;color:var(--acc);font-style:italic}

/* ---------- coming-soon pages ---------- */
.soon{position:relative;overflow:hidden;border-top:0;min-height:calc(100vh - var(--hh) - 92px);display:flex;align-items:flex-end}
.soon .wrap{position:relative;z-index:1;width:100%}
.soon h2{font-size:clamp(54px,10vw,170px);max-width:11ch}
.soon p{margin:0;font-size:20px;color:var(--acc)}
.soon .mark{position:absolute;right:-4vw;top:6%;width:min(62vw,820px);color:var(--line);pointer-events:none}
.soon .mark path{stroke-width:.8}

/* ---------- material colors (asymmetric spread) ---------- */
.colors{border-top:0;padding-top:clamp(56px,7vw,110px)}
.colors h1{font-size:clamp(50px,8vw,136px);font-style:italic;margin:0 0 clamp(40px,5vw,80px)}
:lang(zh) .colors h1{font-style:normal}
.colors h1:after{content:"";display:block;width:56px;height:1px;background:var(--acc);margin-top:22px}
.cgrid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr);gap:clamp(36px,4vw,72px) clamp(20px,3vw,56px);align-items:start}
.ctile{display:block;text-decoration:none}
.ctile .ph{aspect-ratio:4/5}
.ctile:nth-child(3n+2){margin-top:12%}
.ctile:nth-child(3n+2) .ph{aspect-ratio:1/1}
.ctile:nth-child(3n){margin-top:4%}
.ctile:nth-child(3n) .ph{aspect-ratio:3/4}
.ctile img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.ctile:hover img,.ctile:focus-visible img{transform:scale(1.04)}
.ctile-cap{display:flex;gap:12px;align-items:baseline;margin-top:14px;font-size:clamp(24px,2.2vw,36px);font-style:italic;line-height:1.1}
.ctile-cap em{font-size:14px;color:var(--acc);font-style:italic}

/* ---------- reduced motion / responsive ---------- */
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}
@media (max-width:768px),(prefers-reduced-motion:reduce){
  .wall{height:auto;overflow:visible;cursor:auto;border:0;background:none;-webkit-mask-image:none;mask-image:none}
  .slabs{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));width:auto;max-width:1360px;margin:auto;padding:0 var(--pad);gap:40px 28px}
  .slabs .slab:nth-child(even){transform:none}
}
@media (max-width:1000px){
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .step:nth-child(3n+2){margin-top:0}
  .step:nth-child(even){margin-top:48px}
  .lede{grid-template-columns:1fr}
  .trio{grid-column:auto}
}
@media(max-width:900px){.feat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:768px){
  :root{--hh:108px}
  .nav{gap:8px;padding:10px 16px 6px;align-items:flex-start}
  .logo{font-size:11px;letter-spacing:.14em}
  .nav nav{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;scrollbar-width:none;gap:18px;font-size:15px;padding-top:6px}
  .nav nav::-webkit-scrollbar{display:none}
  .steps,.trio{grid-template-columns:1fr;gap:44px}
  .step:nth-child(n){margin-top:0}
  .hero{grid-template-columns:1fr;min-height:0;padding:20px}
  .hero .ph{min-height:0;aspect-ratio:4/3}
  .hero .in{padding:36px 0 40px}
  .lede>p{column-count:1}
  .entries{grid-template-columns:1fr 1fr;gap:28px 16px}
  .entry:nth-child(n){margin-top:0}
  .entry:nth-child(1){grid-column:1/-1}
  .entry:nth-child(1) .ph{aspect-ratio:16/10}
  .entry:nth-child(3){margin-top:40px}
  .slabs{grid-template-columns:1fr 1fr;gap:28px 14px}
  .slab figcaption{flex-direction:column;gap:4px}
  .slab-name{font-size:18px}
  form{grid-template-columns:1fr}
  .soon{min-height:70vh}
  .feat-item:nth-child(even){margin-top:32px}
  .cgrid{grid-template-columns:1fr 1fr;gap:32px 16px}
  .ctile:nth-child(n){margin-top:0}
  .ctile:nth-child(n) .ph{aspect-ratio:4/5}
  .ctile:nth-child(even){margin-top:36px}
  .ctile-cap{font-size:20px;gap:8px}
  .sticky{display:block;position:fixed;bottom:14px;right:14px;left:14px;text-align:center;z-index:20;margin:0}
  body{padding-bottom:76px}
  /* three stories share the first screen */
  .mods{grid-template-columns:1fr;grid-template-rows:1.2fr 1fr 1fr;gap:10px;height:calc(100vh - var(--hh) - 76px);height:calc(100svh - var(--hh) - 76px);min-height:390px;padding:12px 16px 8px}
  .mod:nth-child(1){grid-row:auto}
  .mod:nth-child(1) .mod-t{padding:14px 26px 0 0;max-width:86%}
  .mod:nth-child(1) .mod-h{font-size:clamp(28px,8vw,38px)}
  .mod-t{padding:14px}
  .mod-t em{font-size:13px;margin-bottom:6px}
  .mod-t em:before{width:18px}
  .mod-h{font-size:clamp(20px,5.8vw,26px)}
  .mod-s{font-size:14px;margin-top:4px}
  .mod-go{width:34px;height:34px;font-size:14px;right:10px;bottom:10px}
  .mod:nth-child(1) .mod-go{bottom:auto;top:10px;right:auto;left:10px}
}
@media(max-width:560px){.feat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* temporary sample photos */
.ph.has-img{position:relative;padding:0;overflow:hidden;display:block}
.ph.has-img img{display:block;width:100%;height:100%;object-fit:cover}
.sample-note{position:absolute;right:6px;bottom:6px;padding:2px 6px;font-family:var(--sans);font-style:normal;font-size:10px;letter-spacing:.04em;font-variant-caps:normal;color:rgba(255,255,255,.85);background:rgba(0,0,0,.4);border-radius:2px;pointer-events:none}
#lb .ph.has-img img{object-fit:contain;background:var(--bg2)}

/* Native language labels and Arabic must not inherit Latin display tracking. */
:lang(ar){font-variant-caps:normal!important;letter-spacing:normal!important}
.nav nav .language-menu,.nav nav .language-menu *{font-variant-caps:normal;letter-spacing:normal}
[dir=rtl]{--wall-mask-direction:to left}