/* ==========================================================================
   Silux — corporate landing page
   Tokens follow the Silux design system; the neutral ramp is warmed toward
   LINEN (R244 G234 B220), the brand's own paper colour from the profile deck.
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------- */
@font-face{font-family:"Gilda Display";font-weight:400;font-style:normal;font-display:swap;
  src:url("../fonts/GildaDisplay-Regular.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212}
@font-face{font-family:"Montserrat";font-weight:300;font-style:normal;font-display:swap;src:url("../fonts/Montserrat-Light.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-weight:400;font-style:normal;font-display:swap;src:url("../fonts/Montserrat-Regular.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-weight:500;font-style:normal;font-display:swap;src:url("../fonts/Montserrat-Medium.woff2") format("woff2")}
/* Arabic faces carry a unicode-range, so they load only where Arabic is painted.
   The English page still pulls Tajawal-500 (8.7 KB) because the language
   toggle reads «العربية» — that is the mechanism working, not leaking. */
@font-face{font-family:"Amiri";font-weight:400;font-style:normal;font-display:swap;
  src:url("../fonts/Amiri-400-arabic.woff2") format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Tajawal";font-weight:300;font-style:normal;font-display:swap;
  src:url("../fonts/Tajawal-300-arabic.woff2") format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Tajawal";font-weight:400;font-style:normal;font-display:swap;
  src:url("../fonts/Tajawal-400-arabic.woff2") format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Tajawal";font-weight:500;font-style:normal;font-display:swap;
  src:url("../fonts/Tajawal-500-arabic.woff2") format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}

/* --- Tokens --------------------------------------------------------------- */
:root{
  /* Brand — NIGHT BORDEAUX / SUNLIT CLAY, sampled from the Silux mark */
  --burgundy-900:#3c1414; --burgundy-800:#4a1919; --burgundy-700:#5b1f1f;
  --burgundy-600:#732b2b; --burgundy-500:#8c3a3a;
  --burgundy-100:#f3e9e9; --burgundy-50:#faf5f5;
  --gold-800:#8a6a35; --gold-700:#a37f45; --gold-600:#b8924f; --gold-500:#cca362;
  --gold-400:#d9b984; --gold-200:#ecdcbd; --gold-100:#f6eedd;

  /* Warm neutrals — LINEN is the brand's own paper */
  --cream-50:#fbf9f5; --cream-100:#f4eadc; --cream-200:#ebe5da;
  --stone-300:#d6cfc3; --stone-400:#b3aa9c; --stone-500:#877e71; --stone-600:#5f5750;
  /* Small text and form borders need AA; the display ramp above does not reach it.
     --stone-550 is 4.7:1 on white, --border-input is 3.0:1 (SC 1.4.11). */
  --stone-550:#7a7266; --border-input:#9a948b;
  --ink-800:#2d2624; --ink-900:#1c1716; --white:#fff;

  /* Roles */
  --brand:var(--burgundy-700); --accent:var(--gold-500);
  --surface-page:var(--cream-50); --surface-raised:var(--cream-100);
  --text-heading:var(--burgundy-700); --text-body:var(--ink-800); --text-muted:var(--stone-600);

  /* Type */
  --font-display:"Gilda Display","Amiri","Times New Roman",Georgia,serif;
  --font-sans:"Montserrat","Tajawal","Helvetica Neue",Arial,sans-serif;
  --tracking-caps:.18em; --tracking-wide:.14em;

  /* Space & shape */
  --container:1248px; --gutter:clamp(20px,5vw,24px);
  --header-h:72px; --header-h-sm:60px;
  --section-y:clamp(64px,8vw,112px);
  --radius-sm:2px; --radius-md:4px;

  /* Effects */
  --shadow-sm:0 1px 2px rgba(60,20,20,.06);
  --shadow-md:0 4px 16px rgba(60,20,20,.08);
  --shadow-lg:0 16px 48px rgba(60,20,20,.14);
  --ring:0 0 0 2px var(--burgundy-900),0 0 0 5px var(--gold-400);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-std:cubic-bezier(.4,0,.2,1);
  --dur-fast:120ms; --dur-base:200ms; --dur-slow:400ms; --dur-reveal:900ms;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%235b1f1f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* --- Reset ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
body{
  margin:0;background:var(--surface-page);color:var(--text-body);
  font:400 15px/1.55 var(--font-sans);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;text-rendering:optimizeLegibility;
}
img,svg,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:var(--brand);text-decoration:none;transition:color var(--dur-fast) var(--ease-std)}
a:hover{color:var(--gold-800)}
:focus-visible{outline:2px solid transparent;outline-offset:2px;
  box-shadow:var(--ring);border-radius:var(--radius-sm)}
@media (forced-colors:active){
  :focus-visible{outline:3px solid Highlight;outline-offset:2px;box-shadow:none}
}
::selection{background:var(--gold-500);color:var(--burgundy-900)}
[hidden]{display:none!important}

/* Arabic pages lean on Tajawal/Amiri and want a touch more leading. */
:root[lang="ar"] body{font-family:"Tajawal","Montserrat",sans-serif;line-height:1.75}
:root[lang="ar"] .display{font-family:"Amiri","Gilda Display",Georgia,serif;line-height:1.35}
:root[lang="ar"] :is(.eyebrow,.btn,.nav-link,.hero__tagline span,.hero__scroll,
  .trust__item span,.card__meta,.contact__row dt,.footer h2,.footer__bar em,
  .step__title,.tags li,.service__num,.link-caps,.field > span,.lang-toggle,
  .skip,.form-card__title){letter-spacing:0}

/* --- Primitives ----------------------------------------------------------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y)}
.display{font-family:var(--font-display);font-weight:400;letter-spacing:-.01em;text-wrap:pretty}
.h1{font-size:clamp(38px,5vw,64px);line-height:1.06}
.h2{font-size:clamp(30px,3.4vw,44px);line-height:1.15}
.h3{font-size:clamp(20px,2.2vw,22px);line-height:1.25}
.lead{font-size:clamp(16px,1.3vw,17px);line-height:1.7;font-weight:300;text-wrap:pretty}
.body{font-size:16px;line-height:1.75;text-wrap:pretty}
.small{font-size:14px;line-height:1.7}

.eyebrow{
  display:inline-block;font-size:11px;font-weight:500;line-height:1.2;
  letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--gold-800);
}
.eyebrow--on-dark{color:var(--gold-500)}
.eyebrow-rule{display:flex;align-items:center;gap:14px}
.eyebrow-rule > .hero__rule{display:block;width:36px;height:1px;flex:0 0 36px;
  background:var(--gold-500);transform-origin:left center}
:root[dir="rtl"] .eyebrow-rule > .hero__rule{transform-origin:right center}

.icon{width:20px;height:20px;flex:0 0 auto;stroke:currentColor;fill:none;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
:root[dir="rtl"] .icon--flip{transform:scaleX(-1)}

/* --- Buttons -------------------------------------------------------------- */
.btn{
  --btn-h:52px;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:var(--btn-h);padding-inline:32px;border:1px solid transparent;border-radius:var(--radius-md);
  font:500 13px/1 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;
  cursor:pointer;position:relative;overflow:hidden;isolation:isolate;
  transition:color var(--dur-base) var(--ease-std),border-color var(--dur-base) var(--ease-std),
             background-color var(--dur-base) var(--ease-std),transform var(--dur-base) var(--ease-out);
  white-space:nowrap;
}
.btn--sm{--btn-h:36px;padding-inline:16px;font-size:11px}
.btn--md{--btn-h:44px;padding-inline:24px;font-size:12px}
.btn .icon{width:16px;height:16px}
/* The fill sweeps in from the leading edge rather than cross-fading. */
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;transform:scaleX(0);transform-origin:left center;
  transition:transform var(--dur-slow) var(--ease-out);
}
:root[dir="rtl"] .btn::before{transform-origin:right center}
.btn:hover::before,.btn:focus-visible::before{transform:scaleX(1)}
.btn:active{transform:translateY(1px)}

.btn--accent{background:var(--gold-500);color:var(--burgundy-900);border-color:var(--gold-500)}
.btn--accent::before{background:var(--gold-400)}
.btn--inverse{background:transparent;color:var(--white);border-color:var(--gold-500)}
.btn--inverse::before{background:var(--gold-500)}
.btn--inverse:hover,.btn--inverse:focus-visible{color:var(--burgundy-900);border-color:var(--gold-500)}
.btn--primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn--primary::before{background:var(--burgundy-800)}
.btn--ghost{background:transparent;color:var(--brand);border-color:var(--stone-300)}
.btn--ghost::before{background:var(--burgundy-50)}
.btn--full{width:100%}

/* --- Header --------------------------------------------------------------- */
.header{
  position:fixed;inset-inline:0;top:0;z-index:100;height:var(--header-h);
  background:var(--burgundy-700);border-bottom:1px solid var(--burgundy-600);
  box-shadow:0 1px 0 rgba(204,163,98,.25);
  transition:height var(--dur-slow) var(--ease-out),background-color var(--dur-slow) var(--ease-out),
             box-shadow var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out);
}
.header.is-stuck{
  height:var(--header-h-sm);background:rgba(60,20,20,.86);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 1px 0 rgba(204,163,98,.35),0 10px 30px rgba(28,23,22,.28);
}
.header.is-hidden{transform:translateY(-100%)}
.header__inner{max-width:var(--container);margin-inline:auto;height:100%;
  padding-inline:var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:24px}
.header__logo{display:flex;align-items:center;height:100%;flex:0 0 auto}
.header__logo img{height:30px;width:auto;transition:height var(--dur-slow) var(--ease-out)}
.header.is-stuck .header__logo img{height:25px}
/* Reading-progress hairline along the header's bottom edge */
.header__progress{
  position:absolute;inset-inline-start:0;bottom:-1px;height:2px;width:100%;
  background:linear-gradient(90deg,var(--gold-600),var(--gold-400));
  transform:scaleX(var(--p,0));transform-origin:left center;
  transition:transform 80ms linear;pointer-events:none;
}
:root[dir="rtl"] .header__progress{transform-origin:right center}

.nav{display:flex;gap:clamp(20px,2.4vw,32px);align-items:center}
.nav-link{
  position:relative;color:var(--gold-200);font-size:12px;font-weight:500;
  letter-spacing:var(--tracking-wide);text-transform:uppercase;padding-block:6px;
}
.nav-link::after{
  content:"";position:absolute;inset-inline:0;bottom:0;height:1px;background:var(--gold-500);
  transform:scaleX(0);transform-origin:right center;transition:transform var(--dur-slow) var(--ease-out);
}
.nav-link:hover,.nav-link:focus-visible{color:var(--gold-400)}
.nav-link:hover::after,.nav-link:focus-visible::after,.nav-link[aria-current="true"]::after{transform:scaleX(1);transform-origin:left center}
/* The underline grows from the leading edge and retracts past the trailing one;
   in RTL both origins mirror, like every other sweep in this file. */
:root[dir="rtl"] .nav-link::after{transform-origin:left center}
:root[dir="rtl"] .nav-link:hover::after,
:root[dir="rtl"] .nav-link:focus-visible::after,
:root[dir="rtl"] .nav-link[aria-current="true"]::after{transform-origin:right center}
.nav-link[aria-current="true"]{color:var(--gold-400)}

.header__actions{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.lang-toggle{
  display:inline-flex;align-items:center;justify-content:center;height:36px;padding-inline:14px;
  background:transparent;border:1px solid var(--burgundy-500);border-radius:var(--radius-md);
  color:var(--gold-200);font:500 12px/1 var(--font-sans);letter-spacing:.1em;cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease-std),color var(--dur-fast) var(--ease-std),
             border-color var(--dur-fast) var(--ease-std);
}
.lang-toggle:hover{background:var(--burgundy-600);color:var(--gold-400);border-color:var(--gold-600)}

.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--burgundy-500);border-radius:var(--radius-md);
  color:var(--gold-200);cursor:pointer;transition:background-color var(--dur-fast) var(--ease-std)}
