/* ─────────────────────────────────────────────────────────
   MANLY DIGITAL · DESIGN SYSTEM
   Brand: Bebas Neue uppercase / Fraunces italic / Inter body
   Colours: cream / navy / red / gold per brand reference
   Motion: custom cubic-beziers per Emil design engineering
───────────────────────────────────────────────────────── */

:root{
  /* Brand colour ─ literal hex values from brand reference */
  --cream:        #f4efe4;
  --cream-2:      #ece5d6;
  --cream-3:      #e2d9c6;
  --navy:         #1b2a40;
  --navy-2:       #243552;
  --red:          #bf3625;
  --red-2:        #d44030;
  --red-glow:     rgba(191, 54, 37, 0.09);
  --gold:         #a87c2a;

  /* Typography roles */
  --text:         #1b2a40;
  --text-2:       #4d5c6e;
  --text-3:       #8a8070;
  --rule:         rgba(27, 42, 64, 0.10);
  --rule-soft:    rgba(27, 42, 64, 0.05);
  --paper-glass:  rgba(244, 239, 228, 0.92);

  /* Type families ─ per brand reference */
  --display:      'Bebas Neue', 'Impact', sans-serif;
  --serif:        'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:         'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif;

  /* Custom easing curves ─ stronger than CSS defaults */
  --ease-out:     cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out:  cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer:  cubic-bezier(0.32, 0.72, 0, 1);

  /* Layout */
  --frame:        clamp(1.25rem, 4vw, 4rem);
  --shell:        1180px;
}

/* ─── Reset + base ─── */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body{
  font-family:var(--sans);
  font-weight:300;
  font-size:0.975rem;
  line-height:1.85;
  color:var(--text);
  background:var(--cream);
  overflow-x:hidden;
  position:relative;
  min-height:100vh;
}
/* Subtle texture pattern (carries the editorial feel from original) */
body::before{
  content:'';
  position:fixed; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M54.627 0l.83.828-1.415 1.415L51.8 0h2.827zM5.373 0l-.83.828L5.96 2.243 8.2 0H5.374zM48.97 0l3.657 3.657-1.414 1.414L46.143 0h2.828zM11.03 0L7.372 3.657 8.787 5.07 13.857 0H11.03zm32.284 0L49.8 6.485 48.384 7.9l-7.9-7.9h2.83zM16.686 0L10.2 6.485 11.616 7.9l7.9-7.9h-2.83zm20.97 0l8.113 8.113-1.415 1.415L34.828 0h2.83zM22.344 0L14.23 8.113l1.415 1.415L25.172 0h-2.83zM32 0l9.657 9.657-1.414 1.414L28 0h4zm-4 0L18.343 9.657l1.414 1.414L28 0h-4z' fill='%231b2a40' fill-opacity='0.022' fill-rule='evenodd'/%3E%3C/svg%3E");
  pointer-events:none;
  z-index:0;
}
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
img,svg{ display:block; max-width:100%; }
::selection{ background:var(--navy); color:var(--cream); }

::-webkit-scrollbar{ width:6px; }
::-webkit-scrollbar-track{ background:var(--cream); }
::-webkit-scrollbar-thumb{ background:var(--navy); border-radius:0; }

/* Skip link ─ accessibility */
.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  background:var(--navy);
  color:var(--cream);
  padding:0.85rem 1.25rem;
  font-size:0.85rem;
  z-index:1000;
  border-radius:3px;
  text-decoration:none;
}
.skip-link:focus{ left:1rem; top:1rem; }

/* ─────────────────────────────────────────────────────────
   TYPOGRAPHY ─ brand-compliant
   Bebas Neue: UPPERCASE only, letter-spacing .04em minimum
   Fraunces: italic decorative use only
   Inter: 300 body, 400 UI, 500 emphasis
───────────────────────────────────────────────────────── */

.display{
  font-family:var(--display);
  text-transform:uppercase;
  letter-spacing:0.04em;
  line-height:0.95;
  color:var(--navy);
  font-weight:400;
}
.display .red{ color:var(--red); }
.display .gold{ color:var(--gold); }

.d-xl  { font-size:clamp(2.6rem, 6vw, 6.5rem); }
.d-lg  { font-size:clamp(2rem, 4.5vw, 4.5rem); }
.d-md  { font-size:clamp(1.8rem, 3.5vw, 3.5rem); }
.d-sm  { font-size:clamp(1.4rem, 2.4vw, 2rem); }

.label{
  font-family:var(--sans);
  font-size:0.68rem;
  font-weight:500;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--gold);
  display:inline-block;
}
.label .dot{
  display:inline-block;
  width:6px; height:6px;
  background:var(--red);
  border-radius:50%;
  margin-right:0.55em;
  vertical-align:0.06em;
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ opacity:1; }
  50%   { opacity:0.4; }
}

.body-copy{
  font-size:0.975rem;
  font-weight:300;
  line-height:1.85;
  color:var(--text-2);
  max-width:54ch;
}
.serif-pull{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:1.2rem;
  line-height:1.55;
  color:var(--navy);
  letter-spacing:-0.005em;
}
hr.thin{ border:none; border-top:1px solid var(--rule); }
.red-rule{ width:48px; height:3px; background:var(--red); border:none; }

/* ─────────────────────────────────────────────────────────
   LAYOUT
───────────────────────────────────────────────────────── */
.shell{ max-width:var(--shell); margin:0 auto; padding:0 var(--frame); position:relative; z-index:2; }
section{ padding:6rem 0; position:relative; }

/* ─────────────────────────────────────────────────────────
   NAVIGATION
───────────────────────────────────────────────────────── */
.nav{
  position:fixed; top:0; left:0; right:0;
  z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem var(--frame);
  background:var(--paper-glass);
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  border-bottom:1px solid transparent;
  transition:transform 320ms var(--ease-out), border-color 220ms ease;
}
.nav.scrolled{ border-bottom-color:var(--rule); }
.nav.tucked{ transform:translateY(-100%); }

.brand{ display:flex; align-items:center; gap:0.65rem; }
.brand-mark{
  width:28px; height:28px;
  background:var(--navy);
  border-radius:3px;
  position:relative;
  overflow:hidden;
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.brand-mark svg{ width:100%; height:100%; }
.brand-text{ display:flex; flex-direction:column; }
.brand-name{
  font-family:var(--display);
  font-size:1.05rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--navy);
  line-height:1;
}
.brand-sub{
  font-size:0.6rem;
  color:var(--gold);
  letter-spacing:0.16em;
  text-transform:uppercase;
  margin-top:3px;
  font-family:var(--sans);
  font-weight:500;
}

