/* ==========================================================================
   SG EduTech Solutions — visual refresh layer  (v1, 2026-09-08)
   Loaded LAST on every public page, after assets/sg-brand-standard.css.

   This file only refines presentation: spacing rhythm, card alignment,
   typography, focus states and motion safety. It adds no new components and
   changes no markup, so removing the <link> restores the previous look.
   ========================================================================== */

:root{
  /* Surface + line scale -------------------------------------------------- */
  --sgr-surface:#ffffff;
  --sgr-surface-soft:#f6f9f9;
  --sgr-surface-sink:#eef4f4;
  --sgr-line:#e2ebeb;
  --sgr-line-strong:#cfdedd;

  /* Elevation scale — one family, three steps ---------------------------- */
  --sgr-shadow-1:0 1px 2px rgba(0,50,59,.04), 0 4px 12px rgba(0,50,59,.05);
  --sgr-shadow-2:0 2px 4px rgba(0,50,59,.05), 0 12px 28px rgba(0,50,59,.08);
  --sgr-shadow-3:0 4px 8px rgba(0,50,59,.06), 0 24px 48px rgba(0,50,59,.12);

  /* Radius scale ---------------------------------------------------------- */
  --sgr-r-sm:10px;
  --sgr-r-md:14px;
  --sgr-r-lg:18px;
  --sgr-r-xl:22px;

  --sgr-focus:#00A8B5;
  --sgr-ease:cubic-bezier(.22,.61,.36,1);
}

/* ==========================================================================
   1. Base typography and text hygiene
   ========================================================================== */

body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* Headings read tighter and break into more even lines. */
h1,h2,h3,
.section-title,
.sg-section-title h2{
  text-wrap:balance;
}

h1,.hero-title{letter-spacing:-.03em;}
h2,.section-title{letter-spacing:-.022em;}
h3,h4{letter-spacing:-.012em;}

/* Heading leading.
   sg-brand-standard.css sets `body{line-height:1.6!important}` and then
   corrects headings only under `main h1/h2/h3`. Most pages here (the home page
   included) have no <main> element, so every heading inherited 1.6 — body
   leading on 37px display type, which is what made multi-line headings look
   loose and unowned. These rules set leading only; each component keeps its own
   font size. */
h1{line-height:1.08;}
h2{line-height:1.16;}
h3{line-height:1.25;}
h4{line-height:1.3;}
h5,h6{line-height:1.35;}

/* Body copy: avoid single-word last lines. */
p,li{text-wrap:pretty;}

/* The brand sheet sets `overflow-wrap:anywhere` on cards, which breaks
   ordinary words mid-syllable. Break only where a word genuinely cannot fit. */
.card,.content-card,.sg-category-card,.value-card{
  overflow-wrap:break-word;
}

/* Long unbroken strings (SKUs, URLs) still need an escape hatch. */
.prod-body h4,.product-card h3,.sg-directory-grid a{
  overflow-wrap:anywhere;
}

