/* ==========================================================================
   IK Tents · iktents.com
   Elegant charcoal / limestone / brass system.
   Logical properties throughout, so one file serves RTL (ar) and LTR (en).
   ========================================================================== */

/* 1. Tokens ------------------------------------------------------------- */
:root{
  --ink:#17130E;        /* warm near-black, bedouin tent fabric */
  --ink-2:#221A11;      /* espresso, dark panel background */
  --ink-3:#2C2318;      /* raised dark surface */
  --sand:#F5F0E7;       /* limestone paper */
  --sand-2:#EDE6D9;     /* deeper stone */
  --sand-3:#E5DCCC;     /* card wash */
  --cream:#FBF8F2;      /* near-white on dark */
  --line:#E0D6C4;       /* hairline on light */
  --line-2:#EBE3D5;
  --line-d:#3A3024;     /* hairline on dark */
  --brass:#0E8C7A;      /* rich teal, primary accent on light */
  --brass-2:#1FC7AC;    /* bright teal on dark */
  --brass-soft:#46E0C6; /* luminous teal, hero accents on dark */
  --teal-dark:#0B7264;  /* CTA hover */
  --body:#3A342B;       /* body text on light */
  --stone:#6C6152;      /* muted warm text (light) */
  --stone-2:#A79C8A;    /* muted on dark */
  --wa:#25915a;         /* whatsapp-tinted, brand-neutralised */

  --font:'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display:'Space Grotesk', 'Tajawal', system-ui, sans-serif;

  --r-xs:8px; --r-sm:12px; --r:16px; --r-lg:22px; --pill:999px;
  --maxw:1280px;
  --gutter:clamp(20px, 4vw, 44px);
  --header-h:70px;
  --topbar-h:38px;
  --ease:cubic-bezier(.22,.61,.36,1);

  --sh-sm:0 1px 2px rgba(23,19,14,.06), 0 6px 18px rgba(23,19,14,.05);
  --sh-md:0 10px 30px rgba(23,19,14,.10);
  --sh-lg:0 26px 60px rgba(12,9,5,.34);
}
html[lang="en"]{ --font:'Space Grotesk','Tajawal',system-ui,sans-serif; }

/* 2. Base -------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  scroll-snap-type:y proximity;
  scroll-padding-block-start:var(--header-h);
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;
  background:var(--sand);
  color:var(--body);
  font-family:var(--font);
  font-size:15px;
  line-height:1.72;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }

h1,h2,h3,h4{ margin:0; color:var(--ink); font-weight:700; line-height:1.18; }
html[lang="en"] h1, html[lang="en"] h2{ letter-spacing:-.02em; font-weight:600; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; transition:color .18s var(--ease); }
img{ max-width:100%; display:block; height:auto; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; color:inherit; }

.num{ font-family:var(--font-display); font-feature-settings:"tnum"; }

:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; border-radius:5px; }

.skip-link{
  position:fixed; inset-block-start:-60px; inset-inline-start:16px; z-index:200;
  background:var(--ink); color:var(--cream); padding:10px 16px; border-radius:var(--r-xs);
  font-size:13px; transition:inset-block-start .2s var(--ease);
}
.skip-link:focus{ inset-block-start:12px; }

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

/* 3. Panels (full-height snap sections) -------------------------------- */
.panel{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding-block:calc(var(--header-h) + clamp(26px,4.5vh,56px)) clamp(30px,5vh,60px);
  scroll-snap-align:start;
}
.panel--dark{ background:var(--ink-2); color:var(--sand-2); }
.panel--dark h2, .panel--dark h3{ color:var(--cream); }
.panel--stone{ background:var(--sand-2); }

/* section head */
.head{ max-width:640px; margin-block-end:clamp(26px,3.6vh,46px); }
.head--center{ margin-inline:auto; text-align:center; }
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-size:12px; font-weight:500;
  letter-spacing:.02em; color:var(--brass); margin-block-end:16px;
}
.eyebrow::before{ content:""; width:26px; height:1.5px; background:currentColor; opacity:.7; border-radius:2px; }
.head--center .eyebrow{ justify-content:center; }
.panel--dark .eyebrow{ color:var(--brass-2); }
h2{ font-size:clamp(26px, 3.4vw, 42px); letter-spacing:-.01em; }
.head p{ margin-block-start:14px; font-size:clamp(14px,1.15vw,15.5px); color:var(--stone); max-width:52ch; }
.panel--dark .head p{ color:var(--stone-2); }