.burger:hover{background:var(--burgundy-600)}
.burger .icon{width:20px;height:20px}

.mobile-menu{
  position:fixed;inset-inline:0;top:var(--header-h);z-index:99;
  background:var(--burgundy-800);border-top:1px solid var(--burgundy-600);
  padding:8px var(--gutter) 24px;
  display:grid;grid-template-rows:0fr;opacity:0;visibility:hidden;
  transition:grid-template-rows var(--dur-slow) var(--ease-out),opacity var(--dur-base) var(--ease-std),
             visibility 0s linear var(--dur-slow);
}
.mobile-menu.is-open{grid-template-rows:1fr;opacity:1;visibility:visible;transition-delay:0s}
/* Follow the header when it condenses, or a strip of the page shows through. */
.header.is-stuck ~ .mobile-menu{top:var(--header-h-sm)}
/* Short landscape viewports must be able to reach the last item. */
.mobile-menu.is-open .mobile-menu__inner{
  max-height:calc(100svh - var(--header-h) - 32px);overflow-y:auto;overscroll-behavior:contain}
.mobile-menu__inner{overflow:hidden;min-height:0}
.mobile-menu a.nav-link{
  display:block;font-size:13px;padding-block:16px;border-bottom:1px solid var(--burgundy-600);
  opacity:0;transform:translateY(8px);transition:opacity var(--dur-slow) var(--ease-out) calc(var(--i)*55ms),
    transform var(--dur-slow) var(--ease-out) calc(var(--i)*55ms),color var(--dur-fast) var(--ease-std);
}
.mobile-menu.is-open a.nav-link{opacity:1;transform:none}
.mobile-menu .btn{margin-top:20px}

