/* ============ Variables ============ */
:root{
  --navy:#1B2A4A;
  --navy-deep:#0F1B36;
  --navy-soft:#2A3A5E;
  --crimson:#8B1A1A;
  --crimson-bright:#A82424;
  --gold:#B59140;
  --gold-deep:#8B7335;
  --gold-bright:#D4AF50;
  --cream:#F5F0E8;
  --cream-warm:#EDE5D6;
  --cream-deep:#E5DCC9;
  /* Tinted near-white — barely perceptible warm shift toward the cream family. Pure #FFF never appears in nature. */
  --white:#FDFBF6;
  --shadow-sm:0 4px 16px rgba(15,27,54,.08);
  --shadow-md:0 18px 48px rgba(15,27,54,.14);
  --shadow-lg:0 32px 80px rgba(15,27,54,.22);
  --shadow-crimson:0 18px 50px rgba(139,26,26,.32);
  --t:cubic-bezier(.22,.61,.36,1);
  /* Was elastic bounce — replaced with ease-out-quint. Real-world objects don't overshoot. */
  --t-bounce:cubic-bezier(.22,1,.36,1);
}

/* ============ Reset & Base ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:16px;
  line-height:1.65;
  color:var(--navy);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
/* Respect user motion preference — surgical, only stills the big looping/eye-catching motions.
   UI hover/click transitions stay smooth so the site still feels responsive. */
@media (prefers-reduced-motion: reduce) {
  .reveal{opacity:1 !important;transform:none !important;transition:none !important;}
  .marquee-track{animation:none !important;}
  .hero-logo .logo-box{animation:none !important;}
  html{scroll-behavior:auto !important;}
}
::selection{background:var(--crimson);color:var(--gold);}
h1,h2,h3,h4,h5,h6{font-family:'Playfair Display',Georgia,serif;font-weight:800;line-height:1.05;letter-spacing:-.015em;}
h1{font-size:clamp(2.6rem,6vw,5.5rem);}
h2{font-size:clamp(2.2rem,4.5vw,4rem);}
h3{font-size:clamp(1.4rem,2.2vw,2rem);}
p{font-size:1.0625rem;line-height:1.7;}
a{color:inherit;text-decoration:none;transition:color .25s var(--t);}
img{max-width:100%;display:block;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
ul{list-style:none;}

/* ============ Layout helpers ============ */
.container{max-width:1320px;margin:0 auto;padding:0 36px;}
.section{padding:140px 0;position:relative;}
@media(max-width:768px){.section{padding:90px 0;} .container{padding:0 22px;}}

/* ============ Animations ============ */
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--t),transform .8s var(--t);}
.reveal.in{opacity:1;transform:translateY(0);}
.reveal-delay-1{transition-delay:.1s;}
.reveal-delay-2{transition-delay:.2s;}
.reveal-delay-3{transition-delay:.3s;}

/* ============ FRAMED NAVIGATION ============ */
.nav-wrap{
  position:sticky;top:0;left:0;right:0;z-index:100;
  background:var(--cream);
  border-top:5px solid var(--crimson);
  border-bottom:5px solid var(--crimson);
  /* navy stripes via inset box-shadow — provably symmetric */
  box-shadow:
    inset 0 5px 0 var(--navy),
    inset 0 -5px 0 var(--navy),
    0 4px 24px rgba(15,27,54,.06);
}
/* Compact contained header — equal padding top and bottom */
.nav-inner{
  max-width:1200px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:nowrap;
  padding:14px 22px;
}
/* Keyboard focus styles for accessibility — sharp gold outline, matches the design language */
*:focus{outline:none;}
*:focus-visible{outline:3px solid var(--gold-bright);outline-offset:3px;}
.btn:focus-visible{outline-offset:4px;}
.logo-box{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--cream);
  border:3px solid var(--crimson);
  outline:2px solid var(--navy);
  outline-offset:1px;
  width:62px;height:62px;
  padding:0;
  transition:transform .35s var(--t-bounce);
  position:relative;
  overflow:hidden;
}
.logo-box .logo-svg-fallback{
  position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1;
}
.logo-box .logo-img{
  position:relative;z-index:2;
  width:100%;height:100%;object-fit:cover;object-position:center;display:block;
}
.logo-box:hover{transform:rotate(-3deg) scale(1.04);}

.nav-links{flex:1;display:flex;align-items:center;gap:48px;flex-wrap:nowrap;justify-content:center;}
@media(max-width:1100px){.nav-links{gap:30px;}}
@media(max-width:900px){.nav-links{gap:20px;}}

/* ============ Language Picker (custom dropdown with flags) ============ */
/* Visible UI is a Traffel-styled flag dropdown to the right of the burger.
   Engine is Google Translate (hidden via #googleTranslateElement display:none below).
   Selecting a language fires the hidden goog-te-combo programmatically. */
.tm-lang{position:relative;display:flex;align-items:center;flex-shrink:0;}
.tm-lang-btn{display:inline-flex;align-items:center;gap:7px;background:var(--white);border:1px solid var(--cream-deep);border-radius:8px;padding:6px 10px;cursor:pointer;font-family:'Inter',sans-serif;font-size:.78rem;font-weight:700;color:var(--navy);transition:background .25s var(--t),border-color .25s var(--t);}
.tm-lang-btn:hover{background:var(--cream-warm);border-color:var(--crimson);}
.tm-lang-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.tm-lang-flag{width:22px;height:15px;border-radius:2px;overflow:hidden;display:inline-flex;flex-shrink:0;box-shadow:0 1px 2px rgba(0,0,0,.15);}
.tm-lang-flag svg{width:100%;height:100%;display:block;}
.tm-lang-name{font-size:.78rem;letter-spacing:.02em;}
.tm-lang-chev{font-size:.55rem;opacity:.6;transition:transform .2s var(--t);}
.tm-lang.open .tm-lang-chev{transform:rotate(180deg);}
.tm-lang-menu{position:absolute;top:calc(100% + 8px);right:0;background:var(--white);border:1px solid var(--cream-deep);border-radius:10px;box-shadow:var(--shadow-md);min-width:260px;padding:6px;z-index:80;display:none;animation:tm-lang-in .2s var(--t);}
@keyframes tm-lang-in{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:translateY(0);}}
.tm-lang.open .tm-lang-menu{display:block;}
.tm-lang-item{display:flex;align-items:center;gap:10px;width:100%;background:transparent;border:none;padding:9px 11px;text-align:left;border-radius:6px;cursor:pointer;font-family:'Inter',sans-serif;font-size:.85rem;font-weight:600;color:var(--navy);transition:background .2s var(--t);}
.tm-lang-item:hover{background:var(--cream);}
.tm-lang-item .tm-lang-flag{width:26px;height:18px;}
.tm-lang-item.active{background:var(--cream-warm);}
.tm-lang-item.active::after{content:"✓";margin-left:auto;color:var(--crimson);font-weight:900;}
/* Keep the Google Translate widget RENDERED (so its hidden <select> combo actually
   gets created) but pushed off-screen. display:none stops GT from building the
   combo at all — that was the bug that locked the site on English. */
#googleTranslateElement{position:absolute !important;left:-9999px !important;top:-9999px !important;width:1px !important;height:1px !important;overflow:hidden !important;opacity:0 !important;}
/* ---- Hide every piece of Google Translate chrome so the translation looks
   native to the site. The banner iframe at the top, the body offset GT forces,
   the hover tooltips, and the yellow highlight on translated text. ---- */
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
iframe.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate.skiptranslate{display:none !important;visibility:hidden !important;height:0 !important;}
body{top:0 !important;position:static !important;}
html{margin-top:0 !important;}
.goog-te-balloon-frame,.goog-tooltip,.goog-tooltip:hover,#goog-gt-tt,.goog-te-spinner-pop{display:none !important;}
.goog-text-highlight{background:transparent !important;box-shadow:none !important;}
.goog-logo-link,.goog-te-gadget span{display:none !important;}
@media(max-width:600px){
  .tm-lang-name{display:none;}
  .tm-lang-btn{padding:6px 8px;}
  .tm-lang-menu{right:0;min-width:240px;}
}

/* ============ Services Burger (far right) ============ */
.services-burger{
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  width:46px;height:46px;
  margin-left:24px;
  background:transparent;
  border:2px solid var(--crimson);
  cursor:pointer;
  transition:background .25s var(--t),border-color .25s var(--t);
  position:relative;
  flex-shrink:0;
}
.services-burger span{
  display:block;width:22px;height:3px;background:var(--navy);border-radius:2px;
  transition:transform .3s var(--t),opacity .3s var(--t),background .25s var(--t);
}
.services-burger:hover{background:var(--crimson);}
.services-burger:hover span{background:var(--gold-bright);}
.services-burger.open{background:var(--crimson);border-color:var(--crimson);}
.services-burger.open span{background:var(--gold-bright);}
.services-burger.open span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.services-burger.open span:nth-child(2){opacity:0;}
.services-burger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

.services-panel{
  position:absolute;top:calc(100% + 18px);right:28px;
  background:var(--navy);
  border:3px solid var(--crimson);
  outline:2px solid var(--gold);
  outline-offset:3px;
  min-width:340px;
  max-width:calc(100vw - 44px);
  max-height:calc(100vh - 140px);
  overflow-y:auto;
  padding:28px 32px 32px;
  opacity:0;visibility:hidden;
  transform:translateY(-12px);
  transition:opacity .35s var(--t),transform .35s var(--t),visibility .35s var(--t);
  box-shadow:var(--shadow-lg);
  z-index:200;
}
.services-panel-pages{display:none;margin-bottom:22px;padding-bottom:18px;border-bottom:2px solid rgba(245,240,232,.15);}
.services-panel.open{
  opacity:1;visibility:visible;
  transform:translateY(0);
}
.services-panel-title{
  font-family:'Playfair Display',serif;
  color:var(--gold-bright);
  font-size:.95rem;
  font-weight:800;
  letter-spacing:.24em;
  text-transform:uppercase;
  margin-bottom:18px;
  padding-bottom:14px;
  border-bottom:2px solid var(--crimson);
  text-align:center;
}
.services-panel ul{display:flex;flex-direction:column;gap:2px;}
.services-panel li{padding:0;}
.services-panel li a{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 16px;
  font-family:'Inter',sans-serif;
  font-size:1rem;
  font-weight:600;
  color:var(--cream);
  cursor:pointer;
  transition:background .25s var(--t),color .25s var(--t),padding-left .25s var(--t);
}
.services-panel li a::after{
  content:"→";
  color:var(--gold);
  opacity:0;
  transform:translateX(-8px);
  transition:opacity .25s var(--t),transform .25s var(--t);
}
.services-panel li a:hover{
  background:rgba(139,26,26,.18);
  color:var(--gold-bright);
  padding-left:22px;
}
.services-panel li a:hover::after{
  opacity:1;transform:translateX(0);
}

@media(max-width:600px){
  .services-burger{margin-left:auto;}
  .services-panel{right:18px;left:18px;min-width:0;top:calc(100% + 12px);padding:24px 24px 26px;}
  .services-panel-pages{display:block;}
  .services-burger{width:42px;height:42px;}
  .services-burger span{width:20px;height:2.5px;}
}
.nav-link{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:1rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--gold);
  position:relative;
  padding:6px 0;
  cursor:pointer;
  transition:color .25s var(--t);
}
@media(max-width:1100px){.nav-link{font-size:1rem;}}
.nav-link::before{
  content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;
  background:var(--crimson);
  transform:scaleX(0);transform-origin:right;
  transition:transform .35s var(--t);
}
.nav-link:hover{color:var(--crimson);}
.nav-link:hover::before{transform:scaleX(1);transform-origin:left;}
.nav-link.active{color:var(--crimson);}
.nav-link.active::before{transform:scaleX(1);}