/* 4. Buttons ----------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:46px; padding:0 22px; border:0; cursor:pointer;
  font-family:var(--font); font-size:14px; font-weight:700; letter-spacing:.005em;
  border-radius:var(--pill); transition:transform .18s var(--ease), background .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
  white-space:nowrap;
}
html[lang="en"] .btn{ font-weight:600; }
.btn:active{ transform:translateY(1px); }
.btn--brass{ background:var(--brass); color:#fff; font-weight:700; }
.btn--brass:hover{ background:var(--teal-dark); box-shadow:0 10px 26px rgba(14,140,122,.42); }
.btn--ink{ background:var(--ink); color:var(--cream); }
.btn--ink:hover{ background:#000; }
.btn--cream{ background:var(--cream); color:var(--ink); }
.btn--cream:hover{ background:#fff; box-shadow:var(--sh-md); }
.btn--wa{ background:var(--wa); color:#fff; }
.btn--wa:hover{ background:#1f7d4d; }
.btn--outline{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--line); }
.btn--outline:hover{ box-shadow:inset 0 0 0 1.5px var(--brass); color:var(--brass); }
.header:not(.is-solid) .btn--outline{ color:var(--cream); box-shadow:inset 0 0 0 1.5px rgba(251,248,242,.5); }
.header:not(.is-solid) .btn--outline:hover{ color:#fff; background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1.5px rgba(251,248,242,.9); }
.btn--ghost{ background:rgba(255,255,255,.08); color:var(--cream); box-shadow:inset 0 0 0 1.5px rgba(251,248,242,.28); backdrop-filter:blur(4px); }
.btn--ghost:hover{ background:rgba(255,255,255,.16); box-shadow:inset 0 0 0 1.5px rgba(251,248,242,.55); }
.btn--lg{ min-height:52px; padding:0 28px; font-size:14.5px; }
.btn--block{ display:flex; width:100%; }
.btn svg{ flex:none; }

.link{
  display:inline-flex; align-items:center; gap:7px;
  font-size:13px; font-weight:700; color:var(--brass);
}
html[lang="en"] .link{ font-weight:600; }
.link .chev{ transition:transform .2s var(--ease); }
.link:hover .chev{ transform:translateX(-3px); }
html[lang="en"] .link:hover .chev{ transform:translateX(3px); }

/* 5. Topbar ------------------------------------------------------------ */
.topbar{ background:var(--ink); color:#CFC7B8; font-size:12.5px; position:fixed; inset-block-start:0; inset-inline:0; z-index:70; transition:transform .35s var(--ease); will-change:transform; }
.topbar__in{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:var(--topbar-h); }
body.scrolled .topbar{ transform:translateY(-100%); }
.topbar__grp{ display:flex; align-items:center; gap:20px; }
.topbar a, .topbar span.ti{ display:inline-flex; align-items:center; gap:7px; color:#CFC7B8; }
.topbar a:hover{ color:var(--brass-2); }
.topbar svg{ color:var(--brass-2); opacity:.9; }
.topbar .muted{ color:#8B8474; }
.sep{ width:1px; height:14px; background:#3A3024; }
.lang{ display:inline-flex; gap:4px; align-items:center; font-family:var(--font-display); font-size:12px; }
.lang a, .lang span{ padding:2px 7px; border-radius:6px; color:#9A9182; }
.lang .on{ background:#2C2318; color:var(--brass-2); }
.lang a:hover{ color:var(--cream); }
.topbar__hide{}

/* 6. Header ------------------------------------------------------------ */
.header{
  position:fixed; inset-block-start:var(--topbar-h); inset-inline:0; z-index:80;
  transition:background .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease), inset-block-start .35s var(--ease);
  border-block-end:1px solid transparent;
}
.header__in{ display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:var(--header-h); }
.header.is-solid{ inset-block-start:0; background:rgba(245,240,231,.86); backdrop-filter:saturate(1.4) blur(14px); border-block-end-color:var(--line); box-shadow:0 2px 20px rgba(23,19,14,.05); }

/* logo */
.logo{ display:inline-flex; align-items:center; gap:11px; }
.logo__mark{ flex:none; border-radius:50%; object-fit:cover; }
.logo__txt{ display:flex; flex-direction:column; line-height:1; }
.logo__name{ font-family:var(--font-display); font-weight:700; font-size:20px; letter-spacing:.14em; color:var(--ink); }
.logo__tag{ font-size:10.5px; color:var(--stone); margin-block-start:5px; letter-spacing:.01em; }
html[lang="en"] .logo__tag{ letter-spacing:.05em; }
.header:not(.is-solid) .logo__name{ color:var(--cream); }
.header:not(.is-solid) .logo__tag{ color:rgba(251,248,242,.62); }

/* nav */
.nav{ display:flex; align-items:center; gap:6px; }
.nav a{
  position:relative; padding:9px 13px; border-radius:var(--pill);
  font-size:14px; font-weight:500; color:var(--body);
}
.header:not(.is-solid) .nav a{ color:rgba(251,248,242,.86); }
.nav a:hover{ color:var(--brass); }
.header:not(.is-solid) .nav a:hover{ color:var(--brass-2); }
.nav a.on{ color:var(--brass); }
.header:not(.is-solid) .nav a.on{ color:var(--brass-2); }

.header__act{ display:flex; align-items:center; gap:10px; }
.icon-btn{
  display:none; width:44px; height:44px; align-items:center; justify-content:center;
  border-radius:var(--pill); background:transparent; box-shadow:inset 0 0 0 1.5px var(--line);
}
.header:not(.is-solid) .icon-btn{ box-shadow:inset 0 0 0 1.5px rgba(251,248,242,.32); color:var(--cream); }
.burger{
  display:none; width:46px; height:46px; align-items:center; justify-content:center;
  border:0; background:var(--ink); border-radius:var(--pill); cursor:pointer;
}
.header:not(.is-solid) .burger{ background:rgba(251,248,242,.12); box-shadow:inset 0 0 0 1.5px rgba(251,248,242,.3); }
.burger svg{ color:var(--cream); }

/* 7. Drawer ------------------------------------------------------------ */
.drawer{ position:fixed; inset:0; z-index:120; visibility:hidden; }
.drawer.open{ visibility:visible; }
.drawer__scrim{ position:absolute; inset:0; background:rgba(20,15,9,.5); opacity:0; transition:opacity .3s var(--ease); backdrop-filter:blur(2px); }
.drawer.open .drawer__scrim{ opacity:1; }
.drawer__panel{
  position:absolute; inset-block:0; inset-inline-end:0; width:min(88vw,360px);
  background:var(--sand); box-shadow:var(--sh-lg);
  display:flex; flex-direction:column; padding:22px;
  transform:translateX(100%); transition:transform .34s var(--ease);
  overflow-y:auto;
}
html[dir="rtl"] .drawer__panel{ transform:translateX(-100%); }
.drawer.open .drawer__panel{ transform:translateX(0); }
.drawer__top{ display:flex; align-items:center; justify-content:space-between; margin-block-end:8px; }
.drawer__close{ width:42px; height:42px; display:flex; align-items:center; justify-content:center; border:0; background:var(--sand-2); border-radius:var(--pill); cursor:pointer; }
.drawer__nav{ display:flex; flex-direction:column; margin-block:18px; }
.drawer__nav a{ padding:14px 6px; font-size:17px; font-weight:500; color:var(--ink); border-block-end:1px solid var(--line-2); }
.drawer__nav a:hover{ color:var(--brass); }
.drawer__cta{ display:flex; flex-direction:column; gap:10px; margin-block:8px 18px; }
.drawer__meta{ display:flex; flex-direction:column; gap:12px; font-size:13.5px; margin-block-start:auto; padding-block-start:18px; border-block-start:1px solid var(--line); }
.drawer__meta a{ display:inline-flex; align-items:center; gap:9px; color:var(--body); }
.drawer__meta svg{ color:var(--brass); }

/* 8. Hero -------------------------------------------------------------- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; scroll-snap-align:start; overflow:hidden; }
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__slide{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 40%; opacity:0; transition:opacity 1s var(--ease); }
.hero__slide.is-active{ opacity:1; }
/* slide dots: sit outside .hero__bg so they stack above the hero content and stay clickable */
.hero__dots{ position:absolute; z-index:5; display:flex; flex-direction:column; gap:12px; inset-inline-end:var(--gutter); top:50%; transform:translateY(-50%); }
.hero__dot{ position:relative; flex:none; width:9px; height:9px; padding:0; border:0; border-radius:50%; cursor:pointer; background:rgba(251,248,242,.55); box-shadow:0 1px 4px rgba(0,0,0,.45); transition:width .25s var(--ease), height .25s var(--ease), background .25s var(--ease); }
.hero__dot::after{ content:""; position:absolute; inset:-9px; } /* larger tap target */
.hero__dot:hover{ background:rgba(251,248,242,.9); }
.hero__dot.is-active{ background:var(--brass-soft); height:26px; border-radius:6px; }
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(13,9,5,.95) 0%, rgba(13,9,5,.76) 40%, rgba(13,9,5,.52) 70%, rgba(13,9,5,.52) 100%),
    linear-gradient(to left, rgba(13,9,5,.74) 0%, rgba(13,9,5,.22) 52%, rgba(13,9,5,0) 80%);
}
html[dir="ltr"] .hero__bg::after{ background:
    linear-gradient(to top, rgba(13,9,5,.95) 0%, rgba(13,9,5,.76) 40%, rgba(13,9,5,.52) 70%, rgba(13,9,5,.52) 100%),
    linear-gradient(to right, rgba(13,9,5,.74) 0%, rgba(13,9,5,.22) 52%, rgba(13,9,5,0) 80%); }
.hero__in{ position:relative; z-index:1; width:100%; padding-block:calc(var(--topbar-h) + var(--header-h) + 22px) clamp(60px,9vh,100px); }
.hero__c{ max-width:600px; }
.hero__kick{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-display); font-size:11.5px; font-weight:500; letter-spacing:.04em;
  color:var(--brass-soft); margin-block-end:15px;
}
.hero__kick::before{ content:""; width:24px; height:1.5px; background:currentColor; border-radius:2px; opacity:.85; }
.hero h1{ color:var(--cream); font-size:clamp(28px, 3.7vw, 46px); line-height:1.14; letter-spacing:-.01em; text-shadow:0 2px 30px rgba(0,0,0,.45); }
html[lang="en"] .hero h1{ letter-spacing:-.025em; }
.hero__sub{ margin-block-start:15px; max-width:50ch; color:rgba(251,248,242,.94); font-size:clamp(13.5px,1.1vw,15px); line-height:1.65; text-shadow:0 1px 16px rgba(0,0,0,.4); }
.hero__act{ display:flex; flex-wrap:wrap; gap:11px; margin-block-start:24px; }
.hero__trust{ display:flex; flex-wrap:wrap; gap:11px 22px; margin-block-start:24px; padding-block-start:18px; border-block-start:1px solid rgba(251,248,242,.22); }
.hero__trust li{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:rgba(251,248,242,.94); }
.hero__trust svg{ color:var(--brass-soft); flex:none; }
.scroll-hint{
  position:absolute; inset-block-end:26px; left:50%; transform:translateX(-50%); z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color:rgba(251,248,242,.6); font-family:var(--font-display); font-size:11px; letter-spacing:.06em;
}
.scroll-hint span{ writing-mode:initial; }
.scroll-hint .dot{ width:22px; height:34px; border:1.5px solid rgba(251,248,242,.4); border-radius:14px; position:relative; display:flex; justify-content:center; }
.scroll-hint .dot::after{ content:""; margin-block-start:6px; width:3px; height:7px; border-radius:2px; background:var(--brass-soft); animation:wheel 1.7s var(--ease) infinite; }
@keyframes wheel{ 0%{opacity:0; transform:translateY(0)} 30%{opacity:1} 70%{opacity:1; transform:translateY(10px)} 100%{opacity:0; transform:translateY(12px)} }

/* 9. Services ---------------------------------------------------------- */
.services__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.4vw,20px); }
.svc{
  position:relative; display:flex; flex-direction:column;
  background:var(--cream); border-radius:var(--r); overflow:hidden;
  box-shadow:var(--sh-sm); border:1px solid var(--line-2);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.svc:hover{ transform:translateY(-4px); box-shadow:var(--sh-md); }
.svc__media{ position:relative; aspect-ratio:4/3.35; overflow:hidden; }
.svc__media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.svc:hover .svc__media img{ transform:scale(1.05); }
.svc__no{ position:absolute; inset-block-start:12px; inset-inline-start:12px; font-family:var(--font-display); font-size:11px; letter-spacing:.08em; color:var(--cream); background:rgba(18,13,8,.4); backdrop-filter:blur(3px); padding:4px 9px; border-radius:var(--pill); }
.svc__body{ padding:16px 17px 18px; display:flex; flex-direction:column; flex:1; }
.svc__body h3{ font-size:17px; letter-spacing:-.005em; }
.svc__body p{ margin-block-start:7px; font-size:13px; line-height:1.62; color:var(--stone); flex:1; }
.svc__body .link{ margin-block-start:14px; }

/* 10. Gallery ---------------------------------------------------------- */
.filters{ display:flex; flex-wrap:wrap; gap:8px; margin-block-end:22px; }
.filter{
  border:0; cursor:pointer; padding:8px 16px; border-radius:var(--pill);
  font-family:var(--font); font-size:13px; font-weight:500; color:var(--stone-2);
  background:transparent; box-shadow:inset 0 0 0 1px var(--line-d);
  transition:all .18s var(--ease);
}
.filter:hover{ color:var(--cream); box-shadow:inset 0 0 0 1px var(--brass-2); }
.filter.on{ background:var(--brass-2); color:var(--ink); box-shadow:none; font-weight:700; }
html[lang="en"] .filter.on{ font-weight:600; }
.gallery{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:1fr; gap:clamp(10px,1vw,16px); }
.shot{ position:relative; margin:0; border-radius:var(--r-sm); overflow:hidden; aspect-ratio:1/1; background:var(--ink-3); }
.shot img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease), opacity .3s; }
.shot:hover img{ transform:scale(1.06); }
.shot::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(18,13,8,.7), transparent 55%); opacity:0; transition:opacity .3s var(--ease); }
.shot:hover::after{ opacity:1; }
.shot figcaption{ position:absolute; inset-block-end:12px; inset-inline:14px; z-index:1; color:var(--cream); font-size:12.5px; font-weight:500; opacity:0; transform:translateY(6px); transition:all .3s var(--ease); }
.shot:hover figcaption{ opacity:1; transform:translateY(0); }
.shot.wide{ grid-column:span 2; aspect-ratio:auto; }
.shot.hide{ display:none; }

