/* ==========================================================================
   GOYAL DIGITAL — MASTER STYLESHEET
   Palette: Deep navy + signal gold. Premium, futuristic, high-contrast.
   ========================================================================== */

:root{
  /* --- core palette (from brand reference) --- */
  --navy-950:#040B1E;
  --navy-925:#061128;
  --navy-900:#081634;
  --navy-850:#0A1B40;
  --navy-800:#0C2250;
  --navy-700:#123066;
  --navy-600:#1A3F7F;
  --blue-500:#1E6FD9;

  --gold:#F5A623;
  --gold-lt:#FBC55C;
  --gold-dk:#C97F0A;
  --green:#2ECC71;

  --white:#FFFFFF;
  --ice:#F4F7FC;
  --ice-2:#EAF0F9;
  --ink:#16233D;
  --body:#4E5D79;
  --body-lt:#7A88A3;
  --muted:#B6C4DE;
  --muted-2:#8C9CBC;

  --hair:rgba(255,255,255,.10);
  --hair-gold:rgba(245,166,35,.30);
  --edge:#E2E9F5;

  /* --- type --- */
  --ff-display:'Poppins',system-ui,-apple-system,sans-serif;
  --ff-body:'Inter',system-ui,-apple-system,sans-serif;

  /* --- layout --- */
  --wrap:1280px;
  --narrow:820px;
  --pad:clamp(18px,4vw,40px);
  --r-xs:6px; --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:32px;

  --shadow:0 26px 64px rgba(6,17,40,.14);
  --shadow-sm:0 10px 30px rgba(6,17,40,.08);
  --shadow-gold:0 14px 36px rgba(245,166,35,.34);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:140px;-webkit-text-size-adjust:100%;}
body{
  margin:0;font-family:var(--ff-body);font-size:16px;line-height:1.72;
  color:var(--body);background:var(--white);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
}
img,svg,video{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit;}
ul,ol{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4,h5{font-family:var(--ff-display);margin:0;line-height:1.16;font-weight:800;letter-spacing:-.025em;color:var(--ink);}
p{margin:0;}
strong,b{font-weight:600;color:var(--ink);}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px;}
::selection{background:var(--gold);color:var(--navy-950);}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad);}
.narrow{max-width:var(--narrow);margin-inline:auto;}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.skip{position:absolute;left:-9999px;top:0;z-index:9999;background:var(--gold);color:var(--navy-950);padding:12px 20px;font-weight:700;border-radius:0 0 8px 0;}
.skip:focus{left:0;}

/* ==========================================================================
   TOP BAR
   ========================================================================== */
.topbar{background:var(--navy-950);color:var(--white);font-size:13.5px;border-bottom:2px solid var(--gold);}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:52px;flex-wrap:wrap;}
.tb-left{display:flex;align-items:center;flex-wrap:wrap;}
.tb-item{display:flex;align-items:center;gap:9px;padding:6px 22px;position:relative;color:#E6ECF8;transition:color .25s;}
.tb-item+.tb-item::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:16px;background:rgba(255,255,255,.18);}
.tb-left .tb-item:first-child{padding-left:0;}
.tb-item:hover{color:var(--gold);}
.tb-item svg{width:15px;height:15px;flex:none;fill:var(--gold);}
.tb-right{display:flex;align-items:center;gap:10px;}
.tb-right .lbl{color:#E6ECF8;}
.soc{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--white);color:var(--navy-900);transition:transform .3s var(--ease),background .3s,color .3s;}
.soc svg{width:14px;height:14px;fill:currentColor;}
.soc:hover{background:var(--gold);color:var(--navy-950);transform:translateY(-3px);}

/* ==========================================================================
   HEADER / NAV
   ========================================================================== */
.header{position:sticky;top:0;z-index:900;background:var(--white);box-shadow:0 2px 20px rgba(8,22,52,.07);transition:box-shadow .3s;}
.header.stuck{box-shadow:0 8px 30px rgba(8,22,52,.14);}
.header .wrap{display:flex;align-items:center;justify-content:space-between;gap:22px;min-height:94px;}

.brand{display:flex;align-items:center;gap:12px;flex:none;}
.brand-mark{width:62px;height:55px;flex:none;}
/* the brand is now the uploaded logo rather than the drawn mark plus wordmark;
   height-constrained so any aspect ratio sits on the same baseline */
.brand-logo{height:58px;width:auto;max-width:230px;object-fit:contain;display:block;flex:none;}
@media (max-width:600px){.brand-logo{height:42px;max-width:180px;}}
.brand-txt{display:flex;flex-direction:column;line-height:1;}
.brand-name{font-family:var(--ff-display);font-weight:800;font-size:28px;color:var(--navy-800);letter-spacing:-.025em;}
.brand-tag{font-size:9.5px;letter-spacing:.05em;color:var(--body-lt);font-weight:600;margin-top:5px;}

.nav{display:flex;align-items:center;gap:2px;}
.nav>li{position:relative;}
.nav>li>a{display:flex;align-items:center;gap:7px;padding:14px 14px;font-family:var(--ff-display);font-size:15px;font-weight:500;color:var(--navy-850);border-radius:var(--r-xs);transition:color .25s;}
.nav>li>a .caret{width:9px;height:9px;fill:var(--gold);transition:transform .3s var(--ease);}
.nav>li>a::after{content:"";position:absolute;left:14px;right:14px;bottom:6px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);}
.nav>li:hover>a,.nav>li.active>a{color:var(--gold-dk);}
.nav>li:hover>a::after,.nav>li.active>a::after{transform:scaleX(1);}
.nav>li:hover>a .caret{transform:rotate(180deg);}

.drop{position:absolute;top:calc(100% + 10px);left:0;min-width:272px;background:var(--white);border-radius:var(--r-md);border-top:3px solid var(--gold);box-shadow:0 24px 54px rgba(8,22,52,.18);padding:10px;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s;}
.nav>li:hover .drop{opacity:1;visibility:visible;transform:translateY(0);}
.drop a{display:block;padding:10px 14px;border-radius:8px;font-size:14.5px;color:#33415C;font-weight:500;transition:background .22s,color .22s,padding-left .22s;}
.drop a:hover{background:var(--ice);color:var(--gold-dk);padding-left:20px;}
/* the overview link ("All Services") is the heading of its dropdown: darkest of
   the group so weight alone isn't carrying it */
.drop a strong{color:var(--navy-850);font-weight:700;}
.drop a:hover strong{color:var(--gold-dk);}
.drop-sep{height:1px;background:var(--edge);margin:8px 12px;}

.btn-audit{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:var(--r-xs);border:2px solid var(--gold);font-family:var(--ff-display);font-weight:700;font-size:13.5px;letter-spacing:.045em;text-transform:uppercase;color:var(--navy-850);background:var(--white);transition:background .3s var(--ease),color .3s,box-shadow .3s,transform .3s;flex:none;}
.btn-audit svg{width:18px;height:18px;fill:var(--gold);transition:fill .3s;}
.btn-audit:hover{background:var(--gold);color:var(--navy-950);box-shadow:var(--shadow-gold);transform:translateY(-2px);}
.btn-audit:hover svg{fill:var(--navy-950);}

.burger{display:none;width:46px;height:46px;border-radius:10px;background:var(--navy-800);place-items:center;}
.burger span{display:block;width:21px;height:2px;background:var(--white);border-radius:2px;position:relative;transition:.3s var(--ease);}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:21px;height:2px;background:var(--white);border-radius:2px;transition:.3s var(--ease);}
.burger span::before{top:-7px;}.burger span::after{top:7px;}
body.menu-open .burger span{background:transparent;}
body.menu-open .burger span::before{top:0;transform:rotate(45deg);}
body.menu-open .burger span::after{top:0;transform:rotate(-45deg);}
.backdrop{position:fixed;inset:0;background:rgba(4,11,30,.62);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:.35s;z-index:940;}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:11px;padding:16px 30px;border-radius:var(--r-xs);font-family:var(--ff-display);font-weight:700;font-size:15.5px;transition:transform .3s var(--ease),box-shadow .3s,background .3s,color .3s,border-color .3s;white-space:nowrap;}
.btn svg{width:19px;height:19px;fill:currentColor;transition:transform .3s var(--ease);flex:none;}
.btn-gold{background:var(--gold);color:var(--navy-950);box-shadow:var(--shadow-gold);}
.btn-gold:hover{background:var(--gold-lt);transform:translateY(-3px);box-shadow:0 22px 46px rgba(245,166,35,.42);}
.btn-ghost{border:2px solid rgba(255,255,255,.5);color:var(--white);}
.btn-ghost:hover{border-color:var(--gold);background:var(--gold);color:var(--navy-950);transform:translateY(-3px);}
.btn-ghost:hover svg{transform:translateX(5px);}
.btn-navy{background:var(--navy-800);color:var(--white);}
.btn-navy:hover{background:var(--navy-700);transform:translateY(-3px);box-shadow:0 18px 38px rgba(12,34,80,.3);}
.btn-outline{border:2px solid var(--navy-800);color:var(--navy-800);}
.btn-outline:hover{background:var(--navy-800);color:var(--white);transform:translateY(-3px);}
.btn-sm{padding:12px 22px;font-size:14px;}
.btn-block{width:100%;}

