/* Cyber L33T — responsive rebuild of the live Wix design.
   Colours, gradients and panel geometry were read off the live site's
   computed styles, not eyeballed. No build step, no JS. */

/* ponytail: self-hosted Poppins (latin subset, 8KB each). Wix pulls these
   from static.parastorage; hosting them ourselves keeps the page on one
   origin so a strict CSP stays possible. */
@font-face {
  font-family: Poppins; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/poppins-400.woff2") format("woff2");
}
@font-face {
  font-family: Poppins; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/assets/fonts/poppins-600.woff2") format("woff2");
}
@font-face {
  font-family: Poppins; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/fonts/poppins-700.woff2") format("woff2");
}

:root {
  --bg: #f2f2f2;             /* site background */
  --ink: #191919;            /* header + footer bar */
  --charcoal: #323232;       /* Our Story dark panel */
  --text: #3a3a3a;
  --slate-bg: #a9b9c2;       /* base behind the split sections */
  --slate-block: #7d9cab;    /* Get in Touch slate column */
  --mission: rgba(105, 142, 162, 0.7);
  --terracotta: #daa17d;
  --navy: #34508f;
  --navy-hover: #2a4177;
  --steel: #5f7d99;          /* inner-page subheading */
  --gold: #e8c547;
  --wrap: 1120px;
  --font: Poppins, "Century Gothic", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--navy); }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 1.35rem; }

/* ponytail: every off-site link is marked, and it is keyed off the protocol
   rather than a class so you cannot add one and forget the marker. Internal
   links are all root-relative, so they never match. .resource cards opt out --
   they already spell out "Read on cyber.gov.au" with their own arrow. */
a[href^="http://"]::after, a[href^="https://"]::after {
  content: "\00A0\2197"; font-size: 0.78em; opacity: 0.7;
}
.resource > a::after { content: none; }

/* ---------- header ---------- */