/* Progressive shrink so all 5 nav links + logo + burger stay visible all the way down */
@media(max-width:820px){
  .nav-inner{padding:12px 14px;gap:10px;}
  .nav-links{gap:18px;}
  .nav-link{font-size:.82rem;letter-spacing:.04em;}
  .services-burger{margin-left:10px;width:42px;height:42px;}
}
@media(max-width:680px){
  .nav-inner{padding:10px 12px;gap:8px;}
  .nav-links{gap:12px;}
  .nav-link{font-size:.74rem;letter-spacing:.02em;}
  .logo-box{width:54px;height:54px;}
  .services-burger{margin-left:6px;width:38px;height:38px;}
  .services-burger span{width:18px;height:2.2px;}
}
@media(max-width:520px){
  .nav-inner{padding:10px 10px;gap:6px;}
  .nav-links{gap:9px;}
  .nav-link{font-size:.65rem;letter-spacing:.01em;padding:4px 0;}
  .logo-box{width:46px;height:46px;}
  .services-burger{margin-left:4px;width:34px;height:34px;}
}
/* At true phone widths, allow the nav-links to wrap to a second line rather than overflow */
@media(max-width:420px){
  .nav-links{flex-wrap:wrap;gap:6px 10px;row-gap:4px;}
}

/* ============ Buttons (modern, no heavy borders) ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  padding:18px 38px;
  font-family:'Inter',sans-serif;
  font-size:1rem;font-weight:800;
  letter-spacing:.06em;
  border:none;
  cursor:pointer;
  position:relative;overflow:hidden;
  transition:transform .3s var(--t), background .3s var(--t), color .3s var(--t), box-shadow .3s var(--t);
}
.btn .arrow{
  width:18px;height:18px;display:inline-block;
  transition:transform .3s var(--t);
}
.btn:hover .arrow{transform:translateX(6px);}

.btn-crimson{background:var(--crimson);color:var(--gold);}
.btn-crimson:hover{background:var(--crimson-bright);color:var(--gold-bright);transform:translateY(-3px);box-shadow:var(--shadow-crimson);}
.btn-gold{background:var(--gold);color:var(--navy);}
.btn-gold:hover{background:var(--gold-bright);color:var(--navy-deep);transform:translateY(-3px);box-shadow:0 14px 32px rgba(181,145,64,.4);}
.btn-navy{background:var(--navy);color:var(--gold);}
.btn-navy:hover{background:var(--navy-deep);color:var(--gold-bright);transform:translateY(-3px);box-shadow:0 14px 32px rgba(15,27,54,.4);}
.btn-ghost{background:transparent;color:var(--gold);border:2px solid var(--gold);}
.btn-ghost:hover{background:var(--gold);color:var(--navy);transform:translateY(-3px);}

/* ============ Page System ============ */
.page{display:none;opacity:0;transform:translateY(12px);transition:opacity .45s var(--t),transform .45s var(--t);}
.page.active{display:block;}
.page.visible{opacity:1;transform:translateY(0);}

/* ============ HOME HERO ============ */
.hero{
  position:relative;
  min-height:calc(100vh - 110px);
  /* dynamic viewport units fix iOS Safari address-bar issue */
  min-height:calc(100dvh - 110px);
  background:var(--cream);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  padding:80px 24px;
}
.hero-bg{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;
}
.hero-bg svg{width:100%;height:100%;display:block;}

/* Animated airplane lives inside the hero-bg SVG — animateMotion handles the path */

.hero-content{
  position:relative;z-index:5;
  text-align:center;max-width:880px;width:100%;
  display:flex;flex-direction:column;align-items:center;gap:36px;
}
.hero-logo .logo-box{
  width:240px;height:240px;
  padding:0;
  border-width:5px;
  outline-width:3px;
  box-shadow:0 22px 60px rgba(15,27,54,.25);
  animation:float 5s ease-in-out infinite;
}

.hero-headline-box{
  background:var(--navy);
  border:3px solid var(--crimson);
  padding:46px 56px;
  max-width:780px;width:100%;
  box-shadow:var(--shadow-lg);
  position:relative;
}
.hero-headline-box::after{
  content:"";position:absolute;bottom:-3px;left:50%;transform:translateX(-50%);
  width:120px;height:3px;background:var(--gold);
}
.hero-headline-box h1{
  color:var(--gold);
  font-family:'Playfair Display',serif;
  /* Tagline changed 2026-08-01 to "Websites Without Borders." — 2 chars shorter
     than the old line, and every translation got shorter or stayed level except
     Japanese. That freed room, so the desktop ceiling went 2.6rem -> 2.8rem for
     more presence. Longest translation is French at 26 chars; at 2.8rem that is
     roughly 560px inside a 668px usable box, so it still clears comfortably. */
  font-size:clamp(1.7rem,3.7vw,2.8rem);
  font-weight:800;
  line-height:1.18;
  margin-bottom:34px;
  /* If either half wraps on a narrow screen, wrap it evenly instead of leaving
     one orphaned word. Ignored by older browsers, so it degrades cleanly. */
  text-wrap:balance;
  /* Safety net: never let a long word push past the box edge. */
  overflow-wrap:break-word;
}
.hero-cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
@media(max-width:600px){
  .hero-headline-box{padding:32px 24px;}
  .hero-logo .logo-box{width:160px;height:160px;padding:0;}
}

/* ============ Marquee Band ============ */
.marquee{
  background:var(--crimson);
  border-top:4px solid var(--gold);
  border-bottom:4px solid var(--gold);
  overflow:hidden;
  padding:22px 0;
  position:relative;
}
.marquee-track{
  display:flex;width:max-content;
  animation:marquee 30s linear infinite;
  white-space:nowrap;
}
.marquee-item{
  display:flex;align-items:center;gap:32px;
  font-family:'Playfair Display',serif;
  font-style:italic;
  font-size:clamp(1.4rem,2.6vw,2rem);
  color:var(--gold);
  font-weight:600;
  padding-right:32px;
}
.marquee-item .dot{
  width:14px;height:14px;border-radius:50%;background:var(--gold);
  flex-shrink:0;
}

/* ============ Stats Bar ============ */
.stats-bar{
  background:var(--navy);
  padding:90px 24px;
  position:relative;
  overflow:hidden;
}
.stats-bar::before{
  content:"";position:absolute;top:-40%;left:-10%;
  width:60%;height:180%;
  background:radial-gradient(circle,rgba(181,145,64,.1) 0%,transparent 70%);
  pointer-events:none;
}
.stats-grid{
  max-width:1100px;margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);gap:32px;
  text-align:center;
  position:relative;z-index:1;
}
.stat .num{
  font-family:'Playfair Display',serif;
  font-size:clamp(3.2rem,7vw,5.5rem);
  font-weight:900;
  color:var(--gold-bright);
  line-height:1;
  margin-bottom:14px;
  letter-spacing:-.02em;
}
.stat .label{
  color:var(--cream);
  font-size:.95rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:700;
}
.stat + .stat{position:relative;}
.stat + .stat::before{
  content:"";position:absolute;left:-16px;top:15%;bottom:15%;width:2px;
  background:rgba(181,145,64,.3);
}
@media(max-width:680px){
  .stats-grid{grid-template-columns:1fr;gap:48px;}
  .stat + .stat::before{display:none;}
}

/* ============ Section Title ============ */
.section-title{text-align:center;margin-bottom:80px;}
.section-title .eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-size:.82rem;font-weight:800;letter-spacing:.28em;text-transform:uppercase;
  color:var(--crimson);margin-bottom:18px;
}
.section-title .eyebrow::before,
.section-title .eyebrow::after{
  content:"";width:32px;height:2px;background:var(--crimson);
}
.section-title h2{color:var(--navy);margin-bottom:18px;}
.section-title p{color:var(--navy);opacity:.78;max-width:640px;margin:18px auto 0;font-size:1.1rem;}

/* ============ Service Cards (modern, soft) ============ */
.cards-3{
  display:grid;grid-template-columns:repeat(3,1fr);gap:28px;
}
@media(max-width:900px){.cards-3{grid-template-columns:repeat(3,1fr);gap:16px;}
  .cards-3 .svc-card{padding:32px 22px 28px;}
  .cards-3 .svc-num{font-size:2.8rem;}
  .cards-3 .svc-card h3{font-size:1.15rem;}
  .cards-3 .svc-card p{font-size:.9rem;}
}
@media(max-width:520px){.cards-3{grid-template-columns:1fr;gap:20px;max-width:420px;margin:0 auto;}
  .cards-3 .svc-card{padding:40px 30px 32px;}
  .cards-3 .svc-num{font-size:3.4rem;}
  .cards-3 .svc-card h3{font-size:1.4rem;}
  .cards-3 .svc-card p{font-size:1rem;}
}

.svc-card{
  background:var(--white);
  padding:48px 36px 40px;
  position:relative;
  transition:transform .4s var(--t), box-shadow .4s var(--t);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  display:flex;flex-direction:column;
}
.svc-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:5px;
  background:linear-gradient(90deg,var(--crimson) 0%,var(--gold) 100%);
  transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--t);
}
.svc-card:hover{transform:translateY(-12px);box-shadow:var(--shadow-md);}
.svc-card:hover::before{transform:scaleX(1);}
.svc-num{
  font-family:'Playfair Display',serif;
  font-size:2.8rem;font-weight:900;
  color:var(--gold-deep);
  line-height:1;margin-bottom:10px;
  transition:color .35s var(--t);
}
.svc-card:hover .svc-num{color:var(--crimson);}
.svc-icon{
  width:70px;height:56px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:24px;
  border-radius:14px;
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-soft) 100%);
  transition:transform .35s var(--t-bounce);
}
.svc-card:hover .svc-icon{transform:rotate(-6deg) scale(1.08);}
.svc-icon svg{width:28px;height:28px;stroke:var(--gold-bright);fill:none;stroke-width:2;}
.svc-card h3{color:var(--navy);margin-bottom:16px;font-size:1.5rem;}
.svc-card p{color:var(--navy);opacity:.78;font-size:1rem;flex:1;}
.svc-card .more{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:28px;
  color:var(--crimson);font-weight:800;font-size:.85rem;
  letter-spacing:.1em;text-transform:uppercase;
  align-self:flex-start;
  position:relative;
}
.svc-card .more::after{
  content:"→";font-size:1.1rem;
  transition:transform .3s var(--t);
}
.svc-card .more:hover::after{transform:translateX(6px);}
.svc-card .more:hover{color:var(--navy);}

