@charset "utf-8";
/* =============================================================================
   LIFELENS | لايف لينس — Design System
   Arabic RTL · Dark + Gold · 2026 refresh
   -----------------------------------------------------------------------------
   Reconciled with assets/styles.incoming-2026.css (kept alongside for reference):
   its darker base + footer, larger icon band (22–28px), fluid section padding
   and hover language are adopted here against the class names this markup
   actually uses. Its logo rule (max-height 35–45px) is deliberately NOT applied:
   the wordmark is 1282×92 (13.93:1), so 45px tall renders 627px wide.
   -----------------------------------------------------------------------------
   1. Tokens        6. Heroes          11. Steps          16. Lightbox
   2. Base          7. Section rhythm  12. Marquee/reviews 17. Motion
   3. Layout        8. Cards           13. Forms          18. Responsive
   4. Buttons       9. Tabs/galleries  14. FAQ/CTA/nav
   5. Header       10. Packages        15. Footer
   ============================================================================= */

/* ---------------------------------------------------------------- 1. TOKENS */
:root{
  /* Brand */
  --gold:#d3b24c;
  --gold-soft:#e5c96f;
  --gold-bright:#f1dc8b;
  --gold-deep:#bea03c;

  /* Surfaces */
  --bg:#06090e;
  --bg-2:#0b1118;
  --surface-1:rgba(255,255,255,.035);
  --surface-2:rgba(255,255,255,.055);
  --surface-3:rgba(255,255,255,.08);
  --stroke:rgba(255,255,255,.09);
  --stroke-strong:rgba(255,255,255,.14);
  --stroke-gold:rgba(211,178,76,.28);

  /* Text */
  --text:#eef2f7;
  --text-2:#c3cddb;
  --muted:#9fabbb;

  /* Type scale — approved hierarchy (README / QA-REPORT) */
  --fs-eyebrow:15px;
  --fs-body:17px;
  --fs-body-sm:16px;
  --fs-small:14px;
  --fs-card-title:20px;
  --fs-section-title:clamp(30px,2.45vw,40px);
  --fs-page-title:clamp(36px,3.15vw,50px);
  --fs-home-title:clamp(42px,4vw,58px);

  /* Icon scale — 22–28px working band */
  --icon-xs:18px;
  --icon-sm:20px;
  --icon-md:22px;
  --icon-lg:26px;
  --icon-xl:28px;
  --tile-sm:42px;
  --tile-md:50px;

  /* Spacing scale */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:40px;
  --sp-9:48px; --sp-10:64px;
  --section-y:clamp(60px,6.2vw,92px);
  --gap-grid:20px;

  /* Shape */
  --r-sm:12px; --r-md:16px; --r-lg:20px; --r-xl:26px; --r-pill:999px;
  --container:1200px;
  --header-h:78px;

  /* Elevation */
  --shadow-sm:0 2px 8px rgba(0,0,0,.24);
  --shadow-md:0 12px 32px rgba(0,0,0,.3);
  --shadow-lg:0 24px 60px rgba(0,0,0,.38);
  --glow-gold:0 12px 34px rgba(211,178,76,.22);

  /* Motion */
  --ease:cubic-bezier(.25,.8,.25,1);
  --t-fast:.18s var(--ease);
  --t:.3s var(--ease);
  --t-slow:.5s var(--ease);
}

/* ------------------------------------------------------------ 2. BASE/RESET */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:"IBM Plex Sans Arabic","Noto Kufi Arabic",Tahoma,Arial,sans-serif;
  font-size:var(--fs-body);
  line-height:1.78;
  color:var(--text);
  background:var(--bg);
  background-image:
    radial-gradient(900px 520px at 92% -8%,rgba(211,178,76,.09),transparent 62%),
    radial-gradient(760px 460px at 4% 6%,rgba(37,72,124,.15),transparent 60%),
    linear-gradient(180deg,#06090e 0%,#0a1017 46%,#06090e 100%);
  background-attachment:fixed;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
img,video{max-width:100%;display:block}
button{font:inherit;color:inherit}
h1,h2,h3,h4,h5,h6,p,ul,ol,figure{margin:0}
ul{padding:0;list-style:none}
strong{font-weight:700}
::selection{background:rgba(211,178,76,.32);color:#fff}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
[id]{scroll-margin-top:calc(var(--header-h) + 24px)}

.gold{color:var(--gold)}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link:focus{
  position:fixed;top:12px;inset-inline-start:12px;width:auto;height:auto;
  margin:0;padding:12px 20px;overflow:visible;clip:auto;white-space:normal;
  background:var(--gold);color:#14181f;font-weight:700;border-radius:var(--r-md);
  z-index:9999;box-shadow:var(--shadow-lg);
}

/* ------------------------------------------------------- 3. LAYOUT PRIMITIVES */
.container{width:min(calc(100% - 40px),var(--container));margin-inline:auto}
.section{padding:var(--section-y) 0;position:relative;overflow:hidden}
/* the drawings bleed past the section edge on purpose — the section clips
   them so the page itself never gains a horizontal scroll */
.section--surface{
  background:linear-gradient(180deg,rgba(255,255,255,.022),rgba(255,255,255,.038));
  border-block:1px solid rgba(255,255,255,.05);
}
.section--tight{padding:var(--sp-8) 0 var(--sp-9)}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--sp-8);align-items:center}

/* ------------------------------------------------------ 4. BUTTONS & LINKS */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:13px 22px;border-radius:var(--r-sm);
  border:1px solid transparent;font-weight:700;font-size:16px;line-height:1.2;
  white-space:nowrap;cursor:pointer;
  transition:transform var(--t),box-shadow var(--t),background var(--t),border-color var(--t),filter var(--t);
}
.btn [data-icon]{flex:0 0 auto}
.btn [data-icon] svg{width:var(--icon-sm);height:var(--icon-sm)}
.btn--gold{
  background:linear-gradient(135deg,var(--gold-soft),var(--gold-deep));
  color:#14181f;box-shadow:var(--glow-gold);
}
.btn--gold:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(211,178,76,.34);filter:brightness(1.05)}
.btn--outline{border-color:var(--stroke-strong);background:var(--surface-1);color:var(--text)}
.btn--outline:hover{background:var(--surface-2);border-color:var(--stroke-gold);transform:translateY(-2px)}
.btn--wide{min-width:190px}

.text-link{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--gold);font-weight:700;font-size:15px;margin-top:auto;padding-top:14px;
  transition:gap var(--t);
}
.text-link [data-icon] svg{width:var(--icon-xs);height:var(--icon-xs)}
.text-link [data-icon]{transform:scaleX(-1)}   /* RTL: arrow follows the reading direction */
a:hover .text-link,.text-link:hover{gap:13px}

/* ---------------------------------------------------- 5. HEADER/NAVIGATION */
.header{
  position:sticky;top:0;z-index:60;
  background:rgba(6,9,14,.82);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,.05);
  transition:background var(--t),border-color var(--t),box-shadow var(--t);
}
.header.is-stuck{background:rgba(5,8,12,.95);box-shadow:0 8px 30px rgba(0,0,0,.4)}

/* ---- the WordPress toolbar vs. a sticky header --------------------------
   Only logged-in users see the toolbar, so this never reaches a visitor — but
   for anyone signed in it broke the header outright. WordPress reserves space
   for the bar with html{margin-top}, then positions the bar itself absolutely.
   An absolutely-positioned box resolves against the html border box, which
   starts *after* that margin, so the bar lands 46px lower than the strip
   reserved for it — directly on top of the sticky header, at z-index 99999.
   Measured: it covered 35px of both 44px header buttons, hiding the icons
   (an empty box is all that showed) and swallowing every tap on them.
   Pulling the bar up into the strip already reserved for it puts the two
   back in sequence. On a phone the bar scrolls away with the page, so the
   header may stick to the very top; on a desktop the bar is fixed and the
   header has to clear its 32px for good. */
@media screen and (max-width:782px){
  body.admin-bar #wpadminbar{top:-46px}
}
@media screen and (min-width:783px){
  body.admin-bar .header{top:32px}
}
.header__row{display:flex;align-items:center;gap:var(--sp-6);min-height:var(--header-h)}

/* Logo — intrinsic ratio locked, sized so a 13.93:1 wordmark stays restrained */
.logo{flex:0 0 auto;display:flex;align-items:center;line-height:0}
.logo img{
  height:18px;width:auto;max-width:none;
  aspect-ratio:1282/92;object-fit:contain;
  opacity:.97;transition:opacity var(--t);
}
.logo:hover img{opacity:1}

.nav{display:flex;align-items:center;gap:var(--sp-5);flex:1 1 auto;justify-content:center;flex-wrap:nowrap}
.nav a{
  position:relative;white-space:nowrap;font-size:16px;font-weight:500;
  color:var(--text-2);padding:6px 2px;transition:color var(--t);
}
.nav a::after{
  content:"";position:absolute;inset-inline:0;bottom:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  transform:scaleX(0);transform-origin:center;transition:transform var(--t);
}
.nav a:hover{color:var(--text)}
.nav a:hover::after{transform:scaleX(1)}
.nav a.active{color:var(--gold);font-weight:700}
.nav a.active::after{transform:scaleX(1)}

.header__actions{display:flex;align-items:center;gap:var(--sp-3);flex:0 0 auto}
.phone-mini{
  direction:ltr;padding:9px 15px;border-radius:var(--r-pill);
  background:var(--surface-1);border:1px solid var(--stroke);
  font-size:14px;font-weight:600;white-space:nowrap;
  transition:border-color var(--t),background var(--t);
}
.phone-mini:hover{border-color:var(--stroke-gold);background:var(--surface-2)}
.header__actions .btn{padding:11px 18px;font-size:15px}

.mobile-toggle{
  display:none;width:44px;height:44px;flex:0 0 auto;
  border-radius:var(--r-sm);border:1px solid var(--stroke-strong);
  background:var(--surface-1);position:relative;cursor:pointer;
  transition:background var(--t),border-color var(--t);
}
.mobile-toggle span{
  position:absolute;left:12px;right:12px;height:2px;border-radius:2px;background:#fff;
  transition:transform var(--t),opacity var(--t-fast);
}
.mobile-toggle span:nth-child(1){top:15px}
.mobile-toggle span:nth-child(2){top:21px}
.mobile-toggle span:nth-child(3){top:27px}
.mobile-toggle[aria-expanded="true"]{border-color:var(--stroke-gold);background:rgba(211,178,76,.1)}
.mobile-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.mobile-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.mobile-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.nav__mobile-extra{display:none}

/* ------------------------------------------------------------- 6. HEROES */
/* The photo is set inline on the section itself (style="background-image:…").
   It must NOT travel through a custom property: a relative url() inside a
   custom property is re-resolved against the stylesheet, giving assets/assets/… */
.hero,.page-hero{
  position:relative;overflow:hidden;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  background-color:var(--bg-2);
}
.hero::after,.page-hero::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(275deg,rgba(6,9,14,.30) 0%,rgba(6,9,14,.72) 48%,rgba(6,9,14,.93) 90%),
    linear-gradient(180deg,rgba(6,9,14,.45),transparent 32%,rgba(6,9,14,.86));
}
.hero > .container,.page-hero > .container{position:relative;z-index:1}

/* Home hero carries a photograph composed for this layout: the subject sits in
   the left third, the copy sits on the reading side. So the scrim is weighted
   the other way from the inner pages — barely there over the subject and the
   pool of light, heavy behind the headline. */
.hero{
  padding:76px 0 68px;
  /* The plate is 2554x647 (3.95:1) — wider than any hero box, so cover scales
     it by HEIGHT and only ever crops horizontally. The subject's full height is
     therefore always in frame; position-x is all that has to be steered, and
     12% keeps him on the reading-free side at every width. */
  background-position:12% center;
  min-height:clamp(440px,34vw,600px);
  display:flex;align-items:center;
}
.hero::after{
  background:
    /* across: clear over the subject, solid behind the headline */
    linear-gradient(to right,rgba(6,9,14,.10) 0%,rgba(6,9,14,.30) 34%,rgba(6,9,14,.72) 62%,rgba(6,9,14,.9) 88%),
    /* down: eased off through the pool of light so it survives */
    linear-gradient(180deg,rgba(6,9,14,.5) 0%,rgba(6,9,14,.05) 30%,rgba(6,9,14,.18) 74%,rgba(6,9,14,.62) 100%);
}

/* The same plate again, this time cut out of its background and stacked ABOVE
   the line layer. Framing must match .hero exactly (cover + the same focal
   point) so the figure lands on itself pixel for pixel — the lines then read
   as running behind him. */
.hero__subject{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:12% center;
  z-index:2;pointer-events:none;
  /* the scrim sits above the plate, so lift the figure back out of it a touch */
  filter:brightness(1.06);
}
.hero::after{z-index:3}
.hero > .container{z-index:4}
/* the drawing and the contours live between the plate and the figure */
/* A space where a comma belonged: this read as "a .page-hero inside a .hero"
   and so matched neither, leaving every inner banner with no padding of its
   own. The home banner carried on because its min-height holds it open; the
   inner ones collapsed onto their text and, on a wide display, flattened
   into a ribbon — 11:1 at 2560px. Height now scales with the viewport the
   way the home banner's does, at a calmer ratio. */
.hero,.page-hero{padding:72px 0 62px}
.page-hero{
  /* The cap only binds past about 2600px — below that the banner is taller
     than its floor anyway. Raising it keeps an ultrawide from flattening the
     banner into an 8:1 ribbon without changing a single ordinary display. */
  min-height:clamp(300px,17vw,570px);
  display:flex;align-items:center;
}
.hero__grid{display:grid;grid-template-columns:1.06fr .94fr;align-items:center;gap:var(--sp-8)}
/* No lens column: the photograph itself is the visual. The copy holds the
   right side (RTL) and leaves the left clear for the subject in frame. */
.hero__grid--solo{grid-template-columns:1fr}
/* The copy starts on the container's own edge — the same line the logo sits on
   — not pushed inward and not out at the viewport edge. */
.hero__grid--solo .hero__content{max-width:min(52%,600px);margin-inline-start:0}

.hero__kicker,.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  color:var(--gold);font-size:var(--fs-eyebrow);font-weight:700;
  letter-spacing:.02em;line-height:1.4;
}
.hero__kicker i,.eyebrow::before{
  content:"";display:inline-block;width:30px;height:1px;flex:0 0 auto;
  background:linear-gradient(90deg,transparent,var(--gold));
}
.hero__content h1{
  font-size:var(--fs-home-title);line-height:1.18;letter-spacing:-.018em;
  margin:var(--sp-3) 0 var(--sp-4);max-width:14ch;font-weight:700;
}
.page-hero h1{
  font-size:var(--fs-page-title);line-height:1.2;letter-spacing:-.014em;
  margin:var(--sp-3) 0 var(--sp-4);max-width:20ch;font-weight:700;
}
.hero__content p,.page-hero p{max-width:60ch;color:var(--text-2);font-size:var(--fs-body)}
.page-hero__content{max-width:820px}

