/* ============================================================
   Gold Strategics brand skin over the Digimax template.
   Loaded LAST so it wins. Nothing in the template's own CSS is
   edited, which keeps the base upgradeable.
   navy #0a1020 · deep #060b16 · surface #0e1730 · gold #d6b877
   Lorin display · DM Sans body · DM Mono labels · Fraunces wordmark
   ============================================================ */
@font-face{font-family:"Lorin";src:url('/fonts/Lorin-Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Lorin";src:url('/fonts/Lorin-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Lorin";src:url('/fonts/Lorin-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Lorin";src:url('/fonts/Lorin-ExtraBold.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}

:root{
  --navy:#0a1020; --deep:#060b16; --surface:#0e1730;
  --gold:#d6b877; --gold-dim:#a68c55; --gold-bright:#e3c98d;
  --cream:#f6f2e9; --body:#a9b2c8; --faint:#77809a;
  --line:rgba(246,242,233,.14); --line-soft:rgba(246,242,233,.07);
}

/* ---------- ground ---------- */
body,.bg-grey,.bg-white,section,.section{background-color:var(--navy)}
body{font-family:"DM Sans",system-ui,sans-serif;color:var(--body);
  background:var(--navy)}
.bg-grey,.bg-inherit{background-color:var(--deep)!important}

/* ---------- type ---------- */
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3{font-family:"Lorin","DM Sans",sans-serif;
  color:var(--cream);letter-spacing:-.015em;line-height:1.1;font-weight:800}
h1{font-size:clamp(2.6rem,5vw,4.2rem)}
h2{font-size:clamp(2rem,3.6vw,3rem)}
p,li,.text-body{color:var(--body)}
.text-white,.text-white p{color:var(--cream)!important}
a{color:var(--cream)}
a:hover{color:var(--gold)}
/* the accent phrase: a weight shift, never an italic. Lorin ships none. */
h1 em,h2 em,h3 em,.accent{font-style:normal;font-weight:300;color:var(--gold)}
.section-heading h2{color:var(--cream)}
.section-heading p{color:var(--body)}
.fw-3,.fw-4,.fw-5,.fw-6,.fw-7{font-weight:inherit}

/* mono labels wherever the template used a small caps line */
.section-heading .kicker,.kicker{font-family:"DM Mono",ui-monospace,monospace;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
  display:block;margin-bottom:14px}

/* rotating business type in the hero kicker (2026-09-03). The prefix goes
   quiet so the trade is the one loud thing; the slot width is set in JS from
   the incoming word and transitions, so the centered line never jumps. */
.gs-kick{color:var(--body);font-size:15px;letter-spacing:.14em}
/* The word stays IN FLOW inside the slot, so its baseline lands on the
   prefix's baseline. An inline-block with overflow:hidden takes its baseline
   from its bottom edge instead, which is what misaligned the first version,
   so there is no clipping here: the swap is a fade plus a short slide. */
.gs-rot{display:inline-block;position:relative;text-align:center;
  min-width:4.5em;white-space:nowrap;
  transition:width .2s cubic-bezier(.22,.61,.36,1)}
.gs-rot__w{display:inline-block;color:var(--gold);font-weight:500;font-size:17px;
  transition:opacity .17s ease,transform .24s cubic-bezier(.22,.61,.36,1)}
.gs-rot__w.is-out{opacity:0;transform:translateY(-.38em)}
.gs-rot__w.is-in{opacity:0;transform:translateY(.38em)}
.gs-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){
  .gs-rot,.gs-rot__w{transition:none}
}
/* On a phone the prefix plus the longest trade does not fit on one line, so
   short words sat inline and long ones jumped to a second line, which read as
   a misaligned hero. Give the trade its own centered line at every width below
   600px, so the layout is the same whatever word is showing. */
@media (max-width:600px){
  .gs-kick{font-size:13px;letter-spacing:.12em}
  .gs-rot{display:block;margin:3px auto 0}
  .gs-kick .gs-rot__w,.gs-rot__w{font-size:16px}
}

/* ---------- hero ---------- */
.welcome-area,.bg-overlay{background:
  /* gold hero vignette REMOVED 2026-08-27 (Aaron): it put a warm glow in the
     top right of every hero. The navy radial below and the base ramp stay. */
  radial-gradient(1000px 700px at 12% 82%,rgba(46,66,118,.30),transparent 62%),
  linear-gradient(180deg,var(--deep) 0%,var(--navy) 100%)!important}
.bg-overlay::after,.bg-overlay::before{background:none!important;opacity:0!important}
.welcome-area .shape-fill{fill:var(--navy)}
.welcome-intro h1{max-width:22ch}
.welcome-intro p{max-width:52ch;color:var(--body)!important}
.welcome-intro .gs-sub{color:var(--cream)!important;font-size:1.2rem;font-weight:600;margin:48px auto 0}
@media (max-width:600px){.welcome-intro .gs-sub{margin-top:32px}}
.welcome-intro .gs-more{color:var(--gold)!important;font-weight:600;letter-spacing:.02em;margin:10px auto 0}

/* ---------- buttons: one gold pill, one hairline ghost ---------- */
.btn,.btn-bordered,.btn-bordered-white{border-radius:999px;font-family:"DM Sans",sans-serif;
  font-weight:700;letter-spacing:0;text-transform:none;box-shadow:none}
/* 2026-09-02 (Aaron): no outlines on any button. Ghost buttons keep a soft
   fill so they still read as buttons, just without the hairline.
   The template stacks a gold ::before under a white ::after behind EVERY
   .btn; on the section buttons that painted a cream pill with a gold rim
   (the "outline" Aaron flagged). Kill both everywhere; real backgrounds
   only. */
.btn::before,.btn::after{display:none!important;content:none!important}
a.btn.btn-bordered{background:rgba(246,242,233,.09)!important;
  color:var(--cream)!important;border:0!important}
a.btn.btn-bordered:hover{background:rgba(246,242,233,.16)!important;
  color:var(--cream)!important}
.btn:not(.btn-bordered-white){background:var(--gold)!important;color:var(--navy)!important;
  border:0!important}
.btn:not(.btn-bordered-white):hover{background:var(--gold-bright)!important;
  color:var(--navy)!important}
.btn-bordered-white{background:rgba(246,242,233,.08)!important;color:var(--cream)!important;
  border:0!important}
.btn-bordered-white:hover{background:rgba(246,242,233,.15)!important;
  color:var(--cream)!important}
.button-group .btn{margin-right:12px}

/* ---------- nav ---------- */
.navbar{background:transparent}
.navbar.sticky,.navbar-sticky--moved-up,.navbar-sticky--transitioned{
  background:rgba(6,11,22,.82)!important;backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line-soft);
  box-shadow:none!important}
.navbar-brand{font-family:"Fraunces",Georgia,serif;font-weight:700;font-size:20px;
  color:var(--cream);letter-spacing:-.01em;text-decoration:none}
.navbar-brand i{font-style:italic;color:var(--gold)}
.navbar-brand img{display:none}
.navbar-nav .nav-link{font-family:"DM Mono",ui-monospace,monospace;font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--body)}
.navbar-nav .nav-link:hover,.navbar-nav .active > .nav-link{color:var(--cream)}
.navbar .navbar-toggler,.navbar .navbar-toggler span{color:var(--cream)}

