/* ============================================================
   Carroll Baker — carrollbaker.com
   Built 2026-08-09. Plain HTML and CSS, no frameworks.

   NOTHING HERE LOADS FROM ANOTHER WEBSITE. No Google Fonts,
   no jQuery, no Bootstrap. That is deliberate: the site cannot
   break because someone else's server went down, and it loads
   fast on a phone on a school car park wifi.

   Colors are Carroll's real brand, measured off his logo:
   red #E0121F, gold #E3BC3B, charcoal navy #292F3D.
   ============================================================ */

:root{
  --red:#E0121F;
  --red-dark:#B60D18;
  --gold:#E3BC3B;
  --navy:#292F3D;
  --black:#1C1A1C;
  --ink:#2A2A2E;
  --muted:#5C5C66;
  --line:#E2E0DC;
  --cream:#FAF9F6;
  --white:#FFFFFF;

  /* No webfonts on purpose. These stacks look right on Windows,
     Mac, iPhone and Android without downloading anything. */
  --display:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --wrap:1140px;
  --shadow-sm:0 1px 3px rgba(20,18,20,.08),0 6px 16px -8px rgba(20,18,20,.18);
  --shadow-md:0 2px 6px rgba(20,18,20,.10),0 18px 40px -20px rgba(20,18,20,.35);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--red);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

h1,h2,h3{font-family:var(--display);line-height:1.15;margin:0 0 .5em;letter-spacing:-.02em}
h1{font-size:clamp(2.1rem,5.2vw,3.6rem);font-weight:800}
h2{font-size:clamp(1.6rem,3.4vw,2.4rem);font-weight:800}
h3{font-size:1.18rem;font-weight:700;letter-spacing:-.01em}
p{margin:0 0 1.1em}
.lede{font-size:clamp(1.05rem,1.9vw,1.28rem);color:var(--muted);line-height:1.6}

/* ---------- skip link (accessibility) ---------- */
.skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:var(--black);
  padding:12px 20px;font-weight:700;z-index:200}
.skip:focus{left:12px;top:12px}

/* ============================================================
   HEADER
   Sticky. Shrinks slightly once you scroll, which is the small
   touch that makes a site feel built rather than assembled.
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:100;background:var(--white);
  border-bottom:1px solid var(--line);
  transition:box-shadow .25s ease,padding .25s ease;
}
.site-header.scrolled{box-shadow:var(--shadow-sm)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:14px 0;transition:padding .25s ease}
.site-header.scrolled .header-inner{padding:8px 0}

.brand{display:flex;align-items:center;gap:12px;flex:none}
.brand img{height:52px;width:auto;transition:height .25s ease}
.site-header.scrolled .brand img{height:42px}
/* Fallback wordmark, used only until the real logo file is dropped in */
.brand-text{font-family:var(--display);font-weight:800;font-size:1.35rem;
  letter-spacing:-.02em;color:var(--black);line-height:1}
.brand-text span{color:var(--red)}

.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:6px;
  padding:9px 12px;cursor:pointer;font:inherit;font-weight:600;color:var(--ink)}

.nav{display:flex;align-items:center;gap:26px}
.nav a{color:var(--ink);font-weight:600;font-size:.95rem;text-decoration:none;
  position:relative;padding:4px 0;white-space:nowrap}
/* Underline that grows out from the left on hover */
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--red);transition:width .22s ease}
.nav a:hover::after,.nav a[aria-current="page"]::after{width:100%}
.nav a[aria-current="page"]{color:var(--red)}

.nav-phone{font-weight:800;color:var(--black) !important;font-size:1rem}
.nav-phone::after{display:none}
.nav-cta{background:var(--red);color:#fff !important;padding:11px 20px;border-radius:4px;
  font-weight:700;transition:background .2s ease,transform .15s ease,box-shadow .2s ease}
.nav-cta:hover{background:var(--red-dark);text-decoration:none;transform:translateY(-1px);
  box-shadow:0 6px 18px -6px rgba(224,18,31,.55)}
.nav-cta::after{display:none}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;background:var(--black);color:#fff;overflow:hidden}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 28%;
  opacity:.92;transform:scale(1.06);animation:heroDrift 18s ease-out forwards}
@keyframes heroDrift{to{transform:scale(1)}}
/* Shade only where the words are, not the whole photograph.
   The text sits on the left, so the heavy end of the gradient is on the left
   and the right side of the picture is left almost untouched. A second, much
   gentler pass darkens the very bottom so the buttons stay readable. */
