/* =========================================================
   GOLDEN BRIDGE — ENHANCEMENT LAYER  (v2 · rebrand)
   Navy branded header, logo, richer backgrounds, polish.
   Loaded after style.css so it refines the base design.
   ========================================================= */

/* ---------- Body: soft layered background + subtle dot pattern ---------- */
body{
  background-color:var(--cream);
  background-image:
    radial-gradient(circle at 8% -4%, rgba(199,152,47,.10), transparent 40%),
    radial-gradient(circle at 96% 104%, rgba(22,50,79,.08), transparent 42%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Ccircle cx='2' cy='2' r='1.1' fill='%2316324F' fill-opacity='0.045'/%3E%3C/svg%3E");
  background-attachment:fixed, fixed, fixed;
}

/* ---------- Branded navy header ---------- */
header.site-header{
  background:linear-gradient(120deg,var(--navy) 0%,var(--navy-dark) 100%);
  border-bottom:1px solid rgba(199,152,47,.45);
  box-shadow:0 12px 34px rgba(11,29,48,.30);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
header.site-header::before{
  content:"";
  position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--gold) 0%,var(--gold-light) 50%,var(--gold) 100%);
  z-index:2;
}
.nav-wrap{padding:10px 24px;}

/* Logo in header */
.brand-logo{
  height:70px;width:auto;display:block;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.35));
  transition:transform .3s ease;
}
.brand:hover .brand-logo{transform:scale(1.03);}

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ---------- Skip link (keyboard / screen-reader users) ---------- */
.skip-link{
  position:absolute;left:12px;top:-60px;
  background:var(--gold-light);color:var(--navy-dark);
  padding:10px 18px;border-radius:8px;font-weight:700;font-size:.9rem;
  z-index:1000;transition:top .2s ease;
}
.skip-link:focus{top:12px;}

/* ---------- Utility group: Calm Mode + hamburger, always visible ---------- */
.nav-utils{display:flex;align-items:center;gap:10px;}

/* ---------- Calm Mode toggle ---------- */
.calm-toggle{
  display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.08);
  border:1.5px solid rgba(227,184,90,.55);
  color:#EAF1F8;
  padding:8px 14px;border-radius:999px;
  font-family:var(--sans);font-size:.82rem;font-weight:600;
  cursor:pointer;
  transition:background .25s ease,border-color .25s ease,transform .15s ease;
}
.calm-toggle .calm-icon{position:relative;width:17px;height:17px;color:var(--gold-light);display:flex;}
.calm-toggle .calm-icon svg{position:absolute;inset:0;width:100%;height:100%;transition:opacity .35s ease,transform .45s cubic-bezier(.5,0,.2,1);}
.calm-toggle .icon-moon{opacity:0;transform:scale(.5) rotate(-45deg);}
.calm-toggle[aria-pressed="true"] .icon-sun{opacity:0;transform:scale(.5) rotate(45deg);}
.calm-toggle[aria-pressed="true"] .icon-moon{opacity:1;transform:none;}
.calm-toggle:hover{background:rgba(227,184,90,.16);border-color:var(--gold-light);}
.calm-toggle:active{transform:scale(.97);}
.calm-toggle[aria-pressed="true"]{background:var(--gold-light);border-color:var(--gold-light);color:var(--navy-dark);}
.calm-toggle[aria-pressed="true"] .calm-icon{color:var(--navy-dark);}
.calm-label{white-space:nowrap;}
@media (max-width:560px){.calm-label{display:none;}.calm-toggle{padding:9px;border-radius:50%;}}

/* Clear, calm focus state for every interactive element — predictable, never flashy */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:3px solid var(--gold-light);outline-offset:2px;border-radius:4px;
}

/* ---------- Animated hamburger (three bars, morphs into an X) ---------- */
.nav-toggle{
  display:none;
  position:relative;
  width:42px;height:42px;
  background:rgba(255,255,255,.08);
  border:1.5px solid rgba(227,184,90,.4);
  border-radius:10px;
  padding:0;
  align-items:center;justify-content:center;
  flex-direction:column;gap:5px;
  cursor:pointer;
  transition:background .2s ease,border-color .2s ease;
}
.nav-toggle:hover{background:rgba(227,184,90,.14);border-color:var(--gold-light);}
.nav-toggle .bar{
  width:19px;height:2.4px;border-radius:2px;
  background:var(--gold-light);
  transition:transform .32s cubic-bezier(.5,0,.2,1),opacity .2s ease,width .32s ease;
}
.nav-toggle[aria-expanded="true"]{background:var(--gold-light);border-color:var(--gold-light);}
.nav-toggle[aria-expanded="true"] .bar{background:var(--navy-dark);}
.nav-toggle[aria-expanded="true"] .bar:nth-child(1){transform:translateY(7.4px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] .bar:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] .bar:nth-child(3){transform:translateY(-7.4px) rotate(-45deg);}