/* ============ Testimonials (editorial) ============ */
.testimonial-section{
  background:var(--navy);
  position:relative;overflow:hidden;
}
.testimonial-section::before{
  content:"";position:absolute;top:-30%;right:-10%;
  width:60%;height:160%;
  background:radial-gradient(circle,rgba(139,26,26,.18) 0%,transparent 65%);
  pointer-events:none;
}
.testimonial-section .section-title h2{color:var(--gold);}
.testimonial-section .section-title .eyebrow{color:var(--gold-bright);}
.testimonial-section .section-title .eyebrow::before,
.testimonial-section .section-title .eyebrow::after{background:var(--gold-bright);}
.testimonial-section .section-title p{color:var(--cream);opacity:.85;}
.testimonials{
  display:grid;grid-template-columns:repeat(2,1fr);gap:20px;
  max-width:1320px;margin:0 auto;
  position:relative;z-index:1;
}
@media(max-width:520px){.testimonials{grid-template-columns:1fr;gap:18px;}}
.testimonial{
  background:rgba(245,240,232,.04);
  border:1px solid rgba(245,240,232,.12);
  padding:32px 44px 28px 94px;
  position:relative;
  transition:transform .4s var(--t), background .4s var(--t);
  display:flex;flex-direction:column;justify-content:center;
  min-height:0;
}
.testimonial:hover{transform:translateY(-4px);background:rgba(245,240,232,.08);}
.testimonial::before{
  content:"\201C";
  position:absolute;top:6px;left:28px;
  font-family:'Playfair Display',serif;font-size:5.4rem;line-height:1;
  color:var(--crimson);font-weight:900;
}
.testimonial blockquote{
  font-family:'Playfair Display',serif;
  font-size:1.15rem;font-style:italic;line-height:1.5;
  margin-bottom:18px;color:var(--cream);
  margin-top:0;font-weight:700;
}
.testimonial .who{display:flex;align-items:center;gap:16px;}
.testimonial .avatar{
  width:42px;height:42px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--crimson) 0%,var(--gold) 100%);
  color:var(--cream);
  display:flex;align-items:center;justify-content:center;
  font-weight:900;font-family:'Playfair Display',serif;font-size:1.2rem;
}
.testimonial .name{color:var(--gold-bright);font-weight:900;font-size:1.12rem;}
.testimonial .role{color:var(--cream);opacity:.78;font-size:.95rem;font-weight:600;}

/* ============ CTA Banner ============ */
.cta-banner{
  background:var(--navy);
  padding:130px 24px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.cta-banner::before{
  content:"";position:absolute;left:0;right:0;top:0;bottom:0;
  background:
    radial-gradient(circle at 15% 30%, rgba(139,26,26,.35) 0%, transparent 55%),
    radial-gradient(circle at 85% 70%, rgba(181,145,64,.18) 0%, transparent 55%);
}
.cta-banner .stripe{
  position:absolute;left:-5%;width:110%;height:60px;background:var(--crimson);
  transform:rotate(-3deg);
}
.cta-banner .stripe.top{top:-30px;}
.cta-banner .stripe.bottom{bottom:-30px;}
.cta-banner .inner{position:relative;z-index:2;max-width:880px;margin:0 auto;}
.cta-banner h2{
  color:var(--gold-bright);font-size:clamp(2.4rem,6.5vw,5rem);
  margin-bottom:18px;
}
.cta-banner p{color:var(--cream);font-size:1.35rem;margin-bottom:42px;font-weight:500;}

/* ============ Page Hero (sub pages) ============ */
.page-hero{
  position:relative;overflow:hidden;
  padding:160px 24px 58px;
  text-align:center;
}
/* Close the dead space between a page hero and the first content section.
   Was 140px hero-bottom + 140px section-top ≈ 280px of blank (Our Work,
   Pricing, etc. felt empty); now the content sits comfortably under the hero. */
.page-hero + .section{padding-top:62px;}
.page-hero.navy{background:var(--navy);}
.page-hero.navy h1{color:var(--gold);}
.page-hero.navy p{color:var(--cream);opacity:.9;}
.page-hero.crimson{background:var(--crimson);}
.page-hero.crimson h1{color:var(--gold);}
.page-hero.crimson p{color:var(--cream);}
.page-hero.cream{background:var(--cream-deep);}
.page-hero.cream h1{color:var(--navy);}
.page-hero.cream h2{color:var(--navy);}
.page-hero.cream p{color:var(--navy);opacity:.85;}
.page-hero.navy h2{color:var(--cream-warm);}
.page-hero.crimson h2{color:var(--cream-warm);}
/* Page-hero headlines — smooth black outline (TikTok-style, 2px ring).
   Portfolio + Contact use crimson fill; Services/About/Pricing keep their existing fill.
   Also drops the headline size on these 5 so the outline sits in proportion. */
#page-portfolio .page-hero h2,
#page-contact .page-hero h2{color:var(--crimson);}
#page-portfolio .page-hero h2,
#page-services .page-hero h2,
#page-about .page-hero h2,
#page-pricing .page-hero h2,
#page-contact .page-hero h2{
  font-size:clamp(2.25rem,5vw,4rem);
  -webkit-text-stroke:2px #000;
  paint-order:stroke fill;
}

.page-hero h1,.page-hero h2{font-size:clamp(3rem,7vw,5.5rem);margin-bottom:22px;position:relative;z-index:2;}
.page-hero p{font-size:1.3rem;max-width:680px;margin:0 auto;font-weight:500;position:relative;z-index:2;}
.page-hero .accent{
  width:90px;height:5px;margin:30px auto 0;
  background:var(--gold);position:relative;z-index:2;
}
.page-hero.cream .accent{background:var(--crimson);}
.page-hero.crimson .accent{background:var(--navy);}

/* Glow blobs */
.page-hero .blob{
  position:absolute;border-radius:50%;
  filter:blur(70px);opacity:1;
  pointer-events:none;
}
.page-hero.navy .blob-1{top:-20%;left:-10%;width:55%;height:90%;background:rgba(139,26,26,.85);}
.page-hero.navy .blob-2{bottom:-30%;right:-15%;width:60%;height:95%;background:rgba(181,145,64,.55);}
.page-hero.crimson .blob-1{top:-25%;left:-12%;width:60%;height:95%;background:rgba(15,27,54,.85);}
.page-hero.crimson .blob-2{bottom:-25%;right:-10%;width:60%;height:85%;background:rgba(181,145,64,.55);}
/* About cream hero — blobs stripped. Pure cream + SVG line art only. Editorial, no color clash. */
.page-hero.cream .blob-1,
.page-hero.cream .blob-2{display:none;}

/* Themed animated hero art — section-relevant line-art motifs, left & right of the centered text */
.page-hero-art{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;}
.page-hero-art > svg{position:absolute;inset:0;width:100%;height:100%;}
.ph-float{animation:ph-float 7s ease-in-out infinite;}
.ph-float-b{animation:ph-float 9.5s ease-in-out infinite;animation-delay:-3s;}
.ph-float-c{animation:ph-float 8.2s ease-in-out infinite;animation-delay:-1.5s;}
@keyframes ph-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-16px);}}
.ph-dash{stroke-dasharray:7 10;animation:ph-dash 2.6s linear infinite;}
@keyframes ph-dash{to{stroke-dashoffset:-34;}}
@media(max-width:760px){.page-hero-art{opacity:.45;}}
@media(prefers-reduced-motion:reduce){.ph-float,.ph-float-b,.ph-float-c,.ph-dash{animation:none;}}

/* ============ Services 2x3 ============ */
.cards-2x3{
  display:grid;grid-template-columns:repeat(3,1fr);gap:28px;
}
@media(max-width:980px){.cards-2x3{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.cards-2x3{grid-template-columns:1fr;}}

/* ============ Process Timeline (modern) ============ */
.process{
  display:grid;grid-template-columns:repeat(4,1fr);gap:32px;
  position:relative;margin-top:64px;
}
.process::before{
  content:"";position:absolute;
  top:48px;left:12%;right:12%;height:3px;
  background:linear-gradient(90deg,var(--crimson) 0%,var(--gold) 100%);
  z-index:0;
  border-radius:2px;
}
.step{
  text-align:center;position:relative;z-index:1;
  padding:0 8px;
}
.step .num{
  width:96px;height:96px;border-radius:50%;
  background:var(--cream);color:var(--crimson);
  border:5px solid var(--crimson);
  font-family:'Playfair Display',serif;font-size:2.4rem;font-weight:900;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 28px;
  box-shadow:0 12px 30px rgba(139,26,26,.25);
  position:relative;
  transition:transform .4s var(--t-bounce), background .35s var(--t), color .35s var(--t);
}
.step:hover .num{transform:scale(1.08) rotate(-6deg);background:var(--crimson);color:var(--gold-bright);}
.step h4{color:var(--navy);font-family:'Playfair Display',serif;font-size:1.5rem;margin-bottom:10px;font-weight:800;}
.step p{font-size:1rem;color:var(--navy);opacity:.78;}
@media(max-width:880px){
  .process{grid-template-columns:1fr 1fr;gap:56px 28px;}
  .process::before{display:none;}
}
@media(max-width:520px){.process{grid-template-columns:1fr;}}

/* Paper plane that rides the timeline to the hovered/focused step */
.process-plane{
  position:absolute;left:0;top:-34px;
  width:70px;height:auto;
  z-index:3;pointer-events:none;
  transform:translateX(0);
  transition:transform 1.7s cubic-bezier(.42,0,.32,1);
  will-change:transform;
}
.process-plane-inner{
  transform:scaleX(1);transform-origin:50% 50%;
  /* cream rim so the crimson plane reads on the crimson active circle, plus depth on the line */
  filter:drop-shadow(0 0 1.5px rgba(245,240,232,1)) drop-shadow(0 0 2.5px rgba(245,240,232,.85)) drop-shadow(0 4px 5px rgba(20,20,30,.35));
}
@keyframes process-plane-bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-3px);}}
.process-plane-inner svg{animation:process-plane-bob 2.8s ease-in-out infinite;}
@media (prefers-reduced-motion:reduce){.process-plane-inner svg{animation:none;}}

.process-plane svg{display:block;width:100%;height:auto;}
.process-plane svg{overflow:visible;}
.plane-trail{opacity:0;transition:opacity .3s var(--t);}
.process-plane.moving .plane-trail{opacity:1;transition:opacity .12s var(--t);}
@media (prefers-reduced-motion:reduce){.plane-trail{display:none;}}

.step .num.num-active{
  background:var(--crimson);color:var(--gold-bright);
  transform:scale(1.06);
  box-shadow:0 16px 36px rgba(139,26,26,.42);
}
@media(max-width:880px){
  .process-plane{display:none;}
}
@media(prefers-reduced-motion:reduce){
  .process-plane{transition:none;}
}

/* ============ Portfolio ============ */
.filters{
  display:flex;gap:12px;justify-content:center;flex-wrap:wrap;
  margin-bottom:60px;
}
.filter-btn{
  padding:14px 28px;
  background:transparent;
  color:var(--navy);
  font-size:.85rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  position:relative;
  transition:color .25s var(--t);
}
.filter-btn::after{
  content:"";position:absolute;left:50%;bottom:6px;
  width:0;height:2px;background:var(--crimson);
  transition:width .3s var(--t),left .3s var(--t);
}
.filter-btn:hover{color:var(--crimson);}
.filter-btn:hover::after{width:60%;left:20%;}
.filter-btn.active{color:var(--cream);background:var(--crimson);}
.filter-btn.active::after{display:none;}