.nav-links{
  display:flex; gap:2rem;
  list-style:none;
  align-items:center;
}
.nav-links a{
  font-size:0.74rem;
  font-weight:500;
  color:var(--text-2);
  letter-spacing:0.05em;
  text-transform:uppercase;
  position:relative;
  padding:0.4rem 0;
  transition:color 200ms var(--ease-out);
}
.nav-links a::after{
  content:'';
  position:absolute;
  left:0; bottom:0;
  width:100%; height:1px;
  background:var(--navy);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform 280ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine){
  .nav-links a:hover{ color:var(--navy); }
  .nav-links a:hover::after{ transform:scaleX(1); transform-origin:left; }
}
.nav-links a.active{ color:var(--navy); }
.nav-cta{
  background:var(--navy);
  color:var(--cream) !important;
  padding:0.75rem 1.6rem;
  border-radius:3px;
  font-size:0.72rem !important;
  letter-spacing:0.02em !important;
  transition:transform 160ms var(--ease-out), background 220ms var(--ease-out);
}
.nav-cta::after{ display:none; }
@media (hover: hover) and (pointer: fine){
  .nav-cta:hover{ background:var(--red); }
}
.nav-cta:active{ transform:scale(0.97); }

.hamburger{
  display:none;
  flex-direction:column;
  gap:5px;
  padding:6px;
  border:none;
  background:none;
  cursor:pointer;
}
.hamburger span{
  display:block;
  width:22px; height:1.5px;
  background:var(--navy);
  transition:transform 240ms var(--ease-out), opacity 160ms ease;
}
.mobile-menu{
  display:none;
  position:fixed; top:60px; left:0; right:0;
  background:var(--cream);
  border-bottom:1px solid var(--rule);
  padding:1.5rem var(--frame);
  z-index:55;
  flex-direction:column;
  gap:0;
}
.mobile-menu.open{ display:flex; }
.mobile-menu a{
  font-size:0.85rem;
  font-weight:500;
  color:var(--text-2);
  letter-spacing:0.05em;
  text-transform:uppercase;
  padding:0.85rem 0;
  border-bottom:1px solid var(--rule-soft);
}
.mobile-menu a:last-child{
  margin-top:0.75rem;
  background:var(--red);
  color:var(--cream);
  text-align:center;
  border:none;
  border-radius:3px;
  padding:0.95rem;
}

/* ─────────────────────────────────────────────────────────
   BUTTONS ─ 3px radius per brand reference
───────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:0.55rem;
  padding:0.85rem 1.85rem;
  border-radius:3px;
  font-size:0.83rem;
  font-weight:500;
  letter-spacing:0.02em;
  transition:transform 160ms var(--ease-out), background-color 220ms var(--ease-out), color 220ms var(--ease-out), border-color 220ms var(--ease-out);
  white-space:nowrap;
  cursor:pointer;
  border:none;
  font-family:var(--sans);
}
.btn:active{ transform:scale(0.97); }

.btn-navy{ background:var(--navy); color:var(--cream); }
.btn-red{ background:var(--red); color:var(--cream); }
.btn-outline{ border:1.5px solid var(--navy); color:var(--navy); padding:0.81rem 1.85rem; background:transparent; }
.btn-cream{ background:var(--cream); color:var(--red); }

@media (hover: hover) and (pointer: fine){
  .btn-navy:hover{ background:var(--navy-2); }
  .btn-red:hover{ background:var(--red-2); }
  .btn-outline:hover{ background:var(--navy); color:var(--cream); }
  .btn-cream:hover{ background:var(--navy); color:var(--cream); }
}
.btn .arrow{
  width:14px; height:10px;
  transition:transform 240ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine){
  .btn:hover .arrow{ transform:translateX(4px); }
}

.phone-pill{
  display:inline-flex; align-items:center; gap:0.55rem;
  padding:0.55rem 1rem 0.55rem 0.85rem;
  background:var(--navy);
  color:var(--cream);
  border-radius:3px;
  font-size:0.8rem;
  font-weight:500;
  letter-spacing:0.01em;
  transition:transform 160ms var(--ease-out), background 220ms var(--ease-out);
}
.phone-pill svg{
  width:13px; height:13px;
  fill:var(--cream);
  flex-shrink:0;
}
@media (hover: hover) and (pointer: fine){
  .phone-pill:hover{ background:var(--red); }
}
.phone-pill:active{ transform:scale(0.97); }

/* ─────────────────────────────────────────────────────────
   CARDS ─ 4px radius per brand reference
───────────────────────────────────────────────────────── */
.card{
  background:var(--cream-2);
  border:1px solid var(--rule);
  border-radius:4px;
  padding:2rem;
  transition:transform 280ms var(--ease-out), border-color 280ms var(--ease-out);
}
.card-white{ background:#fff; }
.card-accent-red{ border-left:3px solid var(--red); }
.card-accent-navy{ border-left:3px solid var(--navy); }

/* ─────────────────────────────────────────────────────────
   HERO
───────────────────────────────────────────────────────── */
.hero{
  padding:9rem 0 4.5rem;
  position:relative;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:5rem;
  align-items:start;
}
.hero-eyebrow{ margin-bottom:2rem; opacity:0; animation:fadeUp 700ms var(--ease-out) 0.05s forwards; }
.hero-headline{ position:relative; }
.hero-headline .line{
  display:block;
  overflow:hidden;
  padding:0.04em 0;
}
.hero-headline .line-inner{
  display:block;
  transform:translateY(110%);
  opacity:0;
  animation:rise 1.05s var(--ease-out) forwards;
}
.hero-headline .line:nth-child(1) .line-inner{ animation-delay:0.10s; }
.hero-headline .line:nth-child(2) .line-inner{ animation-delay:0.22s; }
.hero-headline .line:nth-child(3) .line-inner{ animation-delay:0.34s; }
.hero-headline .line:nth-child(4) .line-inner{ animation-delay:0.46s; }
.hero-headline .line:nth-child(5) .line-inner{ animation-delay:0.58s; }
.hero-headline .line:nth-child(6) .line-inner{ animation-delay:0.70s; }
@keyframes rise{
  to{ transform:translateY(0); opacity:1; }
}
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(12px); }
  to  { opacity:1; transform:translateY(0); }
}

.hero-meta{
  margin-top:2.5rem;
  max-width:540px;
  opacity:0;
  animation:fadeUp 800ms var(--ease-out) 0.85s forwards;
}
.hero-meta .body-copy{ margin-bottom:1.5rem; }
.hero-actions{
  display:flex; gap:0.75rem; flex-wrap:wrap;
  margin-bottom:2rem;
}
.hero-points{
  display:flex;
  flex-direction:column;
  gap:0;
}
.hero-point{
  padding:0.95rem 0;
  border-bottom:1px solid var(--rule-soft);
  display:grid;
  grid-template-columns:1fr auto;
  gap:0.5rem;
  align-items:start;
}
.hero-point:last-child{ border-bottom:none; }
.hero-point-text{
  font-size:0.815rem;
  font-weight:500;
  color:var(--text-2);
}
.hero-point-sub{
  font-size:0.74rem;
  color:var(--text-3);
  margin-top:0.2rem;
  font-weight:300;
}
.hero-point .dot{
  width:7px; height:7px;
  background:var(--red);
  border-radius:50%;
  flex-shrink:0;
  margin-top:0.45em;
}

