/* ===== 00-tokens.css ===== */
/* ==========================================================================
   DOSHERM DESIGN TOKENS
   Colors sampled directly from the official logo (assets/images/logo/dosherm-logo.png):
     - Wordmark blue   -> #0A35A3
     - Swoosh blue     -> #0083D8
     - Wordmark orange -> #FE8C08
     - Swoosh/tagline orange -> #F2520A
     - Sparkle gold    -> #FDA010
     - Subtitle slate  -> #58617B
   ========================================================================== */

:root{
  /* ---------- Brand color ramps ---------- */
  --color-blue-950:#050F26;
  --color-blue-900:#071A42;   /* deep navy — footer / dark sections */
  --color-blue-800:#0A2568;
  --color-blue-700:#0C2E85;
  --color-blue-600:#0E3499;   /* primary brand blue (wordmark) */
  --color-blue-500:#0F6FCB;
  --color-blue-400:#0083D8;   /* bright swoosh blue */
  --color-blue-100:#E4EFFC;
  --color-blue-50:#F2F7FD;

  --color-orange-700:#C7420A;
  --color-orange-600:#F0530C; /* deep brand orange (swoosh / tagline) */
  --color-orange-500:#F97A0B;
  --color-orange-400:#FD9A10; /* bright orange (wordmark gradient) */
  --color-orange-300:#FDA010; /* sparkle gold */
  --color-orange-100:#FFEBD9;
  --color-orange-50:#FFF5EB;

  --color-white:#FFFFFF;
  --color-soft-bg:#F6F9FC;
  --color-soft-bg-alt:#F0F4FA;

  --color-text-primary:#111827;
  --color-text-secondary:#57607A;
  --color-text-muted:#8A94A6;
  --color-text-on-dark:#EAF0FB;
  --color-text-on-dark-muted:#9FB0D1;

  --color-border:#E4E9F2;
  --color-border-dark:rgba(255,255,255,.12);

  --color-success:#1F9D63;
  --color-error:#D6432C;

  /* ---------- Semantic aliases ---------- */
  --brand-blue:var(--color-blue-600);
  --brand-blue-bright:var(--color-blue-400);
  --brand-orange:var(--color-orange-600);
  --brand-orange-bright:var(--color-orange-400);
  --brand-navy:var(--color-blue-900);
  --brand-gold:var(--color-orange-300);

  /* ---------- Typography ---------- */
  --font-heading:'Manrope', 'Segoe UI', sans-serif;
  --font-body:'Inter', 'Segoe UI', sans-serif;

  --fs-hero: clamp(2.35rem, 3.6vw + 1rem, 4.65rem);
  --fs-h1: clamp(2.25rem, 2.6vw + 1.2rem, 3.5rem);
  --fs-h2: clamp(1.9rem, 2vw + 1.1rem, 2.75rem);
  --fs-h3: clamp(1.4rem, 1vw + 1rem, 1.85rem);
  --fs-h4: clamp(1.15rem, .5vw + 1rem, 1.35rem);
  --fs-lead: clamp(1.05rem, .4vw + .95rem, 1.25rem);
  --fs-body: 1.0625rem;
  --fs-small: .9375rem;
  --fs-xs: .8125rem;
  --fs-eyebrow: .8125rem;

  --lh-tight: 1.12;
  --lh-heading: 1.22;
  --lh-body: 1.7;

  --tracking-tight: -0.02em;
  --tracking-eyebrow: .16em;

  /* ---------- Spacing scale ---------- */
  --space-3xs: .25rem;
  --space-2xs: .5rem;
  --space-xs: .75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 6.5rem;
  --space-4xl: 9rem;

  --section-pad-y: clamp(3.5rem, 6vw, 7rem);
  --section-pad-y-sm: clamp(2.5rem, 4vw, 4rem);

  /* ---------- Layout ---------- */
  --container-max: 1280px;
  --container-pad: clamp(1.25rem, 4vw, 2.5rem);
  --content-max: 720px;

  /* ---------- Radius ---------- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-sm: 0 2px 8px rgba(7,26,66,.06);
  --shadow-md: 0 12px 28px -8px rgba(7,26,66,.16);
  --shadow-lg: 0 24px 56px -16px rgba(7,26,66,.22);
  --shadow-glow-blue: 0 18px 40px -12px rgba(14,52,153,.35);
  --shadow-glow-orange: 0 18px 40px -12px rgba(240,83,12,.35);

  /* ---------- Motion ---------- */
  --ease-premium: cubic-bezier(.16,.84,.32,1);
  --ease-out-soft: cubic-bezier(.22,.61,.36,1);
  --dur-fast: .22s;
  --dur-base: .4s;
  --dur-slow: .7s;

  /* ---------- Z-index ---------- */
  --z-nav: 1000;
  --z-modal: 1200;
  --z-preloader: 1400;
  --z-floating: 900;
  --z-mobile-menu: 1100;
}

@media (max-width: 768px){
  :root{
    --section-pad-y: clamp(2.75rem, 8vw, 4rem);
    --section-pad-y-sm: clamp(2rem, 6vw, 3rem);
  }
}


/* ===== 01-base.css ===== */
/* ==========================================================================
   BASE / RESET / TYPOGRAPHY
   ========================================================================== */

*,*::before,*::after{ box-sizing:border-box; }
html{
  scroll-behavior:auto; /* Lenis handles smooth scroll in JS */
  -webkit-text-size-adjust:100%;
  /* Belt-and-suspenders: overflow-x:hidden on body alone does not reliably
     stop the root scroller from being dragged/scrolled sideways in every
     browser — setting it on html too closes that gap so a stray oversized
     element can never produce an actual horizontal scroll gesture. */
  overflow-x:hidden;
}
html.has-lenis{ scroll-behavior:auto; }

body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--color-text-primary);
  background:var(--color-white);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

body.no-scroll{ overflow:hidden; height:100%; }

