/* Catapult Communities, shared design system
   Anton headers, Poppins body, navy/orange/teal/gold palette.
   Used by every page on the site. Keep page-specific rules in the page itself. */
:root {
    --navy: #1f3354;
    --orange: #f6512f;
    --teal: #43ccde;
    --gold: #fdb237;
    --white: #ffffff;
    /* Faint cool and warm off-whites. The homepage leans on white now, so
       consecutive light sections use these to stay readable as separate bands
       without going back to a full colour block. Both are light enough to
       inherit the default navy body copy and black headers. --mist is the one
       the older interior pages already reach for through .bg-mist, so it stays
       the single cool tone rather than gaining a near-identical twin. */
    --mist: #f6f7f9;
    --paper-sand: #fbf7f1;
    --gradient-navy: linear-gradient(135deg, #1f3354 0%, #2d4a75 100%);
    --gradient-orange: linear-gradient(135deg, #f6512f 0%, #fdb237 100%);
    --gradient-teal: linear-gradient(135deg, #1f3354 0%, #206e82 55%, #43ccde 100%);
    --font-header: 'Anton', 'Arial Black', sans-serif;
    --font-body: 'Poppins', 'Segoe UI', sans-serif;
    --font-button: 'Poppins', 'Segoe UI', sans-serif;
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    background: var(--white);
    font-family: var(--font-body);
    font-weight: 300;
    color: var(--navy);
    font-size: 20px;
    line-height: 1.6;
    overflow-x: hidden;
  }

  h1, h2, h3, h4 {
    font-family: var(--font-header);
    font-weight: 800;
    color: #000;
    margin: 0 0 0.5em;
  }
  h1 { font-size: 46px; }
  h2 { font-size: 46px; }
  h3 { font-size: 30px; }

  em.accent { color: var(--orange); font-style: italic; }
  .accent-navy { color: var(--navy); }

  a { color: inherit; }

  img { max-width: 100%; display: block; }

  .btn {
    position: relative;
    display: inline-block;
    overflow: hidden;
    font-family: var(--font-button);
    background: var(--teal);
    color: var(--white);
    text-decoration: none;
    padding: 14px 32px;
    border-radius: 6px;
    font-weight: 600;
    letter-spacing: 0.02em;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease;
  }
  .btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 40%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.55), transparent);
    transform: skewX(-20deg);
  }
  .btn:hover::after { animation: btn-shine 0.7s ease forwards; }
  @keyframes btn-shine {
    to { left: 130%; }
  }
  .btn:hover { background: var(--navy); }
  .btn-orange { background: var(--orange); }
  .btn-orange:hover { background: var(--navy); }
  /* For CTAs that sit on the orange gradient, where teal and orange both fade. */
  .btn-navy { background: var(--navy); }
  .btn-navy:hover { background: #0c1524; }

  /* ===== bold section system: full-bleed color blocks with diagonal shape dividers ===== */
  main { background: var(--white); }
  section { position: relative; }

  .section-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 100px 20px;
  }

  /* diagonal clip-path shapes to separate sections, King Kong-style, alternating direction */
  .shape-cut-a { clip-path: polygon(0 48px, 100% 0, 100% 100%, 0 100%); margin-top: -48px; padding-top: 48px; }
  .shape-cut-b { clip-path: polygon(0 0, 100% 48px, 100% 100%, 0 100%); margin-top: -48px; padding-top: 48px; }
  @media (max-width: 768px) {
    .shape-cut-a, .shape-cut-b { clip-path: polygon(0 24px, 100% 0, 100% 100%, 0 100%); margin-top: -24px; padding-top: 24px; }
  }

  .bg-white { background: var(--white); }
  /* one step off white, for separating neighbouring light sections without
     adding another colour to the page */
  .bg-mist { background: var(--mist); }
  .bg-paper-sand { background: var(--paper-sand); }
  .bg-navy-gradient { background: var(--gradient-navy); color: var(--white); }
  .bg-navy-gradient h2, .bg-navy-gradient h3 { color: var(--white); }
  .bg-orange-gradient { background: var(--gradient-orange); color: var(--white); }
  .bg-orange-gradient h2, .bg-orange-gradient h3 { color: var(--white); }
  .bg-teal-gradient { background: var(--gradient-teal); color: var(--white); }
  .bg-teal-gradient h2, .bg-teal-gradient h3 { color: var(--white); }

  /* ===== nav: transparent overlay on the hero video, phone left, logo center, hamburger right ===== */
  header.site-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 30;
    background: transparent;
    display: grid;
    /* The outer tracks have to stay an equal 1fr pair: the centre column is
       only a true centre while the space either side of it is split evenly.
       Sizing those columns to their contents instead (the phone number is far
       wider than the hamburger) walks the logo off-centre. */
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 28px 40px;
  }
  .logo { justify-self: center; }
  /* width:auto matters as much as the height here. The markup carries
     width="300" height="100" -- the file's real intrinsic size, kept so the
     browser can reserve the right box -- and with only a height declared the
     width attribute stood as a presentational hint, rendering the logo 300px
     wide at 44px tall: stretched to more than twice its true proportions.
     Handing the width back to the aspect ratio is what un-squashes it. */
  /* The nudge is optical centring, not a layout fix. The artwork inside
     logo-white.png is not centred on its own canvas -- 25px of transparent
     padding to its left, 36px to its right -- so a perfectly centred box still
     reads as sitting slightly left. Shifting the image by half that 11px
     difference (5.5px of a 300px canvas, hence 1.83% of whatever width it
     renders at) puts the rocket-and-wordmark itself on the centre line. */
  .logo img { height: 58px; width: auto; transform: translateX(1.83%); }
  .nav-phone {
    justify-self: start;
    color: var(--white);
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.02em;
  }
  .nav-phone:hover { color: var(--teal); }

  nav.primary-nav { justify-self: end; position: relative; }
  nav.primary-nav ul {
    list-style: none;
    margin: 0;
    padding: 12px 0;
    position: absolute;
    top: calc(100% + 16px);
    right: 0;
    background: var(--white);
    box-shadow: 0 16px 40px rgba(31,51,84,0.25);
    border-radius: 6px;
    min-width: 220px;
    display: none;
    flex-direction: column;
  }
  nav.primary-nav ul.open { display: flex; }
  nav.primary-nav ul li { width: 100%; }
  nav.primary-nav ul > li > a {
    position: relative;
    display: block;
    text-decoration: none;
    color: var(--navy);
    font-weight: 400;
    font-size: 17px;
    padding: 12px 24px;
  }
  nav.primary-nav ul > li > a:hover { color: var(--orange); background: #f7f7f9; }
  .nav-item.has-dropdown { position: relative; }
  .dropdown {
    position: static;
    background: #f7f7f9;
    box-shadow: none;
    min-width: auto;
    padding: 4px 0;
    display: none;
  }
  .nav-item.has-dropdown.open .dropdown { display: block; }
  .dropdown a {
    display: block;
    padding: 10px 24px 10px 36px;
    font-size: 15px;
  }
  .dropdown a:hover { background: #eee; color: var(--orange); }

  /* hamburger, always used for nav on every screen size */
  .nav-toggle {
    justify-self: end;
    display: flex;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    transition: background 0.2s ease;
  }
  .nav-toggle:hover { background: rgba(255,255,255,0.15); }
  .nav-toggle span {
    width: 26px;
    height: 3px;
    border-radius: 3px;
    background: var(--white);
    display: block;
    transition: transform 0.3s ease, opacity 0.2s ease;
  }
  .nav-toggle.open span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
  /* On phones and small tablets the logo moves to the left edge and the
     hamburger holds the right, which is the arrangement people reach for
     one-handed. The tracks are placed explicitly rather than by source order,
     so the markup stays phone-logo-nav for every other width. */
  @media (max-width: 768px) {
    header.site-header { grid-template-columns: auto 1fr auto; padding: 20px; }
    /* grid-row: 1 on all three is load-bearing, not tidiness. The markup runs
       phone, logo, nav; naming a column for each without a row leaves the
       auto-placement cursor past column 2 by the time the logo asks for column
       1, and sparse packing will not walk backwards -- so the logo and the
       hamburger drop onto a second row, leaving the phone number floating
       above them. Pinning the row keeps the header one line tall. */
    .logo { grid-column: 1; grid-row: 1; justify-self: start; }
    .nav-phone { grid-column: 2; grid-row: 1; justify-self: end; margin-right: 6px; }
    nav.primary-nav { grid-column: 3; grid-row: 1; }
    /* The centred logo needed a nudge right to look optically centred, since
       the artwork carries 25px of transparent canvas on its left and 36px on
       its right. Left-aligned it needs the opposite correction: pulling the
       image back by that 25px (8.33% of the 300px canvas) is what puts the
       rocket itself on the header's padding line instead of 11px inside it. */
    .logo img { height: 44px; width: auto; transform: translateX(-8.33%); }
  }
  @media (max-width: 600px) {
    .nav-phone span.full { display: none; }
  }

  /* ===== hero ===== */
  .hero { position: relative; min-height: 760px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
  .hero video, .hero .hero-fallback {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1;
  }
  /* The headline used to carry a heavy drop shadow to stay readable over the
     background video. This scrim does that job instead: contrast comes from
     behind the type rather than from a halo around it, so the lettering reads
     clean and sharp. It is lightest through the middle band, where the
     blast-off clip sits, so the rocket is not muddied. */
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
      linear-gradient(180deg, rgba(12,21,36,0.62) 0%, rgba(12,21,36,0.42) 34%, rgba(12,21,36,0.22) 62%, rgba(12,21,36,0.48) 100%),
      radial-gradient(ellipse 78% 60% at 50% 34%, rgba(12,21,36,0.34), transparent 72%);
  }
  .hero-card {
    position: relative;
    z-index: 3;
    max-width: 860px;
    margin: 120px auto 60px;
    padding: 0 16px;
    text-align: center;
  }
  .hero-card h1 { color: var(--white); line-height: 1.02; font-size: 88px; font-weight: 900; text-transform: none; }
  .hero-card p { color: var(--white); font-size: 20px; margin: 24px auto 32px; max-width: 600px; }
  /* The promise line and the ROI line are one thought split in two, so they sit
     closer to each other than to the form below them. */
  .hero-card .hero-lead { font-size: 21px; line-height: 1.5; margin: 24px auto 12px; max-width: 640px; }
  .hero-card .hero-roi { font-size: 22px; font-weight: 700; margin: 0 auto 28px; max-width: 640px; }
  /* Colour emoji carry no weight or italics of their own, and the display face
     has no glyphs for them -- this keeps the system emoji font from being
     synthesised into a bolder or slanted shape than the one next to it. */
  .emoji {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    font-weight: 400;
    font-style: normal;
    white-space: nowrap;
  }
  .nowrap { white-space: nowrap; }
  /* At 88px the rocket would out-weigh the lettering it follows, so it is
     stepped down relative to the headline it sits in. */
  .hero-card h1 .emoji { font-size: 0.78em; }
  .hero-cta-form {
    display: flex;
    background: var(--white);
    border-radius: 8px;
    overflow: hidden;
    max-width: 560px;
    margin: 0 auto;
    box-shadow: 0 12px 30px rgba(0,0,0,0.25);
  }
  .hero-cta-form input {
    flex: 1;
    border: none;
    outline: none;
    padding: 18px 20px;
    font-size: 16px;
    font-family: var(--font-body);
    color: var(--navy);
    min-width: 0;
  }
  .hero-cta-form button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--orange);
    color: var(--white);
    border: none;
    font-family: var(--font-button);
    font-weight: 700;
    font-size: 16px;
    padding: 0 26px;
    cursor: pointer;
    white-space: nowrap;
  }
  .hero-cta-form button:hover { background: var(--navy); }
  .hero-cta-form .arrow { display: inline-block; animation: arrow-bounce 1.3s ease-in-out infinite; }
  .hero-cta-form button:hover .arrow { animation-play-state: paused; transform: translateX(8px); }
  @keyframes arrow-bounce {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(7px); }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-cta-form .arrow { animation: none; }
  }
  .hero-secondary-link { display: inline-block; margin-top: 16px; color: var(--white); font-size: 15px; opacity: 0.85; text-decoration: underline; }
  /* The blast-off clip is H.264, which has no alpha channel, so its own white
     backdrop cannot simply be switched off. Feathering the edges with a radial
     mask dissolves the hard white rectangle into the dark hero video, so what is
     left reads as light and exhaust around the rocket instead of a pasted-on box.
     Swap in a VP9-alpha WebM and this mask can go away. The starting width is
     deliberately small: catapult.js grows it as the hero scrolls past. */
  .hero-blastoff-wrap {
    margin: 28px auto 0;
    width: 400px;
    max-width: 70vw;
    /* Scaled rather than resized: animating width on every scroll tick would
       re-flow the hero and shove the rest of the page around, whereas a
       transform only repaints. The layout box stays the full size, so the
       hero's height never changes while the rocket grows. */
    transform: scale(0.55);
    transform-origin: center top;
    transition: transform 0.12s linear;
    will-change: transform;
    -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, #000 55%, rgba(0,0,0,0.45) 76%, transparent 96%);
    mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, #000 55%, rgba(0,0,0,0.45) 76%, transparent 96%);
  }
  .hero-blastoff-wrap video {
    width: 100%;
    display: block;
  }
  @media (prefers-reduced-motion: reduce) {
    /* No scroll handler runs in this mode, so settle on the full size. */
    .hero-blastoff-wrap { transition: none; transform: scale(1); }
  }
  @media (max-width: 768px) {
    /* The headline has to hold at exactly two lines on a phone -- the <br> sets
       where they break -- so it is sized off the viewport rather than stepped
       through fixed breakpoints. "for Your Business (rocket)" is the wider of
       the two lines at roughly 8.2em of Anton, and 10vw keeps it inside the
       card's 20px-a-side inset from 320px up, with room to spare. */
    .hero-card h1 { font-size: clamp(30px, 10vw, 56px); }
    .hero-card .hero-lead { font-size: 19px; margin: 18px auto 10px; }
    .hero-card .hero-roi { font-size: 20px; margin: 0 auto 24px; }
    .hero-cta-form { flex-direction: column; border-radius: 8px; }
    .hero-cta-form button { padding: 14px; justify-content: center; }
    /* Tighter insets than the old 24px margin plus 24px padding: that pair ate
       96px of a 390px screen, which is what held the type down. The section is
       min-height driven, so the copy growing into the space is the point. */
    .hero { min-height: 680px; }
    .hero-card { margin: 24px 10px 32px; padding: 0 10px; }
  }

  /* ===== value section: DIY or us? =====
     The copy reads as one vertical argument -- the problem, then the answer,
     with a pointing hand between each beat -- so the two lists are stacked
     panels rather than side-by-side columns. Same order on every width, which
     means nothing has to be re-sequenced for phones. */
  .value-section { text-align: center; }
  .value-section h2 { max-width: 900px; margin: 0 auto 28px; }
  /* The big two-line statement that opens the argument. Anton runs about
     11.5em for "DIY Digital Marketing is hard,", the wider of its two lines,
     so 4.6vw keeps that line whole at every width while the cap stops it
     crowding the h2 above it. The line break is in the markup, not here. */
  .diy-intro {
    font-family: var(--font-header);
    /* 7vw, not the 4.6vw this started at: the old ramp only reached the 42px
       cap on a desktop and bottomed out at the 21px floor on every phone,
       which left the statement no bigger on mobile than it had been. 7vw is
       the most the wider of its two lines ("DIY Digital Marketing is hard," at
       about 11.5em of Anton) can take inside the section's 24px-a-side phone
       padding at 320px, so the line break in the markup still holds. */
    font-size: clamp(21px, 7vw, 42px);
    line-height: 1.12;
    color: var(--navy);
    max-width: 900px;
    margin: 0 auto;
  }
  /* The pointing hand is decoration between beats: it is hidden from screen
     readers in the markup, and sized here so it reads as a divider, not copy.
     It nods, which gives the eye something to follow down the section. */
  .diy-point {
    font-size: 26px;
    line-height: 1;
    margin: 20px auto;
    opacity: 0.85;
    animation: diy-nod 2.4s ease-in-out infinite;
  }
  @keyframes diy-nod {
    0%, 62%, 100% { transform: translateY(0); }
    76% { transform: translateY(7px); }
    88% { transform: translateY(2px); }
  }
  .diy-panel {
    max-width: 860px;
    margin: 0 auto;
    padding: 28px 32px;
    text-align: left;
    border-radius: 12px;
    border-left: 4px solid transparent;
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-left-width 0.2s ease;
  }
  /* Muted navy for the problem panel, teal for the answer: the same voice
     turned down, then turned up. */
  .diy-panel.diy-bad { background: rgba(31,51,84,0.05); border-left-color: rgba(31,51,84,0.2); }
  .diy-panel.diy-good { background: rgba(32,110,130,0.07); border-left-color: #206e82; }
  /* Hovering a panel lifts it clear of the page and thickens its edge, so the
     two read as cards you are choosing between rather than blocks of text. */
  .diy-panel:hover {
    transform: translateY(-4px);
    border-left-width: 8px;
    box-shadow: 0 18px 38px rgba(31,51,84,0.14);
  }
  .diy-panel ul { list-style: none; margin: 0; padding: 0; }
  .diy-panel li {
    font-size: 19px;
    font-weight: 500;
    line-height: 1.55;
    margin-bottom: 14px;
    padding: 6px 10px 6px 40px;
    border-radius: 8px;
    position: relative;
    color: var(--navy);
    transition: background 0.2s ease, transform 0.2s ease;
  }
  .diy-panel li:last-child { margin-bottom: 0; }
  /* Emoji markers, so the list keeps the tone of the copy. They are presentation
     only; each line still reads on its own without them. */
  .diy-panel li::before {
    position: absolute;
    left: 8px;
    top: 6px;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    font-size: 18px;
    line-height: 1.6;
    transition: transform 0.2s ease;
  }
  .diy-panel.diy-bad li::before { content: "\1F6A8"; }
  .diy-panel.diy-good li::before { content: "\2705"; }
  /* Each line answers to the pointer on its own, which makes a long list feel
     like something you are reading through rather than at. */
  .diy-panel li:hover { transform: translateX(4px); }
  .diy-panel.diy-bad li:hover { background: rgba(31,51,84,0.07); }
  .diy-panel.diy-good li:hover { background: rgba(32,110,130,0.1); }
  .diy-panel li:hover::before { transform: scale(1.22); }
  /* The 73% counts up as the panel arrives, on the same [data-count] handler
     the stats band uses. Tabular figures keep the sentence from re-flowing
     while the digits change. */
  .diy-stat {
    font-weight: 700;
    color: var(--orange);
    font-variant-numeric: tabular-nums;
  }
  /* One line on desktop. At 25.9em of Anton this needs about 27x its own font
     size in width, which 3vw against a 1080px cap holds on to all the way down
     to the phone breakpoint -- the reason it used to break in two was the
     820px cap, not the type size. */
  .diy-heading {
    font-size: clamp(20px, 3vw, 36px);
    line-height: 1.2;
    color: var(--orange);
    max-width: 1080px;
    margin: 0 auto 24px;
  }
  .diy-cta { max-width: 760px; margin: 0 auto; text-align: center; }
  /* Long CTA label: it is a sentence, not two words, so the button is allowed
     to wrap onto a second line instead of forcing a horizontal scroll. The
     slow glow is there to catch the eye at the end of the argument; it stops
     the moment the pointer arrives, so it never fights a deliberate hover. */
  .diy-cta-btn {
    font-size: 19px;
    line-height: 1.4;
    padding: 16px 32px;
    max-width: 100%;
    white-space: normal;
    text-wrap: balance;
    animation: diy-cta-glow 2.8s ease-in-out infinite;
    transition: transform 0.2s ease, background 0.2s ease;
  }
  @keyframes diy-cta-glow {
    0%, 100% { box-shadow: 0 8px 20px rgba(246,81,47,0.28); }
    50% { box-shadow: 0 12px 30px rgba(246,81,47,0.52); }
  }
  .diy-cta-btn:hover, .diy-cta-btn:focus-visible {
    transform: translateY(-2px) scale(1.02);
    animation-play-state: paused;
  }
  .diy-cta-note { color: rgba(31,51,84,0.7); font-size: 15px; line-height: 1.5; margin: 16px auto 0; }
  @media (max-width: 768px) {
    /* The section h2 opts out of the global 21px mobile heading size, which is
       far too small to head a section whose next line is now 27px. 8.8vw is
       what "DIY Digital Marketing..." (about 9em of Anton) can take before it
       stops fitting the phone's content width on its own line, and holding the
       same 8.8:7 ratio against the statement below keeps the h2 a clear step
       above it at every width. The cap is the desktop h2 size, so nothing
       steps up or down as the breakpoint is crossed. */
    .value-section h2 { font-size: clamp(26px, 8.8vw, 46px); }
    .diy-heading { font-size: clamp(21px, 6vw, 26px); margin-bottom: 20px; }
    .diy-point { font-size: 22px; margin: 16px auto; }
    .diy-panel { padding: 22px 16px; border-radius: 10px; }
    .diy-panel li { font-size: 16px; padding: 6px 6px 6px 32px; margin-bottom: 10px; }
    .diy-panel li::before { left: 4px; font-size: 15px; line-height: 1.65; }
    .diy-cta-btn { font-size: 16px; padding: 14px 22px; }
    .diy-cta-note { font-size: 16px; }
  }
  /* Nothing here should move for someone who has asked the OS for less of it.
     The hover states stay -- they are responses to an action, not ambient
     motion -- but the nodding hand and the pulsing button settle. */
  @media (prefers-reduced-motion: reduce) {
    .diy-point { animation: none; }
    .diy-cta-btn { animation: none; box-shadow: 0 8px 20px rgba(246,81,47,0.28); }
    .diy-panel, .diy-panel li, .diy-panel li::before, .diy-cta-btn { transition: none; }
    .diy-panel:hover { transform: none; }
    .diy-panel li:hover { transform: none; }
    .diy-cta-btn:hover { transform: none; }
  }

  /* ===== Local Viral, standalone standout section =====
     No page uses these rules right now. The section was pulled off the homepage
     because it reads as a social-media idea rather than a homepage one, and it
     is going onto the social media service page when that gets built out -- so
     the styling is kept here rather than rewritten from scratch later. The
     markup it expects is recorded in .netlify/results.md. */
  .local-viral-section { text-align: center; }
  .local-viral-term {
    font-family: var(--font-header);
    font-size: 96px;
    line-height: 1;
    color: var(--white);
    margin-bottom: 24px;
  }
  .local-viral-term em { color: var(--navy); font-style: normal; }
  .local-viral-pronunciation {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 300;
    color: rgba(31,51,84,0.7);
    margin: 0 0 24px;
    letter-spacing: 0.02em;
  }
  .local-viral-pronunciation em { font-style: italic; }
  .local-viral-def {
    max-width: 720px;
    margin: 0 auto;
    font-size: 22px;
    line-height: 1.6;
    color: var(--navy);
  }
  .local-viral-def strong { color: var(--white); background: var(--navy); padding: 0 8px; }
  .local-viral-cta {
    margin-top: 42px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
  }
  .local-viral-cta .btn { font-size: 18px; padding: 17px 40px; }
  .local-viral-link {
    color: var(--white);
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    border-bottom: 2px solid rgba(255,255,255,0.4);
    padding-bottom: 3px;
    transition: border-color 0.2s ease;
  }
  .local-viral-link:hover { border-bottom-color: var(--white); }
  .local-viral-link .arrow { display: inline-block; animation: arrow-bob 1.7s ease-in-out infinite; }
  .local-viral-link:hover .arrow { animation-play-state: paused; transform: translateY(4px); }
  @keyframes arrow-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(6px); }
  }
  @media (prefers-reduced-motion: reduce) {
    .local-viral-link .arrow { animation: none; }
  }
  @media (max-width: 768px) {
    .local-viral-term { font-size: 48px; }
    .local-viral-def { font-size: 18px; }
    .local-viral-pronunciation { font-size: 15px; }
    .local-viral-cta { margin-top: 30px; }
    .local-viral-cta .btn { font-size: 16px; padding: 15px 28px; }
  }

  /* ===== seam decorations: layered bars angled to match the shape-cut dividers ===== */
  .seam-decor {
    position: absolute;
    left: -50px;
    width: 300px;
    z-index: 2;
    pointer-events: none;
  }
  .seam-decor.seam-a { transform: rotate(-3deg); top: -6px; }
  .seam-decor.seam-b { transform: rotate(3deg); top: -6px; }
  .seam-decor.seam-bottom-a { transform: rotate(-3deg); bottom: -6px; top: auto; }
  .seam-decor.seam-bottom-b { transform: rotate(3deg); bottom: -6px; top: auto; }
  .seam-box { width: 150px; height: 36px; border: 2px solid; background: transparent; }
  .seam-bar { height: 30px; margin-top: 8px; }
  .seam-bar.wide { width: 240px; }
  .seam-bar.narrow { width: 170px; opacity: 0.55; margin-top: 6px; }
  .seam-decor.right { left: auto; right: -50px; }
  @media (max-width: 900px) { .seam-decor { display: none; } }

  /* ===== platforms we work with, floating badges ===== */
  .platforms-float {
    position: relative;
    height: 260px;
    max-width: 1000px;
    margin: 0 auto;
  }
  .platform-badge {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 84px;
    animation: badge-float 5s ease-in-out infinite;
  }
  .platform-badge .icon-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 24px rgba(0,0,0,0.25);
    overflow: hidden;
  }
  .platform-badge svg { width: 30px; height: 30px; }
  .platform-badge span { font-size: 13px; font-weight: 600; }
  @keyframes badge-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
  }
  @media (prefers-reduced-motion: reduce) {
    .platform-badge { animation: none; }
  }

  /* ===== final platforms + CTA section, dark background, King Kong-style ===== */
  .platforms-cta-section {
    position: relative;
    overflow: hidden;
    background: var(--navy);
    padding: 120px 40px;
    text-align: center;
  }
  .platforms-cta-section .platforms-float {
    position: absolute;
    inset: 0;
    height: auto;
    max-width: none;
    z-index: 1;
  }
  .platforms-cta-section .platform-badge span { color: var(--white); }
  .platforms-cta-content {
    position: relative;
    z-index: 2;
    max-width: 820px;
    margin: 0 auto;
  }
  .platforms-cta-content h2 {
    color: var(--white);
    font-size: 44px;
    line-height: 1.15;
    margin-bottom: 36px;
  }
  .btn-cta-lime {
    background: var(--gold);
    color: var(--navy);
    font-weight: 800;
    font-size: 18px;
    padding: 20px 48px;
  }
  .btn-cta-lime:hover { background: var(--white); color: var(--navy); }

  /* On narrower screens, drop the absolute scatter for a simple wrapped row so nothing overlaps or crowds */
  @media (max-width: 900px) {
    .platforms-cta-section { padding: 80px 24px; }
    .platforms-cta-section .platforms-float {
      position: static;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 20px;
      margin-bottom: 40px;
    }
    .platforms-cta-section .platform-badge {
      position: static;
      width: 70px;
      animation: none;
    }
    .platforms-cta-section .platform-badge .icon-circle { width: 48px; height: 48px; }
    .platforms-cta-section .platform-badge svg { width: 26px; height: 26px; }
  }
  @media (max-width: 480px) {
    .platforms-cta-section { padding-left: 20px; padding-right: 20px; }
    .platforms-cta-section .platform-badge span { font-size: 11px; }
  }
  @media (max-width: 768px) {
    .platforms-cta-content h2 { font-size: 28px; }
  }


  /* ===== free e-book download ===== */
  .ebook-inner { text-align: center; }
  .ebook-cover {
    width: 180px;
    margin: 0 auto 32px;
    filter: drop-shadow(0 16px 30px rgba(31,51,84,0.25));
  }
  .ebook-section h2 { max-width: 760px; margin: 0 auto 20px; }
  .ebook-section p { max-width: 560px; margin: 0 auto 32px; color: #555; }

  .stats-section {
    background: #f2f4f2;
    position: relative;
    overflow: hidden;
    padding-top: 40px;
  }
  .stats-orb {
    position: absolute;
    top: -220px;
    right: -100px;
    width: 560px;
    height: 560px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, rgba(67,204,222,0.35), rgba(31,51,84,0.12) 60%, transparent 75%);
    z-index: 0;
  }
  .stats-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }
  .stat-card {
    background: var(--white);
    border-radius: 10px;
    padding: 32px 28px;
    box-shadow: 0 14px 34px rgba(31,51,84,0.12);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }
  .stat-card:hover { transform: translateY(-8px); box-shadow: 0 22px 44px rgba(31,51,84,0.2); }
  .stat-underline { width: 48px; height: 4px; background: var(--orange); border-radius: 2px; margin-bottom: 18px; transition: width 0.25s ease; }
  .stat-card:hover .stat-underline { width: 80px; }
  .stat-num {
    font-family: var(--font-header);
    font-size: 56px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1;
  }
  .stat-label { color: var(--navy); font-size: 17px; font-weight: 600; margin-top: 10px; }
  .stat-desc { color: #555; font-size: 15px; margin-top: 10px; line-height: 1.5; }
  @media (max-width: 900px) {
    .stats-grid { grid-template-columns: 1fr; }
  }

  /* ===== parallax =====
     A gradient laid straight over the photograph never gave the copy a reliable
     background, so the type sat on whatever pixels happened to be underneath
     it. The band now dims the whole photo and puts the copy inside a defined
     navy panel with its own padding, radius and rule, which keeps the contrast
     ratio fixed no matter how the photo crops at a given viewport width. */
  .parallax {
    position: relative;
    background-image: url('/images/parallax-rutland.jpg');
    background-attachment: fixed;
    background-size: cover;
    background-position: center 40%;
    min-height: 480px;
    display: flex;
    align-items: center;
  }
  .parallax::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(18,30,50,0.52);
  }
  .parallax-inner {
    position: relative;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 72px 20px;
  }
  .parallax-plate {
    max-width: 720px;
    margin: 0 auto;
    padding: 48px 52px 52px;
    border-radius: 18px;
    background: #ffffff;
    border-top: 6px solid var(--orange);
    box-shadow: 0 26px 64px rgba(0,0,0,0.34);
    text-align: center;
  }
  .parallax-plate h2 { color: var(--navy); font-size: 36px; line-height: 1.16; margin: 0 0 18px; text-align: center; }
  .parallax-plate p { color: #3f4a5c; font-size: 18px; line-height: 1.7; margin: 0 auto; max-width: 34em; text-align: center; }
  @media (max-width: 768px) {
    .parallax { background-attachment: scroll; min-height: 0; }
    .parallax-inner { padding: 52px 18px; }
    .parallax-plate { padding: 30px 22px 32px; border-radius: 14px; }
    .parallax-plate h2 { font-size: 26px; }
    .parallax-plate p { font-size: 16px; }
  }

  /* ===== services tabs ===== */
  .services-section h2 { text-align: center; max-width: 800px; margin: 0 auto 48px; }
  .tabs-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    border-bottom: 2px solid #e6e6ea;
    margin-bottom: 48px;
  }
  .tabs-nav button {
    background: none;
    border: none;
    font-family: var(--font-header);
    font-size: 20px;
    padding: 12px 20px;
    cursor: pointer;
    color: var(--navy);
    border-bottom: 3px solid transparent;
  }
  .tabs-nav button.active { border-bottom-color: var(--orange); color: var(--orange); }
  .tab-panel { display: none; text-align: center; }
  .tab-panel.active { display: block; }
  .services-section { background: var(--white); }
  /* ----- animated service icon tiles -----
     These clips have a near-white backdrop baked in rather than transparency,
     and all six arrived on different canvas sizes with a different off-white
     (#f2 through #fd) and the artwork sitting off-centre. Dropping them into a
     200px square with object-fit: contain left a visible pale box, hidden only
     by mix-blend-mode: multiply -- which mobile Safari ignores on a video
     element, so the square always showed on phones and only sometimes on
     desktop. The clips are now cropped at the source to a uniform 3:2 window
     around the artwork with every backdrop levelled to the same tone, so the
     fix is to stop hiding the backdrop and frame it on purpose: fill the tile
     edge to edge and let the rounded border read as a deliberate card. No blend
     mode and no filter, so it renders identically on every engine.

     The framing lives on the bare class because the same six clips appear in
     three places -- the homepage tabs, the .svc-row list on /services, and the
     .wd-split media column on the service pages. Each context below sets only
     its own size. */
  .service-icon {
    display: block;
    width: 100%;
    /* the width/height attributes on the element are presentational hints, and
       an explicit height beats aspect-ratio -- height:auto hands the ratio back */
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 16px;
    border: 1px solid rgba(31, 51, 84, 0.09);
    /* matches the levelled backdrop, so the poster and the first decoded frame
       swap in without a flash of a different white */
    background: #f7f7f7;
    box-shadow: 0 14px 34px rgba(31, 51, 84, 0.12);
  }
  .tab-panel .service-icon { max-width: 336px; margin: 0 auto 22px; }
  @media (max-width: 600px) {
    .tab-panel .service-icon { max-width: 300px; border-radius: 14px; }
  }
  .tab-panel p { max-width: 700px; margin: 0 auto 24px; }
  .tab-panel .btn { margin-top: 8px; }
  .services-teaser {
    margin-top: 56px;
    text-align: center;
    font-size: 18px;
    color: #555;
  }
  .services-teaser a { color: var(--orange); text-decoration: underline; }

  /* ===== first-year timeline =====
     A centre rail with the four quarters alternating either side on desktop,
     collapsing to a single left-hand rail on narrow screens. The rail's fill
     height is driven by catapult.js as the section scrolls, so the line draws
     itself from "Foundation" down to "You own your local market". */
  /* Kept for anyone deep-linking to /#first-year: the diagonal cut means the
     section's true top edge is 48px above its content. */
  .timeline-section { scroll-margin-top: 24px; }
  /* Client-supplied launch photo behind the timeline. It is a 408x864 portrait
     image, so it is pinned to the right at its own height rather than stretched
     across the band. ::before carries the photo, ::after the scrim that keeps
     the cards readable, and the mask fades the photo's left edge out so its
     rectangle never shows a seam over the navy. */
  .timeline-section.has-rocket::before,
  .timeline-section.has-rocket::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  .timeline-section.has-rocket::before {
    z-index: 0;
    background: url('/images/timeline-rocket.webp') no-repeat right -30px center / auto 108%;
    opacity: 0.62;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 34%, #000 100%);
  }
  .timeline-section.has-rocket::after {
    z-index: 1;
    background: linear-gradient(94deg, rgba(31,51,84,0.97) 0%, rgba(31,51,84,0.88) 50%, rgba(31,51,84,0.5) 100%);
  }
  .timeline-section.has-rocket > .section-inner,
  .timeline-section.has-rocket > .seam-decor { position: relative; z-index: 2; }
  @media (max-width: 1100px) {
    .timeline-section.has-rocket::before {
      background-position: center top 6%;
      background-size: auto 52%;
      opacity: 0.4;
      -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%);
      mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%);
    }
    .timeline-section.has-rocket::after {
      background: linear-gradient(180deg, rgba(31,51,84,0.8) 0%, rgba(31,51,84,0.94) 42%, rgba(31,51,84,0.99) 100%);
    }
  }
  .timeline-head { max-width: 780px; margin: 0 auto; text-align: center; }
  .timeline-head h2 { margin-bottom: 16px; }
  .timeline-head p { color: rgba(255,255,255,0.82); font-size: 19px; margin: 0; }

  .timeline {
    list-style: none;
    position: relative;
    max-width: 1020px;
    margin: 70px auto 0;
    padding: 0;
  }
  /* Unfilled track. */
  .timeline::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 6px;
    bottom: 6px;
    width: 3px;
    transform: translateX(-50%);
    background: rgba(255,255,255,0.16);
    border-radius: 2px;
  }
  /* Filled portion. --timeline-progress is set by the scroll handler. */
  .timeline::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 6px;
    width: 3px;
    transform: translateX(-50%);
    height: calc(var(--timeline-progress, 0) * (100% - 12px));
    background: linear-gradient(180deg, var(--teal) 0%, var(--gold) 70%, var(--orange) 100%);
    border-radius: 2px;
    box-shadow: 0 0 16px rgba(67,204,222,0.55);
  }
  .timeline-step {
    position: relative;
    width: 50%;
    padding: 0 60px 48px 0;
  }
  .timeline-step:nth-child(even) {
    margin-left: 50%;
    padding: 0 0 48px 60px;
  }
  .timeline-step:last-child { padding-bottom: 0; }
  .timeline-dot {
    position: absolute;
    top: 26px;
    right: -12px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--teal);
    border: 4px solid #24395e;
    z-index: 1;
  }
  .timeline-step:nth-child(even) .timeline-dot { right: auto; left: -12px; }
  /* The dot lands with a small pop as its card arrives. */
  .timeline-step.in-view .timeline-dot { animation: dot-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
  @keyframes dot-pop {
    0%   { transform: scale(0.3); }
    100% { transform: scale(1); }
  }
  /* Only the twelve-month dot keeps pulsing, so the eye finishes at the payoff. */
  .timeline-dot-final { background: var(--gold); }
  .timeline-step.in-view .timeline-dot-final::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid rgba(253,178,55,0.8);
    animation: dot-ping 2.2s ease-out infinite 0.5s;
  }
  @keyframes dot-ping {
    0%   { transform: scale(0.85); opacity: 0.9; }
    75%  { transform: scale(1.7);  opacity: 0;   }
    100% { transform: scale(1.7);  opacity: 0;   }
  }

  .timeline-card {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 14px;
    padding: 26px 30px;
    transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  }
  .timeline-card:hover {
    transform: translateY(-6px);
    background: rgba(255,255,255,0.1);
    border-color: rgba(67,204,222,0.55);
    box-shadow: 0 18px 40px rgba(0,0,0,0.28);
  }
  .timeline-months {
    display: block;
    font-family: var(--font-header);
    font-size: 15px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 8px;
  }
  .timeline-card h3 { color: var(--white); font-size: 28px; margin: 0 0 12px; }
  .timeline-card p { color: rgba(255,255,255,0.8); font-size: 17px; line-height: 1.6; margin: 0 0 10px; }
  .timeline-card .timeline-payoff { color: var(--teal); font-weight: 600; margin: 0; }

  .timeline-foot { text-align: center; margin-top: 56px; }
  .timeline-disclaimer {
    color: rgba(255,255,255,0.58);
    font-size: 15px;
    max-width: 640px;
    margin: 0 auto 28px;
  }

  /* Cards slide in from their own side of the rail rather than straight up,
     which makes the alternation read as a path instead of a stack. */
  @media (min-width: 861px) {
    .timeline-step:nth-child(odd).reveal  { transform: translate(-38px, 16px); }
    .timeline-step:nth-child(even).reveal { transform: translate(38px, 16px); }
    .timeline-step:nth-child(odd).reveal.in-view,
    .timeline-step:nth-child(even).reveal.in-view { transform: translate(0, 0); }
  }
  @media (max-width: 860px) {
    .timeline { margin-top: 48px; }
    .timeline::before, .timeline::after { left: 11px; transform: none; }
    .timeline-step,
    .timeline-step:nth-child(even) {
      width: 100%;
      margin-left: 0;
      padding: 0 0 32px 44px;
    }
    .timeline-step .timeline-dot,
    .timeline-step:nth-child(even) .timeline-dot { left: 0; right: auto; top: 22px; }
    .timeline-card { padding: 20px 22px; }
    .timeline-card h3 { font-size: 22px; }
    .timeline-card p { font-size: 15px; }
    .timeline-head p { font-size: 16px; }
    .timeline-foot { margin-top: 32px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .timeline-step.in-view .timeline-dot { animation: none; }
    .timeline-step.in-view .timeline-dot-final::after { animation: none; opacity: 0.6; }
  }

  /* ===== community logo marquee =====
     Sits between the first-year timeline and the testimonials, where it reads
     as proof rather than decoration. The logos stay in their real brand colours
     instead of being knocked back to grey, and the section carries its own generous
     padding because the testimonial block's diagonal cut pulls up 48px and
     would otherwise slice the bottom off the bottom row of logos. */
  /* Explicit white, not just the body showing through: the diagonal clip only
     reads as a shape if this section has a background of its own to cut the
     navy block above it with. */
  .community-section { background: var(--white); padding-bottom: 96px; }
  .community-section .section-inner { padding: 78px 20px 40px; }
  .community-section h2 { text-align: center; font-size: 36px; margin-bottom: 10px; }
  .community-kicker { text-align: center; font-size: 16px; color: #5a6270; margin: 0; }
  .logo-marquee {
    overflow: hidden;
    width: 100%;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }
  .logo-track {
    display: flex;
    align-items: center;
    gap: 72px;
    width: max-content;
    animation: scroll-logos 48s linear infinite;
  }
  .logo-track img {
    height: 88px;
    width: auto;
    object-fit: contain;
  }
  /* Hover treatment lives in the motion layer at the foot of this file. */
  @keyframes scroll-logos {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }
  @media (prefers-reduced-motion: reduce) {
    .logo-track { animation: none; overflow-x: auto; }
  }
  @media (max-width: 768px) {
    .community-section { padding-bottom: 64px; }
    .community-section .section-inner { padding: 56px 20px 30px; }
    .community-section h2 { font-size: 26px; }
    .community-kicker { font-size: 15px; }
    .logo-track { gap: 44px; }
    .logo-track img { height: 64px; }
  }

  /* ===== testimonials: continuous scrolling marquee, funky asymmetric card shapes ===== */
  /* Light section: the white cards read as raised paper on the tint rather
     than as bright shapes punched out of a dark block, so every shadow here
     is softened and tinted navy instead of plain black. */
  .testimonials-section { text-align: center; }
  .google-summary-badge {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    background: var(--white);
    border-radius: 12px;
    padding: 18px 28px;
    margin-top: 24px;
    box-shadow: 0 10px 26px rgba(31,51,84,0.12);
  }
  .google-summary-badge .google-g { width: 40px; height: 40px; flex-shrink: 0; }
  .google-summary-text { text-align: left; }
  .google-summary-rating { font-family: var(--font-header); font-size: 26px; color: var(--navy); display: flex; align-items: center; gap: 10px; }
  .google-summary-rating .stars { color: #fbbc05; font-size: 18px; letter-spacing: 2px; }
  .google-summary-text p { margin: 2px 0 0; font-size: 14px; color: #666; }
  @media (max-width: 500px) {
    .google-summary-badge { flex-direction: column; text-align: center; padding: 20px; }
    .google-summary-text { text-align: center; }
  }

  /* The reviews used to ride a CSS keyframe animation inside overflow: hidden,
     so you could watch one go past but never scroll back to finish reading it.
     The strip is a real scroll container now and catapult.js nudges scrollLeft
     along instead, which leaves the wheel, a trackpad swipe, a drag, and the
     keyboard all working normally. */
  .testimonial-marquee {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(31,51,84,0.3) transparent;
    width: 100%;
    margin-top: 14px;
    padding: 10px 0 18px;
  }
  .testimonial-marquee::-webkit-scrollbar { height: 8px; }
  .testimonial-marquee::-webkit-scrollbar-thumb { background: rgba(31,51,84,0.28); border-radius: 999px; }
  .testimonial-marquee::-webkit-scrollbar-track { background: transparent; }
  /* Native scrolling alone is invisible on a desktop with no visible
     scrollbar, so the strip gets a labelled pair of arrows as well. */
  .testimonial-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin: 28px 0 0;
  }
  .testimonial-hint {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #6b7280;
    margin: 0;
  }
  .testimonial-nav-buttons { display: flex; gap: 10px; }
  .testimonial-arrow {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 2px solid rgba(31,51,84,0.16);
    background: var(--white);
    color: var(--navy);
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  }
  .testimonial-arrow:hover { background: var(--navy); border-color: var(--navy); color: var(--white); transform: translateY(-2px); }
  .testimonial-arrow:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
  .testimonial-arrow:disabled { opacity: 0.35; cursor: default; }
  .testimonial-arrow:disabled:hover { background: var(--white); border-color: rgba(31,51,84,0.16); color: var(--navy); transform: none; }
  .testimonial-track {
    display: flex;
    gap: 28px;
    width: max-content;
  }
  .testimonial-card {
    background: var(--white);
    padding: 32px 28px;
    box-shadow: 0 16px 40px rgba(31,51,84,0.14);
    position: relative;
    text-align: left;
    width: 340px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
  }
  /* funky asymmetric corners, alternating tilt, for a hand-placed feel */
  .testimonial-card:nth-child(3n+1) { border-radius: 40px 8px 40px 8px; transform: rotate(-1.4deg); }
  .testimonial-card:nth-child(3n+2) { border-radius: 8px 40px 8px 40px; transform: rotate(1.2deg); }
  .testimonial-card:nth-child(3n) { border-radius: 28px 28px 4px 28px; transform: rotate(-0.8deg); }
  .testimonial-card:hover { transform: rotate(0deg) translateY(-6px); box-shadow: 0 22px 52px rgba(31,51,84,0.2); }
  .testimonial-card.google-review { padding: 24px 24px 28px; }
  .google-review-header { display: flex; align-items: flex-start; gap: 12px; }
  .google-review-header .reviewer-info { flex-grow: 1; }
  .google-review-header .who { color: var(--navy); font-weight: 600; font-size: 14px; margin: 0; }
  .google-review-header .stars { color: #fbbc05; font-size: 14px; letter-spacing: 2px; margin-top: 2px; }
  .google-review-header .google-g { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }
  .testimonial-card p.quote { font-size: 15px; font-style: normal; color: var(--navy); line-height: 1.5; flex-grow: 1; margin-top: 16px; }
  .testimonial-card .review-company { font-size: 12px; color: #888; margin-top: 14px; margin-bottom: 0; }
  @media (max-width: 600px) {
    .testimonial-card { width: 280px; }
  }

  /* ===== blog ===== */
  .blog-section h2 { text-align: center; margin-bottom: 48px; }
  .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .blog-card { transition: transform 0.25s ease; border-radius: 8px; overflow: hidden; padding-bottom: 8px; }
  .blog-card:hover { transform: translateY(-6px); }
  .blog-card .img-wrap { overflow: hidden; border-radius: 8px; margin-bottom: 16px; }
  .blog-card img { width: 100%; height: 180px; object-fit: cover; transition: transform 0.35s ease; }
  .blog-card:hover img { transform: scale(1.08); }
  .blog-card .cat { color: var(--orange); font-size: 14px; font-weight: 600; text-transform: uppercase; }
  .blog-card h3 { font-size: 24px; margin: 8px 0; }
  .blog-card a.read-more { color: var(--orange); text-decoration: none; font-weight: 600; }
  .blog-card a.read-more .arrow { display: inline-block; transition: transform 0.2s ease; }
  .blog-card:hover a.read-more .arrow { transform: translateX(4px); }
  @media (max-width: 900px) { .blog-grid { grid-template-columns: 1fr; } }

  /* ===== contact =====
     The rocket-launch photo runs the full width of the viewport rather than
     sitting inside a bordered card, so the launch reads at full scale. The
     teal frame that used to box it in moved to the top edge of the form, which
     keeps the brand accent without caging the image. */
  .contact-section {
    position: relative;
    background-image: url('/images/contact-photo.jpg');
    background-size: cover;
    background-position: center 38%;
    overflow: hidden;
  }
  /* A light navy wash across the whole photo so the form edge and the white
     type inside it never land on a blown-out patch of sky. */
  .contact-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(12,21,36,0.30) 0%, rgba(12,21,36,0.14) 45%, rgba(12,21,36,0.38) 100%);
    pointer-events: none;
  }
  .contact-section .section-inner { position: relative; padding: 132px 20px; }
  .contact-box {
    position: relative;
    display: flex;
    justify-content: center;
  }
  /* Held back from opaque white on purpose: the rocket-launch photo behind this
     card is the whole point of the section, so it shows through the form. */
  .contact-form {
    position: relative;
    background: rgba(255,255,255,0.78);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    border-top: 7px solid var(--teal);
    box-shadow: 0 22px 50px rgba(12,21,36,0.35);
    max-width: 560px;
    width: 100%;
    padding: 44px 48px;
  }
  .contact-form input, .contact-form textarea { background: rgba(255,255,255,0.9); }
  .contact-form h2 { margin-bottom: 10px; font-size: 42px; }
  .contact-form p { font-size: 18px; margin-bottom: 22px; }
  .contact-form label { display: block; font-weight: 500; margin: 14px 0 6px; font-size: 15px; }
  .contact-form input, .contact-form textarea {
    width: 100%; padding: 12px 14px; border: 1px solid #ccc; font-family: var(--font-body); font-size: 16px;
  }
  .contact-form .btn { font-size: 17px; padding: 16px 32px; }
  .contact-form button { margin-top: 22px; }

  /* ===== footer ===== */
  footer.site-footer {
    background: linear-gradient(160deg, #1f3354 0%, #172846 45%, #0c1524 100%);
    color: var(--white);
    padding: 72px 40px 32px;
    border-top: 6px solid var(--teal);
  }
  .footer-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 40px;
    text-align: left;
    padding-bottom: 40px;
  }
  .footer-col h4 { color: var(--white); font-size: 16px; margin-bottom: 18px; letter-spacing: 0.03em; }
  .footer-col p { color: rgba(255,255,255,0.75); font-size: 15px; line-height: 1.6; }
  .footer-col ul { list-style: none; margin: 0; padding: 0; }
  .footer-col ul li { margin-bottom: 10px; }
  .footer-col ul a { color: rgba(255,255,255,0.8); text-decoration: none; font-size: 15px; }
  .footer-col ul a:hover { color: var(--teal); }
  /* `> a >` matters: a bare `.footer-logo img` also matched the three social
     icons further down the same column, and the margin-bottom below then
     applied to them as well. A flex container centres an item's margin box,
     so each 54px icon centred as a 70px box and sat 8px above the middle of
     its circle. The logo link is a direct child of this column; the social
     anchors sit inside .socials, one level deeper, so this no longer reaches
     them. */
  .footer-logo > a > img { height: 36px; width: auto; margin-bottom: 16px; }
  /* Centred rather than left-aligned so the row does not disappear into the
     column edge. The artwork files were re-cut to fill 91% of their own square,
     so the image box below is very nearly the artwork's real size -- which is
     what lets these read at a glance where the old padded files did not. The
     box stays under ~70% of the circle's diameter because a square icon any
     larger than that pushes its corners past the circle's edge. */
  footer.site-footer .socials { margin: 26px 0 0; display: flex; gap: 18px; justify-content: center; }
  footer.site-footer .socials a {
    width: 76px; height: 76px; border-radius: 50%;
    background: var(--white); display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 20px rgba(0,0,0,0.28);
    transition: background 0.2s ease, transform 0.2s ease;
  }
  footer.site-footer .socials a img { width: 54px; height: 54px; margin: 0; object-fit: contain; }
  footer.site-footer .socials a:hover { background: var(--teal); transform: translateY(-3px); }
  .footer-bottom {
    max-width: 1200px;
    margin: 0 auto;
    border-top: 1px solid rgba(255,255,255,0.15);
    padding-top: 24px;
    text-align: center;
    font-size: 14px;
    color: rgba(255,255,255,0.6);
  }
  @media (max-width: 900px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 600px) {
    .footer-grid { grid-template-columns: 1fr; text-align: center; }
  }

  /* ===== sticky call button =====
     Was a hard teal rectangle that pulsed by scaling the whole button, which
     made the label wobble. Now a gradient pill: the button itself holds still
     and two staggered rings radiate out from behind it, so the motion reads as
     a signal rather than a twitch. Matches the pill-and-halo treatment the
     standalone landing and proposal pages already use. */
  .call-button {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 100;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 26px 12px 12px;
    background: linear-gradient(135deg, var(--orange) 0%, #fa7a3c 55%, var(--gold) 100%);
    color: var(--white);
    text-decoration: none;
    border-radius: 999px;
    font-family: var(--font-button);
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
    letter-spacing: 0.01em;
    box-shadow: 0 14px 34px rgba(31,51,84,0.32);
    /* Keeps the rings tucked behind the pill without needing a z-index on the
       button that would fight the rest of the page. */
    isolation: isolate;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
  }
  .call-button .call-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 50%;
    background: var(--white);
    color: var(--orange);
  }
  .call-button .call-icon svg { display: block; }
  .call-button .call-label { white-space: nowrap; }
  .call-button .call-halo {
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 999px;
    border: 2px solid rgba(67,204,222,0.75);
    animation: call-halo 2.4s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
  }
  .call-button .call-halo.delay { animation-delay: 1.2s; }
  @keyframes call-halo {
    0%   { transform: scale(1);    opacity: 0.85; }
    70%  { transform: scale(1.28); opacity: 0;    }
    100% { transform: scale(1.28); opacity: 0;    }
  }
  /* The handset gives a small double-ring on the same cycle as the halo, which
     is what makes the button read as "ringing" rather than just glowing. */
  .call-button .call-icon svg { animation: call-shake 2.4s ease-in-out infinite; }
  @keyframes call-shake {
    0%, 62%, 100%   { transform: rotate(0deg); }
    66%, 74%        { transform: rotate(-13deg); }
    70%, 78%        { transform: rotate(13deg); }
    82%             { transform: rotate(0deg); }
  }
  .call-button:hover {
    transform: translateY(-3px);
    filter: saturate(1.08);
    box-shadow: 0 20px 44px rgba(246,81,47,0.4);
  }
  .call-button:hover .call-halo,
  .call-button:hover .call-icon svg { animation-play-state: paused; }
  .call-button:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }
  @media (prefers-reduced-motion: reduce) {
    .call-button .call-halo { animation: none; opacity: 0.5; }
    .call-button .call-icon svg { animation: none; }
  }
  /* Below phone width the label is the first thing to go: a 60px circle keeps
     the tap target generous without covering a third of the screen. */
  @media (max-width: 600px) {
    .call-button {
      right: 16px;
      bottom: 16px;
      padding: 11px;
      gap: 0;
    }
    .call-button .call-label { display: none; }
  }

  /* ===== scroll-reveal ===== */
  .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }
  .reveal.in-view { opacity: 1; transform: translateY(0); }
  @media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
  }

  /* ===== mobile ===== */
  @media (max-width: 768px) {
    h1, h2 { font-size: 21px; }
    body { font-size: 13px; }
    /* The homepage hero sets its own phone insets up with its type scale, in
       the hero block above -- repeating a margin/padding pair here would land
       later in the file and quietly win. */
    .section-inner { padding: 48px 24px; }
    .contact-section .section-inner { padding: 72px 20px; }
    .contact-box { padding: 0; }
    .contact-form { padding: 20px; }
    .call-button { font-size: 15px; }
  }