/* ─── Hero visual: SERP ranking journey ─── */
.serp-stage{
  position:relative;
  opacity:0;
  animation:fadeUp 1.1s var(--ease-out) 0.65s forwards;
}
.serp-shadow{
  position:absolute;
  inset:0;
  background:var(--red-glow);
  border-radius:8px;
  transform:translate(12px, 12px) rotate(-1.2deg);
  z-index:0;
}
.serp-card{
  position:relative;
  background:#fff;
  border:1px solid #e0d9c6;
  border-radius:8px;
  padding:1.4rem 1.4rem 1.25rem;
  box-shadow:0 24px 48px -16px rgba(27, 42, 64, 0.18), 0 2px 6px rgba(27, 42, 64, 0.04);
  z-index:1;
}
.serp-chrome{
  display:flex; gap:6px;
  margin-bottom:0.85rem;
}
.serp-chrome span{
  width:9px; height:9px; border-radius:50%;
  background:#e8e3d4;
}
.serp-search-box{
  display:flex; align-items:center; gap:0.65rem;
  padding:0.65rem 1rem;
  background:var(--cream);
  border:1px solid #ebe6d6;
  border-radius:24px;
}
.serp-search-box svg{
  width:14px; height:14px;
  flex-shrink:0;
  stroke:#9aa0a6;
  fill:none;
  stroke-width:2;
}
.serp-query{ font-size:0.81rem; color:var(--text); font-weight:400; }
.serp-cursor{
  display:inline-block;
  width:1px; height:0.95em;
  background:var(--navy);
  margin-left:1px;
  vertical-align:text-bottom;
  animation:blink 1.05s steps(1) infinite;
}
@keyframes blink{ 50%{ opacity:0; } }

.serp-meta-row{
  margin-top:0.85rem;
  font-size:0.65rem;
  color:#5f6368;
  letter-spacing:0.04em;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-weight:500;
}
.serp-month-badge{
  display:inline-flex;
  align-items:center;
  gap:0.4rem;
  background:var(--navy);
  color:var(--cream);
  padding:0.2rem 0.55rem;
  border-radius:3px;
  font-size:0.6rem;
  letter-spacing:0.1em;
  font-feature-settings:'tnum';
}
.serp-month-badge .month-num{
  font-weight:500;
  min-width:1ch;
  display:inline-block;
  text-align:center;
}

.serp-results{
  margin-top:0.85rem;
  border:1px solid #ece7d5;
  border-radius:6px;
  overflow:hidden;
}
.serp-result{
  display:flex;
  align-items:center;
  gap:0.75rem;
  padding:0.75rem 0.85rem;
  border-bottom:1px solid #f3eedd;
  background:#fff;
  position:relative;
  font-feature-settings:'tnum';
}
.serp-result:last-child{ border-bottom:none; }
.serp-result.you{ background:var(--red-glow); }
.serp-result.you::before{
  content:'';
  position:absolute;
  left:0; top:0; bottom:0;
  width:3px;
  background:var(--red);
}
.serp-rank{
  width:22px;
  font-family:var(--display);
  font-size:0.95rem;
  letter-spacing:0.04em;
  color:var(--text-3);
  flex-shrink:0;
  text-align:center;
  transition:color 320ms ease;
}
.serp-result.you .serp-rank{ color:var(--red); }
.serp-icon{
  width:30px; height:30px;
  border-radius:4px;
  background:#f0ebda;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display);
  font-size:0.95rem;
  color:#7a7060;
  flex-shrink:0;
  letter-spacing:0.02em;
}
.serp-result.you .serp-icon{ background:var(--red); color:#fff; }
.serp-info{ flex:1; min-width:0; }
.serp-name{
  font-size:0.83rem;
  font-weight:500;
  color:var(--navy);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  letter-spacing:-0.005em;
}
.serp-result.you .serp-name{ color:var(--red); }
.serp-stars{
  font-size:0.7rem;
  color:#f5a623;
  letter-spacing:0.05em;
  margin-top:1px;
}
.serp-stars span{ color:#9aa0a6; margin-left:0.35rem; font-size:0.65rem; }

.serp-foot{
  margin-top:0.75rem;
  font-size:0.65rem;
  color:#9aa0a6;
  text-align:center;
  letter-spacing:0.02em;
}
.serp-foot strong{ color:#5f6368; font-weight:500; }

.serp-tabs{
  display:inline-flex;
  margin-top:1.5rem;
  background:transparent;
  border:1px solid var(--rule);
  border-radius:3px;
  overflow:hidden;
  flex-wrap:wrap;
}
.serp-tab{
  padding:0.5rem 0.95rem;
  font-size:0.7rem;
  font-weight:500;
  color:var(--text-2);
  letter-spacing:0.06em;
  text-transform:uppercase;
  transition:color 200ms var(--ease-out), background 200ms var(--ease-out);
  border-right:1px solid var(--rule);
  border-radius:0;
  font-family:var(--sans);
}
.serp-tab:last-child{ border-right:none; }
.serp-tab.active{ color:var(--cream); background:var(--navy); }
@media (hover: hover) and (pointer: fine){
  .serp-tab:hover:not(.active){ color:var(--navy); }
}

/* ─────────────────────────────────────────────────────────
   MARQUEE TICKER
───────────────────────────────────────────────────────── */
.marquee{
  background:var(--navy);
  color:var(--cream);
  padding:0.85rem 0;
  overflow:hidden;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  position:relative;
  z-index:2;
}
.marquee-track{
  display:flex;
  gap:3rem;
  animation:marquee 48s linear infinite;
  white-space:nowrap;
  width:max-content;
}
.marquee-item{
  font-family:var(--display);
  font-size:1.15rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  display:flex; align-items:center; gap:1.5rem;
}
.marquee-item::after{
  content:'/';
  color:var(--red);
  font-family:var(--sans);
  font-size:0.9rem;
  font-weight:300;
}
@keyframes marquee{
  to{ transform:translateX(-50%); }
}

/* ─────────────────────────────────────────────────────────
   GENERIC SECTION HELPERS
───────────────────────────────────────────────────────── */
.split-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6rem;
  align-items:start;
}
.split-grid.center-align{ align-items:center; }
.section-head{
  text-align:center;
  max-width:580px;
  margin:0 auto 4rem;
}
.section-head .body-copy{
  margin:1.25rem auto 0;
  text-align:center;
}

/* ─────────────────────────────────────────────────────────
   STORY / INDUSTRY CARDS
───────────────────────────────────────────────────────── */
.industry-stack{
  display:flex;
  flex-direction:column;
  gap:1.1rem;
}
.industry-card{
  background:#fff;
  border:1px solid var(--rule);
  border-radius:4px;
  padding:1.5rem 1.65rem;
  transition:transform 240ms var(--ease-out), border-color 240ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine){
  .industry-card:hover{ border-color:var(--navy); transform:translateY(-2px); }
}
.industry-card .label{ color:var(--text-3); margin-bottom:0.7rem; }
.industry-card p{
  font-size:0.86rem;
  color:var(--text-2);
  line-height:1.7;
}

/* ─────────────────────────────────────────────────────────
   PROCESS
───────────────────────────────────────────────────────── */
.process-section{
  background:var(--navy);
  color:var(--cream);
  position:relative;
  overflow:hidden;
}
.process-section .display{ color:var(--cream); }
.process-section .display .red{ color:var(--red); }
.process-section .label{ color:var(--gold); }
.process-section .body-copy{ color:rgba(244, 239, 228, 0.65); }

.process{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:2rem;
  position:relative;
  margin:0 auto;
  max-width:980px;
}
.process::before{
  content:'';
  position:absolute;
  top:28px;
  left:calc(12.5% + 28px);
  right:calc(12.5% + 28px);
  height:1px;
  background:rgba(244, 239, 228, 0.15);
  z-index:0;
}
.process-progress{
  position:absolute;
  top:28px;
  left:calc(12.5% + 28px);
  height:1px;
  width:0;
  background:var(--red);
  z-index:1;
  transition:width 1.4s var(--ease-out);
}
.step{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  position:relative;
  z-index:2;
}
.step-num{
  width:56px; height:56px;
  border-radius:50%;
  background:var(--navy);
  border:1.5px solid rgba(244, 239, 228, 0.2);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display);
  font-size:1.05rem;
  letter-spacing:0.05em;
  color:rgba(244, 239, 228, 0.5);
  margin-bottom:1.4rem;
  transition:background 540ms var(--ease-out), border-color 540ms var(--ease-out), color 540ms var(--ease-out), transform 540ms var(--ease-out);
}
.step.active .step-num{
  background:var(--red);
  border-color:var(--red);
  color:var(--cream);
  transform:scale(1.08);
}
.step.done .step-num{
  background:var(--cream);
  border-color:var(--cream);
  color:var(--navy);
}
.step h4{
  font-family:var(--display);
  font-size:1.1rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--cream);
  margin-bottom:0.55rem;
}
.step p{
  font-size:0.83rem;
  line-height:1.65;
  color:rgba(244, 239, 228, 0.65);
  font-weight:300;
}