.portfolio-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:28px;
  /* Break out of the ~1248px .container so four cards keep their ORIGINAL
     ~395px width (4x395 + 3x28 = 1664) instead of shrinking. Centered on the
     viewport and capped so it never overflows the screen. */
  width:min(1664px, calc(100vw - 48px));
  margin-left:50%;transform:translateX(-50%);
}
@media(max-width:1180px){.portfolio-grid{grid-template-columns:repeat(2,1fr);width:100%;max-width:760px;margin:0 auto;transform:none;}}
@media(max-width:700px){.portfolio-grid{grid-template-columns:1fr;max-width:540px;}}
/* Honest portfolio note above the grid */
.portfolio-note{
  text-align:center;max-width:640px;margin:0 auto 56px;
  color:var(--navy);opacity:.78;font-style:italic;
  font-family:'Playfair Display',serif;font-size:1.1rem;line-height:1.55;
}
/* Custom-SVG thumbnail variant: lets an inline SVG be the full thumbnail background. */
.proj-thumb-custom{background:transparent;}
.proj-thumb-custom::after{display:none;}
.proj-thumb-custom .thumb-svg{
  position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block;
}
.proj-thumb-custom .tag{align-self:flex-end;}
.proj-thumb .tag.tag-top{position:absolute;top:16px;left:16px;align-self:auto;z-index:2;}
.proj{
  background:var(--white);
  overflow:hidden;
  transition:transform .4s var(--t),box-shadow .4s var(--t);
  box-shadow:var(--shadow-sm);
  position:relative;
}
.proj:hover{transform:translateY(-10px);box-shadow:var(--shadow-md);}
.proj-thumb{
  height:260px;position:relative;overflow:hidden;
  display:flex;align-items:flex-end;padding:24px;
}
.proj-thumb::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 50%,rgba(15,27,54,.35) 100%);
  pointer-events:none;
}
.proj-thumb .tag{
  background:var(--cream);color:var(--crimson);
  padding:8px 14px;
  font-size:.7rem;
  font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  position:relative;z-index:1;
}
.thumb-1{background:linear-gradient(135deg,var(--navy) 0%,var(--gold-deep) 100%);}
.thumb-2{background:linear-gradient(135deg,var(--crimson) 0%,var(--navy) 100%);}
.thumb-3{background:linear-gradient(135deg,var(--gold) 0%,var(--crimson) 100%);}
.thumb-4{background:linear-gradient(135deg,var(--navy) 0%,var(--crimson) 100%);}
.thumb-5{background:linear-gradient(135deg,var(--cream-warm) 0%,var(--gold) 100%);}
.thumb-6{background:linear-gradient(135deg,var(--crimson) 0%,var(--gold) 100%);}
.proj-body{padding:30px 32px 34px;}
.proj-body h3{color:var(--navy);font-size:1.5rem;margin-bottom:8px;}
.proj-body p{font-size:1rem;color:var(--navy);opacity:.78;margin-bottom:18px;}
/* Whole card is a link — inherit color, don't underline */
.proj > a{color:inherit;text-decoration:none;display:block;}
.proj > a:focus-visible{outline:3px solid var(--gold-bright);outline-offset:4px;}
/* The trailing call-to-action inside the body */
.proj-link{
  color:var(--crimson);font-weight:800;font-size:.85rem;
  letter-spacing:.1em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:8px;
  transition:color .25s var(--t);
}
.proj-link > span{display:inline-block;transition:transform .3s var(--t);}
.proj:hover .proj-link{color:var(--navy);}
.proj:hover .proj-link > span{transform:translateX(6px);}

/* ============ Pricing ============ */
.pricing-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:28px;align-items:stretch;
}
@media(max-width:1020px){.pricing-grid{grid-template-columns:1fr;max-width:520px;margin:0 auto;}}
.tier{
  background:var(--white);
  padding:52px 38px;
  position:relative;
  display:flex;flex-direction:column;
  transition:transform .4s var(--t),box-shadow .4s var(--t);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.tier::before{
  content:"";position:absolute;top:0;left:0;right:0;height:6px;
  background:linear-gradient(90deg,var(--crimson) 0%,var(--gold) 100%);
}
.tier:hover{transform:translateY(-8px);box-shadow:var(--shadow-md);}
.tier h3{font-family:'Playfair Display',serif;color:var(--navy);font-size:1.7rem;letter-spacing:.04em;text-transform:uppercase;margin-bottom:12px;font-weight:800;}
.tier .price{
  font-family:'Playfair Display',serif;
  font-size:3.2rem;color:var(--crimson);font-weight:900;line-height:1;margin-bottom:8px;
}
.tier .price small{font-size:1rem;color:var(--navy);opacity:.6;font-weight:500;font-family:'Inter',sans-serif;}
.tier .per{color:var(--navy);opacity:.7;font-size:.95rem;margin-bottom:32px;font-style:italic;}
.tier ul{margin-bottom:38px;flex:1;}
.tier li{
  padding:13px 0;border-bottom:1px solid rgba(27,42,74,.1);
  font-size:.98rem;color:var(--navy);
  display:flex;gap:12px;align-items:flex-start;
}
.tier li::before{
  content:"✓";color:var(--crimson);font-weight:900;flex-shrink:0;font-size:1.1rem;
}
.tier .btn{width:100%;}
.tier.featured{
  background:var(--navy);
  transform:scale(1.05);
  box-shadow:var(--shadow-lg);
}
.tier.featured::before{
  background:linear-gradient(90deg,var(--gold) 0%,var(--crimson) 100%);
  height:6px;
}
.tier.featured .most-popular{
  position:absolute;top:22px;right:22px;
  background:var(--crimson);color:var(--gold);
  padding:6px 14px;font-size:.65rem;font-weight:900;letter-spacing:.18em;
  z-index:2;
}
.tier.featured h3{color:var(--gold-bright);}
.tier.featured .price{color:var(--gold-bright);}
.tier.featured .price small{color:var(--cream);opacity:.8;}
.tier.featured .per{color:var(--cream);opacity:.85;}
.tier.featured li{color:var(--cream);border-bottom-color:rgba(245,240,232,.12);}
.tier.featured li::before{color:var(--gold-bright);}
@media(max-width:1020px){.tier.featured{transform:none;}}

/* ============ Pricing Toggle (Monthly / One-time builds / Add-ons) ============ */
.pricing-toggle{display:flex;justify-content:center;margin-bottom:18px;}
.pricing-toggle-inner{display:inline-flex;background:var(--cream-deep);padding:6px;border-radius:50px;box-shadow:inset 0 2px 6px rgba(15,27,54,.08);position:relative;}
.toggle-btn{position:relative;z-index:2;padding:14px 32px;border:none;background:transparent;font-family:'Inter',sans-serif;font-weight:700;font-size:.95rem;letter-spacing:.04em;color:var(--navy);opacity:.85;cursor:pointer;border-radius:50px;white-space:nowrap;transition:opacity .3s var(--t),color .3s var(--t);}
.toggle-btn.active{opacity:1;color:var(--cream);}
/* Slider default width, used only until JS measures the active button (font loading delay).
   The slider is absolutely positioned, so its percentage resolves against the PADDING box of
   .pricing-toggle-inner — that is (button widths) + the 6px padding on each side. With three
   buttons, 33.333% - 4px therefore works out to the average button width, exactly as the old
   two-button calc(50% - 6px) did. JS replaces this with the real active-button width. */
.toggle-slider{position:absolute;top:6px;left:6px;height:calc(100% - 12px);width:calc(33.333% - 4px);background:var(--crimson);border-radius:50px;transition:transform .35s var(--t),width .35s var(--t);box-shadow:0 4px 14px rgba(139,26,26,.35);}
.toggle-subtitle{text-align:center;font-size:1.05rem;color:var(--navy);opacity:1;margin-bottom:42px;font-weight:500;font-style:italic;}

.tier-sets-wrapper{position:relative;}
.tier-set{display:none;}
.tier-set.active{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;align-items:stretch;}
@media(max-width:1020px){.tier-set.active{grid-template-columns:1fr;max-width:520px;margin:0 auto;}.toggle-btn{padding:12px 22px;font-size:.86rem;}}
/* Three pills instead of two. The row must never wrap — positionSlider() offsets the pill
   horizontally only, so a second row would strand it — which is why .toggle-btn is nowrap
   and the padding and tracking keep stepping down instead. */
@media(max-width:520px){.toggle-btn{padding:12px 16px;font-size:.82rem;letter-spacing:.02em;}}
@media(max-width:400px){.toggle-btn{padding:11px 9px;font-size:.72rem;letter-spacing:.01em;}}

/* Highlighted "Website included" line in retainer tiers */
.tier li.li-highlight{font-weight:800;color:var(--crimson);background:rgba(181,145,64,.12);padding:14px 12px;margin:0 -12px 6px;border-left:3px solid var(--gold);display:block;}
.tier li.li-highlight::before{content:"";display:none;}
.tier.featured li.li-highlight{color:var(--gold-bright);background:rgba(213,175,80,.14);border-left-color:var(--gold-bright);}

/* Prepay savings banner */
.prepay-banner{margin:24px auto 28px;background:var(--navy);color:var(--cream);padding:28px 36px;position:relative;overflow:hidden;max-width:1000px;}
.prepay-banner::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--gold) 0%,var(--crimson) 100%);}
.prepay-banner-inner{display:flex;align-items:center;gap:32px;max-width:1000px;margin:0 auto;flex-wrap:wrap;}
.prepay-icon{font-size:2.4rem;color:var(--gold-bright);line-height:1;flex-shrink:0;}
.prepay-content{flex:1;min-width:280px;}
.prepay-title{font-family:'Playfair Display',serif;font-size:1.5rem;font-weight:900;color:var(--gold-bright);margin-bottom:6px;}
.prepay-text{font-size:.98rem;color:var(--cream);opacity:.92;line-height:1.55;}
.prepay-numbers{display:flex;gap:18px;flex-shrink:0;}
.prepay-num{display:flex;flex-direction:column;align-items:center;padding:14px 22px;background:rgba(213,175,80,.14);border-left:3px solid var(--gold-bright);}
.prepay-num-label{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cream);opacity:.85;margin-bottom:4px;}
.prepay-num-value{font-family:'Playfair Display',serif;font-size:1.35rem;font-weight:900;color:var(--gold-bright);}
@media(max-width:768px){.prepay-banner{padding:24px;}.prepay-banner-inner{gap:20px;}.prepay-numbers{width:100%;justify-content:space-between;}}

/* Pricing footer note (build period honesty) */
.pricing-footer-note{text-align:center;font-size:.98rem;color:var(--navy);opacity:1;margin:0 auto 24px;line-height:1.7;max-width:820px;font-weight:500;}

/* Inline prepay note inside each retainer tier card — sits above the CTA button. */
.tier-prepay-note{font-size:.74rem;color:var(--navy);opacity:.7;font-style:italic;margin:-22px 0 18px;text-align:center;line-height:1.4;letter-spacing:.01em;}
.tier.featured .tier-prepay-note{color:var(--cream);opacity:.78;}
.pricing-footer-note strong{color:var(--crimson);font-weight:800;}

/* ============ Add-ons & aftercare (third toggle panel) ============ */
/* The tiers' smaller siblings. Same card chrome as .tier: white card, crimson-to-gold
   top accent, shadow-sm, hover lift, Playfair name + crimson Playfair price. Scaled
   down and CTA-free, because this is aftercare, not the headline product. Lives in
   .tier-set[data-set="addons"]; the toggle flips .active to show/hide it exactly like
   the other two panels. That panel's own 3-col grid is overridden to block here so the
   title, intro, card grid and note stack; the cards then get their OWN flex grid so
   the 7th card centres on its row instead of stranding in a left cell. */