/* --- Hero ----------------------------------------------------------------- */
.hero{
  position:relative;background:var(--burgundy-700);color:#fff;isolation:isolate;
  padding-top:var(--header-h);overflow:hidden;
}
/* warm light from the upper trailing corner + printed grain */
.hero::before{
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(120% 90% at 88% 0%,rgba(204,163,98,.16),transparent 58%),
    radial-gradient(90% 70% at 0% 100%,rgba(60,20,20,.55),transparent 60%);
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.05;
  background-image:var(--grain);background-size:180px 180px;
}
.hero__inner{
  max-width:var(--container);margin-inline:auto;padding:clamp(48px,7vw,96px) var(--gutter) clamp(56px,8vw,104px);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));
  gap:clamp(40px,6vw,80px);align-items:center;
}
/* Own the whole first screen — but only where that does not squeeze the
   portrait, so a short laptop viewport still gets the full 4:5 frame. */
@media (min-width:821px) and (min-height:800px){
  .hero__inner{min-height:calc(100svh - var(--header-h))}
}
.hero__eyebrow{color:var(--gold-500);margin-bottom:28px}
.hero__title{color:#fff;margin-bottom:24px}
.hero__body{max-width:560px;color:var(--gold-200);margin-bottom:40px}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px}

/* 496px = the width a 620px-tall 4:5 frame resolves to. Capping the figure to
   it and pushing it to the trailing edge stops the column leaving a dead gutter
   beside the portrait. */
