@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;--bg:#0b0b0d;--panel:#151518;--line:#373537;--text:#f4f1ed;--muted:#b7b3b2;--gold:#e2c477;--gold2:#b89349;font-family:Manrope,Arial,sans-serif;font-synthesis:none}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--bg);color:var(--text)}button,a{touch-action:manipulation}a{color:inherit;text-decoration:none}button{font:inherit}img{max-width:100%}h1,h2,h3,p{margin-top:0}h1,h2,h3{letter-spacing:-.055em}em{font-style:normal;color:var(--gold)}.container{width:min(100% - 8vw,1440px);margin:auto}.skip{position:absolute;left:1rem;top:-5rem;z-index:100;background:var(--gold);color:#111;padding:.8rem}.skip:focus{top:1rem}:focus-visible{outline:2px solid var(--gold);outline-offset:4px}.site-header{height:86px;position:relative;z-index:30;display:flex;align-items:center;justify-content:space-between;padding:0 4vw;border-bottom:1px solid #ffffff26;background:var(--bg)}.brand{display:inline-flex;flex-direction:column;font-weight:800;font-size:1.45rem;letter-spacing:-.06em;line-height:1.15;white-space:nowrap}.brand small{font-size:.55rem;letter-spacing:.26em;color:#b7b0a9;margin-top:6px;font-weight:700}.gold{color:var(--gold)}.nav{display:flex;align-items:center;gap:clamp(1.3rem,2.8vw,3rem);font-size:.83rem;font-weight:700}.nav>a:not(.nav-cta):hover,.footer a:hover,.text-link:hover{color:var(--gold)}.nav-cta{border:1px solid var(--gold);padding:.78rem 1.1rem;color:var(--gold)}.nav-cta:hover{background:var(--gold);color:#0b0b0d}.menu-toggle{display:none}.hero{overflow:hidden;background:radial-gradient(circle at 75% 45%,#2e2820 0,#111113 40%,#0b0b0d 70%)}.hero-grid{min-height:min(730px,calc(100svh - 120px));display:grid;grid-template-columns:56% 44%;align-items:center}.hero-copy{position:relative;z-index:2;padding:6rem 0 4rem}.eyebrow{font-size:.76rem;line-height:1.5;font-weight:800;letter-spacing:.2em;color:var(--gold);margin-bottom:2rem}.eyebrow .line{display:inline-block;width:27px;border-top:1px solid var(--gold);vertical-align:middle;margin-right:12px}.hero h1{font-size:clamp(3.8rem,7vw,7.5rem);line-height:1.04;max-width:900px;margin-bottom:2rem}.hero-lede{font-size:clamp(1.08rem,1.45vw,1.35rem);line-height:1.65;color:#d0cdca;max-width:630px}.actions{display:flex;align-items:center;gap:2.2rem;flex-wrap:wrap;margin-top:2.7rem}.button{display:inline-flex;align-items:center;justify-content:center;gap:1.4rem;padding:1rem 1.5rem;font-size:.85rem;font-weight:800;min-height:52px;transition:background .2s,transform .2s}.button:hover{transform:translateY(-2px)}.button-gold{background:var(--gold);color:#13100b}.button-gold:hover{background:#f3d994}.button-outline{border:1px solid var(--gold);color:var(--gold)}.button-outline:hover{background:var(--gold);color:#111}.text-link{font-size:.88rem;font-weight:800;border-bottom:1px solid var(--gold);padding-bottom:8px}.text-link span{margin-left:1.3rem;color:var(--gold)}.hero-meta{display:flex;gap:2rem;margin-top:7rem;color:#a49d93;font-size:.68rem;letter-spacing:.15em;font-weight:800}.hero-art{height:100%;min-height:550px;position:relative;display:flex;align-items:center;justify-content:center}.hero-art img{position:relative;width:min(100%,530px);max-height:650px;object-fit:contain;filter:drop-shadow(0 30px 65px #000c)}.art-halo{position:absolute;width:90%;aspect-ratio:1;border:1px solid #e2c47736;border-radius:50%;box-shadow:0 0 80px #d6b66120,inset 0 0 80px #d6b66112}.art-halo:before,.art-halo:after{content:"";position:absolute;inset:10%;border:1px solid #e2c47724;border-radius:50%}.art-halo:after{inset:22%}.vertical-note{position:absolute;right:-2%;top:50%;writing-mode:vertical-rl;letter-spacing:.22em;font-size:.62rem;color:#b6a58c}.hero-bottom{display:flex;justify-content:space-between;padding:1rem 0 1.5rem;border-top:1px solid #ffffff30;color:#aaa39c;font-size:.66rem;font-weight:800;letter-spacing:.18em}.ticker{overflow:hidden;background:var(--gold);color:#14110c;white-space:nowrap;font-size:clamp(1rem,2vw,1.7rem);font-weight:800;letter-spacing:.1em;padding:1.1rem 0}.ticker>div{min-width:max-content;text-align:center}.ticker b{margin:0 2vw}.section{padding:clamp(5rem,9vw,9rem) 0}.section-head{display:flex;justify-content:space-between;align-items:end;gap:3rem;margin-bottom:3.5rem}.section-head .eyebrow{margin-bottom:1.1rem}.section-head h2,.statement h2,.contact-section h2{font-size:clamp(2.7rem,5vw,5.4rem);line-height:1.12;margin-bottom:0;max-width:900px}.section-head>p{font-size:1rem;line-height:1.7;color:var(--muted);max-width:330px;margin:0}.tabs{display:flex;border-bottom:1px solid var(--line);gap:clamp(1rem,4vw,4rem);overflow-x:auto}.tabs button{background:none;color:#aaa5a0;border:0;border-bottom:2px solid transparent;padding:1.15rem 0;white-space:nowrap;cursor:pointer;font-size:.9rem;font-weight:700}.tabs button[aria-selected=true]{color:var(--gold);border-color:var(--gold)}.tabs button span{font-size:.65rem;margin-left:.5rem}.archive-panel{padding-top:2rem}.archive-panel[hidden]{display:none}.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}.gallery-card{position:relative;overflow:hidden;display:block;text-align:left;padding:0;border:1px solid #ffffff25;background:#1d1b1b;color:#fff;cursor:pointer}.gallery-card img{width:100%;display:block;aspect-ratio:1;object-fit:cover;transition:transform .5s}.gallery-card:hover img{transform:scale(1.04)}.gallery-card span{display:flex;flex-direction:column;gap:.3rem;padding:1.1rem 1.25rem;font-size:1.05rem;font-weight:700}.gallery-card small{font-size:.64rem;letter-spacing:.17em;color:var(--gold)}.archive-empty{min-height:420px;background:radial-gradient(circle at 80% 20%,#483a25,#181719 45%,#111113 90%);border:1px solid #63573e;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:clamp(2rem,6vw,6rem)}.archive-empty>span{font-size:.7rem;letter-spacing:.2em;color:var(--gold);font-weight:800}.archive-empty h3{font-size:clamp(2rem,4vw,4rem);margin:1rem 0}.archive-empty p{max-width:560px;color:#d3cdbe;line-height:1.65}.archive-empty a{margin-top:1rem}.services-section{background:#151517}.service-list{border-top:1px solid #494548}.service-list>div{display:grid;grid-template-columns:9% 44% 1fr;gap:1rem;padding:1.9rem 0;border-bottom:1px solid #494548;align-items:center}.service-list span{font-size:.75rem;color:var(--gold);font-weight:800}.service-list h3{font-size:clamp(1.4rem,2.2vw,2.2rem);margin:0}.service-list p{margin:0;color:var(--muted);line-height:1.6;max-width:420px}.statement{background:var(--gold);color:#13110d;padding:clamp(5rem,9vw,9rem) 0}.statement p{font-size:.75rem;letter-spacing:.2em;font-weight:800}.statement h2{max-width:1100px}.statement h2 em{color:#654922}.statement-inner>div{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:5rem;border-top:1px solid #443a2d70;padding-top:1.4rem;font-weight:700;line-height:1.5}.statement-inner>div span{max-width:270px}.pricing-section .section-head{margin-bottom:3rem}.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.price-card{border:1px solid #615c53;background:#151518;display:flex;flex-direction:column;padding:clamp(1.3rem,2.3vw,2.2rem);min-height:550px}.price-card.featured{background:#28241c;border-color:var(--gold)}.card-top{display:flex;justify-content:space-between;gap:1rem;font-size:.63rem;letter-spacing:.12em;font-weight:800;color:var(--gold);min-height:2rem}.card-top span:last-child{color:#aea49a;text-align:right}.featured .card-top span:last-child{color:var(--gold)}.price-card h3{font-size:clamp(1.45rem,2.1vw,2.2rem);min-height:3.5rem;margin:2rem 0 1rem}.price{font-size:clamp(2rem,3vw,3.3rem);font-weight:800;letter-spacing:-.06em;margin-bottom:.25rem;white-space:nowrap}.price small{font-size:.8rem;color:var(--muted);letter-spacing:0;font-weight:500}.duration{font-size:.8rem;color:var(--gold);border-bottom:1px solid #5a5143;padding-bottom:1.6rem}.price-card ul{padding-left:1.1rem;color:#d4d0ca;line-height:1.8;font-size:.88rem;margin-bottom:2rem}.price-card li{padding-left:.25rem;margin:.35rem 0}.price-card>a{border-top:1px solid #6d6456;padding-top:1.25rem;margin-top:auto;font-weight:800;color:var(--gold);display:flex;justify-content:space-between;font-size:.82rem}.price-card>a:hover{color:#fff}.price-note{color:#aaa5a0;font-size:.77rem;margin:1.2rem 0 4rem}.monthly{background:#1b1a1b;border:1px solid #49433b;padding:2rem;display:grid;grid-template-columns:1.2fr repeat(3,1fr);gap:2rem}.monthly>div:first-child{padding-right:1rem}.monthly .eyebrow{margin-bottom:1rem}.monthly h3{font-size:1.7rem}.monthly p{color:var(--muted);line-height:1.6;font-size:.82rem}.plan{border-left:1px solid #5a5147;padding-left:1.3rem}.plan>span{font-size:.7rem;letter-spacing:.16em;color:var(--gold);font-weight:800}.plan strong{display:block;font-size:1.7rem;letter-spacing:-.05em;margin-top:.7rem}.plan strong small{font-size:.7rem;color:var(--muted);letter-spacing:0}.rate-details{border-bottom:1px solid #57504a;margin-top:2rem}.rate-details summary{cursor:pointer;padding:1.5rem 0;display:flex;justify-content:space-between;font-weight:800;color:var(--gold);list-style:none}.rate-details summary::-webkit-details-marker{display:none}.rate-details[open] summary span{transform:rotate(45deg)}.details-content{padding-bottom:2rem}.table-scroll{overflow:auto}table{border-collapse:collapse;width:100%;min-width:650px;font-size:.85rem}caption{text-align:left;color:var(--gold);font-weight:800;padding:1rem 0}th,td{padding:.85rem;border-bottom:1px solid #3e3a38;text-align:left}thead{color:var(--gold)}tbody th{font-weight:600}.details-content h4{font-size:1.2rem;margin:2rem 0 1rem}.addons{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem}.addons span{display:flex;justify-content:space-between;gap:1rem;padding:.8rem;border:1px solid #44403d;font-size:.8rem}.addons b{white-space:nowrap;color:var(--gold)}.details-content>p{color:var(--muted);font-size:.8rem;margin:1rem 0}.process-section{background:#171719}.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;list-style:none;padding:0;border-top:1px solid #666057}.steps li{padding-top:1.4rem}.steps span{font-size:.72rem;color:var(--gold);font-weight:800}.steps h3{font-size:1.5rem;margin:2.6rem 0 .7rem}.steps p{font-size:.85rem;color:var(--muted);line-height:1.65;max-width:200px}.contact-section{padding:clamp(5rem,9vw,9rem) 0;background:radial-gradient(circle at 85% 55%,#382e1e,#181719 50%,#0b0b0d)}.contact-inner{display:grid;grid-template-columns:2fr 1fr;gap:3rem;align-items:end}.contact-inner h2{max-width:800px}.contact-inner p:not(.eyebrow){color:var(--muted);line-height:1.7;max-width:540px;margin:2rem 0 0}.contact-actions{display:flex;flex-direction:column;align-items:flex-start;gap:1.2rem}.contact-actions>.button{margin-bottom:.5rem}.contact-actions>a:not(.button){border-bottom:1px solid #625848;padding-bottom:.3rem}.footer{background:#09090a;padding:3rem 0 1.5rem}.footer-top,.footer-bottom{display:flex;justify-content:space-between;gap:2rem}.footer-top{align-items:start;padding-bottom:4rem}.footer-top p{color:var(--muted);font-size:.85rem}.footer-top>div:last-child{display:flex;gap:1.5rem;font-size:.85rem}.footer-bottom{border-top:1px solid #46413d;padding-top:1.2rem;color:#aaa49d;font-size:.7rem;flex-wrap:wrap}.terms{margin-top:2.5rem;color:#a9a39c;font-size:.75rem;line-height:1.7}.terms summary{cursor:pointer;width:max-content}.terms p{max-width:950px;margin:1rem 0}dialog{max-width:min(90vw,720px);max-height:90vh;padding:1rem;background:#171719;border:1px solid var(--gold);color:white}dialog::backdrop{background:#000d}dialog img{display:block;max-height:72vh;object-fit:contain;margin:auto}dialog p{margin:.5rem 0 0}dialog form{display:flex;justify-content:end}.close-dialog{border:0;background:none;color:white;font-size:2rem;cursor:pointer;line-height:1}
.office-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:3rem;border-top:1px solid #625848;margin-top:5rem;padding-top:2rem}.office-intro .eyebrow{margin-bottom:1rem}.office-intro h3{font-size:clamp(1.3rem,2vw,2rem);line-height:1.35;margin:0}.office-grid address{font-style:normal;display:flex;flex-direction:column;gap:1rem;line-height:1.65;color:var(--muted);font-size:.85rem}.office-grid address strong{font-size:.7rem;letter-spacing:.13em;color:var(--gold)}
@media(max-width:1050px){.hero-grid{grid-template-columns:57% 43%}.hero h1{font-size:clamp(3.5rem,7vw,6rem)}.hero-art{min-height:450px}.hero-meta{margin-top:4rem}.monthly{grid-template-columns:repeat(3,1fr)}.monthly>div:first-child{grid-column:1/-1}.price-card{min-height:600px}.card-top{flex-wrap:wrap}.price{font-size:clamp(1.75rem,3vw,2.6rem)}}
@media(max-width:750px){.container{width:min(100% - 2.5rem,600px)}.site-header{height:70px;padding:0 1.25rem}.brand{font-size:1.24rem}.brand small{font-size:.46rem}.menu-toggle{display:block;background:none;border:1px solid #695f51;color:#fff;padding:.5rem .75rem;font-size:.8rem}.menu-toggle span{margin-left:.4rem}.nav{display:none;position:absolute;top:70px;left:0;right:0;background:#111113;border-bottom:1px solid var(--gold);padding:1.2rem;align-items:stretch;flex-direction:column;gap:0}.nav.open{display:flex}.nav a{padding:.9rem;border-bottom:1px solid #353136}.nav .nav-cta{text-align:center;margin-top:1rem}.hero-grid{display:flex;flex-direction:column;min-height:auto}.hero-copy{padding:5rem 0 1rem}.hero h1{font-size:clamp(3.6rem,14vw,6rem)}.hero-lede{font-size:1rem}.hero-meta{margin-top:3.5rem;gap:1rem;flex-wrap:wrap}.hero-art{min-height:320px;width:100%;height:360px}.hero-art img{width:310px;max-height:360px}.art-halo{width:300px}.vertical-note{right:0;font-size:.52rem}.hero-bottom{font-size:.55rem}.section{padding:5rem 0}.section-head{display:block;margin-bottom:2.5rem}.section-head>p{margin-top:1.4rem;max-width:560px}.section-head h2,.statement h2,.contact-section h2{font-size:clamp(2.8rem,10vw,4.5rem)}.gallery{grid-template-columns:1fr 1fr}.gallery-card span{font-size:.8rem;padding:.9rem}.gallery-card:last-child{grid-column:1/-1;width:calc(50% - .6rem)}.service-list>div{grid-template-columns:35px 1fr;gap:.5rem}.service-list p{grid-column:2}.statement-inner>div{grid-template-columns:1fr;gap:1rem;margin-top:3rem}.statement-inner>div span{max-width:none}.price-grid{grid-template-columns:1fr}.price-card{min-height:auto}.price-card h3{min-height:0}.price-card>a{margin-top:1rem}.monthly{grid-template-columns:1fr;gap:1.3rem}.monthly>div:first-child{grid-column:auto}.plan{padding-left:1rem}.steps{grid-template-columns:1fr 1fr;gap:1.3rem}.steps h3{margin:1.5rem 0 .5rem}.contact-inner{grid-template-columns:1fr}.footer-top{flex-direction:column;padding-bottom:2rem}.addons{grid-template-columns:1fr}}
@media(max-width:440px){.hero h1{font-size:3.45rem}.hero-meta{font-size:.55rem}.gallery{grid-template-columns:1fr}.gallery-card:last-child{grid-column:auto;width:100%}.steps{grid-template-columns:1fr}.steps li{border-bottom:1px solid #554f49}.archive-empty{min-height:380px}.footer-bottom{flex-direction:column;gap:.7rem}}@media(max-width:750px){.office-grid{grid-template-columns:1fr;gap:2rem;margin-top:4rem}.office-grid address{border-top:1px solid #51493e;padding-top:1rem}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}

/* =========================================================
   AXW-1 — Hero video + mascot experience
   ========================================================= */

.hero-showreel-trigger {
  appearance: none;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  isolation: isolate;
}

.hero-showreel-trigger:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: -6px;
}

.hero-background-video,
.hero-video-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-background-video {
  z-index: 0;
  object-fit: cover;
  opacity: .60;
  transform: scale(1.025);
  filter: saturate(.9) contrast(1.04);
}

.hero-video-shade {
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.05),
      rgba(0,0,0,.26)
    );
}

.hero-showreel-trigger .art-halo {
  z-index: 2;
}

.hero-showreel-trigger .hero-mascot {
  z-index: 3;
  position: relative;
}

.hero-showreel-trigger .vertical-note {
  z-index: 4;
}

.hero-play-badge {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 30px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 8px 15px 8px 8px;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 999px;
  background: rgba(10,35,52,.78);
  color: #fff;
  box-shadow: 0 12px 35px rgba(0,0,0,.28);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transform: translateX(-50%);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .12em;
  white-space: nowrap;
  transition:
    transform .2s ease,
    background .2s ease;
}

.hero-play-icon {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: #26648e;
  font-size: .64rem;
  padding-left: 2px;
}

.hero-showreel-trigger:hover .hero-play-badge {
  background: rgba(10,35,52,.94);
  transform:
    translateX(-50%)
    translateY(-3px);
}

.showreel-dialog {
  width: min(1180px, calc(100vw - 36px));
  max-width: none;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 18px;
  background: #071724;
  color: #fff;
  box-shadow:
    0 40px 120px rgba(0,0,0,.55);
}

.showreel-dialog::backdrop {
  background: rgba(5,18,28,.84);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.showreel-shell {
  padding: 18px;
}

.showreel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 4px 2px 17px;
}

.showreel-kicker {
  margin: 0 0 4px;
  color: #8edfe7;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .18em;
}

.showreel-header h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.4rem,3vw,2.4rem);
}