::selection{background:rgba(0,168,181,.22);color:#00323B;}

/* Measure control — long single-column paragraphs become unreadable past
   ~75 characters. */
.section-sub,
.sg-section-title p{
  max-width:62ch;
}

/* ==========================================================================
   2. Focus visibility (keyboard accessibility)
   ========================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--sgr-focus);
  outline-offset:2px;
  border-radius:6px;
}

/* Dark surfaces need a light ring instead. */
.hero-section a:focus-visible,
.why-section a:focus-visible,
.caps-band a:focus-visible,
.newsletter-section a:focus-visible,
.newsletter-section button:focus-visible,
.sg-home-footer a:focus-visible,
.sg-shop-hero a:focus-visible{
  outline-color:#8ee6ee;
}

/* ==========================================================================
   3. Motion safety
   Reveal-on-scroll starts at opacity:0. If a visitor has asked for reduced
   motion — or if the observer never runs — the content must still be there.
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{opacity:1 !important;transform:none !important;}
  .marquee-inner{animation:none !important;}
}

/* Safety net: with scripting unavailable the IntersectionObserver never runs,
   which would leave most of the home page permanently at opacity:0. */
@media (scripting:none){
  .reveal{opacity:1 !important;transform:none !important;}
}

/* ==========================================================================
   4. Buttons — one consistent size, weight and interaction model
   ========================================================================== */

.btn,
.hdr-btn,
.add-btn,
.gbtn,
.btab,
.tab-btn{
  font-weight:600;
  letter-spacing:.005em;
  transition:background-color .18s var(--sgr-ease),
             border-color .18s var(--sgr-ease),
             color .18s var(--sgr-ease),
             box-shadow .18s var(--sgr-ease),
             transform .18s var(--sgr-ease);
}

.btn{min-height:44px;}

/* Lift on hover, settle on press — the press state was missing everywhere. */
.btn:hover,.add-btn:hover{transform:translateY(-2px);}
.btn:active,.add-btn:active,.hdr-btn:active{transform:translateY(0);}

.btn-orange:hover{box-shadow:0 8px 20px rgba(220,115,57,.32);}
.btn-navy:hover{box-shadow:0 8px 20px rgba(0,50,59,.28);}

/* Icons inside buttons should not shrink or wrap away from their label. */
.btn i,.hdr-btn i,.add-btn i{flex:none;}

/* Filter / tab chips */
.btab,.tab-btn,.gbtn,.sg-grade-chip{border-radius:999px;}
.btab:hover,.tab-btn:hover{background:var(--sgr-surface-soft);}

/* ==========================================================================
   5. Cards — equal heights, aligned footers
   The single biggest source of visual noise on this site is grids of cards
   whose CTAs land at different heights. Every card is already a flex column;
   these rules pin the last row of each card to the bottom.
   ========================================================================== */

.phase-card,.grade-card,.subj-big-card,.age-card,
.bundle-card,.prod-card,.product-card,
.dl-card,.event-card,.blog-card,.testi-card,.why-item,
.sg-category-card,.value-card{
  height:100%;
  transition:transform .22s var(--sgr-ease), box-shadow .22s var(--sgr-ease),
             border-color .22s var(--sgr-ease);
}

/* Calmer, single-family elevation instead of four different shadow recipes. */
.phase-card,.age-card,.bundle-card,.prod-card,
.product-card,.grade-card,.subj-big-card,
.sg-category-card{
  box-shadow:var(--sgr-shadow-1);
  border-color:var(--sgr-line);
}
.phase-card:hover,.age-card:hover,.bundle-card:hover,.prod-card:hover,
.product-card:hover,.grade-card:hover,.subj-big-card:hover,
.sg-category-card:hover{
  box-shadow:var(--sgr-shadow-2);
  transform:translateY(-4px);
}

/* Bottom-pinned card footers. */
.phase-cta,.age-cta,.explore-link{margin-top:auto;}
.bundle-foot{margin-top:auto;}

/* Card grids stretch their items so `height:100%` has something to fill. */
.phase-grid,.grade-cards-grid,.subj-big-grid,.age-grid,
.bundles-grid,.products-grid,.product-grid,
.dl-grid,.event-grid,.blog-grid,.testi-grid,
.why-grid,.sg-category-grid{
  align-items:stretch;
}

/* `.dl-card` and `.event-card` are horizontal flex rows, so their inner
   column needs to be the flex context that pins the meta line. */
.dl-card{align-items:stretch;}
.dl-body{display:flex;flex-direction:column;flex:1;min-width:0;}
.dl-body p{flex:1;}
.dl-meta{margin-top:auto;padding-top:4px;}

.event-body{display:flex;flex-direction:column;min-width:0;}
.event-body p{flex:1;}
.event-meta{margin-top:auto;padding-top:4px;}

.blog-body p{flex:1;}
.blog-meta{margin-top:auto;}

/* ==========================================================================
   6. Product cards (home page grid)
   Uniform image frame, truncated badge, clamped title, one row of tags,
   and price + CTA locked to the bottom edge of every card.
   ========================================================================== */

.prod-card{
  display:flex;
  flex-direction:column;
  border-radius:var(--sgr-r-lg);
}

.prod-img{
  aspect-ratio:4/3;
  min-height:0;
  padding:0;
  background:linear-gradient(160deg,#fbfdfd,#f1f7f7);
  border-bottom:1px solid var(--sgr-line);
  overflow:hidden;
}
.prod-img img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:16px;
  transition:transform .35s var(--sgr-ease);
}
.prod-card:hover .prod-img img{transform:scale(1.04);}

/* Badges were running the full width of the card and colliding with the art. */
.prod-badge{
  max-width:calc(100% - 24px);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  letter-spacing:.04em;
  box-shadow:0 2px 8px rgba(0,50,59,.18);
}

.prod-body{
  display:flex;
  flex-direction:column;
  flex:1;
  padding:16px 18px 18px;
}

/* The bare "3+" age marker was almost invisible; make it a readable pill. */
.prod-grade{
  align-self:flex-start;
  background:var(--sgr-surface-sink);
  color:#00323B;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.04em;
  padding:2px 8px;
  border-radius:999px;
  margin-bottom:8px;
}

.prod-body h4{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:2.6em;
  line-height:1.3;
  margin-bottom:8px;
}

/* Tags occupy a fixed two-line block. Some catalogue "tags" are full
   sentences, so each one truncates rather than reflowing the whole card, and
   the reserved height keeps every card in a row on the same rhythm. */
.prod-tags{
  display:flex;
  flex-wrap:wrap;
  align-content:flex-start;
  gap:5px;
  height:3.15rem;
  overflow:hidden;
  margin-bottom:10px;
}
.prod-tag{
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:1.4;
}

/* Price and CTA sit on the card's baseline, so every CTA in a row lines up. */
.prod-price{
  margin-top:auto;
  padding-top:10px;
  margin-bottom:12px;
  font-variant-numeric:tabular-nums;
}
.prod-card .add-btn{
  margin-top:0;
  min-height:40px;
  border-radius:var(--sgr-r-sm);
}

/* Catalogue cards elsewhere on the site use `cover`, which crops product
   photography. Product shots should be shown whole. */
.product-image img{object-fit:contain;padding:12px;}
.product-price strong{font-variant-numeric:tabular-nums;}

/* ==========================================================================
   7. Section headers
   `justify-content:space-between` let wide headings push the section CTA onto
   its own line and back to the left margin. Give the text a column and keep
   the action on the right.
   ========================================================================== */

.section-hdr{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px 32px;
  flex-wrap:wrap;
}
.section-hdr > div:first-child{
  flex:1 1 420px;
  min-width:0;
  max-width:760px;
}
.section-hdr > .btn,
.section-hdr > a.btn{
  margin-left:auto;
  flex:none;
  align-self:flex-end;
}

.section-title{margin-bottom:10px;}
.section-label{margin-bottom:8px;}

/* ==========================================================================
   8. Statistic grids — no orphan tiles
   `auto-fit` left a single tile stranded on its own row. Fixed tracks wrap
   predictably instead.
   ========================================================================== */

.caps-stat-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
@media(max-width:820px){.caps-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:420px){.caps-stat-grid{grid-template-columns:1fr;}}

/* Six "why us" tiles were laying out 5 + 1, stranding the last one. */
.why-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
@media(max-width:860px){.why-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:520px){.why-grid{grid-template-columns:1fr;}}
.why-item{padding:32px 22px;}

.caps-stat{border-radius:var(--sgr-r-md);}
.caps-stat .cnum{font-variant-numeric:tabular-nums;letter-spacing:-.02em;}

.hero-stats > div{min-width:0;}
.stat-num{font-variant-numeric:tabular-nums;letter-spacing:-.02em;}
.stat-label{line-height:1.35;}

/* ==========================================================================
   9. Header and navigation
   ========================================================================== */

.main-header{border-bottom-color:var(--sgr-line);}
.main-header.scrolled{box-shadow:var(--sgr-shadow-1);}
.nav-bar{border-bottom-color:var(--sgr-line);}

.main-header .search-wrap{background:var(--sgr-surface-soft);}
.main-header .search-wrap:focus-within{
  border-color:var(--sgr-focus);
  box-shadow:0 0 0 4px rgba(0,168,181,.14);
}

.main-header .icon-btn{background:var(--sgr-surface-sink);}
.main-header .icon-btn:hover{background:#dfeaea;}

/* Keep the nav from colliding with itself on narrow desktop widths. */
.nav-bar .sg-nav-inner{flex-wrap:wrap;}

/* ==========================================================================
   10. Content bands
   ========================================================================== */

.trust-bar{
  background:var(--sgr-surface-soft);
  border-bottom-color:var(--sgr-line);
}
.trust-item{white-space:nowrap;}

.subj-big-card,.grade-card,.age-card,.phase-card,
.bundle-card,.prod-card,.product-card{
  border-radius:var(--sgr-r-lg);
}

/* Bundle card headers wrapped to two lines on one card and one on the next,
   knocking the whole row out of alignment. */
.bundle-hdr{align-items:flex-start;min-height:84px;}
.bundle-hdr h4{line-height:1.25;}

/* Age cards: reserve two title lines so every description starts on the same
   line, and stop the wider age ranges ("13–15", "16–19") wrapping inside their
   fixed-width badge. */
.gc-badge{
  width:auto;
  min-width:44px;
  padding:0 11px;
  white-space:nowrap;
}
.grade-card h4{min-height:2.4em;line-height:1.2;}
.grade-card p{line-height:1.45;}

/* Same treatment for the subject and age-band cards. */
.subj-big-card h4{min-height:2.4em;line-height:1.2;}
.age-hdr{min-height:88px;}
.age-hdr h4{line-height:1.25;}

/* FAQ. The open state capped answers at 340px, which silently truncated the
   longer ones; give the transition enough headroom for any answer. */
.faq-item{border-radius:var(--sgr-r-md);}
.faq-item.open .faq-a{max-height:1400px;}
.faq-q{min-height:56px;}

/* ==========================================================================
   11. Shop page — image caption legibility
   The caption scrim was too light to hold white text over pale product photos.
   ========================================================================== */

.sg-showcase-card:after{
  height:64%;
  background:linear-gradient(to top,
    rgba(0,28,33,.94) 0%,
    rgba(0,28,33,.74) 38%,
    rgba(0,28,33,0) 100%);
}
.sg-showcase-label strong{text-shadow:0 1px 3px rgba(0,20,24,.5);}

.sg-showcase-card,.sg-showcase-stat{box-shadow:var(--sgr-shadow-3);}

/* ==========================================================================
   12. Footer
   ========================================================================== */

/* Seven pages (contact, quote, events, documents, po-upload, popia, thank-you)
   still carry a legacy bare `footer{text-align:center}` rule from a previous
   single-column footer. It captured the shared four-column footer and centred
   it, so the same footer read differently from page to page. */
.sg-home-footer{text-align:left;}

.sg-home-footer .footer-top{gap:40px 48px;}
.sg-home-footer a{transition:color .16s var(--sgr-ease);}

/* Payment chips read as disabled buttons at 8% white; lift them slightly. */
.pay-badge{
  background:rgba(255,255,255,.11);
  border:1px solid rgba(255,255,255,.13);
  color:#c3d5e8;
  padding:5px 11px;
  border-radius:8px;
}

/* ==========================================================================
   13. Images and media
   ========================================================================== */

img{
  max-width:100%;
  height:auto;
}
/* Product photography is usually a small subject on white; smooth downscaling
   keeps it from looking crunchy in card thumbnails. */
.prod-img img,.product-image img,.sg-showcase-card img{
  image-rendering:auto;
}

/* ==========================================================================
   14. Responsive refinements
   ========================================================================== */

@media(max-width:1100px){
  .products-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));}
}

