/* ---------- self-hosted type ----------
   Previously loaded from fonts.googleapis.com, which sent every visitor's
   IP address to Google on each page view. Both faces are SIL OFL, so
   self-hosting is permitted. Latin subsets only, six files, 148 KB total.
   font-display:swap so text paints immediately in the fallback.          */

@font-face{font-family:'Lora';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/lora-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Lora';font-style:italic;font-weight:400;font-display:swap;
  src:url('fonts/lora-latin-400-italic.woff2') format('woff2')}
@font-face{font-family:'Lora';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/lora-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Raleway';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/raleway-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Raleway';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/raleway-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Raleway';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/raleway-latin-600-normal.woff2') format('woff2')}


/* ============================================================
   iHeart Port A - dark ground

   Palette sampled from the teal lockup. On a deep ground every
   brand colour becomes usable as type, which is not true on white,
   where the teal is 2.18:1, coral 2.61 and gold 1.89.
     teal  #86B8C2   6.15:1 on slate   labels, dates, figures
     coral #F47F62   5.14:1            buttons, rules
     gold  #E9B44C   7.08:1            third marker, focus ring
     white          13.39:1            all body and display type

   Three surfaces only: the ground, one step up, one step down.

   ONE spacing scale. Two section sizes, one column gap, three
   internal steps. Nothing outside this set, and no inline margins.

   Only one two-column block per page. Block types alternate so
   the page does not read as stacked columns.
   ============================================================ */

:root{
  --teal:#86B8C2;
  --coral:#F47F62;
  --gold:#E9B44C;

  --slate:#22313A;
  --slate-up:#2A3A44;
  --slate-dp:#1A262E;

  --w:#FFFFFF;
  --w80:rgba(255,255,255,.80);
  --w62:rgba(255,255,255,.62);
  --rule:rgba(255,255,255,.15);
  --rule-hard:rgba(255,255,255,.30);

  --sp-block:clamp(56px,6.6vw,88px);
  --sp-tight:clamp(30px,3.4vw,44px);
  --sp-gap:clamp(30px,5vw,72px);
  --sp-lbl:22px;
  --sp-txt:20px;
  --sp-act:32px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--slate);color:var(--w);
  font-family:'Raleway',system-ui,sans-serif;font-size:17px;line-height:1.78;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
p{margin:0}
.w{max-width:1120px;margin:0 auto;padding:0 clamp(24px,5vw,52px)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:99;background:var(--w);color:var(--slate);padding:12px 22px}

/* ---------- type ---------- */

.d{font-family:'Lora',Georgia,serif;font-weight:400;letter-spacing:-.008em;
  line-height:1.2;margin:0;color:var(--w)}
.d em{font-style:italic}
h1.d{font-size:clamp(2rem,3.8vw,3.05rem);line-height:1.16}
.mega{font-size:clamp(1.85rem,3.4vw,2.75rem);line-height:1.22}
.sec{font-size:clamp(1.38rem,2.2vw,1.8rem);line-height:1.26}
.h3{font-family:'Lora',Georgia,serif;font-weight:500;font-size:1.1rem;line-height:1.38;color:var(--w)}
.lbl{font-family:'Raleway',sans-serif;font-weight:600;font-size:.78rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--teal);margin:0 0 var(--sp-lbl);
  display:flex;align-items:center;gap:14px}
.lbl::before{content:"";width:30px;height:2px;background:var(--coral);flex:none}
.t{color:var(--w80);font-size:1.02rem;line-height:1.78;margin:var(--sp-txt) 0 0;max-width:52ch}
.t + .t{margin-top:1.1em}
.fine{color:var(--w62);font-size:.94rem;line-height:1.7;margin:var(--sp-txt) 0 0}

/* ---------- colour roles, taken from the lockup ----------
   In the logo, coral is the heart and the word "give.", teal is the
   wordmark and "serve.", gold is "love." Each colour keeps that job here:

     coral  the ask          buttons, label rules, list ticks, Give marker
     teal   the structure    labels, dates, figures, footer headings
     gold   the warm word    the italic emphasis in every headline, the
                             Love row, the Celebrate date, step numerals

   Gold is 7.08:1 on the ground, 6.2 on the step up, 8.1 on the step down.
   It is excluded from the hero, where type sits over a photograph and
   white is the safer contrast.                                          */