.showreel-close {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: #fff;
  cursor: pointer;
  font-size: 1.65rem;
}

.showreel-close:hover {
  background: rgba(255,255,255,.16);
}

.showreel-player {
  display: block;
  width: 100%;
  max-height: min(72vh,760px);
  margin: 0;
  border-radius: 10px;
  background: #000;
  object-fit: contain;
}

@media (max-width:750px) {
  .hero-background-video {
    opacity: .48;
  }

  .hero-play-badge {
    bottom: 18px;
    min-height: 38px;
    font-size: .58rem;
  }

  .showreel-dialog {
    width: calc(100vw - 20px);
  }

  .showreel-shell {
    padding: 10px;
  }
}

@media (prefers-reduced-motion:reduce) {
  .hero-background-video {
    display: none;
  }

  .hero-play-badge {
    transition: none;
  }
}

/* =========================================================
   AXW-2 — Header brand presence
   ========================================================= */

.site-header {
  min-height: 96px;
  height: 96px;
  padding-left: 4vw;
  padding-right: 4vw;
}

.site-header .brand {
  flex: 0 0 auto;
  font-size: 1.9rem;
  line-height: 1.02;
  letter-spacing: -.065em;
}

.site-header .brand > span {
  display: block;
}

.site-header .brand small {
  margin-top: 8px;
  font-size: .61rem;
  line-height: 1.2;
  letter-spacing: .24em;
}

.site-header .nav {
  flex: 0 1 auto;
}

@media (max-width: 1050px) {
  .site-header .brand {
    font-size: 1.68rem;
  }

  .site-header .brand small {
    font-size: .54rem;
  }

  .site-header .nav {
    gap: clamp(1rem, 2vw, 1.8rem);
  }
}

@media (max-width: 750px) {
  .site-header {
    min-height: 76px;
    height: 76px;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .site-header .brand {
    font-size: 1.48rem;
    line-height: 1;
  }

  .site-header .brand small {
    margin-top: 6px;
    font-size: .47rem;
    letter-spacing: .2em;
  }

  .site-header .nav {
    top: 76px;
  }
}

@media (max-width: 440px) {
  .site-header .brand {
    font-size: 1.36rem;
  }

  .site-header .brand small {
    font-size: .42rem;
    letter-spacing: .17em;
  }
}

/* =========================================================
   AXW-3 — Floating WhatsApp
   ========================================================= */

.floating-whatsapp {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 80;

  display: inline-flex;
  align-items: center;
  gap: 11px;

  min-height: 58px;
  padding: 8px 16px 8px 8px;

  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 999px;

  background: #168a58;
  color: #fff;

  box-shadow:
    0 16px 45px rgba(10, 52, 38, .28);

  text-decoration: none;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}

.floating-whatsapp:hover {
  background: #11764b;
  color: #fff;
  transform: translateY(-3px);
  box-shadow:
    0 20px 52px rgba(10, 52, 38, .36);
}

.floating-whatsapp:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.floating-whatsapp-icon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;

  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
}

.floating-whatsapp-icon svg {
  display: block;
  width: 24px;
  height: 24px;
}

.floating-whatsapp-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

.floating-whatsapp-copy strong {
  font-size: .78rem;
  line-height: 1.1;
  letter-spacing: .02em;
}

.floating-whatsapp-copy small {
  opacity: .82;
  font-size: .62rem;
  line-height: 1.2;
  white-space: nowrap;
}

