/* MAI WHITE - maiwhite.com
   Static rebuild. Type scale measured from the live Squarespace build. */

/* ---------- Self-hosted fonts ----------
   Jost and Mulish, both SIL Open Font License 1.1 (see fonts/OFL-*.txt).
   Served from this domain - no external font request, nothing to expire.

   These are VARIABLE fonts, so one file covers every weight of a family:
   4 files rather than the 10 Google's CSS implies. The declared 300-700
   range covers everything the stylesheet asks for (Jost 300/400,
   Mulish 300/400/600); browsers clamp anything outside it. */

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/jost-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/jost-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/mulish-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/mulish-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --pink:      #EC008C;
  --dark:      #201A16;
  --btn:       #1F1F1F;
  --h1col:     #1C1C1C;
  --text:      #1F1F1F;
  --muted:     #6f6f6f;
  --rule:      #e6e6e6;
  --wrap:      1020px;
  --font-head: "Jost", "Futura", "Century Gothic", sans-serif;
  --font-body: "Mulish", "Avenir Next", "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: .5px;
  color: var(--text);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

.skip-link { position:absolute; left:-9999px; top:0; background:var(--pink); color:#fff;
  padding:10px 16px; z-index:100; text-decoration:none; }
.skip-link:focus { left:8px; top:8px; }

