/* =============================================================
   ORYX — DESIGN 02  ·  light, editorial, craft-led
   Same brand colours as design 01, applied the opposite way:
   warm paper base, serif display, maroon as ink rather than glow.
   ============================================================= */

:root{
  --mar:      #E52132;
  --mar-dp:   #58101C;
  --mar-lt:   #9A3243;
  --deep:     #7A1F2E;
  --sil:      #B9BFC4;
  --ink:      #16181C;
  --ink-2:    #33383F;
  --mute:     #6B7178;
  --paper:    #F4F2F0;
  --paper-2:  #EAE6E2;
  --paper-3:  #FBFAF9;
  --line:     rgba(22,24,28,.13);
  --line-2:   rgba(22,24,28,.07);
  --line-inv: rgba(255,255,255,.18);

  --f-d: 'Fraunces', Georgia, 'Times New Roman', serif;
  --f-b: 'DM Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --f-a: 'Tajawal', 'Geeza Pro', sans-serif;

  --w: 1360px;
  --pad: clamp(1.15rem, 4.6vw, 5rem);
  --sy: clamp(4.5rem, 10vw, 9.5rem);

  --e: cubic-bezier(.16,1,.3,1);
  --e2: cubic-bezier(.62,.05,.36,1);

  --fb2: linear-gradient(150deg,#2A2D33,#151719 55%,#3B2129);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-b); font-size:clamp(.95rem,.4vw + .85rem,1.05rem);
  line-height:1.68; overflow-x:hidden;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
body.is-loading{ overflow:hidden; height:100%; }
body.idx-open{ overflow:hidden; }

/* Fine paper grain over the whole page. Flat beige reads as empty screen;
   a little tooth makes it read as stock. Sits under the preloader (9999)
   and takes no pointer events. */
body::after{
  content:''; position:fixed; inset:0; z-index:9998; pointer-events:none;
  opacity:.05; background-repeat:repeat; background-size:170px 170px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce){ body::after{ opacity:.035; } }

img,svg,canvas{ display:block; max-width:100%; }
p{ margin:0 0 1em; }
a{ color:inherit; text-decoration:none; }
ul,ol,dl{ margin:0; padding:0; list-style:none; }
dd,dt{ margin:0; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
address{ font-style:normal; }
::selection{ background:var(--deep); color:#fff; }
:focus-visible{ outline:2px solid var(--mar-lt); outline-offset:3px; border-radius:3px; }

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

/* ---------- type ---------- */
.h2,h1,h3,h4{ font-family:var(--f-d); font-weight:500; letter-spacing:-.02em; line-height:1.04; margin:0; }
.h2{ font-size:clamp(2.1rem,5vw,4.3rem); }
.h2--sm{ font-size:clamp(1.7rem,3.2vw,2.7rem); }
.h2 em,h1 em{ font-style:italic; color:var(--deep); }

.lbl{
  display:flex; align-items:center; gap:.7rem; margin:0 0 1.4rem;
  font-family:var(--f-b); font-size:.7rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--mute);
}
.lbl em{
  font-style:normal; font-family:var(--f-d); font-size:.85rem;
  letter-spacing:0; color:var(--deep);
}
.lbl--inv{ color:rgba(255,255,255,.62); }
.lbl--inv em{ color:#fff; }

.lbl__dot{
  position:relative; width:7px; height:7px; border-radius:50%;
  background:#2FA766; flex:none; color:#2FA766;
}
.lbl__dot::after{
  content:''; position:absolute; inset:-5px; border-radius:50%;
  border:1px solid currentColor; animation:dotPulse 2.2s var(--e2) infinite;
}
@media (prefers-reduced-motion: reduce){ .lbl__dot::after{ animation:none; } }
@keyframes dotPulse{
  0%  { transform:scale(.5); opacity:.85; }
  100%{ transform:scale(1.9); opacity:0; }
}

/* ---------- buttons ---------- */
.pill{
  position:relative; display:inline-flex; align-items:center; gap:.6rem;
  padding:.85rem 1.5rem; border-radius:2px; overflow:hidden; isolation:isolate;
  background:#3c3c3c; color:#fff;
  font-size:.82rem; font-weight:500; letter-spacing:.04em; text-transform:uppercase;
  transition:color .3s, transform .25s var(--e);
  transform:translate3d(var(--mx,0px),var(--my,0px),0);
}
@media (prefers-reduced-motion: reduce){ .pill{ transform:none !important; } }
.pill--enquire{ background:var(--mar); padding-block:.6rem; }
.pill--lg{ padding:1.1rem 2rem; font-size:.86rem; }
.pill span,.pill svg{ position:relative; z-index:2; }
.pill svg{ width:1.05em; height:1.05em; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; transition:transform .4s var(--e); }
.pill::before{
  content:''; position:absolute; inset:0; z-index:1; background:var(--ink);
  transform:translateY(101%); transition:transform .5s var(--e);
}
.pill:hover::before{ transform:translateY(0); }
.pill:hover svg{ transform:translateX(4px); }

.tlink{
  display:inline-flex; align-items:center; gap:.5rem; padding-bottom:.3rem;
  font-size:.82rem; font-weight:500; letter-spacing:.04em; text-transform:uppercase;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:100% 1px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size .45s var(--e), color .3s;
}
.tlink:hover{ background-size:0% 1px; }
.tlink--dark{ color:var(--deep); }

/* ---------- preloader ---------- */
.pre{
  position:fixed; inset:0; z-index:9999; display:grid; place-items:center;
  background:var(--paper); transition:opacity .5s var(--e);
}
.pre__in{ display:grid; justify-items:center; gap:1.4rem; }
.pre__logo{ width:min(250px,54vw); }
.pre__rule{ display:block; width:min(220px,50vw); height:1px; background:var(--line); overflow:hidden; }
.pre__rule i{ display:block; height:100%; width:0; background:var(--deep); }
body.pre-out .pre{ opacity:0; pointer-events:none; }
body.pre-gone .pre{ display:none; }
@media (prefers-reduced-motion: reduce){ .pre{ transition-duration:.01s; } }

/* ---------- vertical progress rail ---------- */
.rail{
  position:fixed; top:0; right:0; width:2px; height:100vh; z-index:800;
  background:var(--line-2); pointer-events:none;
}
.rail span{ display:block; width:100%; height:0; background:var(--deep); }

/* ---------- header ---------- */
.top{
  position:fixed; top:0; left:0; right:0; z-index:700;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:clamp(.9rem,1.6vw,1.5rem) var(--pad);
  transition:transform .5s var(--e), background .4s, box-shadow .4s;
}
.top.is-solid{
  background:rgba(244,242,240,.86); backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 1px 0 var(--line-2);
}
body:not(.products-page) .top.is-solid{
  padding-block:clamp(.5rem,.9vw,.8rem);
  transition:transform .5s var(--e), background .4s, box-shadow .4s, padding .4s var(--e);
}
body:not(.products-page) .top.is-solid .top__brand img{ height:clamp(34px,3.6vw,44px); }
.top.is-up{ transform:translateY(-105%); }
.top__brand img{ height:clamp(42px,4.6vw,58px); width:auto; transition:height .4s var(--e); }
.top__nav{ display:flex; gap:1.8rem; }
.top__nav a{
  font-size:.8rem; letter-spacing:.06em; color:var(--ink-2); padding-bottom:.2rem;
  background-image:linear-gradient(var(--deep),var(--deep));
  background-size:0% 1px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size .4s var(--e), color .3s;
}
.top__nav a:hover,.top__nav a.is-on{ color:var(--deep); background-size:100% 1px; }
.top__end{ display:flex; align-items:center; gap:1.1rem; }
.top__tel{ font-size:.82rem; color:var(--ink-2); }
.top__tel:hover{ color:var(--deep); }

.menub{ display:none; align-items:center; gap:.55rem; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; }
.menub i{ display:block; width:16px; height:1.4px; background:var(--ink); transition:transform .4s var(--e); }
.menub i:last-child{ width:10px; }
body.idx-open .menub{ color:#fff; }
body.idx-open .menub i{ background:#fff; }
body.idx-open .menub i:first-child{ transform:translateY(1.2px) rotate(45deg); }
body.idx-open .menub i:last-child{ width:16px; transform:translateY(-1.2px) rotate(-45deg); }

@media (max-width:1040px){ .top__nav{ display:none; } .menub{ display:flex; } }
@media (max-width:640px){ .top__tel,.top__end .pill{ display:none; } }

/* ---------- fullscreen index ---------- */
.idx{ position:fixed; inset:0; z-index:690; visibility:hidden; }
.idx::before{
  content:''; position:absolute; inset:0; background:#7A1F2E;
  transform:scaleY(0); transform-origin:top; transition:transform .75s var(--e);
}
.idx__in{ position:relative; height:100%; display:flex; flex-direction:column; justify-content:center; gap:2rem; padding:6rem var(--pad) 3rem; color:#fff; opacity:0; transition:opacity .3s; }
body.idx-open .idx{ visibility:visible; }
body.idx-open .idx::before{ transform:scaleY(1); }
body.idx-open .idx__in{ opacity:1; transition-delay:.25s; }
.idx__nav{ display:grid; }
.idx__nav a{
  display:flex; align-items:baseline; gap:1.2rem; padding:.5rem 0;
  border-bottom:1px solid var(--line-inv);
  font-family:var(--f-d); font-size:clamp(1.7rem,6vw,3.2rem); font-weight:500;
  opacity:0; transform:translateY(24px);
  transition:opacity .55s var(--e) calc(.3s + var(--i)*.055s), transform .55s var(--e) calc(.3s + var(--i)*.055s), padding-left .35s var(--e);
}
.idx__nav a em{ font-style:normal; font-family:var(--f-b); font-size:.7rem; letter-spacing:.18em; opacity:.65; }
.idx__nav a:hover{ padding-left:.8rem; }
body.idx-open .idx__nav a{ opacity:1; transform:none; }
.idx__foot{ display:flex; flex-wrap:wrap; gap:1rem; font-size:.9rem; color:rgba(255,255,255,.75); }

/* ---------- hero ---------- */
.hero2{ padding:clamp(6.5rem,13vh,10rem) 0 clamp(4rem,8vh,6rem); }
.hero2__grid{
  display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:center;
}
.hero2__h{
  font-size:clamp(2.6rem,6.6vw,5.6rem); font-weight:400; line-height:1.02;
  letter-spacing:-.028em; margin:0 0 1.3rem;
}
.hero2__h span{ display:block; }
.hero2__h em{ color:var(--deep); }
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero2__h em{
    background:linear-gradient(100deg,var(--deep) 30%,var(--mar-lt) 50%,var(--deep) 70%);
    background-size:250% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
    animation:heroShimmer 4.5s ease-in-out infinite;
  }
}
@media (prefers-reduced-motion: reduce){ .hero2__h em{ animation:none !important; } }
@keyframes heroShimmer{
  0%  { background-position:220% 0; }
  100%{ background-position:-100% 0; }
}
.hero2__lead{ max-width:46ch; color:var(--mute); font-size:clamp(1rem,.5vw + .9rem,1.14rem); margin:0 0 2.2rem; }
.hero2__cta{ display:flex; align-items:center; flex-wrap:wrap; gap:1.4rem; }
.hero2__cta .pill--lg svg{ animation:arrowNudge 2.2s ease-in-out infinite; }
.hero2__cta .pill--lg:hover svg{ animation-play-state:paused; }
@media (prefers-reduced-motion: reduce){ .hero2__cta .pill--lg svg{ animation:none; } }
@keyframes arrowNudge{
  0%,100%{ transform:translateX(0); }
  50%    { transform:translateX(5px); }
}

.hero2__art{ position:relative; aspect-ratio:1/1; }
#ribbon{ position:absolute; inset:0; width:100%; height:100%; }
.hero2__wash{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(closest-side,transparent 55%,var(--paper) 100%);
}
/* hero2.js flags the body when WebGL is unavailable — drop the empty frame
   rather than leaving a blank 4:3 hole above the headline on mobile */
body.no-gl .hero2__art{ display:none; }

.spec{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(1.2rem,3vw,3rem); margin-top:clamp(3rem,7vh,5rem);
  padding-top:1.8rem; border-top:1px solid var(--line);
}
.spec > div{ position:relative; padding-left:clamp(1.2rem,3vw,3rem); transition:transform .4s var(--e); }
.spec > div:first-child{ padding-left:0; }
.spec > div + div::before{
  content:''; position:absolute; left:calc(clamp(1.2rem,3vw,3rem)/-2); top:.1rem; bottom:.1rem;
  width:1px; background:var(--line);
}
.spec > div[data-rise]{ transform:translateY(22px) scale(.95); }
.spec > div[data-rise].in{ transform:none; }
.spec > div:hover{ transform:translateY(-3px); }
.spec__n{
  display:block; font-family:var(--f-d); font-style:italic; color:var(--deep);
  font-size:1rem; margin-bottom:.6rem; transition:opacity .3s;
  opacity:.75;
}
.spec > div:hover .spec__n{ opacity:1; }
.spec dt{
  display:flex; align-items:center; gap:.45rem;
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--mute); margin-bottom:.55rem;
}
.spec dt::before{
  content:''; width:5px; height:5px; border-radius:50%; background:var(--mar);
  flex:none; transition:transform .3s var(--e);
}
.spec > div:hover dt::before{ transform:scale(1.6); }
.spec dd{
  position:relative; display:inline-block; font-family:var(--f-d); font-variant-numeric:tabular-nums;
  font-size:clamp(1.4rem,2.4vw,2rem); font-weight:500; color:var(--ink); transition:color .3s;
}
.spec dd::after{
  content:''; position:absolute; left:0; right:100%; bottom:-.3rem; height:2px;
  background:var(--mar); transition:right .4s var(--e);
}
.spec > div:hover dd{ color:var(--deep); }
.spec > div:hover dd::after{ right:0; }
@media (max-width:900px){
  .hero2__grid{ grid-template-columns:1fr; }
  .hero2__art{ order:-1; aspect-ratio:4/3; }
}
@media (max-width:620px){
  .spec{ grid-template-columns:1fr 1fr; column-gap:1.4rem; row-gap:2.2rem; }
  .spec > div:nth-child(3){ padding-top:1.7rem; padding-left:0; }
  .spec > div:nth-child(4){ padding-top:1.7rem; }
  .spec > div:nth-child(3)::before{ left:-.7rem; right:-.7rem; top:0; bottom:auto; width:auto; height:1px; }
  .spec > div:nth-child(4)::after{
    content:''; position:absolute; left:-.7rem; right:-.7rem; top:0; height:1px; background:var(--line);
  }
}

/* ---------- ticker ----------
   A dark band across the paper page: the type is set large and quiet in
   cream, the slashes carry the brand red, and both edges fade out so the
   strip reads as continuous rather than clipped by the viewport. */
.tick{
  position:relative; overflow:hidden;
  padding:clamp(1.4rem,2.6vw,2.1rem) 0;
  background:linear-gradient(180deg,var(--paper-2),var(--paper));
}
/* the strip fades into the page at both edges instead of being cut off */
.tick::before,.tick::after{
  content:''; position:absolute; top:0; bottom:0; width:clamp(2.5rem,9vw,8rem);
  z-index:2; pointer-events:none;
}
.tick::before{ left:0;  background:linear-gradient(90deg,var(--paper-2),transparent); }
.tick::after { right:0; background:linear-gradient(270deg,var(--paper-2),transparent); }
.tick__t{ display:flex; width:max-content; animation:tk 46s linear infinite; }
.tick:hover .tick__t{ animation-play-state:paused; }
.tick__s{ display:flex; align-items:center; gap:clamp(.7rem,1.4vw,1rem); padding-right:clamp(.7rem,1.4vw,1rem); }

/* each speciality rides in its own chip — icon in brand red, label quiet */
.tick__i{
  display:inline-flex; align-items:center; gap:.7rem; white-space:nowrap;
  padding:.7rem 1.25rem; border-radius:100px;
  background:linear-gradient(180deg,#fff,var(--paper-3));
  border:1px solid var(--line-2);
  box-shadow:0 1px 2px rgba(22,24,28,.05), 0 8px 18px -14px rgba(22,24,28,.22);
  transition:transform .4s var(--e), box-shadow .4s var(--e), border-color .4s var(--e);
}
.tick__i:hover{
  transform:translateY(-3px);
  border-color:rgba(122,31,46,.3);
  box-shadow:0 1px 2px rgba(22,24,28,.05), 0 20px 32px -18px rgba(122,31,46,.45);
}
.tick__i svg{
  width:1.1rem; height:1.1rem; flex:none; padding:.4rem; box-sizing:content-box;
  border-radius:50%; background:rgba(122,31,46,.08);
  fill:none; stroke:var(--deep); stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
  transition:background .4s var(--e);
}
.tick__i:hover svg{ background:rgba(122,31,46,.14); }
.tick__i b{
  font-family:var(--f-b); font-weight:500; font-size:.73rem;
  letter-spacing:.15em; text-transform:uppercase; color:var(--ink-2);
}
@keyframes tk{ to{ transform:translateX(-50%); } }

/* ---------- intro ---------- */
.intro{ padding-block:var(--sy); }
.intro__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(2rem,6vw,6rem); }
.intro__stick{ position:sticky; top:clamp(6rem,14vh,9rem); align-self:start; }
.intro__row{
  position:relative; display:grid; grid-template-columns:auto 1fr; align-items:baseline;
  gap:1.6rem; padding:1.9rem 0; border-top:1px solid var(--line);
}
.intro__row:first-child{ border-top:0; padding-top:0; }
.intro__row:not(:first-child)::before{
  content:''; position:absolute; top:-1px; left:0; right:0; height:1px;
  background:var(--deep); transform:scaleX(0); transform-origin:left center;
  transition:transform .5s var(--e);
}
.intro__row:hover::before{ transform:scaleX(1); }
.intro__n{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.5rem; height:2.5rem; border-radius:50%; flex:none;
  border:1px solid var(--line); background:var(--paper-3);
  font-family:var(--f-d); font-style:italic; color:var(--deep); font-size:1.05rem;
  transition:background .5s var(--e), border-color .5s var(--e), color .5s var(--e), transform .5s var(--e);
}
.intro__row:hover .intro__n{ background:var(--deep); border-color:var(--deep); color:#fff; transform:scale(1.06); }
.intro__row p{ margin:0; color:var(--ink-2); font-size:clamp(1rem,.5vw + .9rem,1.12rem); }
@media (max-width:900px){
  .intro__grid{ grid-template-columns:1fr; }
  .intro__stick{ position:static; }
}

/* ---------- horizontal specialities ----------
   A sticky rail: the section is tall, the panel inside it is pinned, and
   the card track is pulled sideways by scroll (main2.js). The card the
   counter is pointing at is raised out of the row so the eye always has
   one subject; the rest sit back on the paper. */
.hsec{ height:360vh; background:var(--paper-2); }
.hsec__stick{ position:sticky; top:0; height:100svh; display:flex; flex-direction:column; justify-content:center; gap:clamp(1.5rem,4vh,3rem); overflow:hidden; }
.hsec__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; }
.hsec__meter{ flex:none; width:clamp(150px,16vw,230px); }
.hsec__hint{ margin:0 0 .7rem; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mute); white-space:nowrap; text-align:right; }
.hsec__hint span{ font-family:var(--f-d); font-size:1rem; color:var(--deep); }
/* the hairline under the counter fills as the rail travels */
.hsec__bar{ display:block; height:2px; background:var(--line); border-radius:2px; overflow:hidden; }
.hsec__bar i{
  display:block; height:100%; background:var(--deep); border-radius:2px;
  transform:scaleX(0); transform-origin:left center; will-change:transform;
}
[dir="rtl"] .hsec__hint{ text-align:left; }
[dir="rtl"] .hsec__bar i{ transform-origin:right center; }

/* padding gives the raised card room to breathe; the negative margin keeps
   the row optically where it was. The mask dissolves both ends of the rail
   so the cards run off the page instead of being sliced by it. */
.hsec__viewport{
  overflow:hidden; padding-block:clamp(1rem,2.4vh,2rem); margin-block:clamp(-2rem,-2.4vh,-1rem);
  touch-action:pan-y;   /* the page keeps vertical; main2.js takes sideways */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
}
/* the rail can be dragged, so it says so under a fine pointer */
@media (hover:hover) and (pointer:fine){
  .hsec__viewport{ cursor:grab; }
  body.hz-drag .hsec__viewport{ cursor:grabbing; }
}
body.hz-drag{ user-select:none; -webkit-user-select:none; }
.hsec__track{
  display:flex; align-items:stretch; gap:clamp(1rem,1.6vw,1.5rem);
  padding-inline:var(--pad); width:max-content;
  will-change:transform;
}
.hcard{
  position:relative; overflow:hidden;
  width:clamp(280px,30vw,420px); padding:clamp(1.6rem,2.4vw,2.2rem);
  background:var(--paper-3); border:1px solid var(--line-2); border-radius:4px;
  display:flex; flex-direction:column;
  transition:transform .6s var(--e), box-shadow .6s var(--e), border-color .45s, background-color .45s;
}
/* the ghost numeral: brand-red, huge, clipped by the card's own corner */
.hcard::after{
  content:attr(data-n); position:absolute; inset:auto -.5rem -3.4rem auto;
  font-family:var(--f-d); font-size:8.5rem; line-height:1; font-style:italic;
  color:var(--deep); opacity:0; transform:translateY(.3em);
  transition:opacity .6s var(--e), transform .6s var(--e); pointer-events:none;
}
.hcard__top{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.hcard__ico{
  width:2.6rem; height:2.6rem; flex:none; display:grid; place-items:center;
  border-radius:50%; background:var(--paper-2); border:1px solid var(--line-2);
  transition:background-color .45s var(--e), border-color .45s, transform .6s var(--e);
}
.hcard__ico svg{
  width:1.25rem; height:1.25rem;
  fill:none; stroke:var(--deep); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
  transition:stroke .45s;
}
.hcard__n{ font-family:var(--f-d); font-size:.9rem; letter-spacing:.06em; color:var(--mute); }
.hcard__rule{ display:block; height:1px; background:var(--line-2); margin:clamp(1.4rem,2.6vw,2rem) 0 clamp(1.1rem,2vw,1.5rem); overflow:hidden; }
.hcard__rule i{
  display:block; height:100%; background:var(--deep);
  transform:scaleX(0); transform-origin:left center; transition:transform .7s var(--e);
}
[dir="rtl"] .hcard__rule i{ transform-origin:right center; }
.hcard h3{ font-size:clamp(1.25rem,1.9vw,1.6rem); margin-bottom:.8rem; position:relative; z-index:1; }
.hcard p{ color:var(--mute); font-size:.95rem; margin-bottom:1.4rem; position:relative; z-index:1; }
.hcard ul{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:auto; position:relative; z-index:1; }
.hcard li{
  font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--mute);
  border:1px solid var(--line); border-radius:100px; padding:.32rem .7rem;
  transition:color .4s, border-color .4s, background-color .4s;
}

/* the card the counter is on, and any card under the pointer */
.hcard.is-on,
.hcard:hover{
  background:#fff; border-color:rgba(229,33,50,.28);
  transform:translateY(-10px);
  box-shadow:0 2px 4px rgba(22,24,28,.04), 0 30px 60px -32px rgba(88,16,28,.42);
}
.hcard.is-on::after,
.hcard:hover::after{ opacity:.08; transform:translateY(0); }
.hcard.is-on .hcard__rule i,
.hcard:hover .hcard__rule i{ transform:scaleX(1); }
.hcard.is-on .hcard__ico,
.hcard:hover .hcard__ico{ background:var(--deep); border-color:var(--deep); transform:rotate(-6deg); }
.hcard.is-on .hcard__ico svg,
.hcard:hover .hcard__ico svg{ stroke:#fff; }
.hcard.is-on .hcard__n,
.hcard:hover .hcard__n{ color:var(--deep); }
.hcard.is-on li,
.hcard:hover li{ border-color:rgba(22,24,28,.2); color:var(--ink-2); background:rgba(22,24,28,.02); }

@media (prefers-reduced-motion: reduce){
  .hcard,.hcard.is-on,.hcard:hover{ transform:none; }
  .hcard__ico,.hcard.is-on .hcard__ico,.hcard:hover .hcard__ico{ transform:none; }
}

@media (max-width:900px){
  .hsec{ height:auto; padding-block:var(--sy); }
  .hsec__stick{ position:static; height:auto; }
  .hsec__viewport{ overflow:visible; margin-block:0; -webkit-mask-image:none; mask-image:none; }
  .hsec__track{ flex-direction:column; width:auto; transform:none !important; padding-inline:0; }
  .hsec__head{ padding-inline:0; }
  .hsec__stick > .wrap{ padding-inline:var(--pad); }
  .hsec__track{ margin-inline:var(--pad); }
  .hcard{ width:auto; transform:none !important; }
  .hcard__rule i{ transform:scaleX(1); }   /* no pointer to reveal it — show it */
  .hsec__meter{ display:none; }
}

/* ---------- numbers band ---------- */
.nums{ background:#7A1F2E; color:#fff; padding-block:clamp(3.5rem,8vw,6.5rem); }
.nums__list{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(1.2rem,3vw,3rem); }
.nums__list li{ padding-top:1.2rem; border-top:1px solid var(--line-inv); }
.nums__list b{ display:block; font-family:var(--f-d); font-weight:400; font-size:clamp(2.4rem,5.4vw,4.2rem); line-height:1; letter-spacing:-.03em; }
.nums__list span{ font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.72); }
@media (max-width:760px){ .nums__list{ grid-template-columns:1fr 1fr; row-gap:2rem; } }

/* ---------- accordion ---------- */
/* red is the site's rare "look here" accent — this section uses it once,
   on the live step count; every other maroon here is the deeper #7A1F2E */
.steps{ padding-block:var(--sy); position:relative; }
.steps__grid{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(2rem,6vw,6rem); align-items:start; }
.steps__note{ margin:1.4rem 0 0; color:var(--mute); max-width:26ch; }

/* reading meter under the heading */
.steps__meter{ display:flex; align-items:center; gap:1.1rem; margin-top:clamp(2rem,5vw,3.2rem); }
.steps__count{ display:flex; align-items:baseline; gap:.28rem; font-family:var(--f-d); line-height:1; }
.steps__count b{ font-size:1.6rem; font-weight:500; color:var(--mar); font-variant-numeric:tabular-nums; }
.steps__count i{ font-style:normal; font-size:1rem; color:var(--line); }
.steps__count s{ text-decoration:none; font-size:1rem; color:var(--mute); }
.steps__bar{ position:relative; flex:1; max-width:190px; height:1.5px; background:var(--line); overflow:hidden; }
.steps__bar em{
  position:absolute; inset:0 auto 0 0; width:25%; background:var(--deep);
  transform-origin:left center; transition:width .6s var(--e);
}

/* rows ------------------------------------------------------ */
.acc{ --num:clamp(1.9rem,2.6vw,2.4rem); }
.acc__i{ position:relative; border-top:1px solid var(--line); transition:border-color .4s var(--e); }
.acc__i:last-child{ border-bottom:1px solid var(--line); }

/* maroon rule that draws across the top edge of the open row */
.acc__i::after{
  content:''; position:absolute; z-index:1; height:1.5px;
  inset:-1px 0 auto 0;
  background:var(--deep); transform:scaleX(0); transform-origin:left center;
  transition:transform .6s var(--e); pointer-events:none;
}
.acc__i.is-open::after{ transform:scaleX(1); }

.acc__i button{
  position:relative; z-index:1;
  width:100%; display:grid; grid-template-columns:var(--num) 1fr auto; align-items:center; gap:clamp(.9rem,1.6vw,1.4rem);
  padding:clamp(1.5rem,2.4vw,1.9rem) 0; text-align:left;
}
.acc__i em{
  font-style:normal; font-family:var(--f-d); font-size:.95rem; color:var(--mute);
  transition:color .4s var(--e), transform .5s var(--e);
}
.acc__i:hover em{ color:var(--mar-lt); }
.acc__i.is-open em{ color:var(--deep); }
.acc__i span{
  font-family:var(--f-d); font-size:clamp(1.1rem,2vw,1.6rem); font-weight:500; letter-spacing:-.015em;
  transition:color .35s var(--e), transform .5s var(--e);
}
.acc__i button:hover span{ color:var(--deep); }
.acc__i:hover span,.acc__i.is-open span{ transform:translateX(.35rem); }

/* marker: hairline ring that fills maroon on open, plus folding to minus */
.acc__i i{
  position:relative; width:clamp(2.1rem,3vw,2.6rem); aspect-ratio:1; flex:none; border-radius:50%;
  border:1px solid var(--line); display:grid; place-items:center;
  transition:background .45s var(--e), border-color .45s var(--e), transform .5s var(--e);
}
.acc__i:hover i{ border-color:var(--mar-lt); transform:scale(1.07); }
.acc__i.is-open i{ background:var(--deep); border-color:var(--deep); transform:rotate(180deg); }
.acc__i i::before,.acc__i i::after{
  content:''; position:absolute; left:50%; top:50%; width:38%; height:1.4px;
  margin:-.7px 0 0 -19%; background:var(--ink);
  transition:transform .45s var(--e), background .45s var(--e);
}
.acc__i i::after{ transform:rotate(90deg); }
.acc__i.is-open i::before,.acc__i.is-open i::after{ background:#fff; }
.acc__i.is-open i::after{ transform:rotate(0); }

/* panel ------------------------------------------------------ */
.acc__p{ position:relative; z-index:1; overflow:hidden; height:0; transition:height .55s var(--e); }
.acc__p p{
  margin:0 0 clamp(1.6rem,2.4vw,2.1rem); padding-inline:calc(var(--num) + clamp(.9rem,1.6vw,1.4rem)) 2rem;
  color:var(--mute); max-width:52ch; font-size:clamp(1rem,.5vw + .9rem,1.1rem);
  opacity:0; transform:translateY(.7rem);
  transition:opacity .5s var(--e) .08s, transform .6s var(--e) .08s;
}
.acc__i.is-open .acc__p p{ opacity:1; transform:none; }

@media (max-width:900px){
  .steps__grid{ grid-template-columns:1fr; }
  .steps__meter{ margin-top:2rem; }
}
@media (min-width:901px){
  /* the left column holds its ground while the reader works the list */
  .steps__aside{ position:sticky; top:clamp(6rem,14vh,9rem); }
}
@media (prefers-reduced-motion: reduce){
  .acc__i span,.acc__i i,.acc__i em{ transition:color .2s linear; transform:none !important; }
  .acc__p p{ opacity:1; transform:none; transition:none; }
  .acc__i::after{ transition:none; }
}

/* ---------- selected work ---------- */
.sel{ padding-block:var(--sy); background:var(--paper-2); }
.sel__head{ margin-bottom:clamp(2.5rem,6vw,4.5rem); }
.sel__rows{ display:grid; gap:clamp(2.5rem,6vw,5.5rem); counter-reset:srow; }
/* top-aligned, not centred: the text column's rule lines up with the top
   edge of the plate, so a tall image leaves its slack at the bottom of the
   column instead of floating the copy in the middle of a void */
.srow{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(1.5rem,4vw,4rem); align-items:start; counter-increment:srow; }
.srow--flip .srow__fig{ order:2; }
.srow__fig{ margin:0; overflow:hidden; border-radius:3px; aspect-ratio:16/10; position:relative; }
.srow--por .srow__fig{ aspect-ratio:4/5; }     /* the seat is drawn portrait */
.srow--wide .srow__fig{ aspect-ratio:16/6; }   /* the 4×4 is drawn letterbox */
.srow--por{ grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); }
.srow__img{
  position:absolute; inset:-5% 0; background-size:cover; background-position:center;
  transition:transform 1.3s var(--e);
}
.srow__fig:hover .srow__img{ transform:scale(1.04); }
/* a crisp inner edge and a floor shadow so each plate reads as a framed
   print rather than a flat rectangle dropped on the page */
.srow__fig::after{
  content:''; position:absolute; inset:0; pointer-events:none; border-radius:3px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),
             inset 0 -70px 90px -70px rgba(0,0,0,.55);
}
/* the text column was a small island beside a tall image — the numeral and
   rule give it a top edge and enough weight to hold its half of the row */
.srow__txt{ border-top:1px solid var(--line); padding-top:1.5rem; }
.srow__txt::before{
  content:counter(srow,decimal-leading-zero);
  display:block; font-family:var(--f-d); font-style:italic; color:var(--deep);
  font-size:clamp(2.2rem,4.6vw,3.6rem); line-height:1; margin-bottom:.9rem;
}
.srow__txt h3{ font-size:clamp(1.4rem,2.6vw,2.1rem); margin:.4rem 0 .8rem; }
.srow__txt p:last-child{ margin:0; color:var(--mute); max-width:40ch; }
@media (max-width:820px){
  .srow,.srow--por{ grid-template-columns:1fr; }
  .srow--flip .srow__fig{ order:0; }
  .srow--por .srow__fig{ aspect-ratio:4/5; }
  .srow--wide .srow__fig{ aspect-ratio:16/7; }
}

.sel__band{ margin-top:clamp(2.5rem,6vw,5rem); }
.sband{ margin:0; }
.sband__img{ display:block; aspect-ratio:16/5; border-radius:3px; background-size:cover; background-position:center; }
.sband figcaption{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; flex-wrap:wrap; padding-top:.9rem; }
.sband figcaption b{ font-family:var(--f-d); font-weight:500; font-size:clamp(1.05rem,1.8vw,1.4rem); }
.sband figcaption span{ font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); }
@media (max-width:620px){ .sband__img{ aspect-ratio:16/8; } }

/* ---------- branches ---------- */
.brs{ padding-block:var(--sy); }
.brs__head{ margin-bottom:clamp(2.5rem,6vw,4rem); }
/* one branch now, so the card takes the full container instead of sitting
   in a 640px column with dead space either side */
.brs__grid{ display:grid; grid-template-columns:1fr; gap:clamp(1.3rem,3vw,2.2rem); }

.br{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  background:var(--paper-3); border:1px solid var(--line-2); border-radius:3px; overflow:hidden;
  transition:transform .55s var(--e), box-shadow .55s var(--e);
}
.br:hover{ transform:translateY(-5px); box-shadow:0 34px 64px -48px rgba(22,24,28,.4); }

/* A dark diagram, not a fake screenshot of a map: same ink plate as the work
   photos and the video band, with the road laid in brand red. Reads as a
   deliberate locator rather than a map that failed to load. */
.br__map{
  position:relative; min-height:clamp(260px,32vw,360px); overflow:hidden;
  background:
    radial-gradient(130% 95% at 28% 82%, rgba(229,33,50,.3), transparent 60%),
    var(--ink);
}
.br__road{
  position:absolute; left:-25%; right:-25%; top:52%;
  height:14px; background:var(--deep); opacity:.85;
  transform:rotate(-27deg); transform-origin:center;
  box-shadow:0 0 34px rgba(229,33,50,.45);
}
.br__road--x{
  top:38%; height:5px; background:rgba(255,255,255,.34);
  transform:rotate(58deg); box-shadow:none; opacity:1;
}
/* road name in the corner, shop name against the marker itself */
.br__maplbl{
  position:absolute; left:1.4rem; bottom:1.3rem; z-index:2;
  font-family:var(--f-b); font-size:.64rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:#fff;
  text-shadow:0 1px 8px rgba(0,0,0,.65);
  white-space:nowrap; pointer-events:none;
}
.br__pinlbl{
  position:absolute; left:50%; top:52%; z-index:2;
  transform:translate(-50%,34px);
  font-family:var(--f-d); font-size:.95rem; font-weight:600;
  letter-spacing:.01em; color:#fff;
  text-shadow:0 1px 10px rgba(0,0,0,.8);
  white-space:nowrap; pointer-events:none;
}
/* the marker is the shop itself, not an abstract dot */
.br__pin{
  position:absolute; left:50%; top:52%; z-index:2;
  width:44px; height:44px; margin:-22px 0 0 -22px;
  display:grid; place-items:center; border-radius:50%;
  background:#fff; box-shadow:0 10px 24px -10px rgba(0,0,0,.65);
}
.br__pin svg{
  width:21px; height:21px; fill:none; stroke:var(--deep);
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}
/* pulse lives on a ring so it never fights the marker's drop shadow */
.br__pin::after{
  content:''; position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--deep); animation:brPin 2.4s var(--e2) infinite;
}
@media (prefers-reduced-motion: reduce){ .br__pin::after{ animation:none; opacity:.5; } }
@keyframes brPin{
  0%  { transform:scale(1);   opacity:.7; }
  100%{ transform:scale(2.1); opacity:0; }
}

.br__body{ padding:clamp(1.6rem,3vw,2.6rem); }
.br__tag{ font-family:var(--f-b); font-size:.7rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--deep); margin:0 0 .8rem; }
.br h3{ font-size:clamp(1.4rem,2.3vw,1.9rem); margin-bottom:.7rem; }
.br h3 em{ font-style:italic; color:var(--mute); }
.br address{ color:var(--mute); font-size:.95rem; margin-bottom:1.2rem; }
.br__meta{ display:flex; gap:clamp(1.4rem,3vw,2.6rem); flex-wrap:wrap; margin:0 0 1.3rem; padding-top:1.1rem; border-top:1px solid var(--line-2); }
.br__meta dt{ font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); margin-bottom:.25rem; }
.br__meta dd{ margin:0; font-family:var(--f-d); font-weight:500; font-size:clamp(1rem,1.5vw,1.25rem); }
/* what you can actually get done at this branch */
.br__tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin:0 0 1.5rem; }
.br__tags li{
  padding:.34rem .7rem; border:1px solid var(--line-2); border-radius:100px;
  background:#fff; font-size:.64rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--mute);
}
.br__act{ display:flex; align-items:center; gap:.9rem; flex-wrap:wrap; }