/* ---------- cards, boxes, anything the template painted white ---------- */
.card,.single-price,.price-card,.service-card,.promo-card,.single-review,
.contact-box,.icon-box,.single-blog,.pricing-card,.review-card{
  background:var(--surface)!important;border:1px solid var(--line-soft)!important;
  border-radius:18px;box-shadow:none!important;color:var(--body)}
.card h3,.card h4,.card h5,.single-price h3,.single-price h4{color:var(--cream)}
.card:hover,.single-price:hover{border-color:rgba(214,184,119,.45)!important;
  transform:translateY(-4px);transition:transform .25s cubic-bezier(.22,.61,.36,1),border-color .25s}

/* icons the template tinted purple */
.icon,.service-icon,.card i,.fa,.fas,.far{color:var(--gold)}
.price,.price-card .price,.single-price .price{font-family:"Lorin",sans-serif;
  font-weight:800;color:var(--gold)}

/* ---------- rules, dividers, misc purple ---------- */
hr,.divider{border-color:var(--line-soft)}
.bg-primary,.badge-primary,.text-primary{background-color:var(--gold)!important;
  color:var(--navy)!important}
.text-primary{background:none!important;color:var(--gold)!important}

/* ---------- footer ---------- */
.footer-area{background:var(--deep)!important;border-top:1px solid var(--line)}
.footer-area h3,.footer-area h4{color:var(--cream)}
.footer-area a,.footer-area p,.footer-area li{color:var(--body)}
.footer-area a:hover{color:var(--gold)}
.copyright-area{border-top:1px solid var(--line-soft);color:var(--faint)}

/* ---------- kill the template's decorative shapes we do not want ---------- */
.shape-bottom svg{display:block}
#scrollUp{background:var(--gold);color:var(--navy);border-radius:999px}

/* ---------- focus, a11y ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--gold);outline-offset:3px}

/* ---------- form ---------- */
.contact-form input,.contact-form textarea,input.form-control,textarea.form-control{
  background:transparent;border:0;border-bottom:1px solid rgba(246,242,233,.3);
  border-radius:0;color:var(--cream);min-height:48px;font-family:"DM Sans",sans-serif}
input.form-control:focus,textarea.form-control:focus{background:transparent;
  color:var(--cream);border-bottom-color:var(--gold);box-shadow:none}
::placeholder{color:#5f6a83}
.chip{display:inline-flex;align-items:center;min-height:44px;padding:10px 16px;
  border-radius:999px;border:1px solid rgba(246,242,233,.2);color:var(--body);
  margin:0 8px 8px 0;cursor:pointer}
.chip input{position:absolute;opacity:0}
.chip:has(input:checked){background:var(--gold);color:var(--navy);border-color:var(--gold);font-weight:700}

@media (prefers-reduced-motion:reduce){
  .card:hover,.single-price:hover{transform:none}
}


/* ============ pass 2 fixes ============ */

/* the template lowercased every heading. Sentence case, as written. */
h1,h2,h3,h4,h5,h6,.single-promo h3,.section-heading h2,.welcome-intro h1{
  text-transform:none!important}

/* HERO: three clean plates on a stair, not six overlapping thumbnails */
.gs-hero-stack{display:grid;gap:18px}
.gs-hero-stack figure{margin:0;border-radius:14px;overflow:hidden;
  border:1px solid var(--line-soft);background:var(--surface);
  box-shadow:0 30px 60px -20px rgba(3,6,14,.6)}
.gs-hero-stack figure:nth-child(1){margin-left:0}
.gs-hero-stack figure:nth-child(2){margin-left:38px}
.gs-hero-stack figure:nth-child(3){margin-left:76px}
.gs-hero-stack img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;display:block}
.gs-hero-stack figcaption{font-family:"DM Mono",ui-monospace,monospace;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--body);padding:10px 14px}
@media (max-width:767px){.gs-hero-stack figure{margin-left:0!important}}

/* the orbit rings, now with nothing behind them */
.profile-circle-wrapper .folder-img{display:none}
.profile-circle{border-color:var(--line)!important}
.profile-icon img{background:var(--surface);border-radius:50%;padding:6px}

/* PRICE CARDS: glass on the ground, gold price, one lead card */
.price-plan-area .card,.single-price,.price-card{
  background:var(--surface)!important;border:1px solid var(--line-soft)!important;
  border-radius:20px!important;box-shadow:none!important;padding:38px 32px!important;
  color:var(--body)!important}
.price-plan-area .card *,.single-price *{color:inherit}
.price-plan-area .card h3,.price-plan-area .card h4,.single-price h3,.single-price h4,
.price-plan-area .card .h3{color:var(--cream)!important;font-family:"Lorin",sans-serif;
  font-weight:800;font-size:1.9rem!important;text-transform:none!important;opacity:1!important}
.price-plan-area .card p,.single-price p{color:var(--body)!important;opacity:1!important}
.price-plan-area .card ul li,.single-price ul li{color:var(--body)!important;
  border-bottom:1px solid var(--line-soft);padding:12px 0;list-style:none;opacity:1!important}
.price-plan-area .card ul,.single-price ul{padding-left:0;margin-top:22px}
.price,.card .price,.single-price .price,.price-plan-area .price{
  font-family:"Lorin",sans-serif!important;font-weight:800!important;
  color:var(--gold)!important;font-size:3.4rem!important;line-height:1;opacity:1!important}
.price sup,.price small,.price span{color:var(--gold)!important;font-size:1.1rem!important;
  font-weight:400;opacity:.8}
/* kill the template's cyan cap bar and yellow badge */
.price-plan-area .card::before,.single-price::before,.price-plan-area .card::after{
  display:none!important}
.badge,.price-plan-area .badge,.single-price .badge{background:var(--gold)!important;
  color:var(--navy)!important;font-family:"DM Mono",monospace;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;border-radius:999px;padding:7px 14px;
  box-shadow:none!important;font-weight:500}
.price-plan-area .card:hover,.single-price:hover{border-color:rgba(214,184,119,.45)!important}

/* the service icon tiles the template tinted at random */
.service-icon,.icon-box .icon,.single-service i,.service-area .card i{
  color:var(--gold)!important;background:rgba(214,184,119,.10)!important;
  border-radius:12px}
.service-area .card,.single-service{background:transparent!important;
  border:0!important;padding:0!important}

/* the portfolio filter pills */
.filter-btn,.portfolio-menu button,.portfolio-filter button{
  font-family:"DM Mono",monospace!important;font-size:11px!important;
  letter-spacing:.12em;text-transform:uppercase;border-radius:999px}


/* the promo trio: no card, no outline (Aaron 2026-09-02) — just the heading,
   a short gold dash, and the copy, centered */
.single-promo{background:transparent!important;border:0!important;
  border-radius:0;box-shadow:none!important;text-align:center!important;padding:10px 26px!important}
.single-promo h3{font-size:1.75rem!important;line-height:1.16!important;
  letter-spacing:-.01em!important;color:var(--cream)!important}
