/* ============================================================
   Tiley Studio — shared styles
   Type (fonts from the official Tiley Brand File, self-hosted):
     · Spectral — primary display serif (Latin)
     · Amiri — Arabic typeface (RTL), chosen by the designer to pair
       with Spectral (feedback round 2, approved Oct 2026). It replaces
       the Brand File's Kitab, whose files stay in assets/fonts.
     · Expo Sans Pro — secondary sans (Adobe Fonts). Needs the
       studio's Adobe Fonts web kit to embed; Hanken Grotesk is
       the temporary fallback until that kit is added.
   Logo: official wordmark SVG, tinted via currentColor.
   Palette: official brand hex (see :root).

   TYPE SCALE — from the designer's feedback file ("Tiley Website
   Feedback", Jathb, Oct 2026). Sizes are the designer's px on a
   1920-wide screen: each one is reached at 1920 and scales with the
   viewport below it (value / 19.2 = vw), with a readable floor.
   Phones (≤760px) take their own sizes in the RESPONSIVE section —
   the mobile slides reuse desktop sizes inside a wider frame, so
   phone sizes keep the hierarchy at a readable size instead.
   Display tracking "-30" (Illustrator) = -0.03em.
   Round 2 ("02 Tiley Website Feedback"): smaller wordmark (64), nav 24,
   home heading 60 below the photo split, home lede 22, home text in
   brand sand, about lede 32, about values text 28, sample intro 22.

   Logical properties used so the Arabic RTL layer attaches via [dir="rtl"].
   ============================================================ */