/* =========================================================================
   INTERIOR PAGES
   The site header is absolutely positioned over the homepage hero video, so
   every interior page opens with a .page-hero colour block that it can sit on.
   ========================================================================= */

.page-hero {
  position: relative;
  overflow: hidden;
  background: var(--gradient-navy);
  color: var(--white);
  padding: 170px 40px 90px;
  text-align: center;
}
.page-hero::after {
  content: "";
  position: absolute;
  right: -120px;
  top: -180px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(67,204,222,0.38), rgba(253,178,55,0.10) 58%, transparent 74%);
  z-index: 0;
}
.page-hero-inner { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; }
.page-hero .eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 18px;
}
.page-hero h1 { color: var(--white); font-size: 68px; line-height: 1.05; margin-bottom: 20px; }
.page-hero p { color: rgba(255,255,255,0.82); font-size: 20px; max-width: 700px; margin: 0 auto; }
.page-hero .btn { margin-top: 34px; }
@media (max-width: 900px) {
  .page-hero { padding: 140px 24px 70px; }
  .page-hero h1 { font-size: 40px; }
  .page-hero p { font-size: 16px; }
  .page-hero .eyebrow { font-size: 12px; }
}

/* section heading helper used across interior pages */
.section-head { max-width: 820px; margin: 0 auto 56px; text-align: center; }
.section-head .eyebrow {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 14px;
}
.bg-navy-gradient .section-head .eyebrow,
.bg-teal-gradient .section-head .eyebrow { color: var(--gold); }
.bg-orange-gradient .section-head .eyebrow { color: var(--navy); }
.section-head p { font-size: 19px; color: #555; margin: 0; }
.bg-navy-gradient .section-head p,
.bg-teal-gradient .section-head p,
.bg-orange-gradient .section-head p { color: rgba(255,255,255,0.85); }
@media (max-width: 768px) {
  .section-head { margin-bottom: 36px; }
  .section-head p { font-size: 15px; }
}

/* ===== generic card grid (services, about values, blog list) ===== */
.card-grid { display: grid; gap: 28px; }
.card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .card-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
  .card-grid.cols-3, .card-grid.cols-2 { grid-template-columns: 1fr; }
}
@media (max-width: 600px) { .card-grid.cols-4 { grid-template-columns: 1fr; } }