.d em{color:var(--gold)}
.shot .d em{color:inherit}
.rw-3 .dt{color:var(--gold)}
.dts div:last-child .k{color:var(--gold)}

/* ---------- actions ---------- */

.btn{display:inline-block;font-family:'Raleway',sans-serif;font-weight:600;font-size:.78rem;
  letter-spacing:.16em;text-transform:uppercase;padding:15px 34px;border-radius:2px;
  text-decoration:none;background:var(--coral);color:#1B2A32;border:1px solid var(--coral);
  transition:background-color .22s ease,color .22s ease,border-color .22s ease}
.btn:hover{background:var(--w);color:var(--slate);border-color:var(--w)}
.btn-q{background:transparent;color:var(--w);border-color:var(--rule-hard)}
.btn-q:hover{background:var(--w);color:var(--slate);border-color:var(--w)}
.lk{font-family:'Raleway',sans-serif;font-weight:600;font-size:.78rem;letter-spacing:.16em;
  text-transform:uppercase;text-decoration:none;color:var(--w);padding-bottom:5px;
  border-bottom:2px solid var(--coral)}
.lk:hover{border-bottom-color:var(--w)}
.btns{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;margin-top:var(--sp-act)}

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

.hd{background:var(--slate);border-bottom:1px solid var(--rule)}
.hd-in{max-width:1120px;margin:0 auto;padding:16px clamp(24px,5vw,52px);
  display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
.hd-in img{height:46px;width:auto}
.nv{display:flex;gap:clamp(20px,3.4vw,38px);align-items:center}
.nv a{font-family:'Raleway',sans-serif;text-decoration:none;color:var(--w62);font-weight:500;
  font-size:.8rem;letter-spacing:.15em;text-transform:uppercase;padding-bottom:3px;
  border-bottom:2px solid transparent}
.nv a:hover{color:var(--w)}
.nv a[aria-current]{color:var(--w);border-bottom-color:var(--coral)}

/* ---------- hero and page heads ---------- */

.shot{position:relative;display:flex;align-items:flex-end;min-height:clamp(440px,66vh,660px);
  background-image:linear-gradient(to top,rgba(26,38,46,.86) 0%,rgba(26,38,46,.40) 46%,rgba(26,38,46,.06) 80%),
    url('images/hero-wide.jpg');
  background-size:cover,cover;background-position:center,50% 42%;background-repeat:no-repeat}
.shot-in{width:100%;max-width:1120px;margin:0 auto;
  padding:0 clamp(24px,5vw,52px) var(--sp-block)}
.shot h1{margin:0;max-width:20ch}

.top{padding:var(--sp-block) 0;border-bottom:1px solid var(--rule)}
.top h1{max-width:24ch}

/* ---------- a single centred statement ---------- */

.say{padding:var(--sp-block) 0;text-align:center;border-bottom:1px solid var(--rule)}
.say p{font-family:'Lora',Georgia,serif;font-size:clamp(1.2rem,2.1vw,1.6rem);line-height:1.5;
  color:var(--w);max-width:40ch;margin:0 auto}

/* ---------- blocks ---------- */

.block{padding:var(--sp-block) 0}
.block-up{background:var(--slate-up)}
.block-tight{padding:var(--sp-tight) 0}
.in{max-width:52ch}
.in-wide{max-width:64ch}

/* the one two-column block */
.pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:var(--sp-gap);align-items:stretch}
.pair figure{margin:0;display:flex}
/* 3:2 rather than square. In this grid the image column is about 500px wide,
   so a square rendered 500px tall beside roughly 300px of text. */
/* the image fills the row, so its height is set by the copy beside it.
   min-height stops it collapsing to a sliver when the copy is short. */
.pair img{width:100%;height:100%;min-height:320px;
  object-fit:cover;object-position:50% 45%;border-radius:2px}
.pair-flip figure{order:2}

/* ---------- ruled rows ---------- */

.reg{margin-top:var(--sp-gap);border-top:1px solid var(--rule-hard)}
.rw{display:grid;grid-template-columns:minmax(0,30px) minmax(0,1fr) minmax(0,1.55fr);
  gap:var(--sp-gap);align-items:baseline;padding:var(--sp-tight) 0;border-bottom:1px solid var(--rule)}