.single-promo h3::after{content:"";display:block;width:34px;height:2px;border-radius:2px;
  background:var(--gold);margin:16px auto 0;opacity:.85}
.single-promo p{color:var(--body)!important;margin-top:14px;max-width:34ch;
  margin-left:auto;margin-right:auto}
.single-promo.active,.single-promo:hover{border-color:transparent}

/* the hero plates must start below the fixed navbar */
.welcome-area{padding-top:120px}

/* centered hero (Aaron 2026-09-02): the h1 and lede keep their measure but
   center (the h1's 16ch cap was pinning it left), and the rotator lives in
   its own section a beat below the hero */
.welcome-intro.text-center h1,
.welcome-intro.text-center p{margin-left:auto;margin-right:auto}
.welcome-intro.text-center .button-group{justify-content:center}
/* the hero pins full-screen and the showcase scrolls up over it; the JS
   drives the shrink/fade with transforms only */
.gs-heroflow{position:relative}
/* main.overflow-hidden creates a scroll container and silently kills
   position:sticky; clip clips the same without breaking the pin */
main.main.overflow-hidden{overflow:clip!important}
.gs-heroflow .welcome-area{position:sticky;top:0;min-height:100vh;min-height:100svh}
.gs-heroflow .welcome-intro{will-change:transform,opacity}
.tool-show{position:relative;z-index:2;background:var(--navy);padding:96px 0 110px}
.tool-show .gs-shot{margin-top:0;will-change:opacity}
.tool-show .gs-shot__stage{will-change:transform}
#tools{scroll-margin-top:90px}
html{scroll-behavior:smooth} /* the reduced-motion guard flips this back to auto */

/* the scroll cue under the hero buttons: a slow-nudging chevron down to the
   tools; still under the reduced-motion guard */
.gs-scrolldown{display:inline-flex;align-items:center;justify-content:center;
  margin-top:42px;width:46px;height:46px;border-radius:50%;
  color:var(--gold);background:rgba(246,242,233,.07);
  animation:gsNudge 2.4s ease-in-out infinite}
.gs-scrolldown:hover{background:rgba(246,242,233,.15);color:var(--gold-bright)}
.gs-scrolldown svg{width:20px;height:20px;display:block}
.gs-scrolldown:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@keyframes gsNudge{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
@media (prefers-reduced-motion:reduce){.gs-scrolldown{animation:none}}

.gs-hero-stack{padding-top:26px}
@media (max-width:767px){.welcome-area{padding-top:96px}}


/* ============ price plans, the real class names ============ */
.single-price-plan{background:var(--surface)!important;border:1px solid var(--line-soft)!important;
  border-radius:20px!important;box-shadow:none!important;text-align:left!important;
  padding:40px 34px!important;transition:border-color .25s var(--ease),transform .25s var(--ease)}
.single-price-plan:hover{border-color:rgba(214,184,119,.45)!important;transform:translateY(-4px)}
.single-price-plan .plan-title h3{font-family:"Lorin",sans-serif!important;font-weight:800!important;
  font-size:2rem!important;color:var(--cream)!important;text-transform:none!important;opacity:1!important}
.single-price-plan .plan-title p{color:var(--body)!important;opacity:1!important;margin-top:8px;
  font-size:.95rem;max-width:34ch}
.single-price-plan .plan-price{margin-top:26px}
.single-price-plan .plan-price .h1,.single-price-plan .plan-price span.h1{
  font-family:"Lorin",sans-serif!important;font-weight:800!important;font-size:4rem!important;
  color:var(--gold)!important;line-height:1;opacity:1!important}
.single-price-plan .color-primary{color:var(--gold)!important;font-family:"Lorin",sans-serif;
  font-size:2rem!important;font-weight:700;vertical-align:top;opacity:1!important}
.single-price-plan .validity,.single-price-plan sub{color:var(--faint)!important;
  font-family:"DM Mono",monospace!important;font-size:.8rem!important;letter-spacing:.08em;opacity:1!important}
.single-price-plan .plan-features{list-style:none;padding-left:0;margin-top:26px}
.single-price-plan .plan-features li{color:var(--body)!important;opacity:1!important;
  padding:13px 0;border-bottom:1px solid var(--line-soft);font-size:.95rem}
.single-price-plan .plan-features li:last-child{border-bottom:0}
.single-price-plan .plan-button{margin-top:28px}
.single-price-plan .plan-button .btn{width:100%;justify-content:center;display:inline-flex;
  align-items:center;background:transparent!important;color:var(--cream)!important;
  border:1px solid rgba(246,242,233,.38)!important}
.single-price-plan.color-2 .plan-button .btn,.single-price-plan:nth-child(1) .plan-button .btn{}
/* the lead plan carries the gold button */
.col-md-6:last-child .single-price-plan .plan-button .btn{background:var(--gold)!important;
  color:var(--navy)!important;border-color:var(--gold)!important}
.single-price-plan .badge{background:var(--gold)!important;color:var(--navy)!important;
  font-family:"DM Mono",monospace!important;font-size:10px!important;letter-spacing:.12em;
  text-transform:uppercase;border-radius:999px;padding:6px 12px;font-weight:500;vertical-align:middle}
.single-price-plan .bg-hover::after,.single-price-plan::after{display:none!important}

.gs-math{color:var(--body);max-width:76ch;margin:46px auto 0;text-align:center;font-size:.95rem}
.gs-math strong{color:var(--cream)}

/* AOS leaves elements faded if it never initialises; make sure nothing sticks */
[data-aos]{opacity:1!important;transform:none!important}

/* ---- final pass ---- */
/* the non-lead plan button was white on white */
.single-price-plan .plan-button .btn,.btn-bordered{
  background:rgba(246,242,233,.08)!important;color:var(--cream)!important;
  border:0!important}
.single-price-plan .plan-button .btn:hover,.btn-bordered:hover{
  color:var(--cream)!important;background:rgba(246,242,233,.15)!important}
.col-md-6:last-child .single-price-plan .plan-button .btn{background:var(--gold)!important;
  color:var(--navy)!important;border:0!important}
.col-md-6:last-child .single-price-plan .plan-button .btn:hover{background:#e3c98d!important;
  color:var(--navy)!important}

/* reviews */
.review-text{color:var(--body)!important;font-size:1.05rem;line-height:1.6}
.reviewer-name{color:var(--cream)!important;font-family:"Lorin",sans-serif;font-weight:700}
.reviewer-name + h6,.reviewer-title{color:var(--faint)!important;font-family:"DM Mono",monospace;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.reviewer img,.reviewer-thumb img{display:none}
.single-review .quot img,img[src*="quote.png"]{opacity:.28;filter:brightness(3) sepia(1) saturate(3) hue-rotate(2deg)}

.gs-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px}

/* a wrapper deeper in the template was still painting white, which put light
   body text on a white ancestor and failed AA for real. Ground everything. */
html,body,.main,.main-wrapper,.wrapper,main,#main,.content-wrapper,.page-wrapper,
.inner-wrapper,.all-area{background-color:var(--navy)!important}
.bg-white,.white-bg,section.bg-white{background-color:var(--navy)!important}

/* the template ships hidden white overlays: the search screen and the
   offcanvas menu. They only show when opened, but they are real panels and
   they failed AA, so they get the ground too. */
.search-area,.search-form,.menu-overlay,.offcanvas,.offcanvas-body,.side-menu,
.canvas-menu,.navbar-collapse,.menu-wrapper,.mobile-menu,.sidebar,.widget,
.dropdown-menu,.search-content,.modal-content{
  background-color:var(--navy)!important;color:var(--body)!important}
.dropdown-menu a,.offcanvas a,.search-area a,.navbar-collapse a{color:var(--body)!important}
.dropdown-menu a:hover,.offcanvas a:hover{color:var(--gold)!important}
.search-area h2,.search-area h3,.offcanvas h2,.offcanvas h3,.widget h3,
.search-area input{color:var(--cream)!important}
.search-area input{background:transparent!important;border-bottom:1px solid var(--line)!important}
.price-plan-area,.price-plan-area .container,.review-area{background-color:var(--deep)!important}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}
.dropdown-menu .dropdown-item,.dropdown-item{color:var(--body)!important;background:transparent!important}