.tile {
  background: var(--white);
  border-radius: 10px;
  padding: 32px 28px;
  box-shadow: 0 14px 34px rgba(31,51,84,0.12);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.tile:hover { transform: translateY(-8px); box-shadow: 0 22px 44px rgba(31,51,84,0.2); }
.tile h3 { font-size: 24px; margin-bottom: 10px; }
.tile p { font-size: 16px; color: #555; margin: 0; }
.tile .rule { width: 48px; height: 4px; background: var(--orange); border-radius: 2px; margin-bottom: 18px; transition: width 0.25s ease; }
.tile:hover .rule { width: 80px; }
.tile .step-num {
  font-family: var(--font-header);
  font-size: 40px;
  line-height: 1;
  color: var(--teal);
  margin-bottom: 10px;
}
.tile a.tile-link { color: var(--orange); font-weight: 600; text-decoration: none; font-size: 16px; display: inline-block; margin-top: 16px; }
.tile a.tile-link .arrow { display: inline-block; transition: transform 0.2s ease; }
.tile:hover a.tile-link .arrow { transform: translateX(5px); }
a.tile { text-decoration: none; display: block; color: inherit; }

/* ===== long-form prose (blog posts, terms) ===== */
.prose { font-size: 19px; line-height: 1.75; color: #333; }
.prose h2 { font-size: 34px; margin: 48px 0 16px; }
.prose h3 { font-size: 25px; margin: 36px 0 12px; }
.prose h4 { font-family: var(--font-body); font-weight: 700; font-size: 19px; color: var(--navy); margin: 28px 0 10px; }
.prose p { margin: 0 0 22px; }
.prose ul, .prose ol { margin: 0 0 24px; padding-left: 26px; }
.prose li { margin-bottom: 12px; }
.prose a { color: var(--orange); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--navy); }
.prose strong { font-weight: 600; color: var(--navy); }
.prose img { border-radius: 10px; margin: 32px 0; }
.prose blockquote {
  margin: 32px 0;
  padding: 4px 0 4px 26px;
  border-left: 6px solid var(--teal);
  font-size: 22px;
  line-height: 1.6;
  color: var(--navy);
}
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 28px; font-size: 16px; }
.prose th, .prose td { text-align: left; padding: 12px 14px; border-bottom: 1px solid #e6e6ea; }
.prose th { font-weight: 600; color: var(--navy); background: #f7f7f9; }
.prose hr { border: none; border-top: 1px solid #e6e6ea; margin: 40px 0; }
@media (max-width: 768px) {
  .prose { font-size: 16px; }
  .prose h2 { font-size: 24px; margin: 34px 0 12px; }
  .prose h3 { font-size: 20px; }
  .prose h4 { font-size: 17px; }
  .prose blockquote { font-size: 18px; }
}

/* ===== article layout ===== */
.article-wrap { max-width: 820px; margin: 0 auto; padding: 64px 24px 20px; }
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
  color: var(--orange);
  text-decoration: none;
  margin-bottom: 28px;
}
.back-link:hover { color: var(--navy); }
.back-link .arrow { display: inline-block; transition: transform 0.2s ease; }
.back-link:hover .arrow { transform: translateX(-4px); }
.pill {
  display: inline-block;
  background: var(--orange);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 4px;
}
.pill.teal { background: var(--teal); }
.pill.navy { background: var(--navy); }
.pill.gold { background: var(--gold); color: var(--navy); }
.pill.ghost { background: transparent; border: 1px solid rgba(31,51,84,0.25); color: var(--navy); }
.article-title { font-size: 54px; line-height: 1.06; margin: 18px 0 14px; }
.article-meta {
  font-size: 15px;
  color: #777;
  padding-bottom: 22px;
  border-bottom: 4px solid var(--teal);
  margin-bottom: 36px;
}
.article-hero { width: 100%; border-radius: 10px; margin-bottom: 36px; box-shadow: 0 18px 44px rgba(31,51,84,0.18); }
@media (max-width: 768px) {
  .article-wrap { padding: 40px 20px 12px; }
  .article-title { font-size: 30px; }
  .article-meta { font-size: 13px; }
}

.article-cta {
  margin: 56px 0 0;
  background: var(--gradient-teal);
  color: var(--white);
  border-radius: 12px;
  padding: 48px 40px;
  text-align: center;
}
.article-cta h3 { color: var(--white); font-size: 34px; margin-bottom: 12px; }
.article-cta p { color: rgba(255,255,255,0.9); font-size: 18px; max-width: 520px; margin: 0 auto 26px; }
@media (max-width: 768px) {
  .article-cta { padding: 32px 24px; }
  .article-cta h3 { font-size: 24px; }
  .article-cta p { font-size: 15px; }
}

.related-wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.related-card { background: var(--white); border-radius: 10px; padding: 26px 24px; box-shadow: 0 12px 30px rgba(31,51,84,0.1); text-decoration: none; display: block; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.related-card:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(31,51,84,0.18); }
.related-card h3 { font-size: 21px; margin: 14px 0 8px; }
.related-card p { font-size: 15px; color: #555; margin: 0; }

/* ===== blog index ===== */
.post-card { background: var(--white); border-radius: 10px; overflow: hidden; box-shadow: 0 14px 34px rgba(31,51,84,0.12); text-decoration: none; display: flex; flex-direction: column; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.post-card:hover { transform: translateY(-8px); box-shadow: 0 24px 50px rgba(31,51,84,0.2); }
.post-card .thumb { overflow: hidden; aspect-ratio: 16 / 9; background: #eef0f3; }
.post-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.post-card:hover .thumb img { transform: scale(1.07); }
.post-card .body { padding: 24px 24px 28px; display: flex; flex-direction: column; flex-grow: 1; }
.post-card h3 { font-size: 23px; line-height: 1.2; margin: 14px 0 10px; }
.post-card p { font-size: 15.5px; color: #555; margin: 0 0 18px; }
.post-card .meta { font-size: 13px; color: #888; margin-top: auto; }

.featured-post {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0;
  background: var(--white);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(31,51,84,0.18);
  text-decoration: none;
  color: inherit;
}
.featured-post .thumb { min-height: 340px; overflow: hidden; }
.featured-post .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.featured-post:hover .thumb img { transform: scale(1.05); }
.featured-post .body { padding: 44px 44px; display: flex; flex-direction: column; justify-content: center; }
.featured-post h2 { font-size: 36px; line-height: 1.12; margin: 16px 0 14px; }
.featured-post p { font-size: 17px; color: #555; }
@media (max-width: 900px) {
  .featured-post { grid-template-columns: 1fr; }
  .featured-post .thumb { min-height: 220px; }
  .featured-post .body { padding: 28px 24px; }
  .featured-post h2 { font-size: 24px; }
  .featured-post p { font-size: 15px; }
}

.filter-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 48px; }
.filter-row button {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  background: var(--white);
  border: 2px solid #e6e6ea;
  border-radius: 999px;
  padding: 9px 20px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.filter-row button:hover { border-color: var(--teal); }
.filter-row button.active { background: var(--navy); border-color: var(--navy); color: var(--white); }
.post-card.is-hidden { display: none; }
.empty-state { text-align: center; padding: 60px 20px; color: #777; font-size: 18px; }

/* ===== FAQ accordion ===== */
.faq-list { max-width: 880px; margin: 0 auto; }
.faq-item {
  background: var(--white);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(31,51,84,0.1);
  margin-bottom: 16px;
  overflow: hidden;
  border-left: 6px solid var(--teal);
}
.faq-item:nth-child(3n+2) { border-left-color: var(--orange); }
.faq-item:nth-child(3n) { border-left-color: var(--gold); }
.faq-q {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-header);
  font-size: 23px;
  color: var(--navy);
  padding: 24px 62px 24px 26px;
  position: relative;
  line-height: 1.25;
}
.faq-q:hover { color: var(--orange); }
.faq-q .sign {
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}
.faq-q .sign::before, .faq-q .sign::after {
  content: "";
  position: absolute;
  background: var(--orange);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.faq-q .sign::before { left: 0; top: 11px; width: 26px; height: 4px; }
.faq-q .sign::after { left: 11px; top: 0; width: 4px; height: 26px; }
.faq-item.open .faq-q .sign::after { transform: rotate(90deg); opacity: 0; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.faq-a-inner { padding: 0 30px 26px; font-size: 17px; line-height: 1.7; color: #444; }
.faq-a-inner p { margin: 0 0 16px; }
.faq-a-inner p:last-child { margin-bottom: 0; }
.faq-a-inner a { color: var(--orange); font-weight: 600; }
.faq-a-inner ul { margin: 0 0 16px; padding-left: 22px; }
.faq-a-inner li { margin-bottom: 8px; }
@media (max-width: 768px) {
  .faq-q { font-size: 18px; padding: 18px 52px 18px 20px; }
  .faq-q .sign { width: 20px; height: 20px; right: 18px; }
  .faq-q .sign::before { top: 8px; width: 20px; height: 4px; }
  .faq-q .sign::after { left: 8px; width: 4px; height: 20px; }
  .faq-a-inner { padding: 0 22px 20px; font-size: 15px; }
}

/* ===== under construction pages ===== */
.uc-section {
  position: relative;
  overflow: hidden;
  background: var(--gradient-navy);
  color: var(--white);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 150px 24px 90px;
  text-align: center;
}
.uc-stars { position: absolute; inset: 0; z-index: 0; opacity: 0.55; }
.uc-star { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--white); animation: uc-twinkle 3.6s ease-in-out infinite; }
@keyframes uc-twinkle { 0%, 100% { opacity: 0.15; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.3); } }
.uc-inner { position: relative; z-index: 2; max-width: 760px; }
.uc-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(67,204,222,0.5);
  color: var(--teal);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 8px 18px;
  border-radius: 999px;
  margin-bottom: 28px;
}
.uc-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); animation: uc-blink 1.4s ease-in-out infinite; }
@keyframes uc-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
.uc-inner h1 { color: var(--white); font-size: 78px; line-height: 1; margin-bottom: 10px; }
.uc-inner h1 em { color: var(--gold); font-style: normal; }
.uc-kicker { font-family: var(--font-header); font-size: 30px; color: var(--teal); margin: 0 0 22px; }
.uc-inner p.lede { color: rgba(255,255,255,0.85); font-size: 20px; max-width: 580px; margin: 0 auto 14px; }
.uc-rocket { font-size: 56px; line-height: 1; margin: 0 auto 26px; width: 90px; }
.uc-rocket svg { width: 90px; height: 90px; animation: uc-hover 3s ease-in-out infinite; }
@keyframes uc-hover { 0%, 100% { transform: translateY(0) rotate(-8deg); } 50% { transform: translateY(-16px) rotate(-4deg); } }
.uc-meter { max-width: 420px; margin: 34px auto 30px; text-align: left; }
.uc-meter-label { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.7); margin-bottom: 10px; }
.uc-meter-track { height: 10px; border-radius: 999px; background: rgba(255,255,255,0.15); overflow: hidden; }
.uc-meter-fill { height: 100%; border-radius: 999px; background: var(--gradient-orange); width: 0; animation: uc-fill 2.2s ease-out forwards; }
@keyframes uc-fill { to { width: var(--uc-progress, 65%); } }
.uc-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }
.uc-meanwhile { margin-top: 44px; padding-top: 30px; border-top: 1px solid rgba(255,255,255,0.18); }
.uc-meanwhile h2 { color: var(--white); font-size: 26px; margin-bottom: 18px; }
.uc-links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.uc-links a {
  display: inline-block;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.2);
  color: var(--white);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: 6px;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.uc-links a:hover { background: var(--teal); border-color: var(--teal); }
@media (prefers-reduced-motion: reduce) {
  .uc-star, .uc-badge .dot, .uc-rocket svg { animation: none; }
  .uc-meter-fill { animation: none; width: var(--uc-progress, 65%); }
}
@media (max-width: 768px) {
  .uc-section { padding: 120px 20px 70px; min-height: auto; }
  .uc-inner h1 { font-size: 40px; }
  .uc-kicker { font-size: 20px; }
  .uc-inner p.lede { font-size: 16px; }
  .uc-meanwhile h2 { font-size: 20px; }
}

/* ===== services detail list (services.html) ===== */
.svc-row {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 32px;
  align-items: start;
  background: var(--white);
  border-radius: 12px;
  padding: 34px 36px;
  box-shadow: 0 14px 34px rgba(31,51,84,0.1);
  margin-bottom: 24px;
}
.svc-row .svc-media { width: 210px; }
/* The glyph tile matches the clip tile's 3:2 so a row with artwork and a row
   without line up. The clips get their framing from .service-icon; here they
   only lose the drop shadow, because the row is already a raised white card. */
.svc-row .svc-media video, .svc-row .svc-media .svc-glyph {
  width: 210px; height: auto; aspect-ratio: 3 / 2; border-radius: 10px; display: block;
}
.svc-row .svc-media video.service-icon { box-shadow: none; }
.svc-row .svc-media .svc-glyph {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(67,204,222,0.16), rgba(253,178,55,0.18));
  font-family: var(--font-header); font-size: 40px; color: var(--navy);
}
.svc-row h3 { font-size: 30px; margin-bottom: 10px; }
.svc-row p { font-size: 17px; color: #555; margin: 0 0 18px; }
.svc-row ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 26px; }
.svc-row li { position: relative; padding-left: 28px; font-size: 16px; font-weight: 500; color: var(--navy); }
.svc-row li::before { content: "\2713"; position: absolute; left: 0; color: var(--teal); font-weight: 700; }
@media (max-width: 900px) {
  .svc-row { grid-template-columns: 1fr; gap: 20px; padding: 26px 22px; }
  .svc-row .svc-media, .svc-row .svc-media video, .svc-row .svc-media .svc-glyph { width: 100%; max-width: 300px; }
  .svc-row h3 { font-size: 23px; }
  .svc-row p { font-size: 15px; }
  .svc-row ul { grid-template-columns: 1fr; }
  .svc-row li { font-size: 15px; }
}

/* ===== team (about) ===== */
/* Two founders rather than a full row, so the pair is held to a narrower
   centred band instead of being stretched to the full 1280px grid. */
.team-grid { max-width: 800px; margin: 0 auto; }
.team-grid .team-card .body { text-align: center; }
.team-card { background: var(--white); border-radius: 12px; overflow: hidden; box-shadow: 0 18px 44px rgba(31,51,84,0.14); }
.team-card .portrait { aspect-ratio: 1 / 1; overflow: hidden; background: #eef0f3; }
.team-card .portrait img { width: 100%; height: 100%; object-fit: cover; }
.team-card .body { padding: 26px 26px 30px; }
.team-card h3 { font-size: 26px; margin-bottom: 4px; }
.team-card .role { color: var(--orange); font-weight: 600; font-size: 15px; margin-bottom: 4px; }
.team-card .focus { color: #888; font-size: 14px; margin-bottom: 14px; }
.team-card p { font-size: 15.5px; color: #555; margin: 0; }

/* ===== contact page ===== */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 44px; align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: 28px; } }
.contact-card { background: var(--white); border-radius: 12px; padding: 36px 34px; box-shadow: 0 18px 44px rgba(31,51,84,0.12); }
.contact-card h2 { font-size: 34px; }
.contact-card h3 { font-size: 26px; }
.contact-method { display: flex; gap: 16px; align-items: center; text-decoration: none; padding: 16px 0; border-bottom: 1px solid #ebebef; }
.contact-method:last-of-type { border-bottom: none; }
.contact-method .ico { width: 58px; height: 58px; border-radius: 50%; background: linear-gradient(135deg, rgba(67,204,222,0.2), rgba(253,178,55,0.22)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
/* The Facebook/Instagram/message artwork and the inline phone and envelope SVGs
   both fill close to their whole box now, so one size keeps the four rows
   optically even instead of the PNGs looking shrunken next to the SVGs. */
.contact-method .ico img, .contact-method .ico svg { width: 32px; height: 32px; object-fit: contain; }
.contact-method .label { font-family: var(--font-header); font-size: 19px; color: var(--navy); }
.contact-method .value { font-size: 15px; color: #666; word-break: break-word; }
.contact-method:hover .label { color: var(--orange); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }
.field label { display: block; font-weight: 500; margin: 14px 0 6px; font-size: 15px; color: var(--navy); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--navy);
  background: var(--white);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(67,204,222,0.25); }
.field textarea { min-height: 130px; resize: vertical; }
.form-note { font-size: 14px; color: #777; margin-top: 14px; }
.form-success {
  display: none;
  background: rgba(67,204,222,0.14);
  border: 1px solid var(--teal);
  border-radius: 8px;
  padding: 16px 18px;
  color: var(--navy);
  font-weight: 500;
  margin-top: 18px;
}
.form-success.show { display: block; }
.hp-field { position: absolute; left: -9999px; opacity: 0; }

/* ===== misc ===== */
.center { text-align: center; }
.mt-40 { margin-top: 40px; }
.cta-band { text-align: center; }
.cta-band h2 { color: var(--white); max-width: 820px; margin: 0 auto 14px; }
.cta-band p { color: rgba(255,255,255,0.85); font-size: 19px; max-width: 620px; margin: 0 auto 30px; }
.cta-band .btn { margin: 0 6px 10px; }
@media (max-width: 768px) { .cta-band p { font-size: 15px; } }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--white); color: var(--navy); padding: 12px 18px; z-index: 999; }
.skip-link:focus { left: 12px; top: 12px; }

/* link out of a services detail row to that service's own page */
.svc-row a.svc-link {
  display: inline-block;
  margin-top: 18px;
  font-weight: 600;
  font-size: 16px;
  color: var(--orange);
  text-decoration: none;
}
.svc-row a.svc-link:hover { color: var(--navy); }
.svc-row a.svc-link .arrow { display: inline-block; transition: transform 0.2s ease; }
.svc-row:hover a.svc-link .arrow { transform: translateX(5px); }

/* ===== article header band =====
   The site header is absolutely positioned and its logo/links are white, so a
   blog post cannot open on a white background. This dark band gives it
   something to sit on and carries the back link, category pill, and title. */
.article-head {
  position: relative;
  overflow: hidden;
  background: var(--gradient-navy);
  color: var(--white);
}
.article-head::after {
  content: "";
  position: absolute;
  right: -140px;
  top: -200px;
  width: 540px;
  height: 540px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(67,204,222,0.32), rgba(253,178,55,0.10) 58%, transparent 74%);
  z-index: 0;
}
.article-head .article-wrap { position: relative; z-index: 1; padding: 170px 24px 60px; }
.article-head .back-link { color: var(--teal); }
.article-head .back-link:hover { color: var(--gold); }
.article-head .article-title { color: var(--white); }
.article-head .article-meta {
  color: rgba(255,255,255,0.7);
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}
@media (max-width: 768px) {
  .article-head .article-wrap { padding: 130px 20px 42px; }
}
.related-wrap h2 { text-align: center; margin-bottom: 40px; }

/* ===== legal pages: table of contents and callout boxes ===== */
.legal-toc {
  background: #f7f8fa;
  border-left: 6px solid var(--teal);
  border-radius: 10px;
  padding: 26px 30px;
  margin: 0 0 44px;
}
.legal-toc h2 {
  font-size: 22px;
  margin: 0 0 14px;
}
.legal-toc ol { margin: 0; padding-left: 22px; columns: 2; column-gap: 34px; }
.legal-toc li { margin-bottom: 9px; font-size: 16px; }
.legal-toc a { color: var(--navy); text-decoration: none; font-weight: 500; }
.legal-toc a:hover { color: var(--orange); text-decoration: underline; }
@media (max-width: 768px) {
  .legal-toc { padding: 20px 22px; }
  .legal-toc ol { columns: 1; }
  .legal-toc li { font-size: 15px; }
}

.prose .callout {
  background: rgba(67,204,222,0.12);
  border-left: 6px solid var(--teal);
  border-radius: 8px;
  padding: 20px 24px;
  margin: 0 0 26px;
  font-size: 17px;
  line-height: 1.65;
}
.prose .callout.warn {
  background: rgba(246,81,47,0.1);
  border-left-color: var(--orange);
}
.prose .callout p:last-child { margin-bottom: 0; }
.prose .section-num {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 52px 0 0;
}
.prose .section-num + h2 { margin-top: 6px; }
@media (max-width: 768px) {
  .prose .callout { padding: 16px 18px; font-size: 15px; }
  .prose .section-num { margin-top: 36px; }
}
.featured-post.is-hidden { display: none; }

/* ===== e-book landing page (/ebook) =====
   The PDF is gated: the form has to be filled in before the download button
   appears, so the cover, the form, and the unlocked panel all live in one card
   column and swap places in the same spot. */
.ebook-gate-grid {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 56px;
  align-items: start;
}
.ebook-gate-cover { text-align: center; }
/* The cover PNG has a transparent background, so a box-shadow (which follows the
   border box, not the alpha) drew a rounded rectangle around the whole square
   canvas and read as an opaque card behind the book. drop-shadow follows the
   silhouette instead, matching the homepage cover. */
.ebook-gate-cover img {
  width: 100%;
  max-width: 420px;
  height: auto;
  filter: drop-shadow(0 26px 44px rgba(31, 51, 84, 0.30));
}
.ebook-facts { list-style: none; margin: 32px 0 0; padding: 0; text-align: left; display: inline-block; }
.ebook-facts li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 14px;
  font-size: 17px;
  color: #444;
}
.ebook-facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: var(--gradient-teal);
}
.ebook-facts strong { font-family: var(--font-header); font-size: 22px; color: var(--navy); margin-right: 4px; }

.ebook-gate-form { align-self: start; }
.ebook-locked {
  background: rgba(253, 178, 55, 0.18);
  border-left: 6px solid var(--gold);
  border-radius: 8px;
  padding: 14px 18px;
  margin: 0 0 4px;
  font-size: 16px;
  color: var(--navy);
}
.form-fineprint { font-size: 13px; color: #7b818c; line-height: 1.6; margin: 16px 0 0; }
.form-error {
  display: none;
  background: rgba(246, 81, 47, 0.1);
  border-left: 6px solid var(--orange);
  border-radius: 8px;
  padding: 16px 20px;
  margin-top: 22px;
  font-size: 16px;
  color: var(--navy);
}
.form-error.show { display: block; }
.form-error a { color: var(--orange); }
.ebook-unlocked h3 { font-size: 26px; margin-bottom: 10px; }
.ebook-unlocked .btn { margin-top: 18px; }

.ebook-points { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 56px; }
.ebook-point { display: flex; gap: 20px; align-items: flex-start; }
.ebook-point .num {
  flex-shrink: 0;
  font-family: var(--font-header);
  font-size: 34px;
  line-height: 1;
  color: var(--gold);
}
.ebook-point h3 { color: var(--white); font-size: 22px; margin-bottom: 8px; }
.ebook-point p { color: rgba(255, 255, 255, 0.78); font-size: 16px; margin: 0; }

@media (max-width: 900px) {
  .ebook-gate-grid { grid-template-columns: 1fr; gap: 44px; }
  .ebook-points { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 768px) {
  .ebook-gate-cover img { max-width: 300px; }
  .ebook-point .num { font-size: 28px; }
  .ebook-point h3 { font-size: 19px; }
}

  /* =========================================================================
     MOTION & INTERACTION LAYER
     Everything here is additive: each rule either enhances a hover state or
     reads a custom property that catapult.js sets on scroll. If the script
     never runs, the properties keep their fallback values and the page simply
     sits still, so nothing is ever stuck invisible or half-animated.
     ========================================================================= */

  /* --- reading-progress bar, injected by the script on every page --- */
  .scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 4px;
    width: 100%;
    z-index: 200;
    transform: scaleX(var(--scroll-progress, 0));
    transform-origin: 0 50%;
    background: linear-gradient(90deg, var(--teal) 0%, var(--gold) 55%, var(--orange) 100%);
    pointer-events: none;
    will-change: transform;
  }

  /* --- staggered grid reveals ---
     Put .stagger-in on the container and its direct children arrive one after
     another instead of all at once. The observer in catapult.js adds .in-view
     to these the same way it does to .reveal. */
  .stagger-in > * {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .stagger-in.in-view > * { opacity: 1; transform: translateY(0); }
  .stagger-in > *:nth-child(1) { transition-delay: 0s; }
  .stagger-in > *:nth-child(2) { transition-delay: 0.09s; }
  .stagger-in > *:nth-child(3) { transition-delay: 0.18s; }
  .stagger-in > *:nth-child(4) { transition-delay: 0.27s; }
  .stagger-in > *:nth-child(5) { transition-delay: 0.36s; }
  .stagger-in > *:nth-child(6) { transition-delay: 0.45s; }
  .stagger-in > *:nth-child(n+7) { transition-delay: 0.54s; }

  /* --- hero copy drifts up and dims as the section leaves, so the fold has
         some depth instead of scrolling away as one flat plate --- */
  .hero-card {
    transform: translate3d(0, var(--hero-drift, 0px), 0);
    opacity: var(--hero-fade, 1);
    will-change: transform, opacity;
  }

  /* --- the decorative orb behind the stats counter-scrolls --- */
  .stats-orb { transform: translate3d(0, var(--orb-drift, 0px), 0); }

  /* --- marquees hold still while you are reading one --- */
  .logo-marquee:hover .logo-track { animation-play-state: paused; }
  .logo-track img { transition: transform 0.25s ease, filter 0.25s ease; }
  .logo-track img:hover { transform: scale(1.1) translateY(-4px); filter: drop-shadow(0 10px 18px rgba(31,51,84,0.22)); }

  /* --- the e-book cover breathes, and tips towards you on hover --- */
  .ebook-cover {
    animation: cover-float 6s ease-in-out infinite;
    transition: transform 0.3s ease, filter 0.3s ease;
  }
  .ebook-inner:hover .ebook-cover {
    animation-play-state: paused;
    transform: perspective(700px) rotateY(-11deg) rotateX(4deg) scale(1.05);
    filter: drop-shadow(0 22px 38px rgba(31,51,84,0.34));
  }
  @keyframes cover-float {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -12px; }
  }

  /* --- platform badges: they already drift on staggered delays, so this only
         adds the response to a pointer --- */
  .platform-badge { transition: filter 0.25s ease; }
  .platform-badge:hover { animation-play-state: paused; filter: brightness(1.15); }
  .platform-badge .icon-circle { transition: transform 0.25s ease, box-shadow 0.25s ease; }
  .platform-badge:hover .icon-circle { transform: scale(1.14); box-shadow: 0 16px 30px rgba(0,0,0,0.35); }

  /* --- service tabs: the active tab's underline slides in rather than
         snapping, and hovering an inactive tab previews it at half width --- */
  .tabs-nav button { position: relative; transition: color 0.2s ease; }
  .tabs-nav button::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 3px;
    background: var(--orange);
    transform: scaleX(0);
    transform-origin: 50% 50%;
    transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .tabs-nav button:hover { color: var(--orange); }
  .tabs-nav button:hover::after { transform: scaleX(0.5); }
  .tabs-nav button.active { border-bottom-color: transparent; }
  .tabs-nav button.active::after { transform: scaleX(1); }

  /* --- the big number swells with its card's hover lift --- */
  .stat-card { transition: transform 0.25s ease, box-shadow 0.25s ease; }
  .stat-num { transition: transform 0.25s ease; }
  .stat-card:hover .stat-num { transform: scale(1.06); }

  @media (prefers-reduced-motion: reduce) {
    .scroll-progress { display: none; }
    .stagger-in > * { opacity: 1; transform: none; transition: none; }
    .hero-card { transform: none; opacity: 1; }
    .stats-orb { transform: none; }
    .ebook-cover { animation: none; }
    .ebook-inner:hover .ebook-cover { transform: none; }
    .tabs-nav button::after { transition: none; }
  }

/* =========================================================================
   WEB DESIGN SERVICE PAGE (/services/web-design)
   The brief for this page was modern, plenty of white space, and not much
   colour, so it runs on white and one off-white tone with a single navy band
   for contrast. The diagonal section cuts and their seam decor carry the
   personality instead of background colour. All of the portfolio screenshots
   are PNGs with real transparency, so they sit directly on the section
   background with no card or plate behind them.
   ========================================================================= */

/* ----- hero with a video behind the copy ----- */
.page-hero.has-video { background: var(--navy); padding-bottom: 104px; }
.page-hero .hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* The clip has no alpha and its own colours, so a scrim does two jobs: it keeps
   the headline readable whatever frame is showing, and it pulls the footage back
   towards the navy the rest of the site uses. */
.page-hero .hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(112deg, rgba(31,51,84,0.94) 0%, rgba(31,51,84,0.8) 44%, rgba(31,51,84,0.5) 100%);
}
.page-hero.has-video::after { z-index: 1; }
.page-hero.has-video .page-hero-inner { z-index: 2; }

@media (max-width: 768px) {
  .page-hero.has-video { padding-bottom: 64px; }
}

/* ----- the portfolio grid ----- */
/* Three across, but the card count is not always a multiple of three, so this
   is flex rather than grid: full rows lay out identically and a short last row
   centres itself instead of hanging off the left edge. */
/* ===== post proof grid (social media page) =====
   Six real Facebook insight screenshots, side by side, no captions. The numbers
   are legible in the images themselves, so anything written underneath was just
   repeating them. All six sources were padded to one aspect ratio before they
   went in the repo, which is what lets them tile without ragged edges. */
/* Six across inside the standard 1280 container leaves each screenshot about
   190px wide, at which point the view counts inside them are unreadable. This
   band breaks out to a wider track so a single row still has legible numbers.
   .stagger-in only transforms its children, so translateX here is safe. */
.post-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  align-items: start;
  width: min(94vw, 1680px);
  margin-left: 50%;
  transform: translateX(-50%);
}
@media (max-width: 1100px) { .post-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; width: 100%; margin-left: 0; transform: none; } }
/* Two-up on a phone puts each screenshot under 180px wide, at which point the
   view and engagement figures inside them stop being legible, so narrow screens
   get one per row. */
@media (max-width: 560px) { .post-grid { grid-template-columns: 1fr; gap: 20px; max-width: 400px; margin: 0 auto; } }
.post-shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  background: var(--white);
  box-shadow: 0 8px 26px rgba(31,51,84,0.12);
}

.work-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 48px 36px; }
@media (max-width: 1000px) { .work-grid { gap: 38px 28px; } }
@media (max-width: 640px) { .work-grid { gap: 34px; } }