.breadcrumbs{
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  color:var(--muted);font-size:14px;margin-bottom:var(--sp-3);
}
.breadcrumbs a{transition:color var(--t)}
.breadcrumbs a:hover{color:var(--gold)}
.breadcrumbs span:last-child{color:var(--text-2)}

.hero__actions,.cta-band__actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-6)}
.hero__meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--sp-5)}
.hero__meta span{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border:1px solid var(--stroke);border-radius:var(--r-pill);
  background:var(--surface-1);font-size:14px;color:var(--text-2);
}
.hero__meta [data-icon]{color:var(--gold)}
.hero__meta [data-icon] svg{width:var(--icon-xs);height:var(--icon-xs)}

/* Approved animated orbit — preserved, calmer proportions */
.visual-shell{
  position:relative;height:400px;display:grid;place-items:center;isolation:isolate;
  /* pointer parallax, written by app.js on desktop only */
  transform:translate3d(var(--par-x,0px),var(--par-y,0px),0);
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.visual-shell::before{
  content:"";position:absolute;inset:-10%;z-index:-1;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(6,9,14,.8),rgba(6,9,14,.42) 52%,transparent 74%);
}
/* dashed ring turning slowly behind the nodes — depth without noise */
.visual-shell::after{
  content:"";position:absolute;left:50%;top:50%;width:330px;height:330px;
  margin:-165px 0 0 -165px;border-radius:50%;
  border:1px dashed rgba(211,178,76,.16);
  animation:ringSpin 44s linear infinite;pointer-events:none;z-index:-1;
}
.visual-core{
  width:262px;height:262px;border-radius:50%;
  background:
    radial-gradient(circle at 38% 32%,rgba(211,178,76,.34),transparent 38%),
    radial-gradient(circle at center,rgba(211,178,76,.13),transparent 64%),
    rgba(255,255,255,.028);
  border:1px solid var(--stroke);
  box-shadow:0 0 0 34px rgba(255,255,255,.022),0 0 0 68px rgba(255,255,255,.014);
  animation:corePulse 7s ease-in-out infinite;
}
.orbit-node{
  position:absolute;left:50%;top:50%;
  width:64px;height:64px;border-radius:20px;
  border:1px solid rgba(241,220,139,.3);
  background:linear-gradient(150deg,rgba(24,32,44,.86),rgba(13,19,27,.82));
  display:grid;place-items:center;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:var(--shadow-md),0 0 30px rgba(211,178,76,.16),inset 0 1px 0 rgba(255,255,255,.07);
  animation-timing-function:cubic-bezier(.45,.05,.35,1);
  animation-iteration-count:infinite;
  will-change:transform;
}
.orbit-node [data-icon] svg{width:28px;height:28px;color:var(--gold-bright);filter:drop-shadow(0 0 8px rgba(241,220,139,.35))}
 /* Placed on a ring around the lens by offset, then each node drifts on its
   own path/duration so the group never reads as one mechanical movement. */
.orbit-node.n1{--tx:120px;--ty:-108px;animation-name:driftA;animation-duration:9s}
.orbit-node.n2{--tx:-118px;--ty:-104px;animation-name:driftB;animation-duration:11s}
.orbit-node.n3{--tx:-122px;--ty:106px;animation-name:driftC;animation-duration:10s}
.orbit-node.n4{--tx:116px;--ty:112px;animation-name:driftD;animation-duration:12.5s}

@keyframes driftA{
  0%,100%{transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) scale(1) rotate(0deg)}
  40%    {transform:translate(calc(-50% + var(--tx) + 5px),calc(-50% + var(--ty) - 11px)) scale(1.045) rotate(1.4deg)}
  72%    {transform:translate(calc(-50% + var(--tx) - 3px),calc(-50% + var(--ty) - 4px)) scale(1.015) rotate(-.6deg)}
}
@keyframes driftB{
  0%,100%{transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) scale(1) rotate(0deg)}
  34%    {transform:translate(calc(-50% + var(--tx) - 7px),calc(-50% + var(--ty) - 7px)) scale(1.02) rotate(-1.2deg)}
  66%    {transform:translate(calc(-50% + var(--tx) + 2px),calc(-50% + var(--ty) - 13px)) scale(1.05) rotate(.9deg)}
}
@keyframes driftC{
  0%,100%{transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) scale(1) rotate(0deg)}
  45%    {transform:translate(calc(-50% + var(--tx) - 4px),calc(-50% + var(--ty) + 10px)) scale(1.04) rotate(1.1deg)}
  78%    {transform:translate(calc(-50% + var(--tx) + 6px),calc(-50% + var(--ty) + 3px)) scale(1.01) rotate(-.8deg)}
}
@keyframes driftD{
  0%,100%{transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) scale(1) rotate(0deg)}
  38%    {transform:translate(calc(-50% + var(--tx) + 8px),calc(-50% + var(--ty) + 6px)) scale(1.03) rotate(-1deg)}
  70%    {transform:translate(calc(-50% + var(--tx) - 2px),calc(-50% + var(--ty) + 12px)) scale(1.05) rotate(.7deg)}
}
@keyframes corePulse{50%{transform:scale(1.03)}}
/* slow orbit ring adds depth behind the nodes */
@keyframes ringSpin{to{transform:rotate(360deg)}}

/* ------------------------------------------------ 7. SECTION RHYTHM/HEADINGS */
/* One heading pattern site-wide: eyebrow → H2 → supporting copy */
.section-head{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:var(--sp-2);max-width:860px;margin-bottom:var(--sp-8);
}
.section-title{
  font-size:var(--fs-section-title);line-height:1.28;letter-spacing:-.012em;
  font-weight:700;max-width:22ch;
}
.section-copy{color:var(--text-2);max-width:66ch;font-size:var(--fs-body);margin-top:var(--sp-1)}
.section-head .eyebrow{margin-bottom:var(--sp-1)}
.split .section-head,.quote-side .section-head,.form-shell .section-head{margin-bottom:0}
.section-head:last-child{margin-bottom:0}

/* -------------------------------------------------------------- 8. CARDS */
.service-grid,.feature-grid,.use-case-grid,.booking-details-grid,
.info-grid,.blog-grid,.gallery,.footer__grid{display:grid;gap:var(--gap-grid)}

.service-card,.feature-card,.booking-detail-card,.use-case-card,
.video-work-card,.gallery__item,.faq-item,.product-card,.blog-card,
.info-card,.form-shell,.quote-side,.portfolio-tile{
  /* opaque base under the sheen: a card must never let the background
     decoration show through its own copy */
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.022)),#0d1219;
  border:1px solid var(--stroke);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-md);
}

/* Icon tiles — one tile/icon ratio for the whole site */
.service-card__icon,.feature-card__icon,.info-card__icon,.use-case-card__icon{
  position:relative;
  width:var(--tile-md);height:var(--tile-md);flex:0 0 auto;
  border-radius:15px;
  background:linear-gradient(150deg,rgba(211,178,76,.18),rgba(211,178,76,.06));
  border:1px solid var(--stroke-gold);
  color:var(--gold);display:grid;place-items:center;
  transition:transform var(--t),box-shadow var(--t),background var(--t);
}
.service-card__icon svg,.feature-card__icon svg,
.info-card__icon svg,.use-case-card__icon svg{width:var(--icon-lg);height:var(--icon-lg)}

/* five services since the podcast line was added */
/* Three across, so the five services fall as 3 + 2 rather than a thin strip */
.service-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1024px){.service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.service-card{
  position:relative;overflow:hidden;display:flex;flex-direction:column;
  transition:transform var(--t),border-color var(--t),box-shadow var(--t);
}
.service-card:hover{transform:translateY(-6px);border-color:var(--stroke-gold);box-shadow:var(--shadow-lg)}
.service-card__image{
  aspect-ratio:16/10;background-size:cover;background-position:center;
  transition:transform var(--t-slow);position:relative;
}
.service-card__image::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(6,9,14,.55));
}
.service-card:hover .service-card__image{transform:scale(1.05)}
.service-card__body{padding:var(--sp-5);display:flex;flex-direction:column;align-items:center;text-align:center;flex:1}
.service-card__icon{
  position:relative;z-index:2;
  width:64px;height:64px;
  margin:-32px 0 14px;
  border-radius:50%;border:2px solid var(--gold);
  background:var(--bg);
  color:var(--gold);
  box-shadow:0 6px 18px rgba(0,0,0,.45);
}
.service-card__icon svg{width:28px;height:28px}
.service-card:hover .service-card__icon{transform:translateY(-3px) scale(1.06);box-shadow:0 10px 24px rgba(0,0,0,.5)}
.service-card h3,.feature-card h3,.blog-card h3{
  font-size:var(--fs-card-title);line-height:1.45;font-weight:700;margin-bottom:var(--sp-2);
}
.service-card p,.feature-card p,.blog-card p,.step p,.booking-detail-card li,.faq-answer p{
  color:var(--muted);font-size:var(--fs-body-sm);line-height:1.8;
}

.feature-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
/* six stages read as three and three — a 3x2 block, not four then a stray two */
.feature-grid--three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1024px){ .feature-grid--three{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:760px){ .feature-grid--three{grid-template-columns:1fr} }

.feature-card{padding:var(--sp-6);position:relative;overflow:hidden;transition:transform var(--t),border-color var(--t)}
.feature-card:hover{transform:translateY(-4px);border-color:var(--stroke-gold)}
/* Icon and heading share a row; the copy runs full width beneath both.
   Laid out on the grid rather than by reordering the markup, so the reading
   order stays icon → heading → copy for a screen reader and for the search
   crawler. `auto 1fr` lets the tile keep its fixed size and gives the heading
   whatever is left — a long title wraps beside the icon instead of shunting
   it. align-items:center keeps a one-line and a two-line title both balanced
   against the tile. */
.feature-card{
  display:grid;grid-template-columns:auto 1fr;
  column-gap:var(--sp-3);row-gap:var(--sp-2);
  align-content:start;
}
.feature-card__icon{grid-column:1;grid-row:1;margin-bottom:0;align-self:center}
.feature-card > h3{grid-column:2;grid-row:1;margin:0;align-self:center}
.feature-card > p{grid-column:1 / -1;margin:0}
/* anything else the card carries keeps the full width under the pair */
.feature-card > *:not(.feature-card__icon):not(h3){grid-column:1 / -1}

.feature-grid--line{grid-template-columns:repeat(4,minmax(0,1fr));position:relative;padding-top:var(--sp-8)}
.feature-grid--line::before{
  content:"";position:absolute;inset-inline:0;top:14px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(211,178,76,.3),transparent);
}
.feature-card--line{background:none;border:none;box-shadow:none;padding:0 var(--sp-4) 0 0;position:relative}
.feature-card--line::before{
  content:"";position:absolute;top:-33px;inset-inline-start:0;
  width:11px;height:11px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 5px rgba(211,178,76,.14);
}
.feature-card--line:hover{transform:none}
.feature-card--line .feature-card__icon{background:var(--surface-1);border-color:var(--stroke);margin-bottom:0}
.feature-grid--line .feature-card--line:hover .feature-card__icon{border-color:var(--stroke-gold);transform:translateY(-3px)}

.use-case-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.use-case-card{
  display:flex;align-items:center;gap:var(--sp-4);padding:16px 18px;
  border-radius:var(--r-lg);transition:transform var(--t),border-color var(--t);
}
.use-case-card:hover{transform:translateY(-3px);border-color:var(--stroke-gold)}
.use-case-card__icon{width:var(--tile-sm);height:var(--tile-sm);border-radius:13px}
.use-case-card__icon svg{width:var(--icon-md);height:var(--icon-md)}
.use-case-card strong{font-size:var(--fs-body-sm);font-weight:600;color:var(--text)}

.booking-details-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.booking-detail-card{padding:var(--sp-6)}
.booking-detail-card h3{
  display:flex;align-items:center;gap:10px;
  font-size:var(--fs-card-title);font-weight:700;margin-bottom:var(--sp-4);
  padding-bottom:var(--sp-4);border-bottom:1px solid var(--stroke);
}
.booking-detail-card h3 [data-icon]{
  width:36px;height:36px;flex:0 0 auto;border-radius:11px;display:grid;place-items:center;
  background:rgba(211,178,76,.14);border:1px solid var(--stroke-gold);color:var(--gold);
}
.booking-detail-card h3 [data-icon] svg{width:var(--icon-sm);height:var(--icon-sm)}
.booking-detail-card li{position:relative;padding-inline-start:26px;margin:12px 0}
.booking-detail-card li::before{
  content:"";position:absolute;inset-inline-start:0;top:11px;
  width:7px;height:7px;border-radius:50%;background:var(--gold);opacity:.8;
}
.booking-detail-card--yes li::before{box-shadow:0 0 0 4px rgba(211,178,76,.13)}

.booking-policy{
  display:flex;flex-direction:column;gap:6px;
  margin-top:var(--gap-grid);padding:18px 22px;
  border-radius:var(--r-lg);border:1px dashed var(--stroke-gold);
  background:rgba(211,178,76,.05),#0c1118;background-color:#0c1118;
}
.booking-policy strong{color:var(--gold);font-size:var(--fs-body-sm)}
.booking-policy span{color:var(--text-2);font-size:15px;line-height:1.75}

.check-list{display:grid;gap:10px;margin-top:var(--sp-6)}
.check-list span{display:flex;align-items:center;gap:10px;color:var(--text-2);font-size:var(--fs-body-sm)}
.check-list [data-icon]{
  width:26px;height:26px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  background:rgba(211,178,76,.14);border:1px solid var(--stroke-gold);color:var(--gold);
}
.check-list [data-icon] svg{width:15px;height:15px}

.media-card{position:relative;overflow:hidden;border-radius:var(--r-xl);border:1px solid var(--stroke);box-shadow:var(--shadow-lg)}
.media-card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.media-card__badge,.portfolio-tile__tag,.product-card__label,.package-selector__badge{
  position:absolute;inset-inline-start:16px;bottom:16px;
  padding:7px 13px;border-radius:var(--r-sm);
  background:rgba(6,9,14,.78);border:1px solid var(--stroke);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font-size:13px;font-weight:600;letter-spacing:.02em;
}

.legal-bar{display:flex;gap:10px;flex-wrap:wrap;margin-top:var(--sp-6)}
.legal-chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 14px;border-radius:var(--r-pill);
  background:var(--surface-1);border:1px solid var(--stroke);
  font-size:14px;color:var(--text-2);transition:border-color var(--t);
}
.legal-chip strong{color:var(--text);font-weight:600}
a.legal-chip:hover{border-color:var(--stroke-gold)}
.legal-chip [data-icon]{color:var(--gold)}
.legal-chip [data-icon] svg{width:var(--icon-xs);height:var(--icon-xs)}

.contact-layout{display:grid;grid-template-columns:.88fr 1.12fr;gap:var(--sp-7);align-items:start}
.contact-layout > div > .info-grid{margin-top:var(--sp-7)}
.info-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
/* Inside the contact split the cards stack: a two-up grid leaves ~110px of text
   width, which breaks the e-mail address across three lines. */