/* ================= pass 3 ================= */

/* HERO: three plates fanned like a spread hand of cards */
.gs-fan{position:relative;height:400px;display:block;margin-top:30px;overflow:visible}
.welcome-area .col-md-5,.welcome-area .col-lg-5{overflow:visible}
.gs-fan figure{position:absolute;top:0;left:50%;width:56%;margin:0;
  border-radius:16px;overflow:hidden;background:var(--surface);
  border:1px solid rgba(246,242,233,.16);
  box-shadow:0 40px 70px -24px rgba(3,6,14,.75);
  transform-origin:50% 100%;transition:transform .45s var(--ease)}
.gs-fan figure img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;display:block}
.gs-fan figure:nth-child(1){transform:translateX(-92%) rotate(-11deg) translateY(26px) scale(.9);z-index:1}
.gs-fan figure:nth-child(2){transform:translateX(-50%) rotate(0deg) translateY(0) scale(1);z-index:3}
.gs-fan figure:nth-child(3){transform:translateX(-8%) rotate(11deg) translateY(26px) scale(.9);z-index:2}
.gs-fan:hover figure:nth-child(1){transform:translateX(-104%) rotate(-14deg) translateY(18px) scale(.92)}
.gs-fan:hover figure:nth-child(3){transform:translateX(4%) rotate(14deg) translateY(18px) scale(.92)}
@media (max-width:991px){.gs-fan{height:330px}.gs-fan figure{width:76%}}
@media (max-width:575px){.gs-fan{height:260px}}

/* NO coloured bar on any card. He asked for it gone, not thinner. */
.bg-hover::after,.bg-hover::before,.single-promo::after,.single-price-plan::after,
.single-price-plan::before,.card::after{display:none!important;content:none!important}

/* PRICING legibility: brighter, larger, more air */
.single-price-plan .plan-title p{color:#c8cfdd!important;font-size:1rem!important;
  line-height:1.55;max-width:38ch}
.single-price-plan .plan-features li{color:#e4e7ee!important;font-size:1.02rem!important;
  padding:15px 0}
.single-price-plan .plan-price .h1{font-size:4.4rem!important}
.single-price-plan .validity,.single-price-plan sub{color:#8e98ad!important;font-size:.85rem!important}
/* both buttons legible: Gold is the hairline, Diamond is the gold fill */
.single-price-plan .plan-button .btn,
.single-price-plan .plan-button a.btn,
.single-price-plan .plan-button .btn-bordered{
  background:rgba(246,242,233,.08)!important;color:var(--cream)!important;
  border:0!important;font-weight:700!important;
  width:100%!important;justify-content:center!important;padding:15px 24px!important}
.col-md-6:last-child .single-price-plan .plan-button .btn,
.col-md-6:last-child .single-price-plan .plan-button a.btn{
  background:var(--gold)!important;color:var(--navy)!important;border:0!important}

/* FORM: labelled, ruled, legible */
.gs-lab{display:block;font-family:"DM Mono",ui-monospace,monospace;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:#98a2b8;margin:18px 0 7px}
.gs-lab span{text-transform:none;letter-spacing:.02em;color:var(--faint);margin-left:8px}
#contact-form{background:var(--surface)!important;border:1px solid var(--line-soft);
  border-radius:20px;padding:34px 32px!important}
/* The fields were bare underlines, so a grey placeholder read as a value
   already filled in and the form looked unfinished next to the panels
   opposite. Proper enclosed fields, with a gold focus ring. */
#contact-form input,#contact-form textarea,#contact-form select{width:100%;
  background:rgba(246,242,233,.045)!important;
  border:1px solid rgba(246,242,233,.15)!important;
  border-radius:12px!important;color:var(--cream)!important;
  font-family:"DM Sans",sans-serif;font-size:1rem!important;
  padding:12px 14px!important;min-height:48px;
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease}
#contact-form textarea{min-height:104px;line-height:1.55}
#contact-form input:focus,#contact-form textarea:focus,#contact-form select:focus{
  border-color:var(--gold)!important;background:rgba(246,242,233,.07)!important;
  box-shadow:0 0 0 3px rgba(214,184,119,.16)!important;outline:none}
/* The qualifier select added 2026-09-09 with the gated audit. A native select
   inherits the OS chrome, so it needs the arrow drawn and the option list
   forced dark or Windows renders white-on-white. */
#contact-form select{-webkit-appearance:none;appearance:none;cursor:pointer;
  padding-right:38px!important;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%2398a2b8' d='M1 1l5 5 5-5'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-position:right 14px center!important;
  background-size:12px 8px!important}
#contact-form select option{background:#0e1730;color:#f6f2e9}
#contact-form ::placeholder{color:#6b7590!important;opacity:1}
#contact-form .btn,#contact-form button{width:100%;justify-content:center;margin-top:30px;
  background:var(--gold)!important;color:var(--navy)!important;border-color:var(--gold)!important;
  font-weight:700}
.contact-info .card,.contact-info .single-contact{background:var(--surface)!important;
  border:1px solid var(--line-soft)!important;border-radius:18px}

/* every heading starts with a capital: kill the template's lowercase rules
   wherever they still apply, and never small-caps a section title */
h1,h2,h3,h4,h5,h6,.section-heading h2,.single-promo h3,.single-price-plan h3,
.footer-area h3,.footer-area h4,.widget-title{text-transform:none!important}
.footer-area h3,.footer-area h4,.widget-title{font-family:"Lorin",sans-serif;
  font-weight:700;font-size:1.05rem;letter-spacing:0}

/* the template centered everything in the contact column; a form reads left */
#contact-form,#contact-form .row,#contact-form .col-12,#contact-form label{text-align:left!important}
#contact-form .col-12{padding-left:0;padding-right:0}
.contact-info .card,.contact-info .single-contact{text-align:left!important}
.contact-info .card h3,.contact-info .single-contact h3{font-size:1.35rem!important;margin-top:10px}

/* ================= pass 4 ================= */
/* The work plates were small landscape strips. A website preview reads as a
   card: taller than it is wide-ish, cropped from the top so the hero of each
   site is what you see. */