.process-cta{
  text-align:center;
  margin-top:3.5rem;
  display:flex;
  gap:0.75rem;
  justify-content:center;
  flex-wrap:wrap;
}
.process-section .btn-outline{
  color:var(--cream);
  border-color:rgba(244, 239, 226, 0.3);
}
@media (hover: hover) and (pointer: fine){
  .process-section .btn-outline:hover{ background:var(--cream); color:var(--navy); border-color:var(--cream); }
}

/* ─────────────────────────────────────────────────────────
   PRICING
───────────────────────────────────────────────────────── */
.pricing{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.5rem;
  max-width:880px;
  margin:0 auto;
}
.pricing.pricing-trio{
  grid-template-columns:1fr 1fr 1fr;
  max-width:none;
  gap:1.25rem;
}
.pricing-block:has(.pricing-trio){
  max-width:none;
}
.pricing-block{
  max-width:880px;
  margin:0 auto;
}
.pricing-block + .pricing-block{ margin-top:6rem; }
.pricing-block-mini{
  font-family:var(--display);
  font-size:clamp(1.6rem, 2.4vw, 2.2rem);
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--red);
  text-align:center;
  margin-bottom:2.75rem;
  line-height:1;
  font-weight:400;
}
.pricing-block-mini .red{ color:var(--red); }
.price-card{
  position:relative;
  background:var(--cream-2);
  border:1px solid var(--rule);
  border-top:4px solid var(--navy);
  border-radius:4px;
  padding:1.75rem 1.5rem 1.6rem;
  transition:transform 280ms var(--ease-out);
  display:flex;
  flex-direction:column;
}
.price-card.feature{ border-top-color:var(--red); }
.price-card.feature::before{
  content:'Recommended';
  position:absolute;
  top:-11px; left:1.25rem;
  background:var(--red);
  color:var(--cream);
  font-size:0.58rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  padding:0.28rem 0.62rem;
  border-radius:2px;
  font-weight:500;
  font-family:var(--sans);
}
.price-icon{
  width:34px; height:34px;
  color:var(--navy);
  margin-bottom:1.1rem;
}
.price-card.feature .price-icon{ color:var(--red); }
.price-icon svg{ width:100%; height:100%; display:block; }
.price-divider{
  border:none;
  border-top:1px solid var(--rule);
  margin:1.1rem 0;
  width:100%;
}
.price-tag{
  font-family:var(--sans);
  font-size:0.64rem;
  font-weight:500;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:0.5rem;
}
.price-name{
  font-family:var(--display);
  font-size:1.5rem;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--navy);
  margin-bottom:1rem;
  line-height:1;
}
.price-amount{
  font-family:var(--display);
  font-size:2.6rem;
  letter-spacing:0.02em;
  color:var(--navy);
  line-height:1;
  margin-bottom:0.2rem;
}
.price-amount .sub{
  font-family:var(--sans);
  font-size:0.85rem;
  font-weight:300;
  color:var(--text-3);
  margin-left:0.3rem;
  letter-spacing:0;
  text-transform:none;
}
.price-amount-secondary{
  font-family:var(--display);
  font-size:1.7rem;
  letter-spacing:0.02em;
  color:var(--navy-2);
  line-height:1;
  margin-top:0.5rem;
  margin-bottom:0.25rem;
}
.price-amount-secondary .sub{
  font-family:var(--sans);
  font-size:0.78rem;
  font-weight:300;
  color:var(--text-3);
  margin-left:0.3rem;
  letter-spacing:0;
  text-transform:none;
}
.price-fineprint{
  font-size:0.72rem;
  color:var(--text-3);
  margin-bottom:1.25rem;
  margin-top:0.35rem;
  font-weight:300;
  line-height:1.55;
}
.check-list{
  list-style:none;
  margin-bottom:1.4rem;
}
.price-card .btn{
  display:flex;
  justify-content:center;
  width:100%;
  margin-top:auto;
  padding:0.85rem 1rem;
  font-size:0.78rem;
}
.check-list li{
  font-size:0.8rem;
  color:var(--text-2);
  line-height:1.55;
  padding:0.55rem 0 0.55rem 1.45rem;
  position:relative;
  border-top:1px solid var(--rule-soft);
  font-weight:300;
}
.check-list li:first-child{ border-top:none; }
.check-list li::before{
  content:'';
  position:absolute;
  left:0; top:0.85rem;
  width:9px; height:5px;
  border-left:1.5px solid var(--red);
  border-bottom:1.5px solid var(--red);
  transform:rotate(-45deg);
}
.pricing-footnote{
  text-align:center;
  margin-top:2rem;
  font-size:0.85rem;
  color:var(--text-2);
}
.pricing-footnote strong{ color:var(--navy); font-weight:500; }
.pricing-footnote a{ color:var(--red); border-bottom:1px solid var(--red); padding-bottom:1px; }