.contact-layout .info-grid{grid-template-columns:1fr;gap:12px}
.info-card{display:flex;align-items:center;gap:var(--sp-4);padding:16px 18px;transition:transform var(--t),border-color var(--t)}
.info-card > div{min-width:0}
a.info-card:hover{transform:translateY(-3px);border-color:var(--stroke-gold)}
.info-card small{display:block;color:var(--muted);font-size:13px;line-height:1.5}
.info-card strong{font-size:var(--fs-body-sm);font-weight:600;overflow-wrap:anywhere}

.blog-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.blog-card{overflow:hidden;display:flex;flex-direction:column;transition:transform var(--t),border-color var(--t),box-shadow var(--t)}
.blog-card:hover{transform:translateY(-6px);border-color:var(--stroke-gold);box-shadow:var(--shadow-lg)}
.blog-card__media{overflow:hidden;aspect-ratio:16/10}
.blog-card__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow)}
.blog-card:hover .blog-card__media img{transform:scale(1.05)}
.blog-card__body{padding:var(--sp-5);display:flex;flex-direction:column;flex:1}
.article-tag{
  align-self:flex-start;margin-bottom:var(--sp-3);
  padding:5px 11px;border-radius:var(--r-pill);
  background:rgba(211,178,76,.1);border:1px solid var(--stroke-gold);
  color:var(--gold);font-size:12.5px;font-weight:600;
}
.blog-card h3{font-size:19px;line-height:1.5}

/* ------------------------------------------- 9. TABS, PORTFOLIO & GALLERIES */
.tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:var(--sp-7)}
.tab-btn,.package-chip{
  border:1px solid var(--stroke-strong);background:var(--surface-1);color:var(--text-2);
  border-radius:var(--r-sm);padding:11px 20px;font-size:15px;font-weight:600;
  cursor:pointer;transition:all var(--t);
}
.tab-btn:hover,.package-chip:hover{border-color:var(--stroke-gold);color:var(--text);background:var(--surface-2)}
.tab-btn.active,.package-chip.active{
  background:linear-gradient(135deg,var(--gold-soft),var(--gold-deep));
  color:#14181f;border-color:transparent;font-weight:700;box-shadow:var(--glow-gold);
}
.tab-panel{display:none}
/* Portfolio content must never depend on an entrance animation to be visible. */
.tab-panel.active{display:block}
.tab-panel.active > *{animation:fadeUp .38s var(--ease) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.portfolio-showcase,.product-showcase{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
/* Reels are shot 1080×1920 — shown vertical, never cropped to landscape */
.video-portfolio-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}

.portfolio-tile,.product-card{position:relative;overflow:hidden;border-radius:var(--r-xl);transition:transform var(--t),border-color var(--t);cursor:zoom-in}
.portfolio-tile:hover,.product-card:hover{transform:translateY(-4px);border-color:var(--stroke-gold)}
.portfolio-tile img,.product-card img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;transition:transform var(--t-slow)}
.portfolio-tile:hover img,.product-card:hover img{transform:scale(1.05)}

.video-work-card{overflow:hidden;display:flex;flex-direction:column;transition:transform var(--t),border-color var(--t)}
.video-work-card:hover{transform:translateY(-4px);border-color:var(--stroke-gold)}
.video-work-card video{width:100%;aspect-ratio:9/16;object-fit:cover;background:#05070a;display:block}
.video-work-card__meta{padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.video-work-card__meta strong{font-size:17px;font-weight:700;line-height:1.4}
.video-work-card__meta span{color:var(--muted);font-size:14px}

.gallery{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.gallery__item{
  border:1px solid var(--stroke);padding:0;cursor:pointer;overflow:hidden;
  border-radius:var(--r-lg);background:none;transition:transform var(--t),border-color var(--t);
}
.gallery__item img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform var(--t-slow)}
.gallery__item:hover{transform:translateY(-4px);border-color:var(--stroke-gold)}
.gallery__item:hover img{transform:scale(1.06)}

/* ---------------------------------------------------------- 10. PACKAGES */
.package-selector{
  display:grid;grid-template-columns:.92fr 1.08fr;gap:var(--sp-7);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02)),#0d1219;
  padding:var(--sp-7);border-radius:30px;
  border:1px solid var(--stroke-gold);box-shadow:var(--shadow-lg);
}
/* The duration cards are designed square with the package name burned into
   them, so cover-cropping cut the wording. The frame takes their shape and
   the card is shown whole; the scrim is dropped for the same reason — it was
   dimming type that is part of the artwork. */
.package-selector__visual{
  position:relative;aspect-ratio:1;min-height:0;
  border-radius:var(--r-xl);overflow:hidden;background:#0d131b;
}
.package-selector__visual img,.package-selector__image{
  width:100%;height:100%;object-fit:contain;display:block;
}
.package-selector__number{
  position:absolute;top:18px;inset-inline-start:20px;z-index:1;
  font-size:56px;line-height:1;font-weight:700;color:#fff;
  text-shadow:0 8px 24px rgba(0,0,0,.55);
}
.package-selector__badge{z-index:1}
.package-selector__content{display:flex;flex-direction:column;justify-content:center;gap:var(--sp-5)}
.package-selector__label{font-weight:700;color:var(--text-2);font-size:var(--fs-body-sm)}
.package-chips{display:flex;flex-wrap:wrap;gap:10px}

.package-summary{
  display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-4);
  padding:20px 24px;border:1px solid var(--stroke);border-radius:var(--r-xl);
  background:var(--surface-1);
}
.package-summary > div:first-child{min-width:0}
.package-summary span{display:block;color:var(--muted);font-size:14px}
.package-summary__name{display:block;font-size:21px;font-weight:700;color:var(--text);margin:2px 0 4px}
.package-summary__note{display:block;color:var(--muted);font-size:14px;line-height:1.6}
.package-price{display:flex;align-items:baseline;gap:6px;flex:0 0 auto}
.package-summary__price{font-size:44px;line-height:1;font-weight:700;color:var(--gold)}
.package-price span{color:var(--text-2);font-size:15px}
.package-book{align-self:flex-start;color:#fff}
.package-book [data-icon]{transform:scaleX(-1)}

/* ------------------------------------------------------ 11. STEPS/PROCESS */
.steps{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--sp-5);
  position:relative;padding-top:var(--sp-9);
  --path-cycle:11s;              /* one full journey, then a calm restart */
}
.steps::before{
  content:"";position:absolute;inset-inline:0;top:23px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(211,178,76,.3),transparent);
}
.step{position:relative;padding-inline-end:var(--sp-4)}
.step::before{
  content:"";position:absolute;top:-33px;inset-inline-start:0;
  width:15px;height:15px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 5px rgba(211,178,76,.15),0 0 18px rgba(211,178,76,.4);
  transform-origin:50% 50%;will-change:transform;
  animation:stepDot var(--path-cycle) cubic-bezier(.3,.9,.3,1) infinite;
}
/* The trail runs at a constant speed, so each dot's delay is simply how far
   along the row it sits: 0 / 20 / 40 / 60 / 80 % of a 72%-of-cycle journey. */
.step::before{animation-direction:alternate}
.steps .step:nth-child(1)::before{animation-delay:calc(var(--path-cycle) * .034)}
.steps .step:nth-child(2)::before{animation-delay:calc(var(--path-cycle) * .209)}
.steps .step:nth-child(3)::before{animation-delay:calc(var(--path-cycle) * .386)}
.steps .step:nth-child(4)::before{animation-delay:calc(var(--path-cycle) * .560)}
.steps .step:nth-child(5)::before{animation-delay:calc(var(--path-cycle) * .735)}

@keyframes stepDot{
  0%,100%{transform:scale(1);
    box-shadow:0 0 0 5px rgba(211,178,76,.15),0 0 18px rgba(211,178,76,.4)}
  4%     {transform:scale(1.55);
    box-shadow:0 0 0 8px rgba(211,178,76,.2),0 0 30px rgba(241,220,139,.75)}
  14%    {transform:scale(1);
    box-shadow:0 0 0 5px rgba(211,178,76,.15),0 0 18px rgba(211,178,76,.4)}
}

/* the light that travels the path */
.steps::after{
  content:"";position:absolute;top:23px;inset-inline-start:0;
  height:2px;width:100%;border-radius:2px;pointer-events:none;
  /* a short bright band parked at the right end of a full-width strip; the
     strip slides left, so the light crosses the row, leaves the frame and
     comes back in from the right — one continuous lap, no snap. */
  background:linear-gradient(to left,
    var(--gold-bright) 0%,rgba(241,220,139,.65) 4%,rgba(211,178,76,.18) 9%,transparent 15%,transparent 100%);
  box-shadow:0 0 14px rgba(241,220,139,.35);
  will-change:transform;
  /* alternate, and both ends of the travel sit outside the frame — so the
     turn-around is never seen: the light simply leaves and comes back. */
  animation:pathSweep var(--path-cycle) linear infinite alternate;
}
@keyframes pathSweep{
  from{transform:translate3d(8%,0,0)}
  to  {transform:translate3d(-108%,0,0)}
}
.step h3{font-size:var(--fs-card-title);font-weight:700;margin-bottom:var(--sp-2)}

/* ------------------------------------------ 12. MARQUEE, REVIEWS, CAROUSEL */
.partners-marquee{
  /* LTR here, not just on the track: an over-wide child inside an RTL block is
     anchored to the right and overflows left, so translating it left would
     strip the right edge bare. LTR anchors it left and it overflows right. */
  direction:ltr;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.partners-track{display:flex;gap:18px;align-items:center;width:max-content;animation:marquee 34s linear infinite}
.partners-marquee:hover .partners-track,.partners-marquee:focus-within .partners-track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.partner-logo{
  min-width:172px;height:88px;border-radius:var(--r-lg);
  background:#fff;display:grid;place-items:center;padding:12px 18px;
  border:1px solid var(--stroke);flex:0 0 auto;
  filter:grayscale(1);opacity:.82;transition:filter var(--t),opacity var(--t),transform var(--t);
}
.partner-logo:hover{filter:grayscale(0);opacity:1;transform:translateY(-3px)}
.partner-logo img{max-width:100%;max-height:60px;object-fit:contain}

/* Client marks sit straight on the dark, no white tile: the library already
   holds every logo as white artwork on transparency, which is what that
   treatment needs. */
/* The marks are the clients' own colours now, and a brand colour cannot be
   read off a near-black band — so each one sits on its own light card, the way
   a printed logo sheet works. The card is what carries the hover, not the mark:
   nothing is tinted, dimmed or recoloured, so every logo stays exactly itself. */
.client-logo{
  flex:0 0 auto;position:relative;
  width:170px;height:96px;
  background:#f4f6f8;border-radius:12px;
  border:1px solid rgba(255,255,255,.06);
  opacity:.86;transition:opacity var(--t),transform var(--t),box-shadow var(--t);
}
/* The mark is given an explicit box rather than a percentage of one: inside a
   centred grid the row is auto-sized, so a percentage height resolves against
   nothing and the tall marks rendered clean past the card. Pinned to the card's
   inset with object-fit:contain, the box is definite in both axes — the mark is
   letterboxed inside it and can never be cropped or spill. */
.client-logo img{
  position:absolute;inset:13px 16px;
  width:calc(100% - 32px);height:calc(100% - 26px);
  object-fit:contain;object-position:center;display:block;
}
.client-logo:hover{opacity:1;transform:translateY(-4px);box-shadow:0 10px 26px rgba(0,0,0,.45)}


/* the clients band: hairline rules frame the title, faint rings sit behind */
.clients-band{position:relative;overflow:hidden;padding:var(--section-y) 0}
.clients-band::before,.clients-band::after{
  content:"";position:absolute;inset-inline:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.13) 22%,rgba(255,255,255,.13) 78%,transparent);
}
.clients-band::before{top:0}
.clients-band::after{bottom:0}
.clients-band .section-head{align-items:center;text-align:center;max-width:none;margin-bottom:var(--sp-8)}
.clients-band .section-title,.clients-band .section-copy{max-width:64ch}
.clients-band .eyebrow::before{display:none}

/* concentric rings, the quiet geometry behind the marks */
.clients-rings{
  position:absolute;bottom:-42%;inset-inline-start:-8%;
  width:min(640px,58vw);aspect-ratio:1;
  border-radius:50%;pointer-events:none;z-index:0;
  background:
    radial-gradient(circle,transparent 0 12%,rgba(255,255,255,.055) 12% calc(12% + 1px),transparent calc(12% + 1px) 24%,
    rgba(255,255,255,.05) 24% calc(24% + 1px),transparent calc(24% + 1px) 36%,
    rgba(255,255,255,.045) 36% calc(36% + 1px),transparent calc(36% + 1px) 48%,
    rgba(255,255,255,.04) 48% calc(48% + 1px),transparent calc(48% + 1px) 60%,
    rgba(255,255,255,.03) 60% calc(60% + 1px),transparent calc(60% + 1px) 100%);
  animation:ringsBreathe 26s ease-in-out infinite;
}
.clients-rings--end{
  inset-inline-start:auto;inset-inline-end:-10%;bottom:auto;top:-38%;
  width:min(520px,46vw);animation-delay:-9s;
}
@keyframes ringsBreathe{
  0%,100%{transform:scale(1) rotate(0deg);opacity:.9}
  50%    {transform:scale(1.07) rotate(6deg);opacity:.6}
}
.clients-band > .container{position:relative;z-index:1}


/* ---- the header folds early -------------------------------------------
   Five nav items, a logo lockup and a call to action stop fitting at about
   900px — an iPad in portrait. Below that the nav becomes a panel, which is
   also the easier target on a touch screen.
   ---------------------------------------------------------------------- */