@media(max-width:820px){
  .section-wrap{padding-top:56px;padding-bottom:56px;}
  .section-hdr{margin-bottom:28px;}
  .section-hdr > .btn,.section-hdr > a.btn{margin-left:0;}
  .why-inner{padding-top:64px;padding-bottom:64px;}
}

@media(max-width:640px){
  /* Stacked hero CTAs were each sized to their own label, giving a ragged
     left-aligned stack. Full-width blocks read as one deliberate group. */
  .hero-ctas{display:grid;grid-template-columns:1fr;gap:10px;}
  .hero-ctas .btn{width:100%;justify-content:center;}

  /* Hero stats wrapped as free-flowing flex items, so the second row never
     lined up with the first. Two even columns fix the alignment. */
  .hero-stats{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px 16px;
    margin-top:36px;
    padding-top:26px;
  }

  .hero-section{padding-top:56px;padding-bottom:56px;min-height:0;}
}

@media(max-width:560px){
  .section-wrap{padding-left:18px;padding-right:18px;}
  .products-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
  .prod-body{padding:12px 13px 14px;}
  .prod-body h4{font-size:.82rem;}
  .prod-price{font-size:1.05rem;}
  .prod-card .add-btn{font-size:.75rem;min-height:36px;}
  .trust-inner{gap:10px 18px;}
  .trust-div{display:none;}
  .bundle-hdr{min-height:0;}
}