.hero::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,
    rgba(18,16,18,.82) 0%,
    rgba(18,16,18,.62) 34%,
    rgba(18,16,18,.22) 66%,
    rgba(18,16,18,.06) 100%),
  linear-gradient(180deg,
    rgba(18,16,18,.24) 0%,
    rgba(18,16,18,.02) 42%,
    rgba(18,16,18,.44) 100%)}
.hero-inner{position:relative;z-index:2;padding:clamp(72px,12vw,148px) 0 clamp(64px,10vw,120px);
  max-width:820px}
/* Belt and braces: a soft shadow on the type means the wash above can stay
   light without the headline ever getting lost against a bright patch. */
.hero h1{color:#fff;margin-bottom:.35em;text-shadow:0 2px 18px rgba(0,0,0,.75),0 1px 3px rgba(0,0,0,.6)}
.hero h1 .accent{color:var(--gold);display:block}
.hero .lede{color:rgba(255,255,255,.94);font-size:clamp(1.08rem,2vw,1.35rem);max-width:640px;
  text-shadow:0 1px 12px rgba(0,0,0,.8),0 1px 3px rgba(0,0,0,.55)}

/* On a phone the text runs the full width, so a left-to-right gradient would
   leave words sitting on a bright edge. Go back to an even wash there. */
@media(max-width:760px){
  .hero::after{background:linear-gradient(180deg,
    rgba(18,16,18,.62) 0%,rgba(18,16,18,.55) 45%,rgba(18,16,18,.78) 100%)}
}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

.btn{display:inline-block;font-weight:700;font-size:1.02rem;padding:16px 32px;border-radius:4px;
  text-decoration:none;transition:transform .16s ease,box-shadow .2s ease,background .2s ease;
  border:2px solid transparent;cursor:pointer;font-family:var(--body)}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn-primary{background:var(--red);color:#fff}
.btn-primary:hover{background:var(--red-dark);box-shadow:0 10px 26px -8px rgba(224,18,31,.6)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn-gold{background:var(--gold);color:var(--black)}
.btn-gold:hover{box-shadow:0 10px 26px -8px rgba(227,188,59,.6)}

/* ============================================================
   MARQUEE BULB STRIP — the one piece of pure theater.
   A row of glowing bulbs, drawn in CSS, no image needed.
   ============================================================ */
.bulbs{height:12px;background-image:radial-gradient(circle,var(--gold) 0 2.5px,transparent 3px);
  background-size:28px 12px;background-position:center;opacity:.9}
@media (prefers-reduced-motion:no-preference){
  .bulbs{animation:bulbGlow 2.6s steps(2) infinite}
}
@keyframes bulbGlow{0%,100%{opacity:.9}50%{opacity:.38}}

/* ============================================================
   SECTIONS
   ============================================================ */
.section{padding:clamp(56px,8vw,96px) 0}
.section-tight{padding:clamp(40px,6vw,64px) 0}
.section-cream{background:var(--cream)}
.section-dark{background:var(--black);color:#fff}
.section-dark h2{color:#fff}
.section-dark p{color:rgba(255,255,255,.8)}
.section-navy{background:var(--navy);color:#fff}
.section-navy h2{color:#fff}

.eyebrow{display:block;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:800;color:var(--red);margin-bottom:12px}
.section-dark .eyebrow,.section-navy .eyebrow{color:var(--gold)}
.section-head{max-width:760px;margin-bottom:44px}
.center{text-align:center}
.center .section-head{margin-left:auto;margin-right:auto}

/* ---------- credentials bar with counting numbers ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:32px;
  text-align:center}
.stat-num{font-family:var(--display);font-size:clamp(2.2rem,4.6vw,3.2rem);font-weight:800;
  color:var(--gold);line-height:1;letter-spacing:-.03em}
.stat-label{font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:rgba(255,255,255,.72);margin-top:10px}

/* ---------- cards ---------- */
.grid{display:grid;gap:26px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}

.card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:30px 28px;
  box-shadow:var(--shadow-sm);transition:transform .22s ease,box-shadow .22s ease;
  position:relative;overflow:hidden}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--red);
  transform:scaleY(0);transform-origin:top;transition:transform .28s ease}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.card:hover::before{transform:scaleY(1)}
.card h3{margin-bottom:.45em}
.card p:last-child{margin-bottom:0}
.card .price{display:inline-block;font-weight:800;color:var(--red);font-size:1.02rem;
  margin-top:6px}

/* ---------- testimonials ---------- */
.quote{background:#fff;border:1px solid var(--line);border-left:4px solid var(--gold);
  border-radius:6px;padding:28px 30px;box-shadow:var(--shadow-sm);
  transition:transform .22s ease,box-shadow .22s ease}
.quote:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.quote p{font-size:1.04rem;line-height:1.6;margin-bottom:1em}
.quote cite{font-style:normal;font-weight:700;color:var(--black);font-size:.95rem;display:block}
.quote cite span{display:block;font-weight:500;color:var(--muted);font-size:.88rem;margin-top:3px}
.section-dark .quote{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.14);
  border-left-color:var(--gold)}
.section-dark .quote p{color:rgba(255,255,255,.92)}
.section-dark .quote cite{color:var(--gold)}
.section-dark .quote cite span{color:rgba(255,255,255,.62)}

.quote-hero{border:none;background:none;box-shadow:none;text-align:center;max-width:820px;
  margin:0 auto;padding:0}
.quote-hero:hover{transform:none;box-shadow:none}
.quote-hero p{font-family:var(--display);font-size:clamp(1.35rem,3vw,2.05rem);line-height:1.35;
  font-weight:700;letter-spacing:-.02em;color:var(--black)}
.section-dark .quote-hero p{color:#fff}

/* ---------- featured quote with a photo beside it ----------
   The Gubler snapshot is only 337px wide, so it is deliberately
   never stretched past that. A small sharp candid reads as real;
   the same picture blown up would look cheap and pixelated. */
.quote-feature{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,4vw,48px);
  align-items:center;max-width:960px;margin:0 auto}
.quote-feature .shot{flex:none;width:min(300px,100%);position:relative}
.quote-feature .shot img{border-radius:8px;box-shadow:var(--shadow-md);width:100%;
  transform:rotate(-1.5deg);transition:transform .3s ease}
.quote-feature:hover .shot img{transform:rotate(0deg) scale(1.02)}
.quote-feature .quote-hero{text-align:left;margin:0}
.quote-feature .quote-hero p{font-size:clamp(1.25rem,2.6vw,1.8rem)}
@media(max-width:760px){
  .quote-feature{grid-template-columns:1fr;text-align:center;justify-items:center}
  .quote-feature .quote-hero{text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .quote-feature .shot img{transform:none}
  .quote-feature:hover .shot img{transform:none}
}

/* ---------- Magic Castle / celebrity cards ----------
   Three cards of mismatched source photos, forced to one shape with
   aspect-ratio + object-fit so the row reads as a set rather than a
   scrapbook. Photos are low-light phone shots and are never shown
   large enough to go soft. */
.castle-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(22px,3vw,34px);max-width:1040px;margin:0 auto}
.castle-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  border-radius:10px;overflow:hidden;display:flex;flex-direction:column;
  transition:transform .24s ease,border-color .24s ease}
.castle-card:hover{transform:translateY(-5px);border-color:var(--gold)}
.castle-card figure{margin:0}
.castle-card img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 22%;
  display:block}
.castle-card .body{padding:22px 22px 24px;flex:1;display:flex;flex-direction:column}
.castle-card blockquote{margin:0 0 14px;font-size:1.02rem;line-height:1.55;
  color:rgba(255,255,255,.93)}
.castle-card cite{font-style:normal;font-weight:700;color:var(--gold);font-size:.95rem;
  display:block;margin-top:auto}
.castle-card cite span{display:block;font-weight:500;color:rgba(255,255,255,.62);
  font-size:.86rem;margin-top:4px}
.castle-card .caption{color:rgba(255,255,255,.82);font-size:1rem;line-height:1.55;margin:0}
.castle-card .caption strong{color:var(--gold)}
@media (prefers-reduced-motion:reduce){.castle-card:hover{transform:none}}

/* ---------- client logo wall ---------- */
.logo-wall{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(32px,4vw,60px);align-items:center;justify-items:center;max-width:1140px;margin:0 auto}
.logo-wall img{max-height:120px;max-width:100%;width:auto;opacity:.92;filter:brightness(0) invert(1);
  transition:opacity .25s ease,transform .25s ease}
@media(max-width:560px){
  .logo-wall{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:26px}
  .logo-wall img{max-height:80px}
}
.logo-wall img:hover{opacity:1;transform:scale(1.06)}
@media (prefers-reduced-motion:reduce){.logo-wall img:hover{transform:none}}

/* ---------- guarantee ---------- */
.guarantee{border:2px solid var(--gold);border-radius:10px;padding:38px 34px;text-align:center;
  background:linear-gradient(180deg,rgba(227,188,59,.09),rgba(227,188,59,.02))}
.guarantee h2{margin-bottom:.4em}
.guarantee p:last-child{margin-bottom:0}
.guarantee .seal{display:inline-block;font-family:var(--display);font-weight:800;
  font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--black);
  background:var(--gold);padding:8px 18px;border-radius:999px;margin-bottom:18px}