@media (max-width: 750px) {
  .floating-whatsapp {
    right: 16px;
    bottom: 16px;

    width: 54px;
    height: 54px;
    min-height: 54px;

    padding: 6px;

    justify-content: center;
  }

  .floating-whatsapp-icon {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }

  .floating-whatsapp-copy {
    position: absolute;

    width: 1px;
    height: 1px;

    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .floating-whatsapp {
    transition: none;
  }
}

/* =========================================================
   AXW-4 — Deliverables marquee
   ========================================================= */

.ticker {
  overflow: hidden;
  width: 100%;
  background: #53d2dc;
  color: #173e5b;
  white-space: nowrap;
  padding: 0;
}

.ticker-track {
  display: flex;
  width: max-content;
  min-width: 100%;
  will-change: transform;
  animation: avatarx-marquee 24s linear infinite;
}

.ticker-group {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  min-width: max-content;
  padding: 1.08rem 0;
}

.ticker-group span {
  padding: 0 clamp(1.7rem, 3vw, 3.4rem);
  font-size: clamp(1rem, 2vw, 1.7rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: .1em;
}

.ticker-group b {
  flex: 0 0 auto;
  margin: 0;
  color: #26648e;
  font-size: clamp(.9rem, 1.5vw, 1.3rem);
}

@keyframes avatarx-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@media (max-width: 750px) {
  .ticker-track {
    animation-duration: 19s;
  }

  .ticker-group {
    padding: .92rem 0;
  }

  .ticker-group span {
    padding: 0 1.25rem;
    font-size: .92rem;
    letter-spacing: .09em;
  }

  .ticker-group b {
    font-size: .78rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ticker {
    overflow-x: auto;
  }

  .ticker-track {
    animation: none;
  }

  .ticker-group[aria-hidden="true"] {
    display: none;
  }
}

/* =========================================================
   AXW-5 — Dedicated navigation pages
   ========================================================= */

.inner-page {
  min-height: 70vh;
}

.inner-hero {
  padding: clamp(5rem, 9vw, 9rem) 0 clamp(3rem, 6vw, 6rem);
  background:
    linear-gradient(
      126deg,
      #f9fcfd 0%,
      #eef8fa 52%,
      #c6edf2 100%
    );
}

.inner-hero .eyebrow {
  margin-bottom: 1.2rem;
}

.inner-hero h1 {
  max-width: 950px;
  margin-bottom: 1.6rem;
  color: #173e5b;
  font-size: clamp(3.2rem, 7vw, 7rem);
  line-height: 1;
}

.inner-lede {
  max-width: 720px;
  margin: 0;
  color: #426a82;
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  line-height: 1.7;
}

.inner-content {
  padding-top: clamp(4rem, 7vw, 7rem);
  padding-bottom: clamp(5rem, 8vw, 8rem);
}

.inner-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.inner-card {
  min-height: 360px;
  display: flex;
  flex-direction: column;
  padding: clamp(1.6rem, 3vw, 2.7rem);
  border: 1px solid #b7d4df;
  background: #fff;
  box-shadow: 0 12px 36px #26648e0c;
}

.inner-card-featured {
  border-color: #53a7b9;
  background: #e7f7f8;
}

.inner-card > span,
.inner-list article > span,
.inner-steps article > span {
  color: #26648e;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .14em;
}

.inner-card h2,
.inner-list h2,
.inner-steps h2,
.project-brief h2 {
  margin: 2rem 0 1rem;
  color: #173e5b;
  font-size: clamp(1.7rem, 3vw, 2.8rem);
}

.inner-card p,
.inner-list p,
.inner-steps p,
.project-brief p {
  color: #426a82;
  line-height: 1.7;
}

.inner-card a {
  margin-top: auto;
  padding-top: 1.4rem;
  border-top: 1px solid #c7dce4;
  color: #26648e;
  font-weight: 800;
}

.inner-list {
  border-top: 1px solid #a9ccd8;
}

.inner-list article {
  display: grid;
  grid-template-columns: 80px 1fr 1fr;
  gap: 2rem;
  align-items: center;
  padding: 2rem 0;
  border-bottom: 1px solid #b4d2dc;
}

.inner-list h2,
.inner-list p {
  margin: 0;
}

.inner-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
  border-top: 1px solid #a9cad7;
}

.inner-steps article {
  padding-top: 1.5rem;
}

.inner-steps h2 {
  margin-top: 2rem;
}

.project-contact-panel {
  width: min(760px, 100%);
  padding: clamp(2rem, 5vw, 4rem);
  border: 1px solid #b7d4df;
  background: #fff;
  box-shadow: 0 20px 60px #26648e12;
}

.inner-contact-link {
  display: block;
  width: fit-content;
  margin-top: 1.5rem;
  border-bottom: 1px solid #26648e;
  color: #26648e;
  font-weight: 700;
}

.project-brief {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid #c4d9e1;
}

@media (max-width: 900px) {
  .inner-grid {
    grid-template-columns: 1fr;
  }

  .inner-card {
    min-height: auto;
  }

  .inner-list article {
    grid-template-columns: 50px 1fr;
  }

  .inner-list p {
    grid-column: 2;
  }

  .inner-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 550px) {
  .inner-hero {
    padding-top: 4rem;
  }

  .inner-steps {
    grid-template-columns: 1fr;
  }

  .inner-steps article {
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #b4d2dc;
  }
}

/* =========================================================
   AXW-6 — Core deliverable pages
   ========================================================= */

.deliverable-page {
  min-height: 70vh;
}

.deliverable-hero {
  padding:
    clamp(5rem, 9vw, 9rem)
    0
    clamp(4rem, 7vw, 7rem);

  background:
    linear-gradient(
      128deg,
      #f8fcfd 0%,
      #eaf6f8 53%,
      #bde9ef 100%
    );
}

.deliverable-hero-grid {
  display: grid;
  grid-template-columns:
    minmax(0, 1.5fr)
    minmax(300px, .7fr);

  gap:
    clamp(3rem, 7vw, 8rem);

  align-items: end;
}

.deliverable-hero h1 {
  max-width: 900px;
  margin:
    1rem
    0
    1.5rem;

  color: #173e5b;

  font-size:
    clamp(3.6rem, 7vw, 7.5rem);

  line-height: .95;
  letter-spacing: -.055em;
}

.deliverable-lede {
  max-width: 730px;

  color: #426a82;

  font-size:
    clamp(1rem, 1.45vw, 1.28rem);

  line-height: 1.75;
}

.deliverable-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;

  margin-top: 2.4rem;
}

.deliverable-summary {
  padding:
    clamp(1.7rem, 3vw, 2.7rem);

  border:
    1px solid
    rgba(38, 100, 142, .25);

  background:
    rgba(255, 255, 255, .72);

  backdrop-filter:
    blur(14px);

  -webkit-backdrop-filter:
    blur(14px);
}

.deliverable-summary > span {
  display: block;

  margin-bottom: 2rem;

  color: #26648e;

  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .15em;
}

.deliverable-summary dl {
  margin: 0;
}

.deliverable-summary dl div {
  display: grid;

  grid-template-columns:
    1fr
    1.25fr;

  gap: 1rem;

  padding:
    1.05rem
    0;

  border-top:
    1px solid
    #c3dbe3;
}

.deliverable-summary dt {
  color: #698797;

  font-size: .72rem;
}

.deliverable-summary dd {
  margin: 0;

  color: #173e5b;

  font-weight: 800;
  text-align: right;
}

.deliverable-details {
  padding:
    clamp(5rem, 8vw, 8rem)
    0;

  background: #fff;
}

.deliverable-details-grid {
  display: grid;

  grid-template-columns:
    minmax(260px, .7fr)
    minmax(0, 1.3fr);

  gap:
    clamp(3rem, 7vw, 8rem);
}

.deliverable-details h2 {
  margin-top: 1rem;

  color: #173e5b;

  font-size:
    clamp(2.3rem, 4vw, 4rem);

  line-height: 1.02;
}

.deliverable-feature-list {
  margin: 0;
  padding: 0;

  list-style: none;

  border-top:
    1px solid
    #b9d3dd;
}

.deliverable-feature-list li {
  display: grid;

  grid-template-columns:
    55px
    1fr;

  gap: 1.5rem;

  align-items: center;

  min-height: 90px;

  border-bottom:
    1px solid
    #c4d9e1;
}

.deliverable-feature-list span {
  color: #26648e;

  font-size: .7rem;
  font-weight: 800;
}

.deliverable-feature-list p {
  margin: 0;

  color: #173e5b;

  font-size:
    clamp(1rem, 1.4vw, 1.25rem);
}

.deliverable-family {
  padding:
    clamp(4rem, 7vw, 7rem)
    0;

  background: #e7f5f7;
}

.deliverable-family-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  margin-top: 2rem;

  border-top:
    1px solid
    #9fc7d4;

  border-left:
    1px solid
    #9fc7d4;
}

.deliverable-family-grid a {
  display: flex;
  min-height: 230px;

  flex-direction: column;

  padding:
    clamp(1.4rem, 3vw, 2.4rem);

  border-right:
    1px solid
    #9fc7d4;

  border-bottom:
    1px solid
    #9fc7d4;

  color: #173e5b;

  text-decoration: none;

  transition:
    background .18s ease,
    transform .18s ease;
}

.deliverable-family-grid a:hover {
  background: #fff;
}

.deliverable-family-grid span {
  color: #26648e;

  font-size: .7rem;
  font-weight: 800;
}

.deliverable-family-grid strong {
  margin:
    auto
    0
    1.5rem;

  font-size:
    clamp(1.5rem, 2.3vw, 2.4rem);

  line-height: 1.05;
}

.deliverable-family-grid small {
  color: #26648e;

  font-weight: 800;
}

.deliverable-detail-link {
  display: block;

  margin:
    .75rem
    0
    1rem;

  color: #26648e;

  font-size: .72rem;
  font-weight: 800;
}

.inner-list h2 a {
  color: inherit;
  text-decoration: none;
}

.inner-list h2 a:hover {
  color: #26648e;
}

@media (max-width: 900px) {
  .deliverable-hero-grid,
  .deliverable-details-grid {
    grid-template-columns: 1fr;
  }

  .deliverable-summary {
    max-width: 620px;
  }

  .deliverable-family-grid {
    grid-template-columns: 1fr;
  }

  .deliverable-family-grid a {
    min-height: 150px;
  }
}

@media (max-width: 550px) {
  .deliverable-hero {
    padding-top: 4rem;
  }

  .deliverable-hero h1 {
    font-size:
      clamp(3rem, 14vw, 4.5rem);
  }

  .deliverable-summary dl div {
    grid-template-columns:
      1fr;
  }

  .deliverable-summary dd {
    text-align: left;
  }
}

/* =========================================================
   AXW-7 — Social media integration
   ========================================================= */

.footer-social {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .55rem;

  min-width: 245px;
}

.footer-social-link {
  display: grid;

  grid-template-columns:
    34px
    minmax(0, 1fr)
    auto;

  gap: .75rem;

  align-items: center;

  min-height: 48px;

  padding:
    .55rem
    .7rem;

  border:
    1px solid
    rgba(255, 255, 255, .18);

  border-radius: 10px;

  color: inherit;

  text-decoration: none;

  transition:
    border-color .18s ease,
    background .18s ease,
    transform .18s ease;
}

.footer-social-link:hover {
  border-color:
    rgba(255, 255, 255, .42);

  background:
    rgba(255, 255, 255, .06);

  transform:
    translateX(3px);
}

.footer-social-link:focus-visible {
  outline:
    2px solid
    currentColor;

  outline-offset: 3px;
}

.footer-social-icon {
  display: grid;

  width: 34px;
  height: 34px;

  place-items: center;

  border-radius: 50%;

  background:
    rgba(255, 255, 255, .09);
}