.tier-set[data-set="addons"].active{display:block;}
.addons-title{
  font-family:'Playfair Display',serif;color:var(--navy);
  font-size:1.5rem;letter-spacing:.04em;text-transform:uppercase;
  font-weight:800;line-height:1.15;text-align:center;margin-bottom:10px;
}
/* Intro handled like .toggle-subtitle: centred, italic, quiet. */
.addons-lead{
  text-align:center;font-size:1.02rem;color:var(--navy);opacity:.85;
  font-style:italic;line-height:1.55;max-width:640px;margin:0 auto 12px;
}
/* ============ Add-ons v4 — compact two-column grid (fits without scrolling) ============
   The vertical timeline was too tall and forced a scroll. This is the compact form:
   items 1-6 in two columns, Copywriting spans the full last row so there is no
   orphaned half-row. The RESTING state below is the fully-shown state, so it is also
   the JS-off and reduced-motion state. JS layers .is-armed (hide) then .is-playing
   (a quick diagonal cascade) on toggle->Add-ons. Every name / price / description is a
   single un-split text node, so all nine i18n dictionary keys still match exactly. */
.addons-timeline{max-width:1000px;margin:0 auto;}
.ac-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 26px;list-style:none;margin:0;padding:0;}
.ac-item{position:relative;background:var(--white);border:1px solid rgba(181,145,64,.20);border-radius:12px;
  padding:0;box-shadow:0 2px 10px rgba(15,27,54,.05);overflow:hidden;cursor:pointer;
  perspective:1000px;-webkit-perspective:1000px;
  transition:transform .45s var(--t),box-shadow .45s var(--t);}
.ac-item:focus{outline:none;}
.ac-item:focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px;}
.ac-item:last-child{grid-column:1/-1;}   /* Copywriting spans the last row */
.ac-item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--gold-bright),var(--crimson));
  transform:scaleY(1);transform-origin:top center;transition:transform .5s var(--t),filter .4s var(--t);}
/* --- Flip cards: front keeps existing content, back reveals detail. Pure CSS
   (hover + focus-within), fixed-height faces so the front icons keep animating. --- */
.ac-flip{position:relative;width:100%;height:154px;
  transform-style:preserve-3d;-webkit-transform-style:preserve-3d;
  transition:transform .6s var(--t);}
.ac-item:last-child .ac-flip{height:90px;}   /* full-width Copywriting card is shorter */
.ac-face{position:absolute;inset:0;padding:13px 20px 13px 24px;border-radius:12px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-start;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;}
/* Back face: navy with the same gold->crimson spine as the front, a faint gold
   corner glow, a gold Playfair title (re-uses the translated name key) over a
   short gold->crimson rule, then the detail copy, and a gold return badge. */
.ac-back{color:var(--white);transform:rotateY(180deg);
  padding:11px 16px 11px 22px;
  background:
    linear-gradient(180deg,var(--gold-bright),var(--crimson)) left center/4px 100% no-repeat,
    radial-gradient(150% 130% at 100% 0%, rgba(212,175,80,.16), rgba(27,42,74,0) 58%),
    var(--navy);
  box-shadow:inset 0 -34px 44px -34px rgba(0,0,0,.55);}
.ac-back-title{font-family:'Playfair Display',serif;color:var(--gold-bright);font-weight:800;
  font-size:.92rem;letter-spacing:.07em;text-transform:uppercase;line-height:1.12;
  margin:0 0 7px;padding:0 30px 6px 0;position:relative;}
.ac-back-title::after{content:"";position:absolute;left:0;bottom:0;width:32px;height:2px;
  border-radius:2px;background:linear-gradient(90deg,var(--gold-bright),var(--crimson));}
.ac-detail{font-family:'Inter',system-ui,-apple-system,sans-serif;color:var(--white);
  font-size:.8rem;line-height:1.42;margin:0;}
.ac-item:last-child .ac-back-title{margin-bottom:5px;padding-bottom:5px;}
.ac-item:last-child .ac-detail{font-size:.82rem;}
.ac-flipback{position:absolute;right:11px;top:11px;display:inline-flex;align-items:center;
  justify-content:center;width:22px;height:22px;border-radius:50%;color:var(--gold-bright);
  border:1px solid rgba(212,175,80,.45);background:rgba(212,175,80,.10);
  font-size:.88rem;line-height:1;opacity:.9;pointer-events:none;}
@media (hover:hover){ .ac-item:hover .ac-flip{transform:rotateY(180deg);} }
/* Touch/keyboard flip is class-driven (see the flip-toggle script) so a tap or
   Enter/Space is a real toggle that flips back — no more stuck :focus state. */
.ac-item.is-flipped .ac-flip{transform:rotateY(180deg);}
.ac-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 14px;margin-bottom:6px;}
.ac-lead{display:flex;align-items:center;gap:9px;min-width:0;}
.ac-ico{flex:0 0 auto;width:24px;height:24px;}
.ac-ico-svg{width:24px;height:24px;display:block;overflow:visible;}
.ac-an{transform-box:fill-box;transform-origin:center;}
@keyframes ac-spin{to{transform:rotate(360deg);}}
@keyframes ac-tilt{0%,100%{transform:rotate(0);}45%{transform:rotate(-11deg);}}
@keyframes ac-bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-2.4px);}}
@keyframes ac-pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.13);}}
@keyframes ac-blink{0%,100%{opacity:.28;}50%{opacity:1;}}
/* idle motion — gentle, only runs while the panel is visible (display:none stops it) */
.ac-item .ac-spin{animation:ac-spin 10s linear infinite;}
.ac-item .ac-tilt{animation:ac-tilt 4.2s ease-in-out infinite;}
.ac-item .ac-bob{animation:ac-bob 3.4s ease-in-out infinite;}
.ac-item .ac-pulse{animation:ac-pulse 3s ease-in-out infinite;}
.ac-item .ac-blink{animation:ac-blink 1.5s ease-in-out infinite;}
.ac-item .ac-blink.b2{animation-delay:.22s;} .ac-item .ac-blink.b3{animation-delay:.44s;}
/* hover: a little more life */
@media (hover:hover){
  .ac-item:hover .ac-spin{animation-duration:3.2s;}
  .ac-item:hover .ac-tilt,.ac-item:hover .ac-bob,.ac-item:hover .ac-pulse{animation-duration:1.1s;}
}
.ac-name{font-family:'Playfair Display',serif;color:var(--navy);font-weight:800;font-size:1.06rem;
  letter-spacing:.03em;text-transform:uppercase;line-height:1.2;margin:0;}
.ac-price{font-family:'Playfair Display',serif;color:var(--crimson);font-weight:900;font-size:1.2rem;
  line-height:1.1;margin:0;white-space:nowrap;transition:transform .4s var(--t-bounce);}
.ac-item:nth-child(5) .ac-price{white-space:normal;}   /* chat price is long, let it wrap */
.ac-desc{font-family:'Inter',system-ui,-apple-system,sans-serif;color:var(--navy);opacity:.82;
  font-size:.92rem;line-height:1.55;margin:0;}
.addons-cta{text-align:center;margin-top:28px;}
.addons-note{text-align:center;font-size:.9rem;color:var(--navy);opacity:.72;font-style:italic;
  line-height:1.6;max-width:640px;margin:20px auto 0;}

/* ---- Reveal: JS adds .is-armed (hidden pre-state) then .is-playing (cascade in). ---- */
.addons-timeline.is-armed .ac-item{opacity:0;transform:translateY(16px);}
.addons-timeline.is-armed .ac-item::before{transform:scaleY(0);}
.addons-timeline.is-playing .ac-item{opacity:1;transform:none;transition:opacity .5s var(--t),transform .55s var(--t);}
.addons-timeline.is-playing .ac-item::before{transform:scaleY(1);transition:transform .55s var(--t);}
.addons-timeline.is-playing .ac-item:nth-child(1){transition-delay:0.06s;}
.addons-timeline.is-playing .ac-item:nth-child(1)::before{transition-delay:0.20s;}
.addons-timeline.is-playing .ac-item:nth-child(2){transition-delay:0.14s;}
.addons-timeline.is-playing .ac-item:nth-child(2)::before{transition-delay:0.28s;}
.addons-timeline.is-playing .ac-item:nth-child(3){transition-delay:0.22s;}
.addons-timeline.is-playing .ac-item:nth-child(3)::before{transition-delay:0.36s;}
.addons-timeline.is-playing .ac-item:nth-child(4){transition-delay:0.30s;}
.addons-timeline.is-playing .ac-item:nth-child(4)::before{transition-delay:0.44s;}
.addons-timeline.is-playing .ac-item:nth-child(5){transition-delay:0.38s;}
.addons-timeline.is-playing .ac-item:nth-child(5)::before{transition-delay:0.52s;}
.addons-timeline.is-playing .ac-item:nth-child(6){transition-delay:0.46s;}
.addons-timeline.is-playing .ac-item:nth-child(6)::before{transition-delay:0.60s;}
.addons-timeline.is-playing .ac-item:nth-child(7){transition-delay:0.54s;}
.addons-timeline.is-playing .ac-item:nth-child(7)::before{transition-delay:0.68s;}

/* ---- Hover (desktop pointers only): the card lifts, its accent brightens, price nudges. ---- */
@media (hover:hover){
  .ac-item:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(15,27,54,.13);border-color:rgba(181,145,64,.4);}
  .ac-item:hover::before{filter:brightness(1.12) saturate(1.1);}
  .ac-item:hover .ac-price{transform:translateY(-1px) scale(1.04);}
}

/* ---- Responsive: single column below 820px (mobile scrolls normally). ---- */
@media (max-width:820px){
  .ac-grid{grid-template-columns:1fr;gap:14px;}
  .ac-item:last-child{grid-column:auto;}
}
@media (max-width:560px){
  .ac-name{font-size:1rem;}
  .ac-price{font-size:1.12rem;}
  .ac-desc{font-size:.9rem;}
}

/* ---- Reduced motion: force the fully-shown resting state, no tweens. ---- */
@media (prefers-reduced-motion:reduce){
  .addons-timeline.is-armed .ac-item,.addons-timeline.is-playing .ac-item{opacity:1!important;transform:none!important;transition:none!important;}
  .addons-timeline.is-armed .ac-item::before,.addons-timeline.is-playing .ac-item::before{transform:scaleY(1)!important;transition:none!important;}
  .ac-an{animation:none!important;}
  /* Flip: no 3D rotation — cross-fade the faces instead (reveal still works). */
  .ac-flip{transform:none!important;transition:none!important;}
  .ac-face{backface-visibility:visible;-webkit-backface-visibility:visible;transition:opacity .18s linear;}
  .ac-front{opacity:1;}
  .ac-back{transform:none!important;opacity:0;}
  .ac-item:hover .ac-front,.ac-item.is-flipped .ac-front{opacity:0;}
  .ac-item:hover .ac-back,.ac-item.is-flipped .ac-back{opacity:1;}
}

/* Package builder + add-ons CSS removed 2026-06-21 — replaced by bundled retainer model. */
/* ============ Service-page restructure (Video & Photo Editing first) ============ */
.svc-intro{max-width:780px;margin:0 auto;text-align:center;}
.svc-intro h2{font-family:'Playfair Display',serif;font-weight:900;font-size:clamp(2rem,4vw,2.8rem);color:var(--navy);margin-bottom:24px;}
.svc-intro p{font-size:1.1rem;color:var(--navy);opacity:.85;line-height:1.75;margin-bottom:18px;}
.svc-intro p:last-child{margin-bottom:0;}

.svc-section{padding:80px 0;}
.svc-feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.svc-intro-mark{display:block;margin:0 auto 0;}