.portfolio-area .single-portfolio,.portfolio-item,.single-portfolio{
  border-radius:16px;overflow:hidden;border:1px solid var(--line-soft);
  background:var(--surface);transition:transform .3s var(--ease),border-color .3s var(--ease)}
.portfolio-area .single-portfolio:hover,.single-portfolio:hover{
  transform:translateY(-6px);border-color:rgba(214,184,119,.45)}
.portfolio-area .single-portfolio,.single-portfolio,.portfolio-item{
  position:relative;aspect-ratio:4/5;overflow:hidden}
.portfolio-area .single-portfolio img,.single-portfolio img,.portfolio-item img{
  position:absolute!important;top:0;left:0;width:100%!important;height:auto!important;
  aspect-ratio:auto!important;object-fit:fill!important;display:block}
/* more room per card: two up on desktop instead of three */
.portfolio-area .col-12.col-sm-6.col-lg-4,.portfolio-area [class*="col-lg-4"]{
  flex:0 0 50%!important;max-width:50%!important}
@media (max-width:767px){
  .portfolio-area .col-12.col-sm-6.col-lg-4,.portfolio-area [class*="col-lg-4"]{
    flex:0 0 100%!important;max-width:100%!important}
  .portfolio-area img,.single-portfolio img{aspect-ratio:4/4.4!important}
}
.portfolio-menu{display:none!important}

/* the actual wrapper is .single-case-studies, and its link is the frame */
.single-case-studies{position:relative;border-radius:16px;overflow:hidden;
  border:1px solid var(--line-soft);background:var(--surface);
  transition:transform .3s var(--ease),border-color .3s var(--ease)}
.single-case-studies:hover{transform:translateY(-6px);border-color:rgba(214,184,119,.45)}
.single-case-studies > a:first-child{display:block;position:relative;
  aspect-ratio:4/5;overflow:hidden}
.single-case-studies > a:first-child img{position:absolute!important;top:0;left:0;
  width:100%!important;height:auto!important;display:block}
.portfolio-item{margin-bottom:30px}

/* the previews are now shot at 1440x1800, exactly 4:5, so they fill the card
   frame edge to edge: no side crop and no dead space under them */
.single-case-studies > a:first-child img{position:static!important;width:100%!important;
  height:100%!important;object-fit:cover!important;object-position:top center!important}

/* ================= pass 5 ================= */

/* WORK GRID back to three up at the real screenshot proportion. The tall crop
   made each card oversized and soft, because a 1440 wide shot was being blown
   up inside a portrait frame. */
.portfolio-area .col-12.col-sm-6.col-lg-4,.portfolio-area [class*="col-lg-4"]{
  flex:0 0 33.3333%!important;max-width:33.3333%!important}
@media (max-width:991px){.portfolio-area .col-12.col-sm-6.col-lg-4{flex:0 0 50%!important;max-width:50%!important}}
@media (max-width:575px){.portfolio-area .col-12.col-sm-6.col-lg-4{flex:0 0 100%!important;max-width:100%!important}}
.single-case-studies > a:first-child{aspect-ratio:16/10!important}
.single-case-studies > a:first-child img{position:static!important;width:100%!important;
  height:100%!important;object-fit:cover!important;object-position:top center!important}

/* HERO fan: THESE are the ones that should be tall and card shaped */
.gs-fan{height:520px}
.gs-fan figure{width:50%;border-radius:18px}
.gs-fan figure img{aspect-ratio:4/5!important;object-fit:cover;object-position:top center}
@media (max-width:991px){.gs-fan{height:420px}.gs-fan figure{width:62%}}
@media (max-width:575px){.gs-fan{height:340px}}

/* the promise list beside the form */
.gs-promise ol{list-style:none;padding:0;margin:34px 0 0}
.gs-promise li{position:relative;padding:0 0 26px 62px;margin-bottom:26px;
  border-bottom:1px solid var(--line-soft)}
.gs-promise li:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.gs-promise__n{position:absolute;left:0;top:2px;font-family:"Lorin",sans-serif;
  font-weight:300;font-size:2rem;color:var(--gold);line-height:1}
.gs-promise h3{font-family:"Lorin",sans-serif;font-weight:700;font-size:1.3rem!important;
  color:var(--cream)!important;margin-bottom:8px;text-transform:none!important}
.gs-promise p{color:var(--body)!important;font-size:.98rem;margin:0;max-width:46ch}

/* the chips, matching the live inquiry form */
.gs-chips-set{border:0;padding:0;margin:0 0 8px}
.gs-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.gs-chip{position:relative;margin:0}
.gs-chip input{position:absolute;inset:0;opacity:0;cursor:pointer}
.gs-chip span{display:inline-flex;align-items:center;min-height:44px;padding:10px 16px;
  border-radius:999px;background:rgba(246,242,233,.06);color:var(--body);
  border:1px solid rgba(246,242,233,.2);font-size:.92rem;cursor:pointer;
  transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease)}
.gs-chip:hover span{border-color:rgba(214,184,119,.55);color:var(--cream)}
.gs-chip input:checked + span{background:var(--gold);color:var(--navy);font-weight:700;
  border-color:var(--gold)}
.gs-chip input:focus-visible + span{outline:2px solid var(--gold);outline-offset:3px}
.gs-fine{display:block;margin-top:16px;color:var(--faint);font-size:.85rem;line-height:1.5}

/* ================= pass 6 ================= */
/* The hero image column is a narrow col-md-5, so three fanned cards were each
   about 240px wide and showed almost nothing of the site. Give the column more
   room and lead with ONE large preview, the other two behind it. */
.welcome-area .col-md-7,.welcome-area .col-lg-7{flex:0 0 44%!important;max-width:44%!important}
.welcome-area .col-md-5,.welcome-area .col-lg-5{flex:0 0 56%!important;max-width:56%!important}
@media (max-width:991px){
  .welcome-area .col-md-7,.welcome-area .col-lg-7,
  .welcome-area .col-md-5,.welcome-area .col-lg-5{flex:0 0 100%!important;max-width:100%!important}
}
.gs-fan{height:560px}
.gs-fan figure{width:64%}
.gs-fan figure:nth-child(1){transform:translateX(-100%) rotate(-8deg) translateY(40px) scale(.82);z-index:1;opacity:.75}
.gs-fan figure:nth-child(2){transform:translateX(-50%) rotate(0deg) translateY(0) scale(1);z-index:3}
.gs-fan figure:nth-child(3){transform:translateX(0%) rotate(8deg) translateY(40px) scale(.82);z-index:2;opacity:.75}
.gs-fan:hover figure:nth-child(1){transform:translateX(-112%) rotate(-11deg) translateY(30px) scale(.85);opacity:1}
.gs-fan:hover figure:nth-child(3){transform:translateX(12%) rotate(11deg) translateY(30px) scale(.85);opacity:1}
@media (max-width:991px){.gs-fan{height:440px}.gs-fan figure{width:70%}}
@media (max-width:575px){.gs-fan{height:360px}.gs-fan figure{width:82%}}

