/* ==========================================
   FONTS
   ========================================== */

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Satisfy&display=swap');

/* ==========================================
   ROOT TOKENS
   ========================================== */

:root{
  /* Brand palette */
  --nd-purple:#8B6CF6;   /* brand purple */
  --nd-primary:#8B6CF6;  /* primary buttons/accents */
  --nd-orange:#F88A3D;
  --nd-teal:#15B8B5;
  --nd-yellow:#FFC642;
  --nd-pink:#FF5DB3;
  --nd-ink:#2E2E33;
  --nd-muted:#6C6C76;
  --nd-bg:#FFFFFF;
  --nd-card:#FFFFFF;
  --radius:22px;
  --shadow:0 14px 30px rgba(0,0,0,.08);
  --grid-max:1300px;
}

/* ==========================================
   BASE
   ========================================== */

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  background:var(--nd-bg);
  color:var(--nd-ink);
  font:400 16px/1.6 Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
}

img{max-width:100%;height:auto;display:block}

a{color:var(--nd-purple);text-decoration:none}
a:hover{text-decoration:underline}

.container{
  max-width:var(--grid-max);
  margin-inline:auto;
  padding:clamp(16px,2vw,28px);
}

.btn{
  display:inline-block;
  padding:.9rem 1.2rem;
  border-radius:10px;
  background:var(--nd-primary);
  color:#fff;
  font-weight:700;
  box-shadow:var(--shadow);
  line-height:1.2;
  font-size:.95rem;
  border:0;
  cursor:pointer;
}
.btn:hover{filter:brightness(1.05)}
.btn.alt{background:var(--nd-orange)}

/* ==========================================
   HEADER + NAVIGATION
   ========================================== */

header{
  position:sticky;
  top:0;
  background:transparent;
  border-bottom:2px solid transparent;
  height:88px;
  padding-top:0;
  padding-bottom:15px;
  display:flex;
  align-items:center;
  overflow:visible;
  z-index:30;
}
header.scrolled{
  background:rgba(255,255,255,0.95);
  border-bottom-color:rgba(0,0,0,.05);
  backdrop-filter:saturate(180%) blur(8px);
}

.container.nav{
  display:grid;
  grid-template-columns:minmax(300px, max-content) 1fr auto;
  grid-auto-rows:88px;
  align-items:center;
  max-width:var(--grid-max);
  margin:0 auto;
  padding:0 1rem;
  position:relative;
}

.brand{
  position:relative;
  height:88px;
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  overflow:visible;
  z-index:5;
}

.logo-wrap{
  position:absolute;
  top:-2px;
  left:-75px;
  display:inline-flex;
  align-items:flex-start;
  z-index:5;
}
.logo-wrap::before{
  content:"";
  position:absolute;
  inset:-20px -30px 0 -30px;
  border-radius:9999px;
  background:rgba(255,255,255,0.55);
  filter:blur(60px);
  box-shadow:0 6px 18px rgba(0,0,0,.10);
  z-index:0;
}
.brand-logo{
  position:relative;
  z-index:1;
  height:270px;
  width:auto;
  max-width:none;
  margin:0;
  pointer-events:none;
  display:block;
}

.menu{
  grid-column:2;
  justify-self:end;
  display:flex;
  gap:12px;
  align-items:center;
  margin-right:.25rem;
}
.menu a{
  position:relative;
  padding:.6rem .5rem;
  font-weight:700;
  letter-spacing:.1px;
  border-radius:10px;
  line-height:1.2;
  font-size:.9rem;
  color:var(--nd-ink);
}
.menu a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-4px;
  height:3px;
  background:linear-gradient(90deg, var(--nd-pink), var(--nd-teal), var(--nd-yellow));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s ease;
  border-radius:3px;
}
.menu a:hover{
  background:rgba(122,76,203,.08);
  text-decoration:none;
}
.menu a:hover::after,
.menu a[aria-current="page"]::after{
  transform:scaleX(1);
}