.footer-social-icon svg {
  width: 18px;
  height: 18px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.footer-social-copy {
  display: flex;

  min-width: 0;

  flex-direction: column;

  gap: 2px;
}

.footer-social-copy strong {
  font-size: .72rem;
  line-height: 1.2;
}

.footer-social-copy small {
  overflow: hidden;

  opacity: .7;

  font-size: .58rem;
  line-height: 1.3;

  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 750px) {
  .footer-social {
    width: 100%;
    min-width: 0;
  }

  .footer-social-link {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer-social-link {
    transition: none;
  }
}

/* =========================================================
   AXW-8 — Testimonials and client proof
   ========================================================= */

.client-proof-section {
  background:
    linear-gradient(
      180deg,
      #f5fbfc 0%,
      #e6f5f7 100%
    );
}

.client-proof-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.proof-card {
  display: flex;
  min-height: 330px;
  flex-direction: column;

  padding:
    clamp(1.5rem, 3vw, 2.5rem);

  border:
    1px solid
    #b5d3dd;

  background: #fff;
}

.proof-card-featured {
  background: #dff3f5;
  border-color: #6eaebd;
}

.proof-card > span {
  color: #26648e;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
}

.proof-card h3 {
  margin:
    2rem
    0
    1rem;

  color: #173e5b;

  font-size:
    clamp(1.7rem, 2.7vw, 2.6rem);

  line-height: 1.05;
}

.proof-card p {
  color: #426a82;
  line-height: 1.7;
}

.proof-card a {
  margin-top: auto;
  padding-top: 1.5rem;

  border-top:
    1px solid
    #c3d9e1;

  color: #26648e;

  font-weight: 800;
  text-decoration: none;
}

.client-proof-page {
  padding:
    clamp(4rem, 7vw, 7rem)
    0
    clamp(6rem, 9vw, 9rem);
}

.testimonial-status {
  display: grid;

  grid-template-columns:
    .8fr
    1fr
    1.5fr;

  gap: 2rem;

  align-items: start;

  padding:
    1.8rem
    0;

  border-top:
    1px solid
    #a9cad6;

  border-bottom:
    1px solid
    #a9cad6;
}

.testimonial-status span {
  color: #26648e;

  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
}

.testimonial-status strong {
  color: #173e5b;

  font-size:
    clamp(1.15rem, 2vw, 1.7rem);
}

.testimonial-status p {
  margin: 0;

  color: #426a82;

  line-height: 1.7;
}

.testimonial-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 1rem;

  margin-top:
    clamp(3rem, 6vw, 6rem);
}

.testimonial-placeholder {
  display: flex;

  min-height: 420px;

  flex-direction: column;

  padding:
    clamp(2rem, 4vw, 3.5rem);

  border:
    1px solid
    #b4d2dc;

  background: #fff;
}

.testimonial-placeholder > span {
  color: #26648e;

  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
}

.testimonial-placeholder h2 {
  max-width: 500px;

  margin:
    2.5rem
    0
    1.3rem;

  color: #173e5b;

  font-size:
    clamp(2rem, 3.5vw, 3.8rem);

  line-height: 1.02;
}

.testimonial-placeholder p {
  max-width: 540px;

  color: #426a82;

  line-height: 1.75;
}

.testimonial-placeholder .button {
  width: fit-content;
  margin-top: auto;
}

.testimonial-policy {
  max-width: 900px;

  margin-top:
    clamp(5rem, 8vw, 8rem);

  padding-top: 2rem;

  border-top:
    1px solid
    #a9cad6;
}

.testimonial-policy h2 {
  margin:
    1rem
    0
    1.3rem;

  color: #173e5b;

  font-size:
    clamp(2rem, 4vw, 4rem);
}

.testimonial-policy > p:last-child {
  max-width: 720px;

  color: #426a82;

  line-height: 1.75;
}

.footer-proof-link {
  padding-top: 1rem;
  padding-bottom: 1rem;

  border-top:
    1px solid
    rgba(255, 255, 255, .12);
}

.footer-proof-link a {
  color: inherit;

  font-size: .68rem;
  font-weight: 700;

  text-decoration: none;
}

.footer-proof-link a:hover {
  text-decoration: underline;
}

@media (max-width: 850px) {
  .client-proof-grid,
  .testimonial-grid {
    grid-template-columns: 1fr;
  }

  .proof-card,
  .testimonial-placeholder {
    min-height: auto;
  }

  .testimonial-status {
    grid-template-columns: 1fr;
    gap: .8rem;
  }
}

/* =========================================================
   AXW-9 — Homepage density
   ========================================================= */

/*
  Homepage-only rhythm tightening.
  Dedicated inner pages keep their existing spacing.
*/

#top.hero {
  min-height: auto;
}

#top .hero-grid {
  min-height: calc(100vh - 96px);
  padding-top: clamp(2.4rem, 4vw, 4.5rem);
  padding-bottom: clamp(2rem, 3.5vw, 3.5rem);
}

#top .hero-copy {
  padding-top: 0;
  padding-bottom: 0;
}

#top .hero-copy h1 {
  margin-top: .8rem;
  margin-bottom: 1.35rem;
}

#top .hero-lede {
  margin-bottom: 1.8rem;
}

#top .actions {
  margin-top: 0;
  margin-bottom: 2.2rem;
}

#top .hero-meta {
  margin-top: 0;
}

#top .hero-bottom {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* Main homepage sections */

#work.section,
#services.section,
#pricing.section,
#studio.section,
#client-proof.section {
  padding-top: clamp(4.5rem, 7vw, 7rem);
  padding-bottom: clamp(4.5rem, 7vw, 7rem);
}

/* Avoid oversized gaps around headings */

#work .section-head,
#services .section-head,
#pricing .section-head,
#studio .section-head,
#client-proof .section-head {
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.section-head h2 {
  margin-top: .65rem;
}

.section-head > p {
  max-width: 620px;
}

/* Campaign cards */

.campaign-grid {
  gap: clamp(.8rem, 1.3vw, 1.25rem);
}

.campaign-card {
  min-height: 0;
}

.campaign-card > div:nth-child(2) {
  padding-top: clamp(2.5rem, 4vw, 4rem);
  padding-bottom: clamp(2.5rem, 4vw, 4rem);
}

/* Services */

.service-list > div {
  padding-top: clamp(1.4rem, 2.4vw, 2.2rem);
  padding-bottom: clamp(1.4rem, 2.4vw, 2.2rem);
}

/* Studio statement */

.statement {
  padding-top: clamp(4rem, 7vw, 6.5rem);
  padding-bottom: clamp(4rem, 7vw, 6.5rem);
}

.statement-inner h2 {
  margin-top: 1rem;
  margin-bottom: clamp(2rem, 4vw, 3.4rem);
}

/* Pricing */

.price-grid {
  gap: clamp(.8rem, 1.4vw, 1.3rem);
}

.price-card {
  min-height: 0;
}

.monthly {
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
}

.rate-details {
  margin-top: clamp(2rem, 4vw, 3.5rem);
}

/* Process */

.steps {
  margin-top: 0;
}

.steps li {
  min-height: 0;
  padding-top: clamp(1.5rem, 2.5vw, 2.2rem);
  padding-bottom: clamp(1.5rem, 2.5vw, 2.2rem);
}

/* Client proof */

.client-proof-grid {
  gap: clamp(.8rem, 1.3vw, 1.2rem);
}

.proof-card {
  min-height: 290px;
}

/* Contact */

.contact-section {
  padding-top: clamp(4.5rem, 7vw, 7rem);
  padding-bottom: clamp(3.5rem, 6vw, 5.5rem);
}

.contact-inner {
  gap: clamp(2.5rem, 5vw, 5rem);
}

.office-grid {
  margin-top: clamp(3rem, 5vw, 5rem);
}

/* Footer */

.footer-top {
  padding-top: clamp(2.5rem, 4vw, 4rem);
  padding-bottom: clamp(2rem, 3vw, 3rem);
}

.footer-bottom {
  padding-top: 1.2rem;
  padding-bottom: 1.2rem;
}

.footer-proof-link {
  padding-top: .8rem;
  padding-bottom: .8rem;
}

/* Tablet */

@media (max-width: 900px) {
  #top .hero-grid {
    min-height: auto;
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  #work.section,
  #services.section,
  #pricing.section,
  #studio.section,
  #client-proof.section {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .statement {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .contact-section {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}

/* Mobile */

@media (max-width: 600px) {
  #top .hero-grid {
    padding-top: 2.2rem;
    padding-bottom: 2.2rem;
  }

  #top .hero-copy h1 {
    margin-bottom: 1rem;
  }

  #top .hero-lede {
    margin-bottom: 1.4rem;
  }

  #top .actions {
    margin-bottom: 1.6rem;
  }

  #work.section,
  #services.section,
  #pricing.section,
  #studio.section,
  #client-proof.section {
    padding-top: 3.25rem;
    padding-bottom: 3.25rem;
  }

  #work .section-head,
  #services .section-head,
  #pricing .section-head,
  #studio .section-head,
  #client-proof .section-head {
    margin-bottom: 1.8rem;
  }

  .statement {
    padding-top: 3.25rem;
    padding-bottom: 3.25rem;
  }

  .contact-section {
    padding-top: 3.25rem;
    padding-bottom: 3.25rem;
  }

  .office-grid {
    margin-top: 2.5rem;
  }
}

/* =========================================================
   AXW-9R — WhatsApp icon repair
   ========================================================= */

.icon-whatsapp {
  display: block;
  width: 1em;
  height: 1em;
  fill: currentColor;
  stroke: none;
  flex: 0 0 auto;
}

.icon-whatsapp path {
  fill: currentColor;
  stroke: none;
}

.floating-whatsapp-icon {
  display: grid;
  place-items: center;
}

.floating-whatsapp-icon .icon-whatsapp {
  width: 25px;
  height: 25px;
}

.footer-social-icon .icon-whatsapp {
  width: 20px;
  height: 20px;
}

.footer-social-icon svg.icon-whatsapp,
.footer-social-icon svg.icon-whatsapp path {
  fill: currentColor !important;
  stroke: none !important;
}

@media (max-width: 750px) {
  .floating-whatsapp-icon .icon-whatsapp {
    width: 23px;
    height: 23px;
  }
}

/* =========================================================
   AXW-9R2 — WhatsApp logo match
   ========================================================= */

.icon-whatsapp {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
  stroke: none;
  overflow: visible;
}

.floating-whatsapp-icon,
.footer-social-icon {
  display: grid;
  place-items: center;
  color: #ffffff;
}

.floating-whatsapp-icon .icon-whatsapp {
  width: 24px;
  height: 24px;
}

.footer-social-icon .icon-whatsapp {
  width: 20px;
  height: 20px;
}

/* ensure crisp size in the floating CTA */
.floating-whatsapp {
  --wa-icon-size: 24px;
}

@media (max-width: 750px) {
  .floating-whatsapp-icon .icon-whatsapp {
    width: 22px;
    height: 22px;
  }

  .footer-social-icon .icon-whatsapp {
    width: 19px;
    height: 19px;
  }
}

/* =========================================================
   AXW-11A — Hero corner radius refinement
   ========================================================= */

/* TL=35px, TR=35px, BR=35px, BL=40px */
.axw-hero-radius-shell {
  border-radius: 2.3px 2.3px 2.3px 40px !important;
  overflow: hidden;
}

.axw-hero-radius-shell img,
.axw-hero-radius-shell video,
.axw-hero-radius-shell .hero-background-video {
  display: block;
  border-radius: inherit !important;
}

/* =========================================================
   APPROVED UI CHECKPOINT
   ========================================================= */


/* Header mascot */

.brand-with-mascot {
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:10px;
}

.brand-mascot {
  width:46px;
  height:46px;
  object-fit:contain;
}

.brand-copy {
  display:flex;
  flex-direction:column;
}


/* Remove hero mascot */

.hero-mascot {
  display:none !important;
}


/* Navbar */

.nav {
  gap:1rem;
}

.nav > a:not(.nav-cta),
.nav > a.nav-cta {

  border-radius:5px;

}


.nav > a:not(.nav-cta) {

  border:1px solid #000;

  padding:.55rem .9rem;

  font-size:.95rem;

}


.nav > a:not(.nav-cta):hover {

  background:#26648e;

  color:white;

}


.nav-cta {

  border-radius:5px;

  padding:.65rem 1rem;

}


/* Home visibility */

.home-page .home-nav-item {

  display:none;

}

.inner-page .home-nav-item {

  display:inline-flex;

}


/* CTA buttons */

.button,
.button-gold,
.button-outline,
.nav-cta {

  border-radius:30px;

}


/* Component radius */