img,svg,video{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
ul,ol{ margin:0; padding:0; list-style:none; }
p{ margin:0; }
input,textarea,select{ font:inherit; color:inherit; }

::selection{ background:var(--brand-orange); color:var(--color-white); }

:focus-visible{
  outline:2px solid var(--brand-blue-bright);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------- Branded scrollbar ----------
   Native browser scrollbar re-themed to the Dosherm palette instead of
   the plain grey OS default: a soft-tinted track with a navy/blue thumb
   that brightens to the brand orange on hover, matching the rest of the
   site's brand color use (::selection above, buttons, links, etc). */
html{
  scrollbar-width:thin; /* Firefox */
  scrollbar-color:var(--brand-blue) var(--color-soft-bg-alt); /* Firefox: thumb track */
}
::-webkit-scrollbar{ width:12px; height:12px; }
::-webkit-scrollbar-track{ background:var(--color-soft-bg-alt); }
::-webkit-scrollbar-thumb{
  background-color:var(--brand-blue);
  border-radius:var(--radius-pill);
  border:3px solid var(--color-soft-bg-alt);
}
::-webkit-scrollbar-thumb:hover{ background-color:var(--brand-orange); }
::-webkit-scrollbar-corner{ background:var(--color-soft-bg-alt); }

h1,h2,h3,h4,h5,h6{
  font-family:var(--font-heading);
  font-weight:800;
  line-height:var(--lh-heading);
  letter-spacing:var(--tracking-tight);
  margin:0;
  color:var(--color-text-primary);
}
h1{ font-size:var(--fs-h1); line-height:var(--lh-tight); }
h2{ font-size:var(--fs-h2); line-height:var(--lh-tight); }
h3{ font-size:var(--fs-h3); }
h4{ font-size:var(--fs-h4); }

.lead{ font-size:var(--fs-lead); color:var(--color-text-secondary); line-height:1.6; }
.text-muted{ color:var(--color-text-muted); }
.text-secondary{ color:var(--color-text-secondary); }

/* Eyebrow / kicker label used above section headings */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.55em;
  font-family:var(--font-heading);
  font-weight:700;
  font-size:var(--fs-eyebrow);
  letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;
  color:var(--brand-orange);
}
.eyebrow::before{
  content:"";
  width:22px; height:2px;
  border-radius:2px;
  background:var(--brand-orange);
  flex:0 0 auto;
}

/* ---------- Layout helpers ---------- */
.container{
  width:100%;
  max-width:var(--container-max);
  margin-inline:auto;
  padding-inline:var(--container-pad);
}
.container--narrow{ max-width:900px; }
.container--content{ max-width:var(--content-max); }
/* Wider than article body copy (--content-max) but short of the full
   container — the FAQ previously reused --content-max and read as
   cramped for a two-line-question accordion list. */
.container--faq{ max-width:860px; }

section{ position:relative; }
.section{ padding-block:var(--section-pad-y); }
.section--sm{ padding-block:var(--section-pad-y-sm); }
.section--tight-top{ padding-top:0; }
.section--soft{ background:var(--color-soft-bg); }
.section--navy{ background:var(--brand-navy); color:var(--color-text-on-dark); }
.section--navy h1,.section--navy h2,.section--navy h3{ color:var(--color-white); }

.section-head{
  max-width:640px;
  margin-bottom:clamp(2rem,4vw,3.25rem);
}
.section-head--center{ margin-inline:auto; text-align:center; }
.section-head h2{ margin-top:var(--space-sm); }
.section-head .lead{ margin-top:var(--space-sm); }

.visually-hidden{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

.skip-link{
  position:fixed;
  top:-60px; left:1rem;
  background:var(--brand-navy);
  color:#fff;
  padding:.75rem 1.25rem;
  border-radius:var(--radius-sm);
  z-index:2000;
  transition:top var(--dur-fast) var(--ease-out-soft);
}
.skip-link:focus{ top:1rem; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}


/* ===== 02-buttons.css ===== */
/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn{
  --btn-pad-y: .95rem;
  --btn-pad-x: 1.9rem;
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  font-family:var(--font-heading);
  font-weight:700;
  font-size:.9375rem;
  letter-spacing:.01em;
  padding:var(--btn-pad-y) var(--btn-pad-x);
  border-radius:var(--radius-pill);
  border:1px solid transparent;
  white-space:nowrap;
  isolation:isolate;
  transition:transform var(--dur-fast) var(--ease-out-soft),
             box-shadow var(--dur-fast) var(--ease-out-soft),
             background-color var(--dur-fast) var(--ease-out-soft),
             color var(--dur-fast) var(--ease-out-soft),
             border-color var(--dur-fast) var(--ease-out-soft);
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn i,.btn svg{ font-size:.9em; }

.btn .btn-arrow{
  display:inline-flex;
  transition:transform var(--dur-base) var(--ease-premium);
}
.btn:hover .btn-arrow{ transform:translateX(4px); }

/* Primary — solid brand blue */
.btn--primary{
  color:#fff;
  background:var(--brand-blue);
  border-color:var(--brand-blue);
  box-shadow:var(--shadow-sm);
}
.btn--primary:hover{
  background:var(--color-blue-700);
  border-color:var(--color-blue-700);
  box-shadow:var(--shadow-md);
}

/* Secondary — outline, for light backgrounds */
.btn--secondary{
  color:var(--brand-blue);
  background:var(--color-white);
  border-color:var(--color-border);
  box-shadow:var(--shadow-sm);
}
.btn--secondary:hover{
  border-color:var(--brand-blue);
  color:var(--brand-blue);
  box-shadow:var(--shadow-md);
}

/* Ghost — for dark / navy backgrounds */
.btn--ghost{
  color:var(--color-white);
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.28);
  backdrop-filter:blur(6px);
}
.btn--ghost:hover{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.5);
}

/* Ghost on light backgrounds (e.g. light hero) */
.btn--ghost-light{
  color:var(--brand-navy);
  background:var(--color-white);
  border-color:var(--color-border);
}
.btn--ghost-light:hover{
  border-color:var(--brand-blue);
  box-shadow:var(--shadow-sm);
}

/* Text link button */
.btn--text{
  padding:0;
  border-radius:0;
  color:var(--brand-blue);
  font-weight:700;
}
.btn--text::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-3px;
  height:2px;
  background:var(--brand-orange);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--dur-base) var(--ease-premium);
}
.btn--text:hover::after{ transform:scaleX(1); }
.btn--text:hover{ transform:none; }

.btn--sm{ --btn-pad-y:.7rem; --btn-pad-x:1.35rem; font-size:.875rem; }
.btn--lg{ --btn-pad-y:1.1rem; --btn-pad-x:2.35rem; font-size:1rem; }
.btn--block{ width:100%; }

.btn--icon-only{
  padding:0;
  width:3rem; height:3rem;
  border-radius:50%;
}

.btn-group{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1rem;
}


/* ===== 03-brand-fx.css ===== */
/* ==========================================================================
   SIGNATURE BRAND MOTIFS — swoosh, sparkle, glow orbs, shine
   Low-opacity, GPU-friendly (transform/opacity only), decorative only
   (aria-hidden in markup). Reused across hero, banners, CTA, footer.
   ========================================================================== */

.brand-fx{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}

/* ---------- Swoosh (logo-inspired curved arc) ---------- */
.swoosh{
  position:absolute;
  width:140%;
  max-width:1400px;
  aspect-ratio:2/1;
  opacity:.5;
}
.swoosh svg{ width:100%; height:100%; }
.swoosh--top-right{ top:-18%; right:-20%; }
.swoosh--bottom-left{ bottom:-22%; left:-24%; transform:rotate(180deg); }
.swoosh--faint{ opacity:.22; }

.section--navy .swoosh{ opacity:.9; }

/* ---------- Soft gradient orbs ---------- */
.glow-orb{
  position:absolute;
  border-radius:50%;
  filter:blur(60px);
  opacity:.35;
  will-change:transform;
}
.glow-orb--blue{ background:var(--color-blue-400); opacity:.14; }
.glow-orb--orange{ background:var(--color-orange-400); opacity:.14; }

/* ---------- Sparkles ---------- */
.sparkle{
  position:absolute;
  color:var(--brand-gold);
  opacity:0;
  transform-origin:center;
}
.sparkle svg{ width:100%; height:100%; display:block; }

@keyframes sparkle-pop{
  0%{ opacity:0; transform:scale(.4) rotate(-8deg); }
  35%{ opacity:1; transform:scale(1) rotate(0deg); }
  70%{ opacity:1; transform:scale(.92) rotate(4deg); }
  100%{ opacity:0; transform:scale(.4) rotate(10deg); }
}
.sparkle.is-animating{ animation:sparkle-pop 2.6s var(--ease-out-soft) infinite; }

@media (prefers-reduced-motion: reduce){
  .sparkle.is-animating{ animation:none; opacity:.6; }
}


/* ===== 04-cards.css ===== */
/* ==========================================================================
   CARDS — service, testimonial, blog, value, FAQ
   ========================================================================== */

/* ---------- Service card ---------- */
.service-card{
  position:relative;
  display:flex;
  flex-direction:column;
  background:var(--color-white);
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--color-border);
  transition:border-color var(--dur-base) var(--ease-premium),
             background var(--dur-base) var(--ease-premium);
  height:100%;
}
.service-card:hover{
  border-color:var(--brand-blue);
}

.service-card__media{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--color-soft-bg-alt);
}
.service-card__media img,
.service-card__media .img-placeholder{ transition:transform .8s var(--ease-premium); }
.service-card:hover .service-card__media img,
.service-card:hover .service-card__media .img-placeholder{ transform:scale(1.07); }

.service-card__number{
  position:absolute;
  top:1rem; left:1rem;
  width:2.6rem; height:2.6rem;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(7,26,66,.55);
  backdrop-filter:blur(6px);
  color:#fff;
  font-family:var(--font-heading);
  font-weight:700;
  font-size:.9rem;
  z-index:1;
}

.service-card__body{
  padding:1.6rem 1.6rem 1.8rem;
  display:flex;
  flex-direction:column;
  gap:.6rem;
  flex:1;
}
.service-card__category{
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--brand-orange);
}
.service-card__title{ font-size:1.3rem; }
.service-card__desc{ color:var(--color-text-secondary); font-size:.95rem; flex:1; }

.service-card__link{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  margin-top:.4rem;
  font-family:var(--font-heading);
  font-weight:700;
  font-size:.9rem;
  color:var(--brand-blue);
}
.service-card__link i{ transition:transform var(--dur-base) var(--ease-premium); }
.service-card:hover .service-card__link i{ transform:translateX(5px); }

/* ---------- Image placeholder (used until real photography is supplied) ---------- */
.img-placeholder{
  width:100%; height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:.5rem;
  background:var(--color-soft-bg-alt);
  color:var(--color-text-muted);
  text-align:center;
  padding:1rem;
}
.img-placeholder i{ font-size:1.6rem; color:var(--brand-blue); opacity:.55; }
.img-placeholder span{ font-size:.75rem; font-weight:600; letter-spacing:.03em; }

/* Real photography dropped into media containers fills them, cropped, no distortion */
.service-card__media img,
.about-story__media img,
.about-story__media--secondary img,
.hero__media img,
.gallery-item img,
.blog-card__media img,
.article__cover img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ---------- Testimonial card ---------- */
.testimonial-card{
  position:relative;
  background:var(--color-white);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:2.1rem 2rem 1.9rem;
  height:100%;
  display:flex;
  flex-direction:column;
  gap:1.1rem;
  box-shadow:var(--shadow-sm);
}
.testimonial-card__quote-icon{
  position:absolute;
  top:1.5rem; right:1.75rem;
  font-size:1.7rem;
  color:var(--color-blue-100);
  line-height:1;
}
.testimonial-card__rating{
  display:flex;
  gap:.2rem;
  color:var(--brand-orange);
  font-size:.9rem;
}
.testimonial-card__quote{
  font-family:var(--font-body);
  font-size:1.05rem;
  line-height:1.6;
  color:var(--color-text-primary);
  flex:1;
  padding-right:1.5rem;
}
.testimonial-card__author{
  display:flex;
  align-items:center;
  gap:.9rem;
  padding-top:1rem;
  border-top:1px solid var(--color-border);
}
.testimonial-card__avatar{
  width:3rem; height:3rem;
  border-radius:50%;
  background:var(--brand-blue);
  border:2px solid var(--color-blue-100);
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  font-family:var(--font-heading);
  font-weight:700;
  font-size:1.05rem;
  flex:0 0 auto;
}
.testimonial-card__name{ font-weight:700; font-size:.95rem; }
.testimonial-card__meta{ font-size:.82rem; color:var(--color-text-muted); }
.testimonial-card--placeholder{ border-style:dashed; }
.placeholder-tag{
  display:inline-block;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--brand-orange);
  background:var(--color-orange-50);
  border-radius:var(--radius-pill);
  padding:.2rem .6rem;
  align-self:flex-start;
}