/* Work videos ----------------------------------------------------------- */
.vidhead{ margin-block:clamp(36px,5vw,52px) 18px; }
.vidhead h3{ font-family:var(--font-display); font-weight:600; font-size:clamp(19px,2vw,24px); color:var(--cream); margin-block-end:6px; }
.vidhead p{ color:rgba(251,248,242,.62); font-size:14px; max-width:56ch; }
.videogrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(10px,1vw,16px); }
.vid{ margin:0; border-radius:var(--r-sm); overflow:hidden; background:var(--ink-3); box-shadow:var(--sh-sm); }
.vid video{ display:block; width:100%; aspect-ratio:16/10; object-fit:cover; background:#000; }
.vid figcaption{ padding:10px 14px 13px; font-size:12.5px; font-weight:500; color:rgba(251,248,242,.8); }
@media (max-width:920px){
  .videogrid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .videogrid{ grid-template-columns:1fr; }
}

/* 11. Craft + Process split ------------------------------------------- */
.split{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,4vw,72px); align-items:center; }
.pillars{ display:flex; flex-direction:column; gap:18px; margin-block:26px 30px; }
.pillar{ display:flex; gap:14px; align-items:flex-start; }
.pillar__ic{ flex:none; width:42px; height:42px; display:flex; align-items:center; justify-content:center; border-radius:12px; background:var(--sand-2); color:var(--brass); }
.panel--dark .pillar__ic{ background:var(--ink-3); color:var(--brass-2); }
.pillar h3{ font-size:15.5px; }
.pillar p{ margin-block-start:4px; font-size:13px; color:var(--stone); line-height:1.6; }
.panel--dark .pillar p{ color:var(--stone-2); }
.statline{ display:grid; grid-template-columns:repeat(2,1fr); gap:2px 26px; padding-block-start:22px; border-block-start:1px solid var(--line); }
.panel--dark .statline{ border-block-start-color:var(--line-d); }
.stat{ padding-block:12px; }
.stat__n{ font-family:var(--font-display); font-weight:600; font-size:clamp(28px,3vw,38px); color:var(--ink); line-height:1; letter-spacing:-.01em; }
.panel--dark .stat__n{ color:var(--cream); }
.stat__n b{ color:var(--brass); font-weight:600; }
.panel--dark .stat__n b{ color:var(--brass-2); }
.stat__l{ display:block; margin-block-start:8px; font-size:12.5px; color:var(--stone); }
.panel--dark .stat__l{ color:var(--stone-2); }