.archive-empty,
.archive-panel,
.gallery-card,
.campaign-card,
.price-card,
.monthly,
.rate-details,
.service-list > div,
.steps li,
.proof-card,
.testimonial-card,
.project-card {

  border-radius:30px;

}


/* Card hover */

.gallery-card,
.campaign-card,
.price-card,
.proof-card,
.testimonial-card,
.project-card {

  transition:
    transform .3s ease,
    box-shadow .3s ease;

}


.gallery-card:hover,
.campaign-card:hover,
.price-card:hover,
.proof-card:hover,
.testimonial-card:hover,
.project-card:hover {

  transform:translateY(-12px);

  box-shadow:
    0 45px 100px rgba(0,0,0,.32);

}


/* Service rows */

.service-list > div {

  position:relative;

  transition:
    transform .3s ease,
    box-shadow .3s ease;

}


.service-list > div:hover {

  transform:translateY(-8px);

  z-index:5;

  box-shadow:
    0 35px 80px rgba(0,0,0,.28);

}


/* Process cards */

.steps {

  padding-top:20px;
  padding-bottom:20px;

}


.steps li {

  position:relative;

  transition:
    transform .3s ease,
    box-shadow .3s ease;

}


.steps li:hover {

  transform:translateY(-8px);

  z-index:5;

  box-shadow:
    0 35px 80px rgba(0,0,0,.28);

}


/* Spacing compression */

.section {

  padding-top:4rem;

  padding-bottom:4rem;

}

.section-head {

  margin-bottom:2rem;

}


/* HEADER LOGO FINAL ALIGNMENT */

.site-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
}


.brand-with-mascot {

  display:flex !important;

  flex-direction:row !important;

  align-items:center !important;

  gap:10px;

}


.brand-mascot {

  width:46px;

  height:46px;

  object-fit:contain;

}


.brand-copy {

  display:flex;

  flex-direction:column;

}



/* =========================================================
   LOCAL TEST — PROCESS CARD OVERLAP REPAIR
   ========================================================= */


/* Reserve hover breathing room */

.steps {

  padding-top:35px !important;

  padding-bottom:35px !important;

}


/* Step cards */

.steps li {

  position:relative;

  z-index:1;

  margin-top:12px;

  margin-bottom:12px;

  overflow:hidden;

}


/* Hover */

.steps li:hover {

  z-index:10;

  transform:translateY(-8px);

  box-shadow:

    0 35px 80px rgba(0,0,0,.28),

    0 12px 30px rgba(0,0,0,.15);

}


/* Prevent scaling collision */

.steps li:hover {

  scale:1 !important;

}


/* =========================================================
   LOCAL TEST — PROCESS CARD SAFE HOVER
   ========================================================= */


/* Remove transform collision */

.steps li {

  transform:none !important;

  box-shadow:none;

  position:relative;

}


/* Create internal hover surface */

.steps li::before {

  content:"";

  position:absolute;

  inset:-12px;

  border-radius:37px;

  background:transparent;

  z-index:-1;

  transition:
    background .3s ease,
    box-shadow .3s ease;

}


/* Hover without moving grid item */

.steps li:hover::before {

  background:#ffffff10;

  box-shadow:

    0 35px 80px rgba(0,0,0,.28),

    0 12px 30px rgba(0,0,0,.15);

}


.steps li:hover {

  z-index:3;

}



/* =========================================================
   LOCAL TEST — FIX SERVICE ROW HOVER OVERLAP
   ========================================================= */


/* Reserve hover space */

.service-list > div {

  position:relative;

  z-index:1;

  margin-top:12px;

  margin-bottom:12px;

}


/* Hover elevation */

.service-list > div:hover {

  z-index:5;

  transform:
    translateY(-8px);

  box-shadow:
    0 35px 80px rgba(0,0,0,.28),
    0 12px 30px rgba(0,0,0,.15);

}


/* Remove scale collision */

.service-list > div:hover {

  scale:none;

}



/* =========================================================
   LOCAL TEST — CARD ENHANCED HOVER EXPERIENCE
   ========================================================= */


/* Base card shape */

.campaign-card,
.gallery-card,
.price-card,
.proof-card {

  border-radius:37px !important;

  overflow:hidden;

  transition:
    transform .3s ease,
    box-shadow .3s ease,
    border-color .3s ease;

  will-change:transform;

}


/* Hover lift */

.campaign-card:hover,
.gallery-card:hover,
.price-card:hover,
.proof-card:hover {

  transform:
    translateY(-14px)
    scale(1.015);

  box-shadow:
    0 28px 65px rgba(0,0,0,.28),
    0 8px 20px rgba(0,0,0,.12);

}


/* Inner content follows rounded shape */

.campaign-card img,
.gallery-card img,
.price-card img,
.proof-card img {

  border-radius:inherit;

}


/* Reduced motion */

@media (prefers-reduced-motion: reduce){

  .campaign-card,
  .gallery-card,
  .price-card,
  .proof-card {

    transition:none;

  }


  .campaign-card:hover,
  .gallery-card:hover,
  .price-card:hover,
  .proof-card:hover {

    transform:none;

  }

}


/* =========================================================
   LOCAL TEST — PROCESS STEP POP EFFECT
   ========================================================= */


/* How it works cards */

.steps li {

  border-radius:37px !important;

  padding:2rem 1.5rem !important;

  transition:
    transform .3s ease,
    box-shadow .3s ease,
    background-color .3s ease;

  position:relative;

}


/* Hover */

.steps li:hover {

  transform:
    translateY(-12px);

  background:#ffffff10;

  box-shadow:

    0 35px 80px rgba(0,0,0,.28),

    0 12px 30px rgba(0,0,0,.15);

  z-index:5;

}


/* Reduced motion */

@media(prefers-reduced-motion:reduce){

  .steps li {

    transition:none;

  }


  .steps li:hover {

    transform:none;

  }

}


/* =========================================================
   LOCAL TEST — STRONGER PROCESS CARD ELEVATION
   ========================================================= */


/* Increase visual hover surface */

.steps li::before {

  inset:-16px;

}


/* Stronger shadow */

.steps li:hover::before {

  background:#ffffff14;

  box-shadow:

    0 50px 110px rgba(0,0,0,.38),

    0 20px 45px rgba(0,0,0,.22),

    0 5px 15px rgba(0,0,0,.12);

}




/* =========================================================
   LOCAL TEST — CONDITIONAL HOME NAV
   ========================================================= */


/* Hide Home on homepage */

.home-page .home-nav-item {

  display:none !important;

}


/* Show Home on internal pages */

.inner-page .home-nav-item {

  display:inline-flex !important;

}



/* =========================================================
   LOCAL TEST — FINAL SECTION SPACING COMPRESSION
   ========================================================= */


/* Main section rhythm */

.section {

  padding-top:
    clamp(3rem,5vw,5rem) !important;

  padding-bottom:
    clamp(3rem,5vw,5rem) !important;

}


/* Section heading */

.section-head {

  margin-bottom:2rem !important;

}


/* Hero bottom */

.hero-bottom {

  padding-top:.5rem !important;

  padding-bottom:.8rem !important;

}


/* Marquee */

.ticker {

  padding-top:.8rem !important;

  padding-bottom:.8rem !important;

}


/* Archive/work tabs */

.tabs {

  margin-bottom:1.2rem !important;

}


/* Archive panels */

.archive-panel {

  padding-top:1.2rem !important;

}


/* Pricing sections */

.pricing-section .section-head {

  margin-bottom:2rem !important;

}


.price-note {

  margin-bottom:2rem !important;

}


/* Process section */

.process-section {

  padding-top:3.5rem !important;

  padding-bottom:3.5rem !important;

}


/* Client proof */

.client-proof-section {

  padding-top:3.5rem !important;

  padding-bottom:3.5rem !important;

}


/* Contact section */

.contact-section {

  padding-top:4rem !important;

  padding-bottom:4rem !important;

}



/* =========================================================
   LOCAL TEST — STRONGER COMPONENT SHADOW
   ========================================================= */


/* Cards and hover components */

.gallery-card:hover,
.campaign-card:hover,
.price-card:hover,
.proof-card:hover,
.testimonial-card:hover,
.project-card:hover,
.feature-panel:hover,
.service-list > div:hover {

  box-shadow:

    0 55px 130px rgba(0,0,0,.42),

    0 22px 55px rgba(0,0,0,.25),

    0 8px 20px rgba(0,0,0,.15) !important;

}


/* Process cards safe hover shadow */

.steps li:hover::before {

  box-shadow:

    0 55px 130px rgba(0,0,0,.42),

    0 22px 55px rgba(0,0,0,.25),

    0 8px 20px rgba(0,0,0,.15) !important;

}


/* =========================================================
   LOCAL TEST — HEADER BRAND STACK FIX
   ========================================================= */


.brand-with-mascot {

  display:flex !important;

  flex-direction:row !important;

  align-items:center !important;

}


/* Logo text container */

.brand-copy {

  display:flex !important;

  flex-direction:column !important;

  align-items:flex-start !important;

  justify-content:center !important;

}


/* Main logo */

.brand-copy > span {

  display:block !important;

  line-height:1 !important;

}


/* Subtitle */

.brand-copy small {

  display:block !important;

  margin-top:8px !important;

  line-height:1 !important;

  letter-spacing:.28em !important;

}


/* Keep mascot aligned */

.brand-mascot {

  flex-shrink:0 !important;

}


/* =========================================================
   LOCAL TEST — REDUCE HOW IT WORKS EMPTY SPACE
   ========================================================= */


/* How it works section */

.process-section {

  padding-top:2.5rem !important;

  padding-bottom:2.5rem !important;

}


/* Heading area */

.process-section .section-head {

  margin-bottom:1.5rem !important;

}


/* Steps container */

.steps {

  padding-top:10px !important;

  padding-bottom:10px !important;

}


/* Step cards */

.steps li {

  padding-top:1.2rem !important;

  padding-bottom:1.2rem !important;

}


/* Reduce gap before client proof */

.client-proof-section {

  padding-top:2.5rem !important;

}



/* =========================================================
   LOCAL TEST — SERVICES ROW POP EFFECT
   ========================================================= */


/* Service page rows */

.service-list > div {

  position:relative;

  border-radius:30px !important;

  transition:
    transform .3s ease,
    box-shadow .3s ease,
    background-color .3s ease;

  z-index:1;

}


/* Hover elevation */

.service-list > div:hover {

  transform:
    translateY(-10px);

  background:#ffffff;

  z-index:5;

  box-shadow:

    0 45px 100px rgba(0,0,0,.30),

    0 15px 35px rgba(0,0,0,.18);

}


/* keep separators clean */

.service-list > div:hover + div {

  position:relative;

  z-index:1;

}


/* Reduced motion */

@media(prefers-reduced-motion:reduce){

  .service-list > div {

    transition:none;

  }


  .service-list > div:hover {

    transform:none;

  }

}


/* =========================================================
   LOCAL TEST — SERVICES ARTICLE HOVER
   ========================================================= */


/* Services page rows */

.services-list article {

  position:relative;

  border-radius:30px !important;

  padding:1.5rem 1rem !important;

  transition:

    transform .3s ease,

    box-shadow .3s ease,

    background-color .3s ease;

}


/* Hover */

.services-list article:hover {

  transform:

    translateY(-10px);

  background:#ffffff;

  z-index:5;

  box-shadow:

    0 45px 100px rgba(0,0,0,.30),

    0 15px 35px rgba(0,0,0,.18);

}


/* Keep text above */

.services-list article h2,
.services-list article p,
.services-list article span {

  position:relative;

  z-index:2;

}


/* Reduced motion */

@media(prefers-reduced-motion:reduce){

  .services-list article {

    transition:none;

  }


  .services-list article:hover {

    transform:none;

  }

}


/* =========================================================
   LOCAL TEST — NAV HOVER WHITE TEXT
   ========================================================= */