.site-header { background: var(--ink); color: #fff; position: sticky; top: 0; z-index: 100; }
.site-header .wrap { display: flex; align-items: center; gap: 1rem; padding-block: 0.9rem; position: relative; }
.logo { display: flex; align-items: center; }
/* ponytail: the mark's viewBox is 826x137, so size by height or it renders
   as wide as the whole column. Live runs it at 67px in an 88px bar; 44/58
   keeps the sticky header from eating a phone screen. */
.logo img { height: 44px; width: auto; }

/* CSS-only menu: <details> holds ONLY the toggle; the list is a sibling shown
   via .menu[open] ~ .nav. Keeping the list inside a closed <details> made it
   compute to zero width on desktop and spill its links off-screen. */
.menu { margin-left: auto; }
.menu summary {
  list-style: none; cursor: pointer; width: 42px; height: 34px;
  border-radius: 7px; background: rgba(255,255,255,0.16);
  display: grid; place-content: center; gap: 4px;
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary span { display: block; width: 18px; height: 2px; background: #fff; }
.menu[open] summary { background: rgba(255,255,255,0.3); }

.nav {
  display: none;
  position: absolute; right: 1.35rem; top: calc(100% + 0.4rem);
  background: var(--ink); border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px; padding: 0.5rem; margin: 0; list-style: none;
  min-width: 220px; box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}
.menu[open] ~ .nav { display: block; }

.nav a {
  display: block; color: #fff; text-decoration: none;
  padding: 0.6rem 0.8rem; border-radius: 6px; font-size: 0.95rem;
}
.nav a:hover, .nav a:focus-visible { background: rgba(255,255,255,0.12); }
.nav a[aria-current="page"] { color: #9fd0ef; }
/* the portal is the one nav item that leaves the site, so it gets its own
   outline. Keyed off the href, not a class, so a future off-site link can't
   be added without the treatment coming with it. */
.nav a[href^="http"] { border: 1px solid rgba(255,255,255,0.32); border-radius: 999px; }
.nav a[href^="http"]:hover, .nav a[href^="http"]:focus-visible { border-color: rgba(255,255,255,0.6); }

@media (min-width: 900px) {
  .logo img { height: 58px; }
  .menu { display: none; }
  .nav {
    display: flex; position: static; margin-left: auto; gap: 0.25rem;
    background: none; border: 0; box-shadow: none; padding: 0; min-width: 0;
  }
  .nav a { padding: 0.4rem 0.7rem; font-size: 0.88rem; }
}

/* ---------- home: one continuous backdrop ---------- */

/* The live site runs a single photo at 50% opacity over a diagonal gradient,
   behind the headline, the mission panel AND the audience cards. Splitting
   that into separate sections is what made the image look chopped off. */
.showcase {
  position: relative; isolation: isolate;
  background: linear-gradient(225deg, #fec1b4 4.2%, #ccd5d2 22.7%, #7899a9 47.6%, #698ea2 100%);
}
.showcase::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: url("/media/hero-home.jpg") center/cover no-repeat;
  opacity: 0.5;
}

.showcase-head { padding-block: clamp(2.5rem, 10vw, 6rem) clamp(1.75rem, 6vw, 3rem); }
.showcase-head h1 {
  font-size: clamp(2.35rem, 9.5vw, 4.5rem); line-height: 1.12; margin: 0;
  font-weight: 700; color: #fff; max-width: 14ch; letter-spacing: -0.01em;
}

/* an inset panel, not a full-bleed band -- the photo needs to run past it on
   both sides or the hero reads as a chopped-off strip */
.mission-panel {
  background: var(--mission); color: #fff;
  padding: clamp(1.25rem, 4.5vw, 1.9rem) clamp(1.25rem, 4vw, 1.9rem);
}
.mission h2 { font-size: clamp(1.15rem, 4.6vw, 1.6rem); margin: 0 0 0.5rem; color: #fff; font-weight: 400; }
.mission h2 b { font-weight: 700; }
.mission p { margin: 0; font-size: clamp(0.95rem, 3.2vw, 1.05rem); }

/* ---------- audience cards (frosted glass panel) ---------- */

.audiences { padding-block: clamp(2.25rem, 8vw, 3.75rem); }
.audience-list {
  list-style: none; margin: 0; display: grid;
  gap: clamp(2rem, 6vw, 2.5rem);
  /* the live site's signature panel: translucent, blurred, 30px radius */
  background: rgba(242, 242, 242, 0.5);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-radius: 30px; padding: clamp(1.75rem, 6vw, 3rem) clamp(1.25rem, 4vw, 2.5rem);
}
.audience { text-align: center; }
/* the whole card is the link, the way it was on the live site -- the photo and
   the heading both went to the audience page, not just the nav item */
.audience > a {
  display: block; height: 100%; text-decoration: none; color: inherit;
  border-radius: 20px; padding: 0.5rem;
  transition: transform 0.18s ease, background-color 0.18s ease;
}
.audience > a:hover, .audience > a:focus-visible {
  transform: translateY(-3px); background: rgba(255, 255, 255, 0.35);
}
.audience img {
  width: clamp(130px, 36vw, 175px); aspect-ratio: 1; object-fit: cover;
  border-radius: 50%; margin: 0 auto 1.1rem;
}
.audience h3 { font-size: clamp(1.1rem, 4.2vw, 1.3rem); margin: 0 0 0.6rem; color: var(--ink); font-weight: 600; }
.audience p { margin: 0 auto; max-width: 32ch; font-size: 0.95rem; }
.audience .go { display: inline-block; margin-top: 0.75rem; font-size: 0.85rem; font-weight: 600; color: var(--navy); }

@media (min-width: 760px) {
  .audience-list { grid-template-columns: repeat(3, 1fr); align-items: start; }
}

/* ---------- our story (full-bleed split) ---------- */

.story { background: var(--slate-bg); display: grid; }
/* the 30px radius is the whole reason the slate shows through as little
   diamond notches where panels meet -- square panels lose that entirely */
.story-panel {
  padding: clamp(2.25rem, 8vw, 4.5rem) 1.35rem;
  display: grid; place-content: center; border-radius: 30px;
}
/* the track has to be an explicit length: with an auto track, the h2's own
   width:100% resolves against a max-content track that is sized by the h2,
   and the hexagon collapses to the width of the word "Story". */
.story-panel--light {
  background: #fff; grid-template-columns: min(430px, 100%);
  /* the hexagon is already 430px of breathing room -- the section's normal
     block padding on top of that pushed the row 80px past the live height */
  padding-block: clamp(1.5rem, 4vw, 2rem);
}

/* the dotted hexagon is the heading's own background, not the panel's. That
   is what guarantees "Our Story" stays centred inside it at every width --
   as two independently-positioned layers they drifted apart. */
.story-panel--light h2 {
  aspect-ratio: 1;
  background: url("/media/hex-dots.png") center / contain no-repeat;
  display: grid; place-content: center;
  font-size: clamp(2.25rem, 9vw, 3.75rem); line-height: 1.23; margin: 0;
  color: #626262; font-weight: 700; text-align: left;
}

/* three paragraphs now, not one: the "what we leave behind / what we build
   instead" pair only reads as a contrast if the two sit on their own lines */
.story-panel--dark { background: var(--charcoal); color: #dcdcdc; gap: 0.9rem; }
/* live sets 18px/27px in a 388px column. Ours was 16.8px in a 443px column --
   smaller type over a longer line, which is what made it harder to read. */
.story-panel--dark p {
  margin: 0; font-size: clamp(1rem, 3.4vw, 1.125rem);
  line-height: 1.7; max-width: 34ch;
}
.story-panel--dark b { color: #fff; }
.story mark { background: none; color: var(--gold); font-weight: 600; }

@media (min-width: 860px) {
  .story { grid-template-columns: 1fr 1fr; }
  /* live runs these panels ~500px tall; without a floor they collapse to the
     text height and the split stops reading as two blocks */
  .story-panel { padding-inline: clamp(2rem, 5vw, 4rem); min-height: clamp(340px, 33vw, 500px); }
  /* live parks the hexagon hard against the panel's inner edge (10px gap at
     1440), so it balances the charcoal block rather than floating mid-panel */
  .story-panel--light { justify-content: end; padding-right: 12px; }
  /* live sets the copy 51px in from the charcoal panel's edge, not centred */
  .story-panel--dark { justify-content: start; }
}

/* ---------- get in touch (full-bleed colour blocks) ---------- */

.contact { background: var(--slate-bg); display: grid; }
.contact-copy {
  background: var(--slate-block); color: #fff;
  padding: clamp(2.25rem, 8vw, 4.5rem) 1.35rem;
  /* mobile keeps the terracotta as a top band so the palette survives */
  border-top: 14px solid var(--terracotta);
  border-radius: 30px 30px 0 0;
  display: grid; align-content: center;
}
/* 4.6vw, not 10vw: on desktop this heading lives inside the slate block, which
   is a fraction of the viewport. Sizing it off the full viewport made "Touch"
   wider than its own column at ~900px and the panel next door clipped it. */
.contact-copy h2 { font-size: clamp(2.25rem, 4.6vw, 3.75rem); line-height: 1.18; margin: 0 0 0.6rem; color: #fff; font-weight: 700; }
.contact-copy p { margin: 0; font-size: clamp(1rem, 3.6vw, 1.1rem); color: rgba(255,255,255,0.92); }

.contact-action {
  background: var(--bg); padding: clamp(2.25rem, 8vw, 4.5rem) 1.35rem;
  display: grid; align-content: center; justify-items: start; gap: 0.9rem;
  border-radius: 30px 30px 0 0;
}
.contact-action h3 { margin: 0; font-size: clamp(1.25rem, 5vw, 1.6rem); color: var(--ink); font-weight: 700; }
.contact-action p { margin: 0; max-width: 46ch; font-size: clamp(0.95rem, 3.2vw, 1.05rem); }
.contact-action .label { font-size: 0.85rem; color: #6a6a6a; text-transform: uppercase; letter-spacing: 0.06em; }
.offer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; max-width: 46ch; }
.offer-list li { position: relative; padding-left: 1.4rem; font-size: clamp(0.95rem, 3.2vw, 1.02rem); }
.offer-list li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 8px; height: 8px; border-radius: 2px; background: var(--terracotta);
}
.contact-email a { word-break: break-word; }
.contact-email { margin: 0; }

/* mobile centres the contact block to match Our Story directly above it. The
   bullets stay left-aligned inside a centred box -- centred list items are
   hard to scan, and the ragged left edge is what makes them look untidy. */
@media (max-width: 859px) {
  .contact-copy { text-align: center; justify-items: center; }
  .contact-action { justify-items: center; text-align: center; }
  .offer-list { text-align: left; justify-self: center; }
}

@media (min-width: 860px) {
  /* live is a straight half-and-half: coloured blocks left, copy right */
  .contact { grid-template-columns: 1fr 1fr; }
  .contact-copy, .contact-action { min-height: clamp(340px, 33vw, 500px); }
  .contact-copy {
    /* one variable drives both the colour split and the column split, so the
       copy can never drift out of the slate block it is supposed to sit in */
    --split: 45%;
    background: linear-gradient(90deg, var(--terracotta) 0 var(--split), var(--slate-block) var(--split) 100%);
    border-top: 0; align-content: center; text-align: left; padding-inline: 0;
    /* the copy belongs to the slate block, so give the slate its own column
       and drop both children into it -- justify/text-align alone just shoved
       the text at the panel edge and it spilled over the terracotta */
    grid-template-columns: var(--split) 1fr;
  }
  /* live's 60/40 needs a wide panel; below this the slate is too narrow to
     hold the heading, so the terracotta gives ground instead of clipping it */
  @media (min-width: 1250px) { .contact-copy { --split: 60%; } }
  .contact-copy > * { grid-column: 2; padding-inline: clamp(1.25rem, 2.2vw, 2rem); }
  .contact-action { padding-inline: clamp(2.5rem, 6vw, 5rem); }
}

/* ---------- buttons ---------- */

.btn {
  display: inline-block; text-align: center;
  background: var(--navy); color: #fff; border: 0; border-radius: 8px;
  font: inherit; font-size: 1.05rem; font-weight: 600;
  padding: 0.8rem 1.3rem; cursor: pointer; text-decoration: none;
}
.btn:hover, .btn:focus-visible { background: var(--navy-hover); }

/* ---------- inner pages: video hero ---------- */

.hero { position: relative; overflow: hidden; background: var(--ink); }
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.hero .wrap {
  position: relative; z-index: 2;
  padding-block: clamp(3.5rem, 14vw, 7rem) clamp(4rem, 12vw, 8rem);
  min-height: clamp(320px, 52vw, 560px); display: grid; align-content: start;
}
.hero h1 {
  font-size: clamp(2.35rem, 8.5vw, 4.25rem); line-height: 1.12; margin: 0;
  font-weight: 700; color: #fff; max-width: 15ch;
  text-shadow: 0 2px 18px rgba(0,0,0,0.35);
}
/* the layered wave the live site uses to break out of every inner hero.
   auto/100% reproduces Wix's preserveAspectRatio="slice" — it crops the
   1920-wide shape rather than squashing it on a phone. */
/* No upper bound on the height, and that is deliberate. The shape is
   1920x101.285, so scaling it by height gives a width of 18.96x that height.
   Capping the height at 100px capped the width at 1896px, and any viewport
   wider than that got bare video down each side. 5.5vw keeps the rendered
   width at ~104% of the viewport at every size, so it always reaches both
   edges without being stretched out of proportion. */
.hero-wave {
  position: absolute; left: 0; right: 0; bottom: -1px; z-index: 3;
  height: max(34px, 5.5vw); pointer-events: none;
  background: url("/assets/wave.svg") bottom center / auto 100% no-repeat;
}

.page-intro { background: var(--bg); text-align: center; }
.page-intro .wrap { padding-block: clamp(2rem, 7vw, 3.25rem); }
.page-intro h2 {
  font-size: clamp(1.5rem, 5.5vw, 2.5rem); line-height: 1.25; margin: 0;
  color: var(--steel); font-weight: 700; max-width: 22ch; margin-inline: auto;
}

/* one continuous wash from the page background into the peach, the way the
   live page fades rather than butting a hard-edged block against white */
.services { background: linear-gradient(180deg, var(--bg) 0%, #fbe3d9 45%, #ffc0ac 100%); }
.services .wrap { padding-block: clamp(1rem, 4vw, 2rem) clamp(2.5rem, 8vw, 4rem); text-align: center; }
.services > .wrap > h2 {
  font-size: clamp(1.7rem, 6vw, 2.5rem); margin: 0 0 1.75rem; color: var(--ink); font-weight: 700;
}
.services .prose p { max-width: 62ch; margin: 0 auto 1.25rem; }
.service-list { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; gap: clamp(2rem, 6vw, 2.5rem); }
.service h3 { font-size: clamp(1.1rem, 4.2vw, 1.3rem); margin: 0.9rem 0 0.75rem; color: var(--ink); font-weight: 600; }
.service p { margin: 0 auto; max-width: 34ch; font-size: 0.95rem; }
/* ponytail: .icon is a <span>; without display:block the width is ignored and
   the SVG stretches to the column. */
.service .icon { display: block; width: 46px; height: 46px; margin: 0 auto; color: var(--navy); }
.service .icon svg { width: 100%; height: 100%; display: block; }
.services .cta { margin-top: 2.5rem; }

@media (min-width: 760px) {
  .service-list { grid-template-columns: repeat(3, 1fr); align-items: start; }
}

/* ---------- resources page ---------- */

/* attribution panel -- reuses the Our Story charcoal so it reads as ours,
   not as a quoted block from cyber.gov.au */
.credit { background: var(--charcoal); color: #f2f2f2; }
.credit .wrap { padding-block: clamp(1.75rem, 6vw, 2.75rem); display: grid; gap: 0.8rem; }
.credit h2 { font-size: clamp(1.3rem, 4.8vw, 1.9rem); margin: 0; color: #fff; font-weight: 700; }
.credit p { margin: 0; font-size: clamp(0.95rem, 3.2vw, 1.05rem); max-width: 68ch; }
.source { font-size: 0.82rem; color: #66727a; max-width: 68ch; margin: 1.5rem 0 0; }
.credit .source { color: rgba(255,255,255,0.6); margin: 0; }
.credit a { color: #cfe3f3; }
.credit a:hover, .credit a:focus-visible { color: #fff; }

/* the standard .services gradient ends on full peach, which is fine when the
   black footer follows it. On resources another light section follows, so wash
   it back out to the page background instead of butting a hard edge. */
.services--wash {
  background: linear-gradient(180deg, var(--bg) 0%, #fbe3d9 32%, #ffc0ac 60%, #fbe3d9 84%, var(--bg) 100%);
}

.extras { background: var(--bg); }
.extras .wrap { padding-block: clamp(2.25rem, 8vw, 3.5rem); }
.section-head { font-size: clamp(1.5rem, 5.5vw, 2.1rem); margin: 0 0 0.5rem; color: var(--ink); font-weight: 700; }
.section-head--spaced { margin-top: clamp(2.25rem, 7vw, 3rem); }
.section-sub { margin: 0 0 1.75rem; max-width: 62ch; }
.extras .cta { margin-top: clamp(2rem, 6vw, 2.75rem); }
/* the eSafety CTA follows a tight link list, so it needs more air above it
   than the default paragraph margin or it reads as part of the last group */
.esafety .cta { margin-top: clamp(2.75rem, 8vw, 4rem); }
/* the CTA sits under left-aligned link lists, but a lone button hard against
   the left margin reads as an orphan rather than a call to act -- centre it at
   every width, not just on a phone */
.cta { text-align: center; }

/* .services centres its text for the three-up service blurbs; the resources
   page reuses that section for left-aligned link cards, so undo it here. */
.services .section-head, .services .section-sub, .services .resource-list { text-align: left; }

.resource-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
@media (min-width: 700px) { .resource-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) {
  .resource-list { grid-template-columns: repeat(3, 1fr); }
  /* four items across three columns leaves an orphan on its own row */
  .resource-list--four { grid-template-columns: repeat(4, 1fr); }
}

/* On a phone the stacked icon-above-heading layout made every card ~250px
   tall, so six of them ran for three screens. Putting the mark beside the
   heading takes ~45px off each one without shrinking any text. */
@media (max-width: 699px) {
  .resource > a {
    grid-template-columns: auto 1fr; column-gap: 0.7rem; row-gap: 0.35rem;
  }
  .resource .icon { grid-column: 1; grid-row: 1; width: 26px; height: 26px; }
  .resource h3 { grid-column: 2; grid-row: 1; align-self: center; }
  .resource p, .resource .go { grid-column: 1 / -1; }
}

/* the whole card is the link, so the tap target is the card on a phone */
.resource > a {
  display: grid; align-content: start; gap: 0.55rem; height: 100%;
  background: rgba(255,255,255,0.75); border: 1px solid rgba(255,255,255,0.9);
  border-radius: 16px; padding: clamp(1.1rem, 4vw, 1.4rem);
  text-decoration: none; color: var(--text);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.resource > a:hover, .resource > a:focus-visible {
  transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,0.13);
}
.resource .icon { display: block; width: 34px; height: 34px; color: var(--navy); }
.resource .icon svg { width: 100%; height: 100%; display: block; }
.resource h3 { font-size: 1.05rem; margin: 0; color: var(--ink); font-weight: 600; }
.resource p { margin: 0; font-size: 0.92rem; }
.resource .go { font-size: 0.8rem; font-weight: 600; color: var(--navy); }

/* on the light section the translucent card needs a solid base to sit on */
.extras .resource > a { background: #fff; border-color: #e4e4e4; }

/* The six basics are a numbered sequence, so number them -- as a watermark in
   the corner of the card rather than a badge, which keeps the reading order
   obvious without competing with the heading. Counter, not hand-typed digits,
   so reordering the list cannot desync the numbering from the content. */
.resource-list--steps { counter-reset: step; }
.resource-list--steps .resource { counter-increment: step; }
.resource-list--steps .resource > a { position: relative; overflow: hidden; }
.resource-list--steps .resource > a::before {
  content: counter(step);
  position: absolute; right: 0.5rem; bottom: -0.28em;
  font-size: clamp(4rem, 17vw, 6.5rem); font-weight: 700; line-height: 1;
  color: rgba(52, 80, 143, 0.11); pointer-events: none;
}
/* the numeral is absolutely positioned, so it would paint over the text --
   lift the real content back above it */
.resource-list--steps .resource > a > * { position: relative; z-index: 1; }

/* eSafety block: four audience groups of compact links rather than four more
   rows of cards -- the page already carries a lot of card weight above this */
.esafety { background: linear-gradient(180deg, var(--bg) 0%, #e6edf1 40%, #e6edf1 100%); }
.esafety .wrap { padding-block: clamp(2.25rem, 8vw, 3.5rem); }
.group-head {
  font-size: clamp(1.05rem, 4vw, 1.2rem); font-weight: 700; color: var(--ink);
  margin: clamp(1.5rem, 5vw, 2rem) 0 0.35rem;
  padding-bottom: 0.4rem; border-bottom: 1px solid rgba(50,50,50,0.15);
  display: flex; align-items: center; gap: 0.6rem;
}
/* drawn in the same 32-unit, 1.8-stroke style as every other icon on the site
   rather than lifted from esafety.gov.au -- their artwork is Crown copyright
   and the CSP blocks third-party images anyway */
.group-head .icon { flex: none; width: 26px; height: 26px; color: var(--steel); }
.group-head .icon svg { width: 100%; height: 100%; display: block; }
.group-head:first-of-type { margin-top: clamp(1rem, 4vw, 1.5rem); }
.group-sub { margin: 0 0 0.9rem; font-size: 0.92rem; color: #55636b; max-width: 62ch; }

.tip-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
@media (min-width: 700px) { .tip-list { grid-template-columns: repeat(2, 1fr); } }
.tip-list a {
  display: block; background: #fff; border: 1px solid #e4e4e4; border-radius: 12px;
  padding: 0.85rem 1.1rem; text-decoration: none; color: var(--text); font-size: 0.95rem;
}
.tip-list a:hover, .tip-list a:focus-visible { border-color: var(--steel); color: var(--ink); }

.poster {
  margin-top: 2.25rem; display: grid; gap: 1rem;
  background: linear-gradient(135deg, var(--peach-a, #f7cbb8), #f2d9d1);
  border-radius: var(--radius, 18px); padding: clamp(1.35rem, 5vw, 2rem);
}
.poster h3 { margin: 0; font-size: clamp(1.15rem, 4.5vw, 1.4rem); color: var(--ink); font-weight: 700; }
.poster p { margin: 0; font-size: 0.95rem; max-width: 52ch; }
.poster .btn { justify-self: start; }
@media (min-width: 760px) {
  .poster { grid-template-columns: 1fr auto; align-items: center; }
  .poster .btn { grid-column: 2; grid-row: 1 / span 2; }
  .poster p { grid-column: 1; }
}

/* ponytail: one visually-hidden class, used to tell screen readers a link
   leaves the site. Sighted users get the arrow glyph instead. */
.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- privacy / legal page ---------- */

.legal-doc { background: var(--bg); }
.legal-doc .wrap { padding-block: clamp(1.75rem, 6vw, 3rem); max-width: 820px; }
.legal-doc h2 {
  font-size: clamp(1.25rem, 4.6vw, 1.6rem); font-weight: 700; color: var(--ink);
  margin: clamp(1.75rem, 6vw, 2.5rem) 0 0.6rem;
}
.legal-doc h2:first-of-type { margin-top: 0; }
.legal-doc h3 { font-size: clamp(1rem, 3.8vw, 1.15rem); font-weight: 600; color: var(--ink); margin: 1.5rem 0 0.4rem; }
.legal-doc p { margin: 0 0 0.9rem; font-size: clamp(0.95rem, 3.2vw, 1.02rem); }
.legal-doc ul { margin: 0 0 1rem; padding-left: 1.35rem; }
.legal-doc li { margin-bottom: 0.35rem; font-size: clamp(0.95rem, 3.2vw, 1.02rem); }
.legal-doc .updated { font-size: 0.85rem; color: #6a6a6a; }
/* long unbroken URLs in the references would otherwise push the page wide */
.legal-doc a { word-break: break-word; }

/* ---------- footer ---------- */

.site-footer { background: var(--ink); color: rgba(255,255,255,0.85); }
/* tightened after the tagline was added -- the extra line had grown the bar.
   Wider than the page wrap on purpose: the footer is a full-bleed dark bar, and
   at 1120px the outer items sat marooned in the middle of a 1920px screen. */
.site-footer .wrap {
  max-width: 1400px;
  padding-block: clamp(1rem, 3vw, 1.35rem);
  display: grid; gap: 0.7rem; justify-items: center; text-align: center;
}
.site-footer .brand { display: grid; justify-items: center; gap: 0.2rem; }
.site-footer .tagline {
  font-size: 0.78rem; font-weight: 700; font-style: italic;
  letter-spacing: 0.04em; color: rgba(255,255,255,0.72);
}
.site-footer .flogo { height: 26px; width: auto; }
.site-footer p { margin: 0; font-size: 0.9rem; }
.site-footer .ae {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.8rem; color: rgba(255,255,255,0.6); text-decoration: none;
}
/* the copyright hangs off the same left edge as the Alpha Echo mark, not the
   label beside it -- the block reads as one column that way */
.site-footer .ae img { width: 39px; height: auto; opacity: 0.75; }
.site-footer .ae:hover img, .site-footer .ae:focus-visible img { opacity: 1; }
/* :visited named explicitly or the UA's purple wins against the dark footer */
.site-footer a, .site-footer a:visited { color: rgba(255,255,255,0.75); }
.site-footer a:hover, .site-footer a:focus-visible { color: #fff; }
.site-footer .copy { font-size: 0.78rem; color: rgba(255,255,255,0.55); }

/* required, but nobody comes to the site for it -- size it like the fine print
   it is and drop the underline until you actually reach for it */
.site-footer .spacer { display: grid; gap: 0.3rem; justify-items: center; }
.site-footer .spacer a, .site-footer .spacer a:visited {
  font-size: 0.72rem; color: rgba(255,255,255,0.4); text-decoration: none;
}
.site-footer .spacer a:hover, .site-footer .spacer a:focus-visible {
  color: rgba(255,255,255,0.8); text-decoration: underline;
}

/* stacked on a phone, so lead with our own brand rather than the partner mark,
   and rule off the fine print instead of letting five centred lines run together */
@media (max-width: 759px) {
  .site-footer .wrap { gap: 0.5rem; }
  .site-footer .brand { order: 1; }
  .site-footer .legal { order: 2; display: grid; gap: 0.2rem; justify-items: center; }
  .site-footer .spacer { order: 3; }
  .site-footer .legal {
    margin-top: 0.35rem; padding-top: 0.7rem;
    border-top: 1px solid rgba(255,255,255,0.12);
    width: 100%;
  }
  .site-footer .flogo { height: 30px; }
  .site-footer .copy { font-size: 0.72rem; }
}

@media (min-width: 760px) {
  .site-footer .wrap {
    grid-template-columns: 1fr auto 1fr; align-items: center; text-align: left;
  }
  .site-footer .legal { justify-self: start; display: grid; gap: 0.3rem; }
  .site-footer .brand { grid-column: 2; }
  .site-footer .spacer { grid-column: 3; justify-self: end; justify-items: end; text-align: right; }
}

/* ---------- floating back-to-top ---------- */

/* ponytail: plain anchor to #top, no JS. */
.to-top {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 90;
  width: 46px; height: 46px; border-radius: 50%;
  background: #2b2b2b; color: #fff; text-decoration: none;
  display: grid; place-content: center; box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}
.to-top:hover, .to-top:focus-visible { background: #444; }

/* ---------- motion ---------- */

/* ponytail: scroll-driven CSS, no JS -- a script-src 'none' CSP rules out an
   IntersectionObserver, and animation-timeline does the same job natively.
   Everything lives behind @supports so a browser without it renders the page
   fully visible rather than stuck at opacity 0. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes rise { from { opacity: 0; transform: translateY(20px); } }
  @keyframes reveal { from { opacity: 0; transform: translateY(28px); } }

  /* on-load, no scroll timeline needed -- works everywhere */
  .showcase-head h1, .hero h1 { animation: rise 0.75s 0.08s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
  .mission-panel { animation: rise 0.75s 0.28s cubic-bezier(0.2, 0.7, 0.3, 1) both; }

  @supports (animation-timeline: view()) {
    .reveal {
      animation: reveal linear both;
      animation-timeline: view();
      /* keep the range short. The last section on a page can only be scrolled
         so far, and a range it can never finish leaves that section stuck
         half-faded at the bottom of the document. */
      animation-range: entry 0% cover 20%;
    }
    /* stagger: each card finishes a little later than the one before it */
    .audience:nth-child(2) { animation-range: entry 0% cover 26%; }
    .audience:nth-child(3) { animation-range: entry 0% cover 32%; }
    .service:nth-child(2), .resource:nth-child(2) { animation-range: entry 0% cover 26%; }
    .service:nth-child(3), .resource:nth-child(3) { animation-range: entry 0% cover 30%; }
    .resource:nth-child(4) { animation-range: entry 0% cover 34%; }
  }
}

/* ---------- a11y ---------- */

.skip { position: absolute; left: -9999px; background: var(--navy); color: #fff; padding: 0.75rem 1rem; z-index: 200; }
.skip:focus { left: 0.5rem; top: 0.5rem; }
:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  /* a looping background video is motion; show the poster frame instead */
  .hero-video { display: none; }
}