@media (max-width:900px){
  .mobile-toggle{display:block}
  .header__row{gap:var(--sp-3);justify-content:space-between}
  .header__actions{gap:8px}
  .header__actions > .btn{width:44px;height:44px;padding:0;border-radius:var(--r-sm);min-width:0;font-size:0;gap:0}
  .header__actions > .btn [data-icon] svg{width:20px;height:20px}
  .nav{
    display:none;position:absolute;top:calc(var(--header-h) + 8px);inset-inline:16px;
    background:#0b1119;border:1px solid var(--stroke);border-radius:var(--r-lg);
    padding:var(--sp-5);box-shadow:var(--shadow-lg);
    flex-direction:column;align-items:stretch;gap:2px;
  }
  .nav.is-open{display:flex}
  .nav a{padding:14px 10px;font-size:16px;border-radius:10px;min-height:48px;display:flex;align-items:center}
  .nav a::after{display:none}
  .nav a.active{background:rgba(211,178,76,.1)}
  .nav__mobile-extra{
    display:flex;flex-direction:column;gap:10px;
    margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:1px solid var(--stroke);
  }
  .nav__mobile-extra .btn{width:100%;min-height:50px}
  /* `.nav a` is a class plus an element, so it outranks the plain `.btn--gold`
     class and painted the quote button's label in the nav's own light text —
     near-white on gold, effectively unreadable. Restate the button's colour
     where it can win, and keep the icon on the same ink. */
  .nav__mobile-extra .btn--gold,
  .nav__mobile-extra .btn--gold:hover{color:#14181f}
  .nav__mobile-extra .btn--gold svg{color:#14181f;stroke:currentColor}
  .nav__mobile-extra .phone-mini{display:block;text-align:center;min-height:46px;line-height:26px}
}
/* a full-height nav link everywhere it stays horizontal */
@media (min-width:901px){ .nav a{padding-block:12px} }

@media (max-width:760px){
  .client-logo{width:132px;height:74px;opacity:.55}
  .clients-rings{width:74vw;bottom:-30%}
  .clients-rings--end{width:60vw;top:-24%}
}
@media (prefers-reduced-motion:reduce){.clients-rings{animation:none!important}}

.reviews-live-shell{position:relative}
.reviews-live-track{
  display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding-bottom:var(--sp-2);
  scrollbar-width:none;-ms-overflow-style:none;
}
.reviews-live-track::-webkit-scrollbar{display:none}
.review-live-card{
  flex:0 0 calc((100% - 36px)/3);scroll-snap-align:start;
  display:flex;flex-direction:column;gap:10px;padding:24px;
  border-radius:var(--r-xl);border:1px solid var(--stroke);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.022)),#0d1219;
  box-shadow:var(--shadow-md);
}
.review-live-card__top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.google-mark{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#1a73e8;font-weight:800;font-size:18px;line-height:1}
.stars,.review-card__stars{color:var(--gold);letter-spacing:3px;font-size:15px}
.review-live-card strong{font-size:var(--fs-body-sm);font-weight:700}
.review-live-card p{color:var(--text-2);font-size:15.5px;line-height:1.8;flex:1}
.review-live-card small{color:var(--muted);font-size:13px}

.carousel-controls{display:flex;align-items:center;justify-content:center;gap:var(--sp-4);margin-top:var(--sp-6)}
.reviews-live-shell.is-static .carousel-controls{display:none}
.carousel-arrow{
  width:42px;height:42px;border-radius:50%;
  border:1px solid var(--stroke-strong);background:var(--surface-1);color:var(--text);
  font-size:22px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:all var(--t);
}
.carousel-arrow:hover{border-color:var(--gold);color:var(--gold);background:var(--surface-2)}
.carousel-dots{display:flex;gap:8px}
.carousel-dots i{width:7px;height:7px;border-radius:50%;background:var(--stroke-strong);transition:all var(--t)}
.carousel-dots i.active{background:var(--gold);width:22px;border-radius:var(--r-pill)}

/* ------------------------------------------------------------- 13. FORMS */
.form-shell{padding:var(--sp-7)}
.form-shell > .eyebrow{margin-bottom:var(--sp-2)}
.form-shell h2{font-size:26px;line-height:1.35;font-weight:700;margin-bottom:var(--sp-6)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4)}
.field{display:grid;gap:8px;min-width:0}
.field.full{grid-column:1/-1}
.field label{font-size:14px;font-weight:600;color:var(--text-2)}
.field input,.field textarea,.field select{
  width:100%;border-radius:var(--r-sm);border:1px solid var(--stroke-strong);
  background:rgba(255,255,255,.028);color:var(--text);
  padding:13px 16px;font-family:inherit;font-size:var(--fs-body-sm);
  transition:border-color var(--t),background var(--t),box-shadow var(--t);
}
.field input::placeholder,.field textarea::placeholder{color:rgba(159,171,187,.7)}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--gold);background:rgba(255,255,255,.045);
  box-shadow:0 0 0 3px rgba(211,178,76,.14);
}
.field textarea{min-height:132px;resize:vertical;line-height:1.7}
.field .btn{width:auto;justify-self:start}

.service-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.service-choice{
  display:flex;align-items:center;gap:10px;cursor:pointer;
  padding:13px 15px;border-radius:var(--r-sm);
  border:1px solid var(--stroke-strong);background:rgba(255,255,255,.028);
  font-size:15px;color:var(--text-2);transition:all var(--t);
}
.service-choice input{position:absolute;opacity:0;width:0;height:0}
.service-choice__dot{width:18px;height:18px;flex:0 0 auto;border-radius:50%;border:2px solid var(--stroke-strong);position:relative;transition:all var(--t)}
.service-choice__dot::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--gold);transform:scale(0);transition:transform var(--t)}
.service-choice:hover{border-color:var(--stroke-gold);color:var(--text)}
.service-choice:has(input:checked){border-color:var(--gold);background:rgba(211,178,76,.09);color:var(--text)}
.service-choice:has(input:checked) .service-choice__dot{border-color:var(--gold)}
.service-choice:has(input:checked) .service-choice__dot::after{transform:scale(1)}
.service-choice:focus-within{outline:2px solid var(--gold);outline-offset:2px}

.form-hint{
  margin-top:var(--sp-4);padding:13px 16px;border-radius:var(--r-md);
  background:var(--surface-1);border:1px dashed var(--stroke-gold);
  color:var(--text-2);font-size:14px;line-height:1.7;
}
.form-success{
  display:none;margin-top:var(--sp-4);padding:14px 18px;border-radius:var(--r-md);
  background:rgba(211,178,76,.1);border:1px solid var(--stroke-gold);
  color:var(--gold-bright);font-size:15px;font-weight:600;
}
.form-success.is-visible{display:block}

.quote-intro{display:grid;grid-template-columns:.82fr 1.18fr;gap:var(--sp-7);align-items:start}
.quote-side{padding:var(--sp-7);position:sticky;top:calc(var(--header-h) + 24px)}
.quote-side .section-title{font-size:clamp(26px,2.2vw,34px);margin-bottom:var(--sp-3)}
.mini-list{display:grid;gap:10px;margin-top:var(--sp-6)}
.mini-item{display:flex;align-items:center;gap:10px;color:var(--text-2);font-size:var(--fs-body-sm)}
.mini-item [data-icon]{width:26px;height:26px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;background:rgba(211,178,76,.14);border:1px solid var(--stroke-gold);color:var(--gold)}
.mini-item [data-icon] svg{width:15px;height:15px}

.map-panel{
  position:relative;min-height:340px;border-radius:var(--r-xl);
  border:1px solid var(--stroke);overflow:hidden;
  background:
    radial-gradient(circle at 50% 42%,rgba(211,178,76,.16),transparent 55%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 46px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 46px),
    #0c1218;
  display:grid;place-items:center;
}
.map-pin{
  width:64px;height:64px;border-radius:50%;display:grid;place-items:center;
  background:rgba(211,178,76,.16);border:1px solid var(--stroke-gold);color:var(--gold);
  box-shadow:0 0 0 12px rgba(211,178,76,.06);animation:pinPulse 2.8s ease-in-out infinite;
}
.map-pin svg{width:var(--icon-xl);height:var(--icon-xl)}
@keyframes pinPulse{50%{box-shadow:0 0 0 20px rgba(211,178,76,.03)}}
.map-caption{
  position:absolute;inset-inline:16px;bottom:16px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 18px;border-radius:var(--r-md);
  background:rgba(6,9,14,.82);border:1px solid var(--stroke);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.map-caption strong{font-size:var(--fs-body-sm)}
.map-caption span{color:var(--muted);font-size:14px}

/* ------------------------------------------ 14. FAQ, CTA BAND, SERVICE NAV */
.faq{display:grid;gap:12px}
.faq-item{overflow:hidden}
.faq-question{
  width:100%;padding:18px 22px;text-align:start;border:none;background:none;
  color:var(--text);font-size:var(--fs-body-sm);font-weight:600;
  display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;
  transition:color var(--t);
}
.faq-question:hover{color:var(--gold)}
.faq-question [data-icon]{
  width:32px;height:32px;flex:0 0 auto;border-radius:10px;display:grid;place-items:center;
  background:var(--surface-2);border:1px solid var(--stroke);color:var(--gold);
  transition:transform var(--t),background var(--t);
}
.faq-question [data-icon] svg{width:var(--icon-xs);height:var(--icon-xs)}
.faq-item.open .faq-question{color:var(--gold)}
.faq-item.open .faq-question [data-icon]{transform:rotate(45deg);background:rgba(211,178,76,.14)}
.faq-answer{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t)}
.faq-answer > div{overflow:hidden}
.faq-answer > div > p{padding:0 22px 20px}
.faq-item.open .faq-answer{grid-template-rows:1fr}

.cta-band{
  padding:var(--sp-8);border-radius:30px;position:relative;overflow:hidden;
  background:
    radial-gradient(600px 260px at 90% 0%,rgba(211,178,76,.16),transparent 70%),
    linear-gradient(135deg,rgba(211,178,76,.09),rgba(255,255,255,.035)),#0c1118;
  border:1px solid var(--stroke-gold);
}
.cta-band__content{position:relative;z-index:1;max-width:760px}
.cta-band h2{font-size:clamp(24px,2.4vw,34px);line-height:1.3;font-weight:700;margin:var(--sp-2) 0 var(--sp-3)}
.cta-band p{color:var(--text-2)}

.service-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
@media (max-width:1180px){.service-nav{grid-template-columns:repeat(3,minmax(0,1fr))}}
.service-nav a{
  padding:14px 16px;border:1px solid var(--stroke);border-radius:var(--r-md);
  background:var(--surface-1);display:flex;align-items:center;gap:10px;
  font-size:15px;font-weight:600;transition:all var(--t);
}
.service-nav a [data-icon]{color:var(--gold);display:inline-flex}
.service-nav a [data-icon] svg{width:var(--icon-xs);height:var(--icon-xs)}
.service-nav a{font-size:14.5px}
.service-nav a:hover{border-color:var(--stroke-gold);background:var(--surface-2);transform:translateY(-3px)}
.service-nav a[aria-current="page"]{border-color:var(--gold);background:rgba(211,178,76,.09)}

.notice{padding:14px 18px;border-radius:var(--r-md);background:var(--surface-1);border:1px dashed var(--stroke-gold);color:var(--text-2)}