/* ---------- Blog card ---------- */
.blog-card{
  display:flex;
  flex-direction:column;
  background:var(--color-white);
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--color-border);
  transition:transform var(--dur-base) var(--ease-premium), box-shadow var(--dur-base) var(--ease-premium);
  height:100%;
}
.blog-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.blog-card__media{ aspect-ratio:16/10; overflow:hidden; }
.blog-card__media img,.blog-card__media .img-placeholder{ transition:transform .8s var(--ease-premium); }
.blog-card:hover .blog-card__media img,.blog-card:hover .blog-card__media .img-placeholder{ transform:scale(1.06); }
.blog-card__body{ padding:1.5rem; display:flex; flex-direction:column; gap:.65rem; flex:1; }
.blog-card__meta{
  display:flex; align-items:center; gap:.6rem;
  font-size:.8rem; color:var(--color-text-muted);
}
.blog-card__category{
  color:var(--brand-orange); font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; font-size:.72rem;
}
.blog-card__title{ font-size:1.2rem; }
.blog-card__excerpt{ color:var(--color-text-secondary); font-size:.92rem; flex:1; }
.blog-card__readmore{
  display:inline-flex; align-items:center; gap:.5rem;
  font-weight:700; font-size:.85rem; color:var(--brand-blue);
  font-family:var(--font-heading);
}
.blog-card__readmore i{ transition:transform var(--dur-base) var(--ease-premium); }
.blog-card:hover .blog-card__readmore i{ transform:translateX(5px); }

/* ---------- Value / feature card ---------- */
.value-card{
  padding:1.85rem 1.75rem 2rem;
  border-radius:var(--radius-lg);
  background:var(--color-white);
  border:1px solid var(--color-border);
  border-top:3px solid var(--brand-blue);
  height:100%;
  transition:transform var(--dur-base) var(--ease-premium), box-shadow var(--dur-base) var(--ease-premium);
}
.value-card:nth-child(even){ border-top-color:var(--brand-orange); }
.value-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.value-card__icon{
  width:3.25rem; height:3.25rem;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--color-blue-50);
  color:var(--brand-blue);
  font-size:1.3rem;
  margin-bottom:1.25rem;
}
.value-card:nth-child(even) .value-card__icon{ background:var(--color-orange-50); color:var(--brand-orange); }
.value-card__title{ font-size:1.12rem; margin-bottom:.5rem; letter-spacing:-.01em; }
.value-card__desc{ color:var(--color-text-secondary); font-size:.93rem; line-height:1.55; }

/* ---------- FAQ item ---------- */
.faq-item{
  border-bottom:1px solid var(--color-border);
}
.faq-item__trigger{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1.35rem .25rem;
  text-align:left;
  font-family:var(--font-heading);
  font-weight:700;
  font-size:1.02rem;
}
.faq-item__icon{
  flex:0 0 auto;
  width:2rem; height:2rem;
  border-radius:50%;
  border:1px solid var(--color-border);
  display:flex; align-items:center; justify-content:center;
  position:relative;
  transition:background var(--dur-fast), border-color var(--dur-fast);
}
.faq-item__icon::before,.faq-item__icon::after{
  content:"";
  position:absolute;
  background:var(--brand-blue);
  transition:transform var(--dur-base) var(--ease-premium), background var(--dur-fast);
}
.faq-item__icon::before{ width:10px; height:2px; }
.faq-item__icon::after{ width:2px; height:10px; }
.faq-item.is-open .faq-item__icon::after{ transform:rotate(90deg) scaleY(0); }
.faq-item.is-open .faq-item__icon{ background:var(--brand-blue); border-color:transparent; }
.faq-item.is-open .faq-item__icon::before{ background:#fff; }

.faq-item__panel{
  overflow:hidden;
  height:0;
  transition:height var(--dur-base) var(--ease-premium);
}
.faq-item__panel-inner{
  padding:0 .25rem 1.4rem;
  color:var(--color-text-secondary);
  font-size:.96rem;
  max-width:65ch;
}

/* ---------- Trust band (stats) — light, subtle brand accents ---------- */
.trust-band{
  background:var(--color-soft-bg);
  border-top:1px solid var(--color-border);
  border-bottom:1px solid var(--color-border);
}
.stat-tile{
  text-align:center;
  padding:2rem 1.5rem 2.1rem;
  position:relative;
  background:var(--color-white);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  transition:transform var(--dur-base) var(--ease-premium), box-shadow var(--dur-base) var(--ease-premium);
}
.stat-tile:hover{ transform:translateY(-3px); box-shadow:var(--shadow-sm); }
.stat-tile__icon{
  width:3rem; height:3rem;
  margin:0 auto 1rem;
  border-radius:50%;
  background:var(--color-blue-50);
  border:1px solid var(--color-blue-100);
  color:var(--brand-blue);
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem;
}
.stat-tile:nth-child(even) .stat-tile__icon{ background:var(--color-orange-50); border-color:transparent; color:var(--brand-orange); }
.stat-tile__value{
  font-family:var(--font-heading);
  font-weight:800;
  font-size:clamp(2.1rem,3vw,3.2rem);
  color:var(--brand-navy);
  line-height:1;
}
.stat-tile__label{
  margin-top:.5rem;
  font-size:.92rem;
  color:var(--color-text-primary);
  font-weight:700;
}
.stat-tile__desc{
  margin-top:.5rem;
  font-size:.82rem;
  line-height:1.5;
  color:var(--color-text-muted);
}

/* ---------- Process step ---------- */
.process-step{
  position:relative;
  padding:1.75rem 1.5rem;
  border-radius:var(--radius-lg);
  background:var(--color-white);
  border:1px solid var(--color-border);
  height:100%;
}
.process-step__index{
  font-family:var(--font-heading);
  font-weight:800;
  font-size:1.05rem;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.6rem;
  height:2.6rem;
  border-radius:50%;
  background:var(--color-blue-50);
  color:var(--brand-blue);
}
.process-step__title{ margin-top:.75rem; font-size:1.08rem; }
.process-step__desc{ margin-top:.4rem; color:var(--color-text-secondary); font-size:.92rem; }


/* ===== 05-navbar.css ===== */
/* ==========================================================================
   NAVBAR (desktop + services dropdown) + MOBILE MENU
   ========================================================================== */

.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:var(--z-nav);
  padding-block:1.1rem;
  transition:padding var(--dur-base) var(--ease-premium),
             box-shadow var(--dur-base) var(--ease-premium),
             border-color var(--dur-base) var(--ease-premium);
  background:var(--color-white);
  border-bottom:1px solid var(--color-border);
}
.site-header.is-scrolled{
  padding-block:.7rem;
  box-shadow:0 8px 30px -12px rgba(7,26,66,.14);
}
.site-header .nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
}

.brand{
  display:flex;
  align-items:center;
  gap:.7rem;
  flex:0 0 auto;
}
.brand img{ height:44px; width:auto; transition:height var(--dur-base) var(--ease-premium); }
.site-header.is-scrolled .brand img{ height:38px; }

.nav-primary{
  display:flex;
  align-items:center;
  gap:.35rem;
}
.nav-link{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.6rem .95rem;
  font-family:var(--font-heading);
  font-weight:700;
  font-size:.92rem;
  color:var(--color-text-primary);
  border-radius:var(--radius-pill);
  transition:color var(--dur-fast), background var(--dur-fast);
}

.nav-link:hover{ background:var(--color-soft-bg); color:var(--brand-blue); }

.nav-link.is-active{ color:var(--brand-blue); }
.nav-link.is-active::after{
  content:"";
  position:absolute;
  left:1rem; right:1rem; bottom:.15rem;
  height:2px;
  border-radius:2px;
  background:var(--brand-orange);
}

.nav-link__caret{ font-size:.65rem; transition:transform var(--dur-base) var(--ease-premium); }
.nav-item--dropdown:hover .nav-link__caret,
.nav-item--dropdown.is-open .nav-link__caret{ transform:rotate(180deg); }

.nav-actions{ display:flex; align-items:center; gap:.6rem; }