/* Interactive flip cards — "Six pieces of the craft" */
.svc-flip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.svc-flip-card{perspective:1200px;cursor:pointer;}
.svc-flip-inner{position:relative;width:100%;min-height:240px;transition:transform .7s var(--t);transform-style:preserve-3d;}
.svc-flip-card.is-flipped .svc-flip-inner{transform:rotateY(180deg);}
.svc-flip-front,.svc-flip-back{position:absolute;inset:0;width:100%;height:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#fff;padding:30px 26px;box-shadow:var(--shadow-sm);border-top:4px solid var(--crimson);display:flex;flex-direction:column;}
.svc-flip-back{transform:rotateY(180deg);background:var(--navy);color:var(--cream);border-top-color:var(--gold);align-items:center;justify-content:center;text-align:center;}
.svc-flip-back svg{max-width:140px;height:auto;margin-bottom:14px;}
.svc-flip-back .svc-flip-caption{font-family:'Playfair Display',serif;font-size:1.05rem;color:var(--gold);letter-spacing:.04em;text-transform:uppercase;}
.svc-flip-front .svc-card-num{font-family:'Playfair Display',serif;font-size:1.4rem;color:var(--crimson);font-weight:900;margin-bottom:8px;}
.svc-flip-front h3{margin:0 0 10px;font-size:1.2rem;color:var(--navy);}
.svc-flip-front p{color:var(--ink-mid);font-size:.96rem;line-height:1.55;margin:0;}
.svc-flip-hint{margin-top:auto !important;padding-top:14px;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mid);opacity:.55;}
@media(max-width:980px){.svc-flip-grid{grid-template-columns:1fr;max-width:480px;margin:0 auto;}}

.svc-card-icon{display:block;margin:0 auto 0;}
@media(max-width:760px){.svc-intro-mark{width:108px;height:116px;}.svc-card-icon{width:84px;height:60px;}}

@media(max-width:980px){.svc-feature-grid{grid-template-columns:1fr;max-width:520px;margin:0 auto;}}
.svc-card{background:#fff;padding:38px 30px;border-top:4px solid var(--crimson);box-shadow:var(--shadow-sm);transition:transform .3s var(--t),box-shadow .3s var(--t);position:relative;}
.svc-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);}
.svc-card-num{font-family:'Playfair Display',serif;font-size:1rem;font-weight:800;color:var(--gold);letter-spacing:.18em;margin-bottom:14px;}
.svc-card h3{font-family:'Playfair Display',serif;font-size:1.35rem;color:var(--navy);font-weight:800;margin-bottom:12px;}
.svc-card p{color:var(--navy);opacity:.82;font-size:.96rem;line-height:1.65;}

.svc-process{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;max-width:1100px;margin:0 auto;}
@media(max-width:980px){.svc-process{grid-template-columns:1fr;max-width:520px;}}
.svc-step{text-align:center;padding:0 14px;}
.svc-step-num{display:inline-flex;align-items:center;justify-content:center;width:68px;height:68px;border-radius:50%;background:var(--navy);color:var(--gold-bright);font-family:'Playfair Display',serif;font-size:2rem;font-weight:900;margin-bottom:22px;box-shadow:0 8px 22px rgba(15,27,54,.18);}
.svc-step h3{font-family:'Playfair Display',serif;font-size:1.35rem;color:var(--navy);font-weight:800;margin-bottom:12px;}
.svc-step p{color:var(--navy);opacity:.82;font-size:.98rem;line-height:1.7;}

/* Paid Media platform badges — visual element in intro */
/* 4-step process variant — used on Brand Identity (Discovery / Direction / Build / Handoff) */
.svc-process.svc-process-4{grid-template-columns:repeat(4,1fr);}
@media(max-width:980px){.svc-process.svc-process-4{grid-template-columns:1fr;}}

.svc-who-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
@media(max-width:980px){.svc-who-grid{grid-template-columns:1fr;max-width:520px;margin:0 auto;}}
.svc-who-card{background:#fff;padding:36px 30px;border-left:4px solid var(--gold);box-shadow:var(--shadow-sm);}
.svc-who-card h3{font-family:'Playfair Display',serif;font-size:1.3rem;color:var(--navy);font-weight:800;margin-bottom:14px;}
.svc-who-card p{color:var(--navy);opacity:.82;font-size:.96rem;line-height:1.7;}
/* 4-card Who This Is For layout — used on Social Media Management where streamers are a 4th audience */
#page-service-social .svc-who-grid{grid-template-columns:repeat(2,1fr);max-width:880px;margin:0 auto;}
@media(max-width:760px){#page-service-social .svc-who-grid{grid-template-columns:1fr;}}

.svc-not-included{max-width:820px;margin:0 auto;background:var(--navy);color:var(--cream);padding:40px 44px;position:relative;}
.svc-not-included::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--crimson),var(--gold));}
.svc-not-included ul{list-style:none;}
.svc-not-included li{padding:14px 0;border-bottom:1px solid rgba(245,240,232,.14);font-size:1rem;line-height:1.7;}
.svc-not-included li:last-child{border-bottom:none;}
.svc-not-included strong{color:var(--gold-bright);font-weight:800;}

.cta-buttons{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:24px;}
.btn-outline{background:transparent;color:var(--cream);border:2px solid var(--cream);padding:14px 26px;}
.btn-outline:hover{background:var(--cream);color:var(--navy);}


/* FAQ */
.faq-section{
  background:var(--navy);
  position:relative;overflow:hidden;
}
.faq-section::before{
  content:"";position:absolute;top:-30%;left:-10%;width:50%;height:160%;
  background:radial-gradient(circle,rgba(139,26,26,.08) 0%,transparent 60%);
  pointer-events:none;
}
.faq-section .section-title h2{color:var(--gold-bright);}
.faq-section .section-title .eyebrow{color:var(--gold);}
.faq-section .section-title .eyebrow::before,
.faq-section .section-title .eyebrow::after{background:var(--gold);}
.faq-section .section-title p{color:var(--cream);}
.faq{max-width:860px;margin:0 auto;position:relative;z-index:1;}
.faq-item{
  border-bottom:2px solid rgba(245,240,232,.18);
}
.faq-q{
  width:100%;text-align:left;
  padding:28px 0;
  font-family:'Playfair Display',serif;
  font-size:1.3rem;color:var(--gold-bright);font-weight:700;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  background:transparent;
  transition:color .25s var(--t);
}
.faq-q:hover{color:var(--cream);}
.faq-q .icon{
  width:42px;height:42px;border:3px solid var(--gold);border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  font-size:1.4rem;font-weight:700;font-family:'Inter',sans-serif;color:var(--gold);
  transition:transform .3s var(--t),background .3s var(--t),color .3s var(--t);
}
.faq-item.open .faq-q .icon{transform:rotate(45deg);background:var(--crimson);color:var(--gold-bright);border-color:var(--crimson);}
/* Classic max-height accordion pattern — works reliably across all browsers.
   Hidden by default; expands when .faq-item gets .open class via JS. */
.faq-a{
  max-height:0;
  overflow:hidden;
  transition:max-height .4s var(--t);
}
.faq-a > p{
  color:var(--cream);
  line-height:1.75;
  padding:4px 0 28px;
}
.faq-item.open .faq-a{max-height:500px;}

/* ============ About ============ */
.mission{
  background:var(--navy);
  padding:140px 24px;
  text-align:center;
  position:relative;overflow:hidden;
}
.mission::before{
  content:"";position:absolute;top:-30%;left:-10%;width:60%;height:160%;
  background:radial-gradient(circle,rgba(139,26,26,.22) 0%,transparent 60%);
  pointer-events:none;
}
.mission::after{
  content:"";position:absolute;bottom:-30%;right:-10%;width:60%;height:160%;
  background:radial-gradient(circle,rgba(181,145,64,.15) 0%,transparent 60%);
  pointer-events:none;
}
.mission .inner{max-width:980px;margin:0 auto;position:relative;z-index:2;}
.mission .quote-mark{
  font-family:'Playfair Display',serif;
  font-size:8rem;line-height:0;color:var(--crimson);font-weight:900;
  margin-bottom:20px;display:block;
}
.mission blockquote{
  font-family:'Playfair Display',serif;
  font-size:clamp(1.7rem,4vw,2.8rem);
  font-style:italic;
  font-weight:600;
  color:var(--gold-bright);
  margin-bottom:32px;
  line-height:1.32;
  position:relative;
}
.mission p{color:var(--cream);max-width:680px;margin:0 auto;font-size:1.18rem;opacity:.92;}

.team-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:36px;
}
/* Solo modifier — single card centered on its own, used while we're still one person. */
.team-grid-solo{grid-template-columns:1fr;max-width:520px;margin:0 auto;}
/* Tighten the gap between section-title and the solo card so the section doesn't feel oversized. */
.team-bg-hero .section-title{margin-bottom:36px;}

/* Team section background — extends the About Traffel Media cream-hero feel
   so the two sections read as one continuous canvas. Blob positions MIRROR
   where the hero's bottom blobs end, so the gradient carries through.
   - Hero ends with NAVY blob bottom-right + faint CRIMSON fading on the left.
   - Team begins with NAVY top-right (continuing from hero) + CRIMSON bottom-left. */
.team-bg-hero{position:relative;overflow:hidden;background:var(--cream-deep);margin-top:-1px;padding:50px 0 70px;}
@media(max-width:768px){.team-bg-hero{padding:40px 0 60px;}}
.team-bg-hero > .blob{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;}
.team-bg-hero > .blob-1,
.team-bg-hero > .blob-2{display:none;}
.team-bg-hero > .team-bg-art{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;}
.team-bg-hero > .team-bg-art > svg{position:absolute;inset:0;width:100%;height:100%;}
.team-bg-hero > .container{position:relative;z-index:2;}
@media(max-width:760px){.team-bg-hero > .team-bg-art{opacity:.45;}}

/* Hide the page-hero accent bar when an About-style hero is followed by a
   matching team-bg-hero — the small crimson divider was reading as a hard
   seam between the two sections. */
/* About hero + team section visibly split with a navy divider line (was previously merged). */
.page-hero.cream + .team-bg-hero{margin-top:0;border-top:4px solid var(--navy);}
@media(max-width:980px){.team-grid{grid-template-columns:1fr;max-width:420px;margin:0 auto;}}
.member{
  background:var(--white);
  padding:48px 32px 38px;text-align:center;
  transition:transform .4s var(--t), box-shadow .4s var(--t);
  box-shadow:var(--shadow-sm);
  position:relative;overflow:hidden;
}
.member::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--crimson) 0%,var(--gold) 100%);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--t);
}
.member:hover{transform:translateY(-12px);box-shadow:var(--shadow-md);}
.member:hover::before{transform:scaleX(1);}
.avatar-lg{
  width:140px;height:140px;border-radius:50%;
  margin:0 auto 28px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Playfair Display',serif;
  font-size:2.8rem;color:var(--gold-bright);font-weight:900;
  box-shadow:0 14px 32px rgba(15,27,54,.22);
  transition:transform .4s var(--t-bounce);
}
.member:hover .avatar-lg{transform:rotate(-6deg);}
.av-1{background:linear-gradient(135deg,var(--navy) 0%,var(--navy-soft) 100%);}
.av-2{background:linear-gradient(135deg,var(--crimson) 0%,var(--crimson-bright) 100%);}
.av-3{background:linear-gradient(135deg,var(--navy) 0%,var(--crimson) 100%);}
.member h4{color:var(--navy);font-family:'Playfair Display',serif;font-size:1.6rem;margin-bottom:6px;}
.member .role{color:var(--crimson);font-weight:800;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:18px;}
.member p{color:var(--navy);opacity:.8;font-size:.98rem;}