/* ------------------------------------------------------------ 15. FOOTER */
.footer{padding:var(--sp-9) 0 var(--sp-6);border-top:1px solid rgba(255,255,255,.06);background:#030508}
.footer__grid{grid-template-columns:1.4fr .8fr .8fr 1.1fr;align-items:start;gap:var(--sp-8)}
.footer__brand img{height:21px;width:auto;aspect-ratio:1282/92;object-fit:contain;margin-bottom:var(--sp-4)}
.footer__brand p{color:var(--muted);font-size:15px;line-height:1.8;max-width:42ch}
.footer h4{margin-bottom:var(--sp-4);font-size:16px;font-weight:700;color:var(--text)}
.footer-links{display:grid;gap:11px}
.footer-links a,.footer-links span{color:var(--muted);font-size:15px}
/* A footer link should answer when it is pointed at. A gold rule grows in from
   the reading edge and the label steps aside to make room for it, so the item
   under the cursor is unmistakable in a column of six. Logical properties, so
   the rule grows from the right in Arabic and from the left the other way. */
.footer-links a{
  position:relative;padding-inline-start:0;
  transition:color .22s var(--ease),padding-inline-start .28s var(--ease);
}
.footer-links a::before{
  content:"";position:absolute;inset-inline-start:6px;top:50%;
  width:0;height:2px;border-radius:2px;background:var(--gold);
  transform:translateY(-50%);opacity:0;
  transition:width .28s var(--ease),opacity .2s var(--ease);
}
@media (hover:hover){
  .footer-links a:hover{
    color:var(--gold);padding-inline-start:25px;
    background:rgba(211,178,76,.13);
    box-shadow:inset 0 0 0 1px rgba(211,178,76,.22);
  }
  .footer-links a:hover::before{width:13px;opacity:1}
}
/* A finger has no hover, so the press itself has to show. The browser's own
   tap highlight was doing that job in near-black, which on this ground looked
   like the link had been blanked out rather than chosen. Suppress it and paint
   the press in a muted gold instead — a soft wash, well under the gradient
   used for buttons, so it reads as a highlight and not as a second CTA. */
.footer-links a{
  -webkit-tap-highlight-color:transparent;
  border-radius:8px;
  transition:color .22s var(--ease),padding-inline-start .28s var(--ease),
             background-color .18s var(--ease);
}
.footer-links a:focus-visible,
.footer-links a:active{
  color:var(--gold);padding-inline-start:25px;
  background:rgba(211,178,76,.13);
  box-shadow:inset 0 0 0 1px rgba(211,178,76,.22);
}
.footer-links a:focus-visible::before,
.footer-links a:active::before{width:13px;opacity:1}
.socials{display:flex;gap:10px;margin-top:var(--sp-5)}
.socials a{
  width:42px;height:42px;border-radius:13px;border:1px solid var(--stroke);
  display:grid;place-items:center;background:var(--surface-1);color:var(--text-2);transition:all var(--t);
}
.socials a svg{width:var(--icon-sm);height:var(--icon-sm)}
.socials a:hover{color:var(--gold);border-color:var(--stroke-gold);background:var(--surface-2);transform:translateY(-3px)}
.footer__bottom{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-top:var(--sp-6);margin-top:var(--sp-8);
  border-top:1px solid rgba(255,255,255,.06);color:var(--muted);font-size:14px;
}

/* ---------------------------------------------------------- 16. LIGHTBOX */
.lightbox{border:none;padding:0;background:none;max-width:100vw;max-height:100vh;overflow:visible}

/* ---- زر واتساب العائم ----------------------------------------------------
   الشعار مُضمَّن كـ SVG مباشرة في الصفحة، لا عبر نظام paintIcons() المؤجَّل —
   عنصر ثابت الظهور في كل صفحة لا يحتمل ظهوره فارغًا لو تأخّر جافاسكربت
   المؤجَّل من LiteSpeed عن التنفيذ. يتمدّد بتسمية نصية عند التمرير على سطح
   المكتب (حيث توجد مساحة)، ويبقى دائرة نظيفة على الجوال. -------------------- */
.wa-float{
  position:fixed;inset-inline-end:22px;inset-block-end:22px;z-index:70;
  display:flex;align-items:center;gap:0;
  height:58px;min-width:58px;padding-inline:0;border-radius:29px;
  background:linear-gradient(155deg,#2CE374,#1FAE5B);color:#fff;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(15,60,35,.32),0 2px 6px rgba(0,0,0,.18);
  transition:min-width .38s cubic-bezier(.2,.9,.3,1.1),padding-inline .38s cubic-bezier(.2,.9,.3,1.1),
             transform .25s var(--t),box-shadow .25s var(--t);
}
.wa-float__ring{
  position:absolute;inset:0;border-radius:inherit;
  box-shadow:0 0 0 0 rgba(44,227,116,.55);
  animation:waPulse 2.8s ease-out infinite;pointer-events:none;
}
.wa-float__icon{
  width:30px;height:30px;flex:0 0 auto;margin-inline:14px;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.15));
}
.wa-float__label{
  font-size:15px;font-weight:700;white-space:nowrap;
  max-width:0;opacity:0;overflow:hidden;
  transition:max-width .38s cubic-bezier(.2,.9,.3,1.1) .04s,opacity .28s ease .08s;
}
@media (hover:hover){
  .wa-float:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(15,60,35,.38),0 3px 8px rgba(0,0,0,.2)}
  .wa-float:hover .wa-float__label{max-width:140px;opacity:1;padding-inline-end:20px}
  .wa-float:hover .wa-float__icon{margin-inline-end:10px}
}
.wa-float:active{transform:scale(.96)}
@keyframes waPulse{
  0%{box-shadow:0 0 0 0 rgba(44,227,116,.55)}
  70%{box-shadow:0 0 0 16px rgba(44,227,116,0)}
  100%{box-shadow:0 0 0 0 rgba(44,227,116,0)}
}
@media (max-width:760px){
  .wa-float{height:52px;min-width:52px;inset-inline-end:16px;inset-block-end:16px}
  .wa-float__icon{width:26px;height:26px;margin-inline:13px}
  .wa-float__label{display:none}   /* لا مؤشر تمرير على اللمس — دائرة نظيفة فقط */
}
@media (prefers-reduced-motion:reduce){
  .wa-float__ring{animation:none}
  .wa-float{transition:none}
}
.lightbox::backdrop{background:rgba(3,5,8,.9);backdrop-filter:blur(6px)}
.lightbox img{
  max-width:min(96vw,1020px);max-height:88vh;
  border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  /* the gesture layer owns the pointer: without this the browser claims the
     drag for its own pan/zoom and the picture never moves under the finger */
  touch-action:none;user-select:none;-webkit-user-drag:none;
  transform-origin:center center;
  transition:transform .18s ease-out;
  cursor:zoom-in;
}
/* while a pinch or drag is running the transition would lag the finger */
.lightbox.is-zoomed img{transition:none;cursor:grab;border-radius:6px}
.lightbox.is-zoomed img:active{cursor:grabbing}
/* a zoomed picture must be free to travel past the dialog's own box */
.lightbox.is-zoomed{overflow:visible}
@media (max-width:760px){
  .lightbox img{max-width:100vw;max-height:92vh;border-radius:8px}
}
.lightbox button{
  /* Fixed to the viewport, not to the dialog. The dialog's box is the fitted
     picture, so an absolutely-placed button lands mid-screen the moment the
     picture is zoomed past it — and the zoomed image, being painted later,
     covers it. Pinning it to the corner above everything keeps the only way
     out of the viewer reachable at any magnification. */
  position:fixed;top:12px;inset-inline-start:12px;z-index:5;
  width:44px;height:44px;border-radius:50%;border:1px solid var(--stroke-strong);
  background:rgba(10,14,19,.86);backdrop-filter:blur(6px);
  color:#fff;cursor:pointer;display:grid;place-items:center;transition:all var(--t);
}
.lightbox button:hover{background:var(--gold);color:#12161b;border-color:transparent}

/* ---------------------------------------------------- 17. MOTION & REVEAL */
[data-icon]{display:inline-flex;align-items:center;justify-content:center;line-height:0}
[data-icon] svg{width:var(--icon-md);height:var(--icon-md);display:block}

[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
[data-reveal].is-visible{opacity:1;transform:none}

/* ------------------------------------------------------- 18. RESPONSIVE */
@media (max-width:1200px){:root{--container:1100px}}
@media (max-width:1120px){
  .phone-mini{display:none}
  .nav{gap:var(--sp-4)}
  .nav a{font-size:15px}
}
@media (max-width:1024px){
  :root{
    --fs-body:16px;--fs-body-sm:15.5px;
    --fs-section-title:clamp(29px,3.4vw,35px);
    --fs-page-title:clamp(34px,4.2vw,44px);
    --fs-home-title:clamp(38px,5vw,48px);
    --gap-grid:18px;
    --icon-lg:24px;--tile-md:46px;
  }
  .service-grid,.feature-grid,.feature-grid--line{grid-template-columns:repeat(2,minmax(0,1fr))}
  .service-nav{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feature-grid--line{padding-top:var(--sp-6)}
  .feature-grid--line::before{display:none}
  .feature-card--line::before{top:-24px}
  .use-case-grid,.info-grid,.blog-grid,.gallery,.service-nav,
  .portfolio-showcase,.product-showcase{grid-template-columns:repeat(2,minmax(0,1fr))}
  .video-portfolio-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hero__grid,.split,.package-selector,.quote-intro,.contact-layout{grid-template-columns:1fr}
  .quote-side{position:static}
  .booking-details-grid{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-7)}
  .steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-7) var(--sp-5)}
  .visual-shell{height:340px}
  .visual-shell::after{width:270px;height:270px;margin:-135px 0 0 -135px}
  .orbit-node{width:58px;height:58px}
  .orbit-node [data-icon] svg{width:25px;height:25px}
  .orbit-node.n1{--tx:99px;--ty:-90px}
  .orbit-node.n2{--tx:-97px;--ty:-86px}
  .orbit-node.n3{--tx:-100px;--ty:88px}
  .orbit-node.n4{--tx:96px;--ty:92px}
  .review-live-card{flex-basis:calc((100% - 18px)/2)}
  .hero::after,.page-hero::after{
    background:
      linear-gradient(275deg,rgba(6,9,14,.55) 0%,rgba(6,9,14,.84) 55%,rgba(6,9,14,.95) 92%),
      linear-gradient(180deg,rgba(6,9,14,.5),transparent 30%,rgba(6,9,14,.9));
  }
  .hero{background-position:12% center}
  .hero__subject{object-position:12% center}
  .hero::after{
    background:
      linear-gradient(to right,rgba(6,9,14,.18) 0%,rgba(6,9,14,.48) 34%,rgba(6,9,14,.82) 66%,rgba(6,9,14,.93) 90%),
      linear-gradient(180deg,rgba(6,9,14,.6),transparent 26%,rgba(6,9,14,.82));
  }
}
@media (max-width:760px){
  :root{
    --fs-eyebrow:13px;--fs-body:16px;--fs-body-sm:15.5px;--fs-card-title:18px;
    --fs-section-title:clamp(25px,7vw,30px);
    --fs-page-title:clamp(30px,8.6vw,37px);
    --fs-home-title:clamp(30px,8.2vw,36px);
    --gap-grid:16px;--header-h:66px;
    --tile-md:44px;--tile-sm:38px;--icon-lg:22px;--icon-md:20px;--icon-xl:24px;
    --r-xl:20px;
  }
  .container{width:calc(100% - 32px)}
  body{line-height:1.75}

  .logo img{height:15px}

  /* ---- iOS zooms the page on any focused field under 16px --------------
     Not a style preference: below 16px Safari scales the viewport on focus
     and the visitor has to pinch back out mid-form. The quote form is the
     conversion path, so it is held at 16px on every phone.
     -------------------------------------------------------------------- */
  .field input,.field select,.field textarea,
  input[type=text],input[type=email],input[type=tel],input[type=date],
  input[type=number],select,textarea{font-size:16px}

  /* the drifting artwork sits at 4.5% opacity behind the copy on a phone —
     the motion is invisible there and only costs paint on scroll */

  .service-grid,.feature-grid,.feature-grid--line,.use-case-grid,.info-grid,
  .blog-grid,.service-nav,.form-grid,
  .portfolio-showcase,.product-showcase{grid-template-columns:1fr}
  /* Services and the important links are both short label columns; stacking
     them turned the footer into eleven rows of scrolling. Side by side they
     read as the pair they are, while the brand block and the contact details
     keep the full width they need. */
  .footer__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-6) var(--sp-4)}
  .footer__grid > *:first-child,
  .footer__grid > *:last-child{grid-column:1 / -1}
  /* The six service options stacked one per row pushed the rest of the quote
     form — city, date, the brief — a screen and a half further down, and the
     labels are short enough that a single column wastes most of its width.
     Two across turns six rows into three and keeps the whole choice in view. */
  .service-picker{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .service-choice{padding:12px 11px;font-size:14px;gap:8px}
  /* Five services stacked one per screen made the section a long scroll and
     buried the last two. Two columns fit a phone and show the whole offer. */
  .service-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .service-card__image{aspect-ratio:4/3}
  .service-card__body{padding:14px 12px 16px}
  .service-card__body h3{font-size:15.5px;line-height:1.45}
  .service-card__body p{font-size:13px;line-height:1.7;-webkit-line-clamp:3;
    display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
  .service-card__more{font-size:13px}
  .service-card__icon{width:48px;height:48px;margin:-24px 0 12px}
  .service-card__icon svg{width:22px;height:22px}
  .field.full{grid-column:auto}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .video-portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}

  /* The plate is 2554x647 — nearly 4:1 — so in a tall phone frame `cover`
     is driven by height: the image fits the box exactly top to bottom and
     there is no vertical play at all. That is why the second number of
     object-position did nothing here. To lift him the layer has to be given
     something to move within, so both layers are zoomed to 115% and biased
     upward by the same amount; matched exactly, the cut-out keeps sitting on
     its own plate. Horizontally he lives at x 349-589 of 2554, which puts the
     window at 15% to seat him left of the copy with a margin at the edge. */
  .hero{
    padding:56px 0 48px;min-height:clamp(520px,120vw,620px);
    background-size:auto 115%;background-position:15% 65%;
  }
  .hero__subject{height:115%;inset-block-start:-9.75%;object-position:15% center}
  /* on a phone the copy sits over the frame, so the scrim reads top-to-bottom */
  .hero::after{
    background:
      linear-gradient(180deg,rgba(6,9,14,.72) 0%,rgba(6,9,14,.5) 34%,rgba(6,9,14,.72) 72%,rgba(6,9,14,.9) 100%),
      linear-gradient(to right,rgba(6,9,14,0),rgba(6,9,14,.35));
  }
  .page-hero{padding:52px 0 44px}
  .hero__content h1,.page-hero h1{line-height:1.24;max-width:none}
  .hero__grid--solo .hero__content{max-width:100%;margin-inline-start:0}
  .hero__actions .btn,.cta-band__actions .btn{flex:1 1 auto;min-width:0}

  .visual-shell{height:270px;transform:none}
  .visual-core{width:196px;height:196px;box-shadow:0 0 0 24px rgba(255,255,255,.02)}
  .visual-shell::after{width:222px;height:222px;margin:-111px 0 0 -111px}
  .orbit-node{width:50px;height:50px;border-radius:16px}
  .orbit-node [data-icon] svg{width:22px;height:22px}
  .orbit-node.n1{--tx:82px;--ty:-74px}
  .orbit-node.n2{--tx:-80px;--ty:-71px}
  .orbit-node.n3{--tx:-83px;--ty:72px}
  .orbit-node.n4{--tx:79px;--ty:76px}

  .section-head{margin-bottom:var(--sp-6);max-width:100%}
  .section-title,.section-copy{max-width:100%}

  .form-shell,.quote-side,.package-selector{padding:var(--sp-5)}
  .package-selector{border-radius:var(--r-xl);gap:var(--sp-5)}
  .package-selector__visual{min-height:0}
  .package-selector__number{font-size:42px}
  .package-summary{flex-direction:column;align-items:flex-start;gap:var(--sp-3)}
  .package-summary__price{font-size:38px}
  .package-book{width:100%}

  .steps{grid-template-columns:1fr;gap:var(--sp-6);padding-top:0;padding-inline-start:26px}
  .steps::before{
    inset-inline:auto;inset-inline-start:6px;top:8px;bottom:8px;width:1px;height:auto;
    background:linear-gradient(180deg,transparent,rgba(211,178,76,.35),transparent);
  }
  .step{padding-inline-end:0}
  .step::before{top:8px;inset-inline-start:-26px;width:13px;height:13px}
  /* the path runs top-to-bottom once the steps stack */
  .steps::after{
    top:8px;inset-inline-start:-20px;width:2px;height:calc(100% - 16px);
    background:linear-gradient(to bottom,
      var(--gold-bright) 0%,rgba(241,220,139,.65) 5%,rgba(211,178,76,.18) 11%,transparent 18%,transparent 100%);
    animation-name:pathSweepV;
  }
  @keyframes pathSweepV{
    from{transform:translate3d(0,-8%,0)}
    to  {transform:translate3d(0,108%,0)}
  }

  .partner-logo{min-width:140px;height:74px}
  .partner-logo img{max-height:48px}
  .review-live-card{flex-basis:86%;padding:20px}

  .cta-band{padding:var(--sp-6);border-radius:var(--r-xl)}
  .footer{padding:var(--sp-8) 0 var(--sp-5)}
  .footer__grid{gap:var(--sp-6)}
  .footer__bottom{margin-top:var(--sp-6);font-size:13.5px;gap:8px}
  .lightbox button{top:10px;inset-inline-start:10px}

  #works .tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
  #works .tab-btn{padding:10px 6px;font-size:13px;white-space:nowrap}
  #works .portfolio-showcase,#works .product-showcase,#works .video-portfolio-grid,
  #works .yt-grid{
    display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding-bottom:8px;scrollbar-width:none;
  }
  #works .portfolio-showcase::-webkit-scrollbar,
  #works .product-showcase::-webkit-scrollbar,
  #works .yt-grid::-webkit-scrollbar,
  #works .video-portfolio-grid::-webkit-scrollbar{display:none}
  #works .portfolio-tile,#works .product-card,#works .video-work-card,
  #works .yt{flex:0 0 84%;scroll-snap-align:start}
}
@media (max-width:400px){.gallery{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  [data-reveal]{opacity:1;transform:none}
  .partners-track{animation:none}
  /* the motion module must resolve to its resting state, never a blank one */
  .visual-shell{transform:none!important}
  .orbit-node{animation:none!important;transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty)))!important}
  .visual-shell::after,.steps::after{animation:none!important}
  .steps::after{animation:none!important;transform:none!important;opacity:.55}
  .step::before{animation:none!important;transform:none!important}
  .service-card__icon::after,.feature-card__icon::after,
  .use-case-card__icon::after,.service-nav a [data-icon]::after{animation:none!important;opacity:0}
  .service-card__icon svg,.feature-card__icon svg,
  .use-case-card__icon svg,
  .service-card__icon,.feature-card__icon,
  .use-case-card__icon{animation:none!important;transform:none!important}
  .check-list.reveal-ready span,.mini-list.reveal-ready .mini-item,
  .legal-bar.reveal-ready .legal-chip{opacity:1!important;transform:none!important}
  .check-list.reveal-ready [data-icon],.mini-list.reveal-ready [data-icon]{transform:none!important}
  .check-list [data-icon="check"] svg path,
  .mini-list  [data-icon="check"] svg path{stroke-dashoffset:0!important;transition:none!important}
}


/* =============================================================================
   MOTION MODULE — added 2026-08-16
   Everything here animates transform/opacity only, and every block is switched
   off under prefers-reduced-motion at the end of the file.
   ============================================================================= */

/* ---- 3. icons: the drawing moves, the tile holds still ------------------
   The halo that used to expand out of the tile edge was the only thing moving
   here, which read as the frame twitching rather than the icon being alive.
   The ring is kept as a still hairline for depth and the motion is moved onto
   the glyph itself, where the eye expects it. */