/* ---------- logos / clients ---------- */
.clients{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 34px;list-style:none;
  padding:0;margin:0}
.clients li{font-family:var(--display);font-weight:700;font-size:1.02rem;letter-spacing:.02em;
  color:rgba(255,255,255,.82)}

/* ---------- booking form ---------- */
.form-shell{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px;
  box-shadow:var(--shadow-md);overflow:hidden}
/* Mago sets its own height via autoResize, so no min-height is forced here.
   A forced one would leave a white gap under a short form. */
.form-shell iframe{width:100%;border:0;display:block}
.form-shell:empty{display:none}
.form-fallback{padding:44px 28px;text-align:center;background:var(--cream);border-radius:6px}

/* ---------- two-column feature ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:center}
.split img{border-radius:8px;box-shadow:var(--shadow-md)}
@media(max-width:820px){.split{grid-template-columns:1fr}}

/* ---------- list with red ticks ---------- */
.ticks{list-style:none;padding:0;margin:0 0 1.2em}
.ticks li{position:relative;padding-left:30px;margin-bottom:12px}
.ticks li::before{content:"";position:absolute;left:6px;top:.55em;width:9px;height:9px;
  background:var(--red);transform:rotate(45deg)}
.section-dark .ticks li::before{background:var(--gold)}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--navy);color:rgba(255,255,255,.72);padding:58px 0 30px;font-size:.94rem}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:36px;
  margin-bottom:38px}
