:root{
  --bg:#0f0f0f;
  --fg:#ffffff;
  --ac:#89CFF0;            /* baby blue accent */
  --fg-dim:rgba(255,255,255,0.85);
  --line:rgba(137,207,240,0.22);

  /* Divider sizes (top & bottom are drawn via ::before/::after) */
  --divider-h: 90px;     /* desktop default height */
  --section-pad: 64px;   /* base vertical padding for content */
}

*{ box-sizing:border-box; }
html,body{
  margin:0; padding:0;
  background:var(--bg); color:var(--fg);
  font-family:'Inter', Helvetica, Arial, sans-serif;
  scroll-behavior:smooth;
}
a{ color:var(--fg); text-decoration:none; }
a:hover{ color:var(--ac); }
.container{ width:min(1150px,92%); margin-inline:auto; }

/* =========================
   HERO CHROME (menu on video)
   ========================= */
.hero-chrome{
  position:fixed; right:32px; top:16px; z-index:1000;
  display:flex; align-items:center;
}
.menu-btn{
  display:flex; align-items:center; gap:12px;
  padding:8px 12px;
  height:42px; border-radius:12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,0.06);
  backdrop-filter:saturate(130%) blur(8px);
  color:var(--fg); /* MENU text white */
}
.menu-btn em{
  font-style:normal; font-weight:700; letter-spacing:.6px; font-size:.9rem; opacity:.95; color:inherit;
}
.menu-btn .hamb{ display:grid; gap:4px; width:22px; }
.menu-btn .hamb i{
  height:2px; width:100%; background:var(--fg); display:block; border-radius:2px;
}

/* =========================
   OVERLAY MENU (no search)
   ========================= */
.menu-overlay{
  position:fixed; inset:0; z-index:1200; display:none;
  background:rgba(0,0,0,0.45);
  backdrop-filter:blur(6px);
}
.menu-overlay[aria-hidden="false"]{ display:block; }