/* Tighten cards at narrower desktop widths to keep 3 columns viable */
@media (max-width: 1180px) and (min-width: 981px){
  .pricing.pricing-trio{ gap:1rem; }
  .price-card{ padding:1.5rem 1.25rem 1.4rem; }
  .price-name{ font-size:1.3rem; margin-bottom:0.9rem; }
  .price-amount{ font-size:2.25rem; }
  .price-amount .sub{ font-size:0.78rem; }
  .price-icon{ width:30px; height:30px; margin-bottom:0.95rem; }
  .price-fineprint{ font-size:0.7rem; margin-bottom:1.1rem; }
  .price-divider{ margin:0.95rem 0; }
  .check-list{ margin-bottom:1.2rem; }
  .check-list li{ font-size:0.76rem; padding:0.5rem 0 0.5rem 1.35rem; }
  .check-list li::before{ top:0.78rem; width:8px; height:4.5px; }
  .price-card .btn{ font-size:0.74rem; padding:0.78rem 0.9rem; }
  .price-card.feature::before{ font-size:0.54rem; padding:0.24rem 0.55rem; top:-10px; left:1rem; }
}

/* ─────────────────────────────────────────────────────────
   STATS
───────────────────────────────────────────────────────── */
.stats{
  background:var(--cream-2);
  padding:4.5rem 0;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.stats-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:0;
}
.stat{
  text-align:left;
  padding:0 2rem;
  border-right:1px solid var(--rule);
}
.stat:first-child{ padding-left:0; }
.stat:last-child{ border-right:none; padding-right:0; }
.stat-num{
  font-family:var(--display);
  font-size:clamp(2.6rem, 5.5vw, 4.2rem);
  color:var(--navy);
  line-height:1;
  margin-bottom:0.4rem;
  letter-spacing:0.02em;
  font-feature-settings:'tnum';
}
.stat-label{
  font-size:0.7rem;
  font-weight:500;
  color:var(--text-3);
  letter-spacing:0.16em;
  text-transform:uppercase;
}

/* ─────────────────────────────────────────────────────────
   WHY (split section)
───────────────────────────────────────────────────────── */
.why-list{ display:flex; flex-direction:column; }
.why-item{
  padding:1.65rem 0;
  border-bottom:1px solid var(--rule);
}
.why-item:first-child{ padding-top:0; }
.why-item:last-child{ border-bottom:none; }
.why-item h4{
  font-family:var(--display);
  font-size:1.05rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--navy);
  margin-bottom:0.5rem;
}
.why-item p{
  font-size:0.86rem;
  color:var(--text-2);
  line-height:1.7;
  font-weight:300;
}

/* ─────────────────────────────────────────────────────────
   CTA BAND
───────────────────────────────────────────────────────── */
.cta-band{
  background:var(--red);
  color:var(--cream);
  padding:4.5rem 0;
}
.cta-band-grid{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:2rem;
  flex-wrap:wrap;
}
.cta-band .display{ color:var(--cream); }
.cta-band-sub{
  font-size:1rem;
  color:rgba(244, 239, 226, 0.85);
  font-weight:300;
  margin-top:0.7rem;
}
.cta-band-call{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:0.8rem;
}
.cta-band-num{
  font-size:0.82rem;
  color:rgba(244, 239, 226, 0.85);
}
.cta-band-num a{
  color:#fff;
  border-bottom:1px solid rgba(244, 239, 226, 0.3);
  padding-bottom:1px;
  font-weight:500;
  letter-spacing:0.01em;
}

.cta-band-navy{ background:var(--navy); }
.cta-band-navy .display{ color:var(--cream); }
.cta-band-navy .display .red{ color:var(--red); }
.cta-band-navy .cta-band-sub{ color:rgba(244, 239, 226, 0.6); }

/* ─────────────────────────────────────────────────────────
   FOOTER
───────────────────────────────────────────────────────── */
footer{
  background:var(--navy);
  color:var(--cream);
  padding:4.5rem 0 2.5rem;
}
.foot-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:3rem;
  margin-bottom:3.5rem;
}
.foot-brand{ max-width:24rem; }
.foot-brand-name{
  font-family:var(--display);
  font-size:1.2rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--cream);
  line-height:1;
}
.foot-brand-meta{
  font-size:0.6rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--gold);
  margin-top:3px;
  margin-bottom:1.2rem;
  font-weight:500;
}
.foot-brand p{
  font-size:0.83rem;
  color:rgba(244, 239, 226, 0.55);
  line-height:1.75;
  margin-bottom:1.2rem;
  font-weight:300;
}
.foot-col h5{
  font-size:0.65rem;
  font-weight:500;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:rgba(244, 239, 226, 0.4);
  margin-bottom:1.2rem;
}
.foot-col a{
  display:block;
  font-size:0.83rem;
  color:rgba(244, 239, 226, 0.65);
  margin-bottom:0.65rem;
  transition:color 200ms var(--ease-out);
  font-weight:300;
}
@media (hover: hover) and (pointer: fine){
  .foot-col a:hover{ color:var(--red); }
}
.foot-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:2rem;
  border-top:1px solid rgba(244, 239, 226, 0.08);
  flex-wrap:wrap;
  gap:1rem;
}
.foot-copy{
  font-size:0.74rem;
  color:rgba(244, 239, 226, 0.4);
  font-feature-settings:'tnum';
}
.foot-red{ color:var(--red); }

/* ─────────────────────────────────────────────────────────
   PAGE HEADER (inner pages)
───────────────────────────────────────────────────────── */
.page-hero{
  padding:9rem 0 5rem;
  background:var(--cream-2);
  position:relative;
  border-bottom:1px solid var(--rule);
}
.page-hero-grid{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:5rem;
  align-items:end;
}