@media (max-width:760px){ .br{ grid-template-columns:1fr; } }
@media (max-width:560px){ .br__map{ min-height:200px; } }

/* ---------- quote ---------- */
.quo{ padding-block:clamp(3.5rem,8vw,7rem); background:var(--paper-2); text-align:center; }
.quo__mark{ font-family:var(--f-d); font-size:clamp(4rem,10vw,7rem); line-height:.6; color:var(--deep); opacity:.28; }
.quo__track{ display:grid; max-width:60ch; margin:1.5rem auto 0; }
.quo__i{ grid-area:1/1; margin:0; opacity:0; transform:translateY(14px); pointer-events:none; transition:opacity .6s var(--e), transform .6s var(--e); }
.quo__i.is-on{ opacity:1; transform:none; pointer-events:auto; }
.quo__i p{ font-family:var(--f-d); font-weight:400; font-size:clamp(1.2rem,2.6vw,1.9rem); line-height:1.4; letter-spacing:-.015em; margin:0 0 1.6rem; }
.quo__i footer b{ display:block; font-family:var(--f-d); font-weight:500; }
.quo__i footer span{ font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--mute); }
.quo__dots{ display:flex; justify-content:center; gap:.5rem; margin-top:2rem; }
.quo__dots button{ width:22px; height:2px; background:var(--line); transition:background .3s, width .4s var(--e); }
.quo__dots button.is-on{ background:var(--deep); width:40px; }