/* ==========================================================================
   SIGNATURE: THE SIGNAL LINE
   A gold data-line that rises through the page — the brand's growth arrow,
   used as section transition and accent throughout.
   ========================================================================== */
.signal{display:block;width:100%;height:auto;}
.signal-rule{height:1px;background:linear-gradient(90deg,transparent,var(--hair-gold) 20%,var(--gold) 50%,var(--hair-gold) 80%,transparent);margin:0;border:0;}

/* dot-grid + aurora atmosphere for dark surfaces */
.grid-veil{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.16) 1.1px,transparent 1.1px);background-size:15px 15px;opacity:.5;pointer-events:none;}
.aurora{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;opacity:.5;}
.aurora-gold{background:rgba(245,166,35,.30);}
.aurora-blue{background:rgba(30,111,217,.34);}

/* ==========================================================================
   HERO (home)
   ========================================================================== */
.hero{position:relative;overflow:hidden;color:var(--white);padding-block:clamp(50px,6.5vw,84px) 0;
  background:linear-gradient(155deg,var(--navy-900) 0%,var(--navy-850) 46%,var(--navy-950) 100%);}
.hero .aurora-1{width:620px;height:620px;top:-160px;right:-100px;}
.hero .aurora-2{width:520px;height:520px;bottom:-200px;left:-160px;}
.hero .grid-veil{-webkit-mask-image:radial-gradient(ellipse 72% 62% at 42% 42%,#000 5%,transparent 74%);mask-image:radial-gradient(ellipse 72% 62% at 42% 42%,#000 5%,transparent 74%);}
.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.04fr .96fr;gap:36px;align-items:center;}

.eyebrow{font-family:var(--ff-display);font-weight:600;font-size:18px;color:var(--gold);margin-bottom:14px;display:inline-block;}
.eyebrow::after{content:"";display:block;width:56px;height:3px;background:var(--gold);margin-top:12px;border-radius:2px;}

.hero h1{font-size:clamp(42px,6.2vw,86px);font-weight:900;letter-spacing:-.038em;line-height:1.02;margin-bottom:14px;color:var(--white);}
.hero h1 .gold{color:var(--gold);display:block;}
.hero-sub{font-family:var(--ff-display);font-style:italic;font-weight:600;font-size:clamp(19px,2.3vw,30px);color:var(--white);padding-left:16px;border-left:4px solid var(--gold);margin-bottom:24px;line-height:1.3;}
.hero-copy{color:#CBD7EC;font-size:16.5px;max-width:570px;margin-bottom:30px;}
.hero-cta{display:flex;gap:15px;flex-wrap:wrap;}
.hero-trust{display:flex;gap:26px;flex-wrap:wrap;margin-top:30px;padding-top:26px;border-top:1px solid var(--hair);}
.hero-trust div b{display:block;font-family:var(--ff-display);font-size:25px;font-weight:900;color:var(--gold);line-height:1;}
.hero-trust div span{font-size:13px;color:var(--muted);letter-spacing:.02em;}

.hero-visual{position:relative;min-height:520px;display:grid;place-items:center;}
.orbit{position:absolute;inset:0;margin:auto;width:min(520px,94%);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(26,63,127,.5),transparent 68%);border:1px dashed rgba(245,166,35,.22);}
.orbit::before{content:"";position:absolute;inset:11%;border-radius:50%;border:1px dashed rgba(255,255,255,.13);}
.orbit-spin{position:absolute;inset:0;animation:spin 48s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.ic{position:absolute;width:52px;height:52px;border-radius:13px;display:grid;place-items:center;background:rgba(255,255,255,.07);border:1px solid rgba(245,166,35,.35);backdrop-filter:blur(6px);animation:spin 48s linear infinite reverse;}
.ic svg{width:24px;height:24px;fill:var(--gold);}
.ic.b{border-color:rgba(120,180,255,.45);}
.ic.b svg{fill:#7FB2FF;}
.ic:nth-child(1){top:1%;left:44%;}
.ic:nth-child(2){top:14%;left:77%;}
.ic:nth-child(3){top:45%;left:93%;}
.ic:nth-child(4){top:77%;left:80%;}
.ic:nth-child(5){top:91%;left:44%;}
.ic:nth-child(6){top:75%;left:5%;}
.ic:nth-child(7){top:43%;left:-3%;}
.ic:nth-child(8){top:13%;left:8%;}
/* height:auto is load-bearing — the img carries width/height attributes, which
   map to a presentational height and would otherwise stretch the picture to its
   intrinsic pixel height. With it, the attributes still supply the aspect ratio
   that reserves space before the image loads. */
.hero-photo{position:relative;z-index:3;width:min(430px,88%);height:auto;filter:drop-shadow(0 30px 60px rgba(0,0,0,.5));}
/* When the hero artwork already carries its own icon halo and ring, the
   decorative orbit chips are dropped — two icon systems on top of each other
   read as clutter. The soft radial glow stays, so the figure still sits on
   something rather than floating on flat navy. */
.hero-visual.has-art .ic{display:none;}
.hero-visual.has-art .orbit{border-color:transparent;width:min(560px,100%);}
.hero-visual.has-art .orbit::before{display:none;}
.hero-visual.has-art .hero-photo{width:min(540px,100%);}

.hero-photo-fb{position:relative;z-index:3;width:min(390px,84%);aspect-ratio:3/4;border-radius:200px 200px 26px 26px;background:linear-gradient(170deg,rgba(255,255,255,.12),rgba(255,255,255,.03));border:1px dashed rgba(245,166,35,.4);display:grid;place-items:center;text-align:center;padding:30px;color:var(--muted);font-size:13.5px;line-height:1.6;}

/* feature strip */
.fstrip{position:relative;z-index:4;margin-top:38px;}
.fstrip-box{border:1px solid var(--hair-gold);border-radius:var(--r-md);background:rgba(4,11,30,.5);backdrop-filter:blur(8px);display:grid;grid-template-columns:repeat(4,1fr);}
.fs{display:flex;align-items:flex-start;gap:15px;padding:26px 24px;position:relative;}
.fs+.fs::before{content:"";position:absolute;left:0;top:22%;height:56%;width:1px;background:var(--hair);}
.fs-ic{width:56px;height:56px;flex:none;border-radius:50%;border:1.5px solid var(--gold);display:grid;place-items:center;transition:background .3s var(--ease),transform .3s var(--ease);}
.fs-ic svg{width:26px;height:26px;fill:var(--gold);transition:fill .3s;}
.fs:hover .fs-ic{background:var(--gold);transform:rotate(-8deg) scale(1.06);}
.fs:hover .fs-ic svg{fill:var(--navy-950);}
.fs h3,.fs h4{font-size:16.5px;color:var(--gold);font-weight:700;margin-bottom:5px;}
.fs p{font-size:14px;color:#C6D2E8;line-height:1.55;}

/* ==========================================================================
   PAGE HERO (inner pages)
   ========================================================================== */
.phero{position:relative;overflow:hidden;color:var(--white);padding-block:clamp(52px,6vw,84px) clamp(58px,6.5vw,92px);
  background:linear-gradient(150deg,var(--navy-900),var(--navy-925) 55%,var(--navy-950));}
.phero .aurora-1{width:560px;height:560px;top:-200px;right:-120px;}
.phero .aurora-2{width:420px;height:420px;bottom:-240px;left:-120px;}
.phero .grid-veil{-webkit-mask-image:radial-gradient(ellipse 70% 70% at 70% 30%,#000,transparent 74%);mask-image:radial-gradient(ellipse 70% 70% at 70% 30%,#000,transparent 74%);}
.phero .wrap{position:relative;z-index:2;}
.phero-inner{max-width:860px;}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-size:13.5px;color:var(--muted-2);margin-bottom:20px;}
.crumb a{color:var(--muted);transition:color .25s;}
.crumb a:hover{color:var(--gold);}
.crumb svg{width:11px;height:11px;fill:var(--gold);opacity:.75;}
.crumb span[aria-current]{color:var(--gold);}
.phero h1{font-size:clamp(33px,5vw,60px);color:var(--white);font-weight:900;letter-spacing:-.032em;margin-bottom:16px;}
.phero h1 .gold{color:var(--gold);}
.phero p.lede{color:#C6D3EA;font-size:clamp(16px,1.7vw,18.5px);max-width:720px;}
.phero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px;}
.phero-badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px;}
.pb{display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border-radius:30px;border:1px solid var(--hair-gold);background:rgba(255,255,255,.05);font-size:13px;color:#D6E0F2;font-weight:500;}
.pb svg{width:14px;height:14px;fill:var(--gold);}

/* ==========================================================================
   SECTION SHELL
   ========================================================================== */
.sec{padding-block:clamp(60px,7vw,100px);position:relative;}
.sec-tight{padding-block:clamp(44px,5vw,68px);}
.sec-dark{background:linear-gradient(162deg,var(--navy-900),var(--navy-950));color:var(--white);overflow:hidden;}
.sec-dark h2,.sec-dark h3,.sec-dark h4{color:var(--white);}
.sec-ice{background:var(--ice);}
.sec-head{max-width:740px;margin:0 auto clamp(36px,4.6vw,56px);text-align:center;}
.sec-eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--ff-display);font-weight:700;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-dk);margin-bottom:14px;}
.sec-eyebrow::before,.sec-eyebrow::after{content:"";width:26px;height:2px;background:var(--gold);border-radius:2px;}
.sec-dark .sec-eyebrow{color:var(--gold);}
.sec-head h2{font-size:clamp(29px,4vw,45px);margin-bottom:15px;}
.sec-head h2 .gold{color:var(--gold-dk);}
.sec-dark .sec-head h2 .gold{color:var(--gold);}
.sec-head p{color:#5A6987;font-size:16.5px;}
.sec-dark .sec-head p{color:var(--muted);}
.head-left{text-align:left;margin-inline:0;}
.head-left .sec-eyebrow::before{display:none;}

/* ==========================================================================
   GENERIC GRIDS / CARDS
   ========================================================================== */
.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}

.card{background:var(--white);border:1px solid var(--edge);border-radius:var(--r-md);padding:32px 28px;transition:transform .38s var(--ease),box-shadow .38s,border-color .38s;position:relative;overflow:hidden;}
.card:hover{transform:translateY(-9px);box-shadow:var(--shadow);border-color:transparent;}
.card h3{font-size:20px;margin-bottom:10px;}
.card p{font-size:15px;color:var(--body);}
.card-ic{width:62px;height:62px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(145deg,var(--navy-800),var(--navy-700));margin-bottom:20px;transition:transform .4s var(--ease);}
.card-ic svg{width:29px;height:29px;fill:var(--gold);}
.card:hover .card-ic{transform:rotate(-8deg) scale(1.07);}

.card-dark{background:rgba(255,255,255,.045);border:1px solid var(--hair);color:var(--muted);}
.card-dark:hover{background:rgba(245,166,35,.09);border-color:var(--hair-gold);box-shadow:none;}
.card-dark p{color:var(--muted);}

.svc{background:var(--white);border:1px solid var(--edge);border-radius:var(--r-md);position:relative;overflow:hidden;
  transition:transform .38s var(--ease),box-shadow .38s,border-color .38s;display:flex;flex-direction:column;}
/* cover area: the uploaded image when there is one, otherwise the service icon
   on the same navy panel the article cards use */
.svc-media{position:relative;aspect-ratio:16/9;background:linear-gradient(150deg,var(--navy-800),var(--navy-950));
  display:grid;place-items:center;overflow:hidden;flex:none;}
.svc-media::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.13) 1px,transparent 1px);
  background-size:14px 14px;opacity:.5;}