/* ─────────────────────────────────────────────────────────
   FAQ ACCORDION
───────────────────────────────────────────────────────── */
.faq{ max-width:780px; margin:0 auto; }
.faq-item{
  border-bottom:1px solid var(--rule);
}
.faq-item:first-child{ border-top:1px solid var(--rule); }
.faq-q{
  width:100%;
  padding:1.5rem 2.5rem 1.5rem 0;
  text-align:left;
  font-family:var(--display);
  font-size:1.05rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--navy);
  background:none;
  border:none;
  cursor:pointer;
  position:relative;
  transition:padding 240ms var(--ease-out);
}
.faq-q::after{
  content:'+';
  position:absolute;
  right:0; top:50%;
  transform:translateY(-50%);
  font-family:var(--sans);
  font-size:1.4rem;
  font-weight:300;
  color:var(--text-3);
  transition:transform 280ms var(--ease-out), color 280ms var(--ease-out);
}
.faq-item.open .faq-q::after{
  transform:translateY(-50%) rotate(45deg);
  color:var(--red);
}
@media (hover: hover) and (pointer: fine){
  .faq-q:hover{ padding-left:0.5rem; }
}
.faq-a{
  max-height:0;
  overflow:hidden;
  transition:max-height 360ms var(--ease-out);
}
.faq-item.open .faq-a{
  max-height:600px;
}
.faq-a-inner{
  padding:0 0 1.75rem;
  font-size:0.92rem;
  color:var(--text-2);
  line-height:1.8;
  font-weight:300;
  max-width:64ch;
}

/* ─────────────────────────────────────────────────────────
   FORMS
───────────────────────────────────────────────────────── */
.form-shell{
  background:#fff;
  border:1px solid var(--rule);
  border-radius:4px;
  padding:2.5rem;
}
.form-row{ margin-bottom:1.25rem; }
.form-row.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
}
.form-row label{
  display:block;
  font-size:0.72rem;
  font-weight:500;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--navy);
  margin-bottom:0.5rem;
}
.form-row input,
.form-row select,
.form-row textarea{
  width:100%;
  background:var(--cream);
  border:1px solid var(--rule);
  border-radius:3px;
  padding:0.85rem 1rem;
  font-family:var(--sans);
  font-size:1rem; /* 16px ─ prevents iOS auto-zoom */
  font-weight:400;
  color:var(--navy);
  transition:border-color 220ms var(--ease-out), background 220ms var(--ease-out);
  min-height:48px;
}
.form-row textarea{
  min-height:140px;
  resize:vertical;
  line-height:1.55;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus{
  outline:none;
  border-color:var(--navy);
  background:#fff;
}
.form-row input:focus-visible,
.form-row select:focus-visible,
.form-row textarea:focus-visible{
  outline:2px solid var(--red);
  outline-offset:1px;
}
.form-helper{
  font-size:0.74rem;
  color:var(--text-3);
  margin-top:0.4rem;
}
.form-success{
  display:none;
  background:var(--red-glow);
  border-left:3px solid var(--red);
  padding:1.25rem 1.5rem;
  margin-bottom:1.5rem;
  border-radius:3px;
  font-size:0.9rem;
  color:var(--navy);
  font-weight:500;
}

/* ─────────────────────────────────────────────────────────
   PORTFOLIO CARDS
───────────────────────────────────────────────────────── */
.portfolio-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1.75rem;
  max-width:1080px;
  margin:0 auto;
}
.portfolio-card{
  background:#fff;
  border:1px solid var(--rule);
  border-radius:4px;
  padding:1.5rem;
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:2.25rem;
  align-items:center;
  transition:transform 280ms var(--ease-out), border-color 280ms var(--ease-out), box-shadow 280ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine){
  .portfolio-card:hover{
    border-color:var(--navy);
    transform:translateY(-2px);
    box-shadow:0 14px 30px -18px rgba(0,0,0,0.18);
  }
  .portfolio-card:hover .portfolio-preview{ transform:translateY(-2px); }
}
.portfolio-preview{
  background:#fff;
  border:1px solid var(--rule);
  border-radius:4px;
  overflow:hidden;
  box-shadow:0 18px 40px -22px rgba(0,0,0,0.28), 0 6px 14px -8px rgba(0,0,0,0.16);
  transition:transform 320ms var(--ease-out);
}
.portfolio-preview-bar{
  background:var(--cream-2);
  padding:0.5rem 0.7rem;
  display:flex;
  gap:0.32rem;
  border-bottom:1px solid var(--rule);
}
.portfolio-preview-bar span{
  width:8px; height:8px;
  border-radius:50%;
  background:var(--text-3);
  opacity:0.4;
}
.portfolio-preview-bar span:first-child{ background:var(--red); opacity:0.7; }
.portfolio-preview img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio: 1440 / 735;
  object-fit:cover;
  object-position:top center;
  filter: saturate(0.88) brightness(0.99);
  opacity: 0.96;
}
.portfolio-body{ padding:0.5rem 0.25rem 0.5rem 0.5rem; }
.portfolio-meta{ margin-bottom:1.25rem; }
.portfolio-meta .label{ color:var(--gold); margin-bottom:0.5rem; }
.portfolio-meta h3{
  font-family:var(--display);
  font-size:2rem;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--navy);
  line-height:1;
}
.portfolio-card p{
  font-size:0.92rem;
  color:var(--text-2);
  line-height:1.75;
  font-weight:300;
}
.portfolio-view-live{
  margin-top:1.4rem;
  font-size:0.78rem !important;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--red) !important;
  font-weight:500 !important;
}

/* ─────────────────────────────────────────────────────────
   REVEAL ON SCROLL
───────────────────────────────────────────────────────── */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity 800ms var(--ease-out), transform 800ms var(--ease-out);
}
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal-d1{ transition-delay:60ms; }
.reveal-d2{ transition-delay:120ms; }
.reveal-d3{ transition-delay:180ms; }
.reveal-d4{ transition-delay:240ms; }