/* ---------- Calm Mode: dark theme + reduced motion ---------- */
html.calm-mode{
  --cream:#101E2C;
  --cream-deep:#16283A;
  --white:#1A2E42;
  --text:#E7EEF5;
  --muted:#A9BBC9;
  --line:rgba(227,184,90,.18);
  --navy-soft:#8FB4D6;
  --shadow-sm:0 2px 10px rgba(0,0,0,.35);
  --shadow:0 14px 34px rgba(0,0,0,.45);
  --shadow-lg:0 22px 50px rgba(0,0,0,.55);
  color-scheme:dark;
}
html.calm-mode body{
  background-color:var(--cream);
  background-image:
    radial-gradient(circle at 8% -4%, rgba(199,152,47,.14), transparent 42%),
    radial-gradient(circle at 96% 104%, rgba(143,180,214,.10), transparent 46%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Ccircle cx='2' cy='2' r='1.1' fill='%23E3B85A' fill-opacity='0.07'/%3E%3C/svg%3E");
}
html.calm-mode h1,html.calm-mode h2,html.calm-mode h3,html.calm-mode h4{color:#F2F6FA;}
html.calm-mode label{color:#DCE7F1;}
html.calm-mode .fee-table th{color:#F2F6FA;}
html.calm-mode .therapist .areas span{color:#F2F6FA;}
html.calm-mode .eyebrow{color:var(--gold-light);}
html.calm-mode .hero{
  background:linear-gradient(180deg, rgba(16,30,44,.66) 0%, rgba(16,30,44,.90) 100%), url("../pictures/bg-home.jpg") center/cover no-repeat;
}
html.calm-mode .hero::before{background:radial-gradient(circle,rgba(199,152,47,.20) 0%,rgba(199,152,47,0) 70%);}
html.calm-mode .section-cream{
  background:linear-gradient(180deg, rgba(22,40,58,.92) 0%, rgba(22,40,58,.96) 100%), url("../pictures/bg-warm.jpg") center/cover no-repeat;
}
html.calm-mode input,html.calm-mode select,html.calm-mode textarea{
  background:var(--white);color:var(--text);border-color:var(--line);
}
html.calm-mode input::placeholder,html.calm-mode textarea::placeholder{color:#7E93A3;}
html.calm-mode .photo-frame{border-color:rgba(227,184,90,.28);}
html.calm-mode nav.main-nav{background:var(--navy-dark);}

/* ---------- Calm Mode: reduces motion & visual noise site-wide ---------- */
html.calm-mode *,
html.calm-mode *::before,
html.calm-mode *::after{
  animation-duration:.001ms !important;
  animation-iteration-count:1 !important;
  transition-duration:.001ms !important;
  scroll-behavior:auto !important;
}
html.calm-mode .reveal{opacity:1 !important;transform:none !important;}
html.calm-mode .photo-band{background-attachment:scroll;}
html.calm-mode body{background-attachment:scroll !important;}
html.calm-mode .card:hover,
html.calm-mode .benefit-card:hover,
html.calm-mode .photo-frame:hover img,
html.calm-mode .gallery-item:hover img,
html.calm-mode .btn:hover{transform:none !important;}
html.calm-mode .splash-loader::after{animation:none !important;left:0;width:100%;}

/* Nav links on navy */
nav.main-nav a{color:#D8E3EE;}
nav.main-nav a:hover,nav.main-nav a.active{color:var(--gold-light);}
nav.main-nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold-light));
  transform:scaleX(0);transform-origin:left;transition:transform .25s ease;
}
nav.main-nav a:hover::after,nav.main-nav a.active::after{transform:scaleX(1);}
.nav-toggle{color:#fff;}

/* ---------- Hero with background picture (home classroom photo) ---------- */
.hero{
  background:
    linear-gradient(100deg, rgba(251,247,239,.90) 0%, rgba(251,247,239,.76) 32%, rgba(251,247,239,.40) 64%, rgba(251,247,239,.18) 100%),
    url("../pictures/bg-home.jpg") center/cover no-repeat;
}
.hero::before{
  background:radial-gradient(circle,rgba(199,152,47,.22) 0%,rgba(199,152,47,0) 70%);
}
.hero-illustration{
  border:6px solid rgba(255,255,255,.85);
  box-shadow:0 30px 60px rgba(11,29,48,.28);
}
.hero-illustration::after{
  background:linear-gradient(180deg,transparent 48%,rgba(11,29,48,.62));
}

/* ---------- Page heroes with background picture ---------- */
.page-hero{
  background:
    linear-gradient(150deg, rgba(22,50,79,.34) 0%, rgba(11,29,48,.62) 100%),
    url("../pictures/bg-navy.jpg") center/cover no-repeat;
}
.page-hero::after{
  background:radial-gradient(ellipse,rgba(199,152,47,.26) 0%,rgba(199,152,47,0) 70%);
}

/* ---------- Navy sections with background picture ---------- */
.section-navy{
  background:
    linear-gradient(150deg, rgba(22,50,79,.72) 0%, rgba(11,29,48,.86) 100%),
    url("../pictures/bg-navy.jpg") center/cover no-repeat;
}

/* ---------- Cream sections with warm texture ---------- */
.section-cream{
  background:
    linear-gradient(180deg, rgba(241,233,215,.88) 0%, rgba(241,233,215,.94) 100%),
    url("../pictures/bg-warm.jpg") center/cover no-repeat;
}

/* ---------- CTA band with background picture ---------- */
.cta-band{
  background:
    linear-gradient(150deg, rgba(22,50,79,.82) 0%, rgba(11,29,48,.92) 100%),
    url("../pictures/bg-navy.jpg") center/cover no-repeat;
  border:1px solid rgba(199,152,47,.35);
}

/* ---------- Footer with background picture ---------- */
footer{
  background:
    linear-gradient(180deg, rgba(11,29,48,.94) 0%, rgba(11,29,48,.99) 100%),
    url("../pictures/bg-navy.jpg") center/cover no-repeat;
}
.footer-logo{
  height:78px;width:auto;display:block;margin-bottom:8px;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.4));
}

/* ---------- Card polish ---------- */
.card{position:relative;overflow:hidden;}
.card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--gold),var(--gold-light));
  transform:scaleX(0);transform-origin:left;transition:transform .35s ease;
}
.card:hover::before{transform:scaleX(1);}
.card:hover{box-shadow:var(--shadow-lg);}
.card .icon-circle{transition:transform .3s ease,background .3s ease;}
.card:hover .icon-circle{transform:translateY(-3px) scale(1.06);background:var(--gold-soft);}