.qr-btn{
  width:2.6rem; height:2.6rem;
  border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--color-border);
  color:var(--brand-blue);
  background:#fff;
  transition:transform var(--dur-fast), box-shadow var(--dur-fast), border-color var(--dur-fast);
}
.qr-btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }

/* ---------- Desktop Services dropdown ---------- */
.nav-item--dropdown{ position:relative; }
/* Invisible hit-area bridge closes the gap between the trigger and the
   panel below it so :hover never lapses while the pointer travels down —
   fixes the dropdown disappearing when moving the mouse into it. */
.nav-item--dropdown::after{
  content:"";
  position:absolute;
  left:0; right:0;
  top:100%;
  height:1.4rem;
}
.services-dropdown{
  position:absolute;
  top:calc(100% + .35rem);
  left:50%;
  transform:translate(-50%,6px);
  width:min(280px, 92vw);
  background:#fff;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  border:1px solid var(--color-border);
  padding:.6rem;
  display:flex;
  flex-direction:column;
  gap:.15rem;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity var(--dur-base) var(--ease-premium),
             transform var(--dur-base) var(--ease-premium),
             visibility 0s linear var(--dur-base);
}
.nav-item--dropdown:hover .services-dropdown,
.nav-item--dropdown.is-open .services-dropdown{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate(-50%,0);
  transition:opacity var(--dur-base) var(--ease-premium),
             transform var(--dur-base) var(--ease-premium),
             visibility 0s linear;
}
.services-dropdown__link{
  display:flex;
  align-items:center;
  gap:.7rem;
  padding:.6rem .6rem;
  border-radius:var(--radius-md);
  transition:background var(--dur-fast);
}
.services-dropdown__link:hover{ background:var(--color-soft-bg); }
.services-dropdown__icon{
  flex:0 0 auto;
  width:2rem; height:2rem;
  border-radius:var(--radius-sm);
  background:var(--color-blue-50);
  color:var(--brand-blue);
  display:flex; align-items:center; justify-content:center;
  font-size:.85rem;
}
.services-dropdown__title{ font-family:var(--font-heading); font-weight:700; font-size:.86rem; line-height:1.25; }
.services-dropdown__link--more{
  margin-top:.3rem;
  padding-top:.75rem;
  border-top:1px solid var(--color-border);
  border-radius:0;
}
.services-dropdown__link--more .services-dropdown__title{ color:var(--brand-blue); }
.services-dropdown__link--more .services-dropdown__icon{ background:var(--color-orange-50); color:var(--brand-orange); }

/* ---------- Hamburger ---------- */
.hamburger{
  display:none;
  width:2.75rem; height:2.75rem;
  border-radius:50%;
  border:1px solid var(--color-border);
  background:#fff;
  align-items:center;
  justify-content:center;
  position:relative;
  flex:0 0 auto;
}
.hamburger__box{ width:18px; height:12px; position:relative; }
.hamburger__line{
  position:absolute; left:0; right:0; height:2px; border-radius:2px;
  background:var(--color-text-primary);
  transition:transform var(--dur-base) var(--ease-premium), opacity var(--dur-fast), background var(--dur-fast);
}
.hamburger__line:nth-child(1){ top:0; }
.hamburger__line:nth-child(2){ top:5px; }
.hamburger__line:nth-child(3){ top:10px; }
.hamburger.is-active .hamburger__line:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.hamburger.is-active .hamburger__line:nth-child(2){ opacity:0; }
.hamburger.is-active .hamburger__line:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }

/* ---------- Mobile menu panel ---------- */
.mobile-menu{
  position:fixed;
  inset:0;
  z-index:var(--z-mobile-menu);
  visibility:hidden;
}
.mobile-menu__backdrop{
  position:absolute; inset:0;
  background:rgba(5,15,38,.55);
  backdrop-filter:blur(2px);
  opacity:0;
  transition:opacity var(--dur-base) var(--ease-premium);
}
.mobile-menu__panel{
  position:absolute;
  top:0; right:0; bottom:0;
  max-height:100vh;
  width:min(400px, 88vw);
  background:#fff;
  color:var(--color-text-primary);
  padding:1.5rem 1.5rem 2rem;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  transform:translateX(100%);
  transition:transform var(--dur-slow) var(--ease-premium);
  display:flex;
  flex-direction:column;
  gap:1.25rem;
}
.mobile-menu.is-open{ visibility:visible; }
.mobile-menu.is-open .mobile-menu__backdrop{ opacity:1; }
.mobile-menu.is-open .mobile-menu__panel{ transform:translateX(0); }

.mobile-menu__head{ display:flex; align-items:center; justify-content:space-between; flex:0 0 auto; }
.mobile-menu__head img{ height:36px; width:auto; max-width:60%; }
.mobile-menu__close{
  width:2.5rem; height:2.5rem; border-radius:50%;
  background:var(--color-soft-bg);
  color:var(--color-text-primary);
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--color-border);
  flex:0 0 auto;
}

.mobile-nav{ display:flex; flex-direction:column; }
.mobile-nav__item{ border-bottom:1px solid var(--color-border); }
.mobile-nav__link{
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem .1rem;
  font-family:var(--font-heading);
  font-weight:700;
  font-size:1.05rem;
  color:var(--color-text-primary);
  opacity:0;
  transform:translateY(14px);
}
.mobile-menu.is-open .mobile-nav__link{
  animation:mnav-in .55s var(--ease-premium) forwards;
}
.mobile-nav__link.is-active{ color:var(--brand-blue); }

@keyframes mnav-in{ to{ opacity:1; transform:translateY(0); } }