.menu-panel{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(760px, 92%); background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12); border-radius:16px;
  padding:16px; backdrop-filter:saturate(140%) blur(12px);
}
.menu-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.menu-head h3{ margin:0; font-size:1.05rem; opacity:.95; }
.menu-close{
  width:40px; height:40px; border-radius:12px; border:1px solid var(--line);
  background:rgba(255,255,255,0.06); color:var(--fg); font-size:22px;
}
.menu-groups{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.menu-group{ background:rgba(255,255,255,0.04); border:1px solid var(--line); border-radius:12px; padding:12px; }
.menu-group h4{ margin:0 0 8px; color:var(--ac); font-size:0.95rem; }
.menu-list{ list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.menu-list a{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:10px 12px; border-radius:10px; border:1px solid transparent;
  background:rgba(255,255,255,0.02);
}
.menu-list a:hover, .menu-list a:focus{
  border-color:var(--line); background:rgba(137,207,240,0.10); outline:none;
}
/* FORCE VERTICAL SPACE BETWEEN “Profile / Performance / Contact” */
.menu-panel .menu-groups{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  /* gaps (with Safari fallbacks) */
  grid-row-gap:24px !important;
  row-gap:24px !important;
  grid-column-gap:16px !important;
  column-gap:16px !important;
  padding-top:2px !important;   /* avoid border-touch illusion */
  padding-bottom:2px !important;
}

/* Fallback margin in case gap is ignored */
.menu-panel .menu-groups .menu-group{
  margin:0 0 24px 0 !important;
}

/* Mobile: single column, keep spacing */
@media (max-width:680px){
  .menu-panel .menu-groups{
    grid-template-columns:1fr !important;
  }
}
/* HARD SPACER between Profile / Performance / Contact groups */
.menu-panel .menu-groups{ display:block !important; }     /* stack */
.menu-panel .menu-groups .menu-group{ display:block !important; }

/* add a spacer after each group except the last */
.menu-panel .menu-groups .menu-group:not(:last-child)::after{
  content:"";
  display:block;
  height:22px;             /* space size */
}
/* === MENU GROUPS: guaranteed spacing + no seam === */
.menu-panel .menu-groups{ display:block !important; }              /* stack groups */

.menu-panel .menu-groups .menu-group{
  /* real space around each group */
  margin:14px 0 !important;

  /* draw border inside so adjacent groups don't "touch" */
  border:none !important;
  outline:1px solid var(--line) !important;
  outline-offset:-1px;                                            /* inside the card */
  background-clip: padding-box;
}

/* first group: no extra top margin */
.menu-panel .menu-groups .menu-group:first-child{
  margin-top:0 !important;
}
.menu-gap{ height:3px; }
@media (max-width:680px){ .menu-gap{ height:3px; } }

/* Remove the extra bottom space under Achievements / Gallery in the menu */
.menu-groups .menu-group{
  padding:10px 12px 0 !important;      /* no bottom padding */
}
.menu-groups .menu-group .menu-list{
  gap:6px !important;
  margin:0 0 -6px 0 !important;        /* cancels the last gap */
  padding:0 !important;
}
.menu-groups .menu-group .menu-list li{ margin:0 !important; }
.menu-groups .menu-group .menu-list li:last-child a{
  padding-bottom:8px !important;       /* compact final item */
}
/* soften bottom cut only for the final menu group (Contact) */
.menu-groups .menu-group:last-of-type{
  padding-bottom:10px !important;      /* add a bit back */
}
.menu-groups .menu-group:last-of-type .menu-list{
  margin-bottom:0 !important;
}
.menu-groups .menu-group:last-of-type .menu-list li:last-child a{
  padding-bottom:10px !important;
}

/* =========================
   HERO
   ========================= */
.hero{
  position:relative; min-height:88vh; display:grid; place-items:center; overflow:hidden;
}
.hero-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center;
filter:none;  
  transform:scale(1.05);
}
.hero-overlay{
  position:absolute; inset:0;
  background:radial-gradient(ellipse at center, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,0.75) 100%);
}
.hero-content{ position:relative; z-index:1; text-align:center; padding:120px 0 72px; }
.hero-title{ margin:0 0 10px; font-size:clamp(2rem,6vw,4rem); font-weight:700; letter-spacing:.5px; }
.hero-subtitle{ margin:0 0 24px; color:var(--ac); opacity:.95; font-size:clamp(1rem,2.5vw,1.25rem); }
.hero-cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.btn{
  border:1px solid var(--ac); padding:12px 18px; border-radius:999px;
  font-weight:700; letter-spacing:.3px; transition:.15s ease;
  display:inline-block; color:var(--fg);
}
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--ac); color:#0a0a0a; border-color:transparent; }
.btn-primary:hover{ background:#a7dbf5; }
.btn-outline{ background:transparent; }
.btn-outline:hover{ background:rgba(137,207,240,0.12); border-color:var(--fg); }
.hero-overlay{
  position:absolute; inset:0;
  background: rgba(0,0,0,0.5);  /* 50% black */
  pointer-events:none;          /* let clicks go through */
}
@media (max-width:680px){
  .hero-overlay{ background: rgba(0,0,0,0.6); }
}

/* =========================
   UNIVERSAL SECTION + DIVIDERS (gapless, preserve look)
   ========================= */
.section{
  position:relative;
  /* keep content clear of the dividers */
  padding-top: calc(var(--section-pad) + var(--divider-h));
  padding-bottom: calc(var(--section-pad) + var(--divider-h));
}

.section::before,
.section::after{
  content:"";
  position:absolute; left:0; right:0;
  height: var(--divider-h);
  background: url("assets/img/devider.svg") center / cover no-repeat;
  pointer-events:none; user-select:none;
  will-change: transform;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}

/* Overlap by 1px without scaling the SVG (prevents hairline gaps) */
.section::before{ top:0; transform: translateY(-1px); }
.section::after{ bottom:0; transform: translateY(1px) scaleY(-1); }


/* =========================
   SECTION HEADS / SUBHEADS
   ========================= */
.section-head{
  margin:0 0 20px;
  display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap;
  border-bottom:1px solid rgba(255,255,255,0.06);
  padding-bottom:10px;
}
.section-head h2{ margin:0; font-size:1.85rem; letter-spacing:.4px; }
.section-head p{ margin:0; color:var(--fg-dim); }

.block-subhead{
  margin:0 0 10px;
  font-size:1.05rem; letter-spacing:.3px; color:var(--ac);
}

/* =========================
   CARDS (glass)
   ========================= */
.glass-card{
  background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border:1px solid var(--line); border-radius:18px; padding:10px; overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,0.35);
}
.glass-card img{
  display:block; width:100%; height:auto; border-radius:12px; transform:translateZ(0);
}

/* ABOUT */
.about-grid{ display:grid; grid-template-columns:1fr 1.25fr; gap:24px; align-items:center; }
.about-bullets{ margin:0 0 12px; padding-left:18px; line-height:1.8; }

/* INFO */
.info-grid{ display:grid; grid-template-columns:1fr 1.3fr; gap:28px; align-items:start; }
.player-photo{ object-fit:contain; }
.pill-row{ display:flex; flex-wrap:wrap; gap:10px; margin:6px 0 16px; }
.pill{ border:1px solid var(--line); padding:6px 12px; border-radius:999px; color:var(--fg-dim); font-weight:700; font-size:.85rem; }

