/* Savior Martial Arts — Legacy & Discipline design system */
:root{
  --ink-bg:#15171B; --panel:#1A1D23; --panel-2:#21262E; --line:#282D36; --line-2:#3B424D;
  --text:#CDD2D9; --text-bright:#EEF1F5; --text-dim:#9BA3AE; --text-faint:#7F8893;
  --red:#C43E31; --red-dark:#A33328; --red-tint:#F4CFC9;
  /* From the logo artwork: steel blue for informational accents, silver for text. Red stays the action colour. */
  --steel:#2D4E73; --steel-light:#7FA6CC; --silver:#DEE0E2;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink-bg);color:var(--text);font-family:'Barlow','Segoe UI',system-ui,sans-serif;line-height:1.6;font-size:17px}
img{max-width:100%;display:block}
a{color:var(--text-bright);text-decoration:none}
a:hover{color:var(--steel-light)}
.display{font-family:'Bebas Neue',Impact,sans-serif;letter-spacing:1px;line-height:.95;color:var(--text-bright);font-weight:400}
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.eyebrow{display:flex;align-items:center;gap:12px;font-weight:700;font-size:13px;letter-spacing:3px;text-transform:uppercase;color:var(--steel-light)}
.eyebrow::before{content:"";width:44px;height:4px;background:var(--steel-light)}
.btn{display:inline-block;background:var(--red);color:#fff;font-weight:700;font-size:15px;letter-spacing:1px;text-transform:uppercase;padding:16px 30px;border:none;cursor:pointer}
.btn:hover{background:var(--red-dark);color:#fff}
.btn-ghost{display:inline-block;border:1px solid var(--line-2);color:var(--text);font-weight:700;font-size:15px;letter-spacing:1px;text-transform:uppercase;padding:15px 28px}
.btn-ghost:hover{border-color:var(--steel-light);color:var(--steel-light)}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(21,23,27,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(6px)}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px 24px;max-width:1280px;margin:0 auto}
.logo{font-family:'Bebas Neue',Impact,sans-serif;font-size:26px;letter-spacing:2px;color:var(--text-bright);white-space:nowrap}
.logo span{color:var(--steel-light)}
.logo .reg{color:inherit}
/* G2 — the header carries Scott's horizontal lockup as an image, 64px tall on
   a desktop and 46px on a phone (Ken: "a bit larger"). The bar grows only by
   what the image needs. The .logo text rules above still style the footer's
   text lockup. */
.site-header .logo{display:block;line-height:0;flex-shrink:0}
.site-header .logo img{display:block;height:64px;width:auto;max-width:100%}
/* Interim: both logo files are opaque on pure black, so they would sit in a
   darker rectangle against the site's near-black chrome. "lighten" takes the
   per-channel maximum, which turns the black background into exactly the
   colour behind it and leaves the chrome, white and brand red untouched. A
   transparent export would make this unnecessary, but it is no longer needed. */
.site-header .logo img,.site-footer .badge img{mix-blend-mode:lighten}
@media print{.site-header .logo img,.site-footer .badge img{mix-blend-mode:normal}}
/* G1 — the ® on the wordmark: superscript, never full size. */
.reg{font-size:.55em;line-height:0;vertical-align:super;letter-spacing:0;font-weight:inherit}
/* Wrap by item, never mid-word: "North Suffolk" moves to the next row whole
   rather than breaking in half when the header runs out of room. */
.nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:14px 14px;align-items:center;font-weight:600;font-size:14px;letter-spacing:1px;text-transform:uppercase}
.nav a{color:var(--text-dim);white-space:nowrap}
.nav a:hover,.nav a[aria-current="page"]{color:var(--text-bright)}
.nav .btn{padding:12px 14px;font-size:13px}
.nav-toggle{display:none;background:none;border:1px solid var(--line-2);color:var(--text);padding:8px 12px;font-size:18px;cursor:pointer}

/* Hero */
.hero{position:relative;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#1B2029 0%,#15171B 100%);overflow:hidden}
.hero .container{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:center;padding-top:80px;padding-bottom:70px}
.hero h1{font-size:clamp(44px,7vw,84px);margin:18px 0}
.hero h1 em{font-style:normal;color:var(--red)}
.hero p.lede{font-size:19px;color:var(--text-dim);max-width:60ch;margin:0 0 26px}
.hero .cta-row{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.hero-media img{width:100%;height:420px;object-fit:cover;object-position:center 15%;border:1px solid var(--line-2)}
.hero-note{font-size:13px;color:var(--text-faint);margin-top:14px}

/* Sections */
section{padding:64px 0}
.section-line{border-top:1px solid var(--line)}
h2.display{font-size:clamp(30px,4vw,46px);margin:14px 0 10px}
.sub{color:var(--text-dim);max-width:68ch;margin:0 0 32px;font-size:17px}
.grid{display:grid;gap:20px}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:var(--panel);border:1px solid var(--line);padding:28px;display:flex;flex-direction:column;gap:10px}
.card:hover{border-color:var(--steel-light)}
.card h3{font-family:'Bebas Neue',Impact,sans-serif;font-weight:400;font-size:26px;letter-spacing:1px;color:var(--text-bright);margin:0}
.card p{font-size:15px;color:var(--text-faint);margin:0;line-height:1.55}
.card img{height:190px;width:100%;object-fit:cover;border:1px solid var(--line)}
.card .more{margin-top:auto;font-weight:700;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:var(--steel-light)}

/* Red band */
.band{background:var(--red);padding:48px 0}
.band .container{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.band h2{font-size:clamp(28px,4vw,42px);color:#fff;margin:0 0 8px}
.band p{color:var(--red-tint);margin:0;font-size:16px}
.band .btn{background:var(--ink-bg)}
.band .btn:hover{background:#000}

/* Quote */
.quote{display:flex;gap:36px;align-items:flex-start}
.quote .mark{font-family:'Bebas Neue',Impact,sans-serif;font-size:110px;line-height:.6;color:var(--steel);flex-shrink:0}
.quote blockquote{margin:0;font-size:21px;font-style:italic;color:var(--text);max-width:70ch}
.quote cite{display:block;margin-top:10px;font-style:normal;font-weight:700;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--text-faint)}

/* Content pages */
.page-hero{border-bottom:1px solid var(--line);background:linear-gradient(180deg,#1B2029,#15171B);padding:56px 0 44px}
.page-hero h1{font-size:clamp(38px,5.5vw,64px);margin:16px 0 10px}
.page-hero .crumbs{font-size:13px;letter-spacing:1px;text-transform:uppercase;color:var(--text-faint)}
.page-hero .crumbs a{color:var(--text-dim)}
.split{display:grid;grid-template-columns:1.2fr 1fr;gap:44px;align-items:start}
.split img{width:100%;height:360px;object-fit:cover;border:1px solid var(--line-2)}
.prose p{color:var(--text-dim);max-width:66ch}
.prose h2{font-family:'Bebas Neue',Impact,sans-serif;font-weight:400;letter-spacing:1px;font-size:30px;color:var(--text-bright);margin:34px 0 10px}
.prose ul{color:var(--text-dim);padding-left:20px}
.prose li{margin:8px 0}
.prose li::marker{color:var(--steel-light)}
.placeholder{color:#E4B04A;font-weight:600}

/* Info strip / NAP */
.info-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.info-strip>div{background:var(--panel);padding:24px 26px}
.info-strip b{display:block;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--steel-light);margin-bottom:6px}
.info-strip span{color:var(--text-dim);font-size:15px}

/* Schedule table */
.tablewrap{overflow-x:auto;border:1px solid var(--line)}
table.schedule{width:100%;border-collapse:collapse;font-size:15px;min-width:640px}
table.schedule th{background:var(--steel);color:#fff;text-align:left;font-size:12px;letter-spacing:2px;text-transform:uppercase;padding:12px 16px;border-bottom:1px solid var(--line)}
table.schedule td{padding:12px 16px;border-bottom:1px solid var(--line);color:var(--text-dim)}

/* Form */
.lead-form{background:var(--panel);border:1px solid var(--line);padding:32px;display:grid;gap:14px;max-width:640px}
.lead-form label{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--text-faint)}
.lead-form input,.lead-form select,.lead-form textarea{width:100%;background:var(--panel-2);border:1px solid var(--line-2);color:var(--text-bright);padding:13px 14px;font-family:inherit;font-size:16px}
.lead-form input:focus,.lead-form select:focus,.lead-form textarea:focus{outline:2px solid var(--steel-light);outline-offset:0}
.lead-form .form-error{color:#E4B04A;font-weight:600;margin:0}
.lead-form .form-error:empty{display:none}
.lead-form [aria-invalid="true"]{border-color:#E4B04A}

/* FAQ */
.faq details{border:1px solid var(--line);background:var(--panel);margin-bottom:10px}
.faq summary{cursor:pointer;padding:18px 22px;font-weight:700;color:var(--text-bright);font-size:16px;list-style:none}
.faq summary::before{content:"+";color:var(--steel-light);font-weight:700;margin-right:12px}
.faq details[open] summary::before{content:"–"}
.faq .a{padding:0 22px 18px;color:var(--text-dim);font-size:15px;max-width:75ch}

/* Footer */
.site-footer{border-top:1px solid var(--line);padding:48px 0 32px;font-size:14px}
.site-footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
.site-footer h4{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--steel-light);margin:0 0 12px}
.site-footer a{display:block;color:var(--text-dim);margin:6px 0}
/* The round badge, centred between the link columns and the legal line. */
.site-footer .badge{display:flex;justify-content:center;margin-top:44px}
.site-footer .badge img{width:140px;height:auto}
.site-footer .legal{margin-top:36px;padding-top:18px;border-top:1px solid var(--line);color:var(--text-faint);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* Responsive */
/* The nav needs about 745px beside the 64px logo, which a 1120px window just
   provides, so it collapses into the menu button below 1120px rather than
   wrapping the button under the links. */
@media (max-width:1119px){
  .nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--ink-bg);border-bottom:1px solid var(--line);flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;padding:20px 24px;align-items:flex-start;gap:18px}
  .nav.open{display:flex}
  .nav-toggle{display:block}
}
@media (max-width:900px){
  .hero .container,.split{grid-template-columns:1fr}
  .grid.cols-3,.grid.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .info-strip{grid-template-columns:1fr}
  .site-footer .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr}
  .site-footer .cols{grid-template-columns:1fr}
  .hero-media img{height:280px}
  /* The wordmark is nowrap, so on a phone it has to scale down — at full size
     it makes the header wider than the screen and pushes the whole page into a
     sideways scroll. */
  .logo{font-size:20px;letter-spacing:1px}
  .site-header .logo{flex-shrink:1;min-width:0}
  .site-header .logo img{height:46px}
  .site-footer .badge img{width:100px}
  .site-header .bar{gap:12px;padding:14px 16px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* --- Photo redesign additions --- */
.hero-media img{height:460px}
.card img{transition:transform .35s ease}
.card:hover img{transform:scale(1.03)}
/* The banner was a fixed 280px tall, so the wider the screen the LESS of the
   photo you saw — under a third of the frame on a laptop. An aspect ratio keeps
   the same amount visible at every width. 16/9 shows about two thirds of a
   near-square shot, which is what it takes to hold both the instructor's face
   and the kneeling students. Cropping from 40% down keeps the face high in the
   frame and the red-haired student Scott singled out still in it. */
.banner{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center 40%;border:1px solid var(--line-2);margin-top:28px}
.meet{display:grid;grid-template-columns:380px 1fr;gap:44px;align-items:center}
.meet img{width:100%;border:1px solid var(--line-2)}
.gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.gallery img{width:100%;height:230px;object-fit:cover;border:1px solid var(--line);transition:transform .35s ease}
.gallery img:hover{transform:scale(1.03)}
/* Three-up row (Virginia Beach after-school): square cells so three phone snaps
   read as one set, sized by the column rather than a fixed height. Holds three
   across down to a tablet, then stacks to one column on a phone. */
.gallery.three{grid-template-columns:4fr 3fr 3fr;margin-bottom:44px}
.gallery.three img{height:auto;aspect-ratio:1}
/* The first photo is a landscape frame with faces edge to edge, so its cell is
   4:3 and a third wider; all three cells come out the same height. */
.gallery.three img:first-child{aspect-ratio:4/3}
/* Three landscape photos, equal cells (Virginia Beach page). */
.gallery.row3{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:28px}
.gallery.row3 img{height:auto;aspect-ratio:3/2}
/* Video embeds: a reserved 16:9 box with the media border, no layout shift. */
.video{position:relative;aspect-ratio:16/9;border:1px solid var(--line-2);background:var(--panel)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.prose .video{margin:0 0 28px}
.prose .video + .video{margin-top:-8px}
/* Photos inside a prose column: full column width, uncropped, with the media
   border. (.split img would otherwise force the 360px crop on them.) */
.split .prose img.photo{width:100%;height:auto;object-fit:unset;border:1px solid var(--line-2);margin:24px 0 8px}
/* Page hero with a photo to the right of the heading and lede (the schedule). */
.page-hero .with-media{display:grid;grid-template-columns:1.3fr 1fr;gap:44px;align-items:center}
.page-hero-media img{width:100%;border:1px solid var(--line-2)}
@media (max-width:900px){
  .meet{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-hero .with-media{grid-template-columns:1fr;gap:28px}
}
@media (max-width:560px){
  .hero-media img{height:300px}
  .gallery img{height:160px}
  .gallery.three{grid-template-columns:1fr}
  .gallery.three img{height:auto}
  .gallery.row3{grid-template-columns:1fr}
  .gallery.row3 img{height:auto}
}