.mk{width:9px;height:9px;border-radius:50%;position:relative;top:-.3em}
.rw-1 .mk{background:var(--coral)}
.rw-2 .mk{background:var(--teal)}
.rw-3 .mk{background:var(--gold)}
.rw .nm{font-family:'Lora',Georgia,serif;font-size:clamp(1.45rem,2.5vw,2.05rem);
  line-height:1.12;margin:0 0 10px}
.rw .dt{font-family:'Raleway',sans-serif;font-weight:600;font-size:.78rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--teal)}
.rw .ds{color:var(--w80);font-size:1.02rem;line-height:1.76;max-width:46ch}

/* ---------- full-bleed photo band ---------- */

.band{margin:0}
.band img{width:100%;height:clamp(240px,30vw,420px);object-fit:cover;object-position:50% 52%}
.band figcaption{padding:var(--sp-tight) 0;text-align:center}
.band figcaption span{font-family:'Raleway',sans-serif;font-weight:600;font-size:.78rem;
  letter-spacing:.17em;text-transform:uppercase;color:var(--teal)}

/* ---------- the claim, centred ---------- */

.claim{padding:var(--sp-block) 0;background:var(--slate-dp);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);text-align:center}
.claim .in{max-width:46ch;margin:0 auto}
.claim .lbl{justify-content:center}
.claim .fig{font-family:'Lora',Georgia,serif;font-size:clamp(3rem,5.6vw,4.4rem);line-height:1;
  color:var(--teal);letter-spacing:-.018em;margin:0 0 var(--sp-lbl)}
.claim .t{margin-left:auto;margin-right:auto}
.claim .btns{justify-content:center}

/* ---------- dates ---------- */

.dts{display:grid;grid-template-columns:repeat(4,1fr);margin-top:var(--sp-gap);
  border-top:1px solid var(--rule-hard)}
/* the rule sits on the LEFT with matching padding either side, so every cell
   is inset from its divider by the same amount. Previously the border was on
   the right with right-only padding, which left the labels touching the line. */
.dts div{padding:var(--sp-tight) clamp(16px,2.2vw,28px);border-left:1px solid var(--rule)}
.dts div:first-child{padding-left:0;border-left:0}
.dts div:last-child{padding-right:0}
/* when the dates follow the register, the register has already drawn a rule.
   Continue the same ruled stack instead of leaving a gap between two rules. */
.reg + .dts{margin-top:0;border-top:0}
.dts .k{font-family:'Raleway',sans-serif;font-size:.76rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--teal);margin:0 0 10px}
.dts .v{font-family:'Lora',Georgia,serif;font-size:1.22rem;margin:0;line-height:1.2;color:var(--w)}

/* ---------- lists ---------- */

.ls{list-style:none;margin:var(--sp-gap) 0 0;padding:0;border-top:1px solid var(--rule-hard)}
.ls li{padding:14px 0 14px 26px;border-bottom:1px solid var(--rule);position:relative;
  color:var(--w80);font-size:1.02rem;line-height:1.72}
.ls li::before{content:"";position:absolute;left:0;top:1.5em;width:9px;height:2px;background:var(--coral)}
.ls-2{columns:2;column-gap:var(--sp-gap)}
.ls-2 li{break-inside:avoid}

.stp{list-style:none;counter-reset:s;margin:var(--sp-gap) 0 0;padding:0;
  border-top:1px solid var(--rule-hard)}
.stp li{counter-increment:s;display:grid;grid-template-columns:minmax(0,56px) minmax(0,1fr);
  gap:var(--sp-tight);padding:var(--sp-tight) 0;border-bottom:1px solid var(--rule)}
.stp li::before{content:counter(s,decimal-leading-zero);font-family:'Lora',Georgia,serif;
  font-size:1.06rem;color:var(--gold);line-height:1.5}
.stp p{color:var(--w80);max-width:56ch;font-size:1.02rem;line-height:1.74;margin:8px 0 0}


/* ---------- the form: a deliberate light panel ----------
   The embedded form renders white and its interior cannot be
   themed from here, so it is given a light card of its own rather
   than left as an accident in the middle of a dark page. */