.feature-card__icon::after,
.use-case-card__icon::after,
.service-nav a [data-icon]::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;
  border:1px solid rgba(241,220,139,.55);
  opacity:0;pointer-events:none;
}
.service-card__icon::after{
  content:"";position:absolute;inset:-3px;border-radius:inherit;
  border:1px solid rgba(255,255,255,.65);
  opacity:0;pointer-events:none;
}
.service-card__icon svg,
.feature-card__icon svg,
.use-case-card__icon svg{
  animation:iconGlyph 5.4s ease-in-out infinite;
  transform-origin:50% 55%;      /* most of these marks are bottom-weighted */
  will-change:transform;
}
/* The tile now drifts with its glyph, on the same clock and the same easing
   but at roughly two-thirds the reach — moving them by equal amounts would
   lock them together and read as one flat sticker sliding about, while the
   glyph running slightly ahead of its frame gives the pair some depth.
   Both amplitudes are 5% up on the first pass. */
.service-card__icon,
.feature-card__icon,
.use-case-card__icon{
  animation:iconTile 5.4s ease-in-out infinite;
  will-change:transform;
}
@keyframes iconGlyph{
  0%,100%{transform:translateY(0)       rotate(0)       scale(1)}
  28%    {transform:translateY(-2.63px) rotate(-3.36deg) scale(1.084)}
  56%    {transform:translateY(.53px)   rotate(1.89deg)  scale(.9843)}
  78%    {transform:translateY(-.84px)  rotate(0)        scale(1.021)}
}
@keyframes iconTile{
  0%,100%{transform:translateY(0)       rotate(0)}
  28%    {transform:translateY(-1.79px) rotate(-1.58deg)}
  56%    {transform:translateY(.37px)   rotate(.89deg)}
  78%    {transform:translateY(-.57px)  rotate(0)}
}
/* stagger so a row of cards never pulses in unison */
/* stagger so a row of icons never moves in unison */
.service-grid > *:nth-child(2) .service-card__icon,
.service-grid > *:nth-child(2) .service-card__icon svg,
.feature-grid > *:nth-child(2) .feature-card__icon,
.feature-grid > *:nth-child(2) .feature-card__icon svg,
.use-case-grid > *:nth-child(2) .use-case-card__icon,
.use-case-grid > *:nth-child(2) .use-case-card__icon svg{animation-delay:.7s}
.service-grid > *:nth-child(3) .service-card__icon,
.service-grid > *:nth-child(3) .service-card__icon svg,
.feature-grid > *:nth-child(3) .feature-card__icon,
.feature-grid > *:nth-child(3) .feature-card__icon svg,
.use-case-grid > *:nth-child(3) .use-case-card__icon,
.use-case-grid > *:nth-child(3) .use-case-card__icon svg{animation-delay:1.4s}
.service-grid > *:nth-child(4) .service-card__icon,
.service-grid > *:nth-child(4) .service-card__icon svg,
.feature-grid > *:nth-child(4) .feature-card__icon,
.feature-grid > *:nth-child(4) .feature-card__icon svg,
.use-case-grid > *:nth-child(4) .use-case-card__icon,
.use-case-grid > *:nth-child(4) .use-case-card__icon svg{animation-delay:2.1s}
.use-case-grid > *:nth-child(5) .use-case-card__icon,
.use-case-grid > *:nth-child(5) .use-case-card__icon svg{animation-delay:2.8s}
.use-case-grid > *:nth-child(6) .use-case-card__icon,
.use-case-grid > *:nth-child(6) .use-case-card__icon svg{animation-delay:3.5s}
/* hovering steadies the drift and shows the ring instead — the tile itself
   still never moves */
.service-card:hover .service-card__icon::after,
.feature-card:hover .feature-card__icon::after,
.use-case-card:hover .use-case-card__icon::after{opacity:.5}
.service-card:hover .service-card__icon svg,
.feature-card:hover .feature-card__icon svg,
.use-case-card:hover .use-case-card__icon svg{animation-play-state:paused;transform:scale(1.12)}
/* An animation outranks the card's hover transform, so the drift has to stop
   for the lift on hover to be seen at all. */
.service-card:hover .service-card__icon,
.feature-card:hover .feature-card__icon,
.use-case-card:hover .use-case-card__icon{animation-play-state:paused}

.service-nav a{position:relative}
.service-nav a [data-icon]{position:relative}
.service-nav a [data-icon]::after{inset:-7px;border-radius:50%;animation-duration:6.4s}
.service-nav a:nth-child(2) [data-icon]::after{animation-delay:.9s}
.service-nav a:nth-child(3) [data-icon]::after{animation-delay:1.8s}
.service-nav a:nth-child(4) [data-icon]::after{animation-delay:2.7s}

/* ---- 2. scroll-linked reveals: check lists, mini lists, step text ------- */
/* The hidden state only applies once JS has marked the list ready, so the
   content is never invisible if the script fails to run. */
.check-list.reveal-ready span,
.mini-list.reveal-ready .mini-item,
.legal-bar.reveal-ready .legal-chip{
  opacity:0;transform:translateY(12px) scale(.97);
  transition:opacity .55s var(--ease),transform .55s var(--ease);
}
.check-list.reveal-ready [data-icon],
.mini-list.reveal-ready [data-icon]{
  transform:scale(.5) rotate(-25deg);
  transition:transform .5s cubic-bezier(.34,1.56,.64,1);
}
.check-list.is-revealed span,
.mini-list.is-revealed .mini-item,
.legal-bar.is-revealed .legal-chip{opacity:1;transform:none}
.check-list.is-revealed [data-icon],
.mini-list.is-revealed [data-icon]{transform:none}

/* The tick is a stroked path, so it can be drawn rather than merely faded in:
   the tile pops, then the stroke sweeps along the check. Steps are .16s apart —
   wide enough to read as first, second, third, fourth rather than as one
   blurred group, and the whole run still finishes inside a second. */
.check-list.reveal-ready [data-icon="check"] svg path,
.mini-list.reveal-ready  [data-icon="check"] svg path{
  stroke-dasharray:22;stroke-dashoffset:22;
  transition:stroke-dashoffset .42s cubic-bezier(.65,0,.35,1);
}
.check-list.is-revealed [data-icon="check"] svg path,
.mini-list.is-revealed  [data-icon="check"] svg path{stroke-dashoffset:0}

.check-list.reveal-ready span:nth-child(1),.mini-list.reveal-ready .mini-item:nth-child(1),.legal-bar.reveal-ready .legal-chip:nth-child(1){transition-delay:0.04s}
.check-list.reveal-ready span:nth-child(1) [data-icon],.mini-list.reveal-ready .mini-item:nth-child(1) [data-icon]{transition-delay:0.14s}
.check-list.reveal-ready span:nth-child(1) [data-icon="check"] svg path,.mini-list.reveal-ready .mini-item:nth-child(1) [data-icon="check"] svg path{transition-delay:0.22s}
.check-list.reveal-ready span:nth-child(2),.mini-list.reveal-ready .mini-item:nth-child(2),.legal-bar.reveal-ready .legal-chip:nth-child(2){transition-delay:0.2s}
.check-list.reveal-ready span:nth-child(2) [data-icon],.mini-list.reveal-ready .mini-item:nth-child(2) [data-icon]{transition-delay:0.3s}
.check-list.reveal-ready span:nth-child(2) [data-icon="check"] svg path,.mini-list.reveal-ready .mini-item:nth-child(2) [data-icon="check"] svg path{transition-delay:0.38s}
.check-list.reveal-ready span:nth-child(3),.mini-list.reveal-ready .mini-item:nth-child(3),.legal-bar.reveal-ready .legal-chip:nth-child(3){transition-delay:0.36s}
.check-list.reveal-ready span:nth-child(3) [data-icon],.mini-list.reveal-ready .mini-item:nth-child(3) [data-icon]{transition-delay:0.46s}
.check-list.reveal-ready span:nth-child(3) [data-icon="check"] svg path,.mini-list.reveal-ready .mini-item:nth-child(3) [data-icon="check"] svg path{transition-delay:0.54s}
.check-list.reveal-ready span:nth-child(4),.mini-list.reveal-ready .mini-item:nth-child(4),.legal-bar.reveal-ready .legal-chip:nth-child(4){transition-delay:0.52s}
.check-list.reveal-ready span:nth-child(4) [data-icon],.mini-list.reveal-ready .mini-item:nth-child(4) [data-icon]{transition-delay:0.62s}
.check-list.reveal-ready span:nth-child(4) [data-icon="check"] svg path,.mini-list.reveal-ready .mini-item:nth-child(4) [data-icon="check"] svg path{transition-delay:0.7s}
.check-list.reveal-ready span:nth-child(5),.mini-list.reveal-ready .mini-item:nth-child(5),.legal-bar.reveal-ready .legal-chip:nth-child(5){transition-delay:0.68s}
.check-list.reveal-ready span:nth-child(5) [data-icon],.mini-list.reveal-ready .mini-item:nth-child(5) [data-icon]{transition-delay:0.78s}
.check-list.reveal-ready span:nth-child(5) [data-icon="check"] svg path,.mini-list.reveal-ready .mini-item:nth-child(5) [data-icon="check"] svg path{transition-delay:0.86s}

/* ---- 5. partners: true infinite loop, any number of logos --------------- */
/* Laid out LTR inside an RTL page: the track must travel the same way its
   items are stacked, otherwise the trailing edge empties out. app.js writes
   --marquee-shift (exactly one copy, gap included) and the duration. */
.partners-track{
  direction:ltr;
  animation-name:marqueeLoop;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
  will-change:transform;
}
@keyframes marqueeLoop{
  from{transform:translate3d(0,0,0)}
  to  {transform:translate3d(calc(-1 * var(--marquee-shift,50%)),0,0)}
}

/* ---- 6. Google reviews: rating entry point ------------------------------ */
.reviews-cta{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-6);
  flex-wrap:wrap;margin-top:var(--sp-7);padding:20px 24px;
  border-radius:var(--r-xl);border:1px solid var(--stroke-gold);
  background:linear-gradient(135deg,rgba(211,178,76,.08),rgba(255,255,255,.03));
}
.reviews-cta__text strong{display:block;font-size:var(--fs-body-sm);font-weight:700;margin-bottom:3px}
.reviews-cta__text span{color:var(--muted);font-size:14px}
.rating-picker{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap}
.rating-stars{display:flex;flex-direction:row-reverse;gap:4px}
.rating-stars button{
  background:none;border:none;cursor:pointer;padding:2px;line-height:1;
  font-size:27px;color:rgba(255,255,255,.22);
  transition:color .2s var(--ease),transform .25s cubic-bezier(.34,1.56,.64,1);
}
.rating-stars button:hover,.rating-stars button:focus-visible,
.rating-stars button.is-on{color:var(--gold-bright);transform:scale(1.18)}
/* hovering a star lights every star to its right (lower value) too */
.rating-stars button:hover ~ button{color:var(--gold-bright)}
.rating-stars:hover button.is-on:not(:hover):not(:hover ~ button){color:rgba(255,255,255,.22)}@media (max-width:760px){}@media (max-width:1024px){}
@media (max-width:760px){}
@media (prefers-reduced-motion:reduce){}

/* ---- the site thread: one line, hero to footer ------------------------- */
body{position:relative}
.site-thread{
  position:absolute;top:0;left:0;width:100%;
  z-index:0;pointer-events:none;overflow:visible;
}
.site-thread__base{
  fill:none;stroke:var(--gold);stroke-width:1.1;
  opacity:.11;stroke-linecap:round;
}
.site-thread__glow{
  fill:none;stroke:var(--gold-bright);stroke-width:1.9;stroke-linecap:round;
  opacity:.55;
  filter:drop-shadow(0 0 6px rgba(241,220,139,.5));
  stroke-dashoffset:0;
  animation:threadRun 44s ease-in-out infinite alternate;
  will-change:stroke-dashoffset;
}
/* travels the whole path, then returns along it — no seam either way */
@keyframes threadRun{
  from{stroke-dashoffset:var(--thread-len,3000px)}
  to  {stroke-dashoffset:0}
}
/* content always sits above the thread */
.section > .container,.footer > .container,.partners-marquee{position:relative;z-index:1}
/* …and the hero copy has to clear its own scrim as well, which sits at 3.
   Declared last so nothing later can quietly drop it back under. */
.hero > .container,.page-hero > .container{position:relative;z-index:5}

/* The thread was already being drawn on a phone and a tablet — it was simply
   too faint to notice there. A 0.9px stroke at .09 opacity reads on a large
   desktop panel and disappears on a handset held at arm's length, so the line
   is thickened and lifted on the smaller screens rather than being introduced
   to them. The travelling light gains most, since it is the part that shows
   the line is alive. */
/* On a handset held at arm's length a hairline simply is not there. The line
   is thickened and lifted on the smaller screens, and the travelling light is
   given a longer lit segment and a faster lap so the movement is obvious
   rather than something you have to wait to notice. */
@media (max-width:1024px){
  .site-thread__base{stroke-width:1.9;opacity:.24}
  .site-thread__glow{
    stroke-width:3.4;opacity:.85;
    filter:drop-shadow(0 0 10px rgba(241,220,139,.7)) drop-shadow(0 0 22px rgba(241,220,139,.32));
    animation-duration:26s;
  }
}
@media (max-width:760px){
  .site-thread__base{stroke-width:1.8;opacity:.22}
  .site-thread__glow{
    stroke-width:3.1;opacity:.82;
    filter:drop-shadow(0 0 9px rgba(241,220,139,.68)) drop-shadow(0 0 20px rgba(241,220,139,.3));
    animation-duration:22s;
  }
}
@media (prefers-reduced-motion:reduce){
  .site-thread__glow{animation:none!important;opacity:.14;stroke-dasharray:none!important}
}

/* ---- reel rail: a leaning wall of vertical work, always moving -----------
   Same measured-loop engine as the client marquee, so the seam is exact for
   any number of cards. The tilt is applied to a wrapper, and the wrapper is
   scaled past the edges so rotating it never uncovers a corner.
   ------------------------------------------------------------------------ */
