:root{
  --brand-navy:#243447;
  --brand-olive:#51625B;
  --brand-green:#5A7D6C;
  --brand-beige:#F4F1EA;
  --brand-gold:#C9A76A;
  --brand-gray-100:#F2F4F6;
  --brand-gray-300:#B9C3C9;
  --brand-charcoal:#2B2B2B;
  --font-brand:"Fustat", system-ui, "Segoe UI", Arial, sans-serif;

  --radius:14px;
  --elev-1:0 6px 20px rgba(0,0,0,.08);
  --elev-2:0 12px 36px rgba(0,0,0,.14);
  --t-fast:.25s;
  --t-slow:.5s;
}

/* Optional container if theme doesn't provide one */
.container{ max-width:1200px; margin-inline:auto; padding-inline:16px; }

/* ======= Header shell ======= */
.k-header{
  position:sticky; top:0; inset-inline:0; z-index:1000;
  background:color-mix(in srgb, var(--brand-beige) 92%, #fff);
  backdrop-filter:saturate(1.05) blur(0px);
  transition: padding var(--t-fast) ease, background var(--t-slow) ease, box-shadow var(--t-fast) ease, backdrop-filter var(--t-slow) ease;
  padding-block:16px;
}
.k-header.is-scrolled{
  padding-block:10px;
  background:color-mix(in srgb, var(--brand-beige) 80%, #fff);
  box-shadow:var(--elev-1);
  backdrop-filter:saturate(1.15) blur(8px);
}

/* Layout: actions (left), nav (center), brand (right) in RTL */
.k-header__bar{
  display:grid; align-items:center; gap:16px;
  grid-template-columns: 1fr auto 1fr;
}
[dir="rtl"] .k-actions{ justify-self:start; }
[dir="rtl"] .k-nav{ justify-self:center; }

/* ======= Brand / Logo ======= */
.custom-logo-link{
    width: 185px;
    height: 65px;
    position: relative;
}
.custom-logo-link img {
    width: 100% !important;
    height: 100% !important;
    border: 0;
    object-fit: cover !important;
}
.k-header.is-scrolled .navbar-brand img,
.k-header.is-scrolled .navbar-brand .custom-logo{ max-height:63px; }
.k-brand__text{
  font-family:var(--font-brand); color:var(--brand-navy);
  font-weight:700; letter-spacing:.2px; font-size:1.35rem; line-height:1;
}

/* ======= Actions (phone + CTA + burger) ======= */
.k-actions{ display:flex; align-items:center; gap:10px; }
.k-action{ color:var(--brand-olive); text-decoration:none; display:inline-flex; align-items:center; gap:8px; }
.k-action:hover{ color:var(--brand-green); }

/* Buttons (simple theme-agnostic baseline) */
.btn{ display:inline-flex; align-items:center; justify-content:center; font-weight:700; border-radius:999px; padding:.55rem 1rem; text-decoration:none; border:0; cursor:pointer; }
.btn-primary{ background:var(--brand-olive); color:#fff; box-shadow:0 8px 18px rgba(81,98,91,.2); transition:transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast); }
.btn-primary:hover{ background:var(--brand-green); transform:translateY(-1px); box-shadow:var(--elev-2); }
.btn-secondary{ background:#fff; color:var(--brand-olive); border:1px solid color-mix(in srgb, var(--brand-olive) 35%, transparent); }
.btn-secondary:hover{ color:var(--brand-green); border-color:var(--brand-green); }

/* Burger */
.k-burger{ display:none; width:40px; height:40px; border-radius:10px; border:0; background:transparent; position:relative; cursor:pointer; }
.k-burger__line{ position:absolute; inset-inline:9px; height:2px; background:var(--brand-navy); transition:transform var(--t-fast), opacity var(--t-fast); }
.k-burger__line:nth-child(1){ top:12px; }
.k-burger__line:nth-child(2){ top:19px; }
.k-burger__line:nth-child(3){ top:26px; }
.is-drawer-open .k-burger__line:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.is-drawer-open .k-burger__line:nth-child(2){ opacity:0; }
.is-drawer-open .k-burger__line:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ======= Desktop nav + premium hover pill ======= */
.k-nav{ position:relative; }
.k-menu{ list-style:none; margin:0; padding:0; display:flex; gap:26px; align-items:center; position:relative; }
.k-menu > li{ position:relative; }
.k-menu > li > a{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  padding:.55rem .7rem; color:var(--brand-navy); text-decoration:none; font-weight:700; letter-spacing:.2px; z-index:2; transition:color var(--t-fast) ease;
}
.k-menu > li > a:hover, .k-menu > li > a:focus-visible{ color:var(--brand-green); }
/* graceful underline fallback */
.k-menu > li > a::after{
  content:""; position:absolute; inset-inline:12% 12%; bottom:4px; height:2px; border-radius:999px;
  background:linear-gradient(90deg, var(--brand-gold), var(--brand-green));
  transform:scaleX(0); transform-origin:var(--_u-dir, left); transition:transform var(--t-fast) ease;
}
[dir="rtl"] .k-menu > li > a{ --_u-dir:right; }
.k-menu > li > a:hover::after, .k-menu > li > a:focus-visible::after{ transform:scaleX(1); }

/* floating pill (inserted by JS) */
.k-pill{
  position:absolute; top:50%; transform:translateY(-50%);
  height:34px; width:0; opacity:0; pointer-events:none; z-index:1;
  background:linear-gradient(135deg, color-mix(in srgb, var(--brand-gold) 70%, #fff 30%), var(--brand-beige));
  border-radius:999px; box-shadow:0 10px 24px rgba(201,167,106,.28);
  outline:1px solid color-mix(in srgb, var(--brand-gold) 40%, transparent);
  transition:opacity var(--t-fast) ease, width var(--t-fast) ease, left var(--t-fast) ease, right var(--t-fast) ease, transform var(--t-fast) ease;
}

/* ======= Desktop dropdowns ======= */
.k-nav .k-menu > li.menu-item-has-children > a{ padding-inline-end:1.1rem; }
.k-nav .k-menu > li.menu-item-has-children > a::before{
  content:"▾"; font-size:.8rem; color:var(--brand-olive);
  position:absolute; inset-inline-end:.25rem; top:50%; transform:translateY(-50%);
  transition:transform .2s ease, color .2s ease;
}
.k-nav .k-menu > li:where(:hover,:focus-within).menu-item-has-children > a::before{
  color:var(--brand-green); transform:translateY(-50%) rotate(180deg);
}
.k-nav .sub-menu{
  position:absolute; top:calc(100% + 12px);
  inset-inline-end:0; inset-inline-start:auto;
  min-width:220px; padding:10px; list-style:none; margin:0;
  background:var(--brand-beige); border-radius:12px;
  border:1px solid color-mix(in srgb, var(--brand-gray-300) 45%, transparent);
  box-shadow:0 12px 36px rgba(0,0,0,.14);
  opacity:0; transform:translateY(8px); pointer-events:none;
  transition:opacity .18s ease, transform .18s ease; z-index:1200;
}
[dir="ltr"] .k-nav .sub-menu{ inset-inline-start:0; inset-inline-end:auto; }
.k-nav .sub-menu li a{
  display:block; padding:.55rem .7rem; border-radius:8px; color:var(--brand-navy); text-decoration:none; font-weight:600;
}
.k-nav .sub-menu li a:hover{ background:color-mix(in srgb, var(--brand-green) 12%, transparent); color:var(--brand-green); }
.k-nav .k-menu > li:where(:hover,:focus-within) > .sub-menu{ opacity:1; transform:translateY(0); pointer-events:auto; }

/* ======= Mobile / Tablet ======= */
@media (max-width: 900px){
  .k-nav{ display:none; }
  .k-cta{ display:none; }
  .k-burger{ display:inline-block; }
}

/* ======= Drawer (mobile nav) ======= */
/* keep transition even when [hidden] */
.k-drawer[hidden]{ display:block; }
.k-drawer{
  position:fixed; inset-block:0; z-index:1100;
  width:min(86vw, 420px);
  background:var(--brand-beige);
  /* slide from inline-end (right in RTL) */
  inset-inline-end:0; inset-inline-start:auto;
  transform:translateX(100%); opacity:0; pointer-events:none;
  transition:transform .35s ease, opacity .2s ease;
  display:flex; flex-direction:column; box-shadow:-14px 0 40px rgba(0,0,0,.18);
}
[dir="ltr"] .k-drawer{ inset-inline-start:0; inset-inline-end:auto; transform:translateX(-100%); box-shadow:14px 0 40px rgba(0,0,0,.18); }
.is-drawer-open .k-drawer{ transform:translateX(0); opacity:1; pointer-events:auto; }

.k-drawer__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px; border-bottom:1px solid color-mix(in srgb, var(--brand-gray-300) 40%, transparent);
}
.k-drawer__title{ font-weight:700; color:var(--brand-navy); }
.k-drawer__close{ background:transparent; border:0; font-size:28px; cursor:pointer; color:var(--brand-navy); }

.k-drawer__nav{ overflow:auto; padding:8px 8px 16px; }
.k-menu--mobile{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.k-menu--mobile > li > a{
  display:block; padding:14px 12px; border-radius:12px; text-decoration:none; color:var(--brand-navy); font-weight:700;
}
.k-menu--mobile > li > a:hover{ background:color-mix(in srgb, var(--brand-green) 12%, transparent); color:var(--brand-green); }

/* Mobile accordion for submenus */
.k-menu--mobile .menu-item-has-children{ position:relative; }
.k-menu--mobile .menu-item-has-children > button.k-acc{
  all:unset; cursor:pointer; position:absolute; inset-inline-end:8px; top:50%; transform:translateY(-50%);
  width:36px; height:36px; display:grid; place-items:center; border-radius:10px; color:var(--brand-olive);
}
.k-menu--mobile .menu-item-has-children > button.k-acc::before{ content:"▾"; transition:transform .2s ease; }
.k-menu--mobile .menu-item-has-children.is-open > button.k-acc::before{ transform:rotate(180deg); }
.k-menu--mobile .sub-menu{
  list-style:none; margin:0; padding:6px 8px 8px; display:grid; grid-template-rows:0fr; transition:grid-template-rows .25s ease;
}
.k-menu--mobile .sub-menu > *{ overflow:hidden; }
.k-menu--mobile .menu-item-has-children.is-open > .sub-menu{ grid-template-rows:1fr; }
.k-menu--mobile .sub-menu a{
  display:block; padding:10px 12px; border-radius:10px; color:var(--brand-navy); text-decoration:none; font-weight:600;
}
.k-menu--mobile .sub-menu a:hover{ background:color-mix(in srgb, var(--brand-green) 10%, transparent); color:var(--brand-green); }

/* Scrim */
.k-scrim[hidden]{ display:block; }
.k-scrim{
  position:fixed; inset:0; background:rgba(0,0,0,.28);
  opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:1090;
}
.is-drawer-open .k-scrim{ opacity:1; pointer-events:auto; }

/* Accessibility / motion */
@media (prefers-reduced-motion: reduce){
  .k-header, .k-pill, .k-menu > li > a::after, .k-burger__line, .k-drawer, .k-scrim { transition:none !important; }
}

/* ================================
    Hero Styles
================================== */

:root{
  --xh-height: clamp(520px, 66vh, 740px);
  --xh-kenburns-scale: 1.08;
  --xh-spot-speed: .9s;
  --xh-slide-speed: 520ms;
  --xh-autoplay: 5600ms;
}

.x-hero{ position:relative; isolation:isolate; background:var(--brand-gray-100); }
.x-hero__viewport{ position:relative; height:var(--xh-height); overflow:hidden; }
.x-hero__slide{
  position:absolute; inset:0; display:grid; place-items:stretch; opacity:0; transform:translate3d(0,10px,0) scale(.995);
  transition: opacity var(--xh-slide-speed) ease, transform var(--xh-slide-speed) ease;
  will-change: opacity, transform;
}
.x-hero__slide.is-active{ opacity:1; transform:translate3d(0,0,0) scale(1); z-index:2; }
.x-hero__slide.is-leaving{ z-index:1; opacity:0; transform:translate3d(0,-8px,0) scale(.995); }

.x-hero__media, .x-hero__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.x-hero__media img{ transform:scale(1); transition: transform 8s ease; will-change:transform; }
.x-hero__slide.is-active .x-hero__media img{ transform:scale(var(--xh-kenburns-scale)); }

/* Overlay & spotlight sweep */
.x-hero__overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 600px at 60% 40%, color-mix(in srgb, var(--brand-gold) 18%, transparent), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.45));
  pointer-events:none;
  mix-blend-mode:multiply;
}
.x-hero__inner{ position:relative; z-index:3; height:100%; display:grid; align-items:center; }
.x-hero__copy{ max-width:min(46ch, 95%); margin-inline: auto; text-align:center; color:#fff; }

/* Spotlight text reveal */
.x-hero__title, .x-hero__sub, .x-hero__eyebrow{ opacity:0; transform:translate3d(0,20px,0); }
.x-hero__slide.is-active .x-hero__eyebrow{ animation: xh-in .5s .05s both ease-out; }
.x-hero__slide.is-active .x-hero__title{  animation: xh-in .6s .14s both ease-out, xh-sweep var(--xh-spot-speed) .18s both ease-out; }
.x-hero__slide.is-active .x-hero__sub{    animation: xh-in .6s .26s both ease-out; }
@keyframes xh-in{ to{ opacity:1; transform:translate3d(0,0,0);} }
@keyframes xh-sweep{
  0% { text-shadow: 0 0 0 rgba(255,255,255,0); }
  100%{ text-shadow: 0 0 22px rgba(255,255,255,.22); }
}

.x-hero__eyebrow{ font-weight:700; letter-spacing:.2px; margin-bottom:10px; color: color-mix(in srgb, #fff 86%, var(--brand-gold) 14%); }
.x-hero__title{ font-family:var(--font-brand, "Fustat", system-ui); font-weight:800; line-height:1.1; font-size:clamp(28px, 5.2vw, 56px); }
.x-hero__accent{ color:color-mix(in srgb, #fff 82%, var(--brand-gold) 18%); }
.x-hero__sub{ font-size:clamp(15px, 1.7vw, 18px); color:color-mix(in srgb, #fff 85%, var(--brand-beige) 15%); margin-top:12px; }

.x-hero__ctas{ display:flex; gap:12px; justify-content:center; margin-top:18px; }
.x-btn{ display:inline-flex; align-items:center; justify-content:center; border-radius:999px; padding:.7rem 1.1rem; font-weight:800; text-decoration:none; backdrop-filter:saturate(1.2); }
.x-btn--solid{ background:var(--brand-olive); color:#fff; box-shadow:0 10px 26px rgba(81,98,91,.26); }
.x-btn--solid:hover{ background:var(--brand-green); transform:translateY(-1px); }
.x-btn--ghost{ background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.4); }
.x-btn--ghost:hover{ border-color:#fff; }

/* Decorative parallax layers */
.x-hero__layer{ position:absolute; inset:0; pointer-events:none; }
.x-hero__layer--dots{
  background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 18px 18px;
  transform: translate3d(0,0,0);
  will-change: transform;
}
.x-hero__layer--blob{
  background: radial-gradient(500px 280px at 20% 80%, rgba(201,167,106,.12), transparent 60%);
  will-change: transform;
}

/* Controls & dots */
.x-hero__controls{
  position:absolute; inset-inline:0; bottom:18px; display:grid; grid-template-columns: 1fr auto 1fr; align-items:center;
}
.x-hero__ctrl{ background:rgba(0,0,0,.35); color:#fff; border:0; padding:.5rem .8rem; border-radius:10px; cursor:pointer; justify-self:start; }
[dir="ltr"] .x-hero__ctrl--prev{ justify-self:start; } [dir="rtl"] .x-hero__ctrl--prev{ justify-self:end; }
[dir="ltr"] .x-hero__ctrl--next{ justify-self:end;   } [dir="rtl"] .x-hero__ctrl--next{ justify-self:start; }

.x-hero__dots{ display:flex; gap:10px; align-items:center; justify-content:center; }
.x-hero__dots button{
  width:10px; height:10px; border-radius:999px; background:rgba(255,255,255,.6); border:0; cursor:pointer; transition:transform .2s, background .2s;
}
.x-hero__dots button[aria-selected="true"]{ background:#fff; transform:scale(1.2); }

/* Progress */
.x-hero__progress{ position:absolute; inset-inline:0; bottom:0; height:3px; background:rgba(255,255,255,.18); }
.x-hero__progress > span{ display:block; height:100%; width:0%; background:linear-gradient(90deg, var(--brand-gold), var(--brand-green)); transition: width .1s linear; }

/* Responsive */
@media (max-width: 768px){
  .x-hero__copy{ max-width: 95%; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .x-hero__media img{ transition:none !important; transform:none !important; }
  .x-hero__title, .x-hero__sub, .x-hero__eyebrow{ animation:none !important; opacity:1; transform:none; }
}

/* ================================
    About Styles
================================== */

:root{
  --a-radius:16px;
  --a-elev:0 18px 50px rgba(0,0,0,.12);
  --a-slow:.6s; --a-fast:.28s;
}

.a-about{ position:relative; padding-block: clamp(48px, 8vw, 96px); background:var(--brand-gray-100); overflow:hidden; }
.a-about__wrap{ display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 4vw, 56px); align-items:center; }

/* Visual mosaic */
.a-about__visual{ position:relative; min-height: 520px; }
.a-about__card{
  position:absolute; border-radius: var(--a-radius);
  overflow:hidden; box-shadow: var(--a-elev);
  transform: translate3d(0,0,0);
  will-change: transform;
}
.a-about__card img{ width:100%; height:100%; object-fit:cover; display:block; }

.a-about__card--main{ inset-inline-end:0; inset-block-start:0; width:66%; height:66%; }
.a-about__card--top{ inset-inline-start:0; inset-block-start:8%; width:44%; height:38%; }
.a-about__card--bottom{ inset-inline-start:10%; inset-block-end:0; width:50%; height:40%; }

.a-about__blob{
  position:absolute; inset:auto -10% -15% auto;
  width:560px; height:560px; border-radius:50%;
  background: radial-gradient(500px 300px at 30% 40%, color-mix(in srgb, var(--brand-gold) 35%, transparent), transparent 60%);
  filter: blur(30px); opacity:.5; pointer-events:none;
}
.a-about__dots{
  position:absolute; inset:6% auto auto 0;
  width:260px; height:260px;
  background-image: radial-gradient(rgba(0,0,0,.08) 1.2px, transparent 1.2px);
  background-size: 18px 18px; border-radius: 24px;
  opacity:.5; pointer-events:none;
}

/* Copy */
.a-about__content{ position:relative; }
.a-about__eyebrow{ color:var(--brand-olive); font-weight:800; letter-spacing:.2px; }
.a-about__title{
  margin:.2em 0 .4em; font-family:var(--font-brand); color:var(--brand-navy);
  font-weight:900; line-height:1.15; font-size: clamp(26px, 4.4vw, 42px);
}
.a-about__accent{ color:color-mix(in srgb, var(--brand-gold) 65%, var(--brand-olive) 35%); }
.a-about__lead{ color:color-mix(in srgb, var(--brand-charcoal) 90%, #000 10%); font-size: clamp(15px, 1.6vw, 18px); }

/* KPIs */
.a-about__kpis{ display:flex; gap: clamp(16px, 3.4vw, 28px); margin: 18px 0 10px; padding:0; list-style:none; }
.a-kpi{ background: #fff; border:1px solid color-mix(in srgb, var(--brand-gray-300) 45%, transparent);
  border-radius: 14px; padding: 14px 16px; min-width: 140px; text-align:center;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
  transform: translate3d(0,16px,0); opacity:0; transition: transform var(--a-fast) ease, opacity var(--a-fast) ease;
}
.a-kpi__num{ display:block; font-weight:900; color:var(--brand-navy); font-size: clamp(20px, 4.2vw, 34px); }
.a-kpi__label{ color:var(--brand-olive); font-weight:700; }

/* Values grid */
.a-about__values{ margin-top:18px; display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:14px; }
.a-value{ position:relative; background:#fff; border:1px solid color-mix(in srgb, var(--brand-gray-300) 40%, transparent); border-radius:14px; padding:14px 16px; overflow:hidden;
  transform:translate3d(0,12px,0); opacity:0; transition: transform var(--a-fast) ease, opacity var(--a-fast) ease;
}
.a-value::before{
  content:""; position:absolute; inset-inline-start:0; top:0; width:4px; height:100%;
  background: linear-gradient(180deg, var(--brand-gold), var(--brand-green));
  transform: scaleY(0); transform-origin: top; transition: transform .5s ease;
}
.a-value__title{ color:var(--brand-navy); font-weight:800; margin-bottom:6px; }
.a-value__text{ color: color-mix(in srgb, var(--brand-charcoal) 85%, #000 15%); }

/* Trust badges */
.badges{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.badge{display:inline-flex;align-items:center;gap:8px;background:#fff;
  border:1px solid color-mix(in srgb, var(--brand-gray-300) 45%, transparent);
  border-radius:999px;padding:8px 12px;box-shadow:0 8px 24px rgba(0,0,0,.06)}
.badge__icon{width:22px;height:22px;color:var(--brand-olive)}
.badge__label{font-weight:700;color:var(--brand-navy)}
.badge:hover{border-color:var(--brand-green)}


/* CTAs */
.a-about__ctas{ display:flex; gap:12px; margin-top:18px; }
.a-btn{ display:inline-flex; align-items:center; justify-content:center; padding:.7rem 1.1rem; border-radius:999px; font-weight:800; text-decoration:none; }
.a-btn--solid{ background:var(--brand-olive); color:#fff; box-shadow:0 10px 26px rgba(81,98,91,.2); }
.a-btn--solid:hover{ background:var(--brand-green); transform: translateY(-1px); }
.a-btn--ghost{ background:#fff; color:var(--brand-olive); border:1px solid color-mix(in srgb, var(--brand-olive) 35%, transparent); }
.a-btn--ghost:hover{ color:var(--brand-green); border-color: var(--brand-green); }

/* Reveal (when in view) */
.a-about.is-inview .a-kpi,
.a-about.is-inview .a-value,
.a-about.is-inview .a-about__trust{ transform: translate3d(0,0,0); opacity:1; }
.a-about.is-inview .a-value::before{ transform: scaleY(1); }

/* Parallax motion */
@media (prefers-reduced-motion: no-preference){
  .a-about__card--top{ transition: transform .8s ease; }
  .a-about__card--bottom{ transition: transform .9s ease; }
}

/* Responsive */
@media (max-width: 992px){
  .a-about__wrap{ grid-template-columns: 1fr; }
  .a-about__visual{ order:2; min-height: 420px; }
  .a-about__content{ order:1; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .a-about__card, .a-kpi, .a-value, .a-about__trust{ transition:none !important; transform:none !important; }
}

/* =========================
   About — Responsive Fixes
   ========================= */

/* <= 1200px: ease spacing & sizes */
@media (max-width: 1200px){
  .a-about__wrap{ gap:32px; }
  .a-about__card--main{ width:62%; height:62%; }
}

/* <= 992px: single column, visual below text */
@media (max-width: 992px){
  .a-about__wrap{ grid-template-columns:1fr; gap:24px; }
  .a-about__content{ order:1; }
  .a-about__visual{ order:2; min-height:420px; }
  .a-about__lead{ font-size:16px; }
  .a-about__kpis{ flex-wrap:wrap; }
  .a-kpi{ flex:1 1 160px; }
  .a-about__values{ grid-template-columns:1fr; }
  .a-about__ctas{ flex-wrap:wrap; }
}

/* <= 768px: simplify mosaic, center everything */
@media (max-width: 768px){
  .a-about{ padding-block:40px; }
  .a-about__wrap{ gap:20px; }

  /* Centered text */
  .a-about__content{ text-align:center; }
  .a-about__values .a-value{ text-align:start; } /* keep cards readable */

  /* Visual: keep only main card, scale to screen; hide decor to avoid overflow */
  .a-about__visual{ min-height:360px; }
  .a-about__card--top,
  .a-about__card--bottom,
  .a-about__dots{ display:none; }

  .a-about__card--main{
    inset:auto; /* ignore absolute offsets */
    position:absolute; left:50%; top:0; transform:translateX(-50%); /* center */
    width:min(92%, 540px); height:70%;
  }

  /* KPIs wrap nicely */
  .a-about__kpis{ justify-content:center; gap:12px; }
  .a-kpi{ padding:12px 14px; min-width:140px; }
  .a-kpi__num{ font-size:clamp(20px, 7vw, 28px); }

  /* Values grid */
  .a-about__values{ gap:12px; }

}

/* <= 480px: super-compact layout */
@media (max-width: 480px){
  .a-about{ padding-block:32px; }
  .a-about__title{ font-size: clamp(22px, 8vw, 28px); }
  .a-about__visual{ min-height:300px; }
  .a-about__card--main{ width:min(94%, 440px); height:65%; }
  .a-about__kpis{ gap:10px; }
  .a-kpi{ min-width:130px; padding:10px 12px; }
  .a-about__ctas{ gap:10px; }
  .a-btn{ width:100%; padding:.65rem 1rem; } /* stack buttons full-width if they wrap */
}

/* Guard against overflow on very small screens */
@media (max-width:360px){
  .a-about__card--main{ height:62%; }
}

/* ================================
    Services Styles
================================== */

.svc-arc{ position:relative; padding-block:clamp(54px,7vw,104px); background:var(--brand-gray-100); overflow:clip; }
.svc-arc__head{ text-align:center; margin-bottom:22px; }
.svc-arc__title{ font-family:var(--font-brand); font-weight:900; color:var(--brand-navy); font-size:clamp(24px,4.6vw,40px); }
.svc-arc__sub{ color:color-mix(in srgb,var(--brand-charcoal) 85%,#000 15%); }

/* Gold orb */
.svc-arc__orb{
  position:absolute; inset:auto 10% -120px auto; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(300px 220px at 40% 45%, rgba(201,167,106,.22), transparent 60%);
  filter:blur(24px); opacity:.7; transform:translate3d(0,0,0); transition:transform .6s ease;
  pointer-events:none;
}

/* Curved ribbon */
.svc-arc__ribbon{
  --curve: 120px; /* arc height */
  display:grid; grid-auto-flow:column; gap:16px; list-style:none; margin:18px 0 10px; padding:0;
  overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none;
  mask-image: radial-gradient(80% 100% at 50% -10%, #000 70%, transparent 100%);
}
.svc-arc__ribbon::-webkit-scrollbar{ display:none; }

/* cards */
.svc-arc__card{ scroll-snap-align:center; }
.svc-arc__link{
  position:relative; display:flex; flex-direction:column; gap:8px; width:260px; min-height:170px;
  text-decoration:none; padding:16px; border-radius:18px;
  background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.6));
  backdrop-filter: blur(8px) saturate(1.1);
  border:1px solid color-mix(in srgb, var(--brand-gray-300) 45%, transparent);
  box-shadow: 0 18px 38px rgba(0,0,0,.10);
  transform: translateY(calc(sin(var(--deg,0deg)) * var(--ampl, var(--curve)))) translateZ(0);
  transition: transform .35s ease, box-shadow .35s ease, border-color .25s ease;
}
.svc-arc__icon{ width:46px; height:46px; display:grid; place-items:center; border-radius:12px;
  color:var(--brand-olive); background:color-mix(in srgb, var(--brand-green) 12%, transparent); }
.svc-arc__icon img{ width:26px; height:26px; object-fit:contain; }
.svc-arc__name{ color:var(--brand-navy); font-weight:900; }
.svc-arc__tag{ color:color-mix(in srgb,var(--brand-charcoal) 85%,#000 15%); font-size:14.5px; line-height:1.5; }
.svc-arc__shine{ position:absolute; inset:auto -20% 0 auto; width:220px; height:160px; border-radius:50%;
  background:radial-gradient(90px 70px at 60% 40%, rgba(201,167,106,.22), transparent 60%);
  opacity:.6; transform:translate3d(0,0,0); transition:transform .35s ease, opacity .35s ease; }

.svc-arc__link:hover{
  box-shadow:0 26px 64px rgba(0,0,0,.14);
  border-color: color-mix(in srgb, var(--brand-olive) 45%, transparent);
  transform: translateY(calc(sin(var(--deg,0deg)) * var(--ampl, var(--curve)) - 6px));
}
.svc-arc__link:hover .svc-arc__shine{ transform:translate3d(-10px,-8px,0); opacity:.95; }

/* marquee chips */
.svc-arc__chips{ position:relative; margin-top:16px; mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.svc-arc__track{ display:inline-flex; gap:18px; white-space:nowrap; animation:svc-marq 22s linear infinite; }
.svc-arc__track span{
  display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:999px; background:#fff;
  border:1px solid color-mix(in srgb, var(--brand-gray-300) 45%, transparent); color:var(--brand-navy); font-weight:700;
}

/* beefier shadow + depth */
.svc-arc__link{
  box-shadow: 0 18px 42px rgba(0,0,0,.09), inset 0 1px 0 rgba(255,255,255,.35);
}
.svc-arc__link:hover{
  box-shadow: 0 28px 64px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.4);
}

/* stronger shine on hover */
.svc-arc__shine{
  background: radial-gradient(110px 80px at 60% 40%, rgba(201,167,106,.28), transparent 60%);
}

/* center emphasis (JS will set --focus 0..1) */
.svc-arc__link{ transform: translateY(calc(sin(var(--deg,0deg)) * var(--ampl, var(--curve))))
                           scale(calc(1 + var(--focus, 0) * 0.06)); }
.svc-arc__name{ font-weight: 900; letter-spacing: .2px; }
.svc-arc__tag{ opacity: calc(.75 + var(--focus,0)*.25); }

@keyframes svc-marq{ to{ transform: translateX(-50%); } }

/* CTA */
.svc-arc__cta{ display:flex; justify-content:center; margin-top:18px; }
.svc-arc__btn{ background:var(--brand-olive); color:#fff; padding:.8rem 1.2rem; border-radius:999px; font-weight:900; text-decoration:none; }
.svc-arc__btn:hover{ background:var(--brand-green); transform:translateY(-1px); }

/* responsive */
@media (max-width:860px){
  .svc-arc__ribbon{ --curve: 80px; }
}
@media (max-width:560px){
  .svc-arc__ribbon{ grid-auto-flow:row; grid-template-columns: repeat(2, minmax(0,1fr)); overflow:visible; mask-image:none; }
  .svc-arc__link{ width:auto; transform:none; }
  .svc-arc__chips{ display:none; }
  .svc-arc__orb{ display:none; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .svc-arc__track{ animation:none !important; }
}



/* ================================
   Process — Journey Map (organized)
   ================================= */
:root{
  --prj-radius: 18px;
  --prj-stroke: 7px;
  --prj-cap: 48px;
  --prj-shadow-weak: 0 10px 26px rgba(0,0,0,.06);
  --prj-shadow-strong: 0 14px 32px rgba(0,0,0,.08);
}

/* ---- Section shell ---- */
.pr-journey{
  position: relative;
  padding-block: clamp(54px, 7vw, 104px);
  background: #fff;
}

.prj__head{
  text-align: center;
  margin-bottom: 26px;               /* unified spacing */
}
.prj__title{
  font-family: var(--font-brand);
  font-weight: 900;
  color: var(--brand-navy);
  font-size: clamp(24px, 4.6vw, 40px);
}
.prj__sub{
  color: color-mix(in srgb, var(--brand-charcoal) 85%, #000 15%);
}

/* ---- Stage (card that holds the path + pins) ---- */
.prj__stage{
  position: relative;
  aspect-ratio: 12 / 3.2;
  border-radius: var(--prj-radius);
  background: var(--brand-gray-100);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--brand-gray-300) 40%, transparent);
  box-shadow:
    0 24px 70px rgba(0,0,0,.06),       /* ambient */
    0 1px 0 rgba(255,255,255,.6) inset;/* inner top highlight */
}

/* ---- SVG + Path ---- */
.prj__svg{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 1;                          /* under pins */
}
.prj__path-bg{
  fill: none;
  stroke: rgba(0,0,0,.08);
  stroke-width: var(--prj-stroke);
}
.prj__path{
  fill: none;
  stroke: url(#grad);
  stroke-width: var(--prj-stroke);
  stroke-linecap: round;
  filter: drop-shadow(0 3px 8px rgba(201,167,106,.25)); /* gold glow */
}
/* helper: keeps paint-order reliable */
.prj__svg::before{ content:''; position:absolute; inset:auto; }

/* ---- Pins layer ---- */
.prj__pins{
  position: absolute; inset: 0;
  list-style: none; margin: 0; padding: 0;
  z-index: 2;                          /* above path */
}

.prj__pin{
  position: absolute;
  left: var(--x); top: var(--y);       /* set via inline style: --x/--y in % */
  transform: translate(-50%, -50%) scale(.96);
  transform-origin: center;
  display: grid; gap: 8px; text-align: center;
  opacity: 0;                          /* hidden until .is-show */
  transition: opacity .28s ease, transform .28s ease;
}
.prj__pin.is-show{
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* cap + card */
.prj__cap{
  width: var(--prj-cap); height: var(--prj-cap);
  border-radius: 14px;
  display: grid; place-items: center;
  font-weight: 900; color: var(--brand-navy);
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--brand-gray-300) 45%, transparent);
  box-shadow: var(--prj-shadow-weak);
}
.prj__card{
  background: #fff;
  border-radius: 14px;
  padding: 12px 14px;
  min-width: 220px;
  border: 1px solid color-mix(in srgb, var(--brand-gray-300) 45%, transparent);
  box-shadow: var(--prj-shadow-strong);
}
.prj__card h3{
  margin: 0 0 6px;
  color: var(--brand-navy);
  font-weight: 900;
}
.prj__card p{
  margin: 0;
  color: color-mix(in srgb, var(--brand-charcoal) 85%, #000 15%);
  font-size: 14.5px;
}

/* Active pin glow when path “reaches” it */
.prj__pin.is-active .prj__cap{
  border-color: var(--brand-gold);
  box-shadow:
    0 0 0 6px rgba(201,167,106,.12),
    var(--prj-shadow-weak);
}

/* ---- Responsive ---- */
@media (max-width: 720px){
  .prj__stage{ aspect-ratio: auto; padding: 18px; }
  .prj__svg{ display: none; }                 /* hide path on small screens */
  .prj__pins{ position: relative; }           /* stack pins */
  .prj__pin{
    position: relative; left: auto; top: auto;
    transform: scale(.96); text-align: start;
    grid-template-columns: 46px 1fr; align-items: center;
  }
  .prj__pin.is-show{ transform: scale(1); }
  .prj__card{ min-width: unset; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce){
  .prj__pin{ opacity: 1 !important; transform: none !important; }
}

:root{
  --brand-navy:#243447; --brand-olive:#51625B; --brand-green:#5A7D6C; --brand-beige:#F4F1EA; --brand-gold:#C9A76A;
  --brand-gray-100:#F2F4F6; --brand-gray-300:#B9C3C9; --brand-charcoal:#2B2B2B;
  --font-brand:"Fustat", system-ui, "Segoe UI", Arial, sans-serif;
  --tmx-h: clamp(520px, 64vh, 720px);
}

/* Section shell */
.tmx{ position:relative; isolation:isolate; min-height: var(--tmx-h); overflow:clip; }
.tmx__wrap{
  position:relative; z-index:2; display:grid; gap: clamp(18px, 4vw, 36px);
  grid-template-columns: 1.05fr .95fr; align-items:center; padding-block: clamp(48px, 7vw, 96px);
}
@media (max-width: 980px){ .tmx__wrap{ grid-template-columns:1fr; } }

/* Parallax background */
.tmx__bg{
  position:absolute; inset:0; z-index:1; overflow:hidden;
  background: color-mix(in srgb, var(--brand-beige) 65%, #fff 35%);
}
.tmx__bg::before{
  content:""; position:absolute; inset:-4% -2%;
  background-image: image-set(var(--bg) type("image/jpeg") 1x); /* fallback; change if webp available */
  background-size: cover; background-position: center 40%;
  transform: translate3d(0,0,0) scale(1.06);
  will-change: transform; filter:saturate(1.05) contrast(1.05);
}
/* brand reflections */
.tmx__glow{ position:absolute; border-radius:50%; filter: blur(28px); opacity:.4; pointer-events:none; }
.tmx__glow--gold{ width:620px; height:620px; inset:auto 8% -20% auto;
  background: radial-gradient(380px 260px at 40% 45%, rgba(201,167,106,.28), transparent 60%); }
.tmx__glow--olive{ width:520px; height:520px; inset:-12% auto auto -8%;
  background: radial-gradient(320px 220px at 40% 45%, rgba(90,125,108,.22), transparent 60%); }

/* Copy */
.tmx__content{}
.tmx__head{ margin-bottom:10px; }
.tmx__title{ font-family:var(--font-brand); color:var(--brand-navy); font-weight:900; font-size:clamp(24px, 4.4vw, 40px); }
.tmx__sub{ color: color-mix(in srgb, var(--brand-charcoal) 85%, #000 15%); }

/* Specs bubbles */
.tmx__specs{ display:flex; flex-wrap:wrap; gap:12px; margin-top:12px; }
.tmx__spec{
  display:grid; grid-template-columns:auto 1fr auto; gap:8px; align-items:center;
  background:#fff; border:1px solid color-mix(in srgb, var(--brand-gray-300) 40%, transparent);
  border-radius:999px; padding:8px 12px; box-shadow:0 12px 28px rgba(0,0,0,.06);
  transform: translate3d(0,10px,0); opacity:0; transition: transform .28s ease, opacity .28s ease;
}
.tmx__ico{ width:28px; height:28px; display:grid; place-items:center; border-radius:8px;
  background: color-mix(in srgb, var(--brand-green) 12%, transparent); color: var(--brand-olive); }
.tmx__label{ font-weight:900; color:var(--brand-navy); }
.tmx__meta{ color:var(--brand-olive); font-weight:700; opacity:.85; }

/* CTA */
.tmx__cta{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }
.btn{ display:inline-flex; align-items:center; justify-content:center; padding:.7rem 1.1rem; border-radius:999px; font-weight:900;
  background:var(--brand-olive); color:#fff; text-decoration:none; border:0; }
.btn:hover{ background:var(--brand-green); transform:translateY(-1px); }
.btn--ghost{ background:#fff; color:var(--brand-olive);
  border:1px solid color-mix(in srgb, var(--brand-olive) 35%, transparent); }
.btn--ghost:hover{ color:var(--brand-green); border-color:var(--brand-green); }

/* Visual cards (collage) */
.tmx__visual{ position:relative; min-height: 520px; }
.tmx__card{
  position:absolute; border-radius:16px; overflow:hidden; background:#fff;
  border:1px solid color-mix(in srgb, var(--brand-gray-300) 40%, transparent);
  box-shadow:0 18px 46px rgba(0,0,0,.08); transform:translate3d(0,16px,0) scale(.98);
  transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}
.tmx__card img{ width:100%; height:100%; object-fit:cover; display:block; }
.tmx__card figcaption{ position:absolute; inset:auto 10px 10px 10px; padding:8px 10px; border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.7)); color:var(--brand-navy); font-weight:800; }

/* positions/sizes */
.tmx__card--main{ inset-inline-end:0; inset-block-start:0; width:52%; height:62%; z-index:2; }
.tmx__card--two{ inset-inline-start:6%; inset-block-start:8%; width:38%; height:42%; }
.tmx__card--three{ inset-inline-start:14%; inset-block-end:0; width:44%; height:38%; }
.tmx__card--lift{ inset-inline-end:8%; inset-block-end:-4%; width:34%; height:42%; }
.tmx__card--straps{ inset-inline-end:32%; inset-block-end:18%; width:28%; height:28%; z-index:3; }

/* in-view reveal */
.tmx.is-inview .tmx__spec,
.tmx.is-inview .tmx__card{
  transform: translate3d(0,0,0) scale(1); opacity:1;
}

/* Responsive */
@media (max-width: 980px){
  .tmx__visual{ min-height: 440px; }
  .tmx__card--lift{ inset-block-end:-6%; }
}
@media (max-width: 720px){
  .tmx__wrap{ padding-block: 40px; }
  .tmx__visual{ min-height: 360px; }
  .tmx__card--two, .tmx__card--three{ display:none; } /* simplify collage */
  .tmx__card--main{ width:68%; height:64%; }
  .tmx__card--lift{ width:40%; height:44%; }
  .tmx__card--straps{ width:34%; height:32%; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .tmx__bg::before{ transform:none !important; }
  .tmx__card, .tmx__spec{ transition:none !important; transform:none !important; opacity:1 !important; }
}

.tmx__bg::before{
  background-position: var(--bg-position, center 40%);
  transform: translateZ(0) scale(var(--bg-scale, 1.06));
  opacity: var(--bg-opacity, 1);
  filter: saturate(var(--bg-sat,1.05)) contrast(var(--bg-con,1.05));
}


/* ===========================
   Case Studies / Gallery
   =========================== */
.csx{ padding-block: clamp(48px,7vw,96px); background:#fff; position:relative; }
.csx__head{ text-align:center; margin-bottom:18px; }
.csx__title{ font-family:var(--font-brand); font-weight:900; color:var(--brand-navy); font-size:clamp(22px,4.2vw,36px); }
.csx__sub{ color: color-mix(in srgb, var(--brand-charcoal) 85%, #000 15%); }

/* Filters */
.csx__filters{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:12px 0 10px; }
.csx__filter{ display:flex; align-items:center; gap:8px; background:#fff; border:1px solid color-mix(in srgb, var(--brand-gray-300) 40%, transparent);
  border-radius:14px; padding:8px 10px; box-shadow:0 10px 24px rgba(0,0,0,.06); }
.csx__filter label{ font-weight:800; color:var(--brand-navy); }
.csx__filter select{ border:0; background:transparent; padding:.35rem .2rem; color:var(--brand-charcoal); }

/* Masonry (CSS columns) */
.csx__grid{ column-count: 3; column-gap: 14px; margin-top:18px; }
@media (max-width: 1100px){ .csx__grid{ column-count: 2; } }
@media (max-width: 640px){ .csx__grid{ column-count: 1; } }

.csx__item{ break-inside: avoid; margin-bottom:14px; opacity:0; transform:translate3d(0,10px,0); transition: opacity .28s ease, transform .28s ease; }
.csx__item.is-show{ opacity:1; transform:translate3d(0,0,0); }

.csx__card{ position:relative; display:block; border-radius:16px; overflow:hidden; text-decoration:none;
  border:1px solid color-mix(in srgb, var(--brand-gray-300) 40%, transparent); background:#fff;
  box-shadow:0 14px 32px rgba(0,0,0,.06); }
.csx__img{ width:100%; height:auto; display:block; }
.csx__overlay{
  position:absolute; inset:auto 10px 10px 10px; border-radius:12px; padding:10px 12px;
  background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.7));
  backdrop-filter: blur(6px); color:var(--brand-navy); display:flex; flex-direction:column; gap:6px;
  transform: translateY(8px); opacity:.0; transition: .25s ease;
}
.csx__title{ font-weight:900; }
.csx__chips{ display:flex; flex-wrap:wrap; gap:6px; }
.csx__chips i{ font-style:normal; background:#fff; border:1px solid color-mix(in srgb, var(--brand-gray-300) 45%, transparent); color:var(--brand-olive); border-radius:999px; padding:4px 8px; font-weight:700; }
.csx__card:hover .csx__overlay{ opacity:1; transform: translateY(0); }

/* Lightbox */
.csx-scrim[hidden]{ display:block; }
.csx-scrim{
  position:fixed; inset:0; background:rgba(0,0,0,.4);
  opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:1090;
}
.csx-lightbox[hidden]{ display:block; }
.csx-lightbox{
  position:fixed; inset:0; z-index:1100; display:grid; place-items:center;
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.csx-lightbox.is-open{ opacity:1; pointer-events:auto; }
.csx-scrim.is-open{ opacity:1; pointer-events:auto; }

.csx-l__stage{
  position:relative; width:min(92vw, 1100px); max-height:86vh;
  background:#fff; border-radius:18px; overflow:hidden;
  border:1px solid color-mix(in srgb, var(--brand-gray-300) 40%, transparent);
  box-shadow:0 24px 60px rgba(0,0,0,.18);
  display:grid; grid-template-columns:1fr 360px;
}
@media (max-width: 900px){ .csx-l__stage{ grid-template-columns:1fr; } }

.csx-l__img{ width:100%; height:100%; object-fit:contain; background:var(--brand-gray-100); }
.csx-l__cap{ padding:14px; display:grid; gap:8px; }
.csx-l__title{ margin:0; color:var(--brand-navy); font-weight:900; font-family:var(--font-brand); }
.csx-l__meta{ display:grid; gap:8px; color:var(--brand-charcoal); }
.csx-l__meta strong{ color:var(--brand-olive); }

.csx-l__nav{
  position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:12px; border:0;
  display:grid; place-items:center; cursor:pointer; color:#fff; background:rgba(0,0,0,.45);
}
.csx-l__prev{ inset-inline-start:10px; }
.csx-l__next{ inset-inline-end:10px; }
.csx-l__close{
  position:absolute; inset:10px 10px auto auto; width:42px; height:42px; border-radius:12px; border:0;
  background:#fff; color:var(--brand-navy); box-shadow:0 10px 26px rgba(0,0,0,.14); cursor:pointer; font-size:24px; line-height:1;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .csx__item{ transition:none !important; transform:none !important; }
  .csx-lightbox{ transition:none !important; }
}

/* ===========================
   Blog / Tips (SEO) — Premium
   =========================== */
.bt{ position:relative; padding-block: clamp(48px,7vw,96px); background:#fff; overflow:clip; isolation:isolate; }
.bt__head{ text-align:center; margin-bottom:18px; }
.bt__title{ font-family:var(--font-brand); font-weight:900; color:var(--brand-navy); font-size:clamp(22px,4.4vw,36px); }
.bt__sub{ color: color-mix(in srgb, var(--brand-charcoal) 85%, #000 15%); }

/* orbs (brand reflection) */
.bt__orb{ position:absolute; border-radius:50%; filter: blur(26px); opacity:.45; pointer-events:none; z-index:0; }
.bt__orb--gold{ width:600px; height:600px; inset:auto 8% -25% auto; background:radial-gradient(360px 240px at 40% 45%, rgba(201,167,106,.24), transparent 60%); }
.bt__orb--olive{ width:520px; height:520px; inset:-14% auto auto -10%; background:radial-gradient(320px 220px at 40% 45%, rgba(90,125,108,.18), transparent 60%); }

/* grid */
.bt__grid{
  position:relative; z-index:1;
  display:grid; gap:16px;
  grid-template-columns: 1.12fr .88fr; grid-auto-rows:1fr;
}
.bt__card{ background:#fff; border:1px solid color-mix(in srgb, var(--brand-gray-300) 40%, transparent);
  border-radius:18px; box-shadow:0 18px 46px rgba(0,0,0,.06);
  padding:16px; overflow:hidden; transform:translate3d(0,10px,0); opacity:0; transition:transform .28s ease, opacity .28s ease;
}
.bt__card--feature{ grid-row: span 2; display:flex; }
.bt__link{ display:block; text-decoration:none; color:inherit; }
.bt__media{ position:relative; display:block; border-radius:14px; overflow:hidden; }
.bt__media img{ width:100%; height:260px; object-fit:cover; display:block; transform:scale(1.02); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.bt__shine{ position:absolute; inset:auto -20% 0 auto; width:240px; height:180px; border-radius:50%;
  background:radial-gradient(110px 80px at 60% 40%, rgba(201,167,106,.22), transparent 60%); opacity:.6; transition: transform .35s ease, opacity .35s ease; }

.bt__card--feature .bt__media img{ height:340px; }
.bt__meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:10px; color:var(--brand-charcoal); }
.bt__chip{ background:#fff; border:1px solid color-mix(in srgb, var(--brand-gray-300) 45%, transparent); color:var(--brand-olive);
  border-radius:999px; padding:4px 8px; font-weight:800; font-size:.92rem; }
.bt__chip--time{ color:var(--brand-green); }
.bt__dot{ opacity:.6; }

.bt__name{ margin:6px 0 6px; color:var(--brand-navy); font-weight:900; font-size: clamp(18px, 2.6vw, 22px); }
.bt__excerpt{ color: color-mix(in srgb, var(--brand-charcoal) 85%, #000 15%); }

.bt__card:hover .bt__media img{ transform:scale(1.06); }
.bt__card:hover .bt__shine{ transform:translate3d(-10px,-8px,0); opacity:.95; }

/* CTA */
.bt__cta{ display:flex; justify-content:center; margin-top:16px; position:relative; z-index:1; }
.bt__btn{ background:var(--brand-olive); color:#fff; padding:.75rem 1.2rem; border-radius:999px; font-weight:900; text-decoration:none; }
.bt__btn:hover{ background:var(--brand-green); transform:translateY(-1px); }

/* responsive */
@media (max-width: 980px){
  .bt__grid{ grid-template-columns:1fr; }
  .bt__card--feature .bt__media img{ height:300px; }
}
@media (max-width: 640px){
  .bt__media img{ height:220px; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .bt__card{ transition:none !important; transform:none !important; opacity:1 !important; }
  .bt__media img{ transition:none !important; }
}


/* ===========================
   FAQ (Collapsible)
   =========================== */
.qx-faq{ padding-block: clamp(48px,7vw,96px); background:#fff; }
.qx-head{ text-align:center; margin-bottom:18px; }
.qx-title{ font-family:var(--font-brand); font-weight:900; color:var(--brand-navy); font-size:clamp(22px,4.2vw,36px); }
.qx-sub{ color: color-mix(in srgb, var(--brand-charcoal) 85%, #000 15%); }

.qx-accordion{ list-style:none; margin:18px 0 0; padding:0; display:grid; gap:12px; }
.qx-item{
  background: #fff;
  border:1px solid color-mix(in srgb, var(--brand-gray-300) 40%, transparent);
  border-radius:16px;
  box-shadow:0 12px 28px rgba(0,0,0,.06);
  overflow:hidden;
}
.qx-toggle{
  all:unset; cursor:pointer; width:100%;
  display:grid; grid-template-columns: 1fr 32px; align-items:center; gap:8px;
  padding:14px 16px; font-weight:900; color:var(--brand-navy);
}
.qx-toggle:hover{ color:var(--brand-green); }
.qx-caret{
  width:26px; height:26px; border-radius:8px;
  display:grid; place-items:center; color:var(--brand-olive);
  background: color-mix(in srgb, var(--brand-green) 12%, transparent);
}
.qx-caret::before{ content:"▾"; transition: transform .25s ease; }
.qx-toggle[aria-expanded="true"] .qx-caret::before{ transform: rotate(180deg); }

.qx-panel{
  display:grid; grid-template-rows:0fr;
  transition: grid-template-rows .28s ease;
}
.qx-toggle[aria-expanded="true"] + .qx-panel{ grid-template-rows:1fr; }
.qx-a{ overflow:hidden; padding:0 16px 14px; color: color-mix(in srgb, var(--brand-charcoal) 85%, #000 15%); }

.qx-item:target{ outline:2px solid var(--brand-gold); outline-offset:2px; }

/* ===========================
   Instant Quote (Multi-step)
   =========================== */
.qx-quote{ padding-block: clamp(48px,7vw,96px); background: var(--brand-gray-100); }
.qq-head{ text-align:center; margin-bottom:18px; }
.qq-title{ font-family:var(--font-brand); font-weight:900; color:var(--brand-navy); font-size:clamp(22px,4.2vw,36px); }
.qq-sub{ color: color-mix(in srgb, var(--brand-charcoal) 85%, #000 15%); }

.qq{ background:#fff; border-radius:18px; border:1px solid color-mix(in srgb, var(--brand-gray-300) 40%, transparent);
    box-shadow:0 18px 46px rgba(0,0,0,.06); padding:16px; }
.qq-progress{ height:6px; background:rgba(0,0,0,.06); border-radius:999px; overflow:hidden; margin-bottom:12px; }
.qq-progress > span{ display:block; height:100%; width:0%; background:linear-gradient(90deg, var(--brand-gold), var(--brand-green)); transition: width .25s ease; }

.qq-step{ display:none; }
.qq-step.is-active{ display:block; }
.qq-row{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px; }
@media (max-width:900px){ .qq-row{ grid-template-columns: 1fr; } }

.qq-field{ display:flex; flex-direction:column; gap:6px; }
.qq-field > span{ font-weight:700; color:var(--brand-navy); }
.qq-field input, .qq-field select{
  appearance:none; border-radius:12px; padding:.7rem .8rem; border:1px solid color-mix(in srgb, var(--brand-gray-300) 45%, transparent);
  background:#fff; color:var(--brand-charcoal);
}
.qq-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:12px; }

.btn{ display:inline-flex; align-items:center; justify-content:center; padding:.7rem 1.1rem; border-radius:999px; font-weight:900; cursor:pointer;
  background:var(--brand-olive); color:#fff; border:0; text-decoration:none; }
.btn:hover{ background:var(--brand-green); transform:translateY(-1px); }
.btn--ghost{ background:#fff; color:var(--brand-olive); border:1px solid color-mix(in srgb, var(--brand-olive) 35%, transparent); }
.btn--ghost:hover{ color:var(--brand-green); border-color:var(--brand-green); }

.qq-note{ margin-top:10px; color:var(--brand-olive); font-weight:700; }

/* ===== Single Post Premium ===== */
.post-progress{ position:sticky; top:0; height:4px; background:rgba(0,0,0,.06); z-index:999; }
.post-progress>span{ display:block; height:100%; width:0%; background:linear-gradient(90deg, var(--brand-gold), var(--brand-green)); transition:width .15s linear; }

.post-breadcrumbs{ container-type:inline-size; container-name:post; padding:8px 0; color:var(--brand-charcoal); opacity:.8; display:flex; gap:6px; flex-wrap:wrap; }
.post-breadcrumbs a{ color:var(--brand-olive); text-decoration:none; }
.post-breadcrumbs a:hover{ color:var(--brand-green); }

.post-hero{ text-align:center; margin-bottom:16px; }
.post-title{ font-family:var(--font-brand); color:var(--brand-navy); font-weight:900; font-size: clamp(26px, 4.4vw, 44px); margin: 6px 0; }
.post-excerpt{ color: color-mix(in srgb, var(--brand-charcoal) 85%, #000 15%); max-width: 850px; margin-inline:auto; }
.post-meta{ display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin-top:10px; color:var(--brand-charcoal); }
.chip{ background:#fff; border:1px solid color-mix(in srgb, var(--brand-gray-300) 45%, transparent); color:var(--brand-olive); border-radius:999px; padding:4px 8px; font-weight:800; }
.chip--time{ color:var(--brand-green); }
.dot{ opacity:.6; }

.post-cover{ position:relative; margin-top:14px; border-radius:18px; overflow:hidden; box-shadow:0 18px 46px rgba(0,0,0,.08); }
.post-cover img{ width:100%; height: clamp(240px, 42vw, 520px); object-fit:cover; transform:scale(1.02); transition: transform .6s cubic-bezier(.2,.8,.2,1); display:block; }
.post-cover .shine{ position:absolute; inset:auto -20% 0 auto; width:300px; height:220px; border-radius:50%;
  background:radial-gradient(140px 100px at 60% 40%, rgba(201,167,106,.22), transparent 60%); opacity:.6; transition: transform .4s ease, opacity .4s ease; }
.post-cover:hover img{ transform:scale(1.06); }
.post-cover:hover .shine{ transform:translate3d(-10px,-8px,0); opacity:.95; }

.post-body{ display:grid; grid-template-columns: 300px 1fr; gap:16px; margin-top:18px; }
@media (max-width: 1024px){ .post-body{ grid-template-columns: 1fr; } }

.post-toc{ position:sticky; top:100px; align-self:start; background:#fff; border:1px solid color-mix(in srgb, var(--brand-gray-300) 40%, transparent);
  border-radius:14px; padding:12px; box-shadow:0 12px 28px rgba(0,0,0,.06); }
.toc-head{ font-weight:900; color:var(--brand-navy); margin-bottom:8px; }
.toc-nav ol{ list-style:none; padding:0; margin:0; display:grid; gap:6px; }
.toc-nav a{ color:var(--brand-olive); text-decoration:none; }
.toc-nav a:hover{ color:var(--brand-green); }
.toc-nav .toc-lvl-3{ padding-inline-start:14px; opacity:.9; }

.post-content{ min-width:0; }
.post-content h2{ margin-top:1.6em; font-weight:900; color:var(--brand-navy); }
.post-content h3{ margin-top:1.2em; font-weight:800; color:var(--brand-navy); }
.post-content p, .post-content li{ color: color-mix(in srgb, var(--brand-charcoal) 90%, #000 10%); line-height:1.9; }
.post-content blockquote{ border-inline-start:4px solid var(--brand-gold); margin:1.2em 0; padding:.5em 1em; background:var(--brand-gray-100); border-radius:12px; }
.post-content .wp-block-image img{ border-radius:12px; }
.post-content .wp-caption-text{ text-align:center; color:var(--brand-olive); }

.post-share{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:18px; }
.share-label{ font-weight:900; color:var(--brand-navy); }
.share-btn{ background:#fff; border:1px solid color-mix(in srgb, var(--brand-gray-300) 45%, transparent); color:var(--brand-olive);
  border-radius:999px; padding:.5rem .9rem; font-weight:800; text-decoration:none; cursor:pointer; }
.share-btn:hover{ color:var(--brand-green); border-color:var(--brand-green); }

.post-takeaways{ margin-top:18px; background:#fff; border:1px solid color-mix(in srgb, var(--brand-gray-300) 40%, transparent);
  border-radius:14px; padding:14px; box-shadow:0 12px 28px rgba(0,0,0,.06); }
.post-takeaways h2{ margin:0 0 8px; font-weight:900; color:var(--brand-navy); }
.post-takeaways ul{ margin:0; padding-inline-start:1.1em; }

.post-author{ display:grid; grid-template-columns: 96px 1fr; gap:12px; align-items:center; margin-top:22px; }
.author-avatar{ width:96px; height:96px; border-radius:50%; object-fit:cover; }
.author-name{ margin:0 0 6px; font-weight:900; color:var(--brand-navy); }
.author-bio{ margin:0; color:var(--brand-charcoal); }

.post-related{ margin-top:22px; }
.rel-title{ font-weight:900; color:var(--brand-navy); margin-bottom:10px; }
.rel-grid{ display:grid; gap:12px; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); }
.rel-card{ background:#fff; border:1px solid color-mix(in srgb, var(--brand-gray-300) 40%, transparent); border-radius:14px; text-decoration:none; color:inherit; overflow:hidden; }
.rel-card figure{ aspect-ratio: 16/9; overflow:hidden; }
.rel-card img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.rel-card:hover img{ transform:scale(1.06); }
.rel-card h3{ margin:10px; font-weight:800; color:var(--brand-navy); font-size:1rem; }

.post-nav{ display:flex; justify-content:space-between; gap:12px; margin-top:18px; }
.post-nav a{ display:block; background:#fff; border:1px solid color-mix(in srgb, var(--brand-gray-300) 40%, transparent); border-radius:14px; padding:10px 12px; text-decoration:none; }
.post-nav span{ display:block; color:var(--brand-olive); font-weight:700; }
.post-nav strong{ color:var(--brand-navy); font-weight:900; }

.post-comments{ margin-top:22px; }

/* ===========================
   Premium Comments — Alra3y
   =========================== */
.cmt{ margin-top:22px; }

/* Head */
.cmt__head{ margin-bottom:12px; text-align:start; }
.cmt__title{
  font-family:var(--font-brand); font-weight:900; color:var(--brand-navy);
  font-size: clamp(18px, 2.8vw, 22px);
}

/* List & items */
.cmt__list, .cmt__list .children{ list-style:none; margin:0; padding:0; }
.cmt__item{ position:relative; margin:0 0 12px; padding:0; }
.cmt__item .children{ margin-top:12px; padding-inline-start: clamp(10px, 3vw, 22px); border-inline-start: 2px solid rgba(0,0,0,.06); }

/* Card */
.cmt__body{
  display:grid; grid-template-columns: 56px 1fr; gap:12px; align-items:start;
  background:#fff; border:1px solid color-mix(in srgb, var(--brand-gray-300) 40%, transparent);
  border-radius:16px; padding:12px; box-shadow:0 12px 28px rgba(0,0,0,.06);
}
.cmt__avatar img{ width:56px; height:56px; border-radius:50%; object-fit:cover; display:block; }

.cmt__meta{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:6px; }
.cmt__author a, .cmt__author{ color:var(--brand-navy); font-weight:900; text-decoration:none; }
.cmt__time{ color: color-mix(in srgb, var(--brand-charcoal) 75%, #000 25%); font-size:.92rem; }
.cmt__edit a{ color: var(--brand-olive); text-decoration:none; }
.cmt__pending{ background:#fff7e6; color:#8a6d3b; padding:2px 8px; border-radius:999px; font-size:.85rem; }

.cmt__text{ color: color-mix(in srgb, var(--brand-charcoal) 90%, #000 10%); line-height:1.8; }
.cmt__text p{ margin: .6em 0; }
.cmt__text a{ color: var(--brand-olive); text-decoration: underline; text-underline-offset: 2px; }

/* Actions */
.cmt__actions{ margin-top:8px; display:flex; gap:10px; }
.cmt__actions a.comment-reply-link{
  display:inline-flex; align-items:center; gap:6px; padding:.45rem .8rem; border-radius:999px;
  background:#fff; color:var(--brand-olive); border:1px solid color-mix(in srgb, var(--brand-olive) 35%, transparent);
  font-weight:800; text-decoration:none;
}
.cmt__actions a.comment-reply-link:hover{ color:var(--brand-green); border-color:var(--brand-green); }

/* Pending state tint */
.cmt__item.is-pending .cmt__body{ border-color: rgba(201,167,106,.35); box-shadow:0 12px 28px rgba(201,167,106,.10); }

/* Navigation (paginate comments) */
.comment-navigation{ display:flex; justify-content:space-between; margin:10px 0 16px; }
.comment-navigation a{
  text-decoration:none; background:#fff; border:1px solid color-mix(in srgb, var(--brand-gray-300) 40%, transparent);
  border-radius:999px; padding:.5rem .9rem; color:var(--brand-olive); font-weight:800;
}
.comment-navigation a:hover{ color:var(--brand-green); border-color:var(--brand-green); }

/* Closed note */
.cmt__closed{
  margin-top:12px; background:var(--brand-gray-100); border:1px solid color-mix(in srgb, var(--brand-gray-300) 40%, transparent);
  border-radius:12px; padding:10px 12px; color:var(--brand-charcoal);
}

/* ===== Comment Form ===== */
.cmtf{ margin-top:18px; background:#fff; border:1px solid color-mix(in srgb, var(--brand-gray-300) 40%, transparent);
  border-radius:16px; padding:14px; box-shadow:0 12px 28px rgba(0,0,0,.06); }
.cmtf__head{ margin-bottom:10px; }
.cmtf__title{ font-family:var(--font-brand); font-weight:900; color:var(--brand-navy); font-size: clamp(18px, 2.6vw, 22px); }

.cmtf__field{ display:flex; flex-direction:column; gap:6px; margin:0 0 10px; }
.cmtf__field label{ font-weight:800; color:var(--brand-navy); }
.cmtf__field input, .cmtf__field textarea{
  width:100%; border-radius:12px; border:1px solid color-mix(in srgb, var(--brand-gray-300) 45%, transparent);
  background:#fff; color:var(--brand-charcoal); padding:.7rem .8rem;
}
.cmtf__field--area textarea{ min-height:160px; resize:vertical; }
.cmtf__check{ margin:4px 0 8px; color:var(--brand-charcoal); }

.cmtf__actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:8px; }
.cmtf .btn{
  display:inline-flex; align-items:center; justify-content:center; padding:.7rem 1.1rem; border-radius:999px;
  font-weight:900; cursor:pointer; background:var(--brand-olive); color:#fff; border:0;
}
.cmtf .btn:hover{ background:var(--brand-green); transform: translateY(-1px); }

/* Error/required (browser) */
.cmtf input:invalid, .cmtf textarea:invalid{ border-color: #E16A6A; box-shadow:0 0 0 3px rgba(225,106,106,.12); }

/* Responsive */
@media (max-width: 640px){
  .cmt__item .children{ padding-inline-start: 12px; }
  .cmt__body{ grid-template-columns: 44px 1fr; }
  .cmt__avatar img{ width:44px; height:44px; }
}


/* ===== Page Template (Hero + Body) ===== */
.pg-hero{ position:relative; padding-block: clamp(38px, 6vw, 72px); background:#fff; overflow:clip; isolation:isolate; }
.pg-breadcrumbs{ color:var(--brand-charcoal); opacity:.8; display:flex; gap:6px; flex-wrap:wrap; }
.pg-breadcrumbs a{ color:var(--brand-olive); text-decoration:none; }
.pg-breadcrumbs a:hover{ color:var(--brand-green); }

.pg-hero__grid{ display:grid; grid-template-columns: 1fr 520px; gap:16px; align-items:center; margin-top:8px; }
@media (max-width: 980px){ .pg-hero__grid{ grid-template-columns:1fr; } }

.pg-title{ font-family:var(--font-brand); color:var(--brand-navy); font-weight:900; font-size: clamp(26px, 4.6vw, 42px); margin:6px 0; }
.pg-sub{ color: color-mix(in srgb, var(--brand-charcoal) 85%, #000 15%); max-width: 720px; }

.pg-cover{ position:relative; border-radius:18px; overflow:hidden; box-shadow:0 18px 46px rgba(0,0,0,.08); }
.pg-cover img{ width:100%; height: clamp(220px, 38vw, 420px); object-fit:cover; transform:scale(1.02); transition: transform .6s cubic-bezier(.2,.8,.2,1); display:block; }
.pg-shine{ position:absolute; inset:auto -20% 0 auto; width:280px; height:200px; border-radius:50%;
  background:radial-gradient(130px 90px at 60% 40%, rgba(201,167,106,.22), transparent 60%); opacity:.6; transition: transform .4s ease, opacity .4s ease; }
.pg-cover:hover img{ transform:scale(1.06); }
.pg-cover:hover .pg-shine{ transform:translate3d(-10px,-8px,0); opacity:.95; }

/* orbs */
.pg-orb{ position:absolute; border-radius:50%; filter: blur(26px); opacity:.45; pointer-events:none; z-index:0; }
.pg-orb--gold{ width:600px; height:600px; inset:auto 8% -28% auto; background:radial-gradient(360px 240px at 40% 45%, rgba(201,167,106,.24), transparent 60%); }
.pg-orb--olive{ width:520px; height:520px; inset:-14% auto auto -10%; background:radial-gradient(320px 220px at 40% 45%, rgba(90,125,108,.18), transparent 60%); }

/* Body */
.pg{ display:grid; grid-template-columns: 280px 1fr; gap:16px; margin-top:16px; }
@media (max-width: 1024px){ .pg{ grid-template-columns: 1fr; } }

.pg-sidenav{ position:sticky; top:110px; align-self:start; background:#fff; border:1px solid color-mix(in srgb, var(--brand-gray-300) 40%, transparent);
  border-radius:14px; padding:12px; box-shadow:0 12px 28px rgba(0,0,0,.06); }
.pg-sidenav__head{ font-weight:900; color:var(--brand-navy); margin-bottom:8px; }
.pg-sidenav__list{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.pg-sidenav__list a{ color:var(--brand-olive); text-decoration:none; font-weight:800; }
.pg-sidenav__list li.is-active a,
.pg-sidenav__list a:hover{ color:var(--brand-green); }
.pg-content{ min-width:0; }
.pg-content h2{ margin-top:1.6em; font-weight:900; color:var(--brand-navy); }
.pg-content h3{ margin-top:1.2em; font-weight:800; color:var(--brand-navy); }
.pg-content p, .pg-content li{ color: color-mix(in srgb, var(--brand-charcoal) 90%, #000 10%); line-height:1.9; }
.pg-content .wp-block-image img{ border-radius:12px; }
.pg-pages{ margin:1rem 0; display:flex; flex-wrap:wrap; gap:6px; }
.pg-pages span{ background:#fff; border:1px solid color-mix(in srgb, var(--brand-gray-300) 45%, transparent); border-radius:8px; padding:.25rem .55rem; }
.pg-edit a{ color:var(--brand-olive); text-decoration:none; }
.pg-edit a:hover{ color:var(--brand-green); }

/* Comments section wrapper on pages */
.pg-comments{ margin-top:22px; }

/* ===== Archive Premium ===== */
.ar-hero{ position:relative; padding-block: clamp(38px, 6vw, 72px); background:#fff; overflow:clip; isolation:isolate; }
.ar-breadcrumbs{ color:var(--brand-charcoal); opacity:.8; display:flex; gap:6px; flex-wrap:wrap; }
.ar-breadcrumbs a{ color:var(--brand-olive); text-decoration:none; }
.ar-breadcrumbs a:hover{ color:var(--brand-green); }

.ar-hero__grid{ display:grid; grid-template-columns: 1fr 520px; gap:16px; align-items:center; margin-top:8px; }
@media (max-width: 980px){ .ar-hero__grid{ grid-template-columns:1fr; } }

.ar-title{ font-family:var(--font-brand); color:var(--brand-navy); font-weight:900; font-size: clamp(26px, 4.6vw, 42px); margin:6px 0; }
.ar-sub{ color: color-mix(in srgb, var(--brand-charcoal) 85%, #000 15%); max-width: 720px; }

.ar-filters{ margin-top:12px; display:flex; flex-wrap:wrap; gap:8px; }
.pill{ display:inline-flex; align-items:center; padding:.45rem .9rem; border-radius:999px; background:#fff; color:var(--brand-olive);
  border:1px solid color-mix(in srgb, var(--brand-olive) 35%, transparent); font-weight:800; text-decoration:none; }
.pill:hover{ color:var(--brand-green); border-color:var(--brand-green); }
.pill.is-active{ background:var(--brand-olive); color:#fff; border-color:var(--brand-olive); }

.ar-cover{ position:relative; border-radius:18px; overflow:hidden; box-shadow:0 18px 46px rgba(0,0,0,.08); }
.ar-cover img{ width:100%; height: clamp(220px, 38vw, 420px); object-fit:cover; transform:scale(1.02); transition: transform .6s cubic-bezier(.2,.8,.2,1); display:block; }
.ar-shine{ position:absolute; inset:auto -20% 0 auto; width:280px; height:200px; border-radius:50%;
  background:radial-gradient(130px 90px at 60% 40%, rgba(201,167,106,.22), transparent 60%); opacity:.6; transition: transform .4s ease, opacity .4s ease; }
.ar-cover:hover img{ transform:scale(1.06); }
.ar-cover:hover .ar-shine{ transform:translate3d(-10px,-8px,0); opacity:.95; }

/* orbs */
.ar-orb{ position:absolute; border-radius:50%; filter: blur(26px); opacity:.45; pointer-events:none; z-index:0; }
.ar-orb--gold{ width:600px; height:600px; inset:auto 8% -28% auto; background:radial-gradient(360px 240px at 40% 45%, rgba(201,167,106,.24), transparent 60%); }
.ar-orb--olive{ width:520px; height:520px; inset:-14% auto auto -10%; background:radial-gradient(320px 220px at 40% 45%, rgba(90,125,108,.18), transparent 60%); }

/* Grid */
.ar{ margin-top:16px; }
.ar-grid{ display:grid; gap:16px; grid-template-columns: repeat(12, 1fr); }
.ar-card{ grid-column: span 4; background:#fff; border:1px solid color-mix(in srgb, var(--brand-gray-300) 40%, transparent); border-radius:18px;
  box-shadow:0 18px 46px rgba(0,0,0,.06); padding:16px; overflow:hidden; transform:translate3d(0,10px,0); opacity:0;
  transition:transform .28s ease, opacity .28s ease;
}
@media (max-width: 1100px){ .ar-card{ grid-column: span 6; } }
@media (max-width: 700px){ .ar-card{ grid-column: span 12; } }

.ar-link{ display:block; text-decoration:none; color:inherit; }
.ar-media{ position:relative; display:block; border-radius:14px; overflow:hidden; }
.ar-media img{ width:100%; height:220px; object-fit:cover; transform:scale(1.02); transition: transform .5s cubic-bezier(.2,.8,.2,1); display:block; }
.ar-shine{ position:absolute; inset:auto -20% 0 auto; width:240px; height:180px; border-radius:50%;
  background:radial-gradient(110px 80px at 60% 40%, rgba(201,167,106,.22), transparent 60%); opacity:.6; transition: transform .35s ease, opacity .35s ease; }

.ar-meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:10px; color:var(--brand-charcoal); }
.chip{ background:#fff; border:1px solid color-mix(in srgb, var(--brand-gray-300) 45%, transparent); color:var(--brand-olive);
  border-radius:999px; padding:4px 8px; font-weight:800; font-size:.92rem; }
.dot{ opacity:.6; }

.ar-name{ margin:6px 0 6px; color:var(--brand-navy); font-weight:900; font-size: clamp(18px, 2.6vw, 22px); }
.ar-excerpt{ color: color-mix(in srgb, var(--brand-charcoal) 85%, #000 15%); }

.ar-card:hover .ar-media img{ transform:scale(1.06); }
.ar-card:hover .ar-shine{ transform:translate3d(-10px,-8px,0); opacity:.95; }

/* Pagination */
.ar-pagination{ display:flex; justify-content:center; margin-top:18px; }
.ar-pagination .pagination .page-numbers{ display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:36px; margin:0 4px; border-radius:10px; text-decoration:none;
  background:#fff; border:1px solid color-mix(in srgb, var(--brand-gray-300) 40%, transparent); color:var(--brand-olive); font-weight:800; }
.ar-pagination .pagination .page-numbers.current{ background:var(--brand-olive); color:#fff; border-color:var(--brand-olive); }
.ar-pagination .pagination .page-numbers:hover{ color:var(--brand-green); border-color:var(--brand-green); }

/* Empty */
.ar-empty{ text-align:center; color:var(--brand-charcoal); background:var(--brand-gray-100); border-radius:12px; padding:14px; margin:20px 0; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .ar-card{ transition:none !important; transform:none !important; opacity:1 !important; }
  .ar-media img{ transition:none !important; }
}

/* ===== Quote Page ===== */
.qp-hero{ position:relative; padding-block: clamp(38px,6vw,72px); background:#fff; overflow:clip; isolation:isolate; }
.qp-hero__grid{ display:grid; grid-template-columns: 1fr 520px; gap:16px; align-items:center; }
@media (max-width: 980px){ .qp-hero__grid{ grid-template-columns:1fr; } }

.qp-title{ font-family:var(--font-brand); color:var(--brand-navy); font-weight:900; font-size: clamp(26px, 4.6vw, 42px); margin:6px 0; }
.qp-sub{ color: color-mix(in srgb, var(--brand-charcoal) 85%, #000 15%); max-width: 720px; }
.qp-bullets{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; padding:0; list-style:none; }
.qp-bullets li{ background:#fff; border:1px solid color-mix(in srgb, var(--brand-gray-300) 40%, transparent); border-radius:999px; padding:.45rem .9rem; font-weight:800; color:var(--brand-olive); }

.qp-cover{ position:relative; border-radius:18px; overflow:hidden; box-shadow:0 18px 46px rgba(0,0,0,.08); }
.qp-cover img{ width:100%; height: clamp(220px, 38vw, 420px); object-fit:cover; display:block; transform:scale(1.02); transition:transform .6s cubic-bezier(.2,.8,.2,1); }
.qp-shine{ position:absolute; inset:auto -20% 0 auto; width:280px; height:200px; border-radius:50%; background:radial-gradient(130px 90px at 60% 40%, rgba(201,167,106,.22), transparent 60%); opacity:.6; }
.qp-cover:hover img{ transform:scale(1.06); }

.qp-orb{ position:absolute; border-radius:50%; filter: blur(26px); opacity:.45; pointer-events:none; z-index:0; }
.qp-orb--gold{ width:600px; height:600px; inset:auto 8% -28% auto; background:radial-gradient(360px 240px at 40% 45%, rgba(201,167,106,.24), transparent 60%); }
.qp-orb--olive{ width:520px; height:520px; inset:-14% auto auto -10%; background:radial-gradient(320px 220px at 40% 45%, rgba(90,125,108,.18), transparent 60%); }

.qp{ margin-top:16px; }

/* extend quote form for full page */
.qq--page{ padding:18px; }
.qq-estimate{
  margin-top:12px; background:#fff; border:1px solid color-mix(in srgb, var(--brand-gray-300) 40%, transparent);
  border-radius:14px; padding:12px; box-shadow:0 12px 28px rgba(0,0,0,.06);
}
.qq-estimate__head{ font-weight:900; color:var(--brand-navy); margin-bottom:8px; }
.qq-estimate__grid{ display:grid; gap:6px; color:var(--brand-charcoal); }
.qq-estimate__note{ color:var(--brand-olive); font-size:.92rem; }


/* ===========================
   CTA Footer Band
   =========================== */
.cta-band{ position:relative; background: #fff; padding-block: clamp(38px,6vw,72px); }
.cta__wrap{
  position:relative; overflow:hidden; border-radius:18px; padding:20px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--brand-beige) 85%, #fff 15%), #fff);
  border:1px solid color-mix(in srgb, var(--brand-gray-300) 40%, transparent);
  box-shadow:0 18px 46px rgba(0,0,0,.06);
  display:grid; grid-template-columns: 1.2fr .8fr; align-items:center; gap:12px;
}
@media (max-width:800px){ .cta__wrap{ grid-template-columns:1fr; text-align:center; } }
.cta__copy h3{ margin:0 0 6px; color:var(--brand-navy); font-family:var(--font-brand); font-weight:900; }
.cta__copy p{ margin:0; color: color-mix(in srgb, var(--brand-charcoal) 85%, #000 15%); }
.cta__actions{ display:flex; gap:10px; justify-content:end; }
@media (max-width:800px){ .cta__actions{ justify-content:center; } }
.cta__orb{ position:absolute; inset:auto 10% -30% auto; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(300px 220px at 40% 45%, rgba(201,167,106,.22), transparent 60%); filter:blur(24px); pointer-events:none; }


.csx__grid,
.svc-arc,
.pr-journey { content-visibility: auto; contain-intrinsic-size: 1000px 600px; }
img[loading="lazy"] { background: #f3f3f3; }
ul {list-style: none !important;}