/* ---------- enquire ---------- */
.enq{ padding-block:var(--sy); }
.enq__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2.5rem,6vw,5rem); align-items:start; }
.enq__lead{ color:var(--mute); max-width:40ch; margin:1.4rem 0 2rem; font-size:clamp(1rem,.5vw + .9rem,1.12rem); }
.callp{
  background:var(--paper-3); border:1px solid var(--line-2); border-radius:3px;
  padding:clamp(1.2rem,2.4vw,1.8rem);
}
.callp__lbl{
  margin:0 0 .4rem; font-size:.68rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--mute);
}
.callp__row{
  display:grid; grid-template-columns:1fr auto auto; align-items:center;
  gap:.5rem 1rem; padding:1.05rem .2rem; border-bottom:1px solid var(--line-2);
  transition:padding-inline .35s var(--e), color .3s;
}
.callp__row:hover{ padding-inline:.55rem .2rem; color:var(--deep); }
.callp__k{ font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mute); }
.callp__v{ font-family:var(--f-d); font-weight:500; font-size:clamp(1rem,1.5vw,1.2rem); white-space:nowrap; }
.callp__row svg{
  width:1.05rem; height:1.05rem; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; color:var(--mute);
  transition:transform .4s var(--e), color .3s;
}
.callp__row:hover svg{ transform:translateX(4px); color:var(--deep); }
/* the office line is the one we want tapped first */
.callp__row--pri{
  margin-bottom:.2rem; padding:1.15rem 1.1rem; border-bottom:0; border-radius:2px;
  background:var(--ink); color:#fff;
}
.callp__row--pri .callp__k{ color:rgba(255,255,255,.6); }
.callp__row--pri svg{ color:#fff; fill:currentColor; stroke:none; }
.callp__row--pri:hover{ background:var(--mar); color:#fff; padding-inline:1.1rem; }
.callp__row--pri:hover svg{ color:#fff; transform:none; }
.callp__note{
  display:flex; align-items:center; gap:.6rem; margin:1.1rem 0 0;
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--mute);
}
@media (max-width:420px){
  .callp__row{ grid-template-columns:1fr auto; }
  .callp__k{ grid-column:1 / -1; }
}
@media (max-width:940px){ .enq__grid{ grid-template-columns:1fr; } }

/* ---------- footer ---------- */
.foot{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--ink); color:#EDEAE7;
  padding-top:clamp(3.2rem,7vw,5.5rem);
  padding-bottom:clamp(3.2rem,7vw,6rem);   /* room the sunken wordmark sits in */
}
/* maroon hairline that hands the page over from paper to ink */
.foot__rule{
  position:absolute; inset-inline:0; top:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(229,33,50,.85) 22%,rgba(229,33,50,.85) 78%,transparent);
}
/* one soft warm light behind the brand block, nothing more */
.foot__glow{
  position:absolute; z-index:-1; inset-inline-start:-10%; top:-26%;
  width:min(620px,56%); aspect-ratio:1;
  background:radial-gradient(circle at 32% 34%,rgba(229,33,50,.10),transparent 66%);
  pointer-events:none;
}