/* process steps (right side) */
.steps{ display:flex; flex-direction:column; }
.step{ display:grid; grid-template-columns:auto 1fr; gap:18px; padding-block:18px; position:relative; }
.step + .step{ border-block-start:1px solid var(--line); }
.panel--dark .step + .step{ border-block-start-color:var(--line-d); }
.step__n{ font-family:var(--font-display); font-weight:500; font-size:14px; color:var(--brass); width:34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:var(--pill); box-shadow:inset 0 0 0 1.5px var(--line); }
.panel--dark .step__n{ color:var(--brass-2); box-shadow:inset 0 0 0 1.5px var(--line-d); }
.step h3{ font-size:15.5px; }
.step p{ margin-block-start:4px; font-size:13px; color:var(--stone); line-height:1.6; }
.panel--dark .step p{ color:var(--stone-2); }

/* 12. Reviews ---------------------------------------------------------- */
.reviews{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.6vw,22px); }
.review{ margin:0; background:var(--cream); border:1px solid var(--line-2); border-radius:var(--r); padding:24px 24px 22px; box-shadow:var(--sh-sm); display:flex; flex-direction:column; }
.stars{ display:inline-flex; gap:2px; color:var(--brass); margin-block-end:14px; }
.review p{ font-size:14px; line-height:1.7; color:var(--body); flex:1; }
.review__who{ margin-block-start:18px; padding-block-start:16px; border-block-start:1px solid var(--line-2); display:flex; flex-direction:column; gap:3px; }
.review__name{ font-weight:700; font-size:13.5px; color:var(--ink); }
html[lang="en"] .review__name{ font-weight:600; }
.review__meta{ font-size:12px; color:var(--stone); }
.review__note{ text-align:center; margin-block-start:26px; font-size:13px; color:var(--stone); display:inline-flex; gap:10px; align-items:center; justify-content:center; width:100%; }

