/* ============================================================
   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}

/* ---------- 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:16ch}
.welcome-intro p{max-width:52ch;color:var(--body)!important}

/* ---------- 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}
.btn:not(.btn-bordered-white){background:var(--gold)!important;color:var(--navy)!important;
  border:1px solid var(--gold)!important}
.btn:not(.btn-bordered-white):hover{background:var(--gold-bright)!important;
  border-color:var(--gold-bright)!important;color:var(--navy)!important}
.btn-bordered-white{background:transparent!important;color:var(--cream)!important;
  border:1px solid rgba(246,242,233,.38)!important}
.btn-bordered-white:hover{border-color:var(--cream)!important;background:transparent!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: heading at a sane size, text left, one gold rule */
.single-promo{background:var(--surface)!important;border:1px solid var(--line-soft);
  border-radius:18px;box-shadow:none!important;text-align:left!important;padding:34px 30px!important}
.single-promo h3{font-size:1.75rem!important;line-height:1.16!important;
  letter-spacing:-.01em!important;color:var(--cream)!important}
.single-promo p{color:var(--body)!important;margin-top:12px}
.bg-hover::after{height:2px!important;background-color:var(--line-soft)!important}
.single-promo.active,.single-promo:hover{border-color:rgba(214,184,119,.45)}
.color-2.bg-hover.active::after,.bg-hover:hover::after{background-color:var(--gold)!important}

/* the hero plates must start below the fixed navbar */
.welcome-area{padding-top:120px}
.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:transparent!important;color:var(--cream)!important;
  border:1px solid rgba(246,242,233,.38)!important}
.single-price-plan .plan-button .btn:hover,.btn-bordered:hover{
  border-color:var(--cream)!important;color:var(--cream)!important;background:transparent!important}
.col-md-6:last-child .single-price-plan .plan-button .btn{background:var(--gold)!important;
  color:var(--navy)!important;border-color:var(--gold)!important}
.col-md-6:last-child .single-price-plan .plan-button .btn:hover{background:#e3c98d!important;
  color:var(--navy)!important;border-color:#e3c98d!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:transparent!important;color:var(--cream)!important;
  border:1px solid rgba(246,242,233,.42)!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-color:var(--gold)!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:22px 0 4px}
.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}
#contact-form input,#contact-form textarea{width:100%;background:transparent!important;
  border:0!important;border-bottom:1px solid rgba(246,242,233,.28)!important;
  border-radius:0!important;color:var(--cream)!important;font-family:"DM Sans",sans-serif;
  font-size:1.02rem!important;padding:10px 0!important;min-height:46px}
#contact-form textarea{min-height:96px;line-height:1.55}
#contact-form input:focus,#contact-form textarea:focus{
  border-bottom-color:var(--gold)!important;box-shadow:none!important;outline:none}
#contact-form ::placeholder{color:#5f6a83!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 centred 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 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}
.gs-shot__stage{border-radius:12px;overflow:hidden;background:#0e1730;
  border:1px solid rgba(246,242,233,.18);
  box-shadow:0 44px 80px -28px rgba(3,6,14,.8)}
.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. */
.navbar .navbar-nav.items .nav-item .nav-link{padding-left:11px;padding-right:11px}
@media (min-width:992px) and (max-width:1399px){.navbar .navbar-nav.icons{display:none}}

/* STATS beside the form */
.gs-stats{margin-top:36px}
.gs-stat{padding:0 0 24px;margin-bottom:24px;border-bottom:1px solid var(--line-soft)}
.gs-stat:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.gs-stat__n{display:block;font-family:"Lorin",sans-serif;font-weight:800;
  font-size:3.2rem;line-height:1;color:var(--gold);margin-bottom:10px}
.gs-stat p{color:var(--cream)!important;font-size:1.05rem;margin:0 0 8px;max-width:40ch}
.gs-stat cite{display:block;font-style:normal;font-family:"DM Mono",ui-monospace,monospace;
  font-size:11px;line-height:1.5;letter-spacing:.03em;color:var(--faint);max-width:46ch}

/* 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.
   ============================================================ */
.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;
  opacity:0;transition:opacity .7s ease}
.gs-shot__stage img.gs-shot__slide.is-on{opacity:1}
.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}
}