.foot__top{
  display:grid; grid-template-columns:minmax(0,1.35fr) repeat(3,minmax(0,.88fr));
  gap:clamp(1.8rem,4vw,3.4rem); padding-bottom:clamp(2.4rem,5vw,3.6rem);
}

@media (min-width:901px){
  .foot__top > * + *{
    border-inline-start:1px solid rgba(255,255,255,.07);
    padding-inline-start:clamp(1.4rem,2.4vw,2.4rem);
  }
}

.foot__brand img{ height:88px; width:auto; filter:brightness(0) invert(1); }
.foot__note{ margin:1.4rem 0 0; max-width:34ch; font-size:.86rem; line-height:1.75; color:rgba(255,255,255,.55); }
.foot__chip{
  display:inline-flex; align-items:center; gap:.6rem; margin:1.5rem 0 0;
  padding:.5rem .95rem; border:1px solid var(--line-inv); border-radius:999px;
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.72);
}

/* column headings get their own rule, so each bay reads as a bay */
.foot__col{ display:grid; align-content:start; gap:.9rem; }
.foot__col h4{
  display:flex; align-items:center; gap:.6rem; margin:0 0 1.1rem;
  font-family:var(--f-b); font-size:.68rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.5);
}
.foot__col h4::after{ content:''; flex:1; height:1px; background:var(--line-inv); }

