/* ============================================================
   Gudgie Digital — brand takeover layer (LIGHT theme)
   Loaded AFTER ogency.css + ogency-light.css. Overrides the
   template's OWN variables (font + accent) and adds the hex
   hero backing, centred nav, brand icons and placeholders.
   The template stylesheets are left untouched.
   ============================================================ */

/* ---------- Satoshi (self-hosted) ---------- */
@font-face { font-family:'Satoshi'; src:url('../fonts/Satoshi-Light.otf')   format('opentype'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Satoshi'; src:url('../fonts/Satoshi-Regular.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Satoshi'; src:url('../fonts/Satoshi-Medium.otf')  format('opentype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Satoshi'; src:url('../fonts/Satoshi-Bold.otf')    format('opentype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Satoshi'; src:url('../fonts/Satoshi-Black.otf')   format('opentype'); font-weight:900; font-style:normal; font-display:swap; }

/* ---------- Brand tokens on the template's own variables ---------- */
:root {
  --ogency-font: 'Satoshi', ui-sans-serif, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --heading-font: 'Satoshi', ui-sans-serif, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --ogency-base: #4E6A8C;      /* Gudgie brand primary — slate-blue from the logo */
  --ogency-base-rgb: 78, 106, 140;
  --gd-amber: #D19C45;
  --gd-ink: #1F2D3F;
  /* DS §4.1: ink is a cool slate, never pure black. The light theme maps the
     "ink" role onto --ogency-white (#000) — retint it to the DS slate ink. */
  --ogency-white: #1F2D3F;
  --ogency-white-rgb: 31, 45, 63;
}
h1, h2, h3, h4, h5, h6 { letter-spacing: -0.01em; }

/* ---------- Logo sizing (wordmark, not a 34px square) ---------- */
.main-menu__logo img { width: auto; height: 30px; }
.mobile-nav__content .logo-box img { width: auto; height: 32px; }
/* the light theme makes the mobile menu panel light (--ogency-black2: #f1f1f1),
   but the template inks its links white — unreadable. Set them slate, and give
   the item separators a faint slate line (the template's white borders vanish). */
.mobile-nav__content .main-menu__list li > a { color: var(--gd-ink); }
.mobile-nav__content .main-menu__list li:not(:last-child) { border-bottom-color: rgba(31,45,63,0.12); }
.main-footer__logo img { width: auto; height: 42px; }

/* ============================================================
   Centred navbar (desktop) — logo left, menu centred
   ============================================================ */
@media (min-width: 1200px) {
  .main-menu .container-fluid,
  .stricky-header .container-fluid { justify-content: center; }
  .main-menu__logo { position: absolute; left: 40px; top: 50%; transform: translateY(-50%); padding: 0; }
  .main-menu__nav { padding-left: 0; }
  .main-menu__right { position: absolute; right: 40px; top: 50%; transform: translateY(-50%); }
}

/* ============================================================
   Hero — light ground + animated hex backing
   ============================================================ */
.hero-banner { position: relative; overflow: hidden; background-color: #EAEEF4; padding: 175px 0 120px; }
@media (max-width: 991px) { .hero-banner { padding: 140px 0 90px; } }
@media (max-width: 767px) { .hero-banner { padding: 120px 0 70px; } }
.gd-hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(1100px 600px at 80% 12%, rgba(78,106,140,0.16), transparent 60%),
    radial-gradient(900px 700px at 4% 96%, rgba(209,156,69,0.10), transparent 55%),
    linear-gradient(135deg, #F6F8FB 0%, #E7ECF3 58%, #DCE4EE 100%);
}
.gd-hero-hex {
  position: absolute; inset: -104px;
  background-image: url('../images/brand/hex-pattern-tile.svg');
  background-repeat: repeat;
  background-size: 120px 104px;
  opacity: 0.55;
  animation: gd-hex-pan 60s linear infinite;
  -webkit-mask-image: radial-gradient(120% 100% at 72% 28%, #000 35%, transparent 85%);
          mask-image: radial-gradient(120% 100% at 72% 28%, #000 35%, transparent 85%);
  pointer-events: none;
}
@keyframes gd-hex-pan { from { background-position: 0 0; } to { background-position: 360px 312px; } }
@media (prefers-reduced-motion: reduce) { .gd-hero-hex { animation: none; } }
.hero-banner .container { position: relative; z-index: 2; max-width: 1200px; }
.hero-banner__content__title {
  color: var(--gd-ink);
  border-bottom: none;
  text-transform: none;
  font-size: clamp(40px, 6vw, 90px);
  line-height: 1.03;
  margin-bottom: 24px; padding-bottom: 0;
}
/* Rotating headline — always two lines: "[verb] your" / "[noun]".
   Neutralise the template's decorative title-span styling (100px accent, weight
   500, 30px margin, 17px offset) so our verb + "your" read identically to the
   plain title text; only the noun is re-styled as the accent. */
.hero-banner__content__title span {
  color: inherit; font-size: inherit; font-weight: inherit;
  line-height: inherit; letter-spacing: inherit;
  margin: 0; top: 0; position: static; display: inline;
}
/* line 1 = "[verb] your", line 2 = "[noun]" — each on its own line, never wraps */
.hero-banner__content__title .gd-hero-l1 { display: block; white-space: nowrap; }
.hero-banner__content__title .gd-type-noun { display: block; white-space: nowrap; }
/* verb + your are inline-blocks so they can crossfade / glide */
.hero-banner__content__title .gd-type-verb,
.hero-banner__content__title .gd-hero-your { display: inline-block; }
.hero-banner__content__title .gd-type-verb { transition: opacity .28s ease; }
/* the noun keeps the accent colour + heavier weight, and is uppercased for emphasis
   (WEB PRESENCE / OPERATIONS / SYSTEMS) while "Modernise your" stays in normal case */
.hero-banner__content__title .gd-type-noun {
  color: var(--ogency-base); font-weight: 800; text-transform: uppercase;
  transition: opacity .28s ease;
}
/* Gudgie Digital logo lockup — real logo (mark + "Gudgie") with the typed word where "Digital" sat.
   Typed word is heavier + amber to emphasise it against the slate logo wordmark. */
/* Lockup: logo hex symbol + "Gudgie" and the typed word both in Satoshi
   (same font-size/weight -> identical height & baseline; only colour differs). */
.hero-banner__brand { display: inline-flex; align-items: center; gap: 12px; margin: 4px 0 34px; }
.hero-banner__brand__mark { height: clamp(40px, 5vw, 56px); width: auto; flex: none; }
.hero-banner__brand__word {
  font-family: var(--ogency-font); font-weight: 500;
  font-size: clamp(22px, 3vw, 32px); line-height: 1;
  color: #405978; letter-spacing: -0.01em; text-transform: none;
}
.hero-banner__brand__type { color: #D19C45; position: relative; white-space: nowrap; }
.hero-banner__brand__type .wrap-border {
  display: inline-block; width: 2px; height: 0.9em; margin-left: 3px;
  background: #D19C45; vertical-align: middle; animation: blink 0.7s infinite;
}

/* ============================================================
   Inner-page header band — light, with hex texture
   ============================================================ */
.page-header { background-color: #E7ECF3; }
.page-header__bg {
  background-image: url('../images/brand/hex-pattern-tile.svg');
  background-repeat: repeat;
  background-size: 120px 104px;
  background-position: center;
  mix-blend-mode: normal;
  opacity: 0.5;
}
.page-header__title { color: var(--gd-ink); }
/* template's dark-section transition shape reads as a grey smudge on the light theme */
.page-header__overlay { display: none; }
.page-header__breadcrumb li,
.page-header__breadcrumb li a,
.page-header__breadcrumb li span { color: var(--gd-ink); opacity: 0.8; }

/* ============================================================
   Service-page hero — home hero look (gradient + animated hex),
   ~half height, breadcrumb + rotating final word in the H1,
   static "Gudgie [service]" logo lockup as the sub-headline
   ============================================================ */
.hero-banner--service { padding: 132px 0 76px; }
@media (max-width: 991px) { .hero-banner--service { padding: 112px 0 60px; } }
@media (max-width: 767px) { .hero-banner--service { padding: 100px 0 50px; } }
/* tighten the gap between the (now shorter) hero and the content below it,
   and close the oversized gap between services-details and the FAQ
   (was 120 bottom + 120 top = 240; now 60 + 60 = 120) */
.services-details { padding-top: 10px; padding-bottom: 60px; }
.faq-page { padding-top: 60px; }
/* contact form section — template shipped 120 top/bottom; tighten to 60/60 */
.contact-two { padding-top: 60px; padding-bottom: 60px; }
/* the coloured service icons must show their true navy/amber — the template's
   luminosity blend (built for a greyscale placeholder) renders them as greys */
.services-details__benefit__img img { mix-blend-mode: normal; }
/* .page-wrapper shipped overflow:hidden; overflow:clip clips horizontal overflow
   the same way but without creating a scroll container (keeps anchored/absolute
   positioning working cleanly for descendants). */
.page-wrapper { overflow: clip; }
/* breadcrumb sits above the headline, inked for the light background */
.hero-banner--service .page-header__breadcrumb { margin: 0 0 18px; }
.hero-banner--service .page-header__breadcrumb li:not(:last-of-type)::after { color: var(--gd-ink); opacity: 0.55; }
/* headline: fixed lead in ink, rotating final word crossfades in the slate
   accent — heavier weight + uppercase, matching the home hero's revolving word */
.hero-banner--service .hero-banner__content__title { font-size: clamp(38px, 5.4vw, 78px); margin-bottom: 16px; }
/* two lines, always: static lead on line 1, revolving word on line 2 — so the
   "Gudgie X" lockup below stays put no matter how the revolving word changes */
.hero-banner--service .gd-svc-lead { display: block; white-space: nowrap; }
.hero-banner__content__title .gd-svc-rotate {
  display: block;
  color: var(--ogency-base); font-weight: 800; text-transform: uppercase;
  white-space: nowrap; transition: opacity .28s ease;
}

/* --- Sub-headline lockup as a service switcher (keeps the lockup identical,
   adds a small chevron; the menu drops the OTHER two services to navigate to) --- */
.hero-banner--service { overflow: visible; }          /* let the dropdown escape the hero */
.hero-banner--service .gd-hero-hex { inset: 0; }      /* self-clips its own tile now the hero doesn't */
.gd-brand-switch { position: relative; display: inline-block; margin: 2px 0 0; }
.gd-brand-switch__trigger {
  display: inline-flex; align-items: center; gap: 12px;
  background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer;
}
.gd-brand-switch__chev {
  width: 9px; height: 9px; flex: none; margin-left: 3px;
  border-right: 2.5px solid #405978; border-bottom: 2.5px solid #405978;
  transform: translateY(-2px) rotate(45deg); transition: transform .25s ease;
}
.gd-brand-switch.is-open .gd-brand-switch__chev { transform: translateY(1px) rotate(-135deg); }
/* transparent menu — just the other two service words in amber, left edge
   aligned (via JS) to the first letter of the current secondary word */
.gd-brand-switch__menu {
  list-style: none; margin: 0; padding: 0;
  position: absolute; top: 100%; left: 0; z-index: 30;   /* JS sets precise top/left */
  background: transparent; box-shadow: none;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.gd-brand-switch.is-open .gd-brand-switch__menu { opacity: 1; visibility: visible; transform: none; }
/* even vertical rhythm — word→option-1 gap equals option-1→option-2 gap
   (menu top is anchored to the word's bottom by JS; line-height:1 keeps it exact) */
.gd-brand-switch__menu li { margin-top: 9px; }
.gd-brand-switch__menu a {
  display: block; padding: 0; text-decoration: none; white-space: nowrap;
  font-family: var(--ogency-font); font-weight: 500; letter-spacing: -0.01em; line-height: 1;
  font-size: clamp(22px, 3vw, 32px); color: #D19C45; transition: opacity .2s ease;
}
.gd-brand-switch__menu a:hover { opacity: 0.65; }

/* ============================================================
   Brand icons (duotone SVGs, baked slate)
   ============================================================ */
.gd-icon { width: 54px; height: 54px; display: inline-block; vertical-align: middle; }
.feature-one__item__content--icon .gd-icon { width: 26px; height: 26px; }
.services-details__points__icon .gd-icon { width: 46px; height: 46px; }

/* ============================================================
   Branded placeholder imagery
   ============================================================ */
.gd-ph { background: #E7ECF3; object-fit: cover; }

/* 'who we are' visual — give the frame a real box (the template frame is a 0-size
   luminosity circle). Rounded rectangle, 3:2 like the card animations, responsive. */
.about-one__thumb__img {
  display: block; width: 100%; max-width: 540px;
  border-radius: 0; background: none; overflow: visible;
}
/* the 'who we are' visual is now an embed; hide the template's decorative circles */
.about-one__thumb__round--top, .about-one__thumb__round--bottom { display: none; }
/* centre both columns' content vertically in the 'who we are' row */
.about-one .row { align-items: center; }
.about-one__thumb { margin: 0; }
/* section rhythm — see consolidated 55/55 block at end of file */

/* Repurposed "video" band -> dark branded statement banner (accent) */
.gd-banner {
  position: relative; border-radius: 16px; overflow: hidden;
  background: linear-gradient(135deg, #24374e 0%, #18222f 100%);
  padding: 90px 40px; text-align: center;
}
.gd-banner__hex {
  position: absolute; inset: -104px;
  background: url('../images/brand/hex-pattern-tile.svg') repeat;
  background-size: 120px 104px; opacity: 0.30;
  -webkit-mask-image: radial-gradient(80% 120% at 50% 0%, #000 30%, transparent 80%);
          mask-image: radial-gradient(80% 120% at 50% 0%, #000 30%, transparent 80%);
}
.gd-banner__inner { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; }
.gd-banner__inner h2 { color: #fff; }
.gd-banner__inner p { color: rgba(255,255,255,0.72); margin: 0 auto 26px; }

/* "Start with an audit" entry-offer — reuses the dark banner treatment */
.gd-audit .gd-banner__inner { max-width: 860px; }
.gd-audit__eyebrow {
  color: var(--gd-amber); text-transform: uppercase;
  letter-spacing: .14em; font-size: 13px; font-weight: 700; margin: 0 0 14px;
}
.gd-audit__steps {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 12px 16px; margin: 4px auto 34px; max-width: 780px;
}
.gd-audit__step {
  display: inline-flex; align-items: center; gap: 10px;
  color: #fff; font-weight: 600; font-size: 15px; text-align: left;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px; padding: 9px 20px 9px 9px;
}
.gd-audit__step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  background: var(--gd-amber); color: #1F2D3F; font-weight: 800; font-size: 14px;
}
.gd-audit__step-arrow { color: rgba(255,255,255,0.4); font-size: 18px; display: inline-flex; }
@media (max-width: 575px) {
  .gd-audit__steps { flex-direction: column; }
  .gd-audit__step { width: 100%; justify-content: center; }
  .gd-audit__step-arrow { transform: rotate(90deg); }
}

/* Process (repurposed project list) — keep numbers visible */
.gd-process .project-one__item { cursor: default; }

/* Marquee divider — drop the template's faint grey top border */
.slider-text-one { border-top: none; }

/* DS §4.4: dark surfaces are slate, not pure black. Retint the near-black footer. */
.main-footer { background-color: #24374E; }

/* ============================================================
   Centred brand footer — a lighter, more minimal footer:
   logo, short tagline, a modest email link (the template's was
   a 60px headline), one centred nav row, then copyright.
   Applied via .main-footer--center on the <footer>.
   ============================================================ */
.main-footer--center { padding: 58px 0 34px; text-align: center; }
.main-footer--center .main-footer__center {
  display: flex; flex-direction: column; align-items: center;
}
.main-footer--center .main-footer__logo { display: inline-block; margin: 0 0 20px; }
.main-footer--center .main-footer__logo img { height: 42px; width: auto; }
.main-footer--center .main-footer__tagline {
  font-size: 18px; font-weight: 400; letter-spacing: -0.2px;
  color: rgba(255,255,255,0.72); margin: 0 0 6px;
}
.main-footer--center .main-footer__email {
  display: inline-block; font-size: 22px; font-weight: 700; letter-spacing: -0.5px;
  color: #fff; margin: 0 0 26px; transition: color 0.2s ease;
}
.main-footer--center .main-footer__email:hover { color: var(--ogency-base); }
.main-footer--center .main-footer__nav {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px;
  list-style: none; margin: 0 0 28px; padding: 0;
}
.main-footer--center .main-footer__nav li { line-height: 1; }
.main-footer--center .main-footer__nav a {
  color: rgba(255,255,255,0.85); font-size: 14px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 1.2px; transition: color 0.2s ease;
}
.main-footer--center .main-footer__nav a:hover { color: var(--ogency-base); }
.main-footer--center .main-footer__copyright {
  width: 100%; max-width: 460px; margin: 0; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.12);
  font-size: 14px; color: rgba(255,255,255,0.6);
}
@media (max-width: 767px) {
  .main-footer--center { padding: 46px 0 30px; }
  .main-footer--center .main-footer__email { font-size: 20px; }
  .main-footer--center .main-footer__nav { gap: 8px 18px; }
}

/* ============================================================
   Minimal primary-nav footer — the leanest option: a single
   horizontal bar (logo left, nav right) over a thin meta row
   (copyright left, email right). Applied via .main-footer--minimal.
   ============================================================ */
.main-footer--minimal { padding: 34px 0 28px; }
.main-footer--minimal .main-footer__bar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px 30px;
  padding-bottom: 22px; border-bottom: 1px solid rgba(255,255,255,0.12);
}
.main-footer--minimal .main-footer__logo { display: inline-block; }
.main-footer--minimal .main-footer__logo img { height: 34px; width: auto; }
.main-footer--minimal .main-footer__nav {
  display: flex; flex-wrap: wrap; gap: 8px 26px; list-style: none; margin: 0; padding: 0;
}
.main-footer--minimal .main-footer__nav li { line-height: 1; }
.main-footer--minimal .main-footer__nav a {
  color: rgba(255,255,255,0.85); font-size: 14px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 1.2px; transition: color 0.2s ease;
}
.main-footer--minimal .main-footer__nav a:hover { color: var(--ogency-base); }
.main-footer--minimal .main-footer__meta {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px 20px; margin-top: 20px;
}
.main-footer--minimal .main-footer__copyright {
  margin: 0; font-size: 14px; color: rgba(255,255,255,0.6);
}
.main-footer--minimal .main-footer__email {
  font-size: 15px; font-weight: 600; letter-spacing: -0.2px;
  color: #fff; transition: color 0.2s ease;
}
.main-footer--minimal .main-footer__email:hover { color: var(--ogency-base); }
@media (max-width: 575px) {
  .main-footer--minimal .main-footer__bar { justify-content: center; text-align: center; }
  .main-footer--minimal .main-footer__nav { justify-content: center; width: 100%; }
  .main-footer--minimal .main-footer__meta { justify-content: center; text-align: center; }
}

/* Service-page header animation — isolated in an iframe (each embed reuses .gw/.ga/.gb
   scope classes + generic keyframes that would clash with the homepage embeds and
   animate.css, so full isolation is the clean route). Native 770×513; frame keeps the
   aspect ratio and carries the brand drop shadow. */
.gd-embed-frame {
  position: relative; width: 100%; aspect-ratio: 770 / 513;
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 20px 50px rgba(31,45,63,.16);
}
/* The embed art is a fixed 770x513 canvas that renders cleanly at native size
   (no bottom strip). Rather than stretch it inside the iframe, we keep the iframe
   at native size and scale the WHOLE iframe to the frame width via gd-embed-fit.js,
   so the art fills the column with no empty strip. */
.gd-embed-frame iframe { position: absolute; top: 0; left: 0; width: 770px; height: 513px; transform-origin: top left; border: 0; display: block; }
.services-details__thumb { background-color: transparent; margin-bottom: 30px; }

/* CTA brand mark */
.cta-one__author--wrap img { border-radius: 0; }

/* ============================================================
   Header "Get in touch" CTA — compact filled button in the
   main-menu__right slot (clones into the sticky header via JS)
   ============================================================ */
.main-menu__cta { padding: 12px 30px 13px; font-size: 15px; line-height: 1; }
/* space it from the burger on tablet/mobile where both are visible */
@media (max-width: 1199px) { .main-menu__cta { margin-right: 18px; } }
@media (max-width: 480px)  { .main-menu__cta { padding: 10px 20px 11px; font-size: 14px; margin-right: 14px; } }

/* ============================================================
   Button hover — all buttons fill WHITE with brand-blue text,
   matching the service-card "Explore" buttons (.gd-offer__cta).
   The template's default fills dark/slate; override the fill.
   ============================================================ */
.ogency-btn::after { background: #fff; }
.ogency-btn:hover { color: #405978; }

/* ============================================================
   Hero — subline under the brand lockup
   ============================================================ */
.hero-banner__content__lead {
  color: rgba(31,45,63,0.74);
  font-size: clamp(17px, 1.8vw, 21px);
  line-height: 1.5; font-weight: 500;
  max-width: 620px; margin: 0;
}

/* ============================================================
   Final CTA — clickable heading + email address
   ============================================================ */
.cta-one .section-title__title a { color: inherit; transition: color .3s ease; }
.cta-one .section-title__title a:hover { color: var(--ogency-base); }
.cta-one__email {
  display: inline-block; margin-top: 22px;
  color: var(--ogency-base); font-weight: 700;
  font-size: clamp(18px, 2vw, 22px); letter-spacing: -0.01em;
  transition: color .3s ease;
}
.cta-one__email:hover { color: var(--gd-amber); }

/* ============================================================
   Hero — fade the bottom into the white section below
   ============================================================ */
.hero-banner::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 220px;
  background: linear-gradient(to bottom, rgba(246,248,251,0) 0%, #ffffff 100%);
  z-index: 1; pointer-events: none;
}

/* ============================================================
   Feature hover pop-up — pin "Read More" to the card bottom
   ============================================================ */
/* icon badge -> white fill with the brand blue as the circle outline */
.feature-one__item__content--icon { background-color: #fff; border: 2px solid var(--ogency-base); }
/* the 'Gudgie X' title slate -> transparent (was a solid white block) */
.feature-one__item__content { background-color: transparent; }

/* Read More anchored to the bottom of the hover pop-up (the nested white element) -
   absolute so it's identical across all three cards, matched to the pop-up padding per breakpoint */
.feature-one__item__hover-content { display: block; }
/* remove the template's grey divider line under the hover text */
.feature-one__item__hover-content--text { border-bottom: none; padding-bottom: 0; }
.feature-one__item__hover-content__btn { position: absolute; left: 40px; bottom: 25px; margin-top: 0; }
@media (min-width: 992px) and (max-width: 1199px) { .feature-one__item__hover-content__btn { left: 20px; bottom: 20px; } }
@media (min-width: 768px) and (max-width: 991px)  { .feature-one__item__hover-content__btn { left: 25px; bottom: 25px; } }
@media (max-width: 767px)                          { .feature-one__item__hover-content__btn { left: 30px; bottom: 25px; } }

/* ============================================================
   What we offer — three equal tall cards (carousel on mobile)
   ============================================================ */
.gd-offer-carousel { margin-top: 10px; }
.gd-offer-carousel .owl-stage { display: flex; }
.gd-offer-carousel .owl-item { display: flex; height: auto; }
.gd-offer-carousel .item { display: flex; width: 100%; }
.gd-offer {
  display: flex; flex-direction: column; width: 100%;
  background: #fff; border: 1px solid #E4E9F0; border-radius: 18px;
  padding: 46px 36px; box-shadow: 0 12px 32px rgba(31,45,63,.06);
  transition: box-shadow .3s ease, transform .3s ease;
}
.gd-offer:hover { box-shadow: 0 22px 50px rgba(31,45,63,.13); transform: translateY(-5px); }
.gd-offer__icon { width: 66px; height: 66px; margin-bottom: 24px; }
/* animation folded into the offer-card heading (moved from the old feature cards) */
.gd-offer__media { width: 100%; margin-bottom: 22px; }
.gd-offer__title { font-size: 26px; font-weight: 800; color: var(--gd-ink); margin: 0 0 10px; }
/* reusable brand lockup — replaces a "Gudgie X" text mention with the logo */
.gd-lockup { display: inline-flex; align-items: center; gap: 8px; line-height: 1; vertical-align: middle; }
.gd-lockup__mark { height: 1.15em; width: 1.01em !important; flex: none; }
.gd-lockup__word { font-weight: 500; color: #405978; letter-spacing: -0.01em; text-transform: none; }
.gd-lockup__word em { font-style: normal; font-weight: 500; color: #D19C45; }
/* white-on-slate variant — for use inside filled (slate) buttons */
.gd-lockup--onslate .gd-lockup__mark { filter: brightness(0) invert(1); }
.gd-lockup--onslate .gd-lockup__word { color: #fff; }
.gd-lockup--onslate .gd-lockup__word em { color: #D19C45; }
.gd-offer { text-align: center; }   /* centre the copy now the title is gone */
.gd-offer__text { color: #5d5d5d; margin: 0 0 22px; }
.gd-offer__list { list-style: none; padding: 0; margin: 0 0 30px; }
.gd-offer__list li {
  display: flex; align-items: center; justify-content: center; gap: 12px; padding: 14px 0;
  border-top: 1px solid #EDF1F6; color: var(--gd-ink); font-weight: 600; font-size: 16px;
}
.gd-offer__list li .fa { color: var(--ogency-base); font-size: 15px; }
.gd-offer__cta {
  margin-top: auto; align-self: center;          /* centre the button in its card */
  padding: 14px 26px; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center;   /* vertically centre "Explore" + logo */
}
/* keep the logo lockup tight inside the button */
.gd-offer__cta .gd-lockup { gap: 5px; margin-left: 5px; }
.gd-offer__cta .gd-lockup__mark { height: 1.05em; width: 0.92em !important; }
/* hover: button turns white; "Explore" + logo flip to the dark/slate lockup */
.gd-offer__cta::after { background: #fff; }
.gd-offer__cta:hover { color: #405978; }
.gd-offer__cta:hover .gd-lockup__word { color: #405978; }
.gd-offer__cta:hover .gd-lockup__mark { filter: none; }
.gd-offer-carousel .owl-dots { text-align: center; margin-top: 34px; }
.gd-offer-carousel .owl-dots .owl-dot span {
  width: 10px; height: 10px; background: #C9D2DE; border-radius: 50%;
  display: inline-block; margin: 0 5px; transition: background .2s;
}
.gd-offer-carousel .owl-dots .owl-dot.active span { background: var(--ogency-base); }
@media (min-width: 992px) { .gd-offer-carousel .owl-dots { display: none; } }

/* ============================================================
   Why choose — static, portrait image (no rotation)
   ============================================================ */
.why-choose__image__shape img {
  animation: none !important;
  width: 460px; max-width: 100%; height: 560px;
  object-fit: cover; border-radius: 18px;
}
@media (max-width: 575px) { .why-choose__image__shape img { height: 420px; } }

/* ============================================================
   Gudgie Web card — animated "Build -> Found -> Brand" embed
   (design-system component, scoped under .gd1c; native 400x266,
   scaled to fit the card image slot; all three cards equal height)
   ============================================================ */
.feature-one__item__img--embed {
  aspect-ratio: 3 / 2; display: flex; align-items: center; justify-content: center;
  overflow: hidden; padding: 6px; background: #fff;
}
.gd-embed { position: relative; width: 100%; }
/* replay control — bottom-right of each animation (sits in the unscaled wrapper) */
.gd-replay {
  position: absolute; right: 12px; bottom: 12px; z-index: 6;
  width: 32px; height: 32px; padding: 0; border-radius: 50%;
  background: rgba(255,255,255,0.92); border: 1px solid #E4E9F0;
  box-shadow: 0 2px 8px rgba(31,45,63,0.12);
  display: flex; align-items: center; justify-content: center;
  color: #405978; cursor: pointer; opacity: 1;
  transition: opacity .25s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.gd-replay:hover { background: #fff; transform: scale(1.08); box-shadow: 0 4px 12px rgba(31,45,63,0.18); }
.gd-replay:active { transform: scale(0.96); }
.gd-replay svg { width: 15px; height: 15px; display: block; }
/* while the animation is running, the replay is hover-only; once it ends it stays visible */
.gd-playing .gd-replay { opacity: 0; pointer-events: none; }
.gd-playing:hover .gd-replay { opacity: 1; pointer-events: auto; }
.gd-embed > .gd1c, .gd-embed > .ga, .gd-embed > .gb, .gd-embed > .gk { max-width: none; position: absolute; top: 0; left: 0; transform-origin: top left; }
.gd-embed > .gd1c, .gd-embed > .ga, .gd-embed > .gb { width: 400px; }
.gd-embed > .gk { width: 540px; }

.gd1c{
  --gd1c-accent:#B8822F;
  --s900:#1F2D3F; --s800:#2A3B51; --s700:#35475E; --s600:#405978;
  --s500:#5A7190; --s400:#8395AC; --s300:#AFBBCB; --s200:#D4DBE5;
  --s100:#E9EDF3; --s50:#F4F6FA; --paper:#FBFAF7; --success:#3E8F5C;
  position:relative; width:400px; height:266px; max-width:100%;
  border-radius:12px; overflow:hidden; background:var(--s50);
  box-shadow:0 14px 34px rgba(31,45,63,.14);
  font-family:'Satoshi',ui-sans-serif,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
}
.gd1c svg{display:block;}
.gd1c .s1, .gd1c .s2{position:absolute; inset:0; opacity:0;}
.gd1c .logo{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:12px; opacity:1;}
.gd1c .card{position:absolute; left:22px; top:28px; width:356px; height:210px; background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 12px 28px rgba(31,45,63,.13);}
.gd1c .chrome{height:30px; display:flex; align-items:center; gap:10px; padding:0 14px; border-bottom:1px solid var(--s100);}
.gd1c .dots{display:flex; gap:6px;}
.gd1c .dots span{width:9px; height:9px; border-radius:50%; background:#D4DBE5;}
.gd1c .urlbar{flex:1; height:15px; border-radius:5px; background:var(--s50); border:1px solid var(--s100);}
.gd1c .body{padding:17px 19px; display:flex; flex-direction:column; gap:17px;}
.gd1c .nav{display:flex; justify-content:space-between; align-items:center;}
.gd1c .brand{display:flex; align-items:center; gap:6px;}
.gd1c .brand-name{font-weight:900; font-size:13px; letter-spacing:-.02em; color:var(--s900);}
.gd1c .links{display:flex; align-items:center; gap:10px;}
.gd1c .links a{font-size:8px; font-weight:600; color:var(--s500); text-decoration:none;}
.gd1c .links .btn{font-weight:700; color:var(--paper); background:var(--s800); padding:3px 8px; border-radius:5px;}
.gd1c .hero{display:flex; gap:15px; align-items:stretch;}
.gd1c .hero-l{flex:1.1; display:flex; flex-direction:column; justify-content:center;}
.gd1c .eyebrow{font-size:7px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--gd1c-accent);}
.gd1c .headline{margin-top:6px; font-weight:900; font-size:18px; line-height:1.06; letter-spacing:-.03em; color:var(--s900);}
.gd1c .cta{margin-top:12px; align-self:flex-start; display:inline-flex; align-items:center; gap:6px; font-size:9px; font-weight:700; color:var(--paper); background:var(--s800); padding:6px 12px; border-radius:6px; box-shadow:0 3px 8px rgba(31,45,63,.18);}
.gd1c .tile{flex:.9; min-height:104px; border-radius:10px; background:linear-gradient(150deg,#35475E,#1B2735); display:flex; align-items:center; justify-content:center; box-shadow:inset 0 1px 0 rgba(255,255,255,.07); overflow:hidden;}
.gd1c .search{position:absolute; left:62px; top:95px; width:76px; height:76px;}
.gd1c .search-inner{position:absolute; inset:0; background:#fff; border-radius:20px; box-shadow:0 10px 24px rgba(31,45,63,.15); display:flex; align-items:center; justify-content:center;}
.gd1c .search-inner svg{width:38px; height:38px; color:var(--s700);}
.gd1c .ripple{position:absolute; left:62px; top:95px; width:76px; height:76px; border-radius:24px; border:2.5px solid var(--gd1c-accent); opacity:0;}
.gd1c .cursor{position:absolute; left:120px; top:150px; z-index:7;}
.gd1c .conn{position:absolute; left:152px; top:131px; width:92px; height:12px;}
.gd1c .conn-line{position:absolute; left:0; top:5px; height:2px; width:82px; border-radius:2px; background:var(--s300); transform:scaleX(0); transform-origin:left;}
.gd1c .conn-caret{position:absolute; right:0; top:-1px; width:15px; height:15px; color:var(--s400); opacity:0;}
.gd1c .rank{position:absolute; left:250px; top:106px; display:flex; align-items:center; gap:6px;}
.gd1c .rank-n{font-weight:900; font-size:54px; line-height:1; letter-spacing:-.03em; color:var(--gd1c-accent);}
.gd1c .rank svg{width:30px; height:30px; color:var(--success);}
.gd1c .logo-word{font-weight:500; font-size:26px; letter-spacing:-.01em; color:#405978;}
.gd1c .logo-word b{font-weight:500; color:#D19C45;}

@keyframes gd1cRiseSm{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@keyframes gd1cPop{from{opacity:0;transform:scale(.72)}to{opacity:1;transform:scale(1)}}
@keyframes gd1cSceneOut{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.97)}}
@keyframes gd1cLogoIn{from{opacity:0;transform:scale(.92) translateY(7px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes gd1cPress{0%,100%{transform:scale(1)}45%{transform:scale(.9)}}
@keyframes gd1cRing{0%{opacity:.55;transform:scale(.55)}100%{opacity:0;transform:scale(1.55)}}
@keyframes gd1cSweep{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes gd1cFade{from{opacity:0}to{opacity:1}}
@keyframes gd1cCursor{0%{opacity:0;transform:translate(16px,16px) scale(1)}45%{opacity:1;transform:translate(0,0) scale(1)}60%{transform:translate(0,0) scale(.85)}78%{transform:translate(0,0) scale(1)}100%{opacity:1;transform:translate(0,0) scale(1)}}

.gd1c.is-playing .s1        {animation:gd1cSceneOut .45s cubic-bezier(.22,1,.36,1) 2.95s both;}
.gd1c.is-playing .card      {animation:gd1cRiseSm .55s cubic-bezier(.22,1,.36,1) .2s both;}
.gd1c.is-playing .nav       {animation:gd1cPop .45s cubic-bezier(.22,1,.36,1) .7s both;}
.gd1c.is-playing .eyebrow   {animation:gd1cRiseSm .4s cubic-bezier(.22,1,.36,1) 1.05s both;}
.gd1c.is-playing .headline  {animation:gd1cRiseSm .45s cubic-bezier(.22,1,.36,1) 1.4s both;}
.gd1c.is-playing .cta       {animation:gd1cRiseSm .45s cubic-bezier(.22,1,.36,1) 2.25s both;}
.gd1c.is-playing .tile      {animation:gd1cPop .5s cubic-bezier(.22,1,.36,1) 1.85s both;}
.gd1c.is-playing .s2          {animation:gd1cSceneOut .4s cubic-bezier(.22,1,.36,1) 4.45s both;}
.gd1c.is-playing .search      {animation:gd1cPop .42s cubic-bezier(.22,1,.36,1) 3.05s both;}
.gd1c.is-playing .search-inner{animation:gd1cPress .4s cubic-bezier(.2,.6,.2,1) 3.5s both;}
.gd1c.is-playing .ripple      {animation:gd1cRing .8s cubic-bezier(.2,.6,.2,1) 3.5s 1 forwards;}
.gd1c.is-playing .cursor      {animation:gd1cCursor .95s cubic-bezier(.22,1,.36,1) 3.15s both;}
.gd1c.is-playing .conn-line   {animation:gd1cSweep .45s cubic-bezier(.22,1,.36,1) 3.7s both;}
.gd1c.is-playing .conn-caret  {animation:gd1cFade .3s ease 4.02s both;}
.gd1c.is-playing .rank        {animation:gd1cPop .45s cubic-bezier(.22,1,.36,1) 3.8s both;}
.gd1c.is-playing .logo      {animation:gd1cLogoIn .5s cubic-bezier(.22,1,.36,1) 4.55s both;}

@media (prefers-reduced-motion:reduce){
  .gd1c.is-playing *{animation:none !important;}
}

/* ============================================================
   Gudgie Automate card — animated orchestration embed (.ga)
   ============================================================ */
.ga{
  --ga-accent:#B8822F;
  --s900:#1F2D3F; --s800:#2A3B51; --s700:#35475E; --s600:#405978;
  --s500:#5A7190; --s400:#8395AC; --s200:#D4DBE5; --s100:#E9EDF3;
  --s50:#F4F6FA; --paper:#FBFAF7; --success:#3E8F5C; --tan:#9A8561;
  position:relative; width:400px; height:266px; max-width:100%;
  border-radius:12px; overflow:hidden; background:var(--s50);
  box-shadow:0 14px 34px rgba(31,45,63,.14);
  font-family:'Satoshi',ui-sans-serif,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
}
.ga svg{display:block;}
.ga .s1{position:absolute; inset:0; opacity:0;}
.ga .logo{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:12px; opacity:1;}
.ga .wires{position:absolute; inset:0;}
.ga .wires path{stroke-linecap:round; fill:none;}
.ga .wires .base{stroke:var(--s200); stroke-width:2;}
.ga .wires .acc{stroke:var(--ga-accent); stroke-width:2;}
.ga .wires .draw{stroke-dasharray:1; stroke-dashoffset:1;}
.ga .chip{position:absolute; left:24px; width:94px; height:40px; background:#fff; border:1px solid var(--s100); border-radius:9px; box-shadow:0 3px 10px rgba(31,45,63,.06); display:flex; align-items:center; gap:8px; padding:0 10px;}
.ga .chip .ic{width:22px; height:22px; border-radius:6px; background:var(--s100); display:flex; align-items:center; justify-content:center; flex:none;}
.ga .chip .ic svg{width:13px; height:13px; color:var(--s600);}
.ga .chip span{font-size:9px; font-weight:700; color:var(--s700);}
.ga .c1{top:57px;} .ga .c2{top:114px;} .ga .c3{top:171px;}
.ga .hub{position:absolute; left:180px; top:104px; width:60px; height:60px; border-radius:16px; background:linear-gradient(150deg,#35475E,#1B2735); display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px rgba(31,45,63,.22); z-index:3;}
.ga .hub svg{width:30px; height:34px; color:rgba(244,246,250,.9);}
.ga .hubring{position:absolute; left:180px; top:104px; width:60px; height:60px; border-radius:16px; border:2px solid var(--ga-accent); opacity:0; z-index:2;}
.ga .out{position:absolute; left:282px; top:104px; width:96px; height:60px; background:#fff; border:1px solid var(--s100); border-radius:12px; box-shadow:0 8px 20px rgba(31,45,63,.12); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; z-index:3;}
.ga .out .row{display:flex; align-items:center; gap:4px;}
.ga .out .row svg{width:14px; height:14px; color:var(--success);}
.ga .out .n{font-weight:900; font-size:21px; letter-spacing:-.02em; color:var(--s900);}
.ga .out .cap{font-size:7.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--tan);}
.ga .check{position:absolute; left:366px; top:98px; width:20px; height:20px; border-radius:50%; background:var(--success); display:flex; align-items:center; justify-content:center; box-shadow:0 3px 8px rgba(62,143,92,.35); opacity:0; z-index:4;}
.ga .check svg{width:12px; height:12px; color:#fff;}
.ga .logo-word{font-weight:500; font-size:26px; letter-spacing:-.01em; color:#405978;}
.ga .logo-word b{font-weight:500; color:#D19C45;}

@keyframes gaRiseSm{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@keyframes gaPop{from{opacity:0;transform:scale(.72)}to{opacity:1;transform:scale(1)}}
@keyframes gaSceneOut{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.97)}}
@keyframes gaLogoIn{from{opacity:0;transform:scale(.92) translateY(7px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes gaRing{0%{opacity:.55;transform:scale(.55)}100%{opacity:0;transform:scale(1.5)}}
@keyframes gaDraw{to{stroke-dashoffset:0}}
@keyframes gaNode{0%{opacity:0;transform:scale(0)}60%{opacity:1}100%{opacity:1;transform:scale(1)}}

.ga.is-playing .s1   {animation:gaSceneOut .45s cubic-bezier(.22,1,.36,1) 4.1s both;}
.ga.is-playing .c1   {animation:gaRiseSm .45s cubic-bezier(.22,1,.36,1) .3s both;}
.ga.is-playing .c2   {animation:gaRiseSm .45s cubic-bezier(.22,1,.36,1) .5s both;}
.ga.is-playing .c3   {animation:gaRiseSm .45s cubic-bezier(.22,1,.36,1) .7s both;}
.ga.is-playing .hub  {animation:gaPop .5s cubic-bezier(.22,1,.36,1) .95s both;}
.ga.is-playing .base1{animation:gaDraw .55s cubic-bezier(.22,1,.36,1) 1.35s forwards;}
.ga.is-playing .base2{animation:gaDraw .55s cubic-bezier(.22,1,.36,1) 1.45s forwards;}
.ga.is-playing .base3{animation:gaDraw .55s cubic-bezier(.22,1,.36,1) 1.55s forwards;}
.ga.is-playing .base4{animation:gaDraw .55s cubic-bezier(.22,1,.36,1) 1.75s forwards;}
.ga.is-playing .acc1 {animation:gaDraw .5s cubic-bezier(.22,1,.36,1) 2.05s forwards;}
.ga.is-playing .acc2 {animation:gaDraw .5s cubic-bezier(.22,1,.36,1) 2.15s forwards;}
.ga.is-playing .acc3 {animation:gaDraw .5s cubic-bezier(.22,1,.36,1) 2.25s forwards;}
.ga.is-playing .acc4 {animation:gaDraw .5s cubic-bezier(.22,1,.36,1) 2.55s forwards;}
.ga.is-playing .hubring{animation:gaRing .9s cubic-bezier(.2,.6,.2,1) 2.35s 1 forwards;}
.ga.is-playing .out  {animation:gaPop .5s cubic-bezier(.22,1,.36,1) 2.75s both;}
.ga.is-playing .check{animation:gaNode .4s cubic-bezier(.22,1,.36,1) 3.15s both;}
.ga.is-playing .logo {animation:gaLogoIn .5s cubic-bezier(.22,1,.36,1) 4.55s both;}
@media (prefers-reduced-motion:reduce){ .ga.is-playing *{animation:none !important;} }

/* ============================================================
   Gudgie Build card — animated bespoke-app embed (.gb)
   ============================================================ */
.gb{
  --gb-accent:#B8822F;
  --s900:#1F2D3F; --s800:#2A3B51; --s700:#35475E; --s400:#8395AC;
  --s300:#AFBBCB; --s200:#D4DBE5; --s100:#E9EDF3; --s50:#F4F6FA;
  --paper:#FBFAF7; --success:#3E8F5C;
  position:relative; width:400px; height:266px; max-width:100%;
  border-radius:12px; overflow:hidden; background:var(--s50);
  box-shadow:0 14px 34px rgba(31,45,63,.14);
  font-family:'Satoshi',ui-sans-serif,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
}
.gb svg{display:block;}
.gb .s1{position:absolute; inset:0; opacity:0;}
.gb .logo{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:12px; opacity:1;}
.gb .app{position:absolute; left:32px; top:34px; width:336px; height:198px; background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 12px 28px rgba(31,45,63,.13);}
.gb .grid{position:absolute; inset:0; background-image:radial-gradient(var(--s200) 1.1px, transparent 1.1px); background-size:13px 13px; opacity:.5;}
.gb .hdr{position:relative; height:32px; display:flex; align-items:center; gap:8px; padding:0 12px; border-bottom:1px solid var(--s100); background:#fff;}
.gb .hdr .app-ic{width:20px; height:20px; border-radius:6px; background:linear-gradient(150deg,#35475E,#1B2735); display:flex; align-items:center; justify-content:center; flex:none;}
.gb .hdr .app-ic svg{width:11px; height:13px; color:rgba(244,246,250,.9);}
.gb .hdr .title{width:68px; height:8px; border-radius:3px; background:var(--s700);}
.gb .hdr .spacer{flex:1;}
.gb .hdr .tag{font-size:8px; font-weight:800; letter-spacing:.04em; color:var(--paper); background:var(--gb-accent); padding:3px 8px; border-radius:5px;}
.gb .body{position:relative; padding:14px; display:flex; flex-direction:column; gap:12px;}
.gb .row{display:flex; gap:12px;}
.gb .mod{background:var(--s50); border:1px solid var(--s100); border-radius:8px;}
.gb .chart{flex:1.15; height:66px; padding:10px 11px; display:flex; align-items:flex-end; gap:6px;}
.gb .chart i{display:block; width:11px; border-radius:3px 3px 0 0; transform:scaleY(0); transform-origin:bottom;}
.gb .form{flex:1; height:66px; padding:11px; display:flex; flex-direction:column; justify-content:center; gap:8px;}
.gb .frow{display:flex; align-items:center; gap:7px;}
.gb .frow span{width:9px; height:9px; border-radius:3px; background:var(--s300); flex:none;}
.gb .frow .bar{height:6px; border-radius:3px; background:var(--s200); flex:1; transform:scaleX(0); transform-origin:left;}
.gb .table{height:46px; padding:9px 11px; display:flex; flex-direction:column; justify-content:center; gap:7px;}
.gb .table .bar{height:6px; border-radius:3px; background:var(--s200); transform:scaleX(0); transform-origin:left;}
.gb .table .bar.h{width:40%; background:var(--s300);}
.gb .live{position:absolute; right:12px; bottom:12px; display:flex; align-items:center; gap:5px; background:#fff; border:1px solid var(--s100); border-radius:999px; padding:3px 9px 3px 6px; box-shadow:0 2px 6px rgba(31,45,63,.07);}
.gb .live b{width:15px; height:15px; border-radius:50%; background:var(--success); display:flex; align-items:center; justify-content:center; flex:none;}
.gb .live b svg{width:10px; height:10px; color:#fff;}
.gb .live span{font-size:9px; font-weight:700; color:var(--s700); letter-spacing:.02em;}
.gb .logo-word{font-weight:500; font-size:26px; letter-spacing:-.01em; color:#405978;}
.gb .logo-word em{font-style:normal; font-weight:500; color:#D19C45;}

@keyframes gbRiseSm{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@keyframes gbPop{from{opacity:0;transform:scale(.72)}to{opacity:1;transform:scale(1)}}
@keyframes gbSceneOut{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.97)}}
@keyframes gbLogoIn{from{opacity:0;transform:scale(.92) translateY(7px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes gbBar{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes gbSweep{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.gb.is-playing .s1     {animation:gbSceneOut .45s cubic-bezier(.22,1,.36,1) 4.1s both;}
.gb.is-playing .app    {animation:gbRiseSm .55s cubic-bezier(.22,1,.36,1) .2s both;}
.gb.is-playing .hdr    {animation:gbPop .45s cubic-bezier(.22,1,.36,1) .6s both;}
.gb.is-playing .chart  {animation:gbPop .45s cubic-bezier(.22,1,.36,1) .95s both;}
.gb.is-playing .form   {animation:gbPop .45s cubic-bezier(.22,1,.36,1) 1.15s both;}
.gb.is-playing .table  {animation:gbPop .45s cubic-bezier(.22,1,.36,1) 1.35s both;}
.gb.is-playing .b1{animation:gbBar .4s cubic-bezier(.22,1,.36,1) 1.8s both;}
.gb.is-playing .b2{animation:gbBar .4s cubic-bezier(.22,1,.36,1) 1.95s both;}
.gb.is-playing .b3{animation:gbBar .4s cubic-bezier(.22,1,.36,1) 2.1s both;}
.gb.is-playing .b4{animation:gbBar .4s cubic-bezier(.22,1,.36,1) 2.25s both;}
.gb.is-playing .fr1{animation:gbSweep .4s cubic-bezier(.22,1,.36,1) 2.05s both;}
.gb.is-playing .fr2{animation:gbSweep .4s cubic-bezier(.22,1,.36,1) 2.2s both;}
.gb.is-playing .fr3{animation:gbSweep .4s cubic-bezier(.22,1,.36,1) 2.35s both;}
.gb.is-playing .tr1{animation:gbSweep .4s cubic-bezier(.22,1,.36,1) 2.4s both;}
.gb.is-playing .tr2{animation:gbSweep .4s cubic-bezier(.22,1,.36,1) 2.55s both;}
.gb.is-playing .live   {animation:gbPop .42s cubic-bezier(.22,1,.36,1) 2.85s both;}
.gb.is-playing .logo   {animation:gbLogoIn .5s cubic-bezier(.22,1,.36,1) 4.55s both;}
@media (prefers-reduced-motion:reduce){ .gb.is-playing *{animation:none !important;} }

/* ============================================================
   'Who we are' visual — connected-services embed v2 (.gk, 540x360)
   ============================================================ */
.gk{
  --gk-accent:#B8822F;
  --s900:#1F2D3F; --s800:#2A3B51; --s700:#35475E; --s600:#405978;
  --s500:#5A7190; --s400:#8395AC; --s300:#AFBBCB; --s200:#D4DBE5;
  --s100:#E9EDF3; --s50:#F4F6FA; --paper:#FBFAF7; --success:#3E8F5C; --tan:#9A8561;
  position:relative; width:540px; height:360px; max-width:100%;
  border-radius:14px; overflow:hidden; background:var(--s50);
  box-shadow:0 16px 40px rgba(31,45,63,.15);
  font-family:'Satoshi',ui-sans-serif,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
}
.gk svg{display:block;}
.gk .kscene{position:absolute; inset:0; opacity:0;}
.gk .fin{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;}
.gk .lines{position:absolute; inset:0;}
.gk .lines path{fill:none; stroke:var(--gk-accent); stroke-width:2.6; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1;}
.gk .lines .soft{stroke:var(--s300); stroke-width:2.6;}
.gk .hub{position:absolute; left:40px; top:144px; width:72px; height:72px; border-radius:19px; background:linear-gradient(150deg,#35475E,#1B2735); display:flex; align-items:center; justify-content:center; box-shadow:0 10px 22px rgba(31,45,63,.24); z-index:3;}
.gk .hub svg{width:38px; height:43px; color:rgba(244,246,250,.92);}
.gk .hubring{position:absolute; left:40px; top:144px; width:72px; height:72px; border-radius:19px; border:2px solid var(--gk-accent); opacity:0; z-index:2;}
.gk .pod{position:absolute; left:206px; width:150px; height:54px; background:#fff; border:1px solid var(--s100); border-radius:13px; box-shadow:0 6px 16px rgba(31,45,63,.10); display:flex; align-items:center; gap:11px; padding:0 13px; z-index:3;}
.gk .pod .pic{width:34px; height:34px; border-radius:9px; background:var(--s100); display:flex; align-items:center; justify-content:center; flex:none;}
.gk .pod .pic svg{width:19px; height:19px; color:var(--s600);}
.gk .pod .plabel{font-size:13px; font-weight:700; letter-spacing:-.01em; color:var(--s800);}
.gk .p1{top:91px;} .gk .p2{top:153px;} .gk .p3{top:215px;}
.gk .ep{position:absolute; left:456px; top:148px; width:64px; height:64px; border-radius:17px; background:#fff; border:1px solid var(--s100); box-shadow:0 10px 22px rgba(31,45,63,.14); display:flex; align-items:center; justify-content:center; z-index:3;}
.gk .ep svg{width:32px; height:32px; color:var(--gk-accent);}
.gk .epring{position:absolute; left:456px; top:148px; width:64px; height:64px; border-radius:17px; border:2px solid var(--gk-accent); opacity:0; z-index:2;}

/* ===== FINALE — sign-off matched to the hero lockup ===== */
.gk .fin-mark{opacity:1;}
.gk .fin-slot{position:relative; width:250px; height:44px; margin-left:14px;}
.gk .word{position:absolute; left:0; top:50%; transform:translateY(-50%); white-space:nowrap; font-weight:500; font-size:31px; letter-spacing:-.01em; color:#405978; opacity:0;}
.gk .word em{font-style:normal; font-weight:500; color:#D19C45;}
.gk .word.digital{opacity:1;}

@keyframes gkEnv{0%{opacity:0}2%{opacity:1}92%{opacity:1}100%{opacity:0}}
@keyframes gkPop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
@keyframes gkPodIn{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:translateX(0)}}
@keyframes gkDraw{to{stroke-dashoffset:0}}
@keyframes gkRing{0%{opacity:.55;transform:scale(.6)}100%{opacity:0;transform:scale(1.55)}}
@keyframes gkFade{from{opacity:0}to{opacity:1}}
@keyframes gkFlip{0%{opacity:0;transform:translateY(-50%) translateY(8px)}20%{opacity:1;transform:translateY(-50%)}80%{opacity:1;transform:translateY(-50%)}100%{opacity:0;transform:translateY(-50%) translateY(-8px)}}
@keyframes gkLogoIn{from{opacity:0;transform:translateY(-50%) translateY(8px)}to{opacity:1;transform:translateY(-50%)}}

.gk.is-playing .kscene{animation:gkEnv 6.15s linear 0s both;}
.gk.is-playing .hub    {animation:gkPop .5s cubic-bezier(.22,1,.36,1) .3s both;}
.gk.is-playing .hubring{animation:gkRing .9s cubic-bezier(.2,.6,.2,1) .6s 1 both;}
.gk.is-playing .c1  {animation:gkDraw .45s cubic-bezier(.4,0,.2,1) 1.2s forwards;}
.gk.is-playing .p1  {animation:gkPodIn .45s cubic-bezier(.22,1,.36,1) 1.4s both;}
.gk.is-playing .c2  {animation:gkDraw .45s cubic-bezier(.4,0,.2,1) 1.95s forwards;}
.gk.is-playing .p2  {animation:gkPodIn .45s cubic-bezier(.22,1,.36,1) 2.15s both;}
.gk.is-playing .c3  {animation:gkDraw .45s cubic-bezier(.4,0,.2,1) 2.7s forwards;}
.gk.is-playing .p3  {animation:gkPodIn .45s cubic-bezier(.22,1,.36,1) 2.9s both;}
.gk.is-playing .a1  {animation:gkDraw .5s cubic-bezier(.4,0,.2,1) 3.6s forwards;}
.gk.is-playing .a2  {animation:gkDraw .5s cubic-bezier(.4,0,.2,1) 3.75s forwards;}
.gk.is-playing .a3  {animation:gkDraw .5s cubic-bezier(.4,0,.2,1) 3.9s forwards;}
.gk.is-playing .ep     {animation:gkPop .5s cubic-bezier(.22,1,.36,1) 4.35s both;}
.gk.is-playing .epring {animation:gkRing 1.0s cubic-bezier(.2,.6,.2,1) 4.65s 1 both;}
.gk.is-playing .epring2{animation:gkRing 1.0s cubic-bezier(.2,.6,.2,1) 5.35s 1 both;}
.gk.is-playing .fin-mark      {animation:gkFade .4s ease 6.05s both;}
.gk.is-playing .word.web      {animation:gkFlip .5s cubic-bezier(.22,1,.36,1) 6.05s both;}
.gk.is-playing .word.automate {animation:gkFlip .5s cubic-bezier(.22,1,.36,1) 6.55s both;}
.gk.is-playing .word.build    {animation:gkFlip .5s cubic-bezier(.22,1,.36,1) 7.05s both;}
.gk.is-playing .word.digital  {animation:gkLogoIn .5s cubic-bezier(.22,1,.36,1) 7.55s both;}

@media (prefers-reduced-motion:reduce){ .gk.is-playing *{animation:none !important;} }

/* ============================================================
   'Why work with us' visual — looping "Why Gudgie" embed (.gw,
   460x560). Scenes match the three copy points: one team joined
   up / honest advice / built to last. Scaled to fit the column;
   loops while scrolled into view.
   ============================================================ */
.gw-embed { position: relative; width: 100%; max-width: 480px; margin: 0 auto; }
.gw-embed > .gw { position: absolute; top: 0; left: 0; transform-origin: top left; max-width: none; }
/* hide the 'Why Gudgie' visual below desktop — the three copy points carry the
   section there (matches the ≤991px single-column / centred layout) */
@media (max-width: 991px) { .why-choose__image { display: none; } }

.gw{
  --gw-accent:#B8822F;               /* recolor here */
  --s900:#1F2D3F; --s700:#35475E; --s600:#405978; --s500:#5A7190;
  --s400:#8395AC; --s300:#AFBBCB; --s200:#D4DBE5; --s100:#E9EDF3;
  --s50:#F4F6FA; --paper:#FBFAF7; --success:#3E8F5C; --tan:#9A8561;
  position:relative; width:460px; height:560px; max-width:100%;
  border-radius:16px; overflow:hidden; background:var(--paper);
  box-shadow:0 16px 40px rgba(31,45,63,.15);
  font-family:'Satoshi',ui-sans-serif,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
}
.gw svg{display:block;}
.gw .scene{position:absolute; inset:0; opacity:0;}

/* ===== SCENE 1 · one team, joined up ===== */
.gw .lines{position:absolute; inset:0;}
.gw .lines path{fill:none; stroke:var(--gw-accent); stroke-width:2.6; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1;}
.gw .hub{position:absolute; left:192px; top:242px; width:76px; height:76px; border-radius:20px; background:linear-gradient(150deg,#35475E,#1B2735); display:flex; align-items:center; justify-content:center; box-shadow:0 10px 24px rgba(31,45,63,.26); z-index:3;}
.gw .hub svg{width:40px; height:45px; color:rgba(244,246,250,.94);}
.gw .hubring{position:absolute; left:192px; top:242px; width:76px; height:76px; border-radius:20px; border:2px solid var(--gw-accent); opacity:0; z-index:2;}
.gw .snode{position:absolute; width:88px; height:56px; background:#fff; border:1px solid var(--s100); border-radius:14px; box-shadow:0 6px 16px rgba(31,45,63,.10); display:flex; align-items:center; justify-content:center; z-index:3;}
.gw .snode svg{width:29px; height:29px; color:var(--s600);}
.gw .snTop{left:186px; top:92px;}
.gw .snBL {left:60px;  top:380px;}
.gw .snBR {left:312px; top:380px;}

/* ===== SCENE 2 · we tell you the truth (use what already exists) ===== */
.gw .tScratch{position:absolute; left:74px; top:200px; width:132px; height:158px; border-radius:16px; background:var(--s50); border:2px dashed var(--s300); box-sizing:border-box; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; z-index:2; overflow:hidden;}
.gw .tScratch .grid{position:absolute; inset:0; background-image:radial-gradient(var(--s200) 1.1px, transparent 1.1px); background-size:14px 14px; opacity:.6;}
.gw .tScratch .cog{position:relative; width:52px; height:52px; color:var(--s400); opacity:.7;}
.gw .tScratch .cog svg{width:52px; height:52px;}
.gw .tScratch .cap{position:relative; width:62px; height:8px; border-radius:4px; background:var(--s200);}
.gw .tScratch .strike{position:absolute; left:10px; right:10px; top:50%; height:3px; border-radius:2px; background:#B54343; transform:scaleX(0); transform-origin:left; z-index:4;}
.gw .tExists{position:absolute; left:254px; top:192px; width:132px; height:172px; border-radius:16px; background:#fff; border:1px solid var(--s100); box-shadow:0 12px 28px rgba(31,45,63,.14); box-sizing:border-box; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; z-index:3;}
.gw .tExists .cog{width:54px; height:54px; color:var(--s700);}
.gw .tExists .cog svg{width:54px; height:54px;}
.gw .tExists .cap{width:66px; height:8px; border-radius:4px; background:var(--gw-accent); opacity:.85;}
.gw .eCheck{position:absolute; left:352px; top:180px; width:48px; height:48px; border-radius:50%; background:var(--success); display:flex; align-items:center; justify-content:center; box-shadow:0 6px 16px rgba(62,143,92,.4); opacity:0; z-index:5;}
.gw .eCheck svg{width:28px; height:28px; color:#fff;}

/* ===== SCENE 3 · built to last (launch, then ongoing care) ===== */
.gw .spine{position:absolute; left:229px; top:96px; width:2px; height:404px; border-radius:2px; background:linear-gradient(180deg,var(--s300) 74%, rgba(175,187,203,0)); transform:scaleY(0); transform-origin:top; z-index:1;}
.gw .tnode{position:absolute; left:206px; width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; z-index:3; background:#fff; border:1px solid var(--s100); box-shadow:0 6px 16px rgba(31,45,63,.10);}
.gw .tnode svg{width:26px; height:26px; color:var(--s600);}
.gw .tnode.launch{background:linear-gradient(150deg,#35475E,#1B2735); border:none; box-shadow:0 8px 20px rgba(31,45,63,.24);}
.gw .tnode.launch svg{color:rgba(244,246,250,.94);}
.gw .nLaunch{top:94px;} .gw .nHost{top:190px;} .gw .nMaint{top:286px;} .gw .nImprove{top:382px;}
.gw .tbadge{position:absolute; left:242px; width:20px; height:20px; border-radius:50%; background:var(--success); display:flex; align-items:center; justify-content:center; box-shadow:0 3px 8px rgba(62,143,92,.34); opacity:0; z-index:4;}
.gw .tbadge svg{width:12px; height:12px; color:#fff;}
.gw .bLaunch{top:90px;} .gw .bHost{top:186px;} .gw .bMaint{top:282px;} .gw .bImprove{top:378px;}
.gw .pulse{position:absolute; left:224px; top:112px; width:12px; height:12px; border-radius:50%; background:var(--gw-accent); box-shadow:0 0 0 4px rgba(184,130,47,.18); opacity:0; z-index:2;}

/* ---- keyframes (7.5s seamless loop) ---- */
@keyframes gwEnv{
  0%   {opacity:0; transform:scale(1.03);}
  6%   {opacity:1; transform:scale(1);}
  32%  {opacity:1; transform:scale(1);}
  40%  {opacity:0; transform:scale(.975);}
  100% {opacity:0; transform:scale(.975);}
}
@keyframes gwPop{0%,4%{opacity:0;transform:scale(.7)}11%{opacity:1;transform:scale(1)}100%{opacity:1;transform:scale(1)}}
@keyframes gwNode{0%,4%{opacity:0;transform:translateY(10px)}12%{opacity:1;transform:translateY(0)}100%{opacity:1;transform:translateY(0)}}
@keyframes gwDraw{0%,4%{stroke-dashoffset:1}13%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
@keyframes gwRing{0%,4%{opacity:0;transform:scale(.6)}8%{opacity:.5;transform:scale(.85)}17%,100%{opacity:0;transform:scale(1.5)}}
@keyframes gwBar{0%,4%{transform:scaleY(0)}13%{transform:scaleY(1)}100%{transform:scaleY(1)}}
@keyframes gw2_tileA{0%,9%{opacity:0;transform:translateY(8px)}15%{opacity:1;transform:translateY(0)}100%{opacity:1;transform:translateY(0)}}
@keyframes gw2_tileB{0%,11%{opacity:0;transform:translateY(8px) scale(.97)}17%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes gw2_strike{0%,19%{transform:scaleX(0)}27%{transform:scaleX(1)}100%{transform:scaleX(1)}}
@keyframes gw2_dim{0%,21%{opacity:1}27%{opacity:.4}100%{opacity:.4}}
@keyframes gw2_check{0%,19%{opacity:0;transform:scale(.6)}25%{opacity:1;transform:scale(1)}100%{opacity:1;transform:scale(1)}}
@keyframes gw3_spine{0%,8%{transform:scaleY(0)}26%{transform:scaleY(1)}100%{transform:scaleY(1)}}
@keyframes gw3_n1{0%,9%{opacity:0;transform:scale(.72)}16%{opacity:1;transform:scale(1)}100%{opacity:1;transform:scale(1)}}
@keyframes gw3_n2{0%,12%{opacity:0;transform:scale(.72)}19%{opacity:1;transform:scale(1)}100%{opacity:1;transform:scale(1)}}
@keyframes gw3_n3{0%,15%{opacity:0;transform:scale(.72)}22%{opacity:1;transform:scale(1)}100%{opacity:1;transform:scale(1)}}
@keyframes gw3_n4{0%,18%{opacity:0;transform:scale(.72)}25%{opacity:1;transform:scale(1)}100%{opacity:1;transform:scale(1)}}
@keyframes gw3_b1{0%,15%{opacity:0;transform:scale(.5)}20%{opacity:1;transform:scale(1)}100%{opacity:1;transform:scale(1)}}
@keyframes gw3_b2{0%,18%{opacity:0;transform:scale(.5)}23%{opacity:1;transform:scale(1)}100%{opacity:1;transform:scale(1)}}
@keyframes gw3_b3{0%,21%{opacity:0;transform:scale(.5)}26%{opacity:1;transform:scale(1)}100%{opacity:1;transform:scale(1)}}
@keyframes gw3_b4{0%,24%{opacity:0;transform:scale(.5)}29%{opacity:1;transform:scale(1)}100%{opacity:1;transform:scale(1)}}
@keyframes gw3_pulse{0%,14%{transform:translateY(0);opacity:0}16%{transform:translateY(0);opacity:1}19%{transform:translateY(96px);opacity:1}22%{transform:translateY(192px);opacity:1}25%{transform:translateY(288px);opacity:1}30%{transform:translateY(372px);opacity:1}33%,100%{transform:translateY(372px);opacity:0}}

/* ---- run only while .is-playing; scenes at delays 0 / -2.5 / -5 of the 7.5s loop ---- */
.gw.is-playing .sc1{animation:gwEnv 7.5s cubic-bezier(.4,0,.2,1) 0s infinite both;}
.gw.is-playing .sc2{animation:gwEnv 7.5s cubic-bezier(.4,0,.2,1) -5s infinite both;}
.gw.is-playing .sc3{animation:gwEnv 7.5s cubic-bezier(.4,0,.2,1) -2.5s infinite both;}
.gw.is-playing .hub    {animation:gwPop 7.5s cubic-bezier(.22,1,.36,1) 0s infinite both;}
.gw.is-playing .hubring{animation:gwRing 7.5s cubic-bezier(.2,.6,.2,1) 0s infinite both;}
.gw.is-playing .snTop  {animation:gwNode 7.5s cubic-bezier(.22,1,.36,1) 0s infinite both;}
.gw.is-playing .snBL   {animation:gwNode 7.5s cubic-bezier(.22,1,.36,1) -.2s infinite both;}
.gw.is-playing .snBR   {animation:gwNode 7.5s cubic-bezier(.22,1,.36,1) -.4s infinite both;}
.gw.is-playing .ln1    {animation:gwDraw 7.5s cubic-bezier(.4,0,.2,1) -.15s infinite forwards;}
.gw.is-playing .ln2    {animation:gwDraw 7.5s cubic-bezier(.4,0,.2,1) -.3s infinite forwards;}
.gw.is-playing .ln3    {animation:gwDraw 7.5s cubic-bezier(.4,0,.2,1) -.45s infinite forwards;}
.gw.is-playing .tScratch{animation:gw2_tileA 7.5s cubic-bezier(.22,1,.36,1) -5s infinite both, gw2_dim 7.5s cubic-bezier(.4,0,.2,1) -5s infinite both;}
.gw.is-playing .tExists {animation:gw2_tileB 7.5s cubic-bezier(.22,1,.36,1) -5s infinite both;}
.gw.is-playing .tScratch .strike{animation:gw2_strike 7.5s cubic-bezier(.4,0,.2,1) -5s infinite both;}
.gw.is-playing .eCheck  {animation:gw2_check 7.5s cubic-bezier(.22,1,.36,1) -5s infinite both;}
.gw.is-playing .spine   {animation:gw3_spine 7.5s cubic-bezier(.4,0,.2,1) -2.5s infinite both;}
.gw.is-playing .nLaunch {animation:gw3_n1 7.5s cubic-bezier(.22,1,.36,1) -2.5s infinite both;}
.gw.is-playing .nHost   {animation:gw3_n2 7.5s cubic-bezier(.22,1,.36,1) -2.5s infinite both;}
.gw.is-playing .nMaint  {animation:gw3_n3 7.5s cubic-bezier(.22,1,.36,1) -2.5s infinite both;}
.gw.is-playing .nImprove{animation:gw3_n4 7.5s cubic-bezier(.22,1,.36,1) -2.5s infinite both;}
.gw.is-playing .bLaunch {animation:gw3_b1 7.5s cubic-bezier(.22,1,.36,1) -2.5s infinite both;}
.gw.is-playing .bHost   {animation:gw3_b2 7.5s cubic-bezier(.22,1,.36,1) -2.5s infinite both;}
.gw.is-playing .bMaint  {animation:gw3_b3 7.5s cubic-bezier(.22,1,.36,1) -2.5s infinite both;}
.gw.is-playing .bImprove{animation:gw3_b4 7.5s cubic-bezier(.22,1,.36,1) -2.5s infinite both;}
.gw.is-playing .pulse   {animation:gw3_pulse 7.5s cubic-bezier(.4,0,.2,1) -2.5s infinite both;}

@media (prefers-reduced-motion:reduce){
  .gw.is-playing *{animation:none !important;}
  .gw .sc1{opacity:1 !important;}
}

/* ============================================================
   Sub-desktop (≤991px, where the two-column sections stack) —
   centre content throughout. Services / audit / CTA are already
   centred by the template; these are the left-aligned sections.
   ============================================================ */
@media (max-width: 991px) {
  /* hero stays LEFT-aligned below desktop (deliberate exception to the
     sub-desktop centring rule that applies to every other section) */

  /* why work with us — centre the copy and stack the tick icon above each point */
  .why-choose .section-title { text-align: center; }
  .why-choose__box { padding-left: 0; text-align: center; }
  .why-choose__box__icon { position: static; margin: 0 auto 16px; }

  /* who we are */
  .about-one__content { text-align: center; }
  .about-one__content__text-one,
  .about-one__content__text-two { margin-left: auto; margin-right: auto; }

  /* footer */
  .main-footer__top { justify-content: center; }
  .main-footer__about,
  .main-footer__navmenu,
  .main-footer__copyright { text-align: center; }
}

/* ============================================================
   Hex markers — replace the template's round dots with the
   Gudgie hex mark (gd-mark-slate.svg — the same self-coloured,
   spoked hexagon used in the service-card buttons). Drawn as a
   background-image so it renders reliably at any size.
   ============================================================ */
/* section-title tagline marker (was a 7px navy dot) */
.section-title__tagline--has-dots::before {
  width: 15px;
  height: 17px;
  border-radius: 0;
  background: url('../images/brand/gd-mark-slate.svg') center / contain no-repeat;
}

/* desktop navbar marker before each item (was a 5px dot) */
.main-menu .main-menu__list > li > a::after,
.stricky-header .main-menu__list > li > a::after {
  left: -22px;
  width: 12px;
  height: 14px;
  border-radius: 0;
  background: url('../images/brand/gd-mark-slate.svg') center / contain no-repeat;
}

/* ============================================================
   Consistent section rhythm — every content section gets an
   even 55px top/bottom pad (template shipped 70/90, 50/50,
   90/0, 113/113, 0/112). Loads last, so it also overrides the
   template's own mobile paddings. The hero banner keeps its
   own larger spacing by design.
   ============================================================ */
.service-one,
.video-one,
.why-choose,
.about-one,
.cta-one {
  padding-top: 55px;
  padding-bottom: 55px;
}