/* ===========================================================================
   EDU Aid Network

   Art direction is the Selfown theme (mannatthemes.com/selfown/default),
   measured off the live demo. The numbers are the ones it computes, not
   approximations of them:

     fonts    Inter everywhere, Frank Ruhl Libre for h1 ONLY
     body     17px / 1.6, #161C2D
     h1       54px / 70px / 700 serif        h2  32px / 500 Inter
     h3       16px / 500                     h4  20px / 400
     navy     #172D51    cyan #00BCD4    peach #F78C4B at 10%
     band     #F9FBFD
     tints    #377DFF #69C380 #FFC835 #ED9456 #7F6CEF, all at 10%
     button   radius 4px, 10px 20px, 14px / 500
     card     radius 4px, no border, 0 4px 20px rgba(191,197,213,.2)
     wave     0 0 2880 48, M0 48H1437.5H2880V0H2160C1442.5 52 720 0 720 0H0V48Z

   THE 4px RADIUS IS THE THEME. Cards, chips, inputs, badges and buttons all
   share it. Round the buttons into pills and the whole page stops being this
   theme, however right the colours are.
   =========================================================================== */

/* --- 1. Tokens ------------------------------------------------------------ */

:root{
  --navy:       #172D51;
  --ink:        #161C2D;
  --body:       #6A7695;
  --cyan:       #00BCD4;
  --cyan-2:     #00A5BA;
  --peach:      #F78C4B;
  --band:       #F9FBFD;
  --white:      #FFFFFF;
  --line:       #E7ECF3;

  /* the five accents, used only as 10% tints behind an icon */
  --blue:       #377DFF;
  --green:      #69C380;
  --yellow:     #FFC835;
  --orange:     #ED9456;
  --purple:     #7F6CEF;

  --wrap: 1180px;
  --gutter: clamp(18px, 4vw, 34px);

  --r: 4px;                       /* the theme's one radius */
  --r-lg: 8px;
  --ease: cubic-bezier(.4, 0, .2, 1);
  --shadow: 0 4px 20px rgba(191, 197, 213, .2);
  --shadow-lg: 0 10px 40px rgba(191, 197, 213, .38);
}

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

html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }

body{
  margin: 0;
  background: var(--white);
  color: var(--body);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.0625rem;              /* 17px */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4{ margin: 0 0 .5em; color: var(--navy); }
h1{
  font-family: "Frank Ruhl Libre", Georgia, serif;     /* the serif, h1 only */
  font-size: clamp(2.2rem, 4.4vw, 3.375rem);
  font-weight: 700; line-height: 1.3;
}
h2{ font-size: clamp(1.6rem, 2.8vw, 2rem); font-weight: 500; line-height: 1.25; }
h3{ font-size: 1.0625rem; font-weight: 600; line-height: 1.4; }
h4{ font-size: 1.25rem; font-weight: 500; line-height: 1.5; }

p{ margin: 0 0 1.1em; }
p:last-child{ margin-bottom: 0; }

a{ color: var(--cyan); text-decoration: none; transition: color .25s var(--ease); }
a:hover{ color: var(--cyan-2); }

img, svg{ max-width: 100%; }
img{ height: auto; display: block; }
strong{ color: var(--navy); font-weight: 600; }

.wrap{ width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.lede{ font-size: 1.0625rem; max-width: 62ch; }
.fine{ font-size: .9375rem; line-height: 1.7; }

.skip-link{ position: absolute; left: -9999px; top: 0; z-index: 1000;
            padding: 12px 18px; background: var(--navy); color: #fff; border-radius: 0 0 var(--r) 0; }
.skip-link:focus{ left: 0; }
:focus-visible{ outline: 3px solid var(--cyan); outline-offset: 3px; border-radius: var(--r); }

/* --- 2. Sections ---------------------------------------------------------- */

.section{ padding: clamp(50px, 6.5vw, 96px) 0; }
.section--band{ background: var(--band); }
.section--tight{ padding-top: 0; }

.grid{ display: grid; gap: clamp(18px, 2vw, 26px); }
.grid--2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Every track is minmax(0, 1fr), never a bare 1fr: a bare 1fr floors at
   min-content and lets a long word steal width from its neighbour. */

/* --- 3. The wave ---------------------------------------------------------- */

/* One path, used twice: under the hero and over the footer. The second is the
   first rotated by CSS rather than a second path, so the two cannot drift. */
/* Taller than the demo's. Its wave sits under an illustration and only has
   to soften a join; this one has to visibly cut a photograph, and at 48px the
   curve is so shallow that the crop reads as a straight line. */
.wave{ display: block; width: 100%; height: clamp(40px, 5.6vw, 92px); }

/* The path fills its LOWER part and leaves a wavy top edge, so both uses are
   the same path the same way up — no rotation. Under the hero it paints white
   over the last band of peach; above the footer it paints navy over the last
   band of whatever section precedes it. Rotating the second one was the first
   attempt and produced a wave with its curve on the wrong edge, invisible
   because it was navy drawn inside an already-navy footer. */
/* Both are mirrored: the demo's path falls right-to-left and read backwards
   against this layout. scaleX(-1) rather than a second path, so the two uses
   stay one shape. */
.hero__wave{
  position: absolute; left: 0; right: 0; bottom: -1px; z-index: 2;
  color: var(--white); transform: scaleX(-1);
}
.site-footer__wave{
  position: absolute; left: 0; right: 0; bottom: 100%;
  color: var(--navy); line-height: 0; transform: scaleX(-1);
}

/* --- 4. Badges and section heads ------------------------------------------ */

.eyebrow{
  display: inline-block; padding: 7px 14px; border-radius: var(--r);
  font-size: .8125rem; font-weight: 400; text-transform: uppercase; letter-spacing: .01em;
}
.eyebrow--success{ background: rgba(105, 195, 128, .1); color: var(--green); }
.eyebrow--info{    background: rgba(55, 125, 255, .1);  color: var(--blue); }
.eyebrow--warn{    background: rgba(255, 200, 53, .14);  color: #C99500; }
.eyebrow--peach{   background: rgba(237, 148, 86, .1);  color: var(--orange); }
.eyebrow--purple{  background: rgba(127, 108, 239, .1); color: var(--purple); }
.eyebrow--cyan{    background: rgba(0, 188, 212, .1);   color: var(--cyan); }

.sec-head{ margin-bottom: clamp(30px, 4vw, 52px); }
.sec-head--center{ text-align: center; }
.sec-head--center .lede{ margin-inline: auto; }
.sec-head__title{ position: relative; margin-top: 16px; }
.sec-head h2{ position: relative; z-index: 1; margin: 0; }
.sec-head .lede{ margin-top: 16px; }

/* The giant pale word behind the heading. Decoration, so aria-hidden; the
   real heading sits in front of it. The section must hide its overflow or the
   descenders show up outside the band. */
.sec-head__ghost{
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-family: Inter, sans-serif; font-size: clamp(3.4rem, 7vw, 5.5rem);
  font-weight: 700; line-height: 1; white-space: nowrap;
  color: rgba(23, 45, 81, .05); pointer-events: none; user-select: none;
}
.sec-head--left .sec-head__ghost{ left: 0; transform: translate(-4%, -50%); }

/* --- 5. Buttons ----------------------------------------------------------- */

.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px; border: 1px solid var(--cyan); border-radius: var(--r);
  background: var(--cyan); color: #fff;
  font: inherit; font-size: .875rem; font-weight: 500; line-height: 1.5;
  cursor: pointer; white-space: nowrap;
  transition: background .25s var(--ease), border-color .25s var(--ease),
              color .25s var(--ease), box-shadow .25s var(--ease);
}
.btn:hover, .btn:focus-visible{
  background: var(--cyan-2); border-color: var(--cyan-2); color: #fff;
  box-shadow: 0 6px 18px rgba(0, 188, 212, .28);
}
.btn--ghost{
  background: var(--white); color: var(--cyan); border-color: rgba(0, 188, 212, .3);
}
.btn--ghost:hover, .btn--ghost:focus-visible{ background: var(--cyan); color: #fff; }
.btn--navy{ background: var(--navy); border-color: var(--navy); }
.btn--navy:hover, .btn--navy:focus-visible{ background: #10203C; border-color: #10203C;
                                            box-shadow: 0 6px 18px rgba(23, 45, 81, .25); }
.btn--sm{ padding: 8px 16px; font-size: .8125rem; }
.btn--wide{ width: 100%; }
.btn-row{ display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.arrow-link{ display: inline-flex; align-items: center; gap: 8px;
             font-size: .9375rem; font-weight: 500; color: var(--navy); }
.arrow-link svg{ width: 16px; height: 16px; transition: transform .3s var(--ease); }
.arrow-link:hover{ color: var(--cyan); }
.arrow-link:hover svg{ transform: translateX(4px); }

/* --- 6. Header ------------------------------------------------------------ */

.site-header{ position: sticky; top: 0; z-index: 900; background: var(--white); }
.site-header .wrap{ display: flex; align-items: center; gap: 22px; min-height: 74px; }
.site-header.is-stuck{ box-shadow: 0 4px 20px rgba(191, 197, 213, .3); }

.brand{ display: flex; align-items: center; gap: 10px; margin-right: auto; color: var(--navy); }
.brand svg{ width: 34px; height: 34px; flex: 0 0 34px; }
.brand b{ font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; }
.brand b span{ color: var(--cyan); }

.site-nav > ul{ display: flex; align-items: center; gap: 26px; margin: 0; padding: 0; list-style: none; }
.site-nav a{ display: block; padding: 6px 0; color: var(--ink); font-size: .9375rem; font-weight: 400;
             border-bottom: 2px solid transparent; }
.site-nav a:hover{ color: var(--cyan); }
.site-nav a[aria-current="page"]{ color: var(--cyan); border-bottom-color: var(--cyan); }

.nav-toggle{ display: none; width: 42px; height: 42px; flex: none; padding: 0;
             background: var(--band); border: 1px solid var(--line); border-radius: var(--r); cursor: pointer; }
.nav-toggle span{ display: block; width: 18px; height: 2px; margin: 4px auto; background: var(--navy);
                  border-radius: 2px; transition: transform .3s var(--ease), opacity .2s var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

/* --- 7. Hero -------------------------------------------------------------- */

.hero{
  position: relative;
  background: rgba(247, 140, 75, .1);        /* the peach wash, exactly 10% */
  padding: clamp(44px, 6vw, 86px) 0 clamp(60px, 7vw, 104px);
  overflow: hidden;
}
/* The decoration layer: behind everything, never in the way of a pointer, and
   faded out below the breakpoint where the hero stacks and the motifs would
   start landing underneath the text. */
.hero__deco{
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  pointer-events: none; user-select: none;
}
/* One stacking context, four layers, and `.wrap` deliberately has NO z-index
   so it does not create a context of its own and trap the figure underneath
   the wave's reach:
       decoration 0  <  the cut-out 1  <  the wave 2  <  the words 3
   The point of that order is the cut-out: the white wave passes OVER her, so
   the bottom of the photograph is cut along the curve instead of ending in a
   straight line at the section edge. */
.hero > .wrap{ position: relative; }
.hero__copy{ position: relative; z-index: 3; }

.hero__inner{ display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
              gap: clamp(26px, 4vw, 56px); align-items: center; }
/* The cut-out stands ON the wave rather than sitting in a framed box, which
   is what Selfown's hero does with its own cut-out. Three things make that
   read: she is bottom-aligned, her negative bottom margin cancels the hero's
   bottom padding so her feet reach the section edge, and she is inside
   `.wrap` — which carries z-index 1 — so she passes in FRONT of the wave
   instead of being cut off by it. `.hero` keeps overflow:hidden, so whatever
   goes past the section boundary is trimmed cleanly. */
/* She runs PAST the section edge on purpose: the wave above her decides where
   the photograph ends, so there has to be more of her than the frame shows. */
.hero__figure{
  position: relative; z-index: 1; align-self: end;
  margin-bottom: calc(-1 * clamp(60px, 7vw, 104px) - 44px);
  max-width: 480px; justify-self: center;
}
.hero__figure img{
  position: relative; z-index: 1; width: 100%; height: auto;
  /* No drop-shadow. The wave crops her, and a downward shadow near that crop
     smudges out past the curve and reads as a grey bruise under the section
     rather than as grounding. The halo behind her does the separating. */
}

/* The soft disc behind her. It is a circle so the silhouette reads against
   something, and it stops short of her head so the composition keeps a top
   edge rather than turning into a lozenge. */
.hero__halo{
  position: absolute; left: 50%; bottom: 8%;
  width: 104%; aspect-ratio: 1; transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%,
              rgba(0, 188, 212, .16) 0%, rgba(0, 188, 212, .09) 46%, rgba(0, 188, 212, 0) 70%);
}
.hero h1{ margin-bottom: 18px; }
.hero .lede{ margin-bottom: 26px; }
.hero__kicker{ display: block; margin-bottom: 14px; color: var(--body); font-size: 1rem; }

/* The three facts under the hero copy. */
.hero-facts{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
             gap: 14px; margin-top: 34px; }
/* The three labels are kept SHORT ENOUGH TO FIT ON ONE LINE — "School
   decides", not "Your school decides". An earlier attempt reserved two lines
   for every label so the body text would align; the bodies did align, but the
   one-line labels then had a hole under them and the two-line one did not,
   which looked worse than the problem. Equal-length labels need no trick.
   The line-height is tightened too: 1.6 inherited from the body is generous
   for 13px in a small card. */
.hero-facts > div{ padding: 16px 18px; background: var(--white); border-radius: var(--r);
                   box-shadow: var(--shadow); }
.hero-facts b{ display: block; margin-bottom: 6px; color: var(--navy);
               font-size: .9375rem; font-weight: 600; line-height: 1.3; }
.hero-facts span{ display: block; font-size: .8125rem; line-height: 1.45; color: var(--body); }

/* --- 8. Cards ------------------------------------------------------------- */

.card{ background: var(--white); border: 0; border-radius: var(--r);
       box-shadow: var(--shadow); padding: clamp(22px, 2.4vw, 30px);
       transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
.card:hover{ box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.card h3{ margin-bottom: 10px; font-size: 1.125rem; }
.card p{ font-size: .9375rem; }
.card--flat{ box-shadow: none; border: 1px solid var(--line); }
.card--flat:hover{ transform: none; box-shadow: var(--shadow); }

/* The tinted rounded-square icon chip at the top of a card. */
.chip{ width: 44px; height: 44px; display: grid; place-items: center;
       border-radius: var(--r); margin-bottom: 20px; }
.chip svg{ width: 21px; height: 21px; }
.chip--blue{   background: rgba(55, 125, 255, .1);  color: var(--blue); }
.chip--green{  background: rgba(105, 195, 128, .1); color: var(--green); }
.chip--yellow{ background: rgba(255, 200, 53, .14); color: #C99500; }
.chip--orange{ background: rgba(237, 148, 86, .1);  color: var(--orange); }
.chip--purple{ background: rgba(127, 108, 239, .1); color: var(--purple); }
.chip--cyan{   background: rgba(0, 188, 212, .1);   color: var(--cyan); }

/* A numbered card, as the reference site numbers its three topics. */
.num{ display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 18px;
      border-radius: var(--r); background: rgba(0, 188, 212, .1); color: var(--cyan);
      font-weight: 700; font-size: 1rem; }

/* Tag pills under a resource card. */
.tags{ display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 0; padding: 0; list-style: none; }
.tags li{ padding: 4px 10px; border-radius: var(--r); background: var(--band);
          color: var(--body); font-size: .75rem; font-weight: 500; text-transform: uppercase;
          letter-spacing: .02em; }

/* --- 9. The stage accordion ----------------------------------------------- */

/* Selfown's resume block: a tinted panel with an illustration on the left and
   an accordion on the right, each row carrying a label out to the margin. */
.stages{ display: grid; grid-template-columns: minmax(0, .4fr) minmax(0, 1fr);
         background: var(--white); border-radius: var(--r); box-shadow: var(--shadow);
         overflow: hidden; }
.stages__side{ background: var(--band); padding: clamp(26px, 3vw, 40px); text-align: center;
               display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.stages__side .chip{ margin: 0 auto; width: 56px; height: 56px; }
.stages__side .chip svg{ width: 26px; height: 26px; }
.stages__side h3{ font-size: 1.25rem; font-weight: 500; margin: 0; }
.stages__side p{ font-size: .875rem; margin: 0; }
.stages__list{ padding: 10px clamp(18px, 2.4vw, 30px); }

.stage{ border-bottom: 1px solid var(--line); }
.stage:last-child{ border-bottom: 0; }
.stage > summary{
  display: flex; align-items: center; gap: 14px; padding: 18px 0; cursor: pointer; list-style: none;
  color: var(--navy); font-size: 1rem; font-weight: 500;
}
.stage > summary::-webkit-details-marker{ display: none; }
.stage__mark{ flex: none; width: 16px; color: var(--cyan); font-weight: 700; text-align: center; }
.stage[open] .stage__mark::before{ content: "\2014"; }
.stage:not([open]) .stage__mark::before{ content: "+"; }
.stage__when{ margin-left: auto; color: var(--cyan); font-size: .8125rem; font-weight: 500;
              white-space: nowrap; }
.stage__body{ padding: 0 0 20px 30px; font-size: .9375rem; }
.stage__body p:last-child{ margin-bottom: 0; }
.stage__body strong{ display: block; margin-top: 10px; color: var(--navy); }

/* --- 10. Question list ---------------------------------------------------- */

.qlist{ list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.qlist li{ display: flex; gap: 14px; align-items: flex-start;
           background: var(--white); border-radius: var(--r); box-shadow: var(--shadow);
           padding: 18px 20px; font-size: .9375rem; }
.qlist svg{ flex: none; width: 22px; height: 22px; padding: 4px; border-radius: var(--r);
            background: rgba(0, 188, 212, .1); color: var(--cyan); }

/* --- 11. Filter tabs ------------------------------------------------------ */

.tabs{ display: flex; flex-wrap: wrap; gap: 26px; margin-bottom: 28px;
       border-bottom: 1px solid var(--line); }
.tabs button{
  background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: 10px 0; font: inherit; font-size: .9375rem; color: var(--body);
  cursor: pointer; transition: color .25s var(--ease), border-color .25s var(--ease);
}
.tabs button:hover{ color: var(--navy); }
.tabs button[aria-selected="true"]{ color: var(--navy); border-bottom-color: var(--cyan); }

/* --- 12. CTA band --------------------------------------------------------- */

.cta-band{ background: var(--band); padding: clamp(36px, 4.4vw, 56px) 0; }
.cta-band__inner{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
                  gap: clamp(20px, 3vw, 44px); align-items: center; }
.cta-band h2{ margin-bottom: 6px; }
.cta-band p{ margin: 0; font-size: .9375rem; }
.cta-band .btn-row{ justify-content: flex-end; }

/* --- 13. Forms ------------------------------------------------------------ */

.panel{ background: var(--white); border-radius: var(--r); box-shadow: var(--shadow);
        padding: clamp(24px, 3vw, 40px); }
.panel-head{ margin-bottom: 22px; }
.panel-head h3{ font-size: 1.375rem; font-weight: 500; margin-bottom: 6px; }

.field{ margin-bottom: 16px; }
.field label, .field .label{ display: block; margin-bottom: 7px; color: var(--navy);
                             font-size: .875rem; font-weight: 500; }
.field input, .field select, .field textarea{
  width: 100%; padding: 11px 14px; background: var(--white); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r);
  font: inherit; font-size: .9375rem;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0, 188, 212, .12); outline: none;
}
.field textarea{ resize: vertical; min-height: 120px; }
.field-2{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }

.picks{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.picks .pick{ display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 12px;
              font-size: .9rem; color: var(--navy); background: var(--band);
              border: 1px solid var(--line); border-radius: var(--r); cursor: pointer;
              transition: border-color .2s var(--ease), background .2s var(--ease); }
.picks .pick:hover{ border-color: var(--cyan); }
.picks .pick input{ flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--cyan); }
.picks .pick:has(input:checked){ border-color: var(--cyan); background: rgba(0, 188, 212, .07); }

.check{ display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px;
        padding: 15px 17px; background: var(--band); border: 1px solid var(--line);
        border-radius: var(--r); font-size: .8125rem; line-height: 1.65; cursor: pointer; }
.check input{ flex: none; width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--cyan); }
.check b{ display: block; color: var(--navy); margin-bottom: 3px; font-size: .875rem; }
.check.is-invalid, .field.is-invalid input, .field.is-invalid textarea, .field.is-invalid select{
  border-color: #D14343;
}

.hp{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-error{ display: none; margin-bottom: 16px; padding: 12px 15px; border-radius: var(--r);
             background: #FDF0EF; color: #9B2C20; font-size: .9rem; font-weight: 500; }
.form-error.is-shown{ display: block; }
.form-done{ display: none; text-align: center; padding: 10px 0 4px; }
.form-done.is-shown{ display: block; }
.form-done .ic{ width: 56px; height: 56px; margin: 0 auto 16px; display: grid; place-items: center;
                background: rgba(105, 195, 128, .1); color: var(--green); border-radius: 50%; }
.form-done .ic svg{ width: 28px; height: 28px; }

/* Contact rows beside the form. */
.contact-row{ display: flex; gap: 14px; align-items: flex-start; margin-bottom: 22px; }
.contact-row .chip{ margin: 0; flex: none; }
.contact-row b{ display: block; color: var(--navy); font-size: 1rem; font-weight: 500; }
.contact-row span{ font-size: .875rem; }

/* A short column beside a tall form. Without it the explanatory cards run out
   and leave a metre of empty page; four sibling sites hit that one at a time
   before it was written down. */
.sticky-col{ position: sticky; top: 100px; align-self: start; }
@media (max-width: 980px){ .sticky-col{ position: static; } }

/* --- 14. Callouts --------------------------------------------------------- */

.callout{ border-left: 3px solid var(--cyan); border-radius: 0 var(--r) var(--r) 0;
          background: rgba(0, 188, 212, .06); padding: 18px 22px; font-size: .9375rem; }
.callout--warn{ border-left-color: #D14343; background: #FDF0EF; }
.callout--gov{ border-left-color: var(--green); background: rgba(105, 195, 128, .08); }

/* --- 15. Legal pages ------------------------------------------------------ */

.doc{ background: var(--white); border-radius: var(--r); box-shadow: var(--shadow);
      padding: clamp(26px, 3.4vw, 46px); max-width: 78ch; margin-inline: auto; }
.doc h3{ margin-top: 1.9em; font-size: 1.125rem; font-weight: 600; }
.doc h3:first-of-type{ margin-top: 1.2em; }

/* --- 16. Footer ----------------------------------------------------------- */

/* margin-top reserves the wave's own height, so it overlays nothing. */
.site-footer{ position: relative; margin-top: clamp(40px, 5.6vw, 92px);
              background: var(--navy); color: rgba(255, 255, 255, .66); }
.site-footer > .wrap{ padding-top: clamp(28px, 3.4vw, 48px); }
.site-footer .wrap{ padding-bottom: clamp(28px, 3vw, 42px); }
.foot-grid{ display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
            gap: clamp(24px, 3vw, 44px); }
.foot-brand .brand{ margin-bottom: 16px; color: #fff; }
.foot-brand .brand b span{ color: var(--cyan); }
.foot-brand p{ font-size: .9375rem; max-width: 42ch; }
.foot-contact{ margin-top: 16px; font-size: .9375rem; line-height: 1.9; }
.foot-contact span{ color: rgba(255, 255, 255, .5); }
.site-footer h4{ color: #fff; font-size: 1rem; font-weight: 600; margin-bottom: 14px; }
.site-footer ul{ list-style: none; margin: 0; padding: 0; }
.site-footer li{ margin-bottom: 9px; }
.site-footer li a{ color: rgba(255, 255, 255, .68); font-size: .9375rem; }
.site-footer li a:hover{ color: #fff; }

.disclaimer{ margin-top: clamp(26px, 3vw, 40px); padding-top: 22px;
             border-top: 1px solid rgba(255, 255, 255, .12);
             font-size: .8125rem; line-height: 1.75; color: rgba(255, 255, 255, .52); }
.disclaimer + .disclaimer{ border-top: 0; padding-top: 0; margin-top: 14px; }
.disclaimer strong{ color: rgba(255, 255, 255, .84); }
.disclaimer a{ color: rgba(255, 255, 255, .84); text-decoration: underline; text-underline-offset: 3px; }

.foot-legal{ border-top: 1px solid rgba(255, 255, 255, .12); }
.foot-legal .wrap{ display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between;
                   padding-block: 20px; font-size: .8125rem; color: rgba(255, 255, 255, .5); }
.foot-legal p{ margin: 0; }
.foot-legal a{ color: rgba(255, 255, 255, .68); }

/* --- 17. Reveal ----------------------------------------------------------- */

.fade-up{ opacity: 0; transform: translateY(18px);
          transition: opacity .6s var(--ease), transform .6s var(--ease); }
.fade-up.in{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){
  .fade-up{ opacity: 1; transform: none; transition: none; }
}

/* --- 18. Responsive ------------------------------------------------------- */

@media (max-width: 1060px){
  .site-nav > ul{ gap: 18px; }
  .site-nav a{ font-size: .875rem; }
}

@media (max-width: 920px){
  .site-nav{
    position: absolute; inset: 100% 0 auto 0; display: block;
    background: var(--white); border-bottom: 1px solid var(--line);
    padding: 10px var(--gutter) 20px; box-shadow: var(--shadow);
    transform: translateY(-10px); opacity: 0; pointer-events: none;
    transition: opacity .3s var(--ease), transform .3s var(--ease);
  }
  .site-nav.is-open{ opacity: 1; transform: none; pointer-events: auto; }
  .site-nav > ul{ flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav > ul > li{ border-bottom: 1px solid var(--line); }
  .site-nav a{ padding: 13px 2px; border-bottom: 0; }
  .site-nav a[aria-current="page"]{ border-bottom: 0; }
  .nav-toggle{ display: block; order: 3; }
  .header-cta{ order: 2; }
  .brand{ order: 1; }
  .site-header .wrap{ position: relative; }

  .hero__inner, .cta-band__inner, .stages{ grid-template-columns: minmax(0, 1fr); }
  /* The hero stacks at this width, so the headline runs the full column and
     the decoration would sit behind the words rather than beside them. */
  .hero__deco{ display: none; }
  /* Stacked, she is an ordinary image at the top of the column, not a figure
     standing on the wave — so the negative bottom margin goes, or it drags
     the copy up over her. */
  .hero__figure{ order: -1; max-width: 320px; margin: 0 auto clamp(18px, 3vw, 28px); }
  .cta-band .btn-row{ justify-content: flex-start; }
  .grid--4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px){
  .grid--2, .grid--3, .grid--4{ grid-template-columns: minmax(0, 1fr); }
  .hero-facts{ grid-template-columns: minmax(0, 1fr); }
  .field-2, .picks{ grid-template-columns: minmax(0, 1fr); }
  .foot-grid{ grid-template-columns: minmax(0, 1fr); }
  .stage__when{ display: none; }
  .site-header .wrap{ min-height: 64px; gap: 10px; }
  .site-nav{ inset: 64px 0 auto 0; }
  .header-cta{ padding: 7px 12px; font-size: .75rem; }
}

/* --- 19. Photography ------------------------------------------------------ */

/* A plain framed photograph. 4px radius, like everything else in this theme. */
.shot{ border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); }
.shot img{ width: 100%; height: 100%; object-fit: cover; display: block; }

/* A full-width band with a line of text over it. The scrim is a gradient
   rather than a flat tint: a flat one either washes the photograph out or
   leaves the text unreadable at the pale end, and a photograph behind words
   has to lose that argument. */
.photo-band{ position: relative; overflow: hidden; }
.photo-band img{ width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.photo-band__scrim{
  position: relative;
  background: linear-gradient(90deg, rgba(23, 45, 81, .92) 0%, rgba(23, 45, 81, .78) 46%,
                                     rgba(23, 45, 81, .28) 100%);
  padding: clamp(42px, 6vw, 86px) 0;
}
.photo-band h2, .photo-band p{ color: #fff; }
.photo-band p{ color: rgba(255, 255, 255, .8); max-width: 56ch; }
.photo-band .inner{ max-width: 62ch; }

/* A wide, short banner under a section head. */
.banner{ border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow);
         margin-bottom: clamp(28px, 3.4vw, 44px); }
.banner img{ width: 100%; height: 100%; object-fit: cover; display: block; }

/* Image beside text, both halves equal. */
.split-media{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
              gap: clamp(26px, 4vw, 54px); align-items: center;
              margin-bottom: clamp(30px, 4vw, 52px); }
@media (max-width: 920px){ .split-media{ grid-template-columns: minmax(0, 1fr); } }

/* --- 19b. The topic list -------------------------------------------------
   The sidebar's "other topics" nav. Not `.tags`, which is a row of small
   uppercase pills for keywords; these are five page links and want to read as
   a list of destinations, with the arrow travelling on hover the way the
   theme's links do. */
.topic-list{ list-style: none; margin: 14px 0 0; padding: 0; }
.topic-list li{ border-top: 1px solid var(--line); }
.topic-list li:last-child{ border-bottom: 1px solid var(--line); }
.topic-list a{ display: flex; align-items: center; justify-content: space-between;
               gap: 10px; padding: 11px 2px; font-size: .95rem; font-weight: 600;
               color: var(--ink); text-decoration: none; }
.topic-list svg{ width: 15px; height: 15px; flex: none; color: var(--cyan);
                 transform: translateX(-4px); opacity: 0; transition: .25s ease; }
.topic-list a:hover{ color: var(--cyan); }
.topic-list a:hover svg, .topic-list a:focus-visible svg{ transform: none; opacity: 1; }

/* --- 20. The form card ---------------------------------------------------- */

/* Selfown puts its contact form in ONE white card — fields on the left, the
   details and an illustration on the right — rather than in a column of cards
   beside a separate panel. That second shape is what every sibling site in
   this folder uses, so this one takes the theme's.
   
   The consent disclosures are the reason it needed a third region rather than
   a straight copy: they are long, and in a narrow right-hand column they turn
   into a wall. Here they sit BELOW both columns at the card's full width,
   with the two message boxes side by side. */
.form-card{
  background: var(--white); border-radius: var(--r); box-shadow: var(--shadow);
  padding: clamp(24px, 3.2vw, 44px);
}
.form-card__top{
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(26px, 3.4vw, 50px);
}
.form-card__head{ margin-bottom: 22px; }
.form-card__head h3{ font-size: 1.5rem; font-weight: 500; margin-bottom: 6px; }

.form-card__aside{
  border-left: 1px solid var(--line); padding-left: clamp(22px, 3vw, 42px);
}
.form-card__aside .shot{ margin-bottom: 22px; }

/* The consent region: a hairline across the card, then the two message boxes
   side by side and the terms box full width under them. */
.form-card__consent{
  margin-top: clamp(26px, 3vw, 38px); padding-top: clamp(24px, 3vw, 34px);
  border-top: 1px solid var(--line);
}
.form-card__consent > .check{ margin-bottom: 0; }
.consent-2{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.consent-2 .check{ margin-bottom: 0; align-items: flex-start; }
.form-card__consent .consent-2 + .check{ margin-top: 12px; }

/* Just the button. The STOP/HELP and not-required lines live in the consent
   block above it, which is where 10DLC review expects them; repeating them
   beside the button said the same thing twice and crowded the foot of the
   card. */
.form-card__send{ margin-top: 22px; }

/* The fine print that closes the consent block. It is full-width body copy
   between two bordered boxes, so it needs its own air or it reads as crammed
   against the terms box above it. */
.form-card__consent > .fine{ margin-top: 18px; }

@media (max-width: 980px){
  .form-card__top{ grid-template-columns: minmax(0, 1fr); }
  .form-card__aside{ border-left: 0; border-top: 1px solid var(--line);
                     padding-left: 0; padding-top: clamp(22px, 3vw, 32px); }
  .consent-2{ grid-template-columns: minmax(0, 1fr); }
}

/* --- 21. Guide cards ------------------------------------------------------ */

/* Selfown's blog card: a full-bleed image across the top, the title, a
   hairline, then a footer with a round mark and a label on the left and a
   link on the right. Its version carries an author and a date; this one has
   neither to carry, so the left group is the guide's topic — true, and the
   only thing that belongs in that slot on a site with no bylines. */
.guide{
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--white); border-radius: var(--r); box-shadow: var(--shadow);
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
.guide:hover{ box-shadow: var(--shadow-lg); transform: translateY(-3px); }

.guide__media{ aspect-ratio: 560 / 340; overflow: hidden; background: var(--band); }
.guide__media img{ width: 100%; height: 100%; object-fit: cover; display: block;
                   transition: transform .6s var(--ease); }
.guide:hover .guide__media img{ transform: scale(1.04); }

.guide__body{ display: flex; flex-direction: column; flex: 1;
              padding: clamp(20px, 2.2vw, 26px); }
.guide__body h3{ font-size: 1.0625rem; line-height: 1.4; margin-bottom: 10px; }
.guide__body p{ font-size: .9375rem; margin: 0 0 18px; }

/* The hairline and the footer row. `margin-top:auto` pins the footer to the
   bottom so the row lines up across cards whose descriptions differ in
   length — which, in a four-up grid, they always do. */
.guide__foot{
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px 14px;
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line);
}
.guide__cat{ display: flex; align-items: center; gap: 10px; min-width: 0; }
.guide__cat .dot{
  flex: none; width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 50%;
}
.guide__cat .dot svg{ width: 16px; height: 16px; }
.guide__cat b{ display: block; color: var(--navy); font-size: .875rem; font-weight: 600;
               line-height: 1.2; }
.guide__cat span{ display: block; font-size: .75rem; color: var(--body); line-height: 1.3; }
/* The two halves of the footer must never overlap. The label group is allowed
   to shrink and ellipsis; the link is not, because a truncated call to action
   is worse than a wrapped one. If the card is too narrow for both, they wrap
   onto two lines rather than colliding. */
.guide__foot .arrow-link{ flex: none; white-space: nowrap; font-size: .875rem; }
.guide__cat{ flex: 1 1 auto; }
.guide__cat b, .guide__cat span{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (prefers-reduced-motion: reduce){
  .guide__media img{ transition: none; }
  .guide:hover .guide__media img{ transform: none; }
}