.mobile-nav__toggle{
  width:1.9rem; height:1.9rem;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:var(--color-soft-bg);
  color:var(--color-text-primary);
  transition:transform var(--dur-base) var(--ease-premium), background var(--dur-fast), color var(--dur-fast);
}
.mobile-nav__item.is-open .mobile-nav__toggle{ transform:rotate(180deg); background:var(--brand-orange); color:#fff; }

.mobile-submenu{
  height:0;
  overflow:hidden;
  transition:height var(--dur-base) var(--ease-premium);
}
.mobile-submenu__inner{ padding:.25rem 0 1rem; display:flex; flex-direction:column; gap:.15rem; }
.mobile-submenu__link{
  display:flex; align-items:center; gap:.7rem;
  padding:.65rem .5rem;
  border-radius:var(--radius-md);
  font-size:.92rem;
  color:var(--color-text-secondary);
}
.mobile-submenu__link:hover{ background:var(--color-soft-bg); color:var(--brand-blue); }
.mobile-submenu__link--more{
  margin-top:.25rem;
  padding-top:.85rem;
  border-top:1px solid var(--color-border);
  color:var(--brand-blue);
  font-weight:700;
}

.mobile-menu__cta{
  margin-top:auto;
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  gap:.85rem;
  padding-top:1rem;
  border-top:1px solid var(--color-border);
  opacity:0;
  transform:translateY(14px);
}
.mobile-menu.is-open .mobile-menu__cta{ animation:mnav-in .55s var(--ease-premium) .35s forwards; }
.mobile-menu__contact{
  display:flex; align-items:center; gap:.6rem;
  font-size:.9rem; color:var(--color-text-secondary);
}

@media (max-width: 1080px){
  .nav-primary, .nav-actions .qr-btn, .nav-actions .btn--primary{ display:none; }
  .hamburger{ display:inline-flex; }
}
@media (min-width: 1081px){
  .mobile-menu{ display:none; }
}
@media (max-width: 400px){
  .mobile-menu__panel{ width:100vw; }
}


/* ===== 06-footer.css ===== */
/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer{
  position:relative;
  background:var(--brand-navy);
  color:var(--color-text-on-dark-muted);
  overflow:hidden;
  padding-top:clamp(3.5rem,6vw,5.5rem);
}

.footer-top{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:2.5rem;
  padding-bottom:3rem;
  border-bottom:1px solid rgba(255,255,255,.1);
  position:relative;
  z-index:1;
}

.footer-brand img{ height:46px; margin-bottom:1.1rem; }
.footer-brand__desc{ font-size:.92rem; line-height:1.7; max-width:30ch; }
.footer-brand__tagline{ color:var(--brand-gold); font-weight:600; font-size:.88rem; margin-top:.6rem; }

.footer-heading{
  font-family:var(--font-heading);
  color:#fff;
  font-size:.85rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:1.2rem;
}
.footer-list{ display:flex; flex-direction:column; gap:.7rem; }
.footer-list a{ font-size:.92rem; transition:color var(--dur-fast), padding var(--dur-fast); }
.footer-list a:hover{ color:#fff; padding-left:.25rem; }

.footer-contact{ display:flex; flex-direction:column; gap:1rem; position:relative; z-index:1; }
.footer-contact li{ display:flex; align-items:flex-start; gap:.7rem; font-size:.94rem; color:rgba(255,255,255,.92); }
.footer-contact a{ color:rgba(255,255,255,.92); }
.footer-contact a:hover{ color:#fff; }
.footer-contact i{ color:var(--brand-gold); margin-top:.2rem; flex:0 0 auto; width:1.1rem; text-align:center; }

.footer-social{ display:flex; gap:.65rem; margin-top:1.4rem; position:relative; z-index:1; }
.footer-social a{
  width:2.4rem; height:2.4rem;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.16);
  display:flex; align-items:center; justify-content:center;
  transition:background var(--dur-fast), transform var(--dur-fast), border-color var(--dur-fast);
}
.footer-social a:hover{ background:var(--brand-orange); border-color:transparent; transform:translateY(-3px); }

.footer-bottom{
  position:relative; z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  padding-block:1.6rem;
  font-size:.82rem;
}
.footer-bottom__legal{ display:flex; gap:1.4rem; flex-wrap:wrap; }
.footer-bottom__legal a:hover{ color:#fff; }
.footer-credit{ color:var(--color-text-on-dark-muted); text-decoration:underline; text-underline-offset:2px; transition:color var(--dur-fast); }
.footer-credit:hover{ color:#fff; }

@media (max-width: 980px){
  .footer-top{ grid-template-columns:1fr 1fr; row-gap:2.5rem; }
}
@media (max-width: 560px){
  .footer-top{ grid-template-columns:1fr; }
  .footer-bottom{ justify-content:center; text-align:center; }
}


/* ===== 07-floating-modal.css ===== */
/* ==========================================================================
   FLOATING BUTTONS + QR MODAL + PRELOADER
   ========================================================================== */

/* ---------- Floating action stack ---------- */
.floating-stack{
  position:fixed;
  right:clamp(1rem,2.5vw,1.75rem);
  bottom:clamp(1rem,2.5vw,1.75rem);
  z-index:var(--z-floating);
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:.85rem;
}
.floating-btn{
  position:relative;
  width:3.25rem; height:3.25rem;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  font-size:1.15rem;
  box-shadow:var(--shadow-md);
  transition:transform var(--dur-fast) var(--ease-out-soft), box-shadow var(--dur-fast);
  opacity:0;
  transform:scale(.6) translateY(10px);
  pointer-events:none;
}
.floating-btn.is-visible{ opacity:1; transform:scale(1) translateY(0); pointer-events:auto; }
.floating-btn:hover{ transform:translateY(-3px) scale(1.06); }

.floating-btn--top{ background:var(--brand-navy); }
.floating-btn--whatsapp{ background:#25D366; }
.floating-btn--call{ background:var(--brand-blue); }
.floating-btn--quote{ background:var(--brand-orange); }

/* The WhatsApp glyph reads noticeably smaller than the other floating icons
   at the shared 1.15rem size — bump just this icon up without changing the
   button's own diameter. */
.floating-btn--whatsapp i{ font-size:1.55rem; }
@media (max-width: 560px){
  .floating-btn--whatsapp i{ font-size:1.35rem; }
}

.floating-btn--pulse::before{
  content:"";
  position:absolute; inset:-6px;
  border-radius:50%;
  border:2px solid currentColor;
  opacity:.55;
  animation:fbtn-pulse 2.4s var(--ease-out-soft) infinite;
}
.floating-btn--whatsapp.floating-btn--pulse::before{ color:#25D366; }
.floating-btn--call.floating-btn--pulse::before{ color:var(--brand-orange); }

@keyframes fbtn-pulse{
  0%{ transform:scale(.85); opacity:.55; }
  100%{ transform:scale(1.35); opacity:0; }
}

.floating-btn__tooltip{
  position:absolute;
  right:calc(100% + .7rem);
  top:50%; transform:translateY(-50%) translateX(6px);
  background:var(--color-text-primary);
  color:#fff;
  font-size:.78rem;
  font-weight:600;
  padding:.4rem .7rem;
  border-radius:var(--radius-sm);
  white-space:nowrap;
  opacity:0;
  visibility:hidden;
  transition:opacity var(--dur-fast), transform var(--dur-fast), visibility var(--dur-fast);
}
.floating-btn:hover .floating-btn__tooltip{ opacity:1; visibility:visible; transform:translateY(-50%) translateX(0); }

@media (max-width: 560px){
  .floating-btn{ width:2.85rem; height:2.85rem; font-size:1rem; }
  .floating-stack{ gap:.65rem; }
  .floating-btn__tooltip{ display:none; }
}

/* ---------- Modal (QR code) ---------- */
.modal{
  position:fixed;
  inset:0;
  z-index:var(--z-modal);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.25rem;
  visibility:hidden;
}
.modal__backdrop{
  position:absolute; inset:0;
  background:rgba(5,15,38,.6);
  backdrop-filter:blur(3px);
  opacity:0;
  transition:opacity var(--dur-base) var(--ease-premium);
}
.modal__panel{
  position:relative;
  width:min(400px, 100%);
  max-height:88vh;
  overflow-y:auto;
  background:#fff;
  border-radius:var(--radius-xl);
  padding:2rem 1.75rem 1.75rem;
  text-align:center;
  transform:scale(.9) translateY(16px);
  opacity:0;
  transition:transform var(--dur-base) var(--ease-premium), opacity var(--dur-base) var(--ease-premium);
}
.modal__panel--wide{ width:min(640px, 100%); text-align:left; }
.modal__panel--wide .modal__eyebrow{ justify-content:flex-start; }
.modal.is-open{ visibility:visible; }
.modal.is-open .modal__backdrop{ opacity:1; }
.modal.is-open .modal__panel{ transform:scale(1) translateY(0); opacity:1; }

.modal__close{
  position:absolute;
  top:.85rem; right:.85rem;
  width:2.25rem; height:2.25rem;
  border-radius:50%;
  background:var(--color-soft-bg);
  display:flex; align-items:center; justify-content:center;
}
.modal__eyebrow{ justify-content:center; }
.modal__title{ margin-top:.6rem; font-size:1.35rem; }
.modal__desc{ margin-top:.5rem; color:var(--color-text-secondary); font-size:.92rem; }
.modal__qr{
  margin:1.5rem auto 0;
  width:min(220px, 60%);
  aspect-ratio:1;
  border-radius:var(--radius-md);
  border:1px solid var(--color-border);
  padding:.75rem;
}
.modal__qr img{ width:100%; height:100%; object-fit:contain; }
.modal__contact{
  margin-top:1.4rem;
  padding-top:1.2rem;
  border-top:1px solid var(--color-border);
  display:flex;
  flex-direction:column;
  gap:.6rem;
  font-size:.92rem;
}
.modal__contact a{ font-weight:700; color:var(--brand-blue); }

/* ---------- Preloader ---------- */
/* ---------- Preloader ----------
   Light, minimal, fast: a small spinning ring (cleaning-inspired — a clean
   sweep of colour rather than a heavy full-screen logo treatment) with the
   wordmark shown subtly underneath in its natural brand colours. */
.preloader{
  position:fixed;
  inset:0;
  z-index:var(--z-preloader);
  background:var(--color-white);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity .4s var(--ease-premium), visibility .4s var(--ease-premium);
}
.preloader.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.preloader__inner{ display:flex; flex-direction:column; align-items:center; gap:1.35rem; }
.preloader__spinner{
  width:2.75rem; height:2.75rem;
  border-radius:50%;
  border:3px solid var(--color-blue-100);
  border-top-color:var(--brand-blue);
  border-right-color:var(--brand-orange);
  animation:preloader-spin .7s linear infinite;
}
@keyframes preloader-spin{ to{ transform:rotate(360deg); } }
.preloader__mark{ width:132px; height:auto; }
@media (prefers-reduced-motion: reduce){
  .preloader__spinner{ animation-duration:1.6s; }
}

/* ---------- Back-to-top progress ring (optional visual) ---------- */
.floating-btn--top svg{ position:absolute; inset:0; transform:rotate(-90deg); }
.floating-btn--top circle{ fill:none; stroke:rgba(255,255,255,.25); stroke-width:2; }
.floating-btn--top circle.progress{ stroke:var(--brand-gold); stroke-linecap:round; transition:stroke-dashoffset .1s linear; }
.floating-btn--top i{ position:relative; z-index:1; }


/* ===== 08-banner-hero.css ===== */
/* ==========================================================================
   HERO (homepage) + INNER PAGE BANNER
   ========================================================================== */

.hero{
  position:relative;
  min-height:92vh;
  display:flex;
  align-items:center;
  padding-top:clamp(6.5rem,12vh,9rem);
  padding-bottom:clamp(3rem,6vh,5rem);
  overflow:hidden;
  background:var(--color-white);
  color:var(--color-text-primary);
}
.hero::before{
  /* soft light wash in the corner instead of a full dark background */
  content:"";
  position:absolute;
  inset:0;
  background:var(--color-soft-bg);
  clip-path:polygon(0 0, 100% 0, 100% 55%, 0 100%);
  z-index:0;
}
.hero__grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem,4vw,4rem);
  align-items:center;
}
.hero__eyebrow{ color:var(--brand-orange); }
.hero__title{
  margin-top:1.1rem;
  font-size:var(--fs-hero);
  color:var(--brand-navy);
}
.hero__title em{
  font-style:normal;
  color:var(--brand-orange);
}
.hero__lead{ margin-top:1.4rem; max-width:46ch; color:var(--color-text-secondary); font-size:var(--fs-lead); }
.hero__actions{ margin-top:2.1rem; }
.hero__trust-mini{
  margin-top:2.5rem;
  display:flex;
  gap:1.75rem;
  flex-wrap:wrap;
}
.hero__trust-mini div{ display:flex; flex-direction:column; }
.hero__trust-mini strong{ font-family:var(--font-heading); font-size:1.3rem; color:var(--brand-navy); }
.hero__trust-mini span{ font-size:.78rem; color:var(--color-text-muted); }

.hero__media{
  position:relative;
  border-radius:var(--radius-xl);
  overflow:hidden;
  aspect-ratio:4/5;
  box-shadow:var(--shadow-lg);
  border:1px solid var(--color-border);
}
.hero__media img{ object-position:center 12%; }
.hero__media .img-placeholder{ background:var(--color-blue-800); color:#fff; }
.hero__media .img-placeholder i{ color:#fff; opacity:.7; }
.hero__media-badge{
  position:absolute;
  left:1.25rem; bottom:1.25rem;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);
  border-radius:var(--radius-md);
  padding:.9rem 1.1rem;
  display:flex; align-items:center; gap:.7rem;
  color:var(--color-text-primary);
  box-shadow:var(--shadow-md);
}
.hero__media-badge i{ color:var(--brand-orange); font-size:1.3rem; }
.hero__media-badge strong{ display:block; font-size:.95rem; }
.hero__media-badge span{ font-size:.76rem; color:var(--color-text-muted); }

.hero__scroll-cue{
  position:absolute;
  left:50%; bottom:1.75rem;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--color-text-muted);
  z-index:2;
}
.hero__scroll-cue span{
  position:relative;
  width:1px; height:34px;
  background:var(--color-border);
  overflow:visible;
}
.hero__scroll-cue span::before{
  content:"";
  position:absolute;
  left:50%; top:0;
  width:5px; height:5px;
  margin-left:-2px;
  border-radius:50%;
  background:var(--brand-orange);
  animation:scroll-cue-travel 1.8s ease-in-out infinite;
}
@keyframes scroll-cue-travel{
  0%{ transform:translateY(0); opacity:0; }
  15%{ opacity:1; }
  85%{ opacity:1; }
  100%{ transform:translateY(29px); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .hero__scroll-cue span::before{ animation:none; opacity:.6; top:auto; bottom:0; }
}

@media (max-width: 980px){
  .hero__grid{ grid-template-columns:1fr; text-align:left; }
  .hero{ min-height:auto; padding-top:7rem; }
  .hero__media{ aspect-ratio:4/3; }
}

/* ---------- Inner page banner ---------- */
.page-banner{
  position:relative;
  min-height:clamp(280px, 34vw, 400px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding-top:6rem;
  overflow:hidden;
  background-color:var(--color-blue-50);
  background-position:center 30%;
  background-size:cover;
  background-repeat:no-repeat;
  color:var(--color-text-primary);
  border-bottom:1px solid var(--color-border);
}
.page-banner::before{
  /* a soft navy-to-transparent wash rather than a flat, near-opaque
     tint: the background photo actually reads through at the top and
     centre, while the bottom third stays deep enough for the heading
     and breadcrumb to hold contrast against any source image. */
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(6,20,46,.62) 0%,
    rgba(6,20,46,.40) 35%,
    rgba(6,20,46,.55) 70%,
    rgba(6,20,46,.72) 100%);
  z-index:0;
}
.page-banner__content .eyebrow{ color:var(--brand-orange); }
.page-banner__content .page-banner__title{ color:#fff; }
.page-banner__content .page-banner__tagline{ color:var(--color-text-on-dark-muted); }
.page-banner__content .breadcrumb{ color:var(--color-text-on-dark-muted); }
.page-banner__content .breadcrumb a{
  color:#fff;
  position:relative;
  padding-bottom:2px;
}
/* Stay white on hover (blue read poorly against the dark banner) and
   show a thin underline that animates in from left to right instead
   of a color change. */
.page-banner__content .breadcrumb a::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:1px;
  background:var(--brand-orange);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--dur-fast) var(--ease-premium);
}
.page-banner__content .breadcrumb a:hover{ color:#fff; }
.page-banner__content .breadcrumb a:hover::after{ transform:scaleX(1); }
.page-banner__content .breadcrumb .current{ color:var(--brand-orange); }
.page-banner__content{ position:relative; z-index:2; max-width:640px; margin-inline:auto; text-align:center; }
.page-banner__title{ margin-top:.9rem; color:var(--brand-navy); }
.page-banner__tagline{ margin-top:.85rem; color:var(--color-text-secondary); font-size:var(--fs-lead); max-width:52ch; margin-inline:auto; }
.breadcrumb{
  margin-top:1.4rem;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  font-size:.84rem;
  color:var(--color-text-muted);
}
.breadcrumb a:hover{ color:var(--brand-blue); }
.breadcrumb .sep{ opacity:.5; }
.breadcrumb .current{ color:var(--brand-orange); font-weight:600; }

@media (max-width: 768px){
  .page-banner{ min-height:clamp(220px,44vw,300px); padding-top:5.5rem; }
}


/* ===== 09-forms.css ===== */
/* ==========================================================================
   FORMS (contact form)
   ========================================================================== */

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.35rem;
}
.form-field{ display:flex; flex-direction:column; gap:.5rem; }
.form-field--full{ grid-column:1 / -1; }

.form-field label{
  font-family:var(--font-heading);
  font-weight:700;
  font-size:.86rem;
  color:var(--color-text-primary);
}
.form-field .req{ color:var(--brand-orange); }

.form-control{
  width:100%;
  padding:.9rem 1.05rem;
  border-radius:var(--radius-md);
  border:1.5px solid var(--color-border);
  background:var(--color-soft-bg);
  font-size:.95rem;
  color:var(--color-text-primary);
  transition:border-color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast);
}
.form-control::placeholder{ color:var(--color-text-muted); }
.form-control:focus{
  outline:none;
  border-color:var(--brand-blue-bright);
  background:#fff;
  box-shadow:0 0 0 4px rgba(0,131,216,.12);
}
textarea.form-control{ resize:vertical; min-height:130px; }

.form-field.has-error .form-control{ border-color:var(--color-error); background:#FFF6F5; }
.form-field.is-valid .form-control{ border-color:var(--color-success); }

.form-error{
  font-size:.8rem;
  color:var(--color-error);
  display:none;
  align-items:center;
  gap:.35rem;
}
.form-field.has-error .form-error{ display:flex; }

.form-submit{ margin-top:.5rem; }
.form-submit .btn{ min-width:220px; }

.btn.is-loading{ pointer-events:none; opacity:.85; }
.btn .btn-spinner{
  width:16px; height:16px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.4);
  border-top-color:#fff;
  animation:btn-spin .7s linear infinite;
  display:none;
}
.btn.is-loading .btn-spinner{ display:inline-block; }
.btn.is-loading .btn-label{ display:none; }
@keyframes btn-spin{ to{ transform:rotate(360deg); } }

.form-success{
  display:none;
  align-items:flex-start;
  gap:.9rem;
  padding:1.4rem;
  border-radius:var(--radius-md);
  background:#F1FBF6;
  border:1px solid rgba(31,157,99,.25);
  color:#166B45;
}
.form-success.is-visible{ display:flex; }
.form-success i{ font-size:1.3rem; margin-top:.1rem; }

@media (max-width: 640px){
  .form-grid{ grid-template-columns:1fr; }
}


/* ===== 10-gallery-slider.css ===== */
/* ==========================================================================
   GALLERY + LIGHTBOX + SWIPER OVERRIDES + CTA + TRUST BAR
   ========================================================================== */

/* ---------- Gallery grid ----------
   A strict grid (not CSS-column masonry) so every row fills the full
   container width evenly, regardless of each photo's original aspect
   ratio — no dead space on the right edge. Every cell is cropped to the
   same ratio via object-fit so the grid always stays balanced. */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:1.1rem;
}
.gallery-item{
  border-radius:var(--radius-md);
  overflow:hidden;
  position:relative;
  cursor:zoom-in;
  aspect-ratio:1/1;
}
.gallery-item img,.gallery-item .img-placeholder{ object-position:center 25%; }
.gallery-item .img-placeholder{ position:absolute; inset:0; }
.gallery-item__overlay{
  position:absolute; inset:0;
  background:rgba(7,26,66,.6);
  display:flex; align-items:flex-end;
  padding:1rem;
  opacity:0;
  transition:opacity var(--dur-fast);
}
.gallery-item:hover .gallery-item__overlay{ opacity:1; }
.gallery-item:hover img,.gallery-item:hover .img-placeholder{ transform:scale(1.05); }
.gallery-item img,.gallery-item .img-placeholder{ transition:transform .6s var(--ease-premium); }
.gallery-item__label{ color:#fff; font-family:var(--font-heading); font-weight:700; font-size:.88rem; }
.gallery-item__zoom{
  position:absolute; top:.75rem; right:.75rem;
  width:2.1rem; height:2.1rem; border-radius:50%;
  background:rgba(255,255,255,.92);
  display:flex; align-items:center; justify-content:center;
  color:var(--brand-blue);
  opacity:0; transform:scale(.7);
  transition:opacity var(--dur-fast), transform var(--dur-fast);
}
.gallery-item:hover .gallery-item__zoom{ opacity:1; transform:scale(1); }
.gallery-item.is-hidden{ display:none; }
.gallery-item:not(.is-hidden){ animation:gallery-item-in .45s var(--ease-out-soft); }
@keyframes gallery-item-in{ from{ opacity:0; transform:scale(.96); } to{ opacity:1; transform:scale(1); } }
@media (prefers-reduced-motion: reduce){ .gallery-item:not(.is-hidden){ animation:none; } }

@media (max-width: 900px){ .gallery-grid{ grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); } }
@media (max-width: 560px){ .gallery-grid{ grid-template-columns:1fr 1fr; gap:.75rem; } }
@media (max-width: 400px){ .gallery-grid{ grid-template-columns:1fr; } }

/* ---------- Homepage "bento" gallery preview ----------
   One large featured tile + a balanced grid of supporting tiles, so the
   homepage preview reads as a premium showcase rather than a plain 4-up
   row, while still sharing the same filter + lightbox markup/behaviour
   as the full Gallery page. */
.gallery-grid--bento{
  grid-template-columns:repeat(4, 1fr);
  grid-auto-rows:130px;
}
/* The base .gallery-item sets aspect-ratio:1/1 for the full Gallery
   page's square grid. In the bento preview each tile's height is meant
   to come from grid-auto-rows instead (short rectangular tiles, not
   squares) — otherwise aspect-ratio forces every tile to grow as tall
   as it is wide (~287px) while the grid track stays at 130px, so the
   tiles overflow past the grid container and get visually swallowed by
   whatever section follows. object-fit:cover on the img already
   handles cropping cleanly to this shorter shape. */
.gallery-grid--bento .gallery-item{
  aspect-ratio:auto;
}
.gallery-grid--bento .gallery-item--feature{
  grid-column:span 2;
  grid-row:span 2;
}
@media (max-width: 900px){
  .gallery-grid--bento{ grid-template-columns:repeat(3, 1fr); grid-auto-rows:115px; }
}
@media (max-width: 560px){
  .gallery-grid--bento{ grid-template-columns:repeat(2, 1fr); gap:.75rem; grid-auto-rows:105px; }
}
@media (max-width: 400px){
  .gallery-grid--bento{ grid-template-columns:repeat(2, 1fr); }
}

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed; inset:0;
  z-index:var(--z-modal);
  display:flex; align-items:center; justify-content:center;
  visibility:hidden;
}
.lightbox__backdrop{ position:absolute; inset:0; background:rgba(3,9,24,.92); opacity:0; transition:opacity var(--dur-base); }
.lightbox.is-open{ visibility:visible; }
.lightbox.is-open .lightbox__backdrop{ opacity:1; }
.lightbox__stage{
  position:relative; z-index:1;
  width:min(1100px,92vw);
  max-height:88vh;
  display:flex; align-items:center; justify-content:center;
}
.lightbox__frame{
  width:100%;
  max-height:88vh;
  border-radius:var(--radius-md);
  overflow:hidden;
  opacity:0;
  transform:scale(.95);
  transition:opacity var(--dur-base) var(--ease-premium), transform var(--dur-base) var(--ease-premium);
}
.lightbox.is-open .lightbox__frame{ opacity:1; transform:scale(1); }
.lightbox__frame img{ width:100%; height:100%; object-fit:contain; max-height:88vh; }
.lightbox__close,.lightbox__prev,.lightbox__next{
  position:absolute;
  width:3rem; height:3rem; border-radius:50%;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.25);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  z-index:2;
  transition:background var(--dur-fast), transform var(--dur-fast);
}
.lightbox__close:hover,.lightbox__prev:hover,.lightbox__next:hover{ background:rgba(255,255,255,.22); }
.lightbox__close{ top:-3.75rem; right:0; }
.lightbox__prev{ left:clamp(-1rem,-4vw,0px); top:50%; transform:translateY(-50%); }
.lightbox__next{ right:clamp(-1rem,-4vw,0px); top:50%; transform:translateY(-50%); }
.lightbox__counter{
  position:absolute; bottom:-2.5rem; left:50%; transform:translateX(-50%);
  color:var(--color-text-on-dark-muted); font-size:.85rem;
}
@media (max-width: 720px){
  .lightbox__prev,.lightbox__next{ width:2.5rem; height:2.5rem; }
  .lightbox__prev{ left:.5rem; } .lightbox__next{ right:.5rem; }
  .lightbox__close{ top:.75rem; right:.75rem; background:rgba(3,9,24,.6); }
}