.values{
  background:var(--crimson);
  position:relative;overflow:hidden;
}
.values::before{
  content:"";position:absolute;top:-30%;right:-10%;width:60%;height:160%;
  background:radial-gradient(circle,rgba(15,27,54,.3) 0%,transparent 60%);
  pointer-events:none;
}
.values .section-title h2{color:var(--gold-bright);}
.values .section-title .eyebrow{color:var(--cream);}
.values .section-title .eyebrow::before,
.values .section-title .eyebrow::after{background:var(--cream);}
.values-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:36px;text-align:center;
  position:relative;z-index:1;
}
@media(max-width:880px){.values-grid{grid-template-columns:1fr;max-width:420px;margin:0 auto;}}
.value{padding:20px 12px;}
.value-icon{
  width:104px;height:104px;border-radius:50%;
  background:var(--navy);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 28px;
  border:3px solid var(--gold);
  transition:transform .4s var(--t-bounce);
}
.value:hover .value-icon{transform:rotate(-8deg) scale(1.06);}
.value-icon svg{width:46px;height:46px;stroke:var(--gold-bright);fill:none;stroke-width:2;}
.value h4{color:var(--gold-bright);font-family:'Playfair Display',serif;font-size:1.7rem;margin-bottom:14px;font-weight:800;}
.value p{color:var(--cream);font-size:1.05rem;}

/* ============ Contact ============ */
.contact-grid{
  display:grid;grid-template-columns:1fr 1.3fr;gap:64px;
  max-width:1180px;margin:0 auto;
}
@media(max-width:920px){.contact-grid{grid-template-columns:1fr;gap:48px;}}
.contact-info h3{color:var(--navy);font-family:'Playfair Display',serif;font-size:1.9rem;margin-bottom:20px;}
.contact-info > p{color:var(--navy);opacity:.82;margin-bottom:32px;font-size:1.05rem;}
.contact-info .info-row{
  display:flex;align-items:flex-start;gap:18px;
  padding:20px 0;border-bottom:1px solid rgba(139,26,26,.15);
}
.contact-info .info-row > svg{width:24px;height:24px;stroke:var(--crimson);fill:none;stroke-width:2;flex-shrink:0;margin-top:3px;}
.contact-info .info-row .lbl{font-size:.74rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--crimson);margin-bottom:5px;}
.contact-info .info-row .val{color:var(--navy);font-weight:600;font-size:1.05rem;}
.socials{display:flex;gap:14px;margin-top:10px;flex-wrap:wrap;}
/* Socials info-row — promotes social media to a proper contact channel alongside Email/Phone/Based In. */
.info-row-socials{align-items:flex-start;}
.info-row-socials .socials{margin-top:6px;}
.social-link{
  width:52px;height:52px;border-radius:50%;
  background:var(--crimson);
  display:flex;align-items:center;justify-content:center;
  color:var(--cream);
  transition:background .3s var(--t),color .3s var(--t),transform .3s var(--t),box-shadow .3s var(--t);
  box-shadow:0 6px 16px rgba(139,26,26,.32);
}
.social-link:hover{background:var(--navy);color:var(--gold-bright);transform:translateY(-4px);box-shadow:0 10px 24px rgba(15,27,54,.4);}
.social-link svg{width:24px;height:24px;fill:currentColor;display:block;}

.contact-form{
  background:var(--white);
  padding:48px;
  box-shadow:var(--shadow-md);
  position:relative;
  overflow:hidden;
}
.contact-form::before{
  content:"";position:absolute;top:0;left:0;right:0;height:6px;
  background:linear-gradient(90deg,var(--crimson) 0%,var(--gold) 100%);
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
@media(max-width:600px){.form-row{grid-template-columns:1fr;} .contact-form{padding:32px;}}
.field{margin-bottom:24px;}
.field label{
  display:block;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--crimson);font-weight:800;margin-bottom:10px;
}
.field input,.field select,.field textarea{
  width:100%;padding:16px 18px;
  font-family:'Inter',sans-serif;font-size:1rem;
  background:var(--cream);
  border:2px solid transparent;
  color:var(--navy);
  transition:border-color .25s var(--t),background .25s var(--t);
}
.field textarea{resize:vertical;min-height:140px;font-family:inherit;}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--crimson);background:var(--white);
}
/* Add-ons multi-select — checkbox group (not the .field class, so the width:100%
   input rule doesn't apply to the checkboxes). */
.field-addons{border:0;padding:0;margin:0 0 24px;min-width:0;}
.addon-legend{display:block;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--crimson);font-weight:800;margin-bottom:10px;padding:0;}
.addon-checks{display:grid;grid-template-columns:1fr 1fr;gap:10px 20px;}
@media(max-width:600px){.addon-checks{grid-template-columns:1fr;}}
.addon-check{display:flex;align-items:center;gap:11px;font-family:'Inter',sans-serif;font-size:.95rem;color:var(--navy);cursor:pointer;padding:11px 14px;background:var(--cream);border:2px solid transparent;transition:border-color .2s var(--t),background .2s var(--t);}
.addon-check:hover{border-color:var(--crimson);}
.addon-check input{-webkit-appearance:auto;appearance:auto;width:18px;height:18px;margin:0;flex:0 0 auto;accent-color:var(--crimson);cursor:pointer;}
.addon-check:has(input:checked){border-color:var(--crimson);background:var(--white);}
.addon-check{align-items:flex-start;}
.ac-cwrap{display:flex;flex-direction:column;gap:2px;line-height:1.3;}
.ac-cname{color:var(--navy);font-weight:600;}
.ac-cost{font-size:.8rem;color:var(--crimson);font-weight:700;}


.form-success{
  display:none;
  padding:18px 22px;
  background:var(--navy);color:var(--gold-bright);
  font-weight:700;
  margin-top:24px;
}
.form-success.show{display:block;}
.form-success.error{background:var(--crimson);color:var(--cream);}