/* ─────────────────────────────────────────────────────────
   SERVICE EXPANDABLE PANELS (services page)
───────────────────────────────────────────────────────── */
.service-panel{
  background:#fff;
  border:1px solid var(--rule);
  border-radius:4px;
  margin-bottom:0.75rem;
  overflow:hidden;
  transition:border-color 240ms var(--ease-out);
}
.service-panel.open{ border-color:var(--navy); }
.service-toggle{
  width:100%;
  padding:1.5rem 2rem;
  background:none;
  border:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
  text-align:left;
  transition:background 220ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine){
  .service-toggle:hover{ background:var(--cream); }
}
.service-toggle h3{
  font-family:var(--display);
  font-size:1.25rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--navy);
}
.service-toggle .icon{
  width:32px; height:32px;
  border-radius:50%;
  background:var(--cream);
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem;
  font-weight:300;
  color:var(--navy);
  flex-shrink:0;
  transition:background 280ms var(--ease-out), color 280ms var(--ease-out), transform 280ms var(--ease-out);
}
.service-panel.open .service-toggle .icon{
  background:var(--red);
  color:var(--cream);
  transform:rotate(45deg);
}
.service-body{
  max-height:0;
  overflow:hidden;
  transition:max-height 420ms var(--ease-out);
}
.service-panel.open .service-body{ max-height:1200px; }
.service-body-inner{
  padding:0 2rem 2rem;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2.5rem;
}
.service-body-inner > div:first-child p{
  font-size:0.94rem;
  color:var(--text-2);
  line-height:1.85;
  font-weight:300;
  margin-bottom:1rem;
}
.service-features{ display:flex; flex-direction:column; gap:1.25rem; }
.feature{
  padding:1rem 1.25rem;
  background:var(--cream);
  border-radius:3px;
}
.feature h4{
  font-size:0.86rem;
  font-weight:500;
  color:var(--navy);
  margin-bottom:0.35rem;
  letter-spacing:-0.005em;
}
.feature p{
  font-size:0.78rem;
  color:var(--text-2);
  line-height:1.6;
  font-weight:300;
  margin-bottom:0;
}

/* ─────────────────────────────────────────────────────────
   QUOTE PAGE BENEFITS LIST
───────────────────────────────────────────────────────── */
.benefit{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:1rem;
  padding:1rem 0;
  border-bottom:1px solid var(--rule);
}
.benefit:last-child{ border-bottom:none; }
.benefit-num{
  font-family:var(--serif);
  font-style:italic;
  font-size:1rem;
  color:var(--gold);
  font-feature-settings:'tnum';
  padding-top:0.15rem;
}
.benefit h4{
  font-family:var(--sans);
  font-size:0.9rem;
  font-weight:500;
  color:var(--navy);
  margin-bottom:0.35rem;
}
.benefit p{
  font-size:0.83rem;
  color:var(--text-2);
  line-height:1.65;
  font-weight:300;
}

/* ─────────────────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────────────────── */
@media (max-width: 980px){
  .why-grid{ grid-template-columns:1fr !important; }
  section{ padding:4rem 0; }
  .nav-links{ display:none; }
  .hamburger{ display:flex; }
  .hero{ padding:7rem 0 3rem; }
  .hero-grid,
  .split-grid,
  .page-hero-grid{
    grid-template-columns:1fr;
    gap:3rem;
  }
  .split-grid{ gap:3.5rem; }
  .cta-band-grid{ gap:2rem; }
  .cta-band-call{ align-items:flex-start; }
  .process{ grid-template-columns:1fr 1fr; gap:3rem 2rem; max-width:520px; }
  .process::before, .process-progress{ display:none; }
  .pricing{ grid-template-columns:1fr; }
  .pricing.pricing-trio{ gap:0.85rem; }
  .pricing.pricing-trio .price-card{ padding:1.35rem 1.1rem 1.3rem; }
  .pricing.pricing-trio .price-name{ font-size:1.15rem; margin-bottom:0.8rem; letter-spacing:0.03em; }
  .pricing.pricing-trio .price-amount{ font-size:2rem; }
  .pricing.pricing-trio .price-amount .sub{ font-size:0.7rem; }
  .pricing.pricing-trio .price-icon{ width:28px; height:28px; margin-bottom:0.85rem; }
  .pricing.pricing-trio .price-fineprint{ font-size:0.68rem; margin-bottom:1rem; }
  .pricing.pricing-trio .price-divider{ margin:0.85rem 0; }
  .pricing.pricing-trio .check-list{ margin-bottom:1.1rem; }
  .pricing.pricing-trio .check-list li{ font-size:0.72rem; padding:0.45rem 0 0.45rem 1.25rem; line-height:1.5; }
  .pricing.pricing-trio .check-list li::before{ top:0.7rem; width:7px; height:4px; }
  .pricing.pricing-trio .price-card .btn{ font-size:0.7rem; padding:0.7rem 0.8rem; }
  .pricing.pricing-trio .price-card.feature::before{ font-size:0.5rem; padding:0.22rem 0.5rem; top:-9px; left:0.9rem; }
  .stats-grid{ grid-template-columns:1fr 1fr; gap:2rem 0; }
  .stat:nth-child(2){ border-right:none; padding-right:0; }
  .stat:nth-child(3){ padding-left:0; border-top:1px solid var(--rule); padding-top:2rem; }
  .stat:nth-child(4){ padding-right:0; border-top:1px solid var(--rule); padding-top:2rem; }
  .foot-grid{ grid-template-columns:1fr 1fr; gap:2.5rem; }
  .foot-brand{ grid-column:span 2; }
  .portfolio-card{ grid-template-columns:1fr; gap:1.5rem; padding:1.25rem; }
  .portfolio-body{ padding:0.5rem 0.75rem 1rem; }
  .service-body-inner{ grid-template-columns:1fr; gap:1.5rem; }
  .form-row.split{ grid-template-columns:1fr; }
}
@media (max-width: 720px){
  .pricing.pricing-trio{ grid-template-columns:1fr; max-width:440px; margin:0 auto; gap:1.25rem; }
  .pricing.pricing-trio .price-card{ padding:1.75rem 1.5rem 1.6rem; }
  .pricing.pricing-trio .price-name{ font-size:1.5rem; margin-bottom:1rem; }
  .pricing.pricing-trio .price-amount{ font-size:2.6rem; }
  .pricing.pricing-trio .price-amount .sub{ font-size:0.85rem; }
  .pricing.pricing-trio .price-icon{ width:34px; height:34px; margin-bottom:1.1rem; }
  .pricing.pricing-trio .price-fineprint{ font-size:0.72rem; margin-bottom:1.25rem; }
  .pricing.pricing-trio .check-list li{ font-size:0.8rem; padding:0.55rem 0 0.55rem 1.45rem; }
  .pricing.pricing-trio .check-list li::before{ top:0.85rem; width:9px; height:5px; }
  .pricing.pricing-trio .price-card .btn{ font-size:0.78rem; padding:0.85rem 1rem; }
}
@media (max-width: 600px){
  .process{ grid-template-columns:1fr; }
  .stats-grid{ grid-template-columns:1fr; }
  .stat{ padding:1.2rem 0; border-right:none; border-bottom:1px solid var(--rule); }
  .stat:last-child{ border-bottom:none; padding-right:0; }
  .stat:nth-child(3), .stat:nth-child(4){ border-top:none; padding-top:1.2rem; }
  .foot-grid{ grid-template-columns:1fr; gap:2.5rem; }
  .foot-brand{ grid-column:span 1; }
  .hero-actions .btn{ flex:1; justify-content:center; }
  .form-shell{ padding:1.75rem 1.5rem; }
  .price-card{ padding:2rem 1.75rem; }
  .marquee-item{ font-size:1rem; }
}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
  .marquee-track{ animation:none; transform:translateX(0); }
  .reveal{ opacity:1; transform:none; }
  .hero-headline .line-inner{ transform:none; opacity:1; }
  .hero-eyebrow,
  .hero-meta,
  .serp-stage{ opacity:1; }
  .mockup-cycle-img{ opacity:0 !important; }
  .mockup-cycle-img:first-child{ opacity:1 !important; }
}