/* 13. Contact / CTA ---------------------------------------------------- */
.contact{ background:var(--ink-2); color:var(--sand-2); }
.cta-box{ text-align:center; max-width:720px; margin-inline:auto; margin-block-end:clamp(34px,5vh,60px); }
.cta-box h2{ color:var(--cream); font-size:clamp(28px,3.8vw,46px); }
.cta-box p{ margin-block-start:14px; color:var(--stone-2); font-size:clamp(14.5px,1.2vw,16px); max-width:52ch; margin-inline:auto; }
.cta-box .hero__act{ justify-content:center; border:0; margin-block-start:26px; padding:0; }
.cinfo{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; max-width:920px; margin-inline:auto; }
.cinfo a, .cinfo div{ background:var(--ink-3); border:1px solid var(--line-d); border-radius:var(--r); padding:18px 18px 20px; display:flex; flex-direction:column; gap:8px; transition:border-color .2s var(--ease); }
.cinfo a:hover{ border-color:var(--brass-2); }
.cinfo .ic{ color:var(--brass-2); }
.cinfo .k{ font-size:12px; color:var(--stone-2); }
.cinfo .v{ font-size:13.5px; color:var(--cream); font-weight:500; line-height:1.5; }

/* 14. Footer ----------------------------------------------------------- */
.footer{ background:var(--ink); color:#B8B0A0; padding-block:clamp(46px,7vh,72px) 0; }
.footer__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:clamp(28px,3vw,56px); padding-block-end:44px; }
.footer .logo__name{ color:var(--cream); }
.footer .logo__tag{ color:#8B8474; }
.footer__about{ margin-block:16px 18px; font-size:13px; line-height:1.7; color:#9A9182; max-width:34ch; }
.socials{ display:flex; gap:10px; }
.socials a{ width:38px; height:38px; display:flex; align-items:center; justify-content:center; border-radius:var(--pill); background:#221A11; color:#C6BDAD; transition:all .2s var(--ease); }
.socials a:hover{ background:var(--brass); color:#fff; }
.footer h4{ color:var(--cream); font-size:13px; font-weight:600; letter-spacing:.02em; margin-block-end:16px; }
.fcol{ display:flex; flex-direction:column; gap:11px; font-size:13px; }
.fcol a, .fcol li{ color:#9A9182; }
.fcol a:hover{ color:var(--brass-2); }
.fcol li{ display:flex; gap:9px; align-items:flex-start; }
.fcol svg{ color:var(--brass-2); flex:none; margin-block-start:2px; }
.footer__bar{ border-block-start:1px solid #2A2116; padding-block:20px; display:flex; align-items:center; justify-content:space-between; gap:14px; font-size:12.5px; color:#7E7768; flex-wrap:wrap; }
.footer__bar a{ color:#9A9182; }
.footer__bar a:hover{ color:var(--brass-2); }
.footer__legal{ display:flex; gap:18px; }

/* 15. Floating CTA (desktop) + mobile action bar --------------------- */
.float{ position:fixed; inset-block-end:24px; inset-inline-end:24px; z-index:90; display:flex; flex-direction:column; align-items:center; gap:12px; }
.float__wa{
  position:relative; width:60px; height:60px; border-radius:var(--pill);
  background:var(--wa); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 30px rgba(37,145,90,.44); transition:transform .2s var(--ease);
}
.float__wa:hover{ transform:scale(1.06); }
.float__wa::before{ content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:0 0 0 0 rgba(37,145,90,.5); animation:pulse 2.4s var(--ease) infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(37,145,90,.5) } 70%{ box-shadow:0 0 0 16px rgba(37,145,90,0) } 100%{ box-shadow:0 0 0 0 rgba(37,145,90,0) } }
.float__call{ width:52px; height:52px; border-radius:var(--pill); background:var(--ink); color:var(--cream); display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-md); transition:transform .2s var(--ease), background .2s; }
.float__call:hover{ transform:scale(1.06); background:var(--brass); }


/* 15b. Added sections: materials, coverage, faq ----------------------- */
.panel--auto{ min-height:auto; }

/* materials & finishes */
.mats{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.4vw,20px); }
.mat{ padding:clamp(20px,2vw,28px); border-radius:var(--r); background:var(--cream); border:1px solid var(--line); transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.mat:hover{ transform:translateY(-4px); box-shadow:var(--sh-md); }
.mat__ic{ width:46px; height:46px; display:flex; align-items:center; justify-content:center; border-radius:12px; background:var(--sand-2); color:var(--brass); margin-block-end:16px; }
.mat h3{ font-size:16.5px; margin-block-end:8px; }
.mat p{ font-size:13.5px; line-height:1.6; color:var(--stone); }
.panel--dark .mat{ background:var(--ink-3); border-color:var(--line-d); }
.panel--dark .mat__ic{ background:rgba(31,199,172,.12); color:var(--brass-2); }
.panel--dark .mat p{ color:var(--stone-2); }

/* coverage / service areas */
.areas{ display:flex; flex-wrap:wrap; gap:10px; margin-block-start:8px; }
.area{ display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border-radius:var(--pill); background:var(--cream); border:1px solid var(--line); font-size:14px; font-weight:500; color:var(--body); }
.area svg{ color:var(--brass); flex:none; }
.panel--dark .area{ background:var(--ink-3); border-color:var(--line-d); color:var(--sand-2); }
.panel--dark .area svg{ color:var(--brass-2); }

/* faq (native details/summary) */
.faq{ max-width:980px; margin-inline:auto; display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:start; }
.faq details{ background:var(--cream); border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; }
.faq details[open]{ box-shadow:var(--sh-sm); }
.faq summary{ list-style:none; cursor:pointer; padding:18px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px; font-weight:700; font-size:15px; color:var(--ink); }
html[lang="en"] .faq summary{ font-weight:600; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .q-ic{ flex:none; width:24px; height:24px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--sand-2); color:var(--brass); transition:transform .25s var(--ease), background .25s; }
.faq details[open] summary .q-ic{ transform:rotate(45deg); background:var(--brass); color:#fff; }
.faq .faq__a{ padding:0 20px 18px; font-size:14px; line-height:1.7; color:var(--stone); }
.panel--dark .faq details{ background:var(--ink-3); border-color:var(--line-d); }
.panel--dark .faq summary{ color:var(--cream); }
.panel--dark .faq summary .q-ic{ background:rgba(31,199,172,.14); color:var(--brass-2); }
.panel--dark .faq details[open] summary .q-ic{ background:var(--brass-2); color:var(--ink); }
.panel--dark .faq .faq__a{ color:var(--stone-2); }


/* 16. Reveal (single, subtle, hero only) ----------------------------- */
.rise{ opacity:0; transform:translateY(16px); }
.hero.ready .rise{ opacity:1; transform:none; transition:opacity .7s var(--ease), transform .7s var(--ease); }
.hero.ready .rise:nth-child(1){ transition-delay:.05s; }
.hero.ready .rise:nth-child(2){ transition-delay:.14s; }
.hero.ready .rise:nth-child(3){ transition-delay:.23s; }
.hero.ready .rise:nth-child(4){ transition-delay:.32s; }
.hero.ready .rise:nth-child(5){ transition-delay:.41s; }

/* 17. Responsive ------------------------------------------------------ */
@media (max-width:1080px){
  .services__grid{ grid-template-columns:repeat(2,1fr); }
  .mats{ grid-template-columns:repeat(2,1fr); }
  .cinfo{ grid-template-columns:repeat(2,1fr); }
  .footer__grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:920px){
  :root{ --header-h:62px; --topbar-h:0px; }
  .topbar{ display:none; }
  .nav, .header__act .btn{ display:none; }
  .icon-btn, .burger{ display:flex; }
  html{ scroll-snap-type:none; }
  .panel, .hero{ scroll-snap-align:none; }
  .panel{ min-height:auto; padding-block:clamp(56px,10vh,80px); justify-content:flex-start; }
  /* mobile hero: image slideshow up top, blending into the content panel below via gradient (no hard seam) */
  .hero{ min-height:auto; flex-direction:column; align-items:stretch; justify-content:flex-start; }
  .hero__bg{ position:relative; height:50vh; min-height:340px; margin-block-end:-72px; }
  .hero__bg::after, html[dir="ltr"] .hero__bg::after{ background:linear-gradient(to bottom, rgba(23,19,14,.45) 0%, rgba(23,19,14,0) 24%, rgba(23,19,14,0) 55%, rgba(23,19,14,.72) 84%, var(--ink) 100%); }
  .hero__in{ position:relative; z-index:1; background:linear-gradient(to bottom, rgba(23,19,14,0), var(--ink) 60px); padding-block:96px 40px; }
  .hero__dots{ flex-direction:row; gap:10px; inset-inline-end:auto; left:50%; top:calc(max(50vh, 340px) - 34px); transform:translateX(-50%); }
  .hero__dot.is-active{ width:26px; height:9px; }
  .scroll-hint{ display:none; }
  .split{ grid-template-columns:1fr; gap:34px; }
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .shot.wide{ grid-column:span 2; }
  .reviews{ grid-template-columns:1fr; }
  .faq{ grid-template-columns:1fr; }
  .float{ inset-block-end:calc(16px + env(safe-area-inset-bottom)); inset-inline-end:16px; gap:11px; }
  .float__wa{ width:54px; height:54px; }
  .float__call{ width:48px; height:48px; }
}
@media (max-width:560px){
  :root{ --gutter:18px; }
  .services__grid{ grid-template-columns:1fr; }
  .mats{ grid-template-columns:1fr; }
  .cinfo{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr; gap:26px; }
  .hero__trust{ gap:10px 18px; }
  .hero__act .btn{ flex:1; }
  .topbar__in{ justify-content:center; }
  .topbar .muted, .sep{ display:none; }
}
@media (min-width:921px) and (max-height:720px){
  html{ scroll-snap-type:none; }
  .panel{ min-height:auto; padding-block:80px; }
  .hero{ min-height:640px; }
}

/* 18. Motion / a11y --------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  html{ scroll-snap-type:none; }
  .rise{ opacity:1; transform:none; }
}

/* 19. Logo colour adaptation ----------------------------------------- */
.logo{ color:var(--ink); }
.header:not(.is-solid) .logo{ color:var(--cream); }
.logo__mark .pk{ fill:currentColor; }


/* 20. Subpages (about / work / contact / faq) -------------------------- */
body.subpage .panel{ min-height:auto; scroll-snap-align:none; padding-block:clamp(48px,7vh,86px); }
body.subpage html, body.subpage{ scroll-snap-type:none; }

.phero{
  position:relative; overflow:hidden; background:var(--ink);
  padding-block:calc(var(--topbar-h) + var(--header-h) + clamp(44px,7vh,80px)) clamp(40px,6vh,72px);
}
.phero__bg{ position:absolute; inset:0; z-index:0; }
.phero__bg img{ width:100%; height:100%; object-fit:cover; object-position:center 45%; }
.phero__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(13,9,5,.94) 0%, rgba(13,9,5,.74) 55%, rgba(13,9,5,.6) 100%);
}
.phero .wrap{ position:relative; z-index:1; }
.phero h1{ color:var(--cream); font-size:clamp(26px,3.4vw,44px); letter-spacing:-.01em; }
.phero p{ margin-block-start:14px; max-width:58ch; color:rgba(251,248,242,.88); font-size:clamp(14px,1.15vw,15.5px); }
.crumb{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-block-end:14px; font-size:12.5px; color:rgba(251,248,242,.62); }
.crumb a{ color:var(--brass-soft); }
.crumb span[aria-hidden]{ opacity:.5; }

/* prose blocks used on about / contact / faq */
.prose{ max-width:68ch; }
.prose p + p{ margin-block-start:14px; }
.prose p{ font-size:15px; line-height:1.85; color:var(--body); }
.panel--dark .prose p{ color:var(--sand-2); }

.duo{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,64px); align-items:center; }
.duo__media{ border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-md); }
.duo__media img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; }
@media (max-width:920px){ .duo{ grid-template-columns:1fr; gap:26px; } }

/* value cards */
.vals{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.6vw,22px); }
.val{ background:var(--cream); border:1px solid var(--line); border-radius:var(--r); padding:clamp(20px,2vw,26px); }
.val__ic{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:12px; background:var(--sand-2); color:var(--brass); margin-block-end:14px; }
.val h3{ font-size:16px; margin-block-end:7px; }
.val p{ font-size:13.5px; line-height:1.65; color:var(--stone); }
.panel--dark .val{ background:var(--ink-3); border-color:var(--line-d); }
.panel--dark .val__ic{ background:rgba(31,199,172,.12); color:var(--brass-2); }
.panel--dark .val p{ color:var(--stone-2); }
@media (max-width:920px){ .vals{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .vals{ grid-template-columns:1fr; } }

/* contact form */
.form{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field--full{ grid-column:1 / -1; }
.field label{ font-size:13px; font-weight:500; color:var(--ink); }
.field input, .field select, .field textarea{
  font-family:inherit; font-size:14px; color:var(--body); background:var(--cream);
  border:1px solid var(--line); border-radius:var(--r-sm); padding:12px 14px; width:100%;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field textarea{ min-height:130px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--brass); box-shadow:0 0 0 3px rgba(14,140,122,.14); }
.form__note{ grid-column:1 / -1; font-size:12.5px; color:var(--stone); }
@media (max-width:640px){ .form{ grid-template-columns:1fr; } }

.map{ border-radius:var(--r); overflow:hidden; border:1px solid var(--line-d); background:var(--ink-3); }
.map iframe{ display:block; width:100%; height:clamp(260px,42vh,420px); border:0; }

.gallery__empty{ margin-block-start:26px; text-align:center; font-size:14px; color:var(--stone-2); }
.work-all-link .btn{ min-width:220px; }

.field input[aria-invalid="true"], .field select[aria-invalid="true"]{ border-color:#C0563F; box-shadow:0 0 0 3px rgba(192,86,63,.12); }
.contact .cinfo .v a{ color:inherit; }

/* headings inside dark contact panels */
.contact h2, .contact h3{ color:var(--cream); }
.contact .head p{ color:var(--stone-2); }
.contact .eyebrow{ color:var(--brass-2); }

.faq__group{ max-width:980px; margin:clamp(30px,4vh,44px) auto 14px; font-size:15px; font-weight:700; color:var(--brass); letter-spacing:.01em; }
.faq__group:first-of-type{ margin-block-start:0; }
html[lang="en"] .faq__group{ font-weight:600; }
.panel--dark .faq__group{ color:var(--brass-2); }

/* legal pages */
.legal{ max-width:78ch; }
.legal__updated{ font-size:12.5px; color:var(--stone); margin-block-end:26px; }
.legal__block + .legal__block{ margin-block-start:30px; padding-block-start:28px; border-block-start:1px solid var(--line); }
.legal__block h2{ font-size:clamp(19px,2vw,23px); margin-block-end:12px; }
.legal__block .prose p{ font-size:14.5px; line-height:1.85; }

.err__code{ font-family:var(--font-display); font-size:clamp(52px,9vw,96px); font-weight:700; line-height:1; color:var(--brass-soft); margin-block-end:8px; }

/* social row on the contact page */
.socialrow{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-block-start:26px; }
.socialrow a{
  display:inline-flex; align-items:center; gap:9px; padding:11px 18px; border-radius:var(--pill);
  background:var(--ink-3); border:1px solid var(--line-d); color:var(--sand-2);
  font-size:14px; font-weight:500; transition:border-color .2s var(--ease), color .2s var(--ease);
}
.socialrow a:hover{ border-color:var(--brass-2); color:var(--cream); }
.socialrow svg{ color:var(--brass-2); flex:none; }
.topbar__cr .num{ letter-spacing:.02em; }

/* 21. Gallery lightbox -------------------------------------------------- */
.shot{ cursor:zoom-in; }
.shot:focus-visible{ outline:2px solid var(--brass-2); outline-offset:3px; }

.lbox{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; }
.lbox[hidden]{ display:none; }
.lbox__scrim{ position:absolute; inset:0; background:rgba(10,7,4,.93); backdrop-filter:blur(3px); }
.lbox__stage{
  position:relative; z-index:1; margin:0; max-width:min(1180px, 92vw);
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.lbox__img{
  max-width:100%; max-height:76vh; width:auto; height:auto;
  border-radius:var(--r); box-shadow:var(--sh-lg); background:var(--ink-3);
}
.lbox__cap{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 14px;
  color:var(--sand-2); font-size:13.5px; text-align:center; padding-inline:12px;
}
.lbox__count{ color:var(--brass-2); font-size:12.5px; }

.lbox__btn{
  position:absolute; z-index:2; display:flex; align-items:center; justify-content:center;
  width:48px; height:48px; border:0; border-radius:var(--pill); cursor:pointer;
  background:rgba(251,248,242,.12); color:var(--cream);
  box-shadow:inset 0 0 0 1.5px rgba(251,248,242,.28);
  transition:background .2s var(--ease), transform .2s var(--ease);
}
.lbox__btn:hover{ background:rgba(251,248,242,.24); }
.lbox__btn:active{ transform:scale(.94); }
.lbox__btn[hidden]{ display:none; }
.lbox__close{ inset-block-start:max(16px, env(safe-area-inset-top)); inset-inline-end:16px; }
.lbox__prev{ inset-inline-start:16px; top:50%; transform:translateY(-50%); }
.lbox__next{ inset-inline-end:16px; top:50%; transform:translateY(-50%); }
.lbox__prev:active, .lbox__next:active{ transform:translateY(-50%) scale(.94); }
/* arrows follow reading direction: in RTL the "next" arrow points left */
html[dir="rtl"] .lbox__prev{ inset-inline-start:auto; inset-inline-end:16px; }
html[dir="rtl"] .lbox__next{ inset-inline-end:auto; inset-inline-start:16px; }
html[dir="rtl"] .lbox__close{ inset-inline-end:auto; inset-inline-start:16px; }

@media (max-width:640px){
  .lbox__stage{ max-width:96vw; gap:10px; }
  .lbox__img{ max-height:68vh; }
  .lbox__btn{ width:44px; height:44px; }
  .lbox__prev, .lbox__next{ top:auto; bottom:max(18px, env(safe-area-inset-bottom)); transform:none; }
  .lbox__prev{ inset-inline-start:22px; }
  .lbox__next{ inset-inline-end:22px; }
  html[dir="rtl"] .lbox__prev{ inset-inline-end:22px; }
  html[dir="rtl"] .lbox__next{ inset-inline-start:22px; }
  .lbox__prev:active, .lbox__next:active{ transform:scale(.94); }
  .lbox__cap{ font-size:12.5px; }
}
.lbox__img:not([src]){ display:none; }