/* Dele Details — shared stylesheet.
   Extracted from the single-page build 2026-08-27 when the nav moved to real URLs and the
   site became multi-page. One stylesheet for every page: a rule changed here changes
   everywhere, which is the whole point of it not being inline any more. */
/* Self-hosted 2026-10-01 from the exact Google Fonts css2 request the pages used:
   Archivo wdth,wght@125,900 · IBM Plex Sans 400/600/700 · JetBrains Mono 400/700.
   latin + latin-ext only; unicode-range means a browser fetches latin-ext only if a page needs it. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 900;
  font-stretch: 125%;
  font-display: swap;
  src: url(fonts/archivo-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 900;
  font-stretch: 125%;
  font-display: swap;
  src: url(fonts/archivo-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/jetbrains-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/jetbrains-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/jetbrains-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/jetbrains-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
    --black:#080807; --panel:#0f1113; --panel-2:#141719;
    --ink:#F5F1E8; --body:#cfd3d6; --muted:#8f9296;
    --gold:#E4C77E;        /* display + headline (12.1:1 on --black) */
    --gold-deep:#D6B568;   /* UI accent, buttons, labels (10.1:1) */
    --line:rgba(245,241,232,.13);
    --line-gold:rgba(228,199,126,.22);
    --display:'Archivo',system-ui,sans-serif;
    --sans:'IBM Plex Sans',system-ui,sans-serif;
    --mono:'JetBrains Mono',ui-monospace,monospace;
    --gutter:clamp(20px,4vw,60px);
    --ease:cubic-bezier(.16,1,.3,1);
    --radius-btn:8px;      /* controls, badges, chips */
    --radius-card:12px;    /* cards and panels */
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{background:var(--black);color:var(--ink);font-family:var(--sans);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  img{display:block;max-width:100%}
  a{color:inherit;text-decoration:none}

  /* Browser surfaces — these ship with defaults that belong to no design system. */
  ::selection{background:var(--gold-deep);color:#0a0a0a}
  html{scrollbar-color:var(--gold-deep) #101214;scrollbar-width:thin;caret-color:var(--gold-deep)}
  ::-webkit-scrollbar{width:11px;height:11px}
  ::-webkit-scrollbar-track{background:#101214}
  ::-webkit-scrollbar-thumb{background:#33383c;border:3px solid #101214}
  ::-webkit-scrollbar-thumb:hover{background:var(--gold-deep)}
  a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--gold);outline-offset:4px}

  /* Corners: rounded, adopted 2026-09-12 (owner Trent) — replaces the zero-radius rule. Two
     radii only; never a pill. */
  .pricing-card,.addon-item,.addon-note,.google-proof-bar,.qcard,.owner,.band-card,
  .feature-box,.contact-card,.dropdown-menu,.detail{border-radius:var(--radius-card)}
  .addon-price,.p-badge,.qinitial,.mobile-phone-link,.menu-toggle{border-radius:var(--radius-btn)}

  .wrap{max-width:1280px;margin:0 auto;padding:0 var(--gutter)}
  .dsp{font-family:var(--display);font-weight:900;font-stretch:expanded;text-transform:uppercase;letter-spacing:-.03em}
  .lab{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--gold-deep);text-transform:uppercase;display:inline-flex;align-items:flex-start;gap:8px}
  .lab::before{content:"";display:inline-block;width:6px;height:6px;background:var(--gold-deep);margin-top:.42em;flex:none}

  /* ── nav ─────────────────────────────────────────────────────────────── */
  header{position:fixed;top:0;left:0;right:0;z-index:40;background:rgba(8,8,7,.94);border-bottom:1px solid var(--line)}
  nav{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1280px;margin:0 auto;padding:14px var(--gutter)}
  .brand{display:inline-flex;align-items:center;min-height:44px}
  .brand img{height:38px;width:auto;display:block}
  .navlinks{display:flex;align-items:center;gap:clamp(18px,2.2vw,32px);font-family:var(--mono);font-size:.74rem;letter-spacing:.05em;color:#c2c6c9;text-transform:uppercase}
  .navlinks a{transition:color .2s ease;display:inline-flex;align-items:center;min-height:44px}
  .navlinks a:hover{color:var(--gold)}
  .navlinks a[aria-current="page"]{color:var(--gold)}

  /* Desktop dropdown (Flowbite hover pattern) */
  .nav-item{position:relative;display:flex;align-items:center}
  .dropdown-toggle{
    display:inline-flex;align-items:center;gap:6px;min-height:44px;
    background:none;border:none;padding:0;color:inherit;font:inherit;
    text-transform:inherit;letter-spacing:inherit;cursor:pointer;
    transition:color .2s ease;
  }
  .dropdown-toggle:hover,.has-dropdown:hover .dropdown-toggle,.has-dropdown.is-open .dropdown-toggle{color:var(--gold)}
  .dropdown-toggle:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(214,181,104,.5);border-radius:var(--radius-btn)}
  .dropdown-chevron{transition:transform .2s ease;stroke:currentColor;flex:none}
  .has-dropdown:hover .dropdown-chevron,.has-dropdown:focus-within .dropdown-chevron,.has-dropdown.is-open .dropdown-chevron{transform:rotate(180deg)}

  .dropdown-menu{
    position:absolute;top:calc(100% + 4px);left:0;min-width:240px;
    background:var(--panel);border:1px solid var(--line);
    border-radius:var(--radius-card);
    box-shadow:0 14px 34px rgba(0,0,0,.75);padding:8px;z-index:50;
    opacity:0;visibility:hidden;transform:translateY(6px);
    transition:opacity .15s ease,transform .15s ease,visibility .15s;
  }
  /* Invisible bridge to prevent pointer flicker when transitioning to menu */
  .dropdown-menu::before{content:"";position:absolute;top:-8px;left:0;right:0;height:8px}
  .has-dropdown:hover .dropdown-menu,.has-dropdown:focus-within .dropdown-menu,.has-dropdown.is-open .dropdown-menu{
    opacity:1;visibility:visible;transform:translateY(0);
  }
  .dropdown-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
  .dropdown-list li{list-style:none;margin:0;padding:0}
  .navlinks .dropdown-link,.navlinks .dropdown-item{
    display:flex;align-items:center;width:100%;
    padding:9px 12px;min-height:40px;
    border-radius:var(--radius-btn);
    color:var(--body);font-family:var(--sans);
    font-size:.84rem;font-weight:600;line-height:1.25rem;
    text-transform:none;letter-spacing:normal;white-space:nowrap;
    transition:background-color .15s ease,color .15s ease;
  }
  .navlinks .dropdown-link:hover,.navlinks .dropdown-item:hover{
    background:#1a1e22;color:var(--ink);
  }
  .navlinks .dropdown-link[aria-current="page"],.navlinks .dropdown-item[aria-current="page"]{
    background:#24292f;color:var(--gold);
  }

  /* Nav action block (Book button + hamburger) */
  .nav-actions{display:flex;align-items:center;gap:10px}
  .menu-toggle{display:none}

  /* Flowbite-style: sentence case, flat fill, hover dims to 90%, focus is a 4px ring. */
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    background:var(--gold-deep);color:#0a0a0a;font-weight:600;font-size:.875rem;line-height:1.25rem;
    padding:10px 16px;min-height:44px;
    border:1px solid transparent;border-radius:var(--radius-btn);
    transition:background-color .15s ease,box-shadow .15s ease;
  }
  .btn svg{width:16px;height:16px;flex:none}
  .btn:hover{background:color-mix(in srgb,var(--gold-deep) 90%,transparent)}
  .btn:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(214,181,104,.5)}
  /* Secondary: solid dark fill, one step lighter than the panel so it reads on the ground. */
  .btn-ghost{background:#1a1e22;color:var(--ink)}
  .btn-ghost:hover{background:#24292F}
  .btn-ghost:focus-visible{box-shadow:0 0 0 4px rgba(36,41,47,.55)}

  /* Mobile menu drawer */
  .mobile-drawer{
    position:absolute;top:100%;left:0;right:0;
    background:rgba(15,17,19,.98);
    border-bottom:1px solid var(--line);
    padding:18px var(--gutter) 24px;
    display:flex;flex-direction:column;gap:16px;
    max-height:calc(100vh - 70px);overflow-y:auto;
    box-shadow:0 24px 48px rgba(0,0,0,.85);
  }
  .mobile-drawer[hidden]{display:none}
  .mobile-group{display:flex;flex-direction:column;gap:4px}
  .mobile-group-label{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:var(--gold-deep);text-transform:uppercase;padding:4px 0}
  .mobile-link{
    display:flex;align-items:center;justify-content:space-between;
    padding:10px 0;min-height:44px;color:var(--ink);
    font-family:var(--display);font-size:1.05rem;font-weight:900;
    text-transform:uppercase;letter-spacing:-.01em;
    border-bottom:1px solid rgba(245,241,232,.06);
    transition:color .15s ease;
  }
  .mobile-link:hover,.mobile-link[aria-current="page"]{color:var(--gold)}
  .mobile-sublink{
    display:flex;flex-direction:column;gap:2px;
    padding:10px 0 10px 14px;min-height:44px;color:var(--ink);
    border-left:2px solid var(--line);margin-left:4px;
    border-bottom:1px solid rgba(245,241,232,.04);
    transition:border-color .15s ease;
  }
  .mobile-sublink:hover,.mobile-sublink[aria-current="page"]{border-left-color:var(--gold)}
  .mobile-sublink-title{font-family:var(--display);font-size:.92rem;font-weight:900;color:var(--ink);transition:color .15s ease}
  .mobile-sublink:hover .mobile-sublink-title,.mobile-sublink[aria-current="page"] .mobile-sublink-title{color:var(--gold)}
  .mobile-sublink-desc{font-family:var(--mono);font-size:.7rem;color:var(--muted);letter-spacing:.02em}
  .mobile-actions{display:flex;flex-direction:column;gap:10px;padding-top:6px}
  .mobile-phone-link{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    min-height:44px;font-family:var(--mono);font-size:.78rem;letter-spacing:.04em;
    color:var(--body);border:1px solid var(--line);text-transform:uppercase;
    transition:border-color .2s ease,color .2s ease;
  }
  .mobile-phone-link:hover{border-color:var(--gold-deep);color:var(--gold)}

  @media(max-width:980px){
    .navlinks{display:none}
    nav{padding:11px 20px}
    nav .nav-book-btn{padding:10px 14px;white-space:nowrap}
    .brand img{height:31px}
    .menu-toggle{
      display:inline-flex;flex-direction:column;justify-content:center;align-items:center;
      gap:5px;width:44px;height:44px;background:transparent;
      border:1px solid var(--line);color:var(--ink);cursor:pointer;padding:0;
      transition:border-color .2s ease,color .2s ease;
    }
    .menu-toggle:hover{border-color:var(--gold-deep);color:var(--gold)}
    .menu-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
    .menu-bar{display:block;width:20px;height:2px;background:currentColor;transition:transform .2s ease,opacity .2s ease}
    .menu-toggle[aria-expanded="true"] .menu-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
    .menu-toggle[aria-expanded="true"] .menu-bar:nth-child(2){opacity:0}
    .menu-toggle[aria-expanded="true"] .menu-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  }

  /* ── hero ─────────────────────────────────────────────────────────────
     Still photograph with progressive scroll enhancement, modeled on linkdseo.com.
     Playback lives in an ordinary, user-controlled player outside this scene. */
  .scroll-stage{position:relative;min-height:100svh;padding:0;background:var(--black)}
  .hero{
    isolation:isolate;position:relative;min-height:100svh;overflow:hidden;
    display:flex;flex-direction:column;justify-content:center;
    padding:clamp(96px,14vh,150px) 0 clamp(64px,10vh,104px);
  }

  .hero-media{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
  .hero-media img,
  .hero-media video{
    position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;object-position:center center;
  }
  /* Transparent until frames are actually playing, so the <img> still shows through instead
     of an empty or black video box while the clip downloads (index.html adds .is-playing). */
  .hero-media video{z-index:1;opacity:0}
  .hero-media video.is-playing{opacity:1}
  /* Left-weighted shade — the copy is left-aligned, so that is the edge that has to hold
     contrast, not the centre. */
  .hero-shade{
    position:absolute;inset:0;z-index:1;pointer-events:none;
    background:
      linear-gradient(90deg,rgba(8,8,7,.86) 0%,rgba(8,8,7,.76) 42%,rgba(8,8,7,.56) 72%,rgba(8,8,7,.48) 100%),
      linear-gradient(180deg,rgba(8,8,7,.55) 0%,rgba(8,8,7,.25) 40%,rgba(8,8,7,.65) 100%);
  }
  /* Two hairline rules bracket the pitch — eyebrow, headline, actions — and stop short of
     the revealed detail boxes, so the group reads as "the offer" and the boxes as "the
     proof that arrives". This replaces the old .hero-frame, a full rectangle inset 78px
     from the top: the fixed header is 79px tall, so its top edge landed underneath the bar.
     It also aligns to the copy column instead of the viewport gutter, which is what made it
     read wider than the content it was supposed to contain. */
  .hero-rule{display:block;height:1px;margin:0 0 22px;background:rgba(228,199,126,.3);width:min(100%,600px)}
  /* Carries contrast locally so the shade above does not have to bury the photograph to
     hold it. Measured worst case behind the copy is still checked on the background alone —
     this is margin, not a substitute for it. */
  .hero-c .dsp,.hero-c .lab{text-shadow:0 2px 28px rgba(8,8,7,.9),0 1px 3px rgba(8,8,7,.6)}
  .hero-rule--end{margin:26px 0 0}
  .hero-rule--end::after{content:"";display:block;height:1px;width:100%;background:var(--gold)}

  .hero-c{position:relative;z-index:5;width:100%}
  .hero-c::before{
    content:"";position:absolute;z-index:-1;
    display:none;
  }
  .hero-c .lab{margin-bottom:clamp(14px,2vh,22px)}
  .hero h1{
    position:relative;
    font-size:clamp(2.7rem,6.9vw,5.6rem);line-height:.9;max-width:14ch;
    color:var(--gold);text-wrap:balance;
    text-shadow:0 14px 46px rgba(0,0,0,.6);
  }
  /* The bright overlay sweeps with the desktop hero timeline; the base stays readable. */
  .hero h1 .ht-shine{
    display:none;position:absolute;inset:0;color:#FFF3D6;pointer-events:none;
    -webkit-mask-image:linear-gradient(100deg,transparent 40%,#000 50%,transparent 60%);
            mask-image:linear-gradient(100deg,transparent 40%,#000 50%,transparent 60%);
    -webkit-mask-size:300% 100%;mask-size:300% 100%;
    -webkit-mask-position:0 0;mask-position:0 0;
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  }
  @keyframes hero-shine{
    from{-webkit-mask-position:0 0;mask-position:0 0}
    to{-webkit-mask-position:100% 0;mask-position:100% 0}
  }
  .hero-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:clamp(26px,4vh,40px)}

  /* Readable base state; the desktop scroll scene progressively reveals these below. */
  .hero-details{
    display:flex;flex-direction:column;gap:10px;
    margin-top:clamp(18px,2.4vh,28px);max-width:600px;
  }
  .detail{
    display:flex;align-items:center;gap:12px;
    padding:15px 20px;min-height:56px;
    background:rgba(12,12,11,.9);
    border:1px solid var(--line-gold);
    font-size:.98rem;line-height:1.4;color:var(--ink);
    opacity:1;transform:none;filter:none;
  }
  .detail-ico{width:20px;height:20px;flex:none;color:var(--gold-deep)}
  .detail-ico svg{width:100%;height:100%;display:block}
  .detail strong{font-weight:700;color:#fff}
  /* Each row is a statement plus a right-aligned qualifier — the shape the Google row already
     used for "Read them →". This is what keeps all three on one line: the longest sentence
     needed 641px against a 600px column and wrapped alone, which read as an accident sitting
     next to two single-line rows. The lead is nowrap so it can never re-wrap and bring the
     ragged rhythm back. */
  .d-tail{
    margin-left:auto;padding-left:14px;font-family:var(--sans);font-size:.8rem;
    letter-spacing:normal;color:var(--muted);white-space:nowrap;
  }
  .detail > span:not(.detail-ico):not(.d-tail):not(.go){white-space:nowrap}
  /* Below 820px nothing fits on one line at any sane size, so the qualifier drops to its own
     row indented past the icon, and the lead is allowed to wrap again. */
  @media(max-width:820px){
    .detail{flex-wrap:wrap}
    .detail > span:not(.detail-ico):not(.go){white-space:normal}
    .d-tail{flex-basis:100%;margin:4px 0 0 32px;padding-left:0}
  }
  a.detail{transition:border-color .2s ease,background .2s ease}
  a.detail:hover{border-color:var(--gold);background:rgba(20,19,16,.75)}
  a.detail .go{margin-left:auto;font-family:var(--mono);font-size:.72rem;color:var(--gold-deep);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}

  .scroll-cue{
    position:absolute;left:var(--gutter);bottom:44px;z-index:5;
    display:flex;align-items:center;gap:12px;
    font-family:var(--sans);font-size:.8rem;letter-spacing:.02em;color:rgba(245,241,232,.82);
    opacity:1;
  }
  .scroll-cue i{display:block;width:54px;height:1px;background:rgba(228,199,126,.35);position:relative;overflow:hidden}
  .scroll-cue i::after{content:"";position:absolute;inset:0;background:var(--gold);transform:scaleX(1);transform-origin:left}

  @media(max-width:820px){
    .hero{padding:104px 0 92px}
    .hero-rule{margin-bottom:16px}
    .hero-rule--end{margin-top:20px}
    .hero-media img,.hero-media video{object-position:58% center}
    /* Keep the mobile eyebrow above the 11px floor while allowing it to wrap cleanly. */
    .hero-c .lab{font-size:.7rem;letter-spacing:.04em;margin-bottom:18px}
    .hero h1{font-size:clamp(2.5rem,11.5vw,4rem);max-width:11ch}
    .hero-actions .btn{flex:1 1 auto;min-width:min(100%,240px)}
    .detail{padding:14px 16px;font-size:.92rem;gap:12px}
    .scroll-cue{bottom:32px;left:20px}
  }

  /* Same architecture as linkdseo's panel tracks: the track moves, the panel sticks,
     and a native timeline reveals small details. No video, scroll handler, or full-frame
     transform participates. Short and narrow viewports retain the complete base layout. */
  @keyframes detail-arrive{
    0%{opacity:0;visibility:hidden;transform:translateY(18px)}
    1%{visibility:visible}
    100%{opacity:1;visibility:visible;transform:none}
  }
  @supports (animation-timeline:view()) and (animation-range:contain 0% contain 100%){
    @media(min-width:1100px) and (min-height:850px) and (prefers-reduced-motion:no-preference){
      .js .scroll-stage{height:160svh;view-timeline:--hero-scene block;view-timeline-inset:0}
      .js .hero{position:sticky;top:0;height:100svh;min-height:0;padding:100px 0 72px}
      .js .hero h1 .ht-shine{
        display:block;
        animation:hero-shine linear both;
        animation-timeline:--hero-scene;
        animation-range:contain 8% contain 70%;
      }
      .js .hero-details .detail{
        animation:detail-arrive linear both;
        animation-timeline:--hero-scene;
        animation-range:contain 0% contain 30%;
      }
      .js .hero-details .detail:nth-child(2){animation-range:contain 22% contain 55%}
      .js .hero-details .detail:nth-child(3){animation-range:contain 47% contain 82%}
    }
  }

  /* ── ticker tape ──────────────────────────────────────────────────────
     Its own band across the top of the page body, per the requested flow — no longer
     parked inside the hero. */
  .ticker{
    border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    background:#0c0e0f;overflow:hidden;padding:15px 0;position:relative;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
            mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  }
  .ticker-track{display:flex;width:max-content;animation:marquee 44s linear infinite}
  .ticker-group{display:flex;flex:none;align-items:center;justify-content:space-between;min-width:100vw}
  .ticker-group span{
    font-family:var(--sans);font-size:1rem;font-weight:600;letter-spacing:.02em;color:#b6babd;
    padding:0 26px;white-space:nowrap;
  }
  .ticker-group span b{color:var(--gold-deep);font-weight:700}
  .ticker-group i{width:5px;height:5px;background:var(--line-gold);flex:none;display:block}
  @keyframes marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

  /* ── sections ─────────────────────────────────────────────────────────── */
  section{padding:clamp(72px,9vw,116px) 0}
  .shead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:46px;border-bottom:1px solid var(--line);padding-bottom:22px}
  .shead h2{font-size:clamp(1.9rem,4.2vw,3rem);line-height:1}
  .shead p{color:var(--muted);font-size:1rem;max-width:56ch;margin-top:12px}
  /* Kept on one line: wrapped, the label's leading square detaches from its own text. */
  .shead .lab{white-space:nowrap}
  @media(max-width:760px){.shead{flex-direction:column;align-items:flex-start;gap:14px}}

  /* service packages */
  #services .wrap, #packages .wrap{max-width:1440px}
  .pricing-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
  .pricing-grid.memberships{grid-template-columns:repeat(2,minmax(0,300px))}
  @media(max-width:1200px){
    .pricing-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px}
    .pricing-card{min-width:268px;flex:0 0 268px;scroll-snap-align:start}
  }
  .pricing-card{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);padding:24px 18px;transition:border-color .3s ease,transform .3s var(--ease),box-shadow .3s ease}
  .pricing-card:hover{border-color:var(--line-gold);transform:translateY(-4px);box-shadow:0 18px 46px rgba(0,0,0,.6)}
  .pricing-card.featured{border-color:var(--gold-deep);background:linear-gradient(180deg,rgba(214,181,104,.07) 0%,var(--panel) 42%);box-shadow:0 12px 32px rgba(0,0,0,.48)}
  .pricing-badge-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:16px;min-height:26px}
  .p-badge{font-family:var(--mono);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:5px 9px;background:rgba(245,241,232,.07);color:#e2e5e8;border:1px solid var(--line)}
  .p-badge.popular{background:var(--gold-deep);color:#0a0a0a;border-color:var(--gold-deep)}
  /* No nowrap: a nowrap title sets each 1fr track's min-content floor to the full title
     width, which is what pushed V3.1's grid ~400px past the viewport. Let titles wrap. */
  .pricing-title{font-family:var(--display);font-size:1.1rem;font-weight:900;font-stretch:expanded;text-transform:uppercase;letter-spacing:-.01em;line-height:1.05;text-wrap:balance;min-height:2.4em;display:flex;align-items:flex-end;margin:0}
  .pricing-price{display:flex;align-items:baseline;gap:5px;margin:14px 0 6px}
  .pricing-price .amount{font-family:var(--display);font-stretch:expanded;font-weight:900;font-size:2.1rem;line-height:1;color:#fff}
  .pricing-price .sub{font-family:var(--mono);font-size:.7rem;color:var(--muted);text-transform:uppercase}
  .pricing-desc{color:#b3b8bc;font-size:.84rem;line-height:1.45;min-height:78px;margin-bottom:16px}
  .pricing-divider{height:1px;background:var(--line);margin:14px 0 18px}
  .pricing-features{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:24px;flex:1}
  .pricing-features li{display:flex;align-items:flex-start;gap:9px;font-size:.82rem;color:#d2d6d9;line-height:1.35}
  .pricing-features svg{width:15px;height:15px;color:var(--gold-deep);flex:none;margin-top:2px}
  .pricing-card .btn{width:100%;margin-top:auto}
  .pricing-hint{display:none}
  @media(max-width:1200px){.pricing-hint{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-top:14px}}
  .pricing-hint b{color:var(--gold-deep);font-weight:700}

  /* on-demand services */
  .ondemand{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .addons-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  @media(max-width:820px){.addons-grid{grid-template-columns:1fr}}
  .addon-item{display:flex;align-items:center;justify-content:space-between;gap:20px;background:var(--black);border:1px solid var(--line);padding:26px 28px;transition:border-color .25s ease}
  .addon-item:hover{border-color:var(--line-gold)}
  .addon-info strong{display:block;font-size:1.06rem;font-weight:700;margin-bottom:5px}
  .addon-info span{color:var(--muted);font-size:.88rem;line-height:1.45;display:block;max-width:44ch}
  .addon-price{font-family:var(--mono);font-weight:700;font-size:1.35rem;color:var(--gold-deep);border:1px solid var(--line-gold);background:rgba(214,181,104,.08);padding:9px 16px;white-space:nowrap;flex:none}
  .addon-note{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:14px;border:1px solid var(--line);padding:22px 28px;background:var(--black)}
  .addon-note p{color:var(--muted);font-size:.94rem;max-width:52ch}
  .addon-note strong{color:var(--ink);font-weight:700}

  /* google reviews */
  .google-proof-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:22px;background:var(--panel);border:1px solid var(--line);padding:28px 34px;margin-bottom:44px;transition:border-color .25s ease}
  .google-proof-bar:hover{border-color:var(--line-gold)}
  .g-meta{display:flex;align-items:center;gap:18px;min-height:44px}
  .g-score{display:flex;align-items:center;gap:12px}
  .g-count{font-family:var(--display);font-weight:900;font-stretch:expanded;font-size:2.3rem;line-height:1;letter-spacing:-.02em;transition:color .2s ease}
  .google-proof-bar:hover .g-count{color:var(--gold)}
  .g-stars-wrap{display:flex;flex-direction:column}
  .g-stars-wrap .stars{color:#FBBC05;font-size:1.05rem;letter-spacing:2px}
  .g-stars-wrap .label{font-family:var(--mono);font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-top:3px}
  .g-read{font-family:var(--mono);color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.07em}
  .qgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
  @media(max-width:820px){.qgrid{grid-template-columns:1fr}}
  .qcard{background:var(--panel);border:1px solid var(--line);padding:28px;display:flex;flex-direction:column;transition:border-color .25s ease}
  .qcard:hover{border-color:var(--line-gold)}
  .qhead{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}
  .qavatar{display:flex;align-items:center;gap:11px}
  .qinitial{width:38px;height:38px;background:rgba(214,181,104,.14);color:var(--gold-deep);font-weight:700;font-size:.9rem;display:flex;align-items:center;justify-content:center;border:1px solid var(--line-gold);flex:none}
  .qauthor{font-weight:700;font-size:.95rem}
  .qsource{font-family:var(--mono);font-size:.72rem;color:var(--muted);display:flex;align-items:center;gap:5px;margin-top:2px}
  .qcard p{font-size:1.02rem;color:#e6e8ea;line-height:1.55}
  .qstars{color:#FBBC05;font-size:.86rem;letter-spacing:1px;flex:none}

  /* owner */
  .owner{display:grid;grid-template-columns:1fr 1.1fr;align-items:stretch;border:1px solid var(--line);overflow:hidden;background:var(--panel)}
  .owner img{width:100%;height:100%;min-height:440px;object-fit:cover;filter:brightness(.84)}
  .owner-c{padding:clamp(34px,4.5vw,60px);display:flex;flex-direction:column;justify-content:center}
  .owner-c h2{font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1.02;margin:16px 0 20px}
  .owner-c p{color:#c6cacd;margin-bottom:14px;max-width:48ch;font-size:1.02rem}
  .owner-c .sig{color:var(--muted);font-family:var(--mono);font-size:.8rem;text-transform:uppercase;letter-spacing:.06em}
  @media(max-width:820px){.owner{grid-template-columns:1fr}.owner img{min-height:280px}}

  /* closing band */
  .band-card{background:linear-gradient(180deg,var(--panel) 0%,rgba(15,17,19,.98) 100%);border:1px solid var(--line);padding:clamp(56px,8vw,96px) clamp(24px,4vw,48px);text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.5);transition:border-color .3s ease}
  .band-card:hover{border-color:var(--line-gold)}
  .band-card h2{font-size:clamp(2.2rem,5.6vw,4.4rem);line-height:.96;margin:20px 0 22px;color:var(--gold)}
  .band-card p{color:var(--muted);font-size:1.1rem;max-width:56ch;margin:0 auto 34px;line-height:1.6}
  .band-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

  /* ── subpage layout ─────────────────────────────────────────────────── */
  .page-hero{padding:clamp(110px,13vw,160px) 0 clamp(36px,5vw,56px);border-bottom:1px solid var(--line);position:relative;background:radial-gradient(ellipse 80% 50% at 50% -20%,rgba(214,181,104,.08),transparent 70%)}
  .page-hero .dsp{font-size:clamp(2.4rem,5.5vw,4.4rem);line-height:.94;margin:16px 0 20px}
  .page-lead{color:var(--body);font-size:clamp(1.02rem,1.4vw,1.18rem);max-width:64ch;line-height:1.6}
  .page-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
  .content-section{padding:clamp(56px,7vw,90px) 0;border-bottom:1px solid var(--line)}
  .content-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
  .prose h2{font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.05;margin-bottom:16px;color:var(--ink)}
  .prose p{color:var(--body);line-height:1.65;margin-bottom:18px}
  .prose ul{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-direction:column;gap:12px}
  /* Not flex: a flex li splits "<strong>Town</strong> — text" into side-by-side columns, and a
     long description squeezes the town name onto two lines. Inline flow + absolute bullet. */
  .prose li{position:relative;padding-left:16px;color:var(--body);line-height:1.5}
  .prose li::before{content:"";position:absolute;left:0;top:.5em;width:6px;height:6px;background:var(--gold-deep)}
  .feature-box{background:var(--panel);border:1px solid var(--line);padding:24px 20px}
  .feature-box h3{font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;color:var(--gold-deep);text-transform:uppercase;margin-bottom:10px}
  .feature-box p{color:var(--body);font-size:.92rem;line-height:1.55;margin:0}
  .contact-card{background:var(--panel);border:1px solid var(--line);padding:32px 28px}
  .contact-card h3{font-family:var(--display);font-size:1.4rem;font-weight:900;margin-bottom:12px;color:var(--gold)}
  @media(max-width:820px){.content-grid{grid-template-columns:1fr}}

  /* footer */
  footer{border-top:1px solid var(--line);padding:60px 0 36px}
  .fgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px;margin-bottom:40px}
  .fgrid h2{font-weight:700;font-family:var(--mono);font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:12px}
  .fgrid p{color:var(--muted);font-size:.9rem;margin-bottom:8px}
  .fgrid a{display:flex;align-items:center;min-height:44px;color:var(--muted);font-size:.9rem;transition:color .2s ease}
  .fgrid a:hover{color:var(--ink)}
  .frating .stars{color:#FBBC05;letter-spacing:2px;margin-right:10px}
  .fbrand img{height:96px;width:96px;display:block}
  .fbot{display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);color:var(--muted);font-size:.72rem;border-top:1px solid var(--line);padding-top:20px;text-transform:uppercase;letter-spacing:.05em}
  @media(max-width:820px){.fgrid{grid-template-columns:1fr 1fr}.fbot{flex-direction:column}}

  /* Section reveals stay deliberately quiet — the hero is this page's one authored
     motion moment, and a second full-travel entrance on every band competes with it.
     Opt-in via .js so the page is complete without JavaScript. */
  .js .reveal{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
  .js .reveal.in{opacity:1;transform:none}
  /* Below 1200px the pricing grid becomes a horizontal carousel, so cards 3–5 sit outside
     the viewport horizontally and their IntersectionObserver never fires — they would stay
     at opacity 0 until swiped into view. Ship them visible; the row is its own reveal. */
  @media(max-width:1200px){.js .pricing-card.reveal{opacity:1;transform:none;transition:none}}

  @media(prefers-reduced-motion:reduce){
    .hero h1 .ht-shine{display:none;animation:none}
    html{scroll-behavior:auto}
    .hero{position:relative}
    .hero-media img,.hero-media video,.detail,.hero h1{will-change:auto;transition:none}
    .hero-media video{display:none}
    .ticker-track{animation:none;width:100%}
    .ticker-group:nth-child(2){display:none}
    .ticker-group:first-child{flex-wrap:wrap;justify-content:center;width:100%}
    .scroll-cue{display:none}
    .js .reveal{opacity:1;transform:none;transition:none}
    .pricing-card:hover{transform:none}
  }

/* Make in-paragraph links recognizable without relying on color. */
.prose p a:not(.btn){text-decoration:underline;text-underline-offset:.2em}