.reel-rail{
  position:relative;overflow:hidden;
  padding-block:clamp(28px,4vw,56px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
/* The track is laid out ltr but the page is rtl, so an over-wide track was
   anchored to the wrapper's RIGHT edge and hung off to the left — at rest it
   began 2970px outside the frame. The animation translates negatively, which
   then walked it further out instead of through, and the rail ran empty for
   most of every lap. The client marquee never showed this because its own
   wrapper is already ltr. Matching that here anchors the track at zero. */
.reel-rail__tilt{transform:rotate(-2.4deg) scale(1.07);transform-origin:center;direction:ltr}
.reel-rail__track{
  display:flex;align-items:center;gap:clamp(12px,1.4vw,20px);
  width:max-content;direction:ltr;
  animation-name:marqueeLoop;animation-timing-function:linear;
  animation-iteration-count:infinite;will-change:transform;
}
.reel-rail:hover .reel-rail__track,
.reel-rail:focus-within .reel-rail__track{animation-play-state:paused}
.reel-rail.is-paused .reel-rail__track,
.reel-rail.is-tap-paused .reel-rail__track{animation-play-state:paused}
.reel-rail{cursor:pointer}
.reel-rail__cta{text-align:center;margin-top:var(--sp-5)}
.reel-card{
  flex:0 0 auto;position:relative;overflow:hidden;
  width:clamp(132px,13.5vw,208px);aspect-ratio:9/16;
  border-radius:clamp(14px,1.3vw,20px);
  border:1px solid var(--stroke);
  background:#0b1119;
  box-shadow:var(--shadow-md);
  transition:transform var(--t),border-color var(--t),box-shadow var(--t);
}
.reel-card img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform var(--t-slow),filter var(--t)}
.reel-card::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(6,9,14,.55));
  transition:opacity var(--t);
}
.reel-card:hover{transform:translateY(-8px);border-color:var(--stroke-gold);box-shadow:var(--shadow-lg)}
.reel-card:hover img{transform:scale(1.06)}
.reel-card:hover::after{opacity:.4}

@media (max-width:760px){
  .reel-rail__tilt{transform:rotate(-1.8deg) scale(1.06)}
  .reel-rail{padding-block:clamp(20px,5vw,34px)}
  .reel-rail__track{gap:10px}
  .reel-card{width:clamp(76px,23vw,108px);border-radius:10px}
}
@media (prefers-reduced-motion:reduce){
  .reel-rail__track{animation:none!important}
  .reel-rail__tilt{transform:none}
}

/* ---- touch targets ------------------------------------------------------
   Anything tappable needs about 44px of finger, even when the ink is smaller.
   The hit area is grown with a pseudo-element so nothing in the layout moves.
   ------------------------------------------------------------------------ */
/* ---- touch targets ------------------------------------------------------
   Held to 44px unconditionally rather than behind a pointer query: a desktop
   test browser reports a fine pointer at iPad landscape widths, so a query
   would leave the real device untested. Every rule below is a hit-area
   change, not a layout change — the expanders are absolutely positioned.
   ------------------------------------------------------------------------ */
.footer-links a,
.breadcrumbs a,
.text-link{position:relative}
.footer-links a::after,
.breadcrumbs a::after,
.text-link::after{
  content:"";position:absolute;inset:-10px -6px;
}
.logo{min-height:44px;display:flex;align-items:center;padding-inline-end:4px}
.socials a{width:44px;height:44px}
.rating-stars button{min-width:44px;min-height:44px;padding:6px}
.carousel-arrow{width:46px;height:46px}
.faq-question{padding-block:20px}
.tab-btn{min-height:44px}
.package-chip{min-height:44px}
.field input,.field select{min-height:48px}
.service-choice{min-height:48px}

@media (hover: none), (pointer: coarse){
  /* the reel wall is decorative — no hover state to chase on touch */
  .reel-card:hover{transform:none}
  .gallery__item:hover img,.portfolio-tile:hover img{transform:none}
}

/* ---- the product wall ---------------------------------------------------
   Six across at most and ten deep, so the range reads as range rather than as
   a handful of samples. Every plate opens in the lightbox: at this size the
   tile is a contact sheet, and the visitor has to be able to look closer.
   ------------------------------------------------------------------------ */
.gallery--wall{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.gallery--wall .gallery__item{aspect-ratio:1;border-radius:12px}
.gallery--wall .gallery__item img{width:100%;height:100%;object-fit:cover}
.gallery__tag{
  position:absolute;inset-inline-start:8px;inset-block-end:8px;
  font-size:11px;line-height:1;padding:5px 8px;border-radius:999px;
  background:rgba(6,9,14,.72);color:#e9edf3;border:1px solid rgba(255,255,255,.1);
  opacity:0;transform:translateY(4px);transition:opacity .18s ease,transform .18s ease;
  pointer-events:none;
}
.gallery--wall .gallery__item:hover .gallery__tag,
.gallery--wall .gallery__item:focus-visible .gallery__tag{opacity:1;transform:none}
@media (max-width:1180px){ .gallery--wall{grid-template-columns:repeat(5,minmax(0,1fr))} }
@media (max-width:980px){  .gallery--wall{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:760px){  .gallery--wall{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} }
/* three across holds on a phone: the tile is a contact sheet that opens in
   the lightbox, so smaller tiles cost nothing and halve a 30-row scroll */
@media (max-width:359px){  .gallery--wall{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* the tag is the only hint of the category on a touch screen, so it stays put */
@media (hover:none),(pointer:coarse){ .gallery--wall .gallery__tag{display:none} }

/* ---- very wide displays --------------------------------------------------
   Past about 2600 CSS pixels the banners stop growing and start reading as
   ribbons — 6.7:1 on an unscaled 4K panel. Height is tied to the viewport's
   own height here, which is what actually limits how tall a banner may be.
   Scoped above 2600px so no ordinary display is touched.
   ------------------------------------------------------------------------- */
@media (min-width:2600px){
  .hero{min-height:min(46vh,760px)}
  .page-hero{min-height:min(40vh,660px)}
}

/* ==========================================================================
   9. THE ARTICLE — magazine layout
   A reading page, not a landing page: one column at a comfortable measure,
   and pictures that break out of it at three widths. The break-outs are what
   make it read as a magazine rather than a blog post — a picture that fills
   the page carries weight a boxed thumbnail never does.
   ========================================================================== */
/* The measure is set in px, not ch: the ch unit follows the digit glyph, which
   in this Arabic face is far wider than the letters, so 68ch was landing at 98
   characters a line. 600px holds about 80 — where Arabic reads comfortably. */
.article{ --measure: 600px; }

/* ---- the banner: title sits on the picture, not above it ---------------- */
.article-hero{
  position:relative;
  /* Shaped, not just tall. A fixed min-height turned every 3:2 photograph into
     a 3:1 strip and threw away half of it — subjects lost their heads and rooms
     lost their ceilings. An aspect ratio close to 2:1 keeps the frame the
     photographer composed, and the min/max keep it sane on any screen. */
  width:100%;
  aspect-ratio:2 / 1;
  /* the floor is expressed in vw so it can never demand more width than the
     viewport has — a px floor made the ratio push the box past the screen */
  min-height:min(52vw, 520px);
  max-height:78vh;
  display:flex;align-items:flex-end;
  overflow:hidden;background:var(--bg-2);
}
.article-hero__img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
}
.article-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,9,14,.34) 0%,rgba(6,9,14,.12) 34%,
             rgba(6,9,14,.72) 74%,rgba(6,9,14,.96) 100%);
}
.article-hero > .container{position:relative;z-index:2;padding-block:var(--sp-8) var(--sp-7)}
.article-hero h1{
  font-size:clamp(30px,4.1vw,54px);line-height:1.16;letter-spacing:-.022em;
  margin:var(--sp-3) 0 var(--sp-4);max-width:20ch;font-weight:800;text-wrap:balance;
}
.article-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:9px 15px;
  font-size:14px;color:var(--text-2);
}
.article-meta .tag{
  background:rgba(211,178,76,.14);color:var(--gold);
  border:1px solid rgba(211,178,76,.28);
  padding:4px 12px;border-radius:999px;font-size:12.5px;font-weight:700;
}
.article-meta .sep{opacity:.4}

/* ---- the body ----------------------------------------------------------- */
.article-body{padding:var(--sp-9) 0 var(--sp-8)}
.article-body > *{
  width:min(100% - 40px, var(--measure));margin-inline:auto;
}
.article-body > p{margin-block:0 var(--sp-5);margin-inline:auto;font-size:17.5px;line-height:1.92;color:var(--text-1)}
.figure--side .figure__note p{margin:0}
.article-body > h2{
  font-size:clamp(22px,2.3vw,30px);line-height:1.3;letter-spacing:-.015em;
  margin-block:var(--sp-8) var(--sp-4);margin-inline:auto;font-weight:700;text-wrap:balance;
}
.article-body > h2::before{
  content:"";display:block;width:44px;height:2px;background:var(--gold);
  margin-bottom:var(--sp-3);opacity:.85;
}
.article-body > h3{font-size:19px;margin-block:var(--sp-6) var(--sp-3);margin-inline:auto;font-weight:700}
.article-body > ul{margin-block:0 var(--sp-5);margin-inline:auto;padding-inline-start:22px}
.article-body li{margin-bottom:10px;font-size:17px;line-height:1.85}

/* the standfirst carries the reader in — larger, lighter, set apart */
/* No drop cap. Arabic letters join to their neighbours, so ::first-letter
   isolates one glyph and severs the word — تُعد came out as ثُ then عد. The
   opening instead carries its weight through the lede's own size and rule. */
.article-lede{
  font-size:clamp(19px,1.7vw,22px)!important;line-height:1.72!important;
  color:var(--text-2)!important;font-weight:500;
  padding-inline-start:var(--sp-4);border-inline-start:2px solid var(--gold);
  margin-bottom:var(--sp-7)!important;margin-inline:auto!important;
}

/* ---- pictures serve the text, they do not replace it --------------------
   A 320-word article carries four paragraphs. Six pictures at 1080px turned
   that into a gallery with captions — the reader saw photographs and lost the
   argument. So the default figure sits inside the measure, every figure is
   capped in height so a portrait cannot tower over its own paragraph, and only
   one picture per article is allowed to break the full width.
   ------------------------------------------------------------------------ */
.figure{
  margin:var(--sp-6) auto;
  width:min(100% - 40px, var(--measure));
}
.figure img{
  width:100%;height:auto;display:block;border-radius:var(--r-md);
  max-height:440px;object-fit:cover;object-position:center;
}
.figure figcaption{
  margin-top:10px;font-size:13.5px;color:var(--muted);line-height:1.55;
  padding-inline-start:11px;border-inline-start:2px solid rgba(211,178,76,.32);
}

/* one step out of the column — for a frame that earns the extra width */
.figure--wide{width:min(100% - 40px, 840px)}
.figure--wide img{max-height:500px}

/* the single full-bleed moment, used once and usually to close */
.figure--full{width:100%;max-width:none;margin-inline:0}
.figure--full img{border-radius:0;max-height:min(58vh,560px)}
.figure--full figcaption{width:min(100% - 40px,var(--measure));margin-inline:auto;margin-top:12px}

/* a tall frame belongs beside its paragraph, not on top of it */
.figure--side{
  width:min(100% - 40px, 840px);
  display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1fr);
  gap:var(--sp-5);align-items:start;margin:var(--sp-7) auto;
}
/* the text starts level with the top of the picture, and the picture is held
   to the height the paragraph actually needs so neither leaves the other
   stranded in white space */
.figure--side img{max-height:380px}
.figure--side figure{margin:0}
.figure--side img{object-fit:cover}
.figure--side .figure__note p{
  font-size:17px;line-height:1.9;margin:0;color:var(--text-1);
}

/* two frames reading as one spread */
.figure--pair{
  width:min(100% - 40px, 840px);
  display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);margin:var(--sp-6) auto;
}
.figure--pair img{height:300px;object-fit:cover;border-radius:var(--r-md)}
.figure--pair figcaption{grid-column:1 / -1}

.pullquote{
  width:min(100% - 40px, 58ch);margin:var(--sp-8) auto;
  font-size:clamp(21px,2.1vw,27px);line-height:1.55;font-weight:600;
  color:var(--text-1);text-align:center;letter-spacing:-.012em;
}
.pullquote::before{
  content:"";display:block;width:38px;height:2px;background:var(--gold);
  margin:0 auto var(--sp-4);
}

/* ---- foot of the article ------------------------------------------------ */
.article-cta{
  width:min(100% - 40px, 1080px);margin:var(--sp-9) auto 0;
  background:linear-gradient(135deg,rgba(211,178,76,.12),rgba(211,178,76,.04)),#0d1219;
  border:1px solid rgba(211,178,76,.22);border-radius:var(--r-lg);
  padding:var(--sp-7);text-align:center;
}
.article-cta h2{margin:0 0 var(--sp-3);font-size:clamp(21px,2.2vw,27px)}
.article-cta h2::before{display:none}
.article-cta p{margin:0 auto var(--sp-5);max-width:56ch;color:var(--text-2)}
.article-cta .cta-band__actions{justify-content:center;margin:0}

.article-nav{
  width:min(100% - 40px,1080px);margin:var(--sp-8) auto 0;
  display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);
}
.article-nav a{
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.022)),#0d1219;
  border:1px solid var(--stroke);border-radius:var(--r-md);
  padding:var(--sp-4) var(--sp-5);transition:border-color var(--t),transform var(--t);
}
.article-nav a:hover{border-color:rgba(211,178,76,.4);transform:translateY(-2px)}
.article-nav span{display:block;font-size:12.5px;color:var(--gold);
  letter-spacing:.08em;font-weight:700;margin-bottom:6px}
.article-nav strong{display:block;font-size:16px;font-weight:600;line-height:1.5}
.article-nav a:only-child{grid-column:1 / -1}

@media (max-width:760px){
  .article{--measure:100%}
  /* a phone is narrow, so a 2:1 banner would be a sliver — 4:3 suits the frame */
  .article-hero{aspect-ratio:4 / 3;min-height:auto;max-height:64vh}
  .article-body{padding:var(--sp-7) 0 var(--sp-6)}
  .article-body > p,.article-body > ul > li{font-size:16.5px;line-height:1.85}
  .figure--side,.figure--pair,.article-nav{grid-template-columns:1fr}
  .figure--pair img{height:auto;max-height:300px}
  .figure img{max-height:330px}
  .figure--wide img{max-height:340px}
  /* stacked on a phone the side picture is still a portrait — capping it
     at 340px turned every 4:5 into a square and cut a fifth of the frame */
  .figure--side img{max-height:min(420px,120vw)}
  .figure--full img{max-height:44vh}
  .article-cta{padding:var(--sp-6) var(--sp-5)}
}

/* Past about 1900px a full-bleed banner can only keep its 2:1 shape by growing
   taller than the screen, so the height cap starts eating the picture again —
   54% of it at 2560. Capping the banner's width instead keeps the frame intact
   and stops it from dominating a very wide desktop. */
@media (min-width:1900px){
  .article-hero{max-width:1800px;margin-inline:auto;max-height:none}
}

/* --------------------------------------------------------------------------
   Touch targets. A finger needs about 44px; a footer link is one line of
   text, roughly 26. The rule below covers phones AND tablets — the earlier
   phone-only version left iPads at 768 and 1024 with the same small targets.
   -------------------------------------------------------------------------- */
@media (max-width:1024px){
  .footer-links{gap:2px}
  .footer-links a{display:flex;align-items:center;min-height:44px;padding-block:2px}
  .breadcrumbs a{display:inline-flex;align-items:center;min-height:40px;padding-inline:4px}
  /* iOS zooms the page on any focused field under 16px, at any width */
  .field input,.field select,.field textarea,
  input[type=text],input[type=tel],input[type=email],input[type=date],
  select,textarea{font-size:16px}
}

