@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@1,600;1,700&family=Sora:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Instrument+Serif:ital,wght@0,400;1,400&family=Oswald:wght@500;600;700&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=general-sans@500,600&display=swap');

  :root{
    --bg-top:#ededed;
    --bg-bottom:#ededed;
    --maroon:#202020;
    --accent-red:#fb0155;
    --cta-1:#fb0155;
    --cta-2:#c30244;
    --body-text:rgba(23,23,23,.66);
    --card-radius:22px;
    --badge-bg:rgba(255,255,255,0.85);
    --card-bg:#ffffff;
  }

  *{box-sizing:border-box;}

  html,body{ margin:0; }

  body{
    background:var(--paper);
  }

  /* =========================================================
     HERO — "AI UGC Ads That Win."
     ========================================================= */
  .hero{
    padding:72px 24px 88px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    overflow:hidden;
    background:var(--paper);
  }

  .hero .eyebrow{
    display:inline-flex;
    align-items:center;
    padding:8px 18px;
    background:var(--badge-bg);
    border:1px solid rgba(20,20,20,0.14);
    border-radius:999px;
    font-size:13px;
    font-weight:600;
    letter-spacing:0.01em;
    color:var(--maroon);
    margin-bottom:22px;
    box-shadow:0 2px 10px rgba(0,0,0,0.05);
  }

  .hero h1{
    margin:0 0 20px;
    font-family:'DM Sans', sans-serif;
    font-weight:800;
    font-size:clamp(34px, 5.6vw, 58px);
    line-height:1.08;
    color:var(--maroon);
    letter-spacing:-0.01em;
    max-width:820px;
  }

  .hero h1 em{
    font-family:'Playfair Display', serif;
    font-style:italic;
    font-weight:700;
    color:var(--accent-red);
  }

  .hero .subtext{
    max-width:560px;
    margin:0 0 30px;
    font-size:clamp(15px, 1.6vw, 17px);
    line-height:1.55;
    color:var(--body-text);
  }

  .hero .cta{
    display:inline-block;
    margin:0 0 44px;
    padding:15px 34px;
    background:linear-gradient(180deg, var(--cta-1), var(--cta-2));
    color:#fff;
    font-weight:700;
    font-size:15px;
    border-radius:999px;
    text-decoration:none;
    box-shadow:0 10px 24px rgba(255,7,95,0.32);
    border:none;
    cursor:pointer;
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .hero .cta:hover{ transform:translateY(-1px); box-shadow:0 12px 28px rgba(255,7,95,0.4); }

  .hero .no-cc{
    display:flex;
    align-items:center;
    gap:7px;
    margin:16px 0 48px;
    font-size:13.5px;
    color:var(--body-text);
  }
  .hero .no-cc .check{
    width:16px;height:16px;
    background:var(--accent-red);
    border-radius:50%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
  }
  .hero .no-cc .check svg{ width:9px; height:9px; }

  .hero .carousel-wrap{
    width:100%;
    max-width:1240px;
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
    mask-image:linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
  }

  .hero .carousel-track{
    display:flex;
    gap:18px;
    width:max-content;
    animation:scroll-left 32s linear infinite;
  }

  .hero .carousel-wrap:hover .carousel-track{ animation-play-state:paused; }

  @keyframes scroll-left{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
  }

  .hero .card{
    position:relative;
    width:230px;
    aspect-ratio:9/16;
    border-radius:var(--card-radius);
    overflow:hidden;
    flex-shrink:0;
    background:var(--grad, linear-gradient(160deg,#3a3a3a,#000000));
    box-shadow:0 12px 30px rgba(0,0,0,0.08);
  }

  .hero .card video, .hero .card img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
  }

  .hero .card .placeholder-hint{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    color:rgba(255,255,255,0.85);
  }
  .hero .card .placeholder-hint svg{ width:34px; height:34px; opacity:.8; }

  .hero .card .badge{
    position:absolute;
    top:14px;
    left:14px;
    padding:5px 11px;
    background:var(--badge-bg);
    border-radius:999px;
    font-size:11px;
    font-weight:600;
    color:#171717;
    z-index:2;
  }

  .hero .card .scrim{
    position:absolute;
    left:0; right:0; bottom:0;
    height:52%;
    background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 100%);
    z-index:1;
  }

  .hero .card .creator{
    position:absolute;
    left:14px; right:14px; bottom:12px;
    display:flex;
    align-items:center;
    gap:9px;
    z-index:2;
  }

  .hero .creator .avatar{
    width:28px; height:28px;
    border-radius:50%;
    background:rgba(255,255,255,0.9);
    border:1.5px solid rgba(255,255,255,0.8);
    flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    font-size:11px; font-weight:700; color:var(--maroon);
  }

  .hero .creator .meta{ text-align:left; line-height:1.25; }
  .hero .creator .name{
    display:flex; align-items:center; gap:4px;
    font-size:12.5px; font-weight:700; color:#fff;
  }
  .hero .creator .name svg{ width:12px; height:12px; flex-shrink:0; }
  .hero .creator .followers{ font-size:11px; color:rgba(255,255,255,0.85); }

  @media (max-width:640px){
    .hero{ padding:52px 18px 64px; }
    .hero .card{ width:190px; }
  }

  /* =========================================================
     TESTIMONIALS — DESKTOP (Google-review style wall)
     Hidden on mobile; the Glowy swipe carousel takes over below.
     ========================================================= */
  .gr-testimonials{
    padding:96px 24px 108px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    background:#000000;
  }

  .gr-testimonials .gr-eyebrow{
    display:block;
    font-size:14px;
    font-weight:700;
    letter-spacing:.01em;
    color:#fb0155;
    margin-bottom:18px;
  }

  .gr-testimonials h2{
    margin:0 0 18px;
    font-weight:800;
    font-size:44px;
    line-height:1.1;
    color:#f5f5f7;
    letter-spacing:-0.01em;
  }
  .gr-testimonials h2 .accent{ color:#f5f5f7; }

  .gr-testimonials .subtext{
    margin:0 0 52px;
    font-size:16px;
    line-height:1.6;
    color:rgba(245,245,247,.56);
    max-width:760px;
  }

  .gr-testimonials .gr-wall{
    width:100%;
    max-width:1320px;
    overflow-x:hidden;
    overflow-y:visible;
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
    mask-image:linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
  }

  .gr-testimonials .gr-row{ overflow-x:hidden; overflow-y:visible; }

  .gr-testimonials .gr-track{
    display:flex;
    align-items:flex-start;
    gap:20px;
    width:max-content;
    animation:gr-scroll-left var(--dur, 50s) linear infinite;
  }
  .gr-testimonials .gr-row:hover .gr-track{ animation-play-state:paused; }

  @keyframes gr-scroll-left{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
  }

  .gr-testimonials .gr-card{
    flex:0 0 auto;
    align-self:flex-start;
    width:360px;
    background:#16171d;
    border:1px solid rgba(255,255,255,.08);
    border-radius:16px;
    padding:22px 22px 20px;
    text-align:left;
    box-shadow:0 12px 30px rgba(0,0,0,.35);
  }

  .gr-testimonials .gr-card-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:14px;
  }
  .gr-testimonials .gr-card-top svg.gr-google{
    width:22px;
    height:22px;
    flex-shrink:0;
  }

  .gr-testimonials .gr-stars{
    display:inline-flex;
    align-items:center;
    gap:2px;
  }
  .gr-testimonials .gr-stars svg{ width:16px; height:16px; }

  .gr-testimonials .gr-verified{
    width:15px; height:15px;
    margin-left:4px;
    flex-shrink:0;
  }

  .gr-testimonials .gr-card p.gr-quote{
    margin:0 0 8px;
    font-size:14.5px;
    line-height:1.6;
    color:rgba(245,245,247,.86);
  }
  .gr-testimonials .gr-card p.gr-quote.gr-clamped{
    display:-webkit-box;
    -webkit-line-clamp:4;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .gr-testimonials .gr-card p.gr-quote.gr-clamped.gr-expanded{
    display:block;
    -webkit-line-clamp:unset;
    overflow:visible;
  }

  .gr-testimonials .gr-read-more{
    display:block;
    margin:0 0 16px;
    padding:0;
    background:none;
    border:none;
    font-size:13px;
    font-family:inherit;
    color:rgba(245,245,247,.5);
    cursor:pointer;
  }
  .gr-testimonials .gr-read-more:hover{ color:#fff; }

  .gr-testimonials .gr-person{ display:flex; align-items:center; gap:12px; }

  .gr-testimonials .gr-person .gr-avatar{
    width:38px; height:38px;
    border-radius:50%;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .gr-testimonials .gr-person .gr-avatar svg{ width:20px; height:20px; }

  .gr-testimonials .gr-person .gr-name{ font-size:14px; font-weight:700; color:#f5f5f7; }
  .gr-testimonials .gr-person .gr-role{ font-size:12.5px; color:rgba(245,245,247,.5); }

  /* Desktop wall visible by default, Glowy mobile version hidden by default */
  #gwTestimonials{ display:none; }

  @media (max-width:768px){
    #gwTestimonials{ display:none; }
    .gr-testimonials{
      display:flex;
      padding:64px 20px 76px;
    }
    .gr-testimonials h2{ font-size:30px; }
    .gr-testimonials .subtext{ font-size:14px; margin-bottom:36px; }
    .gr-testimonials{ padding:48px 16px 34px; }
    .gr-testimonials .gr-card{ width:250px; padding:14px 14px 13px; border-radius:14px; }
    .gr-testimonials .gr-card p.gr-quote{ font-size:13.5px; line-height:1.5; }
    .gr-testimonials .gr-track{ gap:14px; }
    .gr-testimonials .gr-person .gr-avatar{ width:34px; height:34px; }
    .gr-testimonials .gr-person .gr-name{ font-size:13px; }
    .gr-testimonials .gr-person .gr-role{ font-size:11.5px; }
    .gr-testimonials .gr-wall{
      -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
      mask-image:linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
    }
  }


  /* =========================================================
     TESTIMONIALS — MOBILE (Glowy swipe carousel)
     Copied as-is from glowy_testimonials_iphone.html
     ========================================================= */
  #gwTestimonials{
    background:#000000; color:#ffffff;
    padding:4.5rem 1.3rem 5rem;
    font-family:var(--body, 'Sora', sans-serif);
    overflow:hidden;
  }
  .gw-test-wrap{ max-width:1160px; margin:0 auto; }
  .gw-test-eyebrow{
    font-family:var(--mono, 'IBM Plex Mono', monospace); font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase;
    color:#fb0155; margin:0 0 0.8rem;
  }
  .gw-test-title{
    font-family:var(--display, 'Instrument Serif', serif); font-weight:400; font-size:clamp(2rem,7vw,2.7rem);
    color:#ffffff; margin:0 0 2.4rem;
  }
  .gw-test-card{
    background:#171717; border:1px solid rgba(255,255,255,.14); border-radius:16px;
    padding:1.6rem 1.5rem; display:flex; flex-direction:column; justify-content:space-between;
    min-height:190px;
  }
  .gw-test-quote{
    font-family:var(--display, 'Instrument Serif', serif); font-style:italic; font-size:1.05rem; line-height:1.55;
    color:#ffffff; margin:0 0 1.4rem;
  }
  .gw-test-author{ font-family:var(--mono, 'IBM Plex Mono', monospace); font-size:0.8rem; color:#fb0155; margin:0; }

  .gw-test-dots{ display:flex; justify-content:center; gap:0.6rem; margin-top:1.6rem; }
  .gw-test-dot{
    width:8px; height:8px; border-radius:50%; border:1px solid #fb0155; background:transparent;
    padding:0; cursor:pointer;
  }
  .gw-test-dot.is-active{ background:#fb0155; }

  .gw-test-m{ display:block; }
  .gw-test-m-viewport{
    display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .gw-test-m-viewport::-webkit-scrollbar{ display:none; }
  .gw-test-m-slide{
    flex:0 0 100%; scroll-snap-align:start;
    display:flex; flex-direction:column; gap:1rem;
    padding-right:0.2rem;
  }
/* ===================== WHY CHOOSE US (Raul) — scoped styles ===================== */

/* ================================================================
   STANDALONE "WHY CHOOSE US" SECTION — extracted from the Raul HVAC
   site so it can be dropped into another page. Everything this
   section needs (design tokens, base reset, card/badge/heading
   helpers, the pinned-stack layout + crossfade JS, and the 3 photos
   as inline base64) is self-contained in this one file — just copy
   the <body> content and this <style>/<script> into your own page,
   or embed this whole file in an <iframe> if that's easier.

   HOW IT WORKS: all 3 cards sit in the exact same spot inside a
   sticky "pin" box. Card 1 stays put; scrolling slides card 2
   straight up to physically cover it, then card 3 covers card 2 the
   same way. Every card's position is a direct function of scroll
   progress (not a one-shot animation), so it's fully reversible on
   scroll up. See the commented JS at the bottom for the mechanics.

   TO CUSTOMIZE: replace the 3 photos/headings/paragraphs in the HTML
   below, and swap --primary/--foreground etc. in :root to match your
   own brand colours.

   ONE THING TO CHECK ON YOUR SITE: .why-stack-pin uses
   `top:110px` (see below) — that's the height of Raul's own sticky
   navbar. If your page has a fixed/sticky header of a different
   height, change that 110px to match (or to 0 if you have none),
   otherwise the pinned cards will sit with a gap or overlap under
   your header.
   ================================================================ */

:root{
  --foreground:#202020;
  --muted-light:rgba(23,23,23,.62);
  --primary:#fb0155;
  --radius-lg:24px;
  --shadow-sm:0 1px 2px 0 rgba(0,0,0,.05);
  --max-w:1152px;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

.whyus-section{
  width:100%;
  padding:40px 0;
  font-family:var(--font);
  color:var(--foreground);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  background:#000000;
}
.whyus-section img{ max-width:100%; display:block; }
.whyus-section h2,.whyus-section h3,.whyus-section p{ margin:0; }

.whyus-container{ max-width:var(--max-w); margin:0 auto; padding:0 24px; }

.whyus-section-head{
  position:sticky;
  z-index:12;
  top:clamp(130px, 17vh, 190px);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:8px;
  max-width:640px;
  margin:0 auto 56px;
  pointer-events:none;
}
.whyus-section-head.is-exiting{ transition:none !important; }
.whyus-section-head p.whyus-lead{ color:var(--muted-light); }

/* frosted glass card look, used for the badge pill + the stacked cards */
.whyus-card{
  background:linear-gradient(135deg, rgba(255,255,255,.1), rgba(255,255,255,.045));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 20px 60px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.08);
  border-radius:var(--radius-lg);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}

.whyus-badge{
  display:inline-flex;
  width:fit-content;
  padding:6px 16px;
  font-size:14px;
  border-radius:999px;
  color:rgba(255,255,255,.86);
  background:rgba(255,255,255,.075);
}

.whyus-heading{
  background:linear-gradient(to right, var(--foreground) 0%, var(--primary) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  font-weight:600;
  line-height:1.15;
  margin:0;
  font-size:40px;
}
@media (min-width:768px){ .whyus-heading{ font-size:56px; } }

.whyus-num-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:999px;
  background:linear-gradient(160deg, #fb0155, #b3053f);
  color:#fff;
  font-weight:600;
  flex-shrink:0;
}

/* ---- the pinned stacked-card scroll itself ---- */
.why-stack{ position:relative; height:300vh; }
.why-stack-pin{
  position:sticky;
  top:clamp(170px, 24vh, 260px);
  height:min(640px, calc(100svh - clamp(170px, 24vh, 260px) - 24px));
  overflow:hidden;
}
.why-item-abs{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  transform:translateY(100%);
  will-change:transform;
}
.why-item-abs:first-child{ transform:translateY(0); z-index:1; } /* visible pre-JS / no-JS fallback */
.why-item{
  display:grid; grid-template-columns:1fr; gap:28px; align-items:center; padding:28px; width:100%; max-height:100%; overflow:auto;
  color:#f4f4f2;
  /* nearly opaque so the blurred artwork behind can't wash the card out —
     every card reads the same dark tone, whatever image sits under it */
  background:linear-gradient(135deg, rgba(30,30,33,.955), rgba(18,18,20,.955));
}
.why-item h3{ font-size:26px; font-weight:600; margin:16px 0 12px; }
.why-item p{ color:rgba(255,255,255,.62); }
.why-photo{ border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/3; }
.why-photo img{ width:100%; height:100%; object-fit:cover; }
.why-photo--web-mobile img{
  object-fit:cover;
  object-position:center;
}
.why-view-more{
  display:inline-flex;
  align-items:center;
  gap:16px;
  margin-top:28px;
  padding:0;
  border:0;
  background:transparent;
  color:#f4f4f2;
  font:inherit;
  font-weight:500;
  cursor:pointer;
}
.why-view-more__circle{
  display:grid;
  place-items:center;
  width:64px;
  height:64px;
  border-radius:50%;
  color:#fff;
  background:linear-gradient(160deg,#fb0155,#d9004a);
  box-shadow:0 8px 28px rgba(251,2,86,.42);
  transition:transform .22s ease, box-shadow .22s ease;
}
.why-view-more__circle svg{ width:30px; height:30px; }
.why-view-more:hover .why-view-more__circle{
  transform:translateX(4px);
  box-shadow:0 10px 34px rgba(251,2,86,.55);
}
.why-photo--seo-performance{
  background:#000000;
}
.why-photo--seo-performance img{
  object-fit:contain;
}
.why-photo--contained-dark{
  background:#000000;
}
.why-photo--contained-dark img{
  object-fit:contain;
}
.why-photo--fill img{
  object-fit:cover;
}
.why-visual{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
}
.why-visual svg{ width:32%; height:32%; }
.why-visual--web{ background:linear-gradient(160deg,#202020,#000000); }
.why-visual--seo{ background:linear-gradient(160deg,#fb0155,#c30244); }
.why-visual--design{ background:linear-gradient(160deg,#6b43ff,#4429cc); }
.why-visual--ai{ background:linear-gradient(160deg,#3a3a3a,#000000); }
.why-visual--gray{ background:linear-gradient(160deg,#d8d8d5,#c7c7c5); }
.why-visual--pink-soft{ background:linear-gradient(160deg,#fb4b82,#fb0155); }

@media (max-width:700px){
  /* Phones: no "Why Choose Us" badge at all — the first card starts straight
     after the hero panel, and it gets the room the badge used to take. */
  .whyus-section{ padding:0 0 20px; }
  .whyus-section-head{ display:none; }
  .why-stack-pin{ top:78px; height:clamp(520px, 82vh, 720px); }
}

/* =====================================================================
   WHAT WE BELIEVE — rounded panel + scroll-scrubbed word reveal
   ===================================================================== */
.belief-section{
  position:relative;
  padding:4px 0;
  overflow:hidden;
  background:#000000;
}
.belief-panel{
  min-height:clamp(620px, 86svh, 860px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:clamp(80px, 11vh, 128px) clamp(28px, 5vw, 80px);
  border-radius:32px;
  background:#f0f0f0;
  text-align:center;
}
.belief-panel h2{
  margin:0 0 clamp(30px, 4vh, 52px);
  font-family:'Oswald', Arial, sans-serif;
  font-size:clamp(52px, 6vw, 96px);
  font-weight:600;
  line-height:.92;
  letter-spacing:-.035em;
  text-transform:uppercase;
  color:#000000;
}
.belief-copy{
  max-width:1120px;
  margin:0;
  font-family:'DM Sans', Arial, sans-serif;
  font-size:clamp(28px, 3.15vw, 54px);
  font-weight:500;
  line-height:1.13;
  letter-spacing:-.045em;
  color:#d2d2d2;
  text-wrap:balance;
}
.belief-copy--lead{
  max-width:1240px;
  font-family:'Oswald', Arial, sans-serif;
  font-weight:600;
  line-height:1.02;
  letter-spacing:-.025em;
  text-transform:uppercase;
}
.belief-copy--secondary{
  max-width:1340px;
  margin-top:clamp(22px, 3vh, 34px);
  font-size:clamp(20px, 2.2vw, 38px);
  line-height:1.2;
  letter-spacing:-.035em;
}
.belief-word{
  color:#d2d2d2;
  transition:color .1s linear;
}
.belief-word.is-active{ color:#000000; }
.belief-word--accent.is-active{ color:#e33258; }
.belief-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:66px;
  margin-top:clamp(42px, 6vh, 70px);
  padding:16px 36px;
  border-radius:15px;
  color:#fff;
  background:#e33258;
  box-shadow:0 10px 28px rgba(227,50,88,.22);
  font-family:'DM Sans', Arial, sans-serif;
  font-size:18px;
  font-weight:700;
  text-decoration:none;
  transition:transform .25s ease, box-shadow .25s ease;
}
.belief-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(227,50,88,.3);
}

@media (max-width:700px){
  .belief-section{ padding:4px 0; }
  .belief-panel{
    min-height:calc(100svh - 8px);
    justify-content:flex-start;
    padding:clamp(100px, 14svh, 150px) 22px 72px;
    border-radius:32px;
  }
  .belief-panel h2{
    margin-bottom:46px;
    font-size:clamp(48px, 15vw, 68px);
  }
  .belief-copy{
    max-width:11.5em;
    font-size:clamp(30px, 8.8vw, 42px);
    line-height:1.15;
    letter-spacing:-.045em;
  }
  .belief-copy--lead{
    max-width:14.5em;
    font-size:clamp(20px, 5.8vw, 27px);
    line-height:1.08;
    letter-spacing:-.02em;
  }
  .belief-copy--secondary{
    max-width:19em;
    margin-top:22px;
    font-size:clamp(17px, 4.8vw, 22px);
    line-height:1.22;
    letter-spacing:-.03em;
  }
  .belief-cta{
    min-height:48px;
    margin-top:38px;
    padding:12px 24px;
    border-radius:12px;
    font-size:15px;
  }
}

/* =====================================================================
   CLIENT LOGOS — opposing marquees that also accept touch/trackpad input
   ===================================================================== */
.logo-marquee-section{
  position:relative;
  display:grid;
  gap:clamp(18px, 2.4vw, 32px);
  padding:clamp(52px, 8vh, 84px) 0;
  overflow:hidden;
  background:#eaeaea;   /* same grey as the newspaper frames right below */
}
.logo-marquee-section__head{
  display:flex;
  justify-content:center;
  padding:0 24px clamp(4px, 1vw, 12px);
}
.partners-badge{
  display:inline-flex;
  width:fit-content;
  margin:0;
  padding:6px 16px;
  border:1px solid rgba(0,0,0,.2);
  border-radius:999px;
  color:rgba(0,0,0,.78);
  background:rgba(255,255,255,.4);
  box-shadow:0 12px 30px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.7);
  font-size:14px;
  line-height:1.4;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}
.logo-marquee{
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  -ms-overflow-style:none;
  overscroll-behavior-x:contain;
  touch-action:pan-x;
  cursor:grab;
  -webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 5vw, #000 calc(100% - 5vw), transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 5vw, #000 calc(100% - 5vw), transparent 100%);
}
.logo-marquee:active{ cursor:grabbing; }
.logo-marquee::-webkit-scrollbar{ display:none; }
.logo-marquee__track{
  display:flex;
  width:max-content;
}
.logo-marquee__group{
  display:flex;
  align-items:center;
  flex:none;
  gap:clamp(54px, 8vw, 130px);
  padding-right:clamp(54px, 8vw, 130px);
}
.logo-marquee__group img{
  display:block;
  width:auto;
  height:clamp(38px, 4.2vw, 60px);
  max-width:clamp(105px, 13.3vw, 231px);
  object-fit:contain;
  user-select:none;
  -webkit-user-drag:none;
}

@media (max-width:700px){
  .logo-marquee-section{
    gap:18px;
    padding:24px 0 48px;
  }
  .logo-marquee{
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
    mask-image:linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
  }
  .logo-marquee__group{
    gap:48px;
    padding-right:48px;
  }
  .logo-marquee__group img{
    height:39px;
    max-width:133px;
  }
}

/* =====================================================================
   PORTFOLIO TEASER — folder card (juanmora.co homepage style)
   ===================================================================== */
.portfolio-teaser{
  position:relative;
  overflow:hidden;
  background:var(--paper);
  padding:64px 24px 80px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.portfolio-teaser__bgword{
  position:absolute;
  inset:0;
  z-index:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(250px, 26vw, 520px);
  padding:0;
  font-size:clamp(160px, 30vw, 560px);
  font-weight:800;
  line-height:1;
  letter-spacing:-0.02em;
  color:rgba(255,7,95,.08);
  white-space:nowrap;
  pointer-events:none;
  user-select:none;
}

.portfolio-teaser__eyebrow{
  position:relative;
  z-index:1;
  min-height:1.4em;
  font-family:Inter, Arial, sans-serif;
  font-weight:700;
  letter-spacing:-0.01em;
  font-size:16px;
  color:#171717;
  margin:0 0 28px;
}
.portfolio-teaser__eyebrow.is-typing::after,
.portfolio-teaser__more.is-typing::after{
  content:'';
  display:inline-block;
  width:1px;
  height:1em;
  margin-left:2px;
  vertical-align:-2px;
  background:currentColor;
  animation:portfolio-caret .8s step-end infinite;
}
@keyframes portfolio-caret{ 0%,50%{ opacity:1; } 50.01%,100%{ opacity:0; } }

.portfolio-folder{
  position:relative;
  z-index:1;
  width:504px;
  max-width:88vw;
  aspect-ratio:900/716;
  border:none;
  background:none;
  padding:0;
  cursor:pointer;
  font:inherit;
  -webkit-tap-highlight-color:transparent;
}

.portfolio-folder__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center bottom;
  transition:opacity .4s ease;
}
.portfolio-folder__img--closed{ opacity:1; }
.portfolio-folder__img--open{ opacity:0; }

/* Desktop / mouse: open on hover */
.portfolio-folder:hover .portfolio-folder__img--closed,
.portfolio-folder:focus-visible .portfolio-folder__img--closed{ opacity:0; }
.portfolio-folder:hover .portfolio-folder__img--open,
.portfolio-folder:focus-visible .portfolio-folder__img--open{ opacity:1; }

/* Touch devices: opened via scroll (see extra-sections.js), no hover available */
.portfolio-folder.is-open .portfolio-folder__img--closed{ opacity:0; }
.portfolio-folder.is-open .portfolio-folder__img--open{ opacity:1; }

.portfolio-folder__arrow{
  position:absolute;
  top:58%; left:50%;
  width:52px; height:52px;
  margin:-26px 0 0 -26px;
  border-radius:50%;
  background:#fb0155;
  display:flex; align-items:center; justify-content:center;
  transform:scale(0);
  transition:transform .18s ease;
  pointer-events:none;
  z-index:2;
}
.portfolio-folder__arrow svg{ width:20px; height:20px; stroke:#fff; }
.portfolio-folder:hover .portfolio-folder__arrow{ transform:scale(1); }

/* No mouse on touch devices — never show the cursor-follow arrow there */
@media (hover: none){
  .portfolio-folder__arrow{ display:none; }
}

/* Mobile: shrink the folder so the "W...rk" background word reads fully,
   with the folder sitting where the "o" would be — slightly overlapping
   the tail of the W and the start of the r. */
@media (max-width:640px){
  .portfolio-folder{ width:252px; max-width:52.8vw; }
  .portfolio-teaser__bgword{ gap:52vw; font-size:23vw; padding:0; }
}

.portfolio-teaser__more{
  position:relative;
  z-index:1;
  display:inline-block;
  min-height:1.4em;
  margin-top:28px;
  font-family:Inter, Arial, sans-serif;
  font-weight:700;
  letter-spacing:-0.01em;
  font-size:15px;
  color:#fb0155;
  text-decoration:none;
  transition:color .2s ease;
  opacity:0;
}
.portfolio-teaser__more.is-visible{ opacity:1; }
.portfolio-teaser__more:hover{ color:#c30244; }

@media (max-width:859px){
  .why-item{ padding-top:52px; }
  .why-text{ position:relative; }
  .why-view-more{
    position:absolute;
    top:0;
    right:0;
    margin-top:0;
    gap:10px;
  }
  .why-view-more__circle{
    width:40px;
    height:40px;
  }
  .why-view-more__circle svg{ width:18px; height:18px; }
  .why-view-more span:last-child{ font-size:13px; }
}

@media (min-width:860px){
  .why-item{ grid-template-columns:1fr 1fr; padding:44px; }
  .why-item h3{ font-size:30px; }
  .why-item.reverse .why-text{
    position:relative;
    order:2;
    align-self:stretch;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding-top:0;
  }
  .why-item.reverse .why-view-more{
    position:absolute;
    top:0;
    right:0;
    margin-top:0;
  }
  .why-item.reverse .why-photo{ order:1; }
}

/* scroll-reveal fade-in for the section head (badge/heading/subtitle) —
   only kicks in once JS confirms it's running, via .js-ready on <body>;
   if JS fails for any reason the content just stays fully visible */
.js-ready .whyus-reveal{
  opacity:0;
  transform:translateY(36px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
}
.js-ready .whyus-reveal.in-view{ opacity:1; transform:translateY(0); }


/* =====================================================================
   NEW HERO — "Making brands impossible to ignore."
   Rounded panel + diagonal services timeline, inspired by
   atlas-studio.framer.website (32px rounded corners, diagonal gradient).
   ===================================================================== */
.nh-section{
  background:#000000;
  padding:130px clamp(12px, 3vw, 32px) 80px;
}

.nh-panel{
  position:relative;
  border-radius:32px;
  overflow:hidden;
  background:linear-gradient(135deg, #d1f8ff 0%, #f4ffd1 100%);
  padding:clamp(56px, 9vh, 100px) 24px clamp(48px, 7vh, 76px);
  text-align:center;
}

.nh-heading{
  margin:0 0 22px;
  font-family:'Oswald', Arial, sans-serif;
  font-weight:600;
  letter-spacing:-0.01em;
  text-transform:none;
  font-size:clamp(34px, 6vw, 92px);
  line-height:1.02;
  color:#000000;
}

.nh-sub{
  margin:0 0 clamp(40px, 6vh, 68px);
  font-family:'General Sans', Inter, sans-serif;
  font-weight:500;
  font-size:clamp(15px, 1.6vw, 19px);
  color:#173b2e;
}

/* ---- Desktop/tablet diagonal chart ---- */
.nh-chart{
  position:relative;
  max-width:1180px;
  height:clamp(200px, 25vw, 300px);
  margin:0 auto;
}

.nh-chart-line{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.nh-chart-grid line{
  fill:none;
  stroke:#4f5c2c;
  stroke-width:.24;
  stroke-dasharray:1.2 1.8;
  opacity:.28;
}
.nh-chart-area{ opacity:.86; }
.nh-chart-path{
  filter:drop-shadow(0 3px 5px rgba(79,92,44,.14));
}

.nh-node{
  position:absolute;
  left:calc(var(--x) * 1%);
  top:calc(var(--y) * 1%);
  transform:translate(-23px, -50%);
  display:flex;
  align-items:center;
  gap:10px;
  z-index:2;
}

.nh-dot{
  position:absolute;
  left:calc(var(--x) * 1%);
  top:calc(var(--y) * 1%);
  width:9px;
  height:9px;
  border-radius:50%;
  background:#4f5c2c;
  box-shadow:0 0 0 5px rgba(79,92,44,.16);
  transform:translate(-50%, -50%);
  z-index:1;
}

.nh-connector{
  position:absolute;
  left:calc(var(--x) * 1%);
  top:calc(var(--top) * 1%);
  width:0;
  height:calc(var(--h) * 1%);
  border-left:2px dashed rgba(79,92,44,.55);
  z-index:1;
}

.nh-node__icon{
  width:46px;
  height:46px;
  border-radius:50%;
  flex-shrink:0;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 18px rgba(10,10,10,.18);
}
.nh-node__icon img{ width:100%; height:100%; object-fit:cover; display:block; }
.nh-node__icon svg{ width:56%; height:56%; }
.nh-node__icon--1{ background:linear-gradient(160deg,#f0d9b8,#d8b78c); }
.nh-node__icon--2{ background:linear-gradient(160deg,#1c2430,#050810); }
.nh-node__icon--3{ background:#ffffff; border:1px solid rgba(10,10,10,.08); }
.nh-node__icon--4{ background:linear-gradient(160deg,#6b43ff,#2d1a66); }

.nh-node__label{
  white-space:nowrap;
  background:rgba(214,226,181,.9);
  border:1px solid rgba(79,92,44,.18);
  border-radius:999px;
  padding:8px 16px;
  font-family:'General Sans', Inter, sans-serif;
  font-weight:600;
  font-size:14px;
  color:#293312;
}

/* ---- Mobile fallback: simple stacked list ---- */
.nh-list{
  display:none;
  list-style:none;
  margin:0 0 40px;
  padding:0;
  max-width:340px;
  margin-left:auto;
  margin-right:auto;
  text-align:left;
}
.nh-list li{
  display:flex;
  align-items:center;
  gap:14px;
  padding:10px 0;
  font-family:'General Sans', Inter, sans-serif;
  font-weight:600;
  font-size:15px;
  color:#000000;
}
.nh-list .nh-node__icon{ width:40px; height:40px; }

@media (max-width:760px){
  .nh-chart{ display:none; }
  .nh-list{ display:none; }
  .nh-heading{ font-size:clamp(34px, 10vw, 48px); }
}

  /* =========================================================
     GET IN TOUCH — mobile (black, hobro.digital-inspired) /
     desktop (cream, extracted from webild.io coffee-shop template)
     ========================================================= */

  /* ---- shared ---- */
  .gt-heading span{
    display: inline-block;
    opacity: 0;
    transform: translateY(.6em);
    transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
  }
  .gt-heading.js-in span{ opacity: 1; transform: translateY(0); }
  .gt-heading span:nth-child(1){ transition-delay: .02s; }
  .gt-heading span:nth-child(2){ transition-delay: .08s; }
  .gt-heading span:nth-child(3){ transition-delay: .14s; }
  .gt-heading span:nth-child(4){ transition-delay: .20s; }
  .gt-heading span:nth-child(5){ transition-delay: .26s; }

  .gt-btn{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .55rem;
    text-decoration: none;
    cursor: pointer;
  }
  .gt-circle{
    width: 4.4rem;
    height: 4.4rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s cubic-bezier(.16,1,.3,1);
  }
  .gt-btn:hover .gt-circle,
  .gt-btn:focus-visible .gt-circle{
    transform: translateY(-.3rem) scale(1.07);
  }
  .gt-btn:active .gt-circle{ transform: scale(.96); }

  /* ---- mobile: black section, hobro-inspired ---- */
  .gt-mobile{
    display: block;
    background: #000000;
    color: #f5f5f5;
    text-align: center;
    padding: clamp(3.5rem, 14vw, 4.5rem) 1.5rem;
  }
  .gt-mobile .gt-badge{
    display: inline-flex;
    padding: .45rem 1.1rem;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    font-size: .78rem;
    color: rgba(255,255,255,.75);
    background: rgba(255,255,255,.04);
    margin-bottom: 1.1rem;
  }
  .gt-mobile .gt-heading{
    margin: 0 0 2.2rem;
    font-family: 'Oswald', Arial, sans-serif;
    font-weight: 600;
    letter-spacing: -0.01em;
    font-size: clamp(2rem, 9vw, 2.6rem);
    line-height: 1.15;
    color: #fff;
  }
  .gt-mobile .gt-buttons{
    display: flex;
    justify-content: center;
    gap: clamp(1.1rem, 6vw, 1.6rem);
    margin-top: 2rem;
  }
  .gt-mobile .gt-circle{
    width: 2.2rem;
    height: 2.2rem;
    background: #fb0155;
    color: #fff;
    box-shadow: 0 .4rem 1rem rgba(255,7,95,.28);
  }
  .gt-mobile .gt-circle svg{
    width: 12px;
    height: 12px;
  }
  .gt-mobile .gt-label{
    font-size: .41rem;
    color: rgba(255,255,255,.68);
  }

  /* hide mobile version on desktop/laptop */
  @media (min-width: 701px){
    .gt-mobile{ display: none; }
  }

  /* ---- desktop: cream card, extracted from webild.io coffee-shop ---- */
  .gt-desktop{ display: none; }

  @media (min-width: 701px){
    .gt-desktop{
      display: block;
      background: #000000;
      padding: clamp(4rem, 8vh, 6rem) 6vw;
    }
    .gt-desktop-inner{
      width: min(100%, 1220px);
      margin: 0 auto;
    }
    .gt-card{
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 2.5rem;
      /* barely-there lift off the black, with a lighter hairline so the
         rounded corners stay readable — not a grey block on black */
      background: rgba(255,255,255,.045);
      border: 1px solid rgba(255,255,255,.09);
      border-radius: 1.75rem;
      padding: clamp(2rem, 4vw, 3.2rem);
    }
    .gt-card-text{
      display: flex;
      flex-direction: column;
      gap: .5rem;
      max-width: 50%;
    }
    .gt-badge--light{
      display: inline-flex;
      width: fit-content;
      padding: .4rem 1rem;
      font-size: .82rem;
      color: #f5f5f5;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.14);
      border-radius: .6rem;
      margin-bottom: .3rem;
    }
    .gt-heading--light{
      margin: 0;
      font-family: 'Oswald', Arial, sans-serif;
      font-weight: 600;
      letter-spacing: -0.01em;
      font-size: clamp(2.1rem, 3.4vw, 3.4rem);
      line-height: 1.1;
      color: #fafafa;
    }
    .gt-buttons--row{
      display: flex;
      align-items: center;
      gap: clamp(1.6rem, 3vw, 2.6rem);
      flex-shrink: 0;
    }
    .gt-circle--light{
      background: #fb0155;
      color: #fff;
      box-shadow: 0 .5rem 1.4rem rgba(255,7,95,.28);
    }
    .gt-label--light{
      font-size: .85rem;
      color: rgba(250,250,250,.62);
    }
  }

  @media (min-width: 701px) and (max-width: 1100px){
    .gt-card{ flex-direction: column; align-items: flex-start; }
    .gt-card-text{ max-width: 100%; }
  }


/* ---- mobile: "Got a project? / LET'S TALK" hobro-inspired CTA ---- */
.gt-cta{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  margin: 0 0 .9rem;
  padding: 1.2rem 0;
}
.gt-cta::before{
  content: '';
  position: absolute;
  inset: -25% -6%;
  background: radial-gradient(closest-side, rgba(255,7,95,.28), transparent 72%);
  filter: blur(28px);
  z-index: 0;
  pointer-events: none;
  animation: gt-glow-pulse 3.2s ease-in-out infinite;
}
/* while the page is being left (goat-bar.js) the glow holds still — a running
   animation on this blurred pseudo-element made Chrome drop the page transition */
html.gb-pt-leaving .gt-cta::before{ animation:none; }
@keyframes gt-glow-pulse{
  0%, 100% { opacity: .5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}
.gt-cta-arc{
  position: relative;
  z-index: 1;
  color: rgba(255,255,255,.28);
  flex-shrink: 0;
}
.gt-cta-link{
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
}
.gt-cta-pre{
  font-size: .95rem;
  color: rgba(255,255,255,.6);
  margin-bottom: .35rem;
}
.gt-cta-big{
  display: inline-block;
  font-family: 'Oswald', Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: clamp(1.9rem, 10vw, 2.9rem);
  line-height: 1;
  color: #fff;
  opacity: 0;
  transform: translateY(.35em) scale(.96);
  white-space: nowrap;
  transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
}
.gt-cta.js-in .gt-cta-big{ opacity: 1; transform: translateY(0) scale(1); }

.gt-cta-big .dud{
  display: inline-block;
  color: rgba(255,255,255,.4);
  font-weight: 400;
}

.gt-cta-link:active .gt-cta-big{ animation: gt-cta-tap .35s ease; }
@keyframes gt-cta-tap{
  0% { transform: scale(1); }
  40% { transform: scale(.94); }
  100% { transform: scale(1); }
}

.gt-cta-hint{
  margin: 0 0 1.8rem;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.42);
}

@media (prefers-reduced-motion: reduce){
  .gt-cta::before{ animation: none !important; }
  .gt-cta-link:active .gt-cta-big{ animation: none !important; }
}

/* =====================================================
   SITE FOOTER — pinned behind the page, uncovered on scroll
   The footer itself never moves: it is fixed to the bottom of the
   viewport, sitting *underneath* <main>. main is opaque and painted
   on top, so the footer stays hidden until main's bottom edge
   scrolls up past it — and is covered again on the way back down.
   Only main moves; the footer is perfectly still.

   .site-footer-spacer supplies the extra scroll distance (exactly
   the footer's height, kept in --footer-h by extra-sections.js),
   since a fixed footer contributes no height of its own.

   Without JS — or when the footer is taller than the viewport, where
   pinning it would put part of it out of reach — body.js-footer-reveal
   is absent and the footer stays in normal flow.
   ===================================================== */

body.js-footer-reveal main,
body.js-footer-reveal #team-view {
  position: relative;
  z-index: 1;
  background: var(--paper);
}

body.js-footer-reveal .site-footer-reveal {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
}

.site-footer-spacer { display: none; }

body.js-footer-reveal .site-footer-spacer {
  display: block;
  height: var(--footer-h, 0px);
}

.site-footer {
  width: 100%;
  background: var(--paper);
  color: var(--ink);
  padding: 4.2rem 7vw 2.2rem;
}

.site-footer-inner {
  max-width: 1240px;
  margin: 0 auto;
}

.site-footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2.6rem;
  padding-bottom: 2.6rem;
}

.site-footer-word {
  margin: 0;
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.site-footer-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 3.2rem;
}

.site-footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .75rem;
}

.site-footer-col h3 {
  margin: 0 0 .25rem;
  font-size: .82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  opacity: .5;
}

.site-footer-col a {
  color: var(--ink);
  text-decoration: none;
  font-size: 1rem;
  transition: opacity .2s ease;
}

.site-footer-col a:hover {
  opacity: .6;
}

.site-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1.8rem;
  border-top: 1px solid rgba(32,32,32,.18);
}

.site-footer-bottom span {
  font-size: .82rem;
  opacity: .5;
}

.site-footer-legal {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.site-footer-legal a {
  color: var(--ink);
  text-decoration: none;
  font-size: .82rem;
  opacity: .5;
  transition: opacity .2s ease;
}

.site-footer-legal a:hover {
  opacity: .8;
}

@media (max-width: 700px) {
  .site-footer {
    padding: 3.2rem 6vw 1.8rem;
  }

  .site-footer-top {
    flex-direction: column;
    gap: 2.2rem;
    padding-bottom: 2.2rem;
  }

  .site-footer-word {
    font-size: 1.7rem;
  }

  .site-footer-cols {
    width: 100%;
    gap: 2rem 1.2rem;
  }

  .site-footer-col {
    width: calc(50% - .6rem);
  }

  .site-footer-col a {
    font-size: .88rem;
  }

  .site-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: .9rem;
  }
}

/* =====================================================
   FOOTER — Services accordion (4 categories, expand on click)
   ===================================================== */

.site-footer-col--services {
  gap: .35rem;
}

.footer-accordion {
  width: 100%;
  border-bottom: 1px solid rgba(32,32,32,.12);
}

.footer-accordion:first-of-type {
  border-top: 1px solid rgba(32,32,32,.12);
  margin-top: .35rem;
}

.footer-accordion-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  width: 100%;
  padding: .75rem 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ink);
  font-family: inherit;
  font-size: 1rem;
  text-align: left;
}

.footer-accordion-head span {
  transition: opacity .2s ease;
}

.footer-accordion-head:hover span {
  opacity: .65;
}

.footer-accordion-arrow {
  flex: none;
  width: 16px;
  height: 16px;
  transition: transform .28s ease;
}

.footer-accordion-head[aria-expanded="true"] .footer-accordion-arrow {
  transform: rotate(180deg);
}

/* Normal push-down accordion: the panel sits in normal flow, so
   opening a category pushes everything below it further down the
   column, like a plain expand/collapse list. */
.footer-accordion-panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height .32s ease;
}

.footer-accordion-panel ul {
  list-style: none;
  margin: 0;
  padding: .35rem 0 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.footer-accordion-panel a {
  color: var(--ink);
  text-decoration: none;
  font-size: .9rem;
  opacity: .68;
  transition: opacity .2s ease;
}

.footer-accordion-panel a:hover {
  opacity: 1;
}

@media (max-width: 700px) {
  .footer-accordion-head {
    font-size: .92rem;
  }

  .footer-accordion-panel a {
    font-size: .84rem;
  }
}

/* =====================================================
   STORY — textura-style scroll scene, above the testimonials
   A 200vh runway with a sticky view: the 3D tunnel is flown
   through as you scroll while two lines assemble word by word
   (story-app.js drives both).

   NOTE ON SIZING: the original page did this by rescaling the
   root font-size (html{font-size:0.83333vw} and friends), which
   would have resized every rem on this site. The same scale is
   reproduced here as a local --u unit on #story, so it stays
   pixel-faithful without touching anything outside the section.
   ===================================================== */

#story {
  --story-tint: #ededed;             /* neutral stone; #fb0155 for the pink cut */
  --u: 16px;                         /* the original's 1rem */
  position: relative;
  z-index: 2;
  width: 100%;
  height: 200vh;
  height: 200lvh;
  margin-top: 0;
  background: #000;
}

@media (max-width: 1920px) { #story { --u: 0.83333vw; } }
@media (max-width: 1440px) { #story { --u: 1.11111vw; } }
@media (max-width: 1024px) { #story { --u: 1.5625vw; margin-top: 0; } }
@media (max-width: 576px)  { #story { --u: 4.10256vw; margin-top: 0; } }

#story .view {
  position: sticky;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  height: 100lvh;
}

/* fades the bottom of the scene into the section below */
#story .view::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(12.5 * var(--u));
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
  pointer-events: none;
}

#story .scene {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* opaque backdrop so the tint below has something to blend against, and an
     isolated stacking context so it never reaches the headline (a sibling) */
  background: #000000;
  isolation: isolate;
}
/* The tunnel model ships with green-ish baked textures. Strip the colour out
   of the render, then re-tint it through --story-tint: `color` blending takes
   hue + saturation from the overlay and luminosity from the render, so the
   lighting and the black background are preserved. #ededed has zero
   saturation, so the tunnel reads as neutral stone. Swap in #fb0155 for the
   pink version. */
#story .scene canvas {
  display: block;
  filter: grayscale(1) contrast(1.06) brightness(1.02);
}
#story .scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--story-tint, #fb0155);
  mix-blend-mode: color;
  pointer-events: none;
}

/* until story-app.js has booted (site-common.js adds .is-ready) the two
   paragraphs would sit on top of each other as plain text — keep them out */
#story:not(.is-ready) .text-container { opacity: 0; }
#story .text-container { transition: opacity .25s ease; }

#story .text-container {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

#story .scale-container {
  transform: translate3d(0,0,0) scale(.5);
  will-change: transform;
}

#story h2 {
  position: relative;
  z-index: 1;
  max-width: calc(87.5 * var(--u));
  margin: calc(6.25 * var(--u)) 0 0;
  color: #fafafa;
  font-family: "Gilda Display", "Times New Roman", serif;
  font-weight: 400;
  font-style: normal;
  font-optical-sizing: auto;
  font-size: calc(4 * var(--u));
  line-height: 1.2;
  justify-content: center;
  text-align: center;
}

@media (max-width: 1024px) { #story h2 { font-size: calc(3 * var(--u)); } }
@media (max-width: 576px)  {
  #story h2 {
    max-width: calc(23.125 * var(--u));
    margin-top: 0;
    font-size: calc(2 * var(--u));
  }
}

/* the "currently working to Google's latest updates" note on the SEO card */
.why-update-badge{
  display:inline-flex;
  align-items:center;
  align-self:flex-start;   /* .why-text is a flex column — hug the text, don't stretch */
  width:fit-content;
  max-width:100%;
  gap:.5rem;
  margin:0 0 1.1rem;
  padding:.42rem .85rem;
  border:1px solid rgba(255,7,95,.3);
  border-radius:999px;
  background:rgba(255,7,95,.08);
  color:rgba(255,255,255,.82);
  font-size:.8rem;
  font-weight:500;
  line-height:1.25;
}

.why-update-dot{
  width:6px;
  height:6px;
  flex-shrink:0;
  border-radius:50%;
  background:#fb0155;
  box-shadow:0 0 0 3px rgba(255,7,95,.22);
}

@media (max-width:700px){
  .why-update-badge{
    font-size:.72rem;
    padding:.36rem .7rem;
  }
}

/* =====================================================================
   GOAT TEAM ROSTER — outlined stadium panel above the testimonials.
   Desktop: four columns divided by hairlines.  Mobile: the same four
   groups stacked inside a tall stadium.  "Meet our Team" links to the
   full team page.
   ===================================================================== */
.goat-team{
  --gt-fg:#fafafa;
  --gt-line:#353535;
  position:relative;
  z-index:3;
  display:flex;
  justify-content:center;
  padding:clamp(32px, 4vw, 70px) clamp(16px, 4vw, 64px) clamp(80px, 10vw, 170px);
  background:#000000;
  color:var(--gt-fg);
  font-family:"Lato", Arial, Helvetica, sans-serif;
  font-weight:300;
}

.goat-team__pill{
  width:100%;
  max-width:1720px;
  border:1px solid var(--gt-line);
  border-radius:999px;
  padding:clamp(52px, 5vw, 86px) clamp(40px, 6vw, 120px) clamp(44px, 4vw, 70px);
  box-sizing:border-box;
}

.goat-team__groups{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
}

.goat-team__group{
  padding:0 clamp(18px, 2vw, 40px);
}
.goat-team__group + .goat-team__group{
  border-left:1px solid var(--gt-line);
}

.goat-team__group h3{
  margin:0 0 clamp(20px, 2vw, 34px);
  font-family:"Gilda Display", "Times New Roman", serif;
  font-weight:400;
  font-size:clamp(1.15rem, 1.5vw, 1.65rem);
  line-height:1.2;
  letter-spacing:0;
  text-transform:none;
  text-align:center;
  justify-content:center;   /* the word-by-word reveal turns this into a flex row */
  color:var(--gt-fg);
}

.goat-team__row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(10px, 1.2vw, 24px);
  margin:0 0 clamp(14px, 1.4vw, 22px);
  align-items:start;
}
.goat-team__row:last-child{ margin-bottom:0; }
.goat-team__row p{ margin:0; }

.goat-team__row > :first-child{
  font-family:"Gilda Display", "Times New Roman", serif;
  font-weight:400;
  font-size:clamp(.9rem, 1.02vw, 1.1rem);
  line-height:1.25;
  color:var(--gt-fg);
}
.goat-team__row > :last-child{
  font-family:"Lato", Arial, Helvetica, sans-serif;
  font-weight:300;
  font-size:clamp(.8rem, .88vw, .95rem);
  line-height:1.35;
  color:rgba(250,250,250,.86);
}

/* ---- Meet our Team ---- */
.goat-team__cta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin:clamp(34px, 3.4vw, 56px) auto 0;
  width:fit-content;
  color:var(--gt-fg);
  font-family:"Lato", Arial, Helvetica, sans-serif;
  font-weight:300;
  font-size:clamp(.9rem, 1vw, 1.05rem);
  text-decoration:none;
  transition:opacity .25s ease;
}
.goat-team__cta::before,
.goat-team__cta::after{
  content:"";
  width:clamp(34px, 4vw, 64px);
  height:1px;
  background:var(--gt-line);
  flex:none;
}
.goat-team__cta svg{
  width:18px;
  height:18px;
  flex:none;
  transition:transform .25s ease;
}
.goat-team__cta:hover{ opacity:.75; }
.goat-team__cta:hover svg{ transform:translateX(4px); }

/* ---- Mobile: one column inside a tall stadium ---- */
@media (max-width:900px){
  .goat-team{
    padding:clamp(20px, 6vw, 44px) 4vw clamp(48px, 12vw, 90px);
  }
  .goat-team__pill{
    border-radius:clamp(200px, 46vw, 420px) / clamp(140px, 30vw, 300px);
    padding:clamp(90px, 20vw, 150px) clamp(26px, 8vw, 60px);
  }
  .goat-team__groups{
    grid-template-columns:1fr;
    gap:clamp(40px, 9vw, 64px);
  }
  .goat-team__group{
    padding:0;
  }
  .goat-team__group + .goat-team__group{
    border-left:0;
  }
  .goat-team__group h3{
    font-size:clamp(1.6rem, 7vw, 2.4rem);
    margin-bottom:clamp(22px, 6vw, 34px);
  }
  .goat-team__row{
    gap:clamp(12px, 4vw, 24px);
    margin-bottom:clamp(18px, 5vw, 28px);
  }
  .goat-team__row > :first-child{ font-size:clamp(1rem, 4.4vw, 1.35rem); }
  .goat-team__row > :last-child{ font-size:clamp(.88rem, 3.8vw, 1.15rem); }

  .goat-team__cta{
    margin-top:clamp(40px, 10vw, 64px);
    font-size:clamp(.95rem, 4.2vw, 1.2rem);
  }
  .goat-team__cta::before{ display:none; }
  .goat-team__cta::after{ display:none; }
}

/* On phones the roster shows Leadership only — the full four-group list
   belongs on the dedicated team page, which "Meet our Team" links to. */
@media (max-width:700px){
  .goat-team__group:not(:first-child){ display:none }
}


/* =====================================================
   FOOTER — one structure, two themes.
   Home keeps the light paper panel; the Team view and the
   Portfolio page get the black one. Colours come from the
   four variables below, so the markup never changes.
   ===================================================== */
.site-footer{
  --f-bg:var(--paper);
  --f-fg:var(--ink);
  --f-line:rgba(32,32,32,.14);
  --f-dim:.55;
  background:var(--f-bg);
  color:var(--f-fg);
}
:is(.site-footer--dark, body.team-page .site-footer){
  --f-bg:#000000;
  --f-fg:#f5f5f5;
  --f-line:rgba(255,255,255,.16);
  --f-dim:.5;
}

.site-footer-logo{ display:block; margin:0; line-height:0; }
.site-footer-logo img{
  display:block;
  width:clamp(160px, 20vw, 260px);
  height:auto;
}

.site-footer-col h3{ color:var(--f-fg); opacity:var(--f-dim); }
.site-footer-col a,
.site-footer-legal a,
.footer-accordion-head{ color:var(--f-fg); }
.site-footer-bottom{ border-top:1px solid var(--f-line); }
.site-footer-bottom span{ color:var(--f-fg); opacity:var(--f-dim); }
.site-footer-legal a{ opacity:var(--f-dim); }
.site-footer-legal a:hover{ opacity:1; }
.footer-accordion{ border-bottom:1px solid var(--f-line); }
.footer-accordion:first-of-type{ border-top:1px solid var(--f-line); }
.footer-accordion-panel a{ color:var(--f-fg); opacity:.68; }
.footer-accordion-panel a:hover{ opacity:1; }

/* phone rows in the Connect column */
.site-footer-phone{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  white-space:nowrap;
}
.site-footer-phone .site-footer-phone__flag{ font-size:1rem; }
.site-footer-phone .site-footer-phone__num{ font-variant-numeric:tabular-nums; }
.site-footer-phone__tag{
  margin-left:.55rem;
  padding:.16rem .5rem;
  border-radius:999px;
  background:rgba(37,211,102,.18);
  border:1px solid rgba(37,211,102,.38);
  font-size:.66rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  line-height:1;
  white-space:nowrap;
}


/* WhatsApp buttons — side by side on desktop, stacked on phones */
.footer-wa{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin:.85rem 0 .35rem;
}
.footer-wa__btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.6rem 1.05rem;
  border:1px solid var(--f-line);
  border-radius:999px;
  background:rgba(37,211,102,.12);
  color:var(--f-fg) !important;
  font-size:.92rem;
  line-height:1;
  text-decoration:none;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.footer-wa__btn:hover{
  background:rgba(37,211,102,.24);
  border-color:rgba(37,211,102,.55);
  transform:translateY(-1px);
}
.footer-wa__btn svg{ width:18px; height:18px; flex:none; fill:#25d366; }
@media (max-width:700px){
  .footer-wa{ flex-direction:column; align-items:stretch; width:100%; max-width:320px; }
  .footer-wa__btn{ justify-content:center; padding:.8rem 1rem; }
  .site-footer-col a{ padding-block:.15rem; }        /* bigger tap targets */
}

/* While a services category is open the footer leaves its pinned
   position and joins the normal flow, so the panel can push the list
   downwards instead of shoving the whole footer up off the screen. */
body.footer-open .site-footer-reveal{
  position:static !important;
}
body.footer-open .site-footer-spacer{
  display:none !important;
}

/* Team / Portfolio sit a little below the rest of the Company column */
.site-footer-col__spaced{ margin-top:1.55rem; }

/* ---------------------------------------------------------------
   Phones: the Connect block splits in two — WhatsApp buttons down
   the left, the three numbers down the right.
   --------------------------------------------------------------- */
@media (max-width:700px){
  .site-footer-col--connect{
    display:grid;
    grid-template-columns:auto 1fr;
    column-gap:16px;
    row-gap:.55rem;
    align-items:center;
    width:100%;
  }
  .site-footer-col--connect > h3{ grid-column:1 / -1; }
  .site-footer-col--connect > a:not(.site-footer-phone){ grid-column:1 / -1; }
  .site-footer-col--connect > .footer-wa{
    grid-column:1;
    grid-row:3 / span 3;
    width:auto;
    max-width:none;
    margin:0;
    align-self:center;
  }
  .site-footer-col--connect > .footer-wa .footer-wa__btn{
    justify-content:flex-start;
    padding:.6rem .85rem;
    font-size:.84rem;
    white-space:nowrap;
  }
  .site-footer-col--connect > a.site-footer-phone{ grid-column:2; justify-self:start; }
  .site-footer-col--connect > a.site-footer-phone:nth-of-type(2){ grid-row:3; }
  .site-footer-col--connect > a.site-footer-phone:nth-of-type(3){ grid-row:4; }
  .site-footer-col--connect > a.site-footer-phone:nth-of-type(4){ grid-row:5; }
  .site-footer-col--connect > a.site-footer-phone{ font-size:.82rem; }

  /* the number rows read as WhatsApp contacts; on a phone the label rides up
     beside the country code so the number keeps a line to itself */
  .site-footer-col--connect > a.site-footer-phone{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:.18rem .4rem;
    white-space:nowrap;
    line-height:1.25;
  }
  .site-footer-col--connect > a.site-footer-phone .site-footer-phone__tag{
    order:1; margin-left:0;
  }
  .site-footer-col--connect > a.site-footer-phone .site-footer-phone__num{
    order:2; flex:0 0 100%;
  }

}

/* Phones: the story scene used to run a quarter of a screen past its last
   line, and the roster pill opened with 90px of air — both trimmed so the
   two sections sit close together. */
@media (max-width: 700px){
  /* the gradient panel starts right under the floating header */
  .nh-section{ padding-top:76px; padding-bottom:12px; }

  /* WHAT WE BELIEVE: no grey band above or below, black margin down each
     side so it reads as an inset card like the panels above it */
  .belief-section{ padding:0 14px 14px; }
  .belief-panel{
    min-height:0;
    padding:34px 22px 38px;
    border-radius:26px;
  }

  /* the work stills and the portfolio folder share one paper ground —
     no seam, and much less air between them */
  /* same grey as the work panel above it (the newspaper frames' #eaeaea) */
  .portfolio-teaser{ padding-top:14px; padding-bottom:44px; background:#eaeaea; }
  /* card 1 fills the pinned area instead of floating in the middle of it */
  .why-item-abs{ align-items:center; }
  .why-item{ height:auto; max-height:100%; padding:22px 22px 24px; gap:16px; }
  .why-item h3{ font-size:27px; margin:10px 0 8px; }
  .why-item p{ font-size:15px; line-height:1.45; }
  /* the pinned box is only as tall as the card now — no dead air top or bottom */
  .why-stack-pin{ top:66px; height:clamp(440px, 62vh, 540px); }
  .whyus-section{ padding:0 0 8px; }
  .nh-section{ padding-bottom:4px; }

  /* "Got a project? / LET'S TALK" sat in a deep black pad, and the story scene
     that follows opened with most of a screen of nothing — both trimmed. */
  .gt-mobile{ padding:clamp(2rem, 7.5vw, 2.6rem) 1.5rem; }
  .gt-cta{ margin:0; padding:.7rem 0; }
  #story{ height:106lvh; }
  #story .text-container{ top:44%; }
  /* the scene's last frame holds for a moment with nothing in it; the roster
     is pulled up over that dead tail instead of waiting below it */
  .goat-team{ position:relative; z-index:3; margin-top:-16vh; padding-top:0; padding-bottom:28px; }
  .goat-team__pill{ padding-top:clamp(52px, 12vw, 84px); padding-bottom:clamp(52px, 12vw, 84px); }
}