/* Usually an <a> to a live site, but the photo bands on /services/social-media
   and /services/content-creation use a <figure> instead, because those cards
   are proof rather than links. margin: 0 is there for the figure default. */
.work-card { display: block; margin: 0; text-decoration: none; flex: 0 1 calc((100% - 72px) / 3); min-width: 0; }
@media (max-width: 1000px) { .work-card { flex-basis: calc((100% - 28px) / 2); } }
@media (max-width: 640px) { .work-card { flex-basis: 100%; } }
.work-shot {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.35s ease;
}
.work-card:hover .work-shot,
.work-card:focus-visible .work-shot {
  transform: translateY(-10px) scale(1.03);
  filter: drop-shadow(0 22px 34px rgba(31,51,84,0.22));
}
.work-name { font-family: var(--font-header); font-size: 22px; line-height: 1.15; color: var(--navy); margin: 4px 0 5px; transition: color 0.2s ease; }
.work-card:hover .work-name { color: var(--orange); }
.work-what { font-size: 15px; color: #666; margin: 0 0 10px; }
.work-visit { font-size: 14px; font-weight: 600; letter-spacing: 0.02em; color: var(--orange); }
.work-visit .arrow { display: inline-block; transition: transform 0.2s ease; }
.work-card:hover .work-visit .arrow { transform: translateX(5px); }

/* ----- two-up copy and screenshot blocks (careers, redesigns) ----- */
.wd-split { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 58px; align-items: center; }
.wd-split.flip .wd-split-media { order: -1; }
.wd-split-media img { display: block; width: 100%; height: auto; }
.wd-split h2 { font-size: 44px; line-height: 1.06; margin-bottom: 16px; }
.wd-split > div > p { font-size: 18px; color: #555; margin: 0 0 18px; }
.bg-navy-gradient .wd-split h2 { color: var(--white); }
.bg-navy-gradient .wd-split > div > p { color: rgba(255,255,255,0.84); }
@media (max-width: 900px) {
  .wd-split { grid-template-columns: 1fr; gap: 34px; }
  .wd-split .wd-split-media { order: -1; }
  .wd-split h2 { font-size: 32px; }
  .wd-split > div > p { font-size: 16px; }
}

.wd-checks { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 11px; }
.wd-checks li { position: relative; padding-left: 30px; font-size: 16.5px; font-weight: 500; color: var(--navy); }
.wd-checks li::before { content: "\2713"; position: absolute; left: 0; top: -1px; color: var(--teal); font-weight: 700; }
.bg-navy-gradient .wd-checks li { color: rgba(255,255,255,0.92); }
.bg-navy-gradient .wd-checks li::before { color: var(--gold); }

/* ----- what every build includes (navy band) ----- */
.spec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 46px; }
@media (max-width: 900px) { .spec-grid { grid-template-columns: 1fr 1fr; gap: 30px; } }
@media (max-width: 600px) { .spec-grid { grid-template-columns: 1fr; gap: 26px; } }
.spec { border-top: 3px solid rgba(255,255,255,0.18); padding-top: 18px; }
.spec:nth-child(3n+1) { border-top-color: var(--teal); }
.spec:nth-child(3n+2) { border-top-color: var(--orange); }
.spec:nth-child(3n) { border-top-color: var(--gold); }
.spec h3 { color: var(--white); font-size: 21px; margin: 0 0 8px; }
.spec p { color: rgba(255,255,255,0.76); font-size: 15.5px; margin: 0; }
/* The spec list was written for the navy bands, so its type is white. Paid
   Advertising runs the same list on a mist band, where white type on white is
   invisible, so a light band flips it back to navy. The accent border colors
   above are deliberately left alone. */
.bg-white .spec h3, .bg-mist .spec h3, .bg-paper-sand .spec h3 { color: var(--navy); }
.bg-white .spec p, .bg-mist .spec p, .bg-paper-sand .spec p { color: #4b5563; }

/* ----- the plain-English money box ----- */
.wd-note {
  max-width: 900px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid #e6e8ee;
  border-left: 5px solid var(--orange);
  border-radius: 12px;
  padding: 32px 36px;
  box-shadow: 0 14px 34px rgba(31,51,84,0.08);
}
.wd-note h3 { font-size: 25px; margin: 0 0 10px; }
.wd-note p { font-size: 16.5px; color: #555; margin: 0 0 13px; }
.wd-note p:last-child { margin-bottom: 0; }
@media (max-width: 768px) {
  .wd-note { padding: 24px 22px; }
  .wd-note p { font-size: 15.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .work-shot, .work-name, .work-visit .arrow { transition: none; }
  .work-card:hover .work-shot { transform: none; }
}

/* The eyebrow label was only ever styled inside .page-hero and .section-head.
   These two-up blocks lead with one too, so it needs the same treatment here. */
.wd-split .eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 16px;
}