/* ==========================================================================
   10. YOUTUBE — the real channel, loaded only when asked for
   An embedded player pulls roughly half a megabyte of script before anyone
   presses play. Four in five visitors are on a phone, so each video shows as
   its own poster and the iframe is built on the first click.
   ========================================================================== */
.yt-grid{
  display:grid;gap:var(--sp-4);
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  align-items:start;
}
/* A 3x3 wall for the filmed works — nine cards, three even rows. */
.yt-grid--4{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:860px){  .yt-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* Two columns on a 390px phone left each still 171px wide and 96px tall —
   smaller than the play button needs. Below 620px the wall goes single file. */
@media (max-width:620px){  .yt-grid--4{grid-template-columns:1fr} }

/* The caption sits BELOW the still, not on top of it.
   Overlaid, it could not work: a 62px play button centred in the frame ends at
   h/2+31, while a two-line title starts at h-82. They only clear each other on
   a card taller than 226px — that is a 400px-wide card, and none of these are.
   Every grid on the site collided. Below the frame the title also gets to be
   read in full instead of clamped over a busy photograph. */
.yt{
  display:block;width:100%;cursor:pointer;border:0;background:none;padding:0;
  text-align:start;
}
.yt__shot{
  position:relative;display:block;width:100%;aspect-ratio:16/9;
  border-radius:var(--r-md);overflow:hidden;background:#0d1219;
  border:1px solid var(--stroke);
  transition:border-color var(--t),transform var(--t);
}
.yt:hover .yt__shot,.yt:focus-visible .yt__shot{
  border-color:rgba(211,178,76,.45);transform:translateY(-2px);
}
.yt:focus-visible{outline:none}
.yt:focus-visible .yt__shot{box-shadow:0 0 0 2px var(--gold)}
.yt__shot img{width:100%;height:100%;object-fit:cover;display:block}
.yt__shot::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,9,14,0) 62%,rgba(6,9,14,.5) 100%);
  pointer-events:none;
}
/* The channel's own thumbnails are branded title cards: the episode name is
   burned into the middle of the frame. A play button dead-centre sat straight
   on top of that text, so it moves to the corner opposite the duration. */
.yt__play{
  position:absolute;inset-block-end:10px;inset-inline-start:10px;
  width:clamp(40px,3.4vw,50px);aspect-ratio:1;border-radius:50%;
  background:rgba(211,178,76,.94);
  display:grid;place-items:center;z-index:2;
  box-shadow:0 6px 22px rgba(0,0,0,.45);
  transition:transform var(--t),background var(--t);
}
.yt:hover .yt__play{transform:scale(1.09);background:var(--gold)}
.yt__play svg{width:38%;height:38%;fill:#06090e;margin-inline-start:6%}
.yt__dur{
  position:absolute;inset-block-end:8px;inset-inline-end:8px;z-index:2;
  font-size:12.5px;font-weight:600;
  background:rgba(6,9,14,.82);color:#fff;padding:3px 8px;border-radius:5px;
  font-variant-numeric:tabular-nums;
}
.yt__title{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  margin-block-start:10px;font-size:15px;font-weight:600;line-height:1.5;
  color:var(--text);transition:color var(--t);
}
.yt:hover .yt__title{color:var(--gold)}
.yt__shot iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt.is-live .yt__play,.yt.is-live .yt__dur,.yt.is-live .yt__shot::after{display:none}
.yt-more{margin-block-start:var(--sp-5);text-align:center}

/* ---- the studio spaces: one rail per room ---------------------------------
   A grid would have made three rooms read as one pile of tiles. Each room
   keeps its own rail, scrolled in the order the folder holds, so the sequence
   the photographer shot in survives. Same behaviour on every screen — the
   arrows are for a mouse, the swipe for a thumb, and both drive one element. */
.space-set{margin-block-start:var(--sp-6)}
.space-set__head{
  display:flex;align-items:baseline;gap:12px;margin-block-end:var(--sp-3);
  padding-inline-start:2px;
}
.space-set__head h3{font-size:19px;color:var(--text)}
.space-set__count{color:var(--muted);font-size:13.5px}
.space-rail-wrap{position:relative}
.space-rail{
  display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding-block-end:6px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.space-rail::-webkit-scrollbar{display:none}
.space-slide{
  flex:0 0 clamp(210px,26vw,300px);scroll-snap-align:start;
  aspect-ratio:1;border:1px solid var(--stroke);border-radius:var(--r-md);
  overflow:hidden;padding:0;background:#0d1219;cursor:zoom-in;
  transition:border-color var(--t),transform var(--t);
}
.space-slide img{width:100%;height:100%;object-fit:cover;display:block}
.space-slide:hover,.space-slide:focus-visible{
  border-color:rgba(211,178,76,.45);transform:translateY(-2px);
}
.space-nav{
  position:absolute;inset-block-start:50%;transform:translateY(-50%);
  z-index:3;width:42px;height:42px;border-radius:50%;
  background:rgba(6,9,14,.82);border:1px solid var(--stroke-gold);
  color:var(--gold);font-size:24px;line-height:1;cursor:pointer;
  display:grid;place-items:center;transition:background var(--t),opacity var(--t);
}
.space-nav:hover{background:var(--gold);color:#06090e}
.space-nav[disabled]{opacity:.25;pointer-events:none}
.space-nav--prev{inset-inline-start:-6px}
.space-nav--next{inset-inline-end:-6px}
@media (max-width:900px){
  /* on a touch screen the thumb does the work; the arrows only take up room */
  .space-nav{display:none}
  .space-slide{flex-basis:min(72vw,300px)}
  .space-set__head h3{font-size:17px}
}

.yt-more{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---- Google reviews ------------------------------------------------------
   The score sits above the rail so the proof lands before the reading does. */
.gscore{
  display:flex;align-items:baseline;justify-content:center;gap:12px;flex-wrap:wrap;
  margin-block-end:var(--sp-6);
}
.gscore__num{font-size:clamp(38px,4.4vw,54px);font-weight:800;color:var(--gold);line-height:1}
.gscore__stars{font-size:22px;color:var(--gold);letter-spacing:2px}
.gscore__meta{color:var(--text-2);font-size:15.5px}
.gscore__meta strong{color:var(--text)}

.reviews-rail{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.reviews-rail__loading{grid-column:1/-1;text-align:center;color:var(--muted);padding-block:var(--sp-5)}
.gcard{
  position:relative;background:var(--surface-1);border:1px solid var(--stroke);
  border-radius:var(--r-lg);padding:var(--sp-5);display:flex;flex-direction:column;gap:10px;
}
.gcard__mark{
  position:absolute;inset-block-start:14px;inset-inline-end:16px;
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:#fff;color:#4285F4;font-weight:800;font-size:16px;
}
.gcard__stars{color:var(--gold);font-size:17px;letter-spacing:2px}
.gcard__text{color:var(--text-2);font-size:15.5px;line-height:1.9;margin:0}
.gcard__by{display:flex;flex-direction:column;gap:2px;margin-block-start:auto;padding-block-start:8px}
.gcard__by strong{color:var(--text);font-size:15px}
.gcard__by span{color:var(--muted);font-size:13px}
@media (max-width:760px){
  .reviews-rail{grid-template-columns:1fr}
  .gscore{gap:8px}
}


/* the honeypot must be reachable by nothing and invisible to everyone */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
/* and the form has to be able to say when it failed, not only when it worked */
.form-note{
  display:none;margin-block-start:var(--sp-4);padding:14px 16px;
  border-radius:var(--r-md);background:rgba(190,70,60,.12);
  border:1px solid rgba(220,110,100,.35);color:#f3c9c4;font-size:15px;line-height:1.7;
}
.form-note.is-visible{display:block}
/* the legal pages: one narrow column, generous leading, nothing decorative */
.legal{width:min(100% - 32px, 760px);margin-inline:auto}
.legal__intro{font-size:17px;line-height:1.95;color:var(--text-2);
  padding-block-end:var(--sp-5);border-block-end:1px solid var(--stroke)}
.legal h2{font-size:19px;line-height:1.6;margin-block:var(--sp-6) var(--sp-3);color:var(--gold)}
.legal ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.legal li{position:relative;padding-inline-start:20px;font-size:16px;line-height:1.9;color:var(--text-2)}
.legal li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:13px;
  width:7px;height:7px;border-radius:50%;background:var(--gold);opacity:.65}
.legal__foot{margin-block-start:var(--sp-7);padding-block-start:var(--sp-5);
  border-block-start:1px solid var(--stroke);color:var(--muted);font-size:15px;line-height:1.9}
.legal__foot a{color:var(--gold)}
@media (max-width:760px){ .legal h2{font-size:17.5px} .legal li{font-size:15.5px} }

.form-note__wa{
  display:inline-flex;align-items:center;min-height:40px;padding-inline:4px;
  color:var(--gold);font-weight:700;text-decoration:underline;text-underline-offset:3px;
}


/* inside an article the video keeps to the reading column */
.article-body > .yt-grid{
  width:min(100% - 40px, 840px);margin-inline:auto;margin-block:var(--sp-7);
}
.article-body > .yt-grid--one{width:min(100% - 40px, var(--measure))}

@media (max-width:760px){
  .yt-grid{grid-template-columns:1fr;gap:var(--sp-4)}
  .yt__title{font-size:14.5px}
}

/* ==========================================================================
   16. WOOCOMMERCE — the booking flow wears the site's clothes
   There is no card payment here: the cart is a review screen, the checkout is
   a request form, and the thank-you page hands over an order number, the bank
   details and a way to reach a human. These rules dress WooCommerce's own
   markup rather than replacing it, so orders keep working as WooCommerce
   intends while looking like the rest of the site.
   ========================================================================== */
.woocommerce, .woocommerce-page{color:var(--text-2)}
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce .button.alt{
  background:var(--gold);color:#06090e;border-radius:var(--r-pill);
  padding:14px 26px;font-weight:700;font-size:15.5px;border:0;
  min-height:48px;display:inline-flex;align-items:center;justify-content:center;
  transition:filter var(--t),transform var(--t);
}
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce .button.alt:hover{filter:brightness(1.07);transform:translateY(-1px);color:#06090e}
.woocommerce .button.alt{width:100%}

.woocommerce table.shop_table{
  border:1px solid var(--stroke);border-radius:var(--r-lg);overflow:hidden;
  background:var(--surface-1);border-collapse:separate;border-spacing:0;
}
.woocommerce table.shop_table th{
  background:rgba(255,255,255,.03);color:var(--text);font-weight:700;
  padding:16px;font-size:15px;border-bottom:1px solid var(--stroke);
}
.woocommerce table.shop_table td{padding:16px;border-bottom:1px solid var(--stroke);color:var(--text-2)}
.woocommerce table.shop_table tr:last-child td{border-bottom:0}
.woocommerce table.shop_table img{width:64px;border-radius:10px}
.woocommerce .cart_totals h2,.woocommerce-checkout h3,.woocommerce-billing-fields h3{
  font-size:19px;color:var(--text);margin-block-end:var(--sp-4);
}
.woocommerce .quantity .qty{
  background:var(--surface-2);border:1px solid var(--stroke);color:var(--text);
  border-radius:10px;padding:10px;min-height:44px;font-size:16px;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-checkout .select2-container .select2-selection{
  background:var(--surface-2);border:1px solid var(--stroke);color:var(--text);
  border-radius:12px;padding:13px 15px;font-size:16px;min-height:50px;width:100%;
}
.woocommerce form .form-row label{color:var(--text);font-weight:600;margin-block-end:7px;display:block}
.woocommerce form .form-row .required{color:var(--gold);text-decoration:none}
.woocommerce-checkout #payment{
  background:var(--surface-1);border:1px solid var(--stroke);border-radius:var(--r-lg);padding:var(--sp-5);
}
.woocommerce-checkout #payment ul.payment_methods{border-bottom:1px solid var(--stroke);padding:0 0 var(--sp-4)}
.woocommerce-checkout #payment ul.payment_methods li{list-style:none;margin-block-end:12px}
.woocommerce-checkout #payment div.payment_box{
  background:rgba(211,178,76,.08);border:1px solid var(--stroke-gold);
  border-radius:12px;color:var(--text-2);font-size:14.5px;line-height:1.8;
}
.woocommerce-checkout #payment div.payment_box::before{display:none}
.woocommerce .woocommerce-info,.woocommerce .woocommerce-message{
  background:var(--surface-1);border-block-start:2px solid var(--gold);
  border-radius:var(--r-md);color:var(--text-2);
}
.woocommerce .woocommerce-info::before,.woocommerce .woocommerce-message::before{color:var(--gold)}
.woocommerce ul.order_details{
  display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  padding:0;margin-block:var(--sp-5);list-style:none;
}
.woocommerce ul.order_details li{
  background:var(--surface-1);border:1px solid var(--stroke);border-radius:var(--r-md);
  padding:14px 16px;color:var(--muted);font-size:13.5px;border-inline-start:2px solid var(--gold);
}
.woocommerce ul.order_details li strong{display:block;color:var(--text);font-size:16px;margin-block-start:4px}

/* the thank-you block: order number first, then how to reach us */
.thanks{
  background:var(--surface-1);border:1px solid var(--stroke-gold);
  border-radius:var(--r-xl);padding:var(--sp-6);margin-block:var(--sp-6);text-align:center;
}
.thanks__lead{font-size:20px;color:var(--text);margin:0 0 var(--sp-4)}
.thanks__num{
  display:inline-flex;flex-direction:column;gap:4px;align-items:center;
  background:rgba(211,178,76,.12);border:1px dashed var(--stroke-gold);
  border-radius:var(--r-lg);padding:14px 30px;margin-block-end:var(--sp-4);
}
.thanks__num span{font-size:13.5px;color:var(--muted)}
.thanks__num strong{font-size:30px;color:var(--gold);font-variant-numeric:tabular-nums;line-height:1.2}
.thanks__note{color:var(--text-2);font-size:15.5px;line-height:1.9;margin:0 auto var(--sp-5);max-width:56ch}
.thanks__actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

.woocommerce ul.products{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin:0;padding:0}
.woocommerce ul.products li.product{
  list-style:none;background:var(--surface-1);border:1px solid var(--stroke);
  border-radius:var(--r-lg);overflow:hidden;padding:0 0 var(--sp-4);width:auto!important;margin:0!important;float:none!important;
}
.woocommerce ul.products li.product img{margin:0 0 var(--sp-4);width:100%}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size:17px;color:var(--text);padding-inline:var(--sp-4);
}
.woocommerce ul.products li.product .price{color:var(--gold);font-weight:700;padding-inline:var(--sp-4);display:block}
.woocommerce ul.products li.product .button{margin-inline:var(--sp-4)}
.woocommerce span.onsale{background:var(--gold);color:#06090e}
.woocommerce .woocommerce-breadcrumb{display:none}

@media (max-width:760px){
  .woocommerce table.shop_table th,.woocommerce table.shop_table td{padding:12px;font-size:14px}
  .thanks{padding:var(--sp-5)}
  .thanks__num strong{font-size:26px}
  .thanks__actions .btn{width:100%}
}