.formcard{margin-top:var(--sp-gap);background:#F7F5F1;padding:var(--sp-tight);border-radius:2px}
.formcard iframe{display:block;width:1px;min-width:100%;min-height:900px;border:0;background:#fff}
@media (max-width:600px){.formcard iframe{min-height:1100px}}

/* ---------- closing ---------- */

.end{padding:var(--sp-block) 0;border-top:1px solid var(--rule)}

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

.ft{background:var(--slate-dp);padding:var(--sp-block) 0 var(--sp-tight);border-top:1px solid var(--rule)}
.fg{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(4,minmax(0,1fr));
  gap:var(--sp-gap);padding-bottom:var(--sp-tight)}
.fg img{width:210px;height:auto;margin-bottom:var(--sp-lbl)}
.fg p{font-size:1rem;line-height:1.76;max-width:34ch;color:var(--w80)}
.ft h4{font-family:'Raleway',sans-serif;font-size:.76rem;font-weight:600;letter-spacing:.17em;
  text-transform:uppercase;color:var(--teal);margin:0 0 var(--sp-lbl)}
.ft ul{list-style:none;margin:0;padding:0}
.ft li{margin-bottom:11px}
.ft a{color:var(--w80);text-decoration:none;font-size:1rem}
.ft a:hover{color:var(--w)}
.fb{padding-top:var(--sp-tight);border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;
  gap:10px 28px;justify-content:space-between;font-size:.86rem;color:var(--w62)}

a:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{transition:none !important}}

/* ---------- intro: plays once per session, home page only ---------- */

.intro{display:none}
.intro.play{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:var(--slate-dp);pointer-events:none;animation:outro .65s ease 3.1s forwards}
.stage{position:relative;width:min(78vw,720px);aspect-ratio:1023/372}
.stage img{position:absolute;display:block}
.play .il-type{left:0%;top:0%;width:100%;height:81.005%;clip-path:inset(0 100% 0 0);
  animation:draw 1.25s cubic-bezier(.42,.04,.36,1) .2s forwards}
.play .il-mark{left:7.4%;top:0%;width:19.233%;height:47.67%;opacity:0;transform:scale(.55);
  transform-origin:50% 60%;animation:pop .42s cubic-bezier(.2,1.5,.4,1) .85s forwards}
.play .il-wave{left:0%;top:62.903%;width:86.771%;height:36.737%;clip-path:inset(0 100% 0 0);
  animation:draw .78s cubic-bezier(.3,.7,.25,1) 1.35s forwards}
.play .il-give{left:63.412%;top:85.844%;width:10.489%;height:14.156%;clip-path:inset(0 100% 0 0);
  animation:draw .4s ease 2.05s forwards}
.play .il-serve{left:74.907%;top:87.285%;width:13.294%;height:8.691%;clip-path:inset(0 100% 0 0);
  animation:draw .4s ease 2.35s forwards}
.play .il-love{left:89.638%;top:85.927%;width:10.362%;height:10.038%;clip-path:inset(0 100% 0 0);
  animation:draw .4s ease 2.65s forwards}
@keyframes draw{to{clip-path:inset(0 0 0 0)}}
@keyframes pop{to{opacity:1;transform:scale(1)}}
@keyframes outro{to{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){.intro,.intro.play{display:none}}

/* ---------- responsive ---------- */

@media (max-width:900px){
  .pair{grid-template-columns:1fr}
  .pair img{height:auto;aspect-ratio:3/2;min-height:0}
  .pair-flip figure{order:0}
  .rw{grid-template-columns:minmax(0,22px) minmax(0,1fr);gap:14px 18px}
  .rw .ds{grid-column:2}
  .dts{grid-template-columns:1fr 1fr}
  .dts div{border-bottom:1px solid var(--rule)}
  .dts div:nth-child(odd){border-left:0;padding-left:0}
  .dts div:nth-child(even){padding-right:0}
  .ls-2{columns:1}
  .fg{grid-template-columns:1fr 1fr}
  .stage{width:88vw}
}
@media (max-width:600px){
  body{font-size:16.5px}
  .hd-in{gap:14px}
  .hd-in img{height:40px}
  .nv{width:100%;justify-content:space-between;gap:10px}
  .nv a{font-size:.72rem;letter-spacing:.1em}
  .shot{background-image:linear-gradient(to top,rgba(26,38,46,.88) 0%,rgba(26,38,46,.44) 46%,rgba(26,38,46,.06) 80%),
    url('images/hero-sm.jpg')}
  .fg{grid-template-columns:1fr}
  .stp li{grid-template-columns:minmax(0,40px) minmax(0,1fr);gap:16px}
}