.hero__figure{position:relative;width:100%;max-width:496px;margin-inline-start:auto}
/* Single-column hero (the grid drops to one track just under 945px): align the
   portrait with the copy above it instead of stranding it at the far edge. */
@media (max-width:944px){ .hero__figure{margin-inline-start:0} }
.hero__frame{
  position:relative;width:100%;aspect-ratio:4/5;max-height:620px;
  border:1px solid var(--burgundy-500);overflow:hidden;
  clip-path:inset(0 0 100% 0);transition:clip-path 900ms var(--ease-out) 80ms;
}
.is-ready .hero__frame,.no-js .hero__frame{clip-path:inset(0 0 0 0)}
/* 112% tall so the scroll parallax has headroom without exposing an edge */
.hero__pan{position:absolute;inset:-6% 0;will-change:transform}
.hero__pan .media{width:100%;height:100%}
.hero__frame img{
  width:100%;height:100%;object-fit:cover;object-position:top center;
  transform:scale(1.12);--img-dur:1500ms;--img-delay:120ms;
}
.is-ready .hero__frame img,.no-js .hero__frame img{transform:none}
.hero__tagline{
  position:absolute;bottom:-1px;inset-inline-start:-1px;background:var(--burgundy-700);
  padding-block:20px 0;padding-inline-end:24px;max-width:min(300px,80%);
}
.hero__tagline span{
  display:block;border-top:2px solid var(--gold-500);padding-top:14px;
  font-size:11px;letter-spacing:var(--tracking-caps);text-transform:uppercase;
  color:var(--gold-500);line-height:1.8;
}
.hero__scroll{
  display:inline-flex;align-items:center;gap:10px;margin-top:clamp(28px,4vw,44px);
  color:var(--gold-200);font-size:11px;letter-spacing:var(--tracking-caps);text-transform:uppercase;
}
.hero__scroll .icon{width:14px;height:14px;animation:nudge 2.4s var(--ease-std) infinite}
@keyframes nudge{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(4px);opacity:1}}

/* --- Trust strip ---------------------------------------------------------- */
.trust{background:var(--surface-raised);border-block:1px solid var(--cream-200)}
.trust__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px 40px;padding-block:28px}
.trust__item{display:flex;align-items:center;gap:14px;color:var(--brand)}
.trust__item span{font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--stone-600)}

/* --- About ---------------------------------------------------------------- */
.about__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));
  gap:clamp(40px,6vw,96px);align-items:start}