/* primary serif — Spectral, self-hosted from the Tiley Brand File (OFL) */
@font-face{font-family:'Spectral';src:url("../assets/fonts/Spectral-Light.ttf") format("truetype");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Spectral';src:url("../assets/fonts/Spectral-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Spectral';src:url("../assets/fonts/Spectral-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Spectral';src:url("../assets/fonts/Spectral-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Spectral';src:url("../assets/fonts/Spectral-LightItalic.ttf") format("truetype");font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:'Spectral';src:url("../assets/fonts/Spectral-Italic.ttf") format("truetype");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Spectral';src:url("../assets/fonts/Spectral-MediumItalic.ttf") format("truetype");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:'Spectral';src:url("../assets/fonts/Spectral-SemiBoldItalic.ttf") format("truetype");font-weight:600;font-style:italic;font-display:swap}

/* Arabic typeface — Amiri, self-hosted (OFL 1.1, v1.002, WOFF2). Limited to Arabic code points
   so that Latin text inside Arabic pages (names, specs, numbers) uses the brand's Latin fonts —
   Spectral and Expo Sans Pro — rather than Amiri's own Latin letters. */
@font-face{font-family:'Amiri';src:url("../assets/fonts/Amiri-Regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F;}
@font-face{font-family:'Amiri';src:url("../assets/fonts/Amiri-Bold.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F;}

:root{
  --sand:#e6d3b3;        /* primary warm ground */
  --cream:#f3ecdb;       /* text/marks on dark or photographic grounds */
  --ink:#2d2620;         /* skip link only */
  --slate:#3b4b63;       /* about ground */
  --slate-line:rgba(243,236,219,.22);
  --red:#b84336;         /* terracotta — project gallery ground */

  /* official brand palette — TILEY BRAND VISUAL IDENTITY */
  --ochre:#d0bf7f;       /* warm khaki/ochre */
  --clay:#d98c6b;        /* clay / salmon */
  --brown:#7a4e3a;       /* text + rules on sand (designer's feedback) */
  --purple:#8d8796;      /* accent mauve-grey */
  --teal:#5e8c8a;        /* accent teal */
  --line-sand:rgba(122,78,58,.5);   /* brand brown at its 50% tint — hairlines on sand */

  --serif:'Spectral', Georgia, 'Times New Roman', serif;
  /* secondary sans: Expo Sans Pro (Adobe) activates once the studio's
     Adobe Fonts kit is added; Hanken Grotesk is the temporary fallback */
  --sans:'expo-sans-pro', 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --track:-.03em;                  /* designer's display tracking "-30" */
  --gutter:clamp(20px,5vw,100px);  /* ≈96px at 1920, as in the new product layout */
  --maxw:1920px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--sand);color:var(--brown);
  font-family:var(--sans);font-weight:400;line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-family:var(--serif);font-weight:600;text-wrap:balance}
h1 em,h2 em,h3 em{font-style:italic}
p{margin:0}

/* page grounds (set on <body>) */
body.bg-sand{background:var(--sand);color:var(--brown);--slate-line:var(--line-sand)}
body.bg-slate{background:var(--slate);color:var(--cream)}
body.bg-red{background:var(--red);color:var(--cream)}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- header / masthead ---------- */
/* designer: nav in Spectral Regular, sentence case; no rule under the masthead.
   Round 2: nav 36 → 24 and the wordmark a little smaller (73 → 64); the gaps and
   the language toggle scale with the nav so the bar keeps its proportions. */
.site-header{display:flex;align-items:center;justify-content:space-between;gap:clamp(20px,3vw,48px);
  padding-block:clamp(20px,3.9vw,75px) 0}
/* official wordmark — inline SVG tinted by currentColor (cream on dark, brown on sand) */
.logo{display:inline-block;line-height:0}
.logo-svg{display:block;height:clamp(30px,3.334vw,64px);width:auto;fill:currentColor}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.nav{display:flex;align-items:center;gap:clamp(14px,1.77vw,34px);
  font-family:var(--serif);font-size:clamp(15px,1.25vw,24px);font-weight:400;line-height:1.2}
.nav a{position:relative;padding-block:4px}
.nav a::after{content:"";position:absolute;inset-inline:0 100%;inset-block-end:0;height:1px;
  background:currentColor;transition:inset-inline-end .3s ease}
.nav a:hover::after,.nav a[aria-current="page"]::after{inset-inline-end:0}

/* ---------- footer ---------- */
/* designer: left (tagline + email) Spectral SemiBold Italic 24 · centre Spectral Regular 20 ·
   right Expo Sans Pro Regular 24 */
.site-footer{display:grid;grid-template-columns:1.25fr auto 1fr;align-items:end;
  gap:clamp(20px,4vw,60px);padding-block:clamp(26px,3vw,46px) clamp(18px,2vw,30px);
  font-family:var(--sans);font-size:clamp(14px,1.25vw,24px);line-height:1.35}
.f-left{font-family:var(--serif);font-weight:600;font-style:italic}
.site-footer .tag{max-width:18em;margin-block-end:.65em;line-height:1.3}
.f-fields{display:flex;gap:22px;flex-wrap:wrap}
.f-signup{display:flex;align-items:baseline;gap:10px}
.f-go{background:none;border:0;color:inherit;font-family:var(--serif);font-size:1em;line-height:1;
  cursor:pointer;padding:0 2px;transition:opacity .2s ease,transform .28s ease}
.f-go:hover{transform:translateX(5px)}
[dir="rtl"] .f-go{transform:scaleX(-1)}
[dir="rtl"] .f-go:hover{transform:scaleX(-1) translateX(5px)}
.field{display:flex;align-items:baseline;gap:8px}
.field input{background:transparent;border:0;border-block-end:1px solid currentColor;
  color:inherit;font:inherit;padding:2px;min-width:8em;max-width:11em;outline:none}
.field input::placeholder{color:currentColor;opacity:.55}
.f-center{text-align:center;white-space:nowrap;font-family:var(--serif);font-weight:400;
  font-size:clamp(13px,1.042vw,20px)}
.f-right{display:flex;flex-direction:column;align-items:end;gap:4px;text-align:end}
.f-right .h{margin-block-end:4px}
.f-right a:hover{text-decoration:underline}

/* ---------- shared bits ---------- */
.arw{display:inline-block;transition:transform .28s ease}
a:hover>.arw,.hoverarw:hover .arw{transform:translateX(6px)}
.hoverarw.back:hover .arw{transform:translateX(-6px)}
/* back link (project gallery) — same voice as the product page links */
.pager{display:flex;justify-content:center;gap:clamp(18px,2vw,32px);
  font-family:var(--serif);font-weight:600;font-style:italic;letter-spacing:var(--track);
  font-size:clamp(20px,1.77vw,34px);padding-block:clamp(30px,4vw,60px)}
.pager a{display:inline-flex;align-items:center;gap:.3em;transition:opacity .2s}
.pager a:hover{opacity:.62}
/* page titles — designer: Spectral SemiBold + SemiBold Italic, 90 (collections 99), tracking -30 */
.section-title{text-align:center;font-size:clamp(44px,4.6875vw,90px);line-height:1.02;letter-spacing:var(--track);
  padding-block:clamp(40px,6vw,90px) clamp(30px,4vw,64px)}
.section-title.t-99{font-size:clamp(48px,5.156vw,99px)}

/* =========================================================
   HOME / HERO  (feedback slide 2 · round 2)
   Two stacked photo zones — red tiles above, blue floor below. Each zone
   carries its own photo, so the split line is always the boundary between
   them. Round 2: the heading and the lede sit fully below that line. The
   zones share the screen 57 / 43 whenever the content fits; when the lower
   content needs more room the lower zone grows and the line rises a
   little, so the heading never lands on the red photo.
   All home text is the brand sand #E6D3B3 (round 2 note).
   ========================================================= */
.hero{position:relative;width:100%;min-height:100svh;overflow:hidden;isolation:isolate;background:#1c1a17;color:var(--sand)}
.hero-inner{min-height:100svh;display:flex;flex-direction:column}
.hero-zone{display:flex;flex-direction:column;padding-inline:var(--gutter);
  background-repeat:no-repeat;background-size:cover}
/* the gradients are the former full-height scrim, re-expressed per zone */
.hero-top{flex:57 1 0;gap:clamp(18px,3vw,40px);padding-block:clamp(18px,3.9vw,75px) clamp(18px,3vw,40px);
  background-image:linear-gradient(180deg,rgba(28,20,14,.30),rgba(28,20,14,0) 28%),url("../assets/hero-top.jpg");
  background-position:center,center 38%}
.hero-bottom{flex:43 1 0;padding-block:clamp(22px,2.5vw,48px) clamp(16px,2vw,28px);   /* top padding = clear gap below the line */
  background-image:linear-gradient(0deg,rgba(20,28,40,.44),rgba(20,28,40,0) 60%),url("../assets/hero-bottom.jpg");
  background-position:center,center 42%}
.hero .site-header{padding-block:0}
.hero-mid{flex:1;display:flex;align-items:center;justify-content:flex-end}
.hero-mid a{font-family:var(--serif);font-weight:400;font-size:clamp(18px,1.875vw,36px)}   /* Explore — Spectral Regular 36 */
.hero-lower{margin-block-start:auto;display:grid;grid-template-columns:1.05fr .95fr;align-items:end;gap:clamp(24px,4vw,72px)}
.hero-lower h1{font-size:clamp(36px,3.125vw,60px);line-height:.95;letter-spacing:var(--track)}  /* SemiBold 60 (round 2) */
.hero-lower h1 em{display:block}                                                          /* SemiBold Italic 60 */
.hero-story{display:inline-block;margin-block-start:clamp(14px,1.25vw,24px);font-family:var(--serif);
  font-weight:400;font-style:italic;font-size:clamp(18px,1.875vw,36px);color:var(--sand)}  /* Spectral Italic 36 */
.hero-lede{margin:0 0 6px auto;max-width:24em;font-size:clamp(15px,1.146vw,22px);line-height:1.4}  /* Expo 22 (round 2) */
.hero .site-footer{color:var(--sand)}
/* the larger hero text crosses brighter parts of the photo — same soft shadow the nav uses */
/* large paragraphs: no single-word last lines */
.hero-lede,.sample-intro,.about-lede,.pd-desc,.value p,.about-close .sub{text-wrap:pretty}
.hero-lede,.hero-lower h1,.hero-story,.hero-mid a{text-shadow:0 1px 12px rgba(14,10,6,.42)}

/* =========================================================
   COLLECTIONS  (feedback slides 3 · 11)
   ========================================================= */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,1.8vw,30px);
  padding-block-end:clamp(30px,4vw,60px)}
.card{--c:#3b4b63;background:var(--c);color:var(--cream);padding:clamp(14px,1.2vw,22px);
  display:flex;flex-direction:column;gap:clamp(12px,1vw,18px);
  transition:transform .3s ease,box-shadow .3s ease}
.card:hover{transform:translateY(-6px);box-shadow:0 22px 40px -26px rgba(0,0,0,.55)}
.card .ph{aspect-ratio:1/1;overflow:hidden}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.card:hover .ph img{transform:scale(1.04)}
.card .meta{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.card .name{font-family:var(--serif);font-weight:600;font-size:clamp(17px,1.458vw,28px);line-height:1.15;margin-block-end:.2em}  /* SemiBold 28 */
.card .ln{font-size:clamp(14px,1.25vw,24px);line-height:1.3}                                                     /* Expo 24 */
.card .desc{font-size:clamp(14px,.9375vw,18px);line-height:1.45}                                                 /* Expo 18 */
.card .go{font-family:var(--serif);font-weight:600;font-size:clamp(20px,1.458vw,28px);line-height:1}
/* per-card grounds */
.c-cobalt{--c:#22346b}.c-azure{--c:#2f57a7}.c-ember{--c:#8f2f2c}.c-verde{--c:#4f7d78}
.c-clay{--c:#c06f4a}.c-coral{--c:#d98c6b}.c-amethyst{--c:#8d8796}.c-umber{--c:#6a4230}

/* =========================================================
   PRODUCT — MATERIAL SPECIFICATION  (feedback slides 6 · 10 · 12)
   Desktop measured from slide 10 (1920 frame): image column ≈ 27.8% with the
   main image (58.5%) over the close-up carousel; info column with the spec
   table, then "← Back" ending at the column's centre and "Sample Request →"
   at its end. Rules sit between rows only.
   ========================================================= */
.product-detail{display:grid;grid-template-columns:27.8% minmax(0,1fr);column-gap:3.4%;
  align-items:start;padding-block:clamp(28px,4.43vw,85px) clamp(36px,4vw,76px)}
.pd-media{display:flex;flex-direction:column;align-items:center;gap:clamp(36px,5.15vw,99px);
  padding-block-start:clamp(6px,.9vw,17px)}
.pd-main{margin:0;width:58.5%;aspect-ratio:1/1;overflow:hidden;cursor:zoom-in;background:rgba(122,78,58,.12)}
.pd-main img{width:100%;height:100%;object-fit:cover}
.pd-info{display:flex;flex-direction:column;min-width:0}
.pd-head,.pd-desc{padding-inline:clamp(8px,1.2vw,23px)}
.pd-info h1{font-size:clamp(36px,3.75vw,72px);line-height:1.04;letter-spacing:var(--track)}        /* SemiBold 72 */
.pd-sub{font-family:var(--serif);font-weight:600;font-style:italic;font-size:clamp(26px,2.5vw,48px);
  line-height:1.1;letter-spacing:var(--track)}                                                       /* SemiBold Italic 48 */
.pd-desc{max-width:calc(25em + 2 * clamp(8px,1.2vw,23px));font-size:clamp(15px,1.146vw,22px);line-height:1.2;
  margin-block-start:clamp(10px,1vw,19px)}                                                           /* Expo 22 */
.pd-specs{display:flex;flex-direction:column;margin:clamp(14px,1.25vw,24px) 0 0}
.pd-row{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding-block:clamp(9px,.78vw,15px);padding-inline:clamp(8px,1.3vw,25px) clamp(8px,1.6vw,31px);
  font-size:clamp(15px,1.146vw,22px);line-height:1.2}                                                 /* Expo 22 (slide 10) */
.pd-row + .pd-row{border-block-start:1px solid var(--line-sand)}
.pd-row dt{font-weight:400}
.pd-row dd{margin:0;text-align:end;max-width:68%}
.pd-pager{display:grid;grid-template-columns:1fr 1fr;align-items:center;column-gap:20px;
  margin-block-start:clamp(12px,1.1vw,21px);padding-inline:clamp(8px,1.2vw,23px) clamp(8px,1.6vw,31px);
  font-family:var(--serif);font-weight:600;font-style:italic;letter-spacing:var(--track);
  font-size:clamp(20px,1.77vw,34px);line-height:1.2}
.pd-pager a{display:inline-flex;align-items:center;gap:.3em;justify-self:end;transition:opacity .2s}
.pd-pager a:hover{opacity:.7}

/* ---------- close-up carousel (designer: "like an Instagram carousel — they can zoom in")
   Active slide in front with a drop shadow; neighbours peek from behind.
   --cw centre width · --sw/--sh side slide width/height · --ar slide aspect (w/h)
   The block's height equals the centre slide's height. ---------- */
.cu{--cw:57%;--sh:82%;--ar:1;--sw:calc(var(--cw) * .82);--side-op:1;
  position:relative;width:100%;aspect-ratio:calc(var(--ar) / .57);
  touch-action:pan-y;user-select:none;-webkit-user-select:none}
.cu-slide{position:absolute;margin:0;overflow:hidden;background:rgba(122,78,58,.12);
  top:calc((100% - var(--sh)) / 2);left:calc((100% - var(--sw)) / 2);width:var(--sw);height:var(--sh);
  opacity:0;z-index:1;pointer-events:none;
  transition:left .5s cubic-bezier(.22,.61,.36,1),top .5s cubic-bezier(.22,.61,.36,1),
             width .5s cubic-bezier(.22,.61,.36,1),height .5s cubic-bezier(.22,.61,.36,1),
             opacity .4s ease,box-shadow .4s ease}
.cu-slide img{width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.cu-slide.is-prev,.cu-slide.is-next{opacity:var(--side-op);z-index:2;pointer-events:auto;cursor:pointer}
.cu-slide.is-prev{left:0}
.cu-slide.is-next{left:calc(100% - var(--sw))}
.cu-slide.is-active{left:calc((100% - var(--cw)) / 2);top:0;width:var(--cw);height:100%;opacity:1;z-index:3;
  pointer-events:auto;cursor:zoom-in;box-shadow:6px 6px 9px -2px rgba(20,12,8,.55)}
[dir="rtl"] .cu-slide.is-prev{left:calc(100% - var(--sw))}
[dir="rtl"] .cu-slide.is-next{left:0}
.cu-btn{position:absolute;z-index:4;top:50%;transform:translateY(-50%);display:grid;place-items:center;
  width:44px;height:44px;padding:0;background:none;border:0;cursor:pointer;color:var(--cream);
  font-family:var(--serif);font-size:clamp(22px,1.6vw,31px);line-height:1;
  text-shadow:0 1px 2px rgba(14,10,6,.55),0 0 12px rgba(14,10,6,.45);transition:opacity .2s}
.cu-btn:hover{opacity:.75}
.cu-prev{left:calc((100% - var(--cw)) / 2 + 3% - 11px)}
.cu-next{right:calc((100% - var(--cw)) / 2 + 3% - 11px)}
[dir="rtl"] .cu-prev{left:auto;right:calc((100% - var(--cw)) / 2 + 3% - 11px)}
[dir="rtl"] .cu-next{right:auto;left:calc((100% - var(--cw)) / 2 + 3% - 11px)}
[dir="rtl"] .cu-btn .arw{transform:scaleX(-1)}
.cu-slide.is-active:focus-visible{outline:2px solid currentColor;outline-offset:3px}
/* without scripting the first close-up shows on its own, where the active slide would be */
.cu-fallback{width:var(--cw);height:100%;margin-inline:auto;object-fit:cover}

/* ---------- close-up viewer (zoom) ---------- */
.zv{position:fixed;inset:0;z-index:80;display:none;background:rgba(20,15,12,.94);color:var(--cream);touch-action:none}
.zv.open{display:block}
.zv-stage{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden}
.zv-img{max-width:min(1100px,90vw);max-height:84vh;width:auto;height:auto;cursor:zoom-in;
  user-select:none;-webkit-user-select:none;-webkit-user-drag:none;transform-origin:50% 50%;
  transition:transform .3s cubic-bezier(.22,.61,.36,1);box-shadow:0 30px 80px -30px #000}
.zv.zoomed .zv-img{cursor:zoom-out}
.zv.dragging .zv-img{transition:none}
.zv-btn{position:absolute;z-index:2;display:grid;place-items:center;width:52px;height:52px;padding:0;
  background:none;border:0;color:var(--cream);font-family:var(--serif);font-size:34px;line-height:1;cursor:pointer;opacity:.85;
  text-shadow:0 1px 2px rgba(14,10,6,.6),0 0 14px rgba(14,10,6,.5)}
.zv-btn:hover{opacity:1}
.zv-close{inset-block-start:10px;inset-inline-end:12px;font-size:38px}
.zv-prev{inset-inline-start:8px;top:50%;transform:translateY(-50%)}
.zv-next{inset-inline-end:8px;top:50%;transform:translateY(-50%)}
[dir="rtl"] .zv-prev .arw,[dir="rtl"] .zv-next .arw{transform:scaleX(-1)}
.zv-btn[hidden]{display:none}

/* =========================================================
   APPLIED PROJECTS (list)  (feedback slide 5)
   ========================================================= */
.proj{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,70px);align-items:center;
  padding-block:clamp(24px,3vw,52px)}
.proj:first-of-type{padding-block-start:clamp(4px,1vw,14px)}   /* tighten gap under the page title */
.proj:nth-child(even){grid-template-columns:.85fr 1.15fr}
.proj:nth-child(even) .proj-media{order:2}
.proj-media{overflow:hidden}
.proj-media img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .6s ease}
.proj:hover .proj-media img{transform:scale(1.03)}
.proj-side{display:flex;flex-direction:column;gap:clamp(18px,2vw,30px)}
.proj-side .view{font-family:var(--serif);font-weight:600;font-size:clamp(26px,2.5vw,48px);line-height:1.1;
  letter-spacing:var(--track)}                                                       /* SemiBold + Italic 48 */
.proj-side .view em{font-style:italic}
.proj-side dl{margin:0;font-size:clamp(15px,1.146vw,22px);line-height:1.6}           /* Expo 22 */
.proj-side dt{display:inline}
.proj-side dd{margin:0;display:inline}

/* =========================================================
   PROJECT GALLERY  (feedback slide 4)
   ========================================================= */
.gal-head{text-align:center;padding-block:clamp(26px,4vw,64px) clamp(16px,2.4vw,36px)}
.gal-head h1{font-size:clamp(44px,4.6875vw,90px);line-height:1.03;letter-spacing:var(--track)}   /* SemiBold + Italic 90 */
.gal-sub{font-family:var(--sans);font-size:clamp(11px,.9vw,13px);letter-spacing:.14em;
  text-transform:uppercase;margin-block-start:14px}
.gal-grid{columns:2;column-gap:clamp(14px,1.6vw,26px);padding-block-end:clamp(20px,2vw,36px)}
.gal-grid figure{margin:0 0 clamp(14px,1.6vw,26px);break-inside:avoid;cursor:zoom-in;overflow:hidden}
.gal-grid img{width:100%;transition:transform .5s ease}
.gal-grid figure:hover img{transform:scale(1.035)}
/* lightbox */
.lightbox{position:fixed;inset:0;z-index:60;display:none;place-items:center;
  background:rgba(20,15,12,.92);padding:clamp(20px,4vw,60px)}
.lightbox.open{display:grid}
.lightbox img{max-width:min(1100px,92vw);max-height:86vh;width:auto;box-shadow:0 30px 80px -30px #000}
.lb-btn{position:absolute;background:none;border:0;color:var(--cream);font-family:var(--serif);
  font-size:40px;cursor:pointer;padding:14px;line-height:1;opacity:.85}
.lb-btn:hover{opacity:1}
.lb-close{inset-block-start:8px;inset-inline-end:16px;font-size:34px}
.lb-prev{inset-inline-start:6px;inset-block-start:50%;transform:translateY(-50%)}
.lb-next{inset-inline-end:6px;inset-block-start:50%;transform:translateY(-50%)}

/* =========================================================
   SAMPLE REQUEST  (feedback slide 7 — images use the same close-up carousel)
   ========================================================= */
.sample-intro{max-width:30em;margin-inline:auto;text-align:center;font-size:clamp(16px,1.146vw,22px);
  line-height:1.45;padding-block-end:clamp(30px,4vw,58px)}                       /* Expo 22 (round 2) */
.sample-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,40px)}
.sample-grid figure{margin:0;display:flex;flex-direction:column;gap:clamp(14px,1.2vw,22px)}
.sample-grid .cu{--ar:1.6;--cw:70%;--sh:80%;--sw:calc(var(--cw) * .8);aspect-ratio:calc(var(--ar) / .7)}
.sample-grid figcaption{text-align:center;font-family:var(--serif);font-weight:600;font-size:clamp(18px,1.875vw,36px)}  /* SemiBold 36 */
.sample-cta{text-align:center;padding-block:clamp(34px,4vw,64px) 0}
.sample-cta .req{font-family:var(--serif);font-weight:600;font-style:italic;font-size:clamp(24px,2.5vw,48px)}  /* SemiBold Italic 48 */
.sample-cta .rule{max-width:520px;margin:clamp(18px,2vw,30px) auto;border-block-end:1px solid var(--line-sand)}
.sample-cta .eta{font-family:var(--serif);font-weight:600;font-size:clamp(24px,2.5vw,48px)}                   /* SemiBold 48 */

/* =========================================================
   ABOUT / OUR STORY  (feedback slide 8)
   ========================================================= */
.about-hero{text-align:center;padding-block:clamp(40px,6vw,90px) clamp(24px,3vw,44px)}
.about-hero h1{font-size:clamp(44px,4.6875vw,90px);letter-spacing:var(--track)}     /* SemiBold + Italic 90 */
.about-lede{max-width:30em;margin:clamp(22px,2.4vw,40px) auto 0;text-align:center;
  font-size:clamp(17px,1.667vw,32px);line-height:1.45}                               /* Expo 32 (round 2) */
.values{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,70px) clamp(40px,6vw,120px);
  padding-block:clamp(30px,4vw,64px);border-block-start:1px solid var(--slate-line)}
.value h3{font-size:clamp(26px,2.5vw,48px);line-height:1.1}                           /* SemiBold + Italic 48 */
.value p{margin-block-start:clamp(14px,1.4vw,22px);max-width:24em;line-height:1.55;font-size:clamp(15px,1.4584vw,28px)}  /* Expo 28 (round 2) */
.value:nth-child(even){text-align:end}
.value:nth-child(even) p{margin-inline-start:auto}
.about-close{text-align:center;padding-block:clamp(40px,6vw,96px)}
.about-close .big{font-family:var(--serif);font-weight:600;font-style:italic;font-size:clamp(40px,4.6875vw,90px);
  letter-spacing:var(--track);line-height:1.1}                                        /* SemiBold Italic 90 */
.about-close .sub{margin-block-start:clamp(14px,1.4vw,22px);font-size:clamp(16px,1.875vw,36px)}   /* Expo 36 */

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1000px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .sample-grid{grid-template-columns:1fr;max-width:620px;margin-inline:auto}
  /* product stacks: images first (same order as desktop), then the information */
  .product-detail{grid-template-columns:1fr;row-gap:clamp(28px,5vw,48px)}
  .pd-media{max-width:620px;width:100%;margin-inline:auto}
}
@media (max-width:760px){
  .hero-mid{justify-content:flex-start}
  .hero-lower{grid-template-columns:1fr;gap:18px}
  .hero-lede{margin-inline:0}
  .site-footer{grid-template-columns:1fr;gap:18px}
  .f-center{text-align:start}.f-right{align-items:start;text-align:start}
  .cards{grid-template-columns:1fr}
  .proj,.proj:nth-child(even){grid-template-columns:1fr}
  .proj:nth-child(even) .proj-media{order:0}
  .gal-grid{columns:1}
  .values{grid-template-columns:1fr}
  .value:nth-child(even){text-align:start}
  .value:nth-child(even) p{margin-inline-start:0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* =========================================================
   LANGUAGE TOGGLE + ARABIC / RTL
   ========================================================= */
.head-right{display:flex;align-items:center;gap:clamp(12px,1.46vw,28px)}
.lang-toggle{background:none;border:0;color:inherit;cursor:pointer;font-family:var(--serif);
  font-size:clamp(15px,1.146vw,22px);line-height:1;white-space:nowrap;padding:4px 0;transition:opacity .25s ease}
.lang-toggle:lang(ar){font-family:'Amiri',var(--serif)}
.lang-toggle:hover{opacity:.7}
.hero .lang-toggle{color:var(--sand)}
.hero .nav a,.hero .lang-toggle{text-shadow:0 1px 10px rgba(14,10,6,.4)}   /* legible over the photo */

:root[dir="rtl"]{
  /* Arabic glyphs use Amiri; any Latin glyphs (brand names, specs, numbers)
     fall through to the brand's own Latin fonts — never a system font. */
  --serif:'Amiri', 'Spectral', Georgia, 'Times New Roman', serif;
  --sans:'Amiri', 'expo-sans-pro', 'Hanken Grotesk', system-ui, 'Segoe UI', sans-serif;
}
[dir="rtl"] .pager,[dir="rtl"] .hero-mid a,[dir="rtl"] .hero-story{font-family:var(--serif)}  /* Amiri for Arabic display bits */
[dir="rtl"] .nav{font-size:clamp(15px,1.146vw,22px)}
/* Arabic is never tracked (it breaks the joins) and has no italics */
[dir="rtl"] body,[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] .section-title,[dir="rtl"] .pd-sub,
[dir="rtl"] .pd-pager,[dir="rtl"] .pager,[dir="rtl"] .proj-side .view,[dir="rtl"] .about-close .big,
[dir="rtl"] .hero-lower h1{letter-spacing:0}
[dir="rtl"] em,[dir="rtl"] .f-left,[dir="rtl"] .pd-sub,[dir="rtl"] .pd-pager,[dir="rtl"] .pager,[dir="rtl"] .hero-story,
[dir="rtl"] .sample-cta .req,[dir="rtl"] .about-close .big{font-style:normal}
[dir="rtl"] .hero-lower h1 em{display:inline}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3{line-height:1.28}
[dir="rtl"] .hero-lower h1{line-height:1.14}
[dir="rtl"] .section-title{line-height:1.2}
[dir="rtl"] .about-close .big{line-height:1.2}
[dir="rtl"] .arw,[dir="rtl"] .card .go{display:inline-block;transform:scaleX(-1)}
[dir="rtl"] a:hover>.arw,[dir="rtl"] .hoverarw:hover .arw{transform:scaleX(-1) translateX(6px)}
[dir="rtl"] .hoverarw.back:hover .arw{transform:scaleX(-1) translateX(-6px)}
[dir="rtl"] .pd-row dd,[dir="rtl"] .site-footer .tag{text-align:inherit}
/* keep still-English provisional values ordered correctly inside RTL */
/* isolate English runs so they read left-to-right without disturbing the Arabic around them */
[dir="rtl"] .pd-row dd,[dir="rtl"] .card .info,[dir="rtl"] .card .desc,[dir="rtl"] .proj-side dd{unicode-bidi:plaintext}
/* product name + description, and collection-card text: right-anchored to match the
   Arabic column; plaintext keeps the English reading LTR with its punctuation in place */
[dir="rtl"] .pd-info h1,[dir="rtl"] .pd-desc{unicode-bidi:plaintext;text-align:right}
[dir="rtl"] .card .info,[dir="rtl"] .card .desc{text-align:right}

/* =========================================================
   MASTHEAD — responsive stacking
   Below 900px: logo + language on top, the nav on its own row (no rule —
   the new design drops the masthead line).
   ========================================================= */
@media (max-width:900px){
  .site-header{flex-wrap:wrap;align-items:center;gap:clamp(12px,2.6vw,16px);
    padding-block:clamp(18px,4.2vw,26px) 0}
  .head-right{display:contents}
  .logo{order:1}
  .logo-svg{height:clamp(28px,6.6vw,38px)}
  .lang-toggle{order:2;margin-inline-start:auto;font-size:17px}
  .nav{order:3;flex-basis:100%;width:100%;flex-wrap:wrap;justify-content:flex-start;
    gap:clamp(4px,1.6vw,8px) clamp(16px,4.4vw,26px);font-size:clamp(16px,4.2vw,18px);
    margin-block-start:clamp(4px,1.6vw,8px)}
  [dir="rtl"] .nav{font-size:clamp(17px,4.4vw,19px)}
  .nav a{padding-block:6px}
  /* legible over the hero photo */
  .hero .nav a,.hero .lang-toggle{text-shadow:0 1px 12px rgba(14,10,6,.55)}
  .hero .logo-svg{filter:drop-shadow(0 1px 12px rgba(14,10,6,.5))}
}

/* =========================================================
   PHONES (≤760px) — layouts from the mobile slides (11 · 12),
   sizes kept readable and in the same hierarchy as desktop
   ========================================================= */
@media (max-width:760px){
  /* page titles: the italic word takes its own line, as in the mobile collections slide */
  .section-title,.section-title.t-99,.gal-head h1,.about-hero h1{font-size:clamp(34px,9.4vw,40px)}
  .section-title em,.gal-head h1 em,.about-hero h1 em{display:block}
  [dir="rtl"] .section-title em,[dir="rtl"] .gal-head h1 em,[dir="rtl"] .about-hero h1 em{display:inline}

  /* home hero (round 2): the heading sits below the split here too. The red
     photo keeps about half the screen; the lower zone takes what its content
     needs, so the footer follows a short scroll below the first screen. */
  .hero-top{flex:0 0 auto;min-height:52svh;gap:clamp(14px,4vw,24px);
    padding-block:clamp(18px,4.2vw,26px) clamp(18px,5vw,28px);
    background-image:linear-gradient(180deg,rgba(28,20,14,.46),rgba(28,20,14,0) 40%),url("../assets/hero-top.jpg")}
  .hero-mid{align-items:flex-end;justify-content:center}
  .hero-mid a{font-size:20px}
  .hero-bottom{flex:1 0 auto;padding-block:28px clamp(22px,6vw,36px);
    background-image:linear-gradient(0deg,rgba(16,22,34,.84),rgba(16,22,34,.42) 62%,rgba(16,22,34,.3)),url("../assets/hero-bottom.jpg");
    background-position:center,24% 42%}   /* the darker floor sits behind the heading */
  .hero-lower{display:flex;flex-direction:column;align-items:stretch;gap:12px}
  .hero-lower h1{font-size:34px;line-height:1}
  .hero-story{margin-block-start:10px;font-size:20px}
  .hero-lede{max-width:none;margin:6px 0 0;font-size:16px;line-height:1.5}
  .hero .site-footer{margin-block-start:28px}

  /* footer */
  .site-footer{font-size:16px}
  .f-left{font-size:17px}
  .f-center{font-size:14px;white-space:normal}

  /* collections card (slide 11): image inset in a wider colour margin,
     then one row — name + material · description · arrow */
  .card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.17fr) auto;
    grid-template-areas:"ph ph ph" "info desc go";column-gap:12px;row-gap:clamp(16px,5vw,22px);
    padding:clamp(22px,7vw,30px) clamp(16px,5.4vw,24px) clamp(24px,8vw,34px)}
  .card .meta{display:contents}
  .card .ph{grid-area:ph;width:70%;justify-self:center}
  .card .info{grid-area:info}
  .card .desc{grid-area:desc}
  .card .go{grid-area:go;align-self:center;font-size:26px}
  .card .name{font-size:19px}
  .card .ln{font-size:13.5px;line-height:1.3}
  .card .desc{font-size:13.5px;line-height:1.4}
  .card:hover{transform:none;box-shadow:none}

  /* product (slide 12): centred main image, then the carousel (faded neighbours,
     arrows paired at the centre), then the information */
  .pd-main{width:64.5%}                 /* 461 of the 716px content width in slide 12 */
  .pd-media{gap:clamp(26px,8vw,34px);padding-block-start:0}
  .pd-media .cu{width:93%;--side-op:.5;--sh:77%;--sw:calc(var(--cw) * .77)}   /* 667 of 716 */
  /* arrows sit as a pair at the centre of the active slide (slide 12) */
  .cu-prev,[dir="rtl"] .cu-next{left:calc(43% - 22px);right:auto}
  .cu-next,[dir="rtl"] .cu-prev{left:calc(57% - 22px);right:auto}
  .cu-btn{font-size:22px}
  .pd-info h1{font-size:clamp(32px,8.8vw,36px)}
  .pd-sub{font-size:clamp(23px,6.2vw,25px)}
  .pd-desc{font-size:16px;line-height:1.4;margin-block-start:12px}
  .pd-specs{margin-block-start:18px}
  .pd-row{font-size:15px;line-height:1.35;padding-block:12px;padding-inline:10px;gap:14px}
  .pd-pager{display:flex;justify-content:space-between;font-size:21px;margin-block-start:18px;padding-inline:10px}

  /* sample boxes share the carousel (faded neighbours on phones) */
  .sample-grid .cu{--side-op:.5}
  .sample-intro{font-size:16px}
  .sample-grid figcaption{font-size:22px}
  .sample-cta .req,.sample-cta .eta{font-size:24px}

  /* projects */
  .proj-side .view{font-size:28px}
  .proj-side dl{font-size:15px}

  /* about */
  .about-lede{font-size:17px}
  .value h3{font-size:28px}
  .value p{font-size:15.5px}
  .about-close .big{font-size:clamp(36px,10vw,40px)}
  .about-close .sub{font-size:17px}

  .pager{font-size:21px}
}

/* =========================================================
   ACCESSIBILITY — visible keyboard focus + skip link
   ========================================================= */
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid currentColor;outline-offset:3px;border-radius:1px}
.field input:focus-visible{outline-offset:2px}
.skip-link{position:fixed;inset-block-start:10px;inset-inline-start:10px;z-index:200;
  background:var(--ink);color:var(--cream);font-family:var(--sans);font-size:14px;
  letter-spacing:0;text-transform:none;padding:10px 16px;border-radius:3px;
  transform:translateY(-160%);transition:transform .2s ease}
.skip-link:focus{transform:translateY(0)}

/* =========================================================
   SUBTLE ENTRANCE MOTION
   Three quiet layers, all reduced-motion-safe. The .reveal / .in
   classes are added by js/i18n.js, so content is never hidden when
   scripting is off; the reduce block below also stops everything.
     1) page entrance — content eases in once on every page load
     2) scroll reveal — blocks arriving below the fold ease up;
        above-the-fold blocks get .now and simply ride the page
        entrance (no second move)
     3) image settle — a whisper of a zoom as media first paints
        (ends at scale 1, so the hover zoom still works afterwards)
   ========================================================= */
@media (prefers-reduced-motion:no-preference){
  /* 1 — page entrance (inner pages use <main>; on the home the content of each
     photo zone eases in while the photos themselves stay still) */
  main,.hero-zone>*{animation:tiley-enter .6s cubic-bezier(.22,.61,.36,1) both}
  @keyframes tiley-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

  /* 2 — scroll reveal */
  .reveal{opacity:0;transform:translateY(16px);will-change:opacity,transform;
    transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
  .reveal.in{opacity:1;transform:none}
  .reveal.now{transition:none}

  /* 3 — image settle */
  .card .ph img,.pd-main img,.proj-media img,.gal-grid img{
    animation:tiley-settle 1.2s cubic-bezier(.22,.61,.36,1)}
  @keyframes tiley-settle{from{transform:scale(1.045)}to{transform:scale(1)}}
}