.svc-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease);}
.svc-media svg{position:relative;width:44px;height:44px;fill:rgba(245,166,35,.85);transition:transform .4s var(--ease);}
.svc:hover .svc-media img{transform:scale(1.05);}
.svc:hover .svc-media svg{transform:scale(1.1);}
.svc-body{padding:26px 30px 30px;display:flex;flex-direction:column;flex:1;}
/* the cover and the heading both link to the service; the heading keeps
   the card colour and only shifts on hover */
.svc-media{text-decoration:none;}
.svc-body h3 a{color:inherit;transition:color .25s;}
.svc:hover .svc-body h3 a,.svc-body h3 a:hover{color:var(--gold-dk);}
.svc::before{content:"";position:absolute;z-index:2;left:0;top:0;height:4px;width:100%;background:linear-gradient(90deg,var(--gold),var(--navy-700));transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);}
.svc:hover{transform:translateY(-10px);box-shadow:var(--shadow);border-color:transparent;}
.svc:hover::before{transform:scaleX(1);}
.svc h3{font-size:20px;margin-bottom:10px;}
.svc p{font-size:15px;color:var(--body);margin-bottom:18px;}
.svc-tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:20px;}
.svc-body .arrow-link{margin-top:auto;}
.svc-tags span{font-size:11.5px;font-weight:600;color:var(--navy-700);background:var(--ice);border:1px solid var(--edge);padding:5px 10px;border-radius:20px;}
.arrow-link{display:inline-flex;align-items:center;gap:8px;font-family:var(--ff-display);font-weight:700;font-size:14.5px;color:var(--gold-dk);margin-top:auto;}
.arrow-link svg{width:16px;height:16px;fill:currentColor;transition:transform .3s var(--ease);}
.svc:hover .arrow-link svg,.arrow-link:hover svg{transform:translateX(6px);}
.sec-dark .arrow-link{color:var(--gold);}

/* checklist */
.checks{display:grid;gap:13px;}
.checks.two{grid-template-columns:1fr 1fr;gap:13px 24px;}
.checks li{display:flex;gap:11px;align-items:flex-start;font-size:15.5px;color:var(--ink);}
/* dark surfaces: the panel sets color:white but these rules set their own,
   so every dark context has to be listed here */
.sec-dark .checks li,.split-panel .checks li{color:#D6E0F2;}
/* item text carries inline <strong>, and the global `strong,b` rule paints that
   var(--ink) regardless of surface -- on dark it has to be the bright end of the
   scale, matching how .sec-dark .ci-row b is handled */
.sec-dark .checks li strong,.sec-dark .checks li b,
.split-panel .checks li strong,.split-panel .checks li b{color:var(--white);}
.tick{width:23px;height:23px;flex:none;border-radius:50%;background:var(--navy-800);display:grid;place-items:center;margin-top:3px;}
.sec-dark .tick,.split-panel .tick{background:var(--gold);}
.tick svg{width:12px;height:12px;fill:var(--gold);}
.sec-dark .tick svg,.split-panel .tick svg{fill:var(--navy-950);}

/* ==========================================================================
   PROCESS STEPS
   ========================================================================== */
.proc{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.step{position:relative;padding:34px 26px;border-radius:var(--r-md);background:rgba(255,255,255,.05);border:1px solid var(--hair);transition:background .35s,border-color .35s,transform .35s var(--ease);}
.step:hover{background:rgba(245,166,35,.1);border-color:var(--hair-gold);transform:translateY(-8px);}
.step-n{font-family:var(--ff-display);font-size:52px;font-weight:900;line-height:1;color:transparent;-webkit-text-stroke:1.6px rgba(245,166,35,.55);margin-bottom:16px;}
.step h3{font-size:19px;margin-bottom:9px;}
.step p{color:var(--muted);font-size:14.5px;}
.step::after{content:"";position:absolute;top:52px;right:-16px;width:14px;height:14px;border-top:2px solid rgba(245,166,35,.45);border-right:2px solid rgba(245,166,35,.45);transform:rotate(45deg);}
.step:last-child::after{display:none;}

/* ==========================================================================
   STATS
   ========================================================================== */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center;}
.stat b{display:block;font-family:var(--ff-display);font-weight:900;font-size:clamp(34px,4.4vw,52px);color:var(--gold);line-height:1;letter-spacing:-.03em;}
.stat span{display:block;margin-top:9px;font-size:14.5px;color:var(--muted);}

/* ==========================================================================
   PORTFOLIO
   ========================================================================== */
.pf-filter{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:34px;}
.pf-filter button{padding:10px 22px;border-radius:30px;border:1.5px solid var(--edge);font-family:var(--ff-display);font-weight:600;font-size:14px;color:var(--navy-850);transition:background .3s,color .3s,border-color .3s;}
.pf-filter button:hover{border-color:var(--gold);color:var(--gold-dk);}
.pf-filter button.on{background:var(--navy-800);border-color:var(--navy-800);color:var(--white);}
.pf{position:relative;display:flex;flex-direction:column;border-radius:var(--r-md);overflow:hidden;
  background:var(--white);border:1px solid var(--edge);
  transition:transform .38s var(--ease),box-shadow .38s,border-color .38s;}
.pf:hover{transform:translateY(-8px);box-shadow:var(--shadow);border-color:var(--hair-gold);}
.pf:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
.pf.hide{display:none;}

/* media panel: a photo when there is one, the old navy tile when there is not */
.pf-media{position:relative;aspect-ratio:16/10;overflow:hidden;
  background:linear-gradient(150deg,var(--navy-800),var(--navy-950));display:grid;place-items:center;}
.pf-media::before{content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.13) 1px,transparent 1px);background-size:14px 14px;opacity:.5;}
.pf-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .55s var(--ease);}
.pf:hover .pf-media img{transform:scale(1.05);}
.pf-media > svg{position:relative;width:44px;height:44px;fill:rgba(245,166,35,.75);}