.site-footer h4{font-family:var(--display);color:#fff;font-size:1rem;margin:0 0 14px;
  letter-spacing:.02em}
.site-footer a{color:rgba(255,255,255,.78)}
.site-footer a:hover{color:var(--gold);text-decoration:none}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:9px}
.footer-phone{font-family:var(--display);font-size:1.5rem;font-weight:800;color:#fff;
  display:block;margin-bottom:6px}
.footer-phone:hover{color:var(--gold)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.14);padding-top:22px;
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:.86rem;
  color:rgba(255,255,255,.55)}

/* ============================================================
   SCROLL ANIMATIONS
   Elements marked data-anim fade and rise once, when they first
   come into view. Handled in site.js. If JavaScript is off or
   fails, .is-in is applied by the no-js rule below so content
   is NEVER hidden. That matters: an animation must not be able
   to make the site blank.
   ============================================================ */
[data-anim]{opacity:0;transform:translateY(22px);
  transition:opacity .6s cubic-bezier(.22,.8,.3,1),transform .6s cubic-bezier(.22,.8,.3,1)}
[data-anim].is-in{opacity:1;transform:none}
[data-anim][data-delay="1"]{transition-delay:.09s}
[data-anim][data-delay="2"]{transition-delay:.18s}
[data-anim][data-delay="3"]{transition-delay:.27s}
[data-anim][data-delay="4"]{transition-delay:.36s}
.no-js [data-anim]{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-anim]{opacity:1 !important;transform:none !important;transition:none !important}
  .hero-media img{animation:none;transform:none}
  .bulbs{animation:none}
  .card:hover,.quote:hover,.btn:hover,.nav-cta:hover{transform:none}
}

/* ============================================================
   PHONE AND TABLET
   ============================================================ */
@media(max-width:900px){
  .nav-toggle{display:block}
  .nav{position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;
    align-items:stretch;gap:0;padding:8px 24px 20px;border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-md);display:none}
  .nav.open{display:flex}
  .nav a{padding:14px 0;border-bottom:1px solid var(--line);font-size:1.05rem}
  .nav a::after{display:none}
  .nav-cta{text-align:center;margin-top:14px;border-bottom:none}
  .nav-phone{border-bottom:none}
  .header-inner{position:relative}
}
@media(max-width:560px){
  body{font-size:16px}
  .wrap{padding:0 18px}
  .hero-actions .btn{width:100%;text-align:center}
  .card,.quote{padding:24px 22px}
  .guarantee{padding:30px 22px}
}