.nav > a:not(.nav-cta):hover,
.nav > a:not(.nav-cta):focus,
.nav > a:not(.nav-cta).is-active,
.nav > a[aria-current="page"] {

  background:#26648e !important;

  border-color:#26648e !important;

  color:#ffffff !important;

}


/* force child text color */

.nav > a:not(.nav-cta):hover *,
.nav > a:not(.nav-cta).is-active *,
.nav > a[aria-current="page"] * {

  color:#ffffff !important;

}

/* AXSTUDIO UI-11 — SERVICE NUMBER SPACING */

.service-list > div {
  grid-template-columns:
    11%
    42%
    1fr;

  column-gap: 1.5rem;
}

.service-list > div > span {
  padding-right: .75rem;
}

@media (max-width: 750px) {
  .service-list > div {
    grid-template-columns:
      44px
      1fr;

    column-gap: .9rem;
  }

  .service-list > div > span {
    padding-right: 0;
  }
}

/* AXSTUDIO UI-11R — SERVICE NUMBER RIGHT OFFSET */

.service-list > div > span {
  transform: translateX(12px);
}

@media (max-width: 750px) {
  .service-list > div > span {
    transform: translateX(6px);
  }
}

/* Default state: outline only */
.nav > a.nav-cta {
  background: transparent !important;
  color: #173e5b !important;
  border-color: #173e5b !important;
}

/* Hover/focus state: solid blue */
.nav > a.nav-cta:hover,
.nav > a.nav-cta:focus-visible {
  background: #26648e !important;
  color: #fff !important;
  border-color: #26648e !important;
}

/* Active only on the Start a project page */
.nav > a.nav-cta[aria-current="page"] {
  background: #26648e !important;
  color: #fff !important;
  border-color: #26648e !important;
}

/* AXSTUDIO UI-15 — WORK PAGE SPACING */

/*
 * Work used both the large inner-hero bottom padding
 * and the generic inner-content top padding.
 * Keep the hero spacious, but remove the duplicated gap.
 */

.work-page .inner-hero {
  padding-bottom: 2.5rem;
}

.work-page .inner-content {
  padding-top: 2rem;
}

@media (max-width: 750px) {
  .work-page .inner-hero {
    padding-bottom: 2rem;
  }

  .work-page .inner-content {
    padding-top: 1.5rem;
  }
}

/* AXSTUDIO UI-16 — INNER PAGE SPACING COMPRESSION */

/*
 * Shared inner pages had oversized vertical padding both
 * below the navbar and before their first content section.
 */

body.inner-page .inner-hero {
  padding-top: clamp(1.5rem, 3vw, 3rem);
  padding-bottom: clamp(2rem, 3.5vw, 3.5rem);
}

body.inner-page .inner-content {
  padding-top: clamp(2rem, 3vw, 3rem);
}

/*
 * Work already has a dedicated compact treatment.
 * Keep it slightly tighter than the generic inner pages.
 */
body.work-page .inner-hero {
  padding-bottom: 2.5rem;
}

body.work-page .inner-content {
  padding-top: 2rem;
}

@media (max-width: 750px) {
  body.inner-page .inner-hero {
    padding-top: 1.5rem;
    padding-bottom: 2rem;
  }

  body.inner-page .inner-content {
    padding-top: 1.5rem;
  }

  body.work-page .inner-hero {
    padding-bottom: 2rem;
  }

  body.work-page .inner-content {
    padding-top: 1.5rem;
  }
}

/* AXSTUDIO UI-18R — SHOWREEL FLOAT WRAPPER */

/*
 * The wrapper owns movement.
 * The showreel button keeps its own interaction behavior.
 * Only transform is animated.
 */

.hero-art-float-shell {
  min-width: 0;
  height: 100%;

  display: flex;
  align-items: stretch;

  animation:
    avatarx-showreel-float
    1.9s
    ease-in-out
    infinite;

  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;

  filter:
    drop-shadow(0 28px 32px rgba(17, 45, 68, .24));
}

.hero-art-float-shell > .hero-art {
  width: 100%;
  height: 100%;
}

@keyframes avatarx-showreel-float {
  0%,
  100% {
    transform: translate3d(0, 8px, 0);
  }

  50% {
    transform: translate3d(0, -24px, 0);
  }
}

/* Do not stop the animation when hovering the button. */
.hero-art-float-shell:hover {
  animation-play-state: running;
}

@media (max-width: 750px) {
  .hero-art-float-shell {
    width: 100%;
    height: 360px;

    animation-duration: 2.2s;
  }

  @keyframes avatarx-showreel-float {
    0%,
    100% {
      transform: translate3d(0, 5px, 0);
    }

    50% {
      transform: translate3d(0, -15px, 0);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-art-float-shell {
    animation: none;
    transform: none;
    will-change: auto;
  }
}

/* AXSTUDIO UI-20 — WORK FAMILY CARD EFFECTS */

/*
 * Shared treatment for:
 * - Work landing cards
 * - Deliverable summary cards
 * - Deliverable feature rows
 * - Related deliverable cards
 *
 * Only transform and box-shadow change during interaction.
 */

/* =========================================================
   Work landing page cards
   ========================================================= */

.work-page .inner-card {
  position: relative;

  border-radius: 40px;
  overflow: hidden;

  box-shadow:
    0 24px 58px rgba(17, 45, 68, .22);

  transition:
    transform .24s ease,
    box-shadow .24s ease,
    border-color .24s ease;

  will-change: transform;
}

.work-page .inner-card:hover,
.work-page .inner-card:focus-within {
  z-index: 3;

  transform:
    translate3d(0, -12px, 0)
    scale(1.018);

  box-shadow:
    0 38px 85px rgba(17, 45, 68, .34);

  border-color:
    rgba(38, 100, 142, .38);
}


/* =========================================================
   Deliverable hero summary
   ========================================================= */

.deliverable-page .deliverable-summary {
  position: relative;

  border-radius: 40px;
  overflow: hidden;

  box-shadow:
    0 24px 58px rgba(17, 45, 68, .22);

  transition:
    transform .24s ease,
    box-shadow .24s ease,
    border-color .24s ease;

  will-change: transform;
}

.deliverable-page .deliverable-summary:hover,
.deliverable-page .deliverable-summary:focus-within {
  transform:
    translate3d(0, -12px, 0)
    scale(1.018);

  box-shadow:
    0 38px 85px rgba(17, 45, 68, .34);

  border-color:
    rgba(38, 100, 142, .38);
}


/* =========================================================
   Deliverable feature rows
   ========================================================= */

.deliverable-page .deliverable-feature-list {
  display: grid;
  gap: 18px;

  border-top: 0;
}

.deliverable-page .deliverable-feature-list li {
  position: relative;

  min-height: 90px;

  padding:
    1.35rem
    1.5rem;

  border:
    1px solid
    #c4d9e1;

  border-radius: 32px;

  background: #fff;

  box-shadow:
    0 18px 42px rgba(17, 45, 68, .16);

  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease;

  will-change: transform;
}

.deliverable-page .deliverable-feature-list li:hover,
.deliverable-page .deliverable-feature-list li:focus-within {
  z-index: 2;

  transform:
    translate3d(0, -8px, 0)
    scale(1.012);

  box-shadow:
    0 30px 68px rgba(17, 45, 68, .28);

  border-color:
    rgba(38, 100, 142, .35);
}


/* =========================================================
   Related deliverable cards
   ========================================================= */

.deliverable-page .deliverable-family-grid {
  gap: 18px;

  border-top: 0;
  border-left: 0;
}

.deliverable-page .deliverable-family-grid a {
  position: relative;

  border:
    1px solid
    #9fc7d4;

  border-radius: 40px;

  background: #fff;

  box-shadow:
    0 22px 52px rgba(17, 45, 68, .20);

  transition:
    transform .24s ease,
    box-shadow .24s ease,
    border-color .24s ease;

  will-change: transform;
}

.deliverable-page .deliverable-family-grid a:hover,
.deliverable-page .deliverable-family-grid a:focus-visible {
  z-index: 3;

  transform:
    translate3d(0, -12px, 0)
    scale(1.018);

  box-shadow:
    0 38px 85px rgba(17, 45, 68, .34);

  border-color:
    rgba(38, 100, 142, .42);
}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 750px) {

  .work-page .inner-card,
  .deliverable-page .deliverable-summary,
  .deliverable-page .deliverable-family-grid a {
    border-radius: 28px;
  }

  .deliverable-page .deliverable-feature-list li {
    border-radius: 24px;
  }

  .work-page .inner-card:hover,
  .work-page .inner-card:focus-within,
  .deliverable-page .deliverable-summary:hover,
  .deliverable-page .deliverable-summary:focus-within,
  .deliverable-page .deliverable-family-grid a:hover,
  .deliverable-page .deliverable-family-grid a:focus-visible {
    transform:
      translate3d(0, -7px, 0)
      scale(1.01);
  }

  .deliverable-page .deliverable-feature-list li:hover,
  .deliverable-page .deliverable-feature-list li:focus-within {
    transform:
      translate3d(0, -5px, 0)
      scale(1.008);
  }
}


/* =========================================================
   Accessibility
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .work-page .inner-card,
  .deliverable-page .deliverable-summary,
  .deliverable-page .deliverable-feature-list li,
  .deliverable-page .deliverable-family-grid a {
    transition: none;
    will-change: auto;
  }

  .work-page .inner-card:hover,
  .work-page .inner-card:focus-within,
  .deliverable-page .deliverable-summary:hover,
  .deliverable-page .deliverable-summary:focus-within,
  .deliverable-page .deliverable-feature-list li:hover,
  .deliverable-page .deliverable-feature-list li:focus-within,
  .deliverable-page .deliverable-family-grid a:hover,
  .deliverable-page .deliverable-family-grid a:focus-visible {
    transform: none;
  }
}

/* AXSTUDIO UI-21 — SERVICES CARD EFFECTS */

.services-page .inner-list {
  display: grid;
  gap: 18px;

  border-top: 0;
}

.services-page .inner-list article {
  position: relative;

  grid-template-columns:
    80px
    1fr
    1fr;

  gap: 2rem;

  align-items: center;

  padding:
    2rem
    1.6rem;

  border:
    1px solid
    #b4d2dc;

  border-radius: 40px;

  background: #fff;

  box-shadow:
    0 22px 54px rgba(17, 45, 68, .20);

  transition:
    transform .24s ease,
    box-shadow .24s ease,
    border-color .24s ease;

  will-change: transform;
}

.services-page .inner-list article:hover,
.services-page .inner-list article:focus-within {
  z-index: 3;

  transform:
    translate3d(0, -12px, 0)
    scale(1.018);

  box-shadow:
    0 38px 86px rgba(17, 45, 68, .34);

  border-color:
    rgba(38, 100, 142, .40);
}

.services-page .inner-list article h2,
.services-page .inner-list article p {
  margin: 0;
}

@media (max-width: 900px) {
  .services-page .inner-list article {
    grid-template-columns:
      50px
      1fr;

    border-radius: 30px;
  }

  .services-page .inner-list article p {
    grid-column: 2;
  }
}

@media (max-width: 750px) {
  .services-page .inner-list {
    gap: 14px;
  }

  .services-page .inner-list article:hover,
  .services-page .inner-list article:focus-within {
    transform:
      translate3d(0, -7px, 0)
      scale(1.01);
  }
}

@media (prefers-reduced-motion: reduce) {
  .services-page .inner-list article {
    transition: none;
    will-change: auto;
  }

  .services-page .inner-list article:hover,
  .services-page .inner-list article:focus-within {
    transform: none;
  }
}

/* AXSTUDIO UI-22 — PRICING STUDIO START PROJECT EFFECTS */

/* =========================================================
   Shared interaction
   ========================================================= */

.pricing-page .inner-card,
.studio-page .inner-steps article,
.start-project-page .project-contact-panel {
  position: relative;

  border-radius: 40px;

  box-shadow:
    0 22px 54px rgba(17, 45, 68, .20);

  transition:
    transform .24s ease,
    box-shadow .24s ease,
    border-color .24s ease;

  will-change: transform;
}

.pricing-page .inner-card:hover,
.pricing-page .inner-card:focus-within,
.studio-page .inner-steps article:hover,
.studio-page .inner-steps article:focus-within,
.start-project-page .project-contact-panel:hover,
.start-project-page .project-contact-panel:focus-within {
  z-index: 3;

  transform:
    translate3d(0, -12px, 0)
    scale(1.018);

  box-shadow:
    0 38px 86px rgba(17, 45, 68, .34);

  border-color:
    rgba(38, 100, 142, .40);
}


/* =========================================================
   Pricing
   ========================================================= */

.pricing-page .inner-grid {
  gap: 18px;
}

.pricing-page .inner-card {
  overflow: hidden;
}


/* =========================================================
   Studio
   ========================================================= */

.studio-page .inner-steps {
  gap: 18px;

  border-top: 0;
}

.studio-page .inner-steps article {
  padding:
    1.8rem
    1.5rem;

  border:
    1px solid
    #b4d2dc;

  background: #fff;
}

.studio-page .inner-steps article h2 {
  margin-top: 2rem;
}


/* =========================================================
   Start a project
   ========================================================= */

.start-project-page .project-contact-panel {
  overflow: hidden;

  border:
    1px solid
    #b7d4df;

  background: #fff;
}

/*
 * The brief block lives inside the panel.
 * Give it a softer nested card treatment without
 * creating another large floating layer.
 */
.start-project-page .project-brief {
  margin-top: 2rem;

  padding:
    1.6rem;

  border:
    1px solid
    #c4d9e1;

  border-radius: 28px;

  background:
    #f8fcfd;

  box-shadow:
    0 12px 30px rgba(17, 45, 68, .10);
}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 750px) {

  .pricing-page .inner-card,
  .studio-page .inner-steps article,
  .start-project-page .project-contact-panel {
    border-radius: 28px;
  }

  .start-project-page .project-brief {
    border-radius: 22px;
  }

  .pricing-page .inner-card:hover,
  .pricing-page .inner-card:focus-within,
  .studio-page .inner-steps article:hover,
  .studio-page .inner-steps article:focus-within,
  .start-project-page .project-contact-panel:hover,
  .start-project-page .project-contact-panel:focus-within {
    transform:
      translate3d(0, -7px, 0)
      scale(1.01);
  }
}