/* ---------- Header: hamburger at every width, matching the original ---------- */
.site-header { background:#fff; position:relative; z-index:60; }
.site-header .inner { max-width:1360px; margin:0 auto; padding:20px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:24px; }
.logo { flex:0 0 auto; line-height:0; }
.logo img { width:275px; max-width:100%; }

.nav-toggle { flex:0 0 auto; width:30px; height:24px; padding:0; background:none; border:0;
  cursor:pointer; display:flex; flex-direction:column; justify-content:space-between; }
.nav-toggle span { display:block; height:2px; width:100%; background:var(--pink);
  transition:transform .2s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(11px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-11px) rotate(-45deg); }

.site-nav { display:none; border-top:1px solid var(--rule); background:#fff; }
.site-nav.open { display:block; }
.site-nav ul { list-style:none; margin:0 auto; padding:8px 24px 20px; max-width:1360px; }
.site-nav li { border-bottom:1px solid var(--rule); margin:0; }
.site-nav li:last-child { border-bottom:0; }
.site-nav a { display:block; padding:14px 2px; font-family:var(--font-head); font-size:13px;
  letter-spacing:2px; text-transform:uppercase; color:var(--muted); text-decoration:none;
  transition:color .15s ease; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color:var(--pink); }

/* ---------- Page images ----------
   The original crops the home banner to a wide band inside an overflow-hidden
   figure, anchored on the stored focal point (51.5% / 25.2%). */
.pagehead img { width:100%; }
.pagehead--hero img {
  height: clamp(320px, 37vw, 500px);
  object-fit: cover;
  object-position: 51.5% 25.2%;
}

/* ---------- 12-column grid ----------
   The original is a Squarespace 12-column layout: page titles sit BESIDE
   their banner image, and most pages run two columns of content.
   Squarespace stacks these below 768px, so this does too. */
.grid { display:grid; grid-template-columns:repeat(12,1fr); column-gap:40px;
  row-gap:0; align-items:start; }
.c1{grid-column:span 1}   .c2{grid-column:span 2}   .c3{grid-column:span 3}
.c4{grid-column:span 4}   .c5{grid-column:span 5}   .c6{grid-column:span 6}
.c7{grid-column:span 7}   .c8{grid-column:span 8}   .c9{grid-column:span 9}
.c10{grid-column:span 10} .c11{grid-column:span 11} .c12{grid-column:span 12}
.grid img { width:100%; }
.grid > * > :first-child { margin-top:0; }

@media (max-width:767px){
  .grid { grid-template-columns:1fr; row-gap:26px; }
  .c1,.c2,.c3,.c4,.c5,.c6,.c7,.c8,.c9,.c10,.c11,.c12 { grid-column:1 / -1; }
  .spacer { display:none; }
}

/* ---------- Type ---------- */
h1 { font-family:var(--font-head); font-weight:300; font-size:clamp(30px,3.6vw,42px);
  line-height:1.2; letter-spacing:normal; text-transform:none; color:var(--h1col); margin:0 0 20px; }
h2 { font-family:var(--font-head); font-weight:300; font-size:clamp(26px,2.7vw,32px);
  line-height:1.2; letter-spacing:normal; text-transform:none; color:var(--text); margin:0 0 16px; }
h3, h4 { font-family:var(--font-head); font-size:15px; font-weight:400; letter-spacing:3.07px;
  text-transform:uppercase; color:var(--pink); margin:0 0 8px; line-height:1.3; }
p { margin:0 0 16px; }
strong, b { font-weight:600; }
a { color:var(--pink); }
a:hover { color:var(--h1col); }

section { padding:56px 0; }
section.tight { padding:40px 0; }
.section-alt { background:#f7f7f7; }
.center { text-align:center; }

/* Top row: page title beside its banner image, as on the original. */
.pagerow { padding:44px 0 0; }
.pagerow h1 { margin-bottom:20px; }
.pagerow + section { padding-top:34px; }

.intro { text-align:center; }
.intro h1 { margin-bottom:26px; }
.intro h1:last-child { margin-bottom:0; }

.lead-in { margin:0 0 10px; font-weight:600; }
.closing-statement { text-align:center; font-weight:600; max-width:780px; margin:26px auto 30px; }

ul { padding-left:40px; margin:0 0 18px; }
ul li { margin:0 0 6px; }

/* ---------- Buttons ---------- */
.btn { display:inline-block; background:var(--btn); color:#fff !important; font-family:var(--font-head);
  font-size:12px; letter-spacing:3px; text-transform:uppercase; text-decoration:none;
  padding:13px 26px; border:0; cursor:pointer; transition:background .15s ease; }
.btn:hover { background:var(--pink); }
.btn--pink { background:var(--pink); }
.btn--pink:hover { background:var(--btn); }

/* ---------- Cards ---------- */
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.card { text-align:center; }
.card img { width:100%; aspect-ratio:16/9; object-fit:cover; margin-bottom:18px; }
.card p { min-height:78px; }

/* ---------- Split ---------- */
.split { display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:start; }
.split--portrait { grid-template-columns:379px 1fr; }

/* ---------- Quotes ---------- */
.pullquote { text-align:center; max-width:820px; margin:0 auto; }
.pullquote blockquote { margin:0 0 12px; font-family:var(--font-head); font-weight:300;
  font-size:clamp(20px,2.2vw,26px); line-height:1.5; color:var(--h1col); }
.pullquote cite { font-style:normal; font-family:var(--font-head); font-size:13px;
  letter-spacing:3px; text-transform:uppercase; color:var(--pink); }

/* Quote sitting inside a content column rather than across the page. */
.pullquote--inline { text-align:left; max-width:none; margin:30px 0 0; }
.pullquote--inline blockquote { font-size:clamp(19px,1.9vw,22px); }

/* Testimonials are blockquotes on the original. */
.testimonial { margin:0 0 30px; }
.testimonial blockquote { margin:0 0 8px; padding:0 0 0 22px; border-left:3px solid var(--pink); }
.testimonial blockquote p { margin:0 0 12px; }
.testimonial blockquote p:last-child { margin-bottom:0; }
.testimonial cite { display:block; padding-left:25px; font-style:normal;
  font-family:var(--font-head); font-size:13px; letter-spacing:3px;
  text-transform:uppercase; color:var(--pink); }

/* ---------- Form ---------- */
.form { max-width:640px; }
.form .row { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field { margin-bottom:18px; }
.field label { display:block; font-family:var(--font-head); font-size:12px; letter-spacing:2px;
  text-transform:uppercase; color:var(--h1col); margin-bottom:8px; }
.field .req { color:var(--pink); }
.field input, .field textarea { width:100%; padding:12px 14px; border:1px solid #d8d8d8;
  border-radius:0; font-family:var(--font-body); font-size:16px; color:var(--text); background:#fff; }
.field input:focus, .field textarea:focus { outline:2px solid var(--pink); outline-offset:0;
  border-color:var(--pink); }
.field textarea { min-height:170px; resize:vertical; }
.form-note { font-size:14px; color:var(--muted); margin-top:14px; }
.form button[type=submit][disabled] { opacity:.6; cursor:default; }
.form-status { margin:14px 0 0; font-size:15px; }
.form-status:empty { margin:0; }
.form-status--ok { color:#1b7f4b; font-weight:600; }
.form-status--error { color:#b3123c; font-weight:600; }
.hp { position:absolute; left:-9999px; opacity:0; }
.contact-meta a { text-decoration:none; }

/* ---------- Event ---------- */
.event { display:grid; grid-template-columns:320px 1fr; gap:36px; align-items:start; }
.event .date { font-family:var(--font-head); text-transform:uppercase; letter-spacing:3px;
  color:var(--pink); font-size:13px; margin-bottom:8px; }

/* ---------- Footer ---------- */
.site-footer { background:var(--dark); color:#cfc9c4; padding:44px 0 30px; }
.site-footer a { color:#cfc9c4; text-decoration:none; }
.site-footer a:hover { color:var(--pink); }
.footer-top { text-align:center; margin-bottom:24px; }
.footer-top a { font-family:var(--font-head); font-size:12px; letter-spacing:3px; text-transform:uppercase; }
.footer-meta { display:flex; flex-wrap:wrap; gap:8px 22px; justify-content:center;
  font-family:var(--font-head); font-size:13px; letter-spacing:2px; text-transform:uppercase;
  text-align:center; }
.footer-brand { text-align:center; margin-top:24px; padding-top:20px;
  border-top:1px solid rgba(255,255,255,.12); font-family:var(--font-head); font-size:12px;
  letter-spacing:3px; text-transform:uppercase; color:var(--pink); }
.footer-social { display:flex; justify-content:center; gap:20px; margin-top:18px; }
.footer-social a { display:inline-flex; width:34px; height:34px; align-items:center;
  justify-content:center; border-radius:50%; color:#cfc9c4;
  transition:color .15s ease, background .15s ease; }
.footer-social a:hover { color:#fff; background:var(--pink); }
.footer-social svg { width:20px; height:20px; fill:currentColor; display:block; }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .cards { grid-template-columns:1fr; gap:36px; }
  .card p { min-height:0; }
  .split, .split--portrait, .event { grid-template-columns:1fr; gap:28px; }
  .form .row { grid-template-columns:1fr; }
}
@media (max-width:720px){
  .logo img { width:200px; }
  section { padding:42px 0; }
  ul { padding-left:26px; }
}