.about__images{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.about__images figure:first-child{margin-top:48px}
.about__images .media{aspect-ratio:3/4}
.about__title{color:var(--text-heading);margin-block:20px 24px}
.about__p1{margin-bottom:18px}
.about__p2{color:var(--text-muted);margin-bottom:36px}
.values{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px 32px;
  border-top:1px solid var(--stone-300);padding-top:28px}
.values dt{font:400 20px/1.2 var(--font-display);color:var(--brand);margin-bottom:8px}
.values dd{margin:0;font-size:14px;line-height:1.65;color:var(--text-muted)}

/* --- Statement ------------------------------------------------------------ */
.statement{background:var(--burgundy-700);color:#fff;overflow:hidden}
.statement__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));min-height:520px}
.statement__text{display:flex;align-items:center;padding:clamp(56px,7vw,96px) clamp(24px,6vw,96px)}
.statement__title{color:var(--cream-100);margin-block:24px;font-size:clamp(32px,4vw,56px);line-height:1.1}
.statement__body{max-width:480px;color:var(--gold-200);font-weight:300}
.statement__media{min-height:420px;position:relative;overflow:hidden}
.statement__media .media,.statement__media img{height:100%;width:100%;object-fit:cover}

/* --- Services ------------------------------------------------------------- */
.services{background:var(--white);border-top:1px solid var(--cream-200)}
.section-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:24px;
  margin-bottom:clamp(36px,5vw,64px)}
.section-head h2{color:var(--text-heading);margin-top:20px}
.section-head__aside{margin:0;max-width:400px;font-size:15px;line-height:1.7;color:var(--text-muted)}
.services__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:1px;background:var(--cream-200);border:1px solid var(--cream-200)}
.service{
  position:relative;background:var(--white);padding:36px 32px;display:flex;flex-direction:column;gap:18px;
  min-height:332px;transition:background-color var(--dur-slow) var(--ease-out);
}
.service::before{
  content:"";position:absolute;inset-inline:0;top:0;height:2px;background:var(--gold-500);
  transform:scaleX(0);transform-origin:left center;transition:transform var(--dur-slow) var(--ease-out);
}
:root[dir="rtl"] .service::before{transform-origin:right center}
.service:hover{background:var(--cream-50)}
.service:hover::before{transform:scaleX(1)}
.service__top{display:flex;justify-content:space-between;align-items:center}
.service__icon{
  width:44px;height:44px;border:1px solid var(--gold-500);border-radius:var(--radius-md);
  display:flex;align-items:center;justify-content:center;color:var(--brand);
  transition:background-color var(--dur-base) var(--ease-std),color var(--dur-base) var(--ease-std),
             transform var(--dur-slow) var(--ease-out);
}
.service:hover .service__icon{background:var(--gold-500);color:var(--burgundy-900);transform:translateY(-2px)}
.service__num{font-size:11px;letter-spacing:var(--tracking-caps);color:var(--stone-550);
  transition:color var(--dur-base) var(--ease-std)}
.service:hover .service__num{color:var(--gold-800)}
.service h3{color:var(--brand);margin-top:6px;font-family:var(--font-display);font-weight:400;font-size:22px;line-height:1.25}
.service p{font-size:14px;line-height:1.7;color:var(--text-muted);flex:1;text-wrap:pretty}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags li{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--brand);
  background:var(--burgundy-50);border:1px solid var(--burgundy-100);padding:5px 10px;border-radius:var(--radius-sm)}

/* --- Gallery -------------------------------------------------------------- */
.gallery__head{max-width:620px;margin-bottom:clamp(36px,5vw,56px)}
.gallery__head h2{color:var(--text-heading);margin-top:20px}
.gallery__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:16px}
.gallery__item{position:relative;overflow:hidden;min-width:0}
.gallery__item--wide{grid-column:span 2;aspect-ratio:16/9}
.gallery__item--tall{aspect-ratio:8/9}
.gallery__item img{transition:transform 1200ms var(--ease-out)}
.gallery__item::after{
  content:"";position:absolute;inset:12px;border:1px solid rgba(204,163,98,.6);
  opacity:0;transform:scale(1.02);pointer-events:none;
  transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out);
}
.gallery__item:hover img{transform:scale(1.05)}
.gallery__item:hover::after{opacity:1;transform:scale(1)}