/* link columns — underline sweeps in from the start edge */
.foot__col a{
  width:fit-content; font-size:.9rem; color:rgba(255,255,255,.68);
  background-image:linear-gradient(var(--deep),var(--deep));
  background-repeat:no-repeat; background-position:0 100%; background-size:0 1px;
  transition:color .3s, background-size .45s var(--e);
}
.foot__col a:hover{ color:#fff; background-size:100% 1px; }

/* contact — labelled rows, so three numbers stop reading as a list of digits */
.foot__col--con{ gap:0; }
.foot__row{
  display:grid; gap:.05rem; padding:.5rem 0;
  border-top:1px solid rgba(255,255,255,.08);
  background-image:none !important;   /* not a sweep-underline link */
  transition:padding-inline .35s var(--e);
}
.foot__col--con .foot__row,
.foot__col--con .foot__addr{ width:100%; }
.foot__row:hover{ padding-inline-start:.5rem; }
.foot__row:first-of-type{ border-top:0; padding-top:0; }
.foot__row .foot__k{ font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.42); transition:color .3s; }
.foot__row .foot__v{ font-family:var(--f-d); font-weight:500; font-size:1.02rem; letter-spacing:-.01em; white-space:nowrap; transition:color .3s; }
.foot__row:hover .foot__v{ color:var(--deep); }
.foot__row:hover .foot__k{ color:rgba(255,255,255,.6); }