/* ---------- Swiper overrides (services / testimonials) ---------- */
/* overflow-x:hidden clips the off-canvas slides that Swiper positions to
   the right (the actual cause of a multi-thousand-pixel horizontal page
   overflow on mobile); overflow-y stays visible (computes to `auto`, which
   does not clip box-shadow) so a card's hover lift/shadow can still show
   above and below the strip without being cut off. */
.swiper{ overflow-x:hidden; overflow-y:visible; padding-bottom:.5rem; }
.swiper-slide{ height:auto; }
.slider-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:1.5rem; margin-bottom:2.25rem; flex-wrap:wrap;
}
.slider-nav{ display:flex; gap:.6rem; }
.slider-nav button{
  width:2.9rem; height:2.9rem; border-radius:50%;
  border:1.5px solid var(--color-border);
  display:flex; align-items:center; justify-content:center;
  color:var(--brand-blue);
  transition:background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
}
.slider-nav button:hover{ background:var(--brand-blue); border-color:transparent; color:#fff; transform:translateY(-2px); }
.slider-nav button.swiper-button-disabled{ opacity:.35; pointer-events:none; }

/* ---------- Trust bar ---------- */
.trust-bar{
  background:var(--color-white);
  border-bottom:1px solid var(--color-border);
  position:relative;
}
.trust-bar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:1.5rem 2.5rem;
  padding-block:1.75rem;
}
.trust-bar__item{ display:flex; align-items:center; gap:.7rem; }
.trust-bar__item i{ color:var(--brand-orange); font-size:1.2rem; }
.trust-bar__item span{ font-family:var(--font-heading); font-weight:700; font-size:.9rem; color:var(--color-text-primary); }