/* ---------- Feature strip polish ---------- */
.feature-strip{
  border-top:3px solid var(--gold);
  box-shadow:0 22px 46px rgba(13,32,53,.14);
}
.feature-icon{transition:transform .3s ease,background .3s ease;}
.feature-item:hover .feature-icon{transform:translateY(-4px);background:var(--gold-soft);}

/* ---------- Buttons: subtle gradient + shine ---------- */
.btn{background:linear-gradient(135deg,var(--gold) 0%,var(--gold-light) 100%);}
.btn:hover{background:linear-gradient(135deg,#B0872A 0%,var(--gold) 100%);}
.btn-navy{background:linear-gradient(135deg,var(--navy) 0%,var(--navy-soft) 100%);}
.btn-navy:hover{background:linear-gradient(135deg,var(--navy-dark) 0%,var(--navy) 100%);}

/* ---------- Photo frames ---------- */
.photo-frame{border:5px solid rgba(255,255,255,.9);}

/* ---------- Back-to-top button ---------- */
.to-top{
  position:fixed;right:22px;bottom:22px;width:50px;height:50px;border-radius:50%;
  background:linear-gradient(150deg,var(--navy) 0%,var(--navy-soft) 100%);
  color:var(--gold-light);border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 28px rgba(11,29,48,.34);
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .3s ease,transform .3s ease,visibility .3s ease,background .25s ease;
  z-index:120;
}
.to-top.show{opacity:1;visibility:visible;transform:none;}
.to-top:hover{background:linear-gradient(150deg,var(--gold) 0%,var(--gold-light) 100%);color:#fff;}
.to-top svg{width:20px;height:20px;}

/* ---------- Scroll progress bar ---------- */
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0;
  background:linear-gradient(90deg,var(--gold),var(--gold-light));
  z-index:300;transition:width .08s linear;
}

/* ---------- Section heading flourish ---------- */
.section-head{max-width:720px;}
.section-head.center{margin:0 auto;text-align:center;}
.eyebrow{position:relative;padding-left:26px;}
.eyebrow::before{
  content:"";position:absolute;left:0;top:50%;width:16px;height:2px;
  background:var(--gold);transform:translateY(-50%);
}
.section-head.center .eyebrow{padding-left:0;}
.section-head.center .eyebrow::before{display:none;}

/* ---------- Full-width background-picture band ---------- */
.photo-band{
  position:relative;
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
  padding:118px 0;
  color:#fff;
  overflow:hidden;
}
.photo-band::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(120deg, rgba(11,29,48,.88) 0%, rgba(11,29,48,.60) 55%, rgba(11,29,48,.34) 100%);
}
.photo-band .container{position:relative;z-index:2;}
.photo-band-inner{max-width:580px;}
.photo-band h2{color:#fff;font-size:2.3rem;margin-bottom:.35em;}
.photo-band p{color:#DCE6EF;font-size:1.06rem;margin-bottom:1.4em;}

/* ---------- Responsive tweaks ---------- */
@media (max-width:900px){
  body{background-attachment:scroll,scroll,scroll;}
  .to-top{right:16px;bottom:16px;width:44px;height:44px;}
  .brand-logo{height:56px;}
  nav.main-nav{background:var(--navy-dark);border-bottom:1px solid rgba(199,152,47,.3);}
  nav.main-nav a{color:#D8E3EE;}
  .photo-band{background-attachment:scroll;padding:80px 0;}
  .photo-band h2{font-size:1.8rem;}
  .nav-toggle{display:flex;}
}

/* ---------- Therapist photo ---------- */
.therapist-photo{overflow:hidden;padding:0;background:var(--cream-deep);}
.therapist-photo img{width:100%;height:100%;object-fit:cover;object-position:center 28%;display:block;border-radius:14px;}

/* ---------- EDU HORSE program ---------- */
.edu-horse{background:linear-gradient(150deg,var(--navy) 0%,var(--navy-dark) 100%);color:#EAF1F8;position:relative;overflow:hidden;}
.edu-horse::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 12%, rgba(199,152,47,.22), transparent 55%);}
.edu-horse .container{position:relative;z-index:2;}
.edu-horse .eyebrow{color:var(--gold-light);}
.edu-horse h2{color:#fff;}
.edu-horse .lead{color:#C9D6E3;max-width:780px;}
.edu-horse-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px;margin-top:34px;}
.edu-horse-card{background:rgba(255,255,255,.06);border:1px solid rgba(199,152,47,.35);border-radius:14px;padding:22px 20px;}
.edu-horse-card h3{color:var(--gold-light);font-size:1.05rem;margin-bottom:.4em;}
.edu-horse-card p{color:#C9D6E3;font-size:.92rem;margin:0;}

/* =========================================================
   LOGO SIZE — slightly larger (header + footer)
   ========================================================= */
.brand-logo{height:84px;}
.footer-logo{height:92px;}

/* =========================================================
   PHOTOS — show the FULL picture, never crop
   (overrides the object-fit:cover / fixed aspect-ratio rules)
   ========================================================= */

/* Hero photo: let it keep its natural shape */
.hero-illustration{aspect-ratio:auto;}
.hero-illustration img{
  width:100%;
  height:auto;
  object-fit:contain;
  object-position:center;
}

/* Gallery photos: natural height, no cropping */
.gallery-grid{align-items:start;}
.gallery-item{aspect-ratio:auto;}
.gallery-item img{
  width:100%;
  height:auto;
  object-fit:contain;
  object-position:center;
}

/* Framed photos (square / wide / tall): natural height, no cropping */
.photo-frame.square,
.photo-frame.wide,
.photo-frame.tall{aspect-ratio:auto;}
.photo-frame img{
  width:100%;
  height:auto;
  object-fit:contain;
  object-position:center;
}

/* Therapist portrait: full image, no cropping */
.therapist-photo{
  width:100%;
  height:auto;
  aspect-ratio:auto;
}
.therapist-photo img{
  width:100%;
  height:auto;
  object-fit:contain;
  object-position:center;
}

/* Generic .photo helper */
.photo{height:auto;object-fit:contain;}

/* ---------- Responsive: logo + photo fit on small screens ---------- */
@media (max-width:900px){
  .brand-logo{height:66px;}
  .footer-logo{height:80px;}
}
@media (max-width:560px){
  .brand-logo{height:58px;}
  .footer-logo{height:72px;}
}

/* =========================================================
   HERO COPY — white readable paragraph card + typewriter title
   ========================================================= */

/* Paragraph sits on a white card so it stays readable over the
   background photo in light mode (and a dark card in Calm Mode). */
.hero .hero-copy .lead{
  background:rgba(255,255,255,.94);
  border:1px solid var(--line);
  border-radius:14px;
  padding:16px 20px;
  margin:22px 0 0;
  max-width:52ch;
  box-shadow:var(--shadow-sm);
  backdrop-filter:blur(2px);
}
html.calm-mode .hero .hero-copy .lead{
  background:rgba(22,40,58,.92);
  border-color:rgba(227,184,90,.28);
  color:#DCE7F1;
}

/* Typewriter headline ------------------------------------------------ */
.hero-title{position:relative;}
.hero-title .tw-ghost{display:inline;}
.hero-title.typing .tw-ghost{opacity:0;}
.hero-title .tw-typed{
  position:absolute;left:0;top:0;width:100%;
}
.hero-title .tw-caret{
  display:inline-block;
  width:.06em;min-width:3px;height:1em;
  margin-left:.06em;
  vertical-align:-.12em;
  background:var(--gold);
  animation:twBlink 1s step-end infinite;
}
@keyframes twBlink{0%,100%{opacity:1;}50%{opacity:0;}}
.hero-title.typing-done .tw-caret{display:none;}

@media (prefers-reduced-motion:reduce){
  .hero-title .tw-caret{animation:none;}
}

/* ---------- Open Day (homepage) ---------- */
.open-day{
  background:
    radial-gradient(circle at 12% 10%, rgba(199,152,47,.24), transparent 55%),
    linear-gradient(150deg,var(--navy) 0%,var(--navy-dark) 100%);
  color:#EAF1F8;position:relative;overflow:hidden;
}
.open-day-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;}
.open-day-tag{display:inline-block;background:var(--gold);color:var(--white);font-weight:700;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;padding:6px 14px;border-radius:20px;margin-bottom:14px;}
.open-day h2{color:var(--white);font-size:clamp(2rem,4vw,2.9rem);margin-bottom:12px;}
.open-day-lead{font-size:1.08rem;color:#D8E3EE;max-width:52ch;}
.open-day-list{list-style:none;padding:0;margin:20px 0 24px;display:grid;grid-template-columns:1fr 1fr;gap:10px 22px;}
.open-day-list li{position:relative;padding-left:28px;font-size:.95rem;color:#EAF1F8;}
.open-day-list li::before{content:"";position:absolute;left:0;top:.2em;width:18px;height:18px;border-radius:50%;background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat;}
.open-day-offers{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:26px;}
.offer{background:rgba(255,255,255,.07);border:1px solid rgba(227,184,90,.4);border-radius:14px;padding:16px 18px;display:flex;flex-direction:column;gap:3px;}
.offer strong{font-family:var(--serif);font-size:1.25rem;color:var(--white);line-height:1.2;}
.offer span{font-size:.85rem;color:#C9D9E4;}
.offer .offer-label{color:var(--gold-light);font-weight:700;font-size:.74rem;letter-spacing:.07em;text-transform:uppercase;}
.offer-trial{background:rgba(199,152,47,.16);border-color:var(--gold-light);}
.open-day-note{margin:18px 0 0;font-size:.85rem;color:#C9D9E4;}
.open-day-poster{display:block;border-radius:18px;overflow:hidden;box-shadow:0 24px 54px rgba(0,0,0,.4);border:2px solid rgba(227,184,90,.55);max-width:420px;justify-self:center;transition:transform .2s ease;}
.open-day-poster:hover{transform:translateY(-3px);}
.open-day-poster img{display:block;width:100%;height:auto;}
html.calm-mode .open-day-poster:hover{transform:none;}
@media (max-width:900px){
  .open-day-grid{grid-template-columns:1fr;gap:34px;}
  .open-day-poster{order:2;}
}
@media (max-width:560px){
  .open-day-list,.open-day-offers{grid-template-columns:1fr;}
}