.pf-tag{position:absolute;top:14px;left:14px;z-index:2;background:var(--gold);color:var(--navy-950);
  font-family:var(--ff-display);font-size:11px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;padding:6px 12px;border-radius:30px;}

/* the headline figure straddles the image and the body, so it reads as the
   card's claim rather than another line of copy */
.pf-res{position:absolute;right:16px;bottom:-22px;z-index:2;display:flex;align-items:baseline;gap:7px;
  background:var(--navy-900);border:1px solid var(--hair-gold);border-radius:30px;
  padding:9px 16px;box-shadow:0 8px 20px rgba(4,11,30,.22);}
.pf-res b{font-family:var(--ff-display);font-size:17px;line-height:1;color:var(--gold);}
.pf-res span{font-size:11.5px;color:var(--muted);}

.pf-body{padding:24px;padding-top:34px;display:flex;flex-direction:column;flex:1;}
.pf-body em{display:none;}
.pf-body h3{font-size:19px;color:var(--ink);line-height:1.35;margin-bottom:8px;}
.pf-body p{font-size:14.5px;color:var(--body);margin-bottom:16px;}
.pf-go{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-family:var(--ff-display);
  font-weight:600;font-size:13.5px;color:var(--blue-500);}
.pf-go svg{width:15px;height:15px;transition:transform .3s var(--ease);}
.pf:hover .pf-go svg{transform:translateX(4px);}

@media (prefers-reduced-motion:reduce){
  .pf,.pf-media img,.pf-go svg{transition:none;}
  .pf:hover{transform:none;}
  .pf:hover .pf-media img,.pf:hover .pf-go svg{transform:none;}
}

/* ==========================================================================
   PACKAGES
   ========================================================================== */
.pkg{background:var(--white);border-radius:var(--r-lg);border:1px solid var(--edge);padding:36px 30px 34px;display:flex;flex-direction:column;position:relative;transition:transform .4s var(--ease),box-shadow .4s,border-color .4s;}
.pkg:hover{transform:translateY(-9px);box-shadow:var(--shadow);border-color:var(--hair-gold);}
.pkg.best{background:linear-gradient(160deg,var(--navy-850),var(--navy-950));border-color:var(--gold);color:var(--white);}
.pkg.best .pkg-name{color:var(--gold);}
.pkg.best .pkg-price{color:var(--white);}
.pkg.best .pkg-feat li{color:#D3DEF0;}
.pkg.best .pkg-for{color:var(--muted);}
.pkg.best .pkg-rule{background:var(--hair);}
.pkg-badge{position:absolute;top:20px;right:20px;background:var(--gold);color:var(--navy-950);font-family:var(--ff-display);font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:6px 13px;border-radius:20px;}
.pkg-name{font-family:var(--ff-display);font-weight:700;font-size:19px;color:var(--navy-800);margin-bottom:6px;}
.pkg-for{font-size:13.5px;color:var(--body-lt);margin-bottom:20px;}
.pkg-price{font-family:var(--ff-display);font-size:42px;font-weight:900;color:var(--ink);line-height:1;letter-spacing:-.03em;}
.pkg-price small{font-size:15px;font-weight:600;color:var(--body-lt);letter-spacing:0;}
.pkg-rule{height:1px;background:var(--edge);margin:22px 0;}
.pkg-feat{display:grid;gap:11px;margin-bottom:28px;}
.pkg-feat li{display:flex;gap:10px;font-size:14.5px;color:var(--body);}
.pkg-feat svg{width:17px;height:17px;flex:none;fill:var(--gold);margin-top:4px;}
.pkg .btn{margin-top:auto;width:100%;}

/* comparison table */
.ctable-wrap{overflow-x:auto;border-radius:var(--r-md);border:1px solid var(--edge);background:var(--white);}
.ctable{width:100%;border-collapse:collapse;min-width:660px;}
.ctable th,.ctable td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--edge);font-size:14.5px;}
.ctable thead th{background:var(--navy-900);color:var(--white);font-family:var(--ff-display);font-weight:700;font-size:14px;letter-spacing:.02em;}
.ctable thead th:first-child{border-radius:var(--r-md) 0 0 0;}
.ctable thead th:last-child{border-radius:0 var(--r-md) 0 0;}
.ctable tbody th{font-weight:600;color:var(--ink);font-family:var(--ff-body);}
.ctable td{color:var(--body);}
/* the recommendation cell links to its service page when one is set;
   the global a{color:inherit} would otherwise leave it looking like text */
.ctable td a{color:var(--gold-dk);font-weight:600;text-decoration:underline;text-decoration-color:rgba(201,127,10,.35);text-underline-offset:3px;transition:color .25s,text-decoration-color .25s;}
.ctable td a:hover{color:var(--gold);text-decoration-color:var(--gold);}
.ctable tbody tr:nth-child(even){background:var(--ice);}
.ctable tbody tr:last-child th,.ctable tbody tr:last-child td{border-bottom:0;}
.ctable .yes svg{width:17px;height:17px;fill:var(--green);}
.ctable .no{color:var(--body-lt);}

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.tst{background:var(--white);border-radius:var(--r-md);padding:32px 28px;border:1px solid var(--edge);transition:transform .38s var(--ease),box-shadow .38s;}
.tst:hover{transform:translateY(-8px);box-shadow:var(--shadow);}
.tst-q{font-family:var(--ff-display);font-size:56px;font-weight:900;color:rgba(245,166,35,.28);line-height:.6;margin-bottom:12px;}
.tst p{color:var(--body);font-size:15px;margin-bottom:22px;}
.tst-by{display:flex;align-items:center;gap:13px;}
.tst-av{width:46px;height:46px;border-radius:50%;flex:none;background:linear-gradient(145deg,var(--navy-800),var(--navy-700));color:var(--gold);display:grid;place-items:center;font-family:var(--ff-display);font-weight:800;font-size:16px;}
.tst-by b{display:block;font-family:var(--ff-display);font-size:15.5px;color:var(--ink);}
.tst-by span{font-size:13px;color:var(--body-lt);}
.stars{display:flex;gap:3px;margin-bottom:14px;}
.stars svg{width:15px;height:15px;fill:var(--gold);}

/* ==========================================================================
   BLOG
   ========================================================================== */
.post{border-radius:var(--r-md);overflow:hidden;background:var(--white);border:1px solid var(--edge);transition:transform .38s var(--ease),box-shadow .38s;display:flex;flex-direction:column;}
.post:hover{transform:translateY(-8px);box-shadow:var(--shadow);}
.post-img{aspect-ratio:16/9;position:relative;background:linear-gradient(150deg,var(--navy-800),var(--navy-950));display:grid;place-items:center;}
.post-img::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.13) 1px,transparent 1px);background-size:14px 14px;opacity:.5;}
.post-img svg{width:46px;height:46px;fill:rgba(245,166,35,.75);position:relative;}
/* cover image fills the card; it paints over the dot texture, and the
   category chip keeps its own z-index above both */
.post-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.post:hover .post-img img{transform:scale(1.04);}
.post-img img{transition:transform .5s var(--ease);}
.post-cat{position:absolute;top:14px;left:14px;z-index:2;background:var(--gold);color:var(--navy-950);font-family:var(--ff-display);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:5px 11px;border-radius:20px;}
.post-body{padding:24px;display:flex;flex-direction:column;flex:1;}
.post-meta{font-size:12.5px;color:var(--body-lt);letter-spacing:.03em;margin-bottom:9px;}
.post-body h2,.post-body h3{font-size:18.5px;margin-bottom:10px;line-height:1.35;}
.post-body p{font-size:14.5px;color:var(--body);margin-bottom:16px;}
/* the card stays white inside a dark section, so it has to keep its own dark
   text: .sec-dark h3 would otherwise paint the title white on white */