.hamburger{
  grid-column:3;
  display:none;
  align-items:center;
  gap:8px;
  background:#fff;
  border:1px solid rgba(0,0,0,.1);
  padding:8px 12px;
  border-radius:12px;
  font-weight:600;
  cursor:pointer;
}
.mobile{
  display:none;
  flex-direction:column;
  gap:10px;
  padding-top:0;
  padding-bottom:16px;
}
.mobile a{
  background:#fff;
  padding:12px;
  border-radius:12px;
  font-weight:600;
  color:var(--nd-ink);
  text-decoration:none;
  box-shadow:0 4px 16px rgba(0,0,0,.07);
}
.mobile a:hover{
  background:#fff;
  color:var(--nd-purple);
  text-decoration:none;
}

.hero{z-index:1;}
header{z-index:30;}

/* ==========================================
   HOME HERO
   ========================================== */

.hero{
  position:relative;
  overflow:visible;
  width:100%;
  background:#fff;
  padding:0;
  margin:0;
}
.hero-image{
  width:100%;
  height:auto;
  object-fit:contain;
  object-position:center;
  display:block;
  max-height:450px;
}

/* ==========================================
   OUR APPROACH
   ========================================== */

.approach{padding:64px 0}
.approach .section-title{color: var(--nd-purple);margin:0 0 18px}
.approach-grid{display:grid;gap:18px;grid-template-columns:1fr}
@media (min-width:820px){.approach-grid{grid-template-columns:1fr 1fr}}
.icon{width:28px;height:28px;vertical-align:middle}
.approach-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,.04);
  padding:18px 20px;
}
.approach-card h3{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 8px;
  font-weight:700;
  font-size:clamp(1.05rem,1.6vw,1.22rem);
  letter-spacing:-.01em;
  color:#6E8F7A;
}
.approach-card .ico{width:20px;height:20px;color:#6E8F7A;flex:0 0 20px}
.approach-card p{margin:0;color:#3e4a50;line-height:1.55}
.approach .inner{max-width:1100px;margin:0 auto;padding:0 24px}
@media (hover:hover){
  .approach-card:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 22px rgba(0,0,0,.06);
  }
}

/* ==========================================
   FEATURE CARDS (HOME TILES)
   ========================================== */

.features{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  margin-top:24px;
}
.card{
  background:var(--nd-card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px;
}
.card h3{
  margin:.2rem 0 .4rem;
  font-family:"Baloo 2", system-ui;
}
.pill{
  display:inline-block;
  padding:6px 14px;
  border-radius:999px;
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.02em;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}
.pill.p1{background:linear-gradient(135deg,#C8F1D2,#D9FCE6);color:#1A5D3D}
.pill.p2{background:linear-gradient(135deg,#E5D9FF,#F0E8FF);color:#4E2A7B}
.pill.p4{background:linear-gradient(135deg,#B2D8FF,#E0F4FF);color:#074E8C}
.pill.p3{background:linear-gradient(135deg,#FFE0C0,#FFF1E5);color:#8C3B00}

/* ==========================================
   CURVED GRADIENT SECTIONS (HOME)
   ========================================== */

section{
  padding:clamp(20px,3vw,38px) 0;
  position:relative;
  z-index:1;
}
.features + section{margin-top:-18px}

#programs{
  background:linear-gradient(180deg,#ffffff 0%,#f7fff9 50%,#eaffef 100%);
}
#programs::before{
  content:"";
  position:absolute;
  top:-40px;
  left:0;
  width:100%;
  height:40px;
  background:radial-gradient(50% 100% at 50% 100%, #eaffef 0%, transparent 70%);
  z-index:0;
}
#assess{
  background:linear-gradient(180deg,#ffffff 0%,#f8f5ff 50%,#f4f0ff 100%);
}
#assess::before{
  content:"";
  position:absolute;
  top:-40px;
  left:0;
  width:100%;
  height:40px;
  background:radial-gradient(50% 100% at 50% 100%, #f4f0ff 0%, transparent 70%);
  z-index:0;
}

/* Home-page Byron promo (kept as original) */
#byron{
  background:linear-gradient(180deg,#fff 0%,#fff7f0 50%,#fff2e6 100%);
}
#byron::before{
  content:"";
  position:absolute;
  top:-40px;
  left:0;
  width:100%;
  height:40px;
  background:radial-gradient(50% 100% at 50% 100%, #fff2e6 0%, transparent 70%);
  z-index:0;
}

/* ==========================================
   PROGRAM MODAL SHARED STYLES
   ========================================== */

.program-table{
  width:100%;
  border-collapse:collapse;
  margin:14px 0 24px;
}
.program-table th,
.program-table td{
  border-bottom:1px dashed rgba(0,0,0,.08);
  padding:8px 10px;
  text-align:left;
  vertical-align:top;
}
.program-table th{color:#6E8F7A;font-weight:600}

.goals-list,
.why-list{
  padding-left:20px;
  margin:10px 0 20px;
  line-height:1.55;
}

.modal-footer{text-align:center;margin-top:28px}
.modal-footer .btn{
  background:#6E8F7A;
  color:#fff;
  border:none;
  padding:10px 22px;
  border-radius:8px;
  font-size:1rem;
  cursor:pointer;
  transition:background .2s;
}
.modal-footer .btn:hover{filter:brightness(1.05)}

/* ==========================================
   TITLES & TEXT BLOCKS (GLOBAL)
   ========================================== */

.section-title{
  font-family:"Baloo 2", system-ui;
  font-size:clamp(1.8rem,3.2vw,2.4rem);
  font-weight:700;
  color:var(--nd-purple);
  margin:0 0 18px;
  line-height:1.2;
}
.list{
  list-style:none;
  padding:0;
  margin:0 0 1rem;
}
.list li{
  display:flex;
  align-items:center;
  gap:8px;
  padding:.5rem 0;
  border-bottom:1px dashed rgba(0,0,0,.06);
  color:var(--nd-ink);
  font-weight:500;
}
.list li img{width:50px;height:50px;flex-shrink:0}

/* ==========================================
   TWO-COLUMN LAYOUT
   ========================================== */

.two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-areas:"A B";
  gap:32px;
}
.two-col>*{align-self:start}
.two-col>:first-child{grid-area:A}
.two-col>:last-child{grid-area:B}
.two-col.swap{grid-template-areas:"B A"}
.two-col img{
  width:100%;
  height:auto;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  object-fit:cover;
}

/* ==========================================
   GALLERY
   ========================================== */

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));
  gap:18px;
}
.gallery-item{
  background:#fff;
  border:0;
  padding:0;
  border-radius:18px;
  box-shadow:var(--shadow);
  cursor:pointer;
  position:relative;
  overflow:hidden;
  line-height:0;
}
.gallery-item img{
  width:100%;
  height:220px;
  object-fit:cover;
  object-position:center;
  display:block;
}
.gallery-item:hover,
.gallery-item:focus-visible{
  outline:0;
  box-shadow:0 0 0 3px var(--nd-purple),0 14px 30px rgba(0,0,0,.15);
}

.lightbox{
  position:fixed;
  inset:0;
  z-index:999;
  display:none;
  align-items:center;
  justify-content:center;
}
.lightbox.open{display:flex}
.lightbox-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.6);
  backdrop-filter:blur(3px);
}
.lightbox-content{
  position:relative;
  z-index:2;
  max-width:min(90vw,900px);
  max-height:90vh;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 30px 60px rgba(0,0,0,.6);
  background:#000;
  display:flex;
  align-items:center;
  justify-content:center;
}
.lightbox-content img{
  max-width:100%;
  max-height:90vh;
  object-fit:contain;
  background:#000;
  display:block;
}
.lightbox-close{
  position:absolute;
  top:10px;
  right:10px;
  background:rgba(255,255,255,0.9);
  border:0;
  border-radius:10px;
  font-size:16px;
  line-height:1;
  padding:8px 10px;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(0,0,0,.4);
  font-weight:600;
  color:#000;
}
.lightbox-close:hover,
.lightbox-close:focus-visible{
  background:#fff;
  outline:2px solid var(--nd-purple);
  outline-offset:2px;
}
@media (max-width:600px){
  .gallery-item img{height:180px}
}

/* ==========================================
   BLOG GRID
   ========================================== */

.blog-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
  gap:22px;
}
.blog-card{background:transparent;border:0;padding:0;margin:0}
.blog-card-inner{
  display:flex;
  flex-direction:column;
  width:100%;
  background:var(--nd-card);
  border-radius:20px;
  box-shadow:var(--shadow);
  overflow:hidden;
  cursor:pointer;
  line-height:1.4;
}
.blog-card-image{
  width:100%;
  aspect-ratio:16 / 9;
  background:#000;
  overflow:hidden;
}
.blog-card-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}
.blog-card-body{padding:16px 18px 20px;color:var(--nd-ink)}
.blog-card-title{
  margin:0 0 8px;
  font-family:"Baloo 2", system-ui;
  font-size:1.05rem;
  font-weight:700;
  color:var(--nd-purple);
  line-height:1.25;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:6px;
}
.blog-card-title .arrow{color:var(--nd-purple);font-weight:700;font-size:1.05rem;line-height:1}
.blog-card-meta{
  margin:0;
  color:var(--nd-muted);
  font-size:.9rem;
  font-weight:500;
  line-height:1.4;
}
.blog-card-inner:hover,
.blog-card-inner:focus-visible{
  outline:0;
  box-shadow:0 0 0 3px var(--nd-purple),0 18px 40px rgba(0,0,0,.18);
  position:relative;
  z-index:2;
}

/* ==========================================
   CONTACT CARD (SIDEBAR / CTA)
   ========================================== */

.contact-card{
  background:linear-gradient(135deg,#f9f8ff,#fff);
  border-radius:24px;
  box-shadow:0 12px 30px rgba(0,0,0,.08);
  padding:28px;
  color:var(--nd-ink);
  transition:all .3s ease;
}
.contact-card:hover{
  box-shadow:0 18px 44px rgba(0,0,0,.12);
  transform:translateY(-2px);
}
.contact-title{
  margin-top:0;
  margin-bottom:18px;
  font-family:"Baloo 2", system-ui;
  font-size:1.4rem;
  color:var(--nd-purple);
  display:flex;
  align-items:center;
  gap:10px;
}
.contact-line{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
  font-weight:600;
  font-size:1rem;
}
.contact-line a{
  color:var(--nd-ink);
  text-decoration:none;
  font-weight:600;
}
.contact-line a:hover{
  color:var(--nd-purple);
  text-decoration:none;
}
.contact-line .icon{
  width:22px;
  height:22px;
  color:var(--nd-purple);
  flex-shrink:0;
}
.contact-note{
  margin-top:8px;
  font-size:.9rem;
  color:var(--nd-muted);
  line-height:1.4;
}

/* ==========================================
   PAGE HEADER (SUBPAGES)
   ========================================== */

.page-header{
  background:linear-gradient(180deg,#ffffff 0%,#f7f8ff 100%);
  padding:clamp(60px,6vw,90px) 0 40px;
  text-align:center;
  position:relative;
  z-index:1;
}
.page-header .container{
  max-width:var(--grid-max);
  margin-inline:auto;
}
.page-title{
  font-family:"Baloo 2", system-ui;
  font-size:clamp(2rem,3.2vw,2.6rem);
  font-weight:700;
  color:var(--nd-purple);
  margin:0 0 12px;
  line-height:1.15;
}
.page-intro{
  font-size:1rem;
  line-height:1.6;
  color:var(--nd-ink);
  font-weight:500;
  margin:0 auto 1.5rem;
  max-width:90ch;
  text-align:center;
}

/* ==========================================
   PROGRAM GRID (PROGRAMS PAGE)
   ========================================== */

.program-block{background:#fff;padding:40px 0}
.program-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
  gap:24px;
}

/* Program card enhancements */
.program-card{position:relative;cursor:pointer;}
.program-card-body{padding:14px 16px 0;}
.program-summary{
  margin:6px 0 8px;
  color:var(--nd-ink);
  font-weight:600;
  font-size:.95rem;
}
.program-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  list-style:none;
  margin:0 0 12px;
  padding:0;
}
.program-card img{
  width:100%;
  height:240px;
  object-fit:cover;
  object-position:center 40%;
  border-bottom:3px solid rgba(139,108,246,0.15);
  display:block;
}
.program-chips li{
  background:rgba(139,108,246,.10);
  color:var(--nd-purple);
  border:1px solid rgba(139,108,246,.22);
  padding:6px 10px;
  border-radius:999px;
  font-size:.75rem;
  font-weight:700;
}
.program-card-cta{
  padding:12px 16px 16px;
  border-top:1px dashed rgba(0,0,0,.06);
}
.program-card-cta .btn{
  width:100%;
  justify-content:center;
  font-size:1rem;
  padding:.9rem 1rem;
}

/* Make program cards equal height and nicely aligned */
.program-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.program-card-body {
  flex: 1 1 auto;
}

.program-card-cta {
  margin-top: auto;
}

/* Modal “sheet” style */
.program-sheet{
  padding:0;
  overflow:hidden;
  border-radius:22px;
  box-shadow:0 40px 80px rgba(0,0,0,.45);
}
.sheet-close{
  position:absolute;
  top:10px;
  right:10px;
  width:40px;
  height:40px;
  border-radius:999px;
  background:rgba(255,255,255,.9);
  border:1px solid rgba(0,0,0,.08);
  font-size:22px;
  line-height:1;
  display:grid;
  place-items:center;
  cursor:pointer;
}
.sheet-close:hover{background:#fff;}

.sheet-header{padding:18px 20px 8px;}

.sheet-hero{
  max-height:260px;
  object-fit:cover;
  display:block;
  object-position:center 35%;
  border-bottom:3px solid var(--nd-purple);
}

.sheet-title{
  font-family:"Baloo 2", system-ui;
  font-size:clamp(1.4rem, 2.6vw, 1.9rem);
  color:var(--nd-purple);
  margin:14px 0 6px;
}
.sheet-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  font-weight:700;
  color:var(--nd-ink);
}
.sheet-meta .meta-item{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:999px;
  padding:6px 10px;
}
.sheet-note{margin:8px 0 4px;color:var(--nd-muted);font-weight:600;}
.sheet-funding{margin:0 0 14px;color:var(--nd-ink);font-weight:600;}

.sheet-section{
  padding:16px 20px;
  border-top:1px dashed rgba(0,0,0,.06);
}
.sheet-section h3{
  margin:0 0 8px;
  color:var(--nd-purple);
  font-family:"Baloo 2", system-ui;
}
.sheet-footer{
  display:flex;
  gap:10px;
  justify-content:center;
  padding:16px 20px 22px;
  border-top:1px dashed rgba(0,0,0,.06);
}
.sheet-footer .btn{min-width:220px;}

.program-table td,
.program-table th{font-size:.96rem;}

/* ==========================================
   GENERIC MODALS
   ========================================== */

.modal,
.program-modal{
  position:fixed;
  inset:0;
  z-index:1000;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.45);
  -webkit-overflow-scrolling:touch;
  overflow-y:auto;
}
.modal.open,
.program-modal.open{display:flex}

.program-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(3px);
}

.modal .modal-content,
.program-card-detail{
  position:relative;
  z-index:2;
  background:#fff;
  max-width:920px;
  width:calc(100% - 32px);
  border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.18);
  padding:24px clamp(16px,3vw,36px);
  max-height:90vh;
  overflow-y:auto;
}

.modal .close-modal,
.program-close{
  appearance:none;
  border:0;
  background:transparent;
  font-size:1.6rem;
  line-height:1;
  cursor:pointer;
  position:sticky;
  top:8px;
  left:0;
}
.modal .close-modal:hover,
.program-close:hover{filter:brightness(1.1)}

.program-hero-img{
  width:100%;
  height:auto;
  border-radius:16px;
  margin-bottom:16px;
  box-shadow:var(--shadow);
}
.program-detail-heading{
  margin:0 0 12px;
  font-family:"Baloo 2", system-ui;
  font-size:1.6rem;
  color:var(--nd-purple);
}
.program-detail-description{
  margin:0 0 16px;
  line-height:1.6;
  color:var(--nd-ink);
  font-size:1rem;
  font-weight:500;
}
.program-meta{
  list-style:none;
  padding:0;
  margin:0 0 24px;
  color:var(--nd-muted);
  font-size:.95rem;
  font-weight:500;
  line-height:1.4;
}
.program-meta li{margin:4px 0}

#programBookBtn.btn{
  width:100%;
  text-align:center;
  display:inline-block;
  font-size:1rem;
  line-height:1.2;
  padding:1rem 1.2rem;
  border-radius:12px;
  font-weight:700;
}