/* 3-up on desktop as requested */
.info-cards{ display:grid; gap:16px; grid-template-columns:repeat(3, 1fr); }
.info-card{
  background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border:1px solid var(--line); border-radius:16px; padding:18px;
  transition:transform .15s ease, border-color .15s ease;
}
.info-card:hover{ transform:translateY(-2px); border-color:rgba(137,207,240,0.45); }
.info-card h4{ margin:0 0 10px; color:var(--ac); font-size:1rem; }
.info-card ul{ margin:0; padding-left:16px; line-height:1.9; }
.info-cta{ display:flex; justify-content:center; }

/* ACHIEVEMENTS */
.achievements-grid{ display:grid; grid-template-columns:1fr 1.2fr; gap:24px; align-items:center; }

/* nice padded list so lines don't touch borders */
.achievements-list{
  background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
  border:1px solid var(--line); border-radius:16px; padding:18px 20px;
}
.achievements-list ul{ margin:8px 0 0; padding-left:18px; line-height:1.85; }
.achievements-list li + li{ margin-top:6px; }

/* STATS */
.stats-tagline{ margin:0; color:var(--fg-dim); opacity:.9; }
.kpi-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; margin-bottom:22px; }
.kpi{
  background:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border:1px solid var(--line); border-radius:16px; padding:18px; text-align:center;
}
.kpi-value{ font-size:2rem; font-weight:700; }
.kpi-label{ opacity:.85; letter-spacing:.3px; }
.season-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; }
.season-card{
  background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border:1px solid var(--line); border-radius:16px; padding:16px; display:flex; flex-direction:column; gap:10px;
}
.season-head{ display:flex; align-items:center; justify-content:space-between; }
.season-head h3{ margin:0; }
.badge{ border:1px solid var(--ac); color:var(--ac); padding:4px 10px; border-radius:999px; font-size:.75rem; font-weight:700; }
.season-bars{ display:grid; gap:10px; }
.bar{ display:grid; grid-template-columns:52px 1fr 52px; gap:10px; align-items:center; }
.bar span{ opacity:.85; }
.track{ position:relative; height:10px; background:rgba(255,255,255,0.06); border-radius:999px; overflow:hidden; }
.track i{
  position:absolute; inset:0; width:0;
  background:linear-gradient(90deg, rgba(137,207,240,.15), var(--ac));
  border-radius:999px; display:block;
}
.season-foot{ display:flex; gap:16px; opacity:.85; font-size:.95rem; }
.stats-note{ opacity:.7; font-size:.9rem; margin-top:12px; }

.stats-note a{ color:var(--ac); text-decoration:underline; }
.pb-click{ cursor:pointer; }

/* BIOGRAPHY */
.bio-wrap{ max-width:900px; }

.bio-text{
  margin:0 0 12px;
  line-height:1.85;
  color:var(--fg-dim);
}

/* subheads */
.block-subhead{
  margin:0 0 10px;
  font-size:1.05rem;
  letter-spacing:.3px;
  color:var(--ac);
}
.block-subhead-lg{
  font-size:1.35rem;
  letter-spacing:.35px;
}
/* Motto box — ensure it looks great on phones too */
.bio-quote{
  display:block;
  width:min(860px, 92%);        /* shrink nicely on mobile */
  margin:0 auto clamp(16px, 3vw, 28px);  /* space below on all screens */
  padding:12px 16px;
  text-align:center;
  font-weight:800;
  font-size:clamp(0.95rem, 3.8vw, 1.25rem);  /* responsive text size */
  line-height:1.5;
  color:var(--fg);
  background:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,0.25);
}

/* Give the motto box a lot more room on phones */
@media (max-width:680px){
  .bio-quote{
    padding:26px 24px !important;      /* thicker inside */
    margin-bottom:48px !important;     /* MUCH more space below */
    width:min(860px, 94%) !important;
    line-height:1.7;
  }
}

/* If you still need more, bump this number: */
@media (max-width:480px){
  .bio-quote{ margin-bottom:56px !important; }
}

/* Make the motto fit on ONE LINE on phones */
@media (max-width: 680px){
  .bio-quote{
    white-space: nowrap;                         /* keep it on one line */
    font-size: clamp(0.9rem, 4vw, 1.15rem) !important;  /* smaller on small screens */
    letter-spacing: .25px;
    line-height: 1.4;
    padding: 18px 16px !important;              /* a bit tighter so it fits */
  }
}

/* Extra-tight on very small devices */
@media (max-width: 380px){
  .bio-quote{
    font-size: clamp(0.85rem, 4.6vw, 1rem) !important;
  }
}