.foot__addr{
  display:flex; align-items:flex-start; gap:.5rem;
  margin-top:.9rem; padding-top:.9rem; border-top:1px solid rgba(255,255,255,.08);
  font-size:.85rem; line-height:1.5; color:rgba(255,255,255,.6);
  background-image:none !important; transition:color .3s;
}
.foot__addr svg{ width:1rem; height:1rem; margin-top:.15rem; flex:none; fill:none; stroke:var(--deep); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.foot__addr:hover{ color:#fff; }

/* ---- bottom bar ---- */
.foot__bar{
  position:relative; z-index:1;
  display:flex; justify-content:space-between; align-items:center;
  gap:1rem 1.5rem; flex-wrap:wrap;
  padding:1.4rem 0 0; border-top:1px solid var(--line-inv);
}
.foot__bar p{ margin:0; font-size:.8rem; color:rgba(255,255,255,.5); }
.foot__up{
  display:inline-flex; align-items:center; gap:.75rem;
  font-size:.72rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.72); transition:color .3s;
}
.foot__up:hover{ color:#fff; }
.foot__up-ring{
  display:grid; place-items:center; width:2.3rem; height:2.3rem; border-radius:50%;
  border:1px solid var(--line-inv); transition:border-color .35s, background .35s;
}
.foot__up-ring svg{ width:1rem; height:1rem; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:transform .4s var(--e); }
.foot__up:hover .foot__up-ring{ background:var(--deep); border-color:var(--deep); }
.foot__up:hover .foot__up-ring svg{ transform:translateY(-3px); }

/* oversized wordmark, half-sunk below the bottom edge — signature, not shouting */
.foot__mark{
  position:absolute; inset-inline:0; bottom:0; z-index:-1; margin:0;
  font-family:var(--f-d); font-style:italic; font-weight:500;
  font-size:clamp(3.6rem,13vw,11rem); line-height:1; letter-spacing:-.035em;
  text-align:center; white-space:nowrap; user-select:none; pointer-events:none;
  color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.12);
  transform:translateY(34%);
}

@media (max-width:900px){
  .foot__top{ grid-template-columns:1fr 1fr; }
  .foot__brand{ grid-column:1 / -1; }
  .foot__note{ max-width:52ch; }
  /* contact runs the full width in two files, rather than leaving a void
     beside the Company list */
  .foot__col--con{ grid-column:1 / -1; grid-template-columns:1fr 1fr; column-gap:clamp(1.5rem,4vw,3rem); }
  .foot__col--con h4,.foot__col--con .foot__addr{ grid-column:1 / -1; }
  .foot__row:nth-of-type(-n+2){ border-top:0; padding-top:0; }
}
@media (max-width:560px){
  .foot__top{ grid-template-columns:1fr; }
  .foot__col--con{ grid-template-columns:1fr; }
  .foot__row:nth-of-type(2){ border-top:1px solid rgba(255,255,255,.08); padding-top:.5rem; }
  .foot{ padding-bottom:6.5rem; }             /* clear of the call button */
  .foot__mark{ font-size:clamp(3.4rem,22vw,7rem); }
}

/* ---------- floats ---------- */
.callfab{
  position:fixed; right:clamp(1rem,2.4vw,2rem); bottom:clamp(1rem,2.4vw,2rem); z-index:650;
  width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  background:var(--mar); color:#fff; box-shadow:0 14px 30px -14px rgba(229,33,50,.7);
  transform:translateY(80px); opacity:0;
  transition:transform .55s var(--e), opacity .4s, background .3s;
}
.callfab::before{
  content:''; position:absolute; inset:0; border-radius:50%;
  border:1.5px solid var(--mar); animation:callPulse 2.6s var(--e2) infinite;
}
body.far .callfab{ transform:none; opacity:1; }
.callfab:hover{ background:var(--ink); }
.callfab:hover::before{ border-color:var(--ink); }
.callfab svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
@keyframes callPulse{
  0%  { transform:scale(1);   opacity:.65; }
  100%{ transform:scale(1.55); opacity:0; }
}
@media (prefers-reduced-motion: reduce){ .callfab::before{ animation:none; } }

.swap{
  position:fixed; left:clamp(1rem,2.4vw,2rem); bottom:clamp(1rem,2.4vw,2rem); z-index:650;
  display:flex; align-items:center; gap:.4rem; padding:.3rem .4rem .3rem .7rem;
  background:rgba(255,255,255,.92); border:1px solid var(--line);
  border-radius:100px; backdrop-filter:blur(10px);
  font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mute);
}
.swap a{
  display:grid; place-items:center; width:23px; height:23px; border-radius:50%;
  font-size:.66rem; letter-spacing:0; color:var(--ink-2); transition:.3s;
}
.swap a:hover{ background:var(--paper-2); }
.swap a.is-on{ background:var(--deep); color:#fff; }

/* ---------- reveal ---------- */
[data-rise]{ opacity:0; transform:translateY(24px); transition:opacity .85s var(--e), transform .85s var(--e); transition-delay:var(--d,0ms); }
[data-rise].in{ opacity:1; transform:none; }

[data-mask] span{ display:block; overflow:hidden; padding-bottom:.18em; margin-bottom:-.18em; }
[data-mask] span > i{ display:block; font-style:inherit; transform:translateY(105%); transition:transform 1s var(--e); }
[data-mask].in span > i{ transform:none; }
[data-mask] span:nth-child(2) > i{ transition-delay:.09s; }
[data-mask] span:nth-child(3) > i{ transition-delay:.18s; }
[data-mask] span:nth-child(4) > i{ transition-delay:.27s; }

/* Work images wipe open as their row arrives. Driven off the PARENT's .in
   rather than observing the image itself: Chromium reports a clip-path
   collapsed element as not intersecting, so an observed target would never
   receive the class that opens it. */
.srow__fig,.sband__img{ clip-path:inset(0 0 100% 0); transition:clip-path 1.15s var(--e) .1s; }
.srow.in .srow__fig,.sband.in .sband__img{ clip-path:inset(0 0 0 0); }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  [data-rise]{ opacity:1; transform:none; }
  [data-mask] span > i{ transform:none; }
  .srow__fig,.sband__img{ clip-path:none; }
  .tick__t{ animation:none; }
}