/* ==========================================
   BOOKING FORM
   ========================================== */

.booking-form{
  max-width:600px;
  margin:0 auto;
  display:grid;
  gap:18px;
}
.form-group label{
  font-weight:600;
  color:var(--nd-purple);
  display:block;
  margin-bottom:6px;
}
input,
select,
textarea{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.15);
  font:500 1rem Inter, sans-serif;
}
input:focus,
select:focus,
textarea:focus{
  outline:2px solid var(--nd-purple);
  border-color:var(--nd-purple);
}
.form-submit{text-align:center;margin-top:12px;}

/* ==========================================
   FOOTER
   ========================================== */

footer{
  background:#1e1b2e;
  color:#eae6ff;
}
footer a{color:#eae6ff;text-decoration:none}
footer a:hover{color:#fff;text-decoration:underline}

/* ==========================================
   BYRON BAY PAGE – THEME + HERO
   ========================================== */

/* local palette for Byron page */
.byron-page{
  --byron-sage: #E8F0EB;
  --byron-sage-deep: #D6E3DB;
  --byron-beige: #FAF8F4;
  --byron-beige-rich: #F4F3EE;
  --byron-sand: #F7F5EF;
  --byron-stone: #E3DED5;
}

/* Raleway typography on Byron page */
.byron-page .page-title,
.byron-page .section-title,
.byron-page h1,
.byron-page h2{
  font-family:'Raleway', sans-serif;
  font-weight:300;
  letter-spacing:0.4px;
  color:#6E7F72;
}
.byron-page h3{
  font-family:'Raleway', sans-serif;
  font-weight:400;
  letter-spacing:0.3px;
  color:#7A6E5E;
}
.byron-page p,
.byron-page li,
.byron-page .page-intro{
  font-family:'Raleway', sans-serif;
  font-weight:400;
  font-size:1.02rem;
  line-height:1.7;
  letter-spacing:0.15px;
  color:#3E3E3A;
}

/* Byron: stop the hero/show-through behind the nav */
.byron-page header {
  background: #ffffff;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

/* Byron main section background */
.byron-page #byron{
  background:linear-gradient(180deg,var(--byron-sage) 0%,var(--byron-beige-rich) 100%);
}
.byron-page #byron::before{
  content:"";
  position:absolute;
  top:-40px;
  left:0;
  width:100%;
  height:40px;
  background:radial-gradient(50% 100% at 50% 100%, var(--byron-sage) 0%, transparent 70%);
  z-index:0;
}

/* Cards on Byron page */
.byron-page .card{
  background:var(--byron-sand);
  border:1px solid rgba(0,0,0,0.05);
}
.byron-page .card .list li{
  border-bottom:2px solid rgba(214,227,219,0.55);
  padding:0.55rem 0;
}
.byron-page .card .list li:last-child{border-bottom:none;}
.byron-page .contact-card{
  background:linear-gradient(135deg,var(--byron-beige),var(--byron-sand));
}

/* Practitioner photo sizing (Byron) */
.byron-page .practitioner-photo{
  display:flex;
  justify-content:center;
  align-items:flex-start;
}
.byron-page .practitioner-photo img{
  max-width:380px;
  width:100%;
  height:auto;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

/* Byron hero banner
   >>> Change height here to make hero shallower/taller <<< */
.byron-page .byron-hero{
  position:relative;
  width:100%;
  height:420px;
  overflow:hidden;
  border-bottom:1px solid rgba(0,0,0,0.05);
}

/* Byron: hero should not have the generic section padding */
.byron-page .byron-hero {
  padding: 0;
  margin: 0;
}

.byron-page .byron-hero img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 55%;
  filter:brightness(0.9);
}

/* Byron: keep header solid so hero doesn't show through it */
.byron-page header{
  background:#ffffff;
  border-bottom-color:rgba(0,0,0,.05);
}

/* big cursive “Byron Bay” */
.byron-page .byron-script{
  position:absolute;
  top:50px;
  left:50%;
  transform:translateX(-50%);
  font-family:'Satisfy', cursive;
  font-size:clamp(3.8rem,7vw,6.2rem);
  line-height:1;
  white-space:nowrap;
  color:rgba(255,255,255,0.96);
  text-shadow:0 4px 12px rgba(0,0,0,0.45);
  opacity:0;
  animation:
    byronFadeIn 3.5s ease-out forwards 0.5s,
    byronFloat 16s ease-in-out infinite 0.5s;
  pointer-events:none;
}

/* subtitle under the script */
.byron-page .byron-subtitle{
  position:absolute;
  top:155px;
  left:50%;
  transform:translateX(-50%);
  text-align:center;
  font-family:'Raleway', sans-serif;
  font-weight:400;
  font-size:clamp(1.05rem,1.8vw,1.3rem);
  letter-spacing:0.3px;
  color:rgba(255,255,255,0.95);
  text-shadow:0 2px 6px rgba(0,0,0,0.4);
  opacity:0;
  animation:byronSubtitleFade 3.5s ease-out forwards 1.2s;
  pointer-events:none;
}

/* hero animations */
@keyframes byronFadeIn{
  0%{opacity:0;transform:translateX(-50%) translateY(18px);}
  100%{opacity:1;transform:translateX(-50%) translateY(0);}
}
@keyframes byronFloat{
  0%{transform:translateX(-50%) translateY(0);}
  50%{transform:translateX(-50%) translateY(-6px);}
  100%{transform:translateX(-50%) translateY(0);}
}
@keyframes byronSubtitleFade{
  0%{opacity:0;transform:translateX(-50%) translateY(12px);}
  100%{opacity:1;transform:translateX(-50%) translateY(0);}
}

/* ==========================================
   RESPONSIVE
   ========================================== */

@media (max-width:1000px){
  .hero{height:35vh}
  .features{grid-template-columns:1fr}
  .two-col{
    grid-template-columns:1fr;
    grid-template-areas:"A" "B";
  }
  .two-col.swap{grid-template-areas:"A" "B"}
  .menu{display:none}
  .hamburger{display:inline-flex}
  .mobile.open{display:flex}
  .brand-logo{height:120px}
}

@media (prefers-reduced-motion:reduce){
  .hero-image{transition:none}
}