/* --- Teams (compact list) --- */
.teams-compact{
  list-style:none;
  margin:8px 0 0;
  padding:0;
  display:grid;
  gap:8px;
  grid-template-columns:repeat(2, minmax(0,1fr));
}
@media (max-width:740px){
  .teams-compact{ grid-template-columns:1fr; }
}

.team-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  min-height:40px;
  border:1px solid var(--line);
  border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.02));
  transition:border-color .15s ease, transform .15s ease;
}
.team-row:hover{
  transform:translateY(-1px);
  border-color:rgba(137,207,240,0.45);
}

.year-pill{
  flex:0 0 auto;
  min-width:90px;
  text-align:center;
  font-size:.78rem;
  font-weight:700;
  color:var(--fg-dim);
  border:1px solid var(--line);
  border-radius:999px;
  padding:2px 8px;
}

.team-name{
  font-weight:700;
  letter-spacing:.2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Current team emphasis */
.team-row.is-current{
  position:relative;
  border-color:rgba(137,207,240,0.55);
  box-shadow:0 8px 30px rgba(0,0,0,0.22);
}
.team-row.is-current::before{
  content:"";
  position:absolute;
  left:-1px; top:6px; bottom:6px;
  width:3px; border-radius:2px;
  background:var(--ac);
}

/* Current badge */
.badge-current{
  margin-left:auto;                 /* push to right */
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  font-weight:700;
  letter-spacing:.2px;
  background:var(--ac);
  color:#0a0a0a;
  border:1px solid transparent;
}
.badge-current--tiny{
  font-size:.68rem;
  padding:1px 6px;
}
/* Remove left accent line on current team */
.team-row.is-current::before{ display:none; }

/* Remove the left accent line on the current team */
.team-row.is-current::before{ display:none; }

/* Space ABOVE the "Played in teams" heading (scales on mobile too) */
.bio-wrap .block-subhead-lg{
  margin-top: clamp(32px, 3vw, 24px);  /* mobile -> desktop */
}
/* Make "Played in teams" heading bolder */
.bio-wrap .block-subhead-lg{
  font-weight: 800;                 /* heavier than default */
  margin-top: clamp(32px, 3vw, 24px); /* keep the top spacing you asked for */
}



/* HIGHLIGHTS */
.section-highlights .yt-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; }
.yt-card{
  position:relative; border:1px solid var(--line); border-radius:14px; overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  cursor:pointer; transition:transform .15s ease, border-color .15s ease;
}
.yt-card:hover{ transform:translateY(-2px); border-color:rgba(137,207,240,0.45); }
.yt-thumb{ width:100%; height:180px; object-fit:cover; display:block; }
.yt-meta{ padding:12px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.yt-title{ margin:0; font-size:.95rem; }
.yt-play{ border:1px solid var(--ac); color:var(--ac); padding:4px 10px; border-radius:999px; font-weight:700; font-size:.8rem; }

/* GALLERY (with lightbox) */
.gallery-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; }
.shot{
  margin:0; border-radius:16px; overflow:hidden; position:relative;
  background:rgba(255,255,255,0.03);
  border:1px solid var(--line);
  transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
  cursor:zoom-in;
}
.shot:hover{
  transform:translateY(-3px);
  border-color:rgba(137,207,240,0.45);
  box-shadow:0 18px 50px rgba(0,0,0,0.35);
}
.shot img{ width:100%; height:260px; object-fit:cover; display:block; }

/* Gallery: "See full gallery" button */
.gallery-actions{
  margin-top: clamp(40px, 2.5vw, 22px); /* more breathing room, scales on mobile */
  display:flex;
  justify-content:center;
}



/* Full gallery modal grid (reuses .modal base styles) */
.full-gallery-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:10px;
  margin-top:10px;
}
.full-gallery-grid img{
  width:100%; height:140px; object-fit:cover; border-radius:10px;
  border:1px solid var(--line); cursor:zoom-in;
  background:rgba(255,255,255,0.03);
  transition:transform .12s ease, border-color .12s ease;
}
.full-gallery-grid img:hover{
  transform:translateY(-2px);
  border-color:rgba(137,207,240,0.45);
}

@media (max-width:980px){ .full-gallery-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:680px){ .full-gallery-grid{ grid-template-columns:repeat(2,1fr); } }