/* ─────────────────────────────────────────────────────────
   MOCKUP CALLOUT + PRICE ANCHOR (added)
───────────────────────────────────────────────────────── */
.mockup-callout{
  background:var(--navy);
  color:var(--cream);
  padding:5rem 0;
  position:relative;
  overflow:hidden;
}
.mockup-callout::before{
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:4px;
  background:var(--red);
}
.mockup-callout::after{
  content:'';
  position:absolute;
  top:-100px; right:-100px;
  width:400px; height:400px;
  background:radial-gradient(circle, rgba(191,54,37,0.15) 0%, transparent 70%);
  pointer-events:none;
}
.mockup-callout-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:4rem;
  align-items:center;
  position:relative;
  z-index:1;
}
.mockup-callout-headline{
  color:var(--cream);
  margin-bottom:1.5rem;
}
.mockup-callout-headline .red{ color:var(--red-2); }
.mockup-callout-sub{
  font-size:1.05rem;
  line-height:1.65;
  color:rgba(244, 239, 226, 0.85);
  margin-bottom:2rem;
  font-weight:300;
  max-width:560px;
}
.mockup-callout-cta{
  font-size:1rem;
  padding:1.05rem 1.85rem;
}
.mockup-callout-visual{ position:relative; }
.mockup-callout-frame{
  position:relative;
  width:100%;
  background:var(--cream);
  border-radius:8px;
  box-shadow:
    0 30px 60px -20px rgba(0,0,0,0.55),
    0 12px 24px -10px rgba(0,0,0,0.4);
  transform:rotate(-2deg);
  transition:transform 400ms var(--ease-out);
  overflow:hidden;
}
@media (hover: hover) and (pointer: fine){
  .mockup-callout-frame:hover{ transform:rotate(0); }
}
.mockup-frame-bar{
  background:var(--cream-3);
  padding:0.65rem 0.85rem;
  display:flex;
  gap:0.4rem;
  border-bottom:1px solid var(--rule);
}
.mockup-frame-bar span{
  width:10px; height:10px;
  border-radius:50%;
  background:var(--text-3);
  opacity:0.4;
}
.mockup-frame-bar span:first-child{ background:var(--red); opacity:0.7; }
.mockup-frame-body{
  padding:1.75rem 1.5rem 2.25rem;
  display:flex;
  flex-direction:column;
  gap:0.7rem;
}
.mockup-frame-line{
  height:10px;
  background:var(--cream-3);
  border-radius:2px;
}
.mockup-frame-line.w50{ width:50%; }
.mockup-frame-line.w60{ width:60%; }
.mockup-frame-line.w70{ width:70%; background:var(--navy); height:14px; }
.mockup-frame-line.w80{ width:80%; }
.mockup-frame-line.w90{ width:90%; }
.mockup-frame-block{
  height:90px;
  background:var(--cream-2);
  border-radius:3px;
  margin:0.5rem 0;
  position:relative;
  overflow:hidden;
}
.mockup-frame-block::before{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(135deg, var(--cream-2) 0%, var(--cream-3) 100%);
}
.mockup-frame-stamp{
  position:absolute;
  bottom:1.5rem; right:-0.5rem;
  background:var(--red);
  color:var(--cream);
  padding:0.5rem 1rem;
  font-family:var(--sans);
  font-size:0.7rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  font-weight:500;
  border-radius:3px;
  transform:rotate(8deg);
  box-shadow:0 4px 12px rgba(0,0,0,0.25);
  z-index:2;
}
.mockup-frame-cycle{
  position:relative;
  width:100%;
  aspect-ratio: 1440 / 735;
  background:var(--cream-2);
  overflow:hidden;
}
.mockup-cycle-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
  opacity:0;
  filter: saturate(0.88) brightness(0.99);
  animation: mockupCycle 16s infinite;
}
.mockup-cycle-img:nth-child(1){ animation-delay: 0s; }
.mockup-cycle-img:nth-child(2){ animation-delay: 4s; }
.mockup-cycle-img:nth-child(3){ animation-delay: 8s; }
.mockup-cycle-img:nth-child(4){ animation-delay: 12s; }
@keyframes mockupCycle{
  0%, 23%, 100% { opacity:0; }
  3%, 22%      { opacity:0.96; }
}

/* Price strikethrough anchor */
.price-anchor{
  font-family:var(--sans);
  font-size:1.1rem;
  font-weight:400;
  color:var(--text-3);
  margin-bottom:0.35rem;
  letter-spacing:0;
  line-height:1;
}
.price-anchor .strike{
  position:relative;
  display:inline-block;
  padding:0 0.1rem;
}
.price-anchor .strike::after{
  content:'';
  position:absolute;
  left:-2px; right:-2px;
  top:52%;
  height:1.5px;
  background:var(--red);
  transform:rotate(-6deg);
  transform-origin:center;
}
.price-anchor-mo{
  font-family:var(--sans);
  font-size:0.95rem;
  font-weight:400;
  color:var(--text-3);
  margin-top:0.5rem;
  margin-bottom:0;
  letter-spacing:0;
  line-height:1;
}
.price-anchor-mo .strike{
  position:relative;
  display:inline-block;
  padding:0 0.1rem;
}
.price-anchor-mo .strike::after{
  content:'';
  position:absolute;
  left:-2px; right:-2px;
  top:52%;
  height:1.5px;
  background:var(--red);
  transform:rotate(-6deg);
}
.price-intro{
  font-size:0.74rem;
  color:var(--red);
  font-weight:500;
  font-family:var(--sans);
  letter-spacing:0.04em;
  text-transform:uppercase;
  margin-bottom:0.5rem;
  margin-top:0.6rem;
}

@media (max-width: 900px){
  .mockup-callout{ padding:3.5rem 0; }
  .mockup-callout-grid{ grid-template-columns:1fr; gap:2.5rem; }
  .mockup-callout-visual{ width:100%; max-width:380px; margin:0 auto; justify-self:center; }
}
@media (prefers-reduced-motion: reduce){
  .mockup-callout-frame{ transform:none; }
}