/* The "where we look" panel, rebuilt as an actual iOS screen (Aaron,
   2026-09-03: "make the phone thing actually look like an iPhone interface").
   Device: black bezel, titanium rim, Dynamic Island, side buttons. Screen: the
   system font stack, a large title, a grouped inset list with hairlines inset
   to the text, and a home indicator. The five checks still light in sequence,
   and they are places we CHECK, never promises. */
.gs-appear{position:relative;width:352px;max-width:100%;margin:0 auto;text-align:left;
  border-radius:56px;border:12px solid #0b0d12;background:#000;overflow:hidden;
  box-shadow:
    0 0 0 2px #454c5c,                      /* titanium rim */
    0 0 0 3.5px #1b1f28,
    0 70px 110px -36px rgba(3,6,14,.95),
    0 24px 44px -20px rgba(3,6,14,.7)}
/* side buttons on the rim */
.gs-appear::before,.gs-appear::after{content:"";position:absolute;z-index:3;
  background:linear-gradient(90deg,#2a3040,#454c5c);border-radius:3px}
.gs-appear::before{left:-15px;top:112px;width:3px;height:70px}   /* volume */
.gs-appear::after{right:-15px;top:132px;width:3px;height:52px}   /* power  */
.gs-phone__shine{position:absolute;inset:0;border-radius:44px;pointer-events:none;z-index:2;
  background:linear-gradient(118deg,rgba(255,255,255,.07) 0%,
    rgba(255,255,255,.022) 26%,transparent 44%)}
.gs-phone__screen{position:relative;background:#08090c;border-radius:44px;
  padding:12px 0 10px;min-height:600px;display:flex;flex-direction:column;
  font-family:-apple-system,"SF Pro Text","Segoe UI Variable Text","Segoe UI",
    system-ui,"Helvetica Neue",sans-serif;
  -webkit-font-smoothing:antialiased}
.gs-phone__island{position:absolute;top:9px;left:50%;transform:translateX(-50%);
  width:98px;height:27px;border-radius:14px;background:#000;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.045)}
.gs-phone__status{display:flex;justify-content:space-between;align-items:center;
  margin:0 0 16px;padding:0 22px;height:20px;color:#fff}
.gs-phone__time{font-size:14px;font-weight:600;letter-spacing:0}
.gs-phone__meters{display:flex;align-items:center;gap:5px}
.gs-phone__bars{display:flex;align-items:flex-end;gap:1.6px}
.gs-phone__bars i{width:3px;border-radius:1px;background:#fff}
.gs-phone__bars i:nth-child(1){height:4px}
.gs-phone__bars i:nth-child(2){height:6px}
.gs-phone__bars i:nth-child(3){height:8px}
.gs-phone__bars i:nth-child(4){height:10px}
.gs-phone__wifi{width:15px;height:11px;display:block}
.gs-phone__bat{position:relative;width:23px;height:11.5px;border-radius:3.5px;
  border:1px solid rgba(255,255,255,.4)}
.gs-phone__bat::before{content:"";position:absolute;inset:1.5px;border-radius:1.5px;
  background:#fff}
.gs-phone__bat::after{content:"";position:absolute;right:-3.5px;top:3.4px;
  width:2px;height:4.5px;border-radius:0 2px 2px 0;background:rgba(255,255,255,.4)}
.gs-phone__home{width:132px;height:5px;border-radius:3px;
  background:rgba(255,255,255,.85);flex:0 0 auto;
  margin:auto auto 2px}
/* iOS large title plus a status capsule */
.gs-ios__nav{display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:0 20px;margin-bottom:12px}
.gs-ios__title{font-size:23px;font-weight:700;letter-spacing:-.5px;color:#fff;white-space:nowrap}
.gs-ios__pill{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  font-size:11.5px;font-weight:600;letter-spacing:-.1px;color:#30d158;
  background:rgba(48,209,88,.16);border-radius:999px;padding:4px 10px 4px 8px}
.gs-ios__pill::before{content:"";width:6px;height:6px;border-radius:50%;
  background:#30d158;animation:gsBlink 1.6s ease-in-out infinite}
/* grouped inset list */
.gs-ios__list{list-style:none;margin:0 14px;padding:0;
  background:#1c1c1e;border-radius:14px}
.gs-ios__list li{position:relative;display:flex;align-items:center;gap:11px;
  padding:9px 13px;animation:gsRow 12s linear infinite;
  animation-delay:calc(var(--n)*-2.4s);opacity:.82}
.gs-ios__list li + li::before{content:"";position:absolute;left:54px;right:0;top:0;
  height:1px;background:#38383a}
.gs-ios__icon{flex:0 0 auto;width:28px;height:28px;border-radius:8px;
  background:#2c2c2e;color:var(--gold);display:flex;align-items:center;
  justify-content:center}
.gs-ios__icon svg{width:17px;height:17px;display:block}
.gs-ios__what{flex:1;min-width:0}
.gs-ios__what b{display:block;color:#fff;font-weight:500;font-size:14px;
  letter-spacing:-.2px;line-height:1.25}
.gs-ios__what i{font-style:normal;display:block;color:#8e8e93;font-size:11px;
  letter-spacing:0;font-kerning:none;line-height:1.3;margin-top:1px}
.gs-ios__ok{flex:0 0 auto;width:21px;height:21px;border-radius:50%;
  background:#30d158;color:#fff;display:flex;align-items:center;
  justify-content:center;transform:scale(0);
  animation:gsOk 12s linear infinite;animation-delay:calc(var(--n)*-2.4s)}
.gs-ios__ok svg{width:12px;height:12px;display:block}
.gs-ios__foot{margin:9px 20px 0;color:#8e8e93;font-size:11.5px;line-height:1.45;
  letter-spacing:-.1px;flex:0 0 auto}
@keyframes gsBlink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes gsRow{0%{opacity:.82}5%{opacity:1}82%{opacity:1}92%,100%{opacity:.82}}
@keyframes gsOk{0%,4%{transform:scale(0)}9%{transform:scale(1.15)}12%{transform:scale(1)}
  82%{transform:scale(1)}92%,100%{transform:scale(0)}}
@media (prefers-reduced-motion:reduce){
  .gs-ios__list li,.gs-ios__ok,.gs-ios__pill::before{animation:none}
  .gs-ios__list li{opacity:1}
  .gs-ios__ok{transform:none}
}
@media (max-width:400px){
  .gs-appear{width:310px;border-width:11px}
  .gs-ios__title{font-size:21px}
}

/* the hover panel over a work card */
.case-studies-overlay{background:rgba(6,11,22,.82)!important;
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.case-studies-overlay h3{font-family:"Lorin",sans-serif;font-weight:700;
  font-size:1.5rem!important;text-transform:none!important}
.case-studies-overlay p{color:var(--body)!important;font-size:.95rem}

/* the fan was spilling out of its column and running under the headline.
   Card 1 at -100% put its left edge outside the container; these three
   offsets keep all of it inside. */
.gs-fan figure{width:60%}
.gs-fan figure:nth-child(1){transform:translateX(-80%) rotate(-8deg) translateY(42px) scale(.84);z-index:1;opacity:.7}
.gs-fan figure:nth-child(2){transform:translateX(-50%) rotate(0deg) translateY(0) scale(1);z-index:3;opacity:1}
.gs-fan figure:nth-child(3){transform:translateX(-20%) rotate(8deg) translateY(42px) scale(.84);z-index:2;opacity:.7}
.gs-fan:hover figure:nth-child(1){transform:translateX(-86%) rotate(-10deg) translateY(34px) scale(.86);opacity:.9}
.gs-fan:hover figure:nth-child(3){transform:translateX(-14%) rotate(10deg) translateY(34px) scale(.86);opacity:.9}
.gs-fan{margin-top:56px}

/* ================= pass 7 ================= */

/* HERO: three fanned cards meant each site rendered about 280px wide, which is
   unreadable. Then a browser-chrome frame, which Aaron killed 2026-08-31 as the
   standard AI-site tell. Now: a plain photo print. The screenshot is the object,
   an offset outline behind it gives the depth, and on desktop it runs past the
   column edge so the grid breaks instead of everything sitting in its box. */
.gs-fan{display:none!important}
.gs-shot{position:relative;margin-top:34px}
/* 2026-09-02: the stage is an open carousel now; the frame styling moved onto
   each slide so the neighbours can peek out either side */
.gs-shot__stage{overflow:visible;background:transparent;border:0;box-shadow:none}
.gs-shot img{display:block;width:100%;height:auto;aspect-ratio:16/11;
  object-fit:cover;object-position:top center}
.gs-shot__cap{margin:13px 2px 0;font-family:"DM Mono",ui-monospace,monospace;
  font-size:11.5px;letter-spacing:.04em;color:var(--faint)}
.gs-shot__cap b{color:var(--cream);font-weight:500}
/* Header phone: right side beside the CTA, one row, never wrapping the nav. */
.navbar .navbar-nav.action .gs-tel{font-family:"DM Mono",ui-monospace,monospace;
  font-size:13px;letter-spacing:.01em;color:var(--gold);white-space:nowrap;
  align-self:center;text-decoration:none}
.navbar .navbar-nav.action .gs-tel:hover{color:var(--cream)}
.navbar .navbar-nav.action li.nav-item{display:flex;align-items:center}
/* Keep the five links + phone + CTA on ONE row: tighten link padding and give
   the Instagram icon up on narrower desktops. Never let the nav wrap. */
/* the template renders the link list inline-block, so its inline-flex items
   wrap like words when the row gets tight; make it a real nowrap flex row */
.navbar-expand .navbar-nav.items{display:flex;flex-wrap:nowrap;align-items:center;white-space:nowrap}
.navbar .navbar-nav.items .nav-item .nav-link{padding-left:9px;padding-right:9px;letter-spacing:.14em;white-space:nowrap}
@media (min-width:992px) and (max-width:1399px){.navbar .navbar-nav.icons{display:none}}
@media (min-width:992px) and (max-width:1199px){
  .navbar .navbar-nav.items .nav-item .nav-link{padding-left:7px;padding-right:7px;font-size:.72rem;letter-spacing:.1em}
  .navbar .navbar-nav.action .gs-tel{display:none!important}}

/* STATS beside the form. They were three stacked text blocks split by
   hairlines, and the mono source line under each read as debris rather than
   an attribution (Aaron, 2026-09-03: "a little ugly"). Now each is a panel on
   the same glass system as the form opposite it: the number holds its own
   column, the sentence and its source stack beside it. */
.gs-stats{margin-top:26px;display:grid;gap:14px}
.gs-stat{background:var(--surface);border:1px solid var(--line-soft);
  border-radius:16px;padding:20px 22px;margin:0;
  display:grid;grid-template-columns:6.9rem minmax(0,1fr);column-gap:18px;
  align-items:baseline}
.gs-stat__n{grid-row:1 / span 2;font-family:"Lorin",sans-serif;font-weight:800;
  font-size:2.2rem;line-height:1.05;color:var(--gold);white-space:nowrap}
.gs-stat p{grid-column:2;color:var(--cream)!important;font-size:1rem;
  line-height:1.5;margin:0;max-width:34ch}
.gs-stat cite{grid-column:2;display:block;font-style:normal;
  font-family:"DM Mono",ui-monospace,monospace;font-size:10.5px;line-height:1.5;
  letter-spacing:.02em;color:var(--faint);margin-top:9px}
@media (max-width:575px){
  .gs-stat{grid-template-columns:minmax(0,1fr);row-gap:6px}
  .gs-stat__n{grid-row:auto;font-size:2.1rem}
  .gs-stat p,.gs-stat cite{grid-column:1}
}

/* TESTIMONIALS: the owl carousel clipped the middle card. Three static columns. */
.client-reviews.owl-carousel{display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;overflow:visible!important}
.client-reviews.owl-carousel .owl-stage-outer,
.client-reviews.owl-carousel .owl-stage,
.client-reviews.owl-carousel .owl-item{display:contents!important;width:auto!important;
  transform:none!important}
.client-reviews .owl-nav,.client-reviews .owl-dots{display:none!important}
.client-reviews .single-review,.client-reviews > div{background:var(--surface)!important;
  border:1px solid var(--line-soft);border-radius:18px;padding:30px!important;height:100%}
@media (max-width:991px){.client-reviews.owl-carousel{grid-template-columns:1fr}}

/* ---- reviews, three plain cards, no carousel ---- */
.gs-reviews{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin-top:44px}
.gs-review{background:var(--surface);border:1px solid var(--line-soft);border-radius:18px;
  padding:32px;display:flex;flex-direction:column}
.gs-review__stars{color:var(--gold);letter-spacing:.22em;font-size:.95rem;margin-bottom:16px}
.gs-review blockquote{margin:0 0 22px;color:var(--cream);font-size:1.12rem;line-height:1.55;
  font-family:"DM Sans",sans-serif;flex:1}
.gs-review cite{font-style:normal;display:flex;flex-direction:column;gap:4px;
  border-top:1px solid var(--line-soft);padding-top:16px}
.gs-review cite b{font-family:"Lorin",sans-serif;font-weight:700;font-size:1.05rem;color:var(--cream)}
.gs-review cite span{font-family:"DM Mono",ui-monospace,monospace;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
@media (max-width:991px){.gs-reviews{grid-template-columns:1fr}}

/* the footer link colour the template used was near invisible on the ground */
.footer-area a,.footer-area li a,.footer-area .widget a{color:#a9b2c8!important;opacity:1!important}
.footer-area a:hover{color:var(--gold)!important}
.footer-area h3,.footer-area h4,.widget-title{color:var(--cream)!important}
.footer-area .social-icon a{color:#a9b2c8!important}
.copyright-area,.copyright-area a{color:#8e98ad!important}

.gs-vid{width:100%;height:auto;display:block;border-radius:16px;
  border:1px solid var(--line-soft);object-fit:cover;aspect-ratio:4/3;
  filter:grayscale(.35) contrast(1.04) brightness(.86)}
@media (prefers-reduced-motion:reduce){.gs-vid{display:none}}

/* ============================================================
   SERVICE ICON TILES, 2026-08-25
   Aaron asked for slightly smaller icons and a bevelled tile
   with a shine. The template shipped a flat tinted square.
   The bevel is a 1px inset highlight on the top edge plus a
   dark inset on the bottom; the shine is a short gradient that
   fades out by 55% so it reads as a lit edge, not a glossy
   button. Gold, per the brand, replacing the template's random
   purple/cyan/orange tints.
   ============================================================ */
.single-service > span{
  height:4rem!important;width:4rem!important;line-height:4rem!important;
  border-radius:14px!important;
  background:linear-gradient(160deg,
      rgba(214,184,119,.22) 0%,
      rgba(214,184,119,.13) 42%,
      rgba(214,184,119,.07) 55%,
      rgba(214,184,119,.06) 100%)!important;
  border:1px solid rgba(214,184,119,.20)!important;
  box-shadow:
      inset 0 1px 0 rgba(255,240,205,.30),
      inset 0 -1px 0 rgba(3,6,14,.45),
      0 6px 14px -6px rgba(3,6,14,.75)!important;
  position:relative;overflow:hidden;
  transition:box-shadow .25s ease, transform .25s ease}
/* the shine itself, a soft sweep across the upper left corner */
.single-service > span::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(150deg,rgba(255,246,224,.16) 0%,rgba(255,246,224,.05) 30%,transparent 58%)}
.single-service > span::before{font-size:2.1rem!important;position:relative;z-index:1}
.single-service:hover > span{
  transform:translateY(-2px);
  box-shadow:
      inset 0 1px 0 rgba(255,240,205,.40),
      inset 0 -1px 0 rgba(3,6,14,.45),
      0 12px 22px -8px rgba(3,6,14,.85)!important}
/* the template tinted each tile a different colour; one gold reads as a set */
.single-service > span[class*="icon-bg-"]{background-image:linear-gradient(160deg,
      rgba(214,184,119,.22) 0%,rgba(214,184,119,.13) 42%,
      rgba(214,184,119,.07) 55%,rgba(214,184,119,.06) 100%)!important}

/* ============================================================
   HERO TOOL ROTATOR, 2026-08-25
   One browser frame, six real tool screenshots crossfading.
   ============================================================ */
/* Carousel (Aaron 2026-09-02): the current shot front and center, the
   previous and next peeking out either side, dimmed and blurred. Clicking a
   side shot navigates to it. */
.gs-shot__stage{position:relative;width:100%;aspect-ratio:16/11}
.gs-shot__stage img.gs-shot__slide{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:top center;
  border-radius:12px;border:1px solid rgba(246,242,233,.18);
  background:#0e1730;box-shadow:0 44px 80px -28px rgba(3,6,14,.8);
  opacity:0;transform:scale(.7);z-index:1;pointer-events:none;
  transition:transform .6s var(--ease),opacity .6s ease,filter .6s ease}
.gs-shot__stage img.gs-shot__slide.is-on{
  opacity:1;transform:none;filter:none;z-index:3;pointer-events:auto}
.gs-shot__stage img.gs-shot__slide.is-prev,
.gs-shot__stage img.gs-shot__slide.is-next{
  opacity:.42;filter:blur(3px) saturate(.85);z-index:2;
  pointer-events:auto;cursor:pointer}
.gs-shot__stage img.gs-shot__slide.is-prev{transform:translateX(-54%) scale(.8)}
.gs-shot__stage img.gs-shot__slide.is-next{transform:translateX(54%) scale(.8)}
.gs-shot__stage img.gs-shot__slide.is-prev:hover{opacity:.62;filter:blur(1.5px);
  transform:translateX(-54%) scale(.82)}
.gs-shot__stage img.gs-shot__slide.is-next:hover{opacity:.62;filter:blur(1.5px);
  transform:translateX(54%) scale(.82)}
@media (max-width:767px){
  .gs-shot__stage img.gs-shot__slide.is-prev{transform:translateX(-26%) scale(.78)}
  .gs-shot__stage img.gs-shot__slide.is-next{transform:translateX(26%) scale(.78)}
  .gs-shot__stage img.gs-shot__slide.is-prev,
  .gs-shot__stage img.gs-shot__slide.is-next{opacity:.22}
}
.gs-shot__dots{display:flex;gap:7px;justify-content:flex-start;
  padding:8px 0 0;background:none;border-top:0}
/* The dot stays visually 8px but the button is a 24px tap target: padding
   plus background-clip:content-box paints only the inner box. */
.gs-shot__dots button{
  width:24px;height:24px;padding:8px;border:0;border-radius:99px;
  background:rgba(246,242,233,.26);background-clip:content-box;cursor:pointer;
  transition:background .25s ease,width .25s ease}
.gs-shot__dots button[aria-selected="true"]{background:var(--gold);background-clip:content-box;width:36px}
.gs-shot__dots button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media (prefers-reduced-motion: reduce){
  .gs-shot__stage img.gs-shot__slide{transition:none}
}


/* ----------------------------------------------------------------------------
   CARDS, 2026-09-03 (Aaron): no outline anywhere, and the card sits a shade
   DARKER than the page rather than lighter. One token, --card, so a future
   change is one line. Hover lifts the surface instead of drawing a border.
   -------------------------------------------------------------------------- */
:root { --card: #070c19; }

.card, .single-price, .price-card, .service-card, .promo-card, .single-review,
.contact-box, .icon-box, .single-blog, .pricing-card, .review-card,
.single-price-plan, .gs-review, .gs-stat, #contact-form, .gs-shot {
  background: var(--card) !important;
  border: 0 !important;
  box-shadow: none !important;
}
.card:hover, .single-price:hover, .single-price-plan:hover, .gs-review:hover {
  border: 0 !important;
  background: #090f20 !important;
}
/* the featured plan is marked by its badge and its button, not by an outline */
.single-price-plan.active, .single-price-plan.color-2 {
  background: #090f20 !important;
  box-shadow: none !important;
}
/* the plan feature rows kept a hairline; that is a divider, not an outline */
.single-price-plan .plan-features li { border-bottom-color: rgba(246, 242, 233, .07) !important; }

/* ---------------------------------------------------------------------------
   In-build tag on the four stage cards (2026-09-10). Six of the eighteen
   bullets have no per-client code yet; they stay on the list because they are
   included when they ship, but they must never read as shipping today. Muted
   gold on a low-contrast pill so it reads as a status, not as a feature badge.
   ------------------------------------------------------------------------- */
.gs-inbuild {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(214, 184, 119, .12);
  color: var(--gold-dim);
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}
.gs-stage ul li a + .gs-inbuild { margin-left: 6px; }

/* The same status, stated in full in a tool page hero. Sits on the dark hero
   photo, so it carries its own panel rather than borrowing the ground. */
.gs-inbuild-note {
  max-width: 62ch;
  margin: 0 auto 26px;
  padding: 12px 18px;
  border-radius: 10px;
  background: rgba(6, 11, 22, .62);
  color: var(--cream);
  font-size: 14px;
  line-height: 1.55;
}
.gs-inbuild-note .gs-inbuild { margin: 0 8px 0 0; }

/* 2026-09-21: links inside running text on document pages (terms, privacy, compare) must not rely on
   color alone (WCAG 1.4.1). Underline them. */
.gs2-doc p a,.gs2-doc li a,.gs2-doc td a{text-decoration:underline;text-underline-offset:2px}