/* Lightbox (reuse modal styles) */
.lb{ position:fixed; inset:0; z-index:1300; display:none; }
.lb[aria-hidden="false"]{ display:block; }
.lb .bg{ position:absolute; inset:0; background:rgba(0,0,0,0.7); backdrop-filter:blur(4px); }
.lb .dialog{
  position:relative; z-index:1; width:min(1000px, 92%); margin:8vh auto;
  border-radius:16px; border:1px solid var(--line);
  background:#111; padding:10px;
}
.lb img{ display:block; width:100%; height:auto; border-radius:12px; }
.lb .close{
  position:absolute; top:10px; right:10px; width:40px; height:40px;
  border-radius:10px; border:1px solid var(--line); background:rgba(255,255,255,0.06);
  color:var(--fg); font-size:22px;
}

/* AGENTS */
.agents-wrap{ display:flex; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap; text-align:center; }
.muted{ color:var(--fg-dim); }

/* FOOTER */
.site-footer{ padding:26px 0; background:#0d0d0d; color:rgba(255,255,255,0.9); border-top:1px solid var(--line); }
.footer-inner{ display:flex; align-items:center; justify-content:space-between; }
.socials{ display:flex; gap:16px; }
.socials a{ opacity:0.9; }
.socials a:hover{ color:var(--ac); }

/* MODALS (generic) */
.modal{ position:fixed; inset:0; display:none; z-index:1200; }
.modal[aria-hidden="false"]{ display:block; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,0.6); backdrop-filter:blur(3px); }
.modal-dialog{
  position:relative; z-index:1; width:min(560px, 92%); margin:8vh auto 0;
  background:#121212; border:1px solid var(--line); border-radius:16px; padding:20px;
  box-shadow:0 30px 80px rgba(0,0,0,0.5);
}
.modal-close{
  position:absolute; top:8px; right:8px; width:36px; height:36px; border-radius:10px;
  border:1px solid var(--line); background:transparent; color:var(--fg); font-size:20px; cursor:pointer;
}

/* FORM */
.contact-form{ display:grid; gap:14px; }
.form-row{ display:grid; gap:8px; }
input, textarea{
  background:#121212; color:var(--fg); border:1px solid rgba(255,255,255,0.14);
  border-radius:10px; padding:12px 14px; outline:none;
}
input:focus, textarea:focus{ border-color:var(--ac); box-shadow:0 0 0 4px rgba(137,207,240,0.15); }

/* RESPONSIVE — bigger divider on phone, layout tweaks */
@media (max-width: 980px){
  .menu-groups{ grid-template-columns:1fr; }
  .about-grid{ grid-template-columns:1fr; }
  .info-grid{ grid-template-columns:1fr; }
  .info-cards{ grid-template-columns:1fr 1fr; }
  .achievements-grid{ grid-template-columns:1fr; }
  .kpi-grid{ grid-template-columns:repeat(4, 1fr); }
  .season-grid{ grid-template-columns:1fr 1fr; }
  .section-highlights .yt-grid{ grid-template-columns:1fr 1fr; }
  .gallery-grid{ grid-template-columns:1fr 1fr; }
  :root{ --divider-h: 120px; }
}
@media (max-width: 680px){
  .hero-content{ padding-top:140px; }
  .info-cards{ grid-template-columns:1fr; }
  .kpi-grid{ grid-template-columns:1fr 1fr; }
  .season-grid{ grid-template-columns:1fr; }
  .section-highlights .yt-grid{ grid-template-columns:1fr; }
  .gallery-grid{ grid-template-columns:1fr; }
  .yt-thumb{ height:180px; }
  .shot img{ height:220px; }
  :root{ --divider-h: 160px; } /* larger divider on small phones */
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .btn:hover{ transform:none; }
}
/* Footer: mobile layout */
@media (max-width: 680px){
  .footer-inner{
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;              /* small space between text and socials */
  }
  .footer-inner p{
    margin: 0;            /* keep the copy on its own line */
    white-space: nowrap;  /* prevent awkward wraps */
  }
  .socials{
    margin-top: 4px;
    gap: 14px;            /* comfy tap targets */
  }
}
/* Tighter section spacing around dividers */

/* Tablet */
@media (max-width: 980px){
  :root{
    --section-pad: 42px;   /* was 64px */
    /* keep your existing --divider-h here (120px) */
  }
  .section{
    padding-top: calc(var(--divider-h) + 12px);
    padding-bottom: calc(var(--divider-h) + 12px);
  }
}

/* Phone — extra-tight spacing around dividers */
@media (max-width:680px){
  :root{
    --section-pad: 8px;  /* tighter content padding */
  }
  .section{
    padding-top:  calc(var(--divider-h) + 2px) !important;
    padding-bottom: calc(var(--divider-h) + 2px) !important;
  }
  .section-head{
    margin-bottom:8px !important;
    padding-bottom:4px !important;
  }
}