/* ---------- Compact CTA ---------- */
.compact-cta{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-xl);
  background:var(--brand-navy);
  color:#fff;
  padding:clamp(1.75rem,3vw,2.75rem) clamp(1.75rem,4vw,3.25rem);
  min-height:220px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  flex-wrap:wrap;
}
.compact-cta__text h2{ color:#fff; font-size:clamp(1.6rem,2.4vw,2.2rem); }
.compact-cta__text p{ margin-top:.6rem; color:var(--color-text-on-dark-muted); max-width:36ch; }
.compact-cta__actions{ display:flex; align-items:center; gap:1.25rem; position:relative; z-index:1; }
.compact-cta__phone{ display:flex; flex-direction:column; }
.compact-cta__phone span{ font-size:.76rem; color:var(--color-text-on-dark-muted); text-transform:uppercase; letter-spacing:.08em; }
.compact-cta__phone a{ font-family:var(--font-heading); font-weight:800; font-size:1.35rem; color:#fff; white-space:nowrap; }

/* The actions row (phone + optional QR button + "Get a Quote") has no
   wrap behaviour by default, so on a narrow phone the phone number gets
   squeezed into a sliver of width and wraps across three lines while
   the QR icon and quote button crowd in beside it. Below 640px: let the
   phone (+ QR button, when present) share one wrapped row at a smaller,
   non-wrapping font size, and push "Get a Quote" onto its own full-width
   row so nothing overlaps or truncates. */
@media (max-width: 640px){
  .compact-cta{ flex-direction:column; align-items:flex-start; text-align:left; }
  .compact-cta__actions{ flex-wrap:wrap; width:100%; row-gap:1.1rem; column-gap:1rem; }
  .compact-cta__phone a{ font-size:1.1rem; }
  .compact-cta__actions .btn--primary{ flex:1 1 100%; justify-content:center; }
}


/* ===== 11-animations.css ===== */
/* ==========================================================================
   REVEAL / SCROLL-ANIMATION HOOKS
   Actual triggering handled by js/animations/reveal.js (GSAP ScrollTrigger).
   These classes define the *from* state; GSAP animates to the *to* state
   and then this class is not required at runtime, but present as a
   progressive-enhancement fallback + reduced-motion baseline.
   ========================================================================== */

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

[data-reveal="fade"]{ transform:none; }
[data-reveal="left"]{ transform:translateX(-24px); }
[data-reveal="right"]{ transform:translateX(24px); }
[data-reveal="scale"]{ transform:scale(.92); }
[data-reveal="mask"]{ transform:none; clip-path:inset(0 0 100% 0); transition:clip-path 1s var(--ease-premium); }
[data-reveal="mask"].is-revealed{ clip-path:inset(0 0 0% 0); }

[data-reveal-group] > *{ transition-delay:calc(var(--i, 0) * 90ms); }

@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; clip-path:none !important; }
}