.sec-dark .post-body h2,.sec-dark .post-body h3{color:var(--ink);}
.sec-dark .post .arrow-link{color:var(--gold-dk);}

/* article */
.article{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(30px,4vw,58px);align-items:start;}
/* featured cover above the article body; height:auto keeps the width/height
   attributes as an aspect-ratio hint rather than a fixed pixel height */
.art-cover{margin:0 0 clamp(28px,3.4vw,40px);border-radius:var(--r-md);overflow:hidden;
  border:1px solid var(--edge);box-shadow:0 18px 44px rgba(8,22,52,.10);}
.art-cover img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;}
/* service cover sits directly above the Quick Answer, so the two sections
   share one block of vertical rhythm rather than stacking their padding */
.svc-cover-sec{padding-bottom:0;}
.svc-cover-sec+.sec{padding-top:clamp(26px,3vw,38px);}
.prose{max-width:none;font-size:17px;line-height:1.82;color:#41506C;}
.prose > *+*{margin-top:20px;}
.prose h2{font-size:clamp(25px,3vw,33px);margin-top:46px;padding-top:6px;}
.prose h3{font-size:clamp(19px,2.2vw,23px);margin-top:34px;}
.prose h2+*,.prose h3+*{margin-top:14px;}
.prose ul,.prose ol{display:grid;gap:11px;padding-left:2px;}
.prose ul li{position:relative;padding-left:28px;}
.prose ul li::before{content:"";position:absolute;left:4px;top:11px;width:8px;height:8px;border-radius:2px;background:var(--gold);transform:rotate(45deg);}
.prose ol{counter-reset:n;}
.prose ol li{position:relative;padding-left:36px;counter-increment:n;}
.prose ol li::before{content:counter(n);position:absolute;left:0;top:2px;width:24px;height:24px;border-radius:6px;background:var(--navy-800);color:var(--gold);font-family:var(--ff-display);font-size:12.5px;font-weight:800;display:grid;place-items:center;}
.prose a{color:var(--gold-dk);font-weight:600;border-bottom:1.5px solid rgba(245,166,35,.4);transition:border-color .25s;}
.prose a:hover{border-color:var(--gold);}
.prose blockquote{margin-left:0;padding:22px 26px;border-left:4px solid var(--gold);background:var(--ice);border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:17.5px;color:var(--ink);font-style:italic;}
.prose table{width:100%;border-collapse:collapse;font-size:15px;}
.prose th,.prose td{padding:12px 14px;border:1px solid var(--edge);text-align:left;}
.prose th{background:var(--ice);font-family:var(--ff-display);font-size:14px;color:var(--ink);}
.callout{padding:24px 26px;border-radius:var(--r-md);background:linear-gradient(150deg,var(--navy-850),var(--navy-950));color:#D3DEF0;border:1px solid var(--hair-gold);}
.callout b{color:var(--gold);display:block;font-family:var(--ff-display);font-size:16.5px;margin-bottom:7px;}

.aside{position:sticky;top:130px;display:grid;gap:22px;}
.aside-box{background:var(--white);border:1px solid var(--edge);border-radius:var(--r-md);padding:24px;}
.aside-box h3{font-size:16.5px;margin-bottom:14px;padding-bottom:12px;border-bottom:2px solid var(--gold);}
.toc li a{display:block;padding:8px 0;font-size:14.5px;color:var(--body);border-bottom:1px solid var(--edge);transition:color .25s,padding-left .25s;}
.toc li:last-child a{border-bottom:0;}
.toc li a:hover{color:var(--gold-dk);padding-left:6px;}
.aside-cta{background:linear-gradient(160deg,var(--navy-850),var(--navy-950));border-color:var(--hair-gold);color:var(--white);text-align:center;}
.aside-cta h3{color:var(--white);border-color:var(--gold);}
.aside-cta p{color:var(--muted);font-size:14.5px;margin-bottom:18px;}

/* ==========================================================================
   FAQ / ACCORDION
   ========================================================================== */
.faq{display:grid;gap:14px;}
.qa{border:1px solid var(--edge);border-radius:var(--r-md);background:var(--white);overflow:hidden;transition:border-color .3s,box-shadow .3s;}
.qa[open]{border-color:var(--hair-gold);box-shadow:0 14px 32px rgba(8,22,52,.07);}
.qa summary{list-style:none;cursor:pointer;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:18px;font-family:var(--ff-display);font-weight:600;font-size:16.5px;color:var(--ink);}
.qa summary::-webkit-details-marker{display:none;}
.qa summary .pm{width:28px;height:28px;flex:none;border-radius:50%;background:var(--navy-800);display:grid;place-items:center;transition:transform .35s var(--ease),background .3s;}
.qa summary .pm svg{width:13px;height:13px;fill:var(--gold);}
.qa[open] summary .pm{transform:rotate(135deg);background:var(--gold);}
.qa[open] summary .pm svg{fill:var(--navy-950);}
.qa-body{padding:0 24px 22px;color:var(--body);font-size:15.5px;}
.qa-body p+p{margin-top:12px;}

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.cta-band{position:relative;overflow:hidden;background:linear-gradient(120deg,var(--navy-850),var(--navy-950));
  border-radius:var(--r-lg);padding:clamp(36px,4.6vw,58px);display:grid;grid-template-columns:1.25fr .75fr;
  gap:clamp(28px,3.4vw,48px);align-items:center;border:1px solid var(--hair-gold);
  box-shadow:0 26px 60px rgba(4,11,30,.28);}
/* gold bloom behind the actions, echoing the hero and footer treatment */
.cta-band::after{content:"";position:absolute;z-index:1;width:520px;height:520px;border-radius:50%;
  right:-190px;top:-230px;background:var(--gold);opacity:.16;filter:blur(110px);pointer-events:none;}
/* gold hairline down the left edge, tying the band to the section rules used elsewhere */
.cta-band::before{content:"";position:absolute;z-index:2;left:0;top:18%;bottom:18%;width:4px;
  background:linear-gradient(180deg,var(--gold),rgba(245,166,35,0));border-radius:0 4px 4px 0;}
/* the veil is decoration, not a column: .cta-band>* below would otherwise
   override its absolute positioning and make it the first grid item */
.cta-band .grid-veil{position:absolute;inset:0;z-index:1;opacity:.42;}
.cta-band>*{position:relative;z-index:2;}
.cta-band h2{font-size:clamp(26px,3.4vw,39px);color:var(--white);margin-bottom:14px;line-height:1.14;}
.cta-band h2 .gold{color:var(--gold);}
.cta-band p{color:var(--muted);font-size:16.5px;line-height:1.7;max-width:58ch;}
.cta-actions{display:flex;flex-direction:column;gap:12px;}
.cta-actions .btn{width:100%;}

/* ==========================================================================
   CONTACT / FORMS
   ========================================================================== */
.ci{display:grid;gap:18px;margin-top:28px;}
.ci-row{display:flex;gap:16px;align-items:flex-start;}
.ci-ic{width:52px;height:52px;flex:none;border-radius:50%;border:1.5px solid var(--gold);display:grid;place-items:center;transition:background .3s,transform .3s var(--ease);}
.ci-ic svg{width:22px;height:22px;fill:var(--gold);transition:fill .3s;}
.ci-row:hover .ci-ic{background:var(--gold);transform:translateY(-3px);}
.ci-row:hover .ci-ic svg{fill:var(--navy-950);}
.ci-row b{display:block;font-family:var(--ff-display);font-size:15.5px;color:var(--ink);}
.ci-row a,.ci-row span{color:var(--body);font-size:15px;}
.ci-row a:hover{color:var(--gold-dk);}
.sec-dark .ci-row b{color:var(--white);}
.sec-dark .ci-row a,.sec-dark .ci-row span{color:var(--muted);}

.form{background:var(--white);border:1px solid var(--edge);border-radius:var(--r-lg);padding:clamp(26px,3.2vw,38px);box-shadow:0 18px 46px rgba(8,22,52,.07);}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.fld{display:flex;flex-direction:column;gap:7px;}
.fld.full{grid-column:1/-1;}
.fld label{font-family:var(--ff-display);font-size:13.5px;font-weight:600;color:var(--navy-850);}
.fld input,.fld select,.fld textarea{font-family:var(--ff-body);font-size:15px;color:var(--ink);padding:13px 15px;border:1.5px solid #DDE5F2;border-radius:var(--r-xs);background:var(--white);transition:border-color .25s,box-shadow .25s;width:100%;}
.fld textarea{resize:vertical;min-height:118px;}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px rgba(245,166,35,.16);}
.fld .err{font-size:12.5px;color:#D64545;display:none;}
.fld.invalid input,.fld.invalid select,.fld.invalid textarea{border-color:#D64545;}
.fld.invalid .err{display:block;}
.form .btn{margin-top:20px;width:100%;}
.form-note{margin-top:13px;font-size:13px;color:var(--body-lt);text-align:center;}
.form-ok{display:none;margin-top:16px;padding:14px 16px;border-radius:var(--r-xs);background:rgba(46,204,113,.1);border:1px solid rgba(46,204,113,.4);color:#1E8449;font-size:14.5px;font-weight:600;}
.form-ok.show{display:block;}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0;}

.map-frame{border-radius:var(--r-md);overflow:hidden;border:1px solid var(--edge);line-height:0;box-shadow:var(--shadow-sm);}
.map-frame iframe{width:100%;height:380px;border:0;}

/* ==========================================================================
   AREA / LOCATION PAGES
   ========================================================================== */
.area-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.area-chip{display:flex;align-items:center;gap:11px;padding:15px 18px;border-radius:var(--r-sm);background:var(--white);border:1px solid var(--edge);font-size:15px;font-weight:500;color:var(--ink);transition:border-color .28s,transform .28s var(--ease),box-shadow .28s;}
.area-chip svg{width:17px;height:17px;fill:var(--gold);flex:none;}
.area-chip:hover{border-color:var(--gold);transform:translateY(-4px);box-shadow:var(--shadow-sm);}
.sec-dark .area-chip{background:rgba(255,255,255,.05);border-color:var(--hair);color:#D6E0F2;}
.sec-dark .area-chip:hover{border-color:var(--gold);background:rgba(245,166,35,.08);}

/* split feature */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4.6vw,64px);align-items:center;}
.split-panel{position:relative;border-radius:var(--r-lg);overflow:hidden;background:linear-gradient(150deg,var(--navy-800),var(--navy-950));padding:clamp(28px,3.4vw,44px);border:1px solid var(--hair-gold);color:var(--white);}
.split-panel .grid-veil{opacity:.45;}
.split-panel>*{position:relative;z-index:2;}
.kpi{display:grid;gap:16px;}
.kpi-row{display:flex;align-items:center;gap:14px;}
.kpi-row b{font-family:var(--ff-display);font-size:29px;color:var(--gold);min-width:100px;font-weight:900;line-height:1;}
.kpi-row span{font-size:14.5px;color:#C6D2E8;}
.float-stat{position:absolute;right:-14px;bottom:-20px;z-index:3;background:var(--gold);color:var(--navy-950);border-radius:var(--r-md);padding:20px 26px;text-align:center;box-shadow:var(--shadow-gold);}
.float-stat b{display:block;font-family:var(--ff-display);font-size:36px;font-weight:900;line-height:1;color:var(--navy-950);}
.float-stat span{font-size:12.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;}

/* logo marquee */
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);}
.marquee-track{display:flex;gap:56px;width:max-content;animation:slide 34s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
@keyframes slide{to{transform:translateX(-50%);}}
.marquee-track span{font-family:var(--ff-display);font-weight:700;font-size:19px;color:var(--muted-2);letter-spacing:.02em;white-space:nowrap;transition:color .3s;}
.marquee-track span:hover{color:var(--gold);}

/* answer block — AEO */
.answer{background:linear-gradient(150deg,rgba(245,166,35,.09),rgba(245,166,35,.03));border:1px solid var(--hair-gold);border-left:4px solid var(--gold);border-radius:0 var(--r-md) var(--r-md) 0;padding:24px 28px;}
.answer b{display:block;font-family:var(--ff-display);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-dk);margin-bottom:9px;}
.answer p{font-size:17px;color:var(--ink);line-height:1.7;}
.sec-dark .answer{background:rgba(245,166,35,.08);}
.sec-dark .answer p{color:#E4EBF7;}
.sec-dark .answer b{color:var(--gold);}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{position:relative;overflow:hidden;background:linear-gradient(168deg,var(--navy-900) 0%,var(--navy-950) 100%);color:var(--white);padding-top:clamp(54px,6vw,80px);}
.footer .grid-veil{-webkit-mask-image:radial-gradient(ellipse 60% 55% at 82% 22%,#000,transparent 72%);mask-image:radial-gradient(ellipse 60% 55% at 82% 22%,#000,transparent 72%);opacity:.55;}
.footer .wrap{position:relative;z-index:2;}
.f-top{display:grid;grid-template-columns:1.2fr 1fr .95fr .95fr;gap:clamp(28px,3vw,44px);padding-bottom:44px;}
.f-brand .brand-name{color:var(--white);}
.f-brand .brand-name .g{color:var(--gold);}
.f-brand .brand-tag{color:#C3CFE6;}
.f-about{color:#C0CDE4;font-size:15px;margin:20px 0 26px;max-width:420px;}
.f-cta{border:1px solid var(--hair-gold);border-radius:var(--r-md);padding:20px 22px;display:flex;gap:15px;align-items:center;background:rgba(255,255,255,.035);max-width:440px;transition:border-color .3s,background .3s;}
.f-cta:hover{border-color:var(--gold);background:rgba(245,166,35,.07);}
.f-cta-ic{width:46px;height:46px;flex:none;border-radius:50%;border:1.5px solid var(--gold);display:grid;place-items:center;}
.f-cta-ic svg{width:21px;height:21px;fill:var(--gold);}
.f-cta b{display:block;font-family:var(--ff-display);font-size:17px;color:var(--white);}
/* scoped to the text column: a bare `.f-cta span` also matched .f-cta-ic and,
   being more specific, overrode its display:grid -- which killed the icon's
   place-items centring and added stray margins to the circle */
.f-cta>div>span{display:block;font-size:14px;color:var(--muted);margin:3px 0 9px;}
.f-cta a{display:inline-flex;align-items:center;gap:8px;font-family:var(--ff-display);font-weight:700;font-size:14.5px;color:var(--gold);}
.f-cta a svg{width:15px;height:15px;fill:currentColor;transition:transform .3s var(--ease);}
.f-cta a:hover svg{transform:translateX(5px);}

.f-mid,.f-services{position:relative;padding-left:clamp(0px,2vw,32px);}
.f-mid::before,.f-services::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;background:linear-gradient(180deg,transparent,rgba(245,166,35,.5),transparent);}
.f-h{font-family:var(--ff-display);font-weight:800;font-size:21px;color:var(--white);margin-bottom:8px;}
.f-h .gold{color:var(--gold);}
.f-h::after{content:"";display:block;width:52px;height:3px;background:var(--gold);border-radius:2px;margin-top:10px;}
.f-links{display:grid;grid-template-columns:1fr;margin-top:22px;}
.f-links a{display:flex;align-items:center;gap:10px;padding:11px 0;font-size:14.5px;color:#CBD7EC;border-bottom:1px solid rgba(255,255,255,.09);transition:color .26s,padding-left .26s;}
.f-links a svg{width:11px;height:11px;fill:var(--gold);flex:none;}
.f-links a:hover{color:var(--gold);padding-left:7px;}

.f-contact{display:grid;gap:18px;margin-top:24px;}
.f-crow{display:flex;gap:15px;align-items:center;}
.f-cic{width:52px;height:52px;flex:none;border-radius:50%;border:1.5px solid var(--gold);display:grid;place-items:center;transition:background .3s,transform .3s var(--ease);}
.f-cic svg{width:22px;height:22px;fill:var(--gold);transition:fill .3s;}
.f-crow:hover .f-cic{background:var(--gold);transform:translateY(-3px);}
.f-crow:hover .f-cic svg{fill:var(--navy-950);}
.f-crow b{display:block;font-family:var(--ff-display);font-size:15.5px;color:var(--white);}
.f-crow a,.f-crow span{font-size:14.5px;color:#C0CDE4;}
.f-crow a:hover{color:var(--gold);}

.wave{display:block;width:100%;height:auto;margin-top:8px;}
.f-feat{display:grid;grid-template-columns:repeat(4,1fr);padding:38px 0 34px;}
.f-feat .fs{padding:0 26px;}
.f-feat .fs+.fs::before{top:12%;height:76%;}

.f-areas{border-top:1px solid var(--hair);padding:24px 0;display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;}
.f-areas b{font-family:var(--ff-display);font-size:13.5px;color:var(--gold);margin-right:6px;}
.f-areas a{font-size:13px;color:#A9B8D4;padding:4px 11px;border:1px solid var(--hair);border-radius:20px;transition:border-color .25s,color .25s;}
.f-areas a:hover{border-color:var(--gold);color:var(--gold);}

.f-bar{border-top:1px solid var(--hair);padding:22px 0;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.f-bar p{font-size:14px;color:#B3C1DA;}
.f-bar p b{color:var(--gold);font-weight:600;}
.f-bar nav{display:flex;gap:18px;font-size:13.5px;}
.f-bar nav a{color:#A9B8D4;transition:color .25s;}
.f-bar nav a:hover{color:var(--gold);}
.f-tag{font-family:var(--ff-display);font-size:16px;color:var(--white);font-weight:500;text-align:center;line-height:1.6;text-wrap:balance;}
.f-tag .gold{color:var(--gold);font-weight:700;}
.f-tag::before,.f-tag::after{content:"";display:inline-block;vertical-align:middle;width:52px;height:1px;margin:0 16px;background:linear-gradient(90deg,transparent,var(--gold));}
.f-tag::after{background:linear-gradient(90deg,var(--gold),transparent);}
.f-soc{display:flex;gap:11px;}
.f-soc a{width:38px;height:38px;border-radius:50%;border:1.5px solid rgba(255,255,255,.28);display:grid;place-items:center;color:var(--white);transition:background .3s,border-color .3s,color .3s,transform .3s var(--ease);}
.f-soc a svg{width:16px;height:16px;fill:currentColor;}
.f-soc a:hover{background:var(--gold);border-color:var(--gold);color:var(--navy-950);transform:translateY(-4px);}

/* ==========================================================================
   FLOATING
   ========================================================================== */
.float{position:fixed;right:20px;bottom:20px;z-index:800;display:grid;gap:11px;}
.fbtn{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;box-shadow:0 12px 28px rgba(4,11,30,.34);transition:transform .3s var(--ease);}
.fbtn:hover{transform:translateY(-4px) scale(1.05);}
.fbtn svg{width:26px;height:26px;fill:var(--white);}
.fw{background:#25D366;}
.ft{background:var(--navy-800);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s,transform .3s var(--ease);}
.ft svg{width:20px;height:20px;fill:var(--gold);}
.ft.show{opacity:1;visibility:visible;}

/* 404 */
.e404{font-family:var(--ff-display);font-size:clamp(90px,18vw,190px);font-weight:900;line-height:.9;color:transparent;-webkit-text-stroke:2px var(--gold);letter-spacing:-.04em;}

/* ==========================================================================
   REVEAL
   ========================================================================== */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.rv.in{opacity:1;transform:none;}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1180px){
  .nav>li>a{padding:14px 10px;font-size:14px;}
  .brand-name{font-size:24px;}
  .brand-mark{width:54px;height:48px;}
  .btn-audit{padding:12px 16px;font-size:12px;}
  .article{grid-template-columns:1fr;}
  .aside{position:static;grid-template-columns:1fr 1fr;}
}
@media (max-width:1024px){
  .header .wrap{min-height:78px;}
  .burger{display:grid;}
  .nav{position:fixed;top:0;right:0;bottom:0;width:min(370px,88vw);background:var(--navy-900);flex-direction:column;align-items:stretch;gap:0;padding:86px 20px 34px;overflow-y:auto;transform:translateX(105%);transition:transform .4s var(--ease);box-shadow:-16px 0 44px rgba(0,0,0,.35);z-index:950;}
  body.menu-open .nav{transform:none;}
  /* the header is a stacking context (sticky + z-index), so .nav's z-index is
     clamped inside it; lift the header over the backdrop while the menu is open
     or the blurred veil paints on top of the panel and the burger */
  body.menu-open .header{z-index:960;}
  body.menu-open .backdrop{opacity:1;visibility:visible;}
  body.menu-open{overflow:hidden;}
  .nav>li>a{color:var(--white);padding:15px 8px;border-bottom:1px solid rgba(255,255,255,.09);justify-content:space-between;font-size:15.5px;}
  .nav>li>a::after{display:none;}
  .nav>li:hover>a{color:var(--gold);}
  .drop{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;background:transparent;border:0;border-left:2px solid var(--hair-gold);border-radius:0;margin:6px 0 6px 10px;padding:0 0 0 10px;max-height:0;overflow:hidden;transition:max-height .4s var(--ease);}
  .nav>li:hover .drop{max-height:0;}
  .nav>li.open .drop,.nav>li.open:hover .drop{max-height:620px;}
  .drop a{color:#C6D2E8;padding:9px 6px;}
  .drop a:hover{background:transparent;color:var(--gold);padding-left:12px;}
  .drop a strong{color:var(--white);}
  .drop a:hover strong{color:var(--gold);}
  .drop-sep{background:var(--hair);}
  .nav>li.open>a .caret{transform:rotate(180deg);}
  .btn-audit{display:none;}
  .nav .btn-audit{display:inline-flex;margin-top:22px;justify-content:center;background:var(--gold);border-color:var(--gold);color:var(--navy-950);}
  .nav .btn-audit svg{fill:var(--navy-950);}

  .hero-inner{grid-template-columns:1fr;gap:20px;}
  .hero-visual{min-height:400px;order:-1;}
  .hero-photo,.hero-photo-fb{width:min(320px,74%);}
  .hero-visual.has-art .hero-photo{width:min(380px,88%);}
  .fstrip-box{grid-template-columns:1fr 1fr;}
  .fs:nth-child(3)::before{display:none;}
  .g3,.g4,.proc,.area-grid,.split,.cta-band{grid-template-columns:1fr 1fr;}
  .step::after{display:none;}
  .f-top{grid-template-columns:1fr;}
  .f-mid{padding-left:0;}
  .f-mid::before{display:none;}
  .f-feat{grid-template-columns:1fr 1fr;gap:26px 0;}
  .f-feat .fs:nth-child(3)::before{display:none;}
  /* Badge stops floating once the panel narrows, so it can no longer sit on top
     of the last KPI rows. It flows under the panel, overlapping the edge just
     enough to keep the "attached" look of the desktop treatment. */
  .float-stat{position:relative;right:auto;bottom:auto;display:flex;align-items:center;justify-content:center;gap:14px;width:max-content;max-width:100%;margin:-18px auto 0;padding:16px 26px;}
  .float-stat b{font-size:32px;}
}
@media (max-width:760px){
  .topbar .wrap{justify-content:center;min-height:auto;padding-block:9px;gap:6px;}
  .tb-left{justify-content:center;}
  .tb-item{padding:4px 12px;font-size:12.5px;}
  .tb-item+.tb-item::before{display:none;}
  .tb-right .lbl{display:none;}
  .hero h1{font-size:clamp(36px,10vw,52px);}
  .hero-cta .btn{flex:1 1 100%;}
  .phero-cta .btn{flex:1 1 100%;}
  .fstrip-box{grid-template-columns:1fr;}
  .fs+.fs::before{display:none;}
  .fs+.fs{border-top:1px solid var(--hair);}
  .g2,.g3,.g4,.proc,.stats,.area-grid,.split,.cta-band,.form-grid,.f-links,.checks.two,.aside{grid-template-columns:1fr;}
  .f-feat{grid-template-columns:1fr;gap:24px 0;}
  .f-feat .fs+.fs{border-top:1px solid var(--hair);padding-top:22px;}
  .f-bar{justify-content:center;text-align:center;flex-direction:column;}
  .f-tag{font-size:15px;}
  .f-tag::before,.f-tag::after{width:28px;margin:0 10px;}
  .stats{gap:32px;}
  .prose{font-size:16.5px;}
  /* Long KPI labels get more room once the panel is full width. */
  .kpi-row b{min-width:78px;font-size:26px;}
  .kpi-row span{font-size:14px;}
  .kpi-row{align-items:flex-start;gap:12px;}
  .float-stat b{font-size:29px;}
  .float-stat span{font-size:12px;}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
  html{scroll-behavior:auto;}
  .rv{opacity:1;transform:none;}
}
@media print{
  .topbar,.header,.footer,.float,.cta-band,.aside{display:none!important;}
  body{color:#000;}
}

/* server-side validation summary (Laravel) */
.form-err{margin-top:16px;padding:14px 16px;border-radius:var(--r-xs);background:rgba(214,69,69,.1);border:1px solid rgba(214,69,69,.4);color:#B03030;font-size:14.5px;font-weight:600;}
.form-err ul{margin:6px 0 0;padding-left:18px;font-weight:500;}

/* ---------- portfolio gallery slider ---------- */
/* layout, sliding and a11y come from Swiper; this is only the site's skin on
   top of it */
.pgal{position:relative}
.pgal-slide{border-radius:14px;overflow:hidden;background:#0d1b2e;
  border:1px solid rgba(255,255,255,.08);height:auto}
.pgal-slide img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.pgal-slide figcaption{padding:12px 16px;font-size:.92rem;color:#5b6b80}
.pgal-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;
  border:0;cursor:pointer;background:rgba(10,25,47,.72);color:#fff;display:grid;place-items:center;
  transition:background .2s,opacity .2s;z-index:2}
.pgal-nav:hover{background:#1E6FD9}
/* Swiper adds this when there is nowhere to go; hide rather than grey out, so
   nothing sits on top of the photo */
.pgal-nav.pgal-nav-off{opacity:0;pointer-events:none}
.pgal-nav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2}
.pgal-prev{left:10px}
.pgal-prev svg{transform:rotate(180deg)}
.pgal-next{right:10px}
.pgal .swiper{padding-bottom:34px}
.pgal .swiper-pagination-bullet{width:9px;height:9px;background:#c7d2de;opacity:1;
  transition:background .2s,width .2s}
.pgal .swiper-pagination-bullet-active{background:#F5A623;width:24px;border-radius:5px}

/* ---------- Custom select -------------------------------------------------
   The native <option> list is drawn by the operating system and cannot be
   styled, so the select is replaced by a listbox built from its own options.
   The real <select> stays in the DOM and keeps submitting: without JS the
   .sel-ready class is never added and the native control shows as before. */
.sel{position:relative;}
.sel-ready>select{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.sel-btn{font-family:var(--ff-body);font-size:15px;line-height:1.35;color:var(--ink);text-align:left;width:100%;padding:13px 42px 13px 15px;border:1.5px solid #DDE5F2;border-radius:var(--r-xs);background:var(--white);cursor:pointer;position:relative;transition:border-color .25s,box-shadow .25s;}
.sel-btn:hover{border-color:#C9D6EA;}
.sel-btn:focus-visible,.sel.open .sel-btn{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px rgba(245,166,35,.16);}
.sel-btn::after{content:"";position:absolute;right:16px;top:50%;width:8px;height:8px;border-right:2px solid var(--navy-600);border-bottom:2px solid var(--navy-600);transform:translateY(-70%) rotate(45deg);transition:transform .22s ease,border-color .22s;}
.sel.open .sel-btn::after{transform:translateY(-25%) rotate(-135deg);border-color:var(--gold-dk);}
.sel-menu{position:absolute;z-index:950;top:calc(100% + 8px);left:0;right:0;margin:0;padding:6px;list-style:none;background:var(--white);border:1px solid #E4EBF6;border-radius:var(--r-sm);box-shadow:var(--shadow);max-height:290px;overflow-y:auto;overscroll-behavior:contain;opacity:0;transform:translateY(-6px) scale(.985);transform-origin:top center;pointer-events:none;transition:opacity .18s ease,transform .18s ease;}
.sel.drop-up .sel-menu{top:auto;bottom:calc(100% + 8px);transform-origin:bottom center;transform:translateY(6px) scale(.985);}
.sel.open .sel-menu{opacity:1;transform:none;pointer-events:auto;}
.sel-opt{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:var(--r-xs);font-size:14.5px;line-height:1.4;color:var(--ink);cursor:pointer;transition:background .15s ease,color .15s ease;}
.sel-opt+.sel-opt{margin-top:2px;}
.sel-tick{flex:none;width:16px;height:16px;opacity:0;color:var(--gold);display:block;transition:opacity .15s ease;}
.sel-opt[aria-selected="true"]{color:var(--navy-850);font-weight:600;}
.sel-opt[aria-selected="true"] .sel-tick{opacity:1;}
.sel-opt.active,.sel-opt:hover{background:rgba(245,166,35,.13);}
.sel-menu::-webkit-scrollbar{width:10px;}
.sel-menu::-webkit-scrollbar-thumb{background:#D8E2F0;border-radius:99px;border:3px solid var(--white);}
.sel-menu::-webkit-scrollbar-thumb:hover{background:#C2D0E5;}
.fld.invalid .sel-btn{border-color:#D64545;}
@media (max-width:640px){.sel-menu{max-height:250px;}.sel-opt{padding:13px;font-size:15px;}}
@media (prefers-reduced-motion:reduce){.sel-menu,.sel-btn,.sel-btn::after,.sel-opt{transition:none;}}

/* ---------- Package enquiry modal ---------------------------------------- */
.pkg-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px;}
.pkg-modal[hidden]{display:none;}
.pkg-modal-veil{position:absolute;inset:0;background:rgba(4,11,30,.62);backdrop-filter:blur(3px);animation:pkgFade .2s ease;}
.pkg-modal-panel{position:relative;width:min(680px,100%);max-height:calc(100vh - 48px);overflow-y:auto;background:var(--white);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:34px 32px 30px;animation:pkgRise .24s cubic-bezier(.2,.7,.3,1);}
.pkg-modal-x{position:absolute;top:14px;right:16px;width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:var(--body-lt);font-size:26px;line-height:1;cursor:pointer;transition:background .2s,color .2s;}
.pkg-modal-x:hover{background:#F1F5FB;color:var(--ink);}
.pkg-modal-head{margin-bottom:22px;}
.pkg-modal-head h2{font-size:26px;margin:6px 0 0;}
.pkg-modal-panel .btn{margin-top:20px;width:100%;}   /* the form partial is not inside .form here, so it misses .form .btn */
.pkg-modal-price{font-family:var(--ff-display);font-weight:700;color:var(--gold-dk);margin:8px 0 0;}
body.pkg-modal-open{overflow:hidden;}
@keyframes pkgFade{from{opacity:0}to{opacity:1}}
@keyframes pkgRise{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@media (max-width:640px){.pkg-modal{padding:12px;}.pkg-modal-panel{padding:28px 20px 24px;}.pkg-modal-head h2{font-size:22px;}}
@media (prefers-reduced-motion:reduce){.pkg-modal-veil,.pkg-modal-panel{animation:none;}}

/* ---------- Client feedback slider --------------------------------------- */
.tst-slider{position:relative;}
.tst-slider .swiper{overflow:hidden;padding-bottom:46px;}
.tst-slider .swiper-slide{height:auto;display:flex;}
.tst-slider .swiper-slide .tst{width:100%;}
.tst-slider .swiper-pagination{position:absolute;bottom:8px;left:0;right:0;display:flex;justify-content:center;gap:8px;}
.tst-slider .swiper-pagination-bullet{width:8px;height:8px;border-radius:99px;background:#C7D2DE;opacity:1;transition:background .2s,width .2s;}
.tst-slider .swiper-pagination-bullet-active{background:var(--gold);width:24px;}
.tst-nav{position:absolute;top:calc(50% - 30px);transform:translateY(-50%);z-index:3;width:44px;height:44px;border-radius:50%;border:1px solid var(--edge);background:var(--white);color:var(--navy-700);display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow-sm);transition:background .2s,color .2s,border-color .2s,opacity .2s;}
.tst-nav svg{width:16px;height:16px;fill:currentColor;}
.tst-nav:hover{background:var(--gold);color:var(--navy-950);border-color:var(--gold);}
.tst-prev{left:-10px;}
.tst-prev svg{transform:rotate(180deg);}
.tst-next{right:-10px;}
.tst-nav.swiper-button-disabled{opacity:.35;cursor:default;}
.tst-nav.swiper-button-disabled:hover{background:var(--white);color:var(--navy-700);border-color:var(--edge);}
/* nothing to slide (all cards already fit): Swiper locks, so the controls go away */
.tst-nav.swiper-button-lock,.tst-slider .swiper-pagination-lock{display:none;}
@media (max-width:1180px){.tst-prev{left:2px}.tst-next{right:2px}}
@media (max-width:640px){.tst-nav{display:none}}

/* ---------- client strip: logos, with names as the fallback ---------- */
.marquee-track .brand-item{display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto;height:48px;padding:0 6px;filter:grayscale(1);opacity:.62;
  transition:filter .3s var(--ease),opacity .3s var(--ease),transform .3s var(--ease);}
.marquee-track .brand-item:hover{filter:grayscale(0);opacity:1;transform:translateY(-2px);}
.marquee-track .brand-item img{max-height:44px;width:auto;max-width:150px;object-fit:contain;display:block;}
/* a brand with no logo keeps the original wordmark treatment */
.marquee-track .brand-item span{font-family:var(--ff-display);font-weight:700;font-size:19px;
  color:var(--muted-2);letter-spacing:.02em;white-space:nowrap;}
.marquee-track a.brand-item{text-decoration:none;}
@media (prefers-reduced-motion:reduce){
  .marquee-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;gap:34px;}
  .marquee-track .brand-item{filter:none;opacity:1;}
}