/* =========================================================
   Reduced motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .pricing-page .inner-card,
  .studio-page .inner-steps article,
  .start-project-page .project-contact-panel {
    transition: none;
    will-change: auto;
  }

  .pricing-page .inner-card:hover,
  .pricing-page .inner-card:focus-within,
  .studio-page .inner-steps article:hover,
  .studio-page .inner-steps article:focus-within,
  .start-project-page .project-contact-panel:hover,
  .start-project-page .project-contact-panel:focus-within {
    transform: none;
  }
}

/* AXSTUDIO UI-22R — FINAL PRICING CARD OVERRIDE */

/*
 * Final high-specificity Pricing treatment.
 * Kept at the end of styles.css so earlier .inner-card
 * declarations cannot override it.
 */

body.pricing-page .inner-grid {
  gap: 22px !important;
  overflow: visible !important;
}

body.pricing-page .inner-grid > article.inner-card {
  position: relative !important;
  z-index: 1;

  overflow: hidden !important;

  border:
    1px solid
    rgba(38, 100, 142, .24) !important;

  border-radius: 40px !important;

  background: #fff;

  box-shadow:
    0 24px 58px rgba(17, 45, 68, .22),
    0 8px 22px rgba(17, 45, 68, .10) !important;

  transform: translate3d(0, 0, 0);

  transition:
    transform .24s ease,
    box-shadow .24s ease,
    border-color .24s ease !important;

  will-change: transform;
}

body.pricing-page
.inner-grid
> article.inner-card.inner-card-featured {
  background: #e7f7f8 !important;

  border-color:
    rgba(38, 100, 142, .38) !important;
}

body.pricing-page .inner-grid > article.inner-card:hover,
body.pricing-page .inner-grid > article.inner-card:focus-within {
  z-index: 10;

  transform:
    translate3d(0, -14px, 0)
    scale(1.02);

  border-color:
    rgba(38, 100, 142, .55) !important;

  box-shadow:
    0 42px 92px rgba(17, 45, 68, .38),
    0 16px 34px rgba(17, 45, 68, .18) !important;
}


/* Mobile */

@media (max-width: 750px) {

  body.pricing-page .inner-grid {
    gap: 18px !important;
  }

  body.pricing-page .inner-grid > article.inner-card {
    border-radius: 28px !important;
  }

  body.pricing-page .inner-grid > article.inner-card:hover,
  body.pricing-page .inner-grid > article.inner-card:focus-within {
    transform:
      translate3d(0, -7px, 0)
      scale(1.01);
  }
}


/* Accessibility */

@media (prefers-reduced-motion: reduce) {

  body.pricing-page .inner-grid > article.inner-card {
    transition: none !important;
    will-change: auto;
  }

  body.pricing-page .inner-grid > article.inner-card:hover,
  body.pricing-page .inner-grid > article.inner-card:focus-within {
    transform: none;
  }
}

/* AXSTUDIO UI-22R2 — FINAL STUDIO STEP CARD OVERRIDE */

/*
 * High-specificity Studio-only card treatment.
 * Appended at the end so the original .inner-steps rules
 * cannot flatten the cards.
 */

body.studio-page .inner-steps {
  display: grid !important;

  grid-template-columns:
    repeat(5, minmax(0, 1fr)) !important;

  gap: 18px !important;

  border-top: 0 !important;

  overflow: visible !important;
}

body.studio-page .inner-steps > article {
  position: relative !important;

  z-index: 1;

  min-width: 0;

  padding:
    1.8rem
    1.5rem
    2rem !important;

  border:
    1px solid
    rgba(38, 100, 142, .24) !important;

  border-radius: 40px !important;

  background: #fff !important;

  box-shadow:
    0 24px 58px rgba(17, 45, 68, .22),
    0 8px 22px rgba(17, 45, 68, .10) !important;

  transform:
    translate3d(0, 0, 0);

  transition:
    transform .24s ease,
    box-shadow .24s ease,
    border-color .24s ease !important;

  will-change: transform;
}

body.studio-page .inner-steps > article:hover,
body.studio-page .inner-steps > article:focus-within {
  z-index: 10;

  transform:
    translate3d(0, -14px, 0)
    scale(1.025);

  border-color:
    rgba(38, 100, 142, .55) !important;

  box-shadow:
    0 42px 92px rgba(17, 45, 68, .38),
    0 16px 34px rgba(17, 45, 68, .18) !important;
}

body.studio-page .inner-steps > article > span {
  display: block;
}

body.studio-page .inner-steps > article h2 {
  margin:
    2rem
    0
    1rem !important;
}

body.studio-page .inner-steps > article p {
  margin-bottom: 0;
}


/* Tablet */

@media (max-width: 1100px) {

  body.studio-page .inner-steps {
    grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;
  }
}


/* Mobile */

@media (max-width: 750px) {

  body.studio-page .inner-steps {
    grid-template-columns:
      1fr !important;

    gap: 16px !important;
  }

  body.studio-page .inner-steps > article {
    border-radius: 28px !important;
  }

  body.studio-page .inner-steps > article:hover,
  body.studio-page .inner-steps > article:focus-within {
    transform:
      translate3d(0, -7px, 0)
      scale(1.01);
  }
}


/* Accessibility */

@media (prefers-reduced-motion: reduce) {

  body.studio-page .inner-steps > article {
    transition: none !important;
    will-change: auto;
  }

  body.studio-page .inner-steps > article:hover,
  body.studio-page .inner-steps > article:focus-within {
    transform: none;
  }
}

/* AXSTUDIO UI-22R3 — FINAL START PROJECT CARD OVERRIDE */

/*
 * High-specificity Start-a-Project treatment.
 * Main contact panel gets the primary elevation.
 * The brief remains a softer nested card.
 */

body.start-project-page .project-contact-panel {
  position: relative !important;

  z-index: 1;

  overflow: visible !important;

  border:
    1px solid
    rgba(38, 100, 142, .26) !important;

  border-radius: 40px !important;

  background: #fff !important;

  box-shadow:
    0 24px 58px rgba(17, 45, 68, .22),
    0 8px 22px rgba(17, 45, 68, .10) !important;

  transform:
    translate3d(0, 0, 0);

  transition:
    transform .24s ease,
    box-shadow .24s ease,
    border-color .24s ease !important;

  will-change: transform;
}

body.start-project-page .project-contact-panel:hover,
body.start-project-page .project-contact-panel:focus-within {
  z-index: 10;

  transform:
    translate3d(0, -14px, 0)
    scale(1.02);

  border-color:
    rgba(38, 100, 142, .55) !important;

  box-shadow:
    0 42px 92px rgba(17, 45, 68, .38),
    0 16px 34px rgba(17, 45, 68, .18) !important;
}


/* Nested brief card */

body.start-project-page .project-contact-panel .project-brief {
  margin-top: 2.2rem !important;

  padding:
    1.7rem
    1.8rem !important;

  border:
    1px solid
    rgba(38, 100, 142, .20) !important;

  border-radius: 28px !important;

  background:
    linear-gradient(
      135deg,
      #f8fcfd 0%,
      #eef8fa 100%
    ) !important;

  box-shadow:
    0 12px 30px rgba(17, 45, 68, .11) !important;

  transition:
    transform .20s ease,
    box-shadow .20s ease !important;
}

body.start-project-page
.project-contact-panel
.project-brief:hover {
  transform:
    translate3d(0, -5px, 0);

  box-shadow:
    0 20px 42px rgba(17, 45, 68, .18) !important;
}


/* Keep contact links visually stable */

body.start-project-page .inner-contact-link {
  position: relative;
  z-index: 1;
}


/* Mobile */

@media (max-width: 750px) {

  body.start-project-page .project-contact-panel {
    border-radius: 28px !important;
  }

  body.start-project-page .project-contact-panel .project-brief {
    border-radius: 22px !important;
  }

  body.start-project-page .project-contact-panel:hover,
  body.start-project-page .project-contact-panel:focus-within {
    transform:
      translate3d(0, -7px, 0)
      scale(1.01);
  }

  body.start-project-page
  .project-contact-panel
  .project-brief:hover {
    transform:
      translate3d(0, -3px, 0);
  }
}


/* Accessibility */

@media (prefers-reduced-motion: reduce) {

  body.start-project-page .project-contact-panel,
  body.start-project-page .project-contact-panel .project-brief {
    transition: none !important;
    will-change: auto;
  }

  body.start-project-page .project-contact-panel:hover,
  body.start-project-page .project-contact-panel:focus-within,
  body.start-project-page
  .project-contact-panel
  .project-brief:hover {
    transform: none;
  }
}

/* AXSTUDIO UI-23 — GLOBAL PAGE TYPEWRITER */

/*
 * Keep headline geometry stable while typing.
 * Only textContent changes; no layout animation.
 */

.page-typewriter {
  position: relative;
}

.inner-hero .page-typewriter {
  min-height: 1.05em;
}

.products-typewriter {
  min-height: 2.05em;
}

.page-typewriter.typewriter-active.is-typing::after,
.page-typewriter.typewriter-active
.page-typewriter-line.is-typing::after {
  content: "";

  display: inline-block;

  width: .055em;
  height: .82em;

  margin-left: .055em;

  vertical-align: -.04em;

  background: currentColor;

  animation:
    global-typewriter-caret
    .72s
    steps(1, end)
    infinite;
}