/* --- Process -------------------------------------------------------------- */
.process{background:var(--burgundy-700);color:#fff}
.process__head{max-width:640px;margin-bottom:clamp(36px,5vw,64px)}
.process__head h2{color:#fff;margin-block:20px}
.process__head p{color:var(--gold-200);font-size:16px}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:32px 40px}
/* The process is five steps; auto-fit lands on four and orphans the fifth. */
@media (min-width:1040px){ .steps{grid-template-columns:repeat(5,1fr);gap:32px 24px} }
@media (min-width:1240px){ .steps{gap:32px 40px} }
.step{position:relative;padding-top:20px}
.step::before{content:"";position:absolute;inset-inline:0;top:0;height:1px;background:var(--gold-500);
  transform:scaleX(0);transform-origin:left center;transition:transform 700ms var(--ease-out) calc(var(--i)*90ms)}
:root[dir="rtl"] .step::before{transform-origin:right center}
.step.is-in::before,.no-js .step::before{transform:scaleX(1)}
.step__num{font:400 36px/1 var(--font-display);color:var(--gold-500);margin-bottom:16px}
.step__title{font-size:15px;font-weight:500;letter-spacing:.04em;margin-bottom:10px;color:#fff}
.step__body{font-size:14px;line-height:1.65;font-weight:300;color:var(--gold-200)}

/* --- News ----------------------------------------------------------------- */
.news__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:24px}
.card{
  background:var(--white);border:1px solid var(--cream-200);border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);overflow:hidden;height:100%;display:flex;flex-direction:column;
  transition:transform var(--dur-slow) var(--ease-out),box-shadow var(--dur-slow) var(--ease-out),
             border-color var(--dur-slow) var(--ease-out);
}
.card--interactive:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--stone-300)}
.card__media{aspect-ratio:16/10;overflow:hidden}
.card__media img{transition:transform 1200ms var(--ease-out)}
.card--interactive:hover .card__media img{transform:scale(1.05)}
.card__body{padding:24px;display:flex;flex-direction:column;gap:12px;flex:1}
.card__meta{display:flex;gap:12px;align-items:center;font-size:11px;
  letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--gold-800)}
.card__meta i{display:block;width:1px;height:10px;background:var(--stone-300)}
.card__meta time{color:var(--stone-550);font-style:normal}
.card h3{font:400 21px/1.3 var(--font-display);color:var(--brand);text-wrap:pretty}
/* :not() keeps this off .card__meta — as a bare `.card p` it out-ranked the
   meta rule and turned the gold 11px eyebrow into 14px body grey, while its
   flex:1 let the meta row absorb spare height and stagger the headlines. */
.card__body > p:not(.card__meta){font-size:14px;line-height:1.65;color:var(--text-muted);flex:1}
.link-caps{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:500;
  letter-spacing:var(--tracking-wide);text-transform:uppercase}
.link-caps .icon{width:14px;height:14px;transition:transform var(--dur-slow) var(--ease-out)}
.link-caps:hover .icon{transform:translateX(4px)}
:root[dir="rtl"] .link-caps:hover .icon{transform:translateX(-4px)}

/* --- Contact -------------------------------------------------------------- */
.contact{background:var(--white);border-top:1px solid var(--cream-200)}
.contact__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));
  gap:clamp(40px,6vw,96px);align-items:start}
.contact__title{color:var(--text-heading);margin-block:20px}
.contact__intro{color:var(--text-muted);max-width:480px;margin-bottom:40px}
.contact__rows{border-top:1px solid var(--stone-300)}
/* dt carries the icon and the label; dd sits beneath, indented to clear it.
   The pairs are direct children of the row div so the <dl> stays valid. */
.contact__row{display:grid;grid-template-columns:1fr;gap:4px;
  padding-block:18px;border-bottom:1px solid var(--cream-200)}
.contact__row .icon{width:18px;height:18px;color:var(--gold-700);flex:0 0 18px}
.contact__row dt{display:flex;align-items:center;gap:14px;font-size:11px;
  letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--stone-550)}
.contact__row dd{margin:0;font-size:15px;color:var(--ink-800);padding-inline-start:32px}
.contact__row a:hover{color:var(--gold-800)}
.contact__card-img{margin-top:32px;aspect-ratio:16/10;overflow:hidden;max-width:480px}

.form-card{
  background:var(--white);border:0;border-top:2px solid var(--gold-500);
  border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:clamp(24px,3vw,32px);
}
.form-card__title{font:400 24px/1.2 var(--font-display);color:var(--brand);margin-bottom:20px}
.form{display:flex;flex-direction:column;gap:20px}
.form__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.field{display:flex;flex-direction:column;gap:6px}
.field > span{font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--brand)}
.field input,.field select,.field textarea{
  width:100%;min-height:44px;border:1px solid var(--border-input);border-radius:var(--radius-sm);
  padding:11px 14px;font:400 15px/1.55 var(--font-sans);color:var(--ink-800);background:var(--white);
  transition:border-color var(--dur-fast) var(--ease-std),box-shadow var(--dur-fast) var(--ease-std);
}
.field textarea{resize:vertical;min-height:104px}
.field select{appearance:none;cursor:pointer;padding-inline-end:40px;
  background-image:var(--chevron);background-repeat:no-repeat;background-size:16px;
  background-position:right 14px center}