/* Counter target */
[data-counter]{ font-variant-numeric:tabular-nums; }

/* Marquee (trust-bar style logo/text strip, optional use) */
.marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee__track{ display:flex; gap:3rem; width:max-content; animation:marquee 28s linear infinite; }
@media (prefers-reduced-motion: reduce){ .marquee__track{ animation:none; } }
@keyframes marquee{ to{ transform:translateX(-50%); } }


/* ===== 12-misc-pages.css ===== */
/* ==========================================================================
   ABOUT / TIMELINE / SINGLE BLOG / 404 / LEGAL / PAGINATION / BADGES
   ========================================================================== */

/* ---------- About: values grid, timeline ---------- */
.about-story{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,4rem); align-items:center; }
.about-story__media{ position:relative; border-radius:var(--radius-xl); overflow:hidden; aspect-ratio:4/5; box-shadow:var(--shadow-md); }
.about-story__media--secondary{
  position:absolute;
  width:52%;
  aspect-ratio:1;
  right:-8%; bottom:-10%;
  border-radius:var(--radius-lg);
  border:6px solid #fff;
  box-shadow:var(--shadow-lg);
  overflow:hidden;
}
.about-story__figure{ position:relative; }

.timeline{ position:relative; padding-left:2.25rem; }
.timeline::before{
  content:""; position:absolute; left:.4rem; top:.4rem; bottom:.4rem; width:2px;
  background:var(--color-border);
}
.timeline-item{ position:relative; padding-bottom:2.25rem; }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-item::before{
  content:""; position:absolute; left:-2.25rem; top:.15rem;
  width:.85rem; height:.85rem; border-radius:50%;
  background:var(--brand-blue);
  box-shadow:0 0 0 4px #fff, 0 0 0 5px var(--color-border);
}
.timeline-item__year{ font-family:var(--font-heading); font-weight:800; color:var(--brand-blue); font-size:.9rem; }
.timeline-item__title{ margin-top:.3rem; font-size:1.05rem; }
.timeline-item__desc{ margin-top:.35rem; color:var(--color-text-secondary); font-size:.92rem; }

@media (max-width: 900px){
  .about-story{ grid-template-columns:1fr; }
  .about-story__media--secondary{ display:none; }
}

/* ---------- Alternating layout modifier (service detail pages) ----------
   Flips which side the media/visual sits on for a given section, so a
   sequence of sections reads left/right/left/right instead of every
   section stacking the same way. Mobile always stacks visual-then-text. */
@media (min-width: 901px){
  .about-story--reverse .about-story__figure{ order:2; }
}

/* ---------- Detail visual panel (icon-based "visual" side for service
   detail sections that don't have a dedicated photo) ---------- */
.detail-panel{
  background:var(--color-soft-bg);
  border:1px solid var(--color-border);
  border-radius:var(--radius-xl);
  padding:clamp(1.75rem,3vw,2.5rem);
}
.detail-panel__steps{ display:flex; flex-direction:column; gap:1.25rem; }
.detail-panel__step{ display:flex; gap:1rem; align-items:flex-start; }
.detail-panel__step-index{
  flex:0 0 auto;
  width:2.5rem; height:2.5rem;
  border-radius:50%;
  background:var(--color-white);
  border:1px solid var(--color-border);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-heading); font-weight:800; font-size:.95rem;
  color:var(--brand-blue);
}
.detail-panel__step:nth-child(even) .detail-panel__step-index{ color:var(--brand-orange); }
.detail-panel__step-title{ font-family:var(--font-heading); font-weight:700; font-size:.98rem; color:var(--color-text-primary); }
.detail-panel__step-desc{ margin-top:.25rem; font-size:.88rem; color:var(--color-text-secondary); line-height:1.55; }
.detail-panel__list{ display:flex; flex-direction:column; gap:1rem; }
.detail-panel__list-item{ display:flex; gap:.8rem; align-items:flex-start; }
.detail-panel__list-item i{ color:var(--brand-orange); margin-top:.3rem; flex:0 0 auto; }

/* ---------- Single blog / article typography ---------- */
.article{ max-width:var(--content-max); margin-inline:auto; }
.article__meta{ display:flex; align-items:center; gap:.9rem; font-size:.85rem; color:var(--color-text-muted); flex-wrap:wrap; }
.article__meta .dot{ width:4px; height:4px; border-radius:50%; background:var(--color-text-muted); }
.article__title{ margin-top:.9rem; }
.article__cover{ margin-top:2rem; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:16/9; }
.article-body{ margin-top:2.5rem; font-size:1.05rem; line-height:1.85; color:var(--color-text-primary); }
.article-body h2{ font-size:1.6rem; margin-top:2.5rem; margin-bottom:1rem; }
.article-body h3{ font-size:1.25rem; margin-top:2rem; margin-bottom:.75rem; }
.article-body p{ margin-bottom:1.25rem; color:var(--color-text-secondary); }
.article-body p:first-of-type{ font-size:1.15rem; color:var(--color-text-primary); }
.article-body ul{ margin:0 0 1.25rem; padding-left:1.25rem; list-style:disc; color:var(--color-text-secondary); }
.article-body li{ margin-bottom:.5rem; }
.article-body blockquote{
  margin:2rem 0; padding:1.5rem 1.75rem;
  border-left:3px solid var(--brand-orange);
  background:var(--color-soft-bg);
  border-radius:0 var(--radius-md) var(--radius-md) 0;
  font-family:var(--font-heading); font-weight:600; font-size:1.1rem;
}
.article-share{ display:flex; align-items:center; gap:.85rem; margin-top:2.5rem; padding-top:2rem; border-top:1px solid var(--color-border); }
.article-share a{ width:2.4rem; height:2.4rem; border-radius:50%; border:1px solid var(--color-border); display:flex; align-items:center; justify-content:center; transition:background var(--dur-fast), color var(--dur-fast); }
.article-share a:hover{ background:var(--brand-blue); color:#fff; border-color:transparent; }

/* ---------- 404 ---------- */
.error-page{
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  padding:8rem 1.5rem 4rem;
  position:relative;
  overflow:hidden;
}
.error-page__code{
  font-family:var(--font-heading); font-weight:800;
  font-size:clamp(6rem,16vw,11rem);
  line-height:.9;
  color:var(--brand-blue);
}
.error-page__title{ margin-top:1rem; }
.error-page__desc{ margin-top:.85rem; color:var(--color-text-secondary); max-width:46ch; margin-inline:auto; }
.error-page__actions{ margin-top:2rem; display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* ---------- Legal pages ---------- */
.legal-content{ max-width:var(--content-max); margin-inline:auto; }
.legal-content h2{ font-size:1.4rem; margin-top:2.25rem; margin-bottom:.85rem; }
.legal-content h2:first-child{ margin-top:0; }
.legal-content p,.legal-content li{ color:var(--color-text-secondary); margin-bottom:1rem; }
.legal-content ul{ padding-left:1.25rem; list-style:disc; }
.legal-content .updated-date{ color:var(--color-text-muted); font-size:.9rem; }

/* ---------- Pagination ---------- */
.pagination{ display:flex; align-items:center; justify-content:center; gap:.6rem; margin-top:3rem; }
.pagination a,.pagination span{
  width:2.6rem; height:2.6rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--color-border);
  font-family:var(--font-heading); font-weight:700; font-size:.88rem;
  transition:background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.pagination a:hover{ background:var(--color-soft-bg); }
.pagination .is-active{ background:var(--brand-blue); color:#fff; border-color:transparent; }

/* ---------- Filter tabs (services / blog / gallery categories) ---------- */
.filter-tabs{ display:flex; flex-wrap:wrap; gap:.6rem; }
.filter-tabs button{
  padding:.6rem 1.2rem;
  border-radius:var(--radius-pill);
  border:1.5px solid var(--color-border);
  font-family:var(--font-heading); font-weight:700; font-size:.85rem;
  color:var(--color-text-secondary);
  transition:background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.filter-tabs button:hover{ border-color:var(--brand-blue); color:var(--brand-blue); }
.filter-tabs button.is-active{ background:var(--brand-blue); border-color:transparent; color:#fff; }

/* ---------- Related grid ---------- */
.related-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.75rem; }
@media (max-width: 900px){ .related-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 620px){ .related-grid{ grid-template-columns:1fr; } }

/* ---------- Grids reused across pages ---------- */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.75rem; }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.75rem; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
@media (max-width: 1024px){ .grid-4{ grid-template-columns:repeat(2,1fr); } .grid-3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 620px){ .grid-4,.grid-3,.grid-2{ grid-template-columns:1fr; } }