/* ============ Footer ============ */
.footer{
  background:var(--navy-deep);color:var(--cream);
  padding:90px 24px 36px;
  position:relative;overflow:hidden;
  border-top:4px solid var(--crimson);
}
.footer::before{
  content:"";position:absolute;top:-30%;right:-10%;width:50%;height:160%;
  background:radial-gradient(circle,rgba(139,26,26,.15) 0%,transparent 60%);
  pointer-events:none;
}
.footer-grid{
  max-width:1180px;margin:0 auto;
  display:grid;grid-template-columns:1.3fr 1fr 1.2fr;gap:40px;
  padding-bottom:48px;
  border-bottom:1px solid rgba(245,240,232,.14);
  position:relative;z-index:1;
  align-items:start;
}
.footer-col-brand{display:flex;flex-direction:column;align-items:flex-start;gap:18px;}
.footer-col-center{justify-self:start;text-align:left;min-width:0;}
.footer-col-center h5{text-align:left;}
.footer-col-right{justify-self:end;text-align:left;min-width:0;max-width:280px;}
.footer-col-right .footer-info span{font-size:.95rem;word-break:break-word;}
/* Tablet: keep 3 columns but loosen gaps and let things breathe */
@media(max-width:980px){
  .footer-grid{grid-template-columns:1fr 1fr 1fr;gap:32px;}
  .footer-col-right{justify-self:start;max-width:none;}
  .footer-logo .logo-box{width:72px;height:72px;}
  .footer h5{font-size:1.1rem;margin-bottom:16px;padding-bottom:10px;}
  .footer-quick-links{max-width:none;}
  .footer-quick-links li a{font-size:.92rem;}
}
/* Narrow tablet / large phone: stack to 2 columns, brand spans full width */
@media(max-width:760px){
  .footer{padding:70px 24px 32px;}
  .footer-grid{grid-template-columns:1fr 1fr;gap:36px 28px;padding-bottom:40px;}
  .footer-col-brand{grid-column:1 / -1;align-items:flex-start;}
  .footer-col-center,.footer-col-right{justify-self:start;text-align:left;}
  .footer-quick-links{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none;gap:10px 18px;}
}
/* Phone: single column, everything left-aligned */
@media(max-width:520px){
  .footer{padding:60px 20px 28px;}
  .footer-grid{grid-template-columns:1fr;gap:32px;padding-bottom:32px;}
  .footer-col-brand,.footer-col-center,.footer-col-right{grid-column:auto;}
  .footer-logo .logo-box{width:68px;height:68px;}
  .footer .footer-tag{font-size:.9rem;}
  .footer h5{font-size:1.05rem;margin-bottom:14px;padding-bottom:10px;}
  .footer-quick-links{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px;}
  .footer-quick-links li a{font-size:.9rem;}
  .footer p,.footer a,.footer span{font-size:.9rem;}
  .footer .footer-info{gap:10px;margin-bottom:14px;}
  .social-link{width:38px;height:38px;}
  .social-link svg{width:16px;height:16px;}
  .socials{gap:8px;flex-wrap:wrap;}
}
.footer h5{
  color:var(--gold-bright);font-family:'Playfair Display',serif;
  font-size:1.25rem;margin-bottom:22px;letter-spacing:.06em;
  position:relative;padding-bottom:12px;
}
.footer h5::after{
  content:"";position:absolute;left:0;bottom:0;width:42px;height:2px;background:var(--crimson);
}
.footer-col-right h5::after{left:0;}
.footer-logo .logo-box{width:84px;height:84px;padding:0;margin-bottom:6px;}
.footer p,.footer a,.footer span{font-size:.98rem;color:var(--cream);opacity:.88;}
.footer a{transition:color .25s var(--t);}
.footer a:hover{color:var(--gold-bright);opacity:1;}
.footer ul li{padding:8px 0;}
.footer-quick-links{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px 18px;
  max-width:320px;
}
.footer-quick-links li{padding:0;}
.footer-quick-links li a{
  display:inline-block;
  font-weight:600;
  font-size:.95rem;
  letter-spacing:.02em;
  padding:4px 0;
  color:var(--cream);
  opacity:.92;
}
.footer-quick-links li a:hover{color:var(--gold-bright);opacity:1;}
@media(max-width:560px){
  .footer-quick-links{gap:10px 12px;max-width:240px;}
  .footer-quick-links li a{font-size:.82rem;}
}
.footer .footer-tag{font-style:italic;opacity:.92;max-width:280px;color:var(--gold-bright);font-family:'Playfair Display',serif;font-size:1.05rem;line-height:1.5;margin-top:4px;}
.footer .footer-info{display:flex;flex-direction:column;gap:12px;margin-bottom:22px;}
.footer .footer-info span{display:flex;align-items:center;gap:10px;font-size:.95rem;}
.footer-bottom{
  max-width:1320px;margin:0 auto;
  padding-top:32px;text-align:center;position:relative;z-index:1;
}
.footer-bottom p{color:var(--gold);font-size:.88rem;letter-spacing:.1em;opacity:.75;}
.footer-bottom a{color:var(--gold-bright);text-decoration:none;border-bottom:1px solid rgba(212,175,80,.28);transition:border-color .25s var(--t),color .25s var(--t);opacity:1;}
.footer-bottom a:hover{border-bottom-color:var(--gold-bright);color:#fff;}
.footer-bottom .sep{margin:0 8px;opacity:.55;display:inline-block;}
@media(max-width:520px){.footer-bottom .sep{margin:0 6px;}}


.svc-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;}
@media(max-width:880px){.svc-detail-grid{grid-template-columns:1fr;gap:32px;}}
.svc-detail-grid h2{color:var(--navy);margin-bottom:18px;}
.svc-detail-grid p{color:var(--navy);opacity:.82;font-size:1.08rem;margin-bottom:16px;}
.svc-feature-list{margin-top:22px;display:flex;flex-direction:column;gap:14px;}
.svc-feature-list li{
  display:flex;gap:14px;align-items:flex-start;
  padding:16px 20px;background:var(--white);
  box-shadow:var(--shadow-sm);
  color:var(--navy);font-weight:600;font-size:1rem;
}
.svc-feature-list li::before{content:"✓";color:var(--crimson);font-weight:900;font-size:1.2rem;flex-shrink:0;}

  /* Chat widget - all scoped to .tm-chat to avoid leaking */
  .tm-chat-btn{position:fixed;right:24px;bottom:24px;z-index:90;width:70px;height:64px;border-radius:50%;background:var(--crimson);color:var(--cream);border:2px solid var(--crimson);box-shadow:var(--shadow-crimson);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .35s var(--t),background .25s var(--t),box-shadow .35s var(--t);outline-offset:4px;}
  .tm-chat-btn:hover{background:var(--crimson-bright);transform:translateY(-3px) scale(1.04);box-shadow:0 24px 60px rgba(139,26,26,.4);}
  .tm-chat-btn:focus-visible{outline:3px solid var(--gold);}
  .tm-chat-btn svg{width:28px;height:28px;transition:transform .4s var(--t);}
  .tm-chat-btn.open svg.tm-icon-chat{opacity:0;transform:rotate(-45deg) scale(.6);}
  .tm-chat-btn .tm-icon-close{position:absolute;opacity:0;transform:rotate(45deg) scale(.6);transition:opacity .4s var(--t),transform .4s var(--t);}
  .tm-chat-btn.open .tm-icon-close{opacity:1;transform:rotate(0) scale(1);}
  .tm-chat-btn .tm-icon-chat{transition:opacity .4s var(--t),transform .4s var(--t);}
  .tm-chat-btn .tm-pulse{position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--crimson);opacity:0;pointer-events:none;}
  .tm-chat-btn:not(.open):not(.seen) .tm-pulse{animation:tm-pulse 2.4s var(--t) infinite;}
  @keyframes tm-pulse{0%{opacity:.55;transform:scale(1);}80%{opacity:0;transform:scale(1.45);}100%{opacity:0;transform:scale(1.45);}}

  .tm-chat-panel{position:fixed;right:24px;bottom:104px;z-index:91;width:380px;max-width:calc(100vw - 32px);max-height:min(520px,calc(100vh - 140px));background:var(--cream);border:2px solid var(--crimson);border-radius:14px;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;overflow:hidden;opacity:0;visibility:hidden;transform:translateY(16px) scale(.97);transform-origin:bottom right;transition:opacity .35s var(--t),transform .35s var(--t),visibility 0s linear .35s;}
  .tm-chat-panel.open{opacity:1;visibility:visible;transform:translateY(0) scale(1);transition:opacity .35s var(--t),transform .35s var(--t),visibility 0s linear 0s;}

  .tm-chat-head{background:var(--navy);color:var(--cream);padding:18px 20px;border-bottom:2px solid var(--crimson);position:relative;}
  .tm-chat-head::before{content:"";position:absolute;left:0;right:0;bottom:-6px;height:3px;background:var(--gold);opacity:.55;}
  .tm-chat-head h3{font-family:'Playfair Display',Georgia,serif;font-weight:800;font-size:1.15rem;letter-spacing:.4px;color:var(--cream);margin-bottom:2px;}
  .tm-chat-head .tm-sub{font-family:'Inter',sans-serif;font-size:.72rem;letter-spacing:3.2px;text-transform:uppercase;color:var(--gold-bright);font-weight:700;}
  .tm-chat-head .tm-online{display:inline-block;width:8px;height:8px;border-radius:50%;background:#7AB776;margin-right:7px;vertical-align:middle;box-shadow:0 0 0 3px rgba(122,183,118,.22);}

  .tm-chat-body{flex:1;overflow-y:auto;padding:20px 20px 12px;display:flex;flex-direction:column;gap:14px;background:var(--cream);}
  .tm-chat-body::-webkit-scrollbar{width:6px;}
  .tm-chat-body::-webkit-scrollbar-thumb{background:var(--cream-deep);border-radius:3px;}

  .tm-msg{max-width:88%;font-family:'Inter',sans-serif;font-size:.92rem;line-height:1.55;padding:11px 14px;border-radius:12px;animation:tm-msg-in .35s var(--t);}
  @keyframes tm-msg-in{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
  .tm-msg.bot{background:var(--white);color:var(--navy);border:1px solid var(--cream-deep);align-self:flex-start;border-bottom-left-radius:4px;}
  .tm-msg.bot .tm-name{display:block;font-family:'Inter',sans-serif;font-size:.62rem;letter-spacing:2.5px;text-transform:uppercase;color:var(--crimson);font-weight:800;margin-bottom:4px;}
  .tm-msg.user{background:var(--navy);color:var(--cream);align-self:flex-end;border-bottom-right-radius:4px;}

  .tm-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 20px 16px;background:var(--cream);}
  .tm-chip{font-family:'Inter',sans-serif;font-size:.78rem;font-weight:600;color:var(--navy);background:var(--white);border:1px solid var(--cream-deep);padding:8px 13px;border-radius:999px;cursor:pointer;transition:all .25s var(--t);}
  .tm-chip:hover{background:var(--navy);color:var(--cream);border-color:var(--navy);transform:translateY(-1px);}
  .tm-chip:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}

  .tm-chat-foot{padding:14px 16px;background:var(--white);border-top:1px solid var(--cream-deep);display:flex;gap:8px;align-items:flex-end;}
  .tm-chat-foot textarea{flex:1;font-family:'Inter',sans-serif;font-size:.92rem;color:var(--navy);background:var(--cream);border:1px solid var(--cream-deep);border-radius:10px;padding:10px 12px;resize:none;min-height:44px;max-height:120px;line-height:1.45;}
  .tm-chat-foot textarea:focus{outline:none;border-color:var(--crimson);background:var(--white);}
  .tm-chat-foot button{font-family:'Inter',sans-serif;font-weight:700;font-size:.85rem;color:var(--cream);background:var(--crimson);border:none;padding:11px 16px;border-radius:10px;cursor:pointer;transition:background .25s var(--t),transform .25s var(--t);}
  .tm-chat-foot button:hover:not(:disabled){background:var(--crimson-bright);transform:translateY(-1px);}
  .tm-chat-foot button:disabled{opacity:.5;cursor:not-allowed;}

  .tm-form-wrap{padding:16px 20px;background:var(--cream);border-top:1px solid var(--cream-deep);display:none;flex-direction:column;gap:10px;}
  .tm-form-wrap.show{display:flex;animation:tm-msg-in .35s var(--t);}
  .tm-form-wrap label{font-family:'Inter',sans-serif;font-size:.7rem;letter-spacing:2px;text-transform:uppercase;color:var(--navy);font-weight:700;}
  .tm-form-wrap input,.tm-form-wrap textarea{font-family:'Inter',sans-serif;font-size:.9rem;color:var(--navy);background:var(--white);border:1px solid var(--cream-deep);border-radius:8px;padding:9px 11px;width:100%;}
  .tm-form-wrap input:focus,.tm-form-wrap textarea:focus{outline:none;border-color:var(--crimson);}
  .tm-form-wrap .tm-row{display:flex;flex-direction:column;gap:4px;}
  .tm-form-wrap .tm-actions{display:flex;gap:8px;margin-top:4px;}
  .tm-form-wrap .tm-actions button{flex:1;font-family:'Inter',sans-serif;font-weight:700;font-size:.82rem;padding:10px;border-radius:10px;border:none;cursor:pointer;transition:all .25s var(--t);}
  .tm-form-wrap .tm-actions .tm-back{background:var(--white);color:var(--navy);border:1px solid var(--cream-deep);}
  .tm-form-wrap .tm-actions .tm-back:hover{background:var(--cream-warm);}
  .tm-form-wrap .tm-actions .tm-send{background:var(--crimson);color:var(--cream);}
  .tm-form-wrap .tm-actions .tm-send:hover{background:var(--crimson-bright);}

  /* Live "online" dot on the circle button — signals a real-person feel */
  .tm-chat-btn .tm-live-dot{position:absolute;top:6px;right:6px;width:12px;height:12px;border-radius:50%;background:#7AB776;border:2px solid var(--cream);box-shadow:0 0 0 3px rgba(122,183,118,.35);animation:tm-live-pulse 2s ease-in-out infinite;pointer-events:none;z-index:2;}
  @keyframes tm-live-pulse{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(1.18);opacity:.8;}}

  /* Top-right X close inside the chat header (in addition to the bottom circle toggle) */
  .tm-chat-close{position:absolute;top:12px;right:12px;z-index:6;width:30px;height:30px;background:transparent;border:none;color:var(--cream);cursor:pointer;border-radius:6px;display:flex;align-items:center;justify-content:center;transition:background .25s var(--t);}
  .tm-chat-close:hover{background:rgba(245,240,232,.15);}
  .tm-chat-close:focus-visible{outline:2px solid var(--gold);outline-offset:1px;}
  .tm-chat-close svg{width:18px;height:18px;}

  /* "Live now" badge that appears when the bot escalates to a real person */
  .tm-live-badge{display:inline-flex;align-items:center;gap:7px;background:#7AB776;color:#fff;font-family:'Inter',sans-serif;font-size:.66rem;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;padding:5px 11px;border-radius:999px;margin-bottom:8px;align-self:flex-start;animation:tm-msg-in .35s var(--t);}
  .tm-live-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;animation:tm-live-pulse 1.4s ease-in-out infinite;}

  /* Typing indicator — three bouncing dots that show while the bot "thinks" */
  .tm-typing{align-self:flex-start;background:var(--white);border:1px solid var(--cream-deep);border-radius:12px;border-bottom-left-radius:4px;padding:11px 14px;display:flex;flex-direction:column;gap:4px;animation:tm-msg-in .35s var(--t);}
  .tm-typing .tm-name{font-family:'Inter',sans-serif;font-size:.62rem;letter-spacing:2.5px;text-transform:uppercase;color:var(--crimson);font-weight:800;}
  .tm-typing-dots{display:inline-flex;gap:5px;align-items:center;}
  .tm-typing-dots span{width:7px;height:7px;border-radius:50%;background:var(--navy);opacity:.35;animation:tm-typing-bounce 1.4s infinite ease-in-out;}
  .tm-typing-dots span:nth-child(2){animation-delay:.15s;}
  .tm-typing-dots span:nth-child(3){animation-delay:.3s;}
  @keyframes tm-typing-bounce{0%,80%,100%{transform:translateY(0);opacity:.35;}40%{transform:translateY(-5px);opacity:1;}}

  /* Make "Send a message" + "More options" chips stand out from the topical chips */
  .tm-chip.tm-chip-primary{background:var(--navy);color:var(--cream);border-color:var(--navy);}
  .tm-chip.tm-chip-primary:hover{background:var(--crimson);border-color:var(--crimson);}

  @media (max-width:480px){
    .tm-chat-btn{right:16px;bottom:16px;width:70px;height:56px;}
    .tm-chat-panel{right:8px;left:8px;bottom:84px;width:auto;max-height:min(460px,calc(100vh - 110px));}
    .tm-chat-head h3{font-size:1.05rem;}
    .tm-chat-close{top:10px;right:10px;}
  }
  @media (prefers-reduced-motion: reduce){
    .tm-chat-btn:not(.open):not(.seen) .tm-pulse,
    .tm-chat-btn .tm-live-dot,
    .tm-live-badge::before,
    .tm-typing-dots span{animation:none;}
    .tm-msg,.tm-typing,.tm-live-badge{animation:none;}
  }