@keyframes global-typewriter-caret {
  0%,
  46% {
    opacity: 1;
  }

  47%,
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {

  .page-typewriter.typewriter-active::after,
  .page-typewriter.typewriter-active
  .page-typewriter-line::after {
    display: none;
    animation: none;
  }
}


/* AXSTUDIO UI-23R3 — DEDICATED HOME TYPEWRITER */

/*
 * Home heading is intentionally independent from the
 * shared navbar-page typewriter system.
 */

#home-hero-heading.home-hero-heading-typewriter {
  position: relative;

  /*
   * Preserve the final two-line footprint while typing
   * so the paragraph/buttons below do not jump.
   */
  min-height: 2.05em;
}

#home-hero-heading .home-hero-type-line {
  position: relative;
}

#home-hero-heading
.home-hero-type-line.home-is-typing::after {
  content: "";

  display: inline-block;

  width: .055em;
  height: .82em;

  margin-left: .055em;

  vertical-align: -.04em;

  background: currentColor;

  animation:
    home-hero-type-caret
    .68s
    steps(1, end)
    infinite;
}

@keyframes home-hero-type-caret {
  0%,
  46% {
    opacity: 1;
  }

  47%,
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {

  #home-hero-heading
  .home-hero-type-line.home-is-typing::after {
    display: none;
    animation: none;
  }
}

/* AXSTUDIO UI-24 — NAVBAR UNDERLINE SYSTEM */

/*
 * Navbar visual contract:
 *
 * default  = text only
 * hover    = animated underline
 * current  = persistent underline
 *
 * No square borders.
 * No filled active navbar boxes.
 */

#main-nav.nav > a {
  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;

  padding:
    .8rem
    .35rem !important;

  color: #173e5b !important;

  box-shadow: none !important;

  text-decoration: none;

  transition:
    color .2s ease !important;
}


/* Underline */

#main-nav.nav > a::after {
  content: "";

  position: absolute;

  left: .35rem;
  right: .35rem;
  bottom: .38rem;

  height: 2px;

  background: #26648e;

  transform:
    scaleX(0);

  transform-origin:
    center;

  transition:
    transform .22s ease;

  pointer-events: none;
}


/* Hover / keyboard focus */

#main-nav.nav > a:hover,
#main-nav.nav > a:focus-visible {
  color: #26648e !important;

  background: transparent !important;
}

#main-nav.nav > a:hover::after,
#main-nav.nav > a:focus-visible::after {
  transform:
    scaleX(1);
}


/* Current page */

#main-nav.nav > a[aria-current="page"] {
  color: #26648e !important;

  background: transparent !important;

  border: 0 !important;

  box-shadow: none !important;
}

#main-nav.nav > a[aria-current="page"]::after {
  transform:
    scaleX(1);
}


/*
 * Start a project previously had its own CTA box.
 * It now behaves exactly like the other navbar tabs.
 */

#main-nav.nav > a.nav-cta,
#main-nav.nav > a.nav-cta:hover,
#main-nav.nav > a.nav-cta:focus-visible,
#main-nav.nav > a.nav-cta[aria-current="page"] {
  border: 0 !important;

  border-radius: 0 !important;

  background: transparent !important;

  color: #173e5b !important;

  box-shadow: none !important;
}

#main-nav.nav > a.nav-cta:hover,
#main-nav.nav > a.nav-cta:focus-visible,
#main-nav.nav > a.nav-cta[aria-current="page"] {
  color: #26648e !important;
}


/* Mobile */

@media (max-width: 750px) {

  #main-nav.nav > a {
    width: 100%;

    justify-content: flex-start;

    padding:
      .9rem
      .25rem !important;
  }

  #main-nav.nav > a::after {
    left: .25rem;
    right: auto;

    width: 42px;

    bottom: .45rem;

    transform-origin: left;
  }
}


/* Accessibility */

@media (prefers-reduced-motion: reduce) {

  #main-nav.nav > a,
  #main-nav.nav > a::after {
    transition: none !important;
  }
}


/* AXSTUDIO UI-24R — FINAL START PROJECT NAV OVERRIDE */

#main-nav.nav > a.nav-cta,
#main-nav.nav > a.nav-cta:hover,
#main-nav.nav > a.nav-cta:focus,
#main-nav.nav > a.nav-cta:focus-visible,
#main-nav.nav > a.nav-cta[aria-current="page"] {
  border: none !important;
  outline: none;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: .8rem .35rem !important;
}

/* keep underline behavior */
#main-nav.nav > a.nav-cta::after {
  content: "";
  position: absolute;
  left: .35rem;
  right: .35rem;
  bottom: .38rem;
  height: 2px;
  background: #26648e;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .22s ease;
}

#main-nav.nav > a.nav-cta:hover::after,
#main-nav.nav > a.nav-cta:focus-visible::after,
#main-nav.nav > a.nav-cta[aria-current="page"]::after {
  transform: scaleX(1);
}

/* AXSTUDIO UI-24R2 — START PROJECT IS A NORMAL NAV LINK */

/*
 * Start a project no longer has nav-cta in the HTML.
 * This defensive rule ensures its href can never inherit
 * an old CTA border from another stylesheet.
 */

#main-nav > a[href="/start-a-project.html"],
#main-nav > a[href="/start-a-project.html"]:hover,
#main-nav > a[href="/start-a-project.html"]:focus,
#main-nav > a[href="/start-a-project.html"]:focus-visible,
#main-nav > a[href="/start-a-project.html"][aria-current="page"] {
  border: 0 !important;
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;

  outline: 0;

  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;

  appearance: none;
  -webkit-appearance: none;
}

/* Same underline behavior as every other navbar link. */

#main-nav > a[href="/start-a-project.html"]::after {
  content: "";

  position: absolute;

  left: .35rem;
  right: .35rem;
  bottom: .38rem;

  height: 2px;

  background: #26648e;

  transform: scaleX(0);
  transform-origin: center;

  transition: transform .22s ease;
}

#main-nav > a[href="/start-a-project.html"]:hover::after,
#main-nav > a[href="/start-a-project.html"]:focus-visible::after,
#main-nav > a[href="/start-a-project.html"][aria-current="page"]::after {
  transform: scaleX(1);
}

/* AXSTUDIO UI-25 — SOCIAL REELS SPACING COMPRESSION */

/*
 * Social Media Reels only.
 * Reduce oversized whitespace without changing card styling,
 * typography, hover effects or the shared deliverable layout.
 */

/* Navbar -> hero content */

body.social-reels-page .deliverable-hero {
  padding-top:
    clamp(2.25rem, 3.5vw, 3.75rem) !important;

  padding-bottom:
    clamp(2.75rem, 4vw, 4rem) !important;
}


/* Hero -> What's Included */

body.social-reels-page .deliverable-details {
  padding:
    clamp(2.75rem, 4vw, 4rem)
    0 !important;
}


/* What's Included -> deliverable family */

body.social-reels-page .deliverable-family {
  padding:
    clamp(2.75rem, 4vw, 4rem)
    0 !important;
}


/* Reduce internal heading-to-card gap slightly */

body.social-reels-page
.deliverable-family-grid {
  margin-top:
    1.25rem !important;
}


/* Keep feature area compact without changing cards */

body.social-reels-page
.deliverable-details-grid {
  gap:
    clamp(2rem, 4vw, 4rem) !important;
}


/* Mobile */

@media (max-width: 750px) {

  body.social-reels-page .deliverable-hero {
    padding-top:
      2rem !important;

    padding-bottom:
      2.5rem !important;
  }

  body.social-reels-page .deliverable-details,
  body.social-reels-page .deliverable-family {
    padding:
      2.5rem
      0 !important;
  }

  body.social-reels-page
  .deliverable-family-grid {
    margin-top:
      1rem !important;
  }
}

/* AXSTUDIO UI-25R — COMMERCIAL BRAND SPACING COMPRESSION */

/*
 * Commercial Videos + Brand Films only.
 * Matches the compressed spacing used on Social Media Reels.
 */

body.commercial-videos-page .deliverable-hero,
body.brand-films-page .deliverable-hero {
  padding-top:
    clamp(2.25rem, 3.5vw, 3.75rem) !important;

  padding-bottom:
    clamp(2.75rem, 4vw, 4rem) !important;
}


/* Hero -> What's Included */

body.commercial-videos-page .deliverable-details,
body.brand-films-page .deliverable-details {
  padding:
    clamp(2.75rem, 4vw, 4rem)
    0 !important;
}


/* What's Included -> related deliverables */

body.commercial-videos-page .deliverable-family,
body.brand-films-page .deliverable-family {
  padding:
    clamp(2.75rem, 4vw, 4rem)
    0 !important;
}


/* Compact heading -> cards spacing */

body.commercial-videos-page .deliverable-family-grid,
body.brand-films-page .deliverable-family-grid {
  margin-top:
    1.25rem !important;
}


/* Reduce oversized internal section gap */

body.commercial-videos-page .deliverable-details-grid,
body.brand-films-page .deliverable-details-grid {
  gap:
    clamp(2rem, 4vw, 4rem) !important;
}


/* Mobile */

@media (max-width: 750px) {

  body.commercial-videos-page .deliverable-hero,
  body.brand-films-page .deliverable-hero {
    padding-top:
      2rem !important;

    padding-bottom:
      2.5rem !important;
  }

  body.commercial-videos-page .deliverable-details,
  body.commercial-videos-page .deliverable-family,
  body.brand-films-page .deliverable-details,
  body.brand-films-page .deliverable-family {
    padding:
      2.5rem
      0 !important;
  }

  body.commercial-videos-page .deliverable-family-grid,
  body.brand-films-page .deliverable-family-grid {
    margin-top:
      1rem !important;
  }
}


/* Homepage headline: half the existing size at each responsive breakpoint. */
#home-hero-heading { font-size: clamp(1.9rem, 3.5vw, 3.75rem); }
@media (max-width: 1050px) {
  #home-hero-heading { font-size: clamp(1.75rem, 3.5vw, 3rem); }
}
@media (max-width: 750px) {
  #home-hero-heading { font-size: clamp(1.8rem, 7vw, 3rem); }
}
@media (max-width: 440px) {
  #home-hero-heading { font-size: 1.725rem; }
}

/* Studio sample films, directly below the homepage hero. */
.studio-references { background: var(--bg); padding: clamp(3.25rem, 5vw, 5rem) 0; }
.studio-reference-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.studio-reference-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 1rem; background: var(--panel); }
.studio-reference-card video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #0b0b0d; }
.studio-reference-caption { padding: 1.5rem; }
.studio-reference-caption h3 { margin-bottom: .5rem; font-size: 1.5rem; }
.studio-reference-caption p { margin-bottom: 1.25rem; color: var(--muted); font-size: .9rem; }
@media (max-width: 750px) {
  .studio-reference-grid { grid-template-columns: 1fr; }
}

/* Avatarnaut credit and creative pipeline introduction. */
.avatarnaut-introduction { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: center; gap: clamp(2rem, 4vw, 4rem); margin-bottom: 2rem; padding: clamp(1.5rem, 3vw, 3rem); border: 1px solid var(--line); border-radius: 1rem; background: var(--panel); }
.avatarnaut-credit .eyebrow { margin-bottom: .5rem; }
.avatarnaut-credit img { display: block; width: 100%; height: auto; }
.avatarnaut-pipeline { margin: .5rem 0 0; font-size: .95rem; line-height: 1.5; }
.avatarnaut-creation-copy h3 { margin-bottom: 1rem; font-size: clamp(1.5rem, 2.4vw, 2.25rem); line-height: 1.15; }
.avatarnaut-creation-copy p { margin-bottom: 0; color: var(--muted); line-height: 1.7; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 750px) {
  .avatarnaut-introduction { grid-template-columns: 1fr; }
  .avatarnaut-credit { max-width: 420px; }
}

/* AI model showcase: preserve the supplied film's full 3:2 frame. */
.ai-models-section .studio-reference-grid {
  grid-template-columns: minmax(0, 1fr);
  max-width: 48rem;
  margin-inline: auto;
}
.ai-models-section .studio-reference-card video {
  aspect-ratio: 3 / 2;
}