:root[dir="rtl"] .field select{background-position:left 14px center}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:2px solid transparent;border-color:var(--gold-600);box-shadow:var(--ring)}
.field input:user-invalid,.field select:user-invalid,.field textarea:user-invalid{border-color:#a63a3a}
.field__error{font-size:12px;color:#a63a3a;min-height:0;display:none}
.field.has-error .field__error{display:block}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:#a63a3a}
.form__foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding-top:4px}
.form__note{font-size:12px;color:var(--stone-550);max-width:300px;line-height:1.5}
.form-sent{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;padding-block:40px}
.form-sent__mark{width:56px;height:56px;border-radius:50%;border:1px solid var(--gold-500);
  display:flex;align-items:center;justify-content:center;color:var(--brand)}
.form-sent__mark .icon{width:24px;height:24px}
.form-sent h3{font:400 26px/1.2 var(--font-display);color:var(--brand)}
.form-sent p{color:var(--text-muted);max-width:360px}

/* --- Footer --------------------------------------------------------------- */
.footer{background:var(--burgundy-900);color:var(--gold-200)}
.footer__inner{max-width:var(--container);margin-inline:auto;padding:56px var(--gutter) 32px}
.footer__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:40px;
  padding-bottom:40px;border-bottom:1px solid var(--burgundy-600)}
.footer__logo{width:140px;margin-bottom:20px}
.footer p{font-size:13px;line-height:1.7;font-weight:300;max-width:280px}
.footer h2{font-size:11px;font-weight:500;letter-spacing:var(--tracking-caps);text-transform:uppercase;
  color:var(--gold-500);margin-bottom:18px}
.footer__links{display:flex;flex-direction:column;gap:10px;font-size:13px}
.footer__links a,.footer__links span{color:var(--gold-200);font-size:13px}
.footer__links a:hover{color:var(--gold-400)}
.footer__bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:24px;
  font-size:12px;color:var(--gold-400)}
.footer__bar em{font-style:normal;letter-spacing:var(--tracking-caps);text-transform:uppercase;
  font-size:11px;color:var(--gold-500)}

/* --- Media (blur-up) ------------------------------------------------------
   The placeholder is a ~20px WebP stretched to fill: upscaling alone gives the
   blur, so no filter or extra compositing layer is needed. */
.media{position:relative;overflow:hidden;background-color:var(--cream-100);
  background-image:var(--lqip);background-size:cover;background-position:center}
/* <picture> is inline by default, which would leave the img resolving its
   height against an auto-height box and defeat object-fit. */
.media picture{display:contents}
.media img{width:100%;height:100%;object-fit:cover;
  transition:opacity 700ms var(--ease-std),
             transform var(--img-dur,0ms) var(--ease-out) var(--img-delay,0ms)}
/* The fade is gated on `js-blur`, which the head script sets and removes again
   if the main script never boots — a scripting failure can never hide a photo. */
.js-blur .media img{opacity:0}
.js-blur .media img.is-loaded{opacity:1}

/* --- Reveal --------------------------------------------------------------- */
[data-reveal]{opacity:0;transform:translateY(20px);
  transition:opacity 700ms var(--ease-out) calc(var(--i,0)*80ms),transform 700ms var(--ease-out) calc(var(--i,0)*80ms)}
[data-reveal].is-in{opacity:1;transform:none}
.no-js [data-reveal]{opacity:1;transform:none}

/* Curtain wipe for framed imagery.
   The clip goes on the INNER element, never on the observed one: Chromium
   computes an IntersectionObserver target's rect with its own clip-path
   applied, so a clipped observer target reports zero intersection and the
   reveal that is supposed to open it never fires. */
[data-wipe] > *{clip-path:inset(0 0 100% 0);transform:scale(1.06);
  transition:clip-path 1100ms var(--ease-out),transform 1500ms var(--ease-out)}
[data-wipe].is-in > *{clip-path:inset(0 0 0 0);transform:none}
.no-js [data-wipe] > *{clip-path:none;transform:none}

/* Hero mask reveal. The padding/negative-margin pair gives descenders room so
   `overflow:hidden` clips only the animation, never the type. */
.line{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.line > span{display:block;transform:translateY(105%);
  transition:transform 700ms var(--ease-out) calc(var(--i)*80ms + 60ms)}
.is-ready .line > span{transform:none}
.no-js .line > span{transform:none}
.hero__fade{opacity:0;transform:translateY(14px);
  transition:opacity 520ms var(--ease-out) calc(var(--d,0)*1ms),transform 520ms var(--ease-out) calc(var(--d,0)*1ms)}
.is-ready .hero__fade{opacity:1;transform:none}
.no-js .hero__fade{opacity:1;transform:none}
.hero__rule{transform:scaleX(0);transition:transform 700ms var(--ease-out) 60ms}
.is-ready .hero__rule,.no-js .hero__rule{transform:scaleX(1)}

/* --- Skip link ------------------------------------------------------------ */
.skip{position:absolute;inset-inline-start:-9999px;top:0;z-index:200;background:var(--gold-500);
  color:var(--burgundy-900);padding:12px 20px;font:500 12px/1 var(--font-sans);
  letter-spacing:var(--tracking-wide);text-transform:uppercase}
.skip:focus{inset-inline-start:0}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width:1000px){
  .nav,.header__actions .btn,.header__actions .lang-toggle{display:none}
  .burger{display:flex}
  .header__actions{gap:8px}
  .header__actions .lang-toggle--mobile{display:inline-flex;height:44px}
}
@media (min-width:1001px){
  .mobile-menu{display:none}
  .lang-toggle--mobile{display:none}
}
@media (max-width:820px){
  .hero__inner{min-height:0;padding-top:clamp(40px,10vw,64px)}
  /* the portrait sits immediately below the copy here, so the cue earns nothing */
  .hero__scroll{display:none}
  .hero__frame{max-height:none;aspect-ratio:4/5}
  .statement__grid{min-height:0}
  .gallery__item--wide{grid-column:span 1;aspect-ratio:16/10}
  .about__images figure:first-child{margin-top:32px}
}
@media (max-width:560px){
  :root{--section-y:clamp(48px,12vw,72px)}
  /* one column of equal blocks reads as deliberate; two ragged widths do not */
  .hero__cta{flex-direction:column;align-items:stretch}
  .hero__cta .btn{width:100%}
  .service{padding:28px 24px;min-height:0}
  .form-card{padding:22px}
  .footer__inner{padding-top:44px}
  .hero__tagline{max-width:82%}
}
/* The mosaic is authored as span-2 + 1 / 1 + span-2, so it only resolves
   cleanly at two or three columns. Left to auto-fit it reaches four above
   1280px and the second row ends half empty. */
@media (min-width:821px) and (max-width:1100px){
  .gallery__grid{grid-template-columns:repeat(2,1fr)}
}
/* Two columns of mismatched ratios left ~140px of dead space beside every short
   tile; squares make the pair read as one grid. */
@media (min-width:576px) and (max-width:820px){
  .gallery__item--wide,.gallery__item--tall{aspect-ratio:1/1}
}
/* One-column statement: without an explicit height the photo resolves to its own
   intrinsic ratio — 955px tall at a 839px viewport, then 520px at 840px. */
@media (max-width:839px){
  .statement__media{min-height:0;height:clamp(320px,54vw,540px);aspect-ratio:auto}
  .statement__media .media{height:100%}
}
@media (min-width:1101px){
  .gallery__grid{grid-template-columns:repeat(3,1fr)}
}

/* --- Print ---------------------------------------------------------------- */
@media print{
  .header,.mobile-menu,.hero__scroll,.form-card,.skip{display:none}
  body{background:#fff;color:#000}
  /* Flipping only the four section grounds left every descendant that sets its
     own colour painting white on white. */
  .hero,.statement,.process,.footer,
  .hero *,.statement *,.process *,.footer *{
    background-color:transparent!important;color:#1c1716!important;
    text-shadow:none!important;box-shadow:none!important}
  .hero,.statement,.process,.footer{background:#fff!important}
  .eyebrow,.step__num,.footer h2,.footer__bar em{color:#5b1f1f!important}
  .display{color:#5b1f1f!important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:11px;color:#5f5750}
}

/* --- Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  [data-reveal],.hero__fade{opacity:1!important;transform:none!important}
  [data-wipe] > *{clip-path:none!important;transform:none!important}
  .hero__frame{clip-path:none!important}
  .hero__frame img{transform:none!important}
  .hero__pan{transform:none!important}
  .line > span{transform:none!important}
  .hero__rule{transform:scaleX(1)!important}
  .media img{opacity:1!important}
}