/* Fonts are hosted on this site (no Google Fonts requests). Space Grotesk and Inter, SIL Open Font License; see fonts/. */
@font-face{font-family:'Space Grotesk'; font-style:normal; font-weight:300 700; font-display:swap; src:url(../fonts/SpaceGrotesk-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:'Space Grotesk'; font-style:normal; font-weight:300 700; font-display:swap; src:url(../fonts/SpaceGrotesk-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:'Inter'; font-style:normal; font-weight:100 900; font-display:swap; src:url(../fonts/Inter-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:'Inter'; font-style:normal; font-weight:100 900; font-display:swap; src:url(../fonts/Inter-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;}

:root{
  --ink:#121212;
  --paper:#FAF8F4;
  --line:#E6DCCB;
  --mid:#6B5A55;
  --panel:#1B1B1A;
  --coral:#C9922E;
  --coral-text:#8A5F16;
  --coral-deep:#2E2210;
  --violet:#7C1F2E;
  --violet-text:#7C1F2E;
  --violet-deep:#3A1219;
  --maroon:#7C1F2E;
  --maroon-deep:#2A0F14;
  --radius:3px;
  --wrap:1180px;
}

*{box-sizing:border-box; margin:0; padding:0;}

html{scroll-behavior:smooth;}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter', sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,.display{
  font-family:'Space Grotesk', sans-serif;
  font-weight:600;
  line-height:1.05;
  letter-spacing:-0.01em;
}

a{color:inherit; text-decoration:none;}

.wrap{
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 32px;
}

/* ---------- NAV ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(250,250,247,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
nav.wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:72px;
}
.logo{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:-0.01em;
}
.logo span{color:var(--mid); font-weight:500;}
.nav-links{display:flex; gap:36px; font-size:0.92rem;}
.nav-links a{
  position:relative; padding-bottom:4px;
  border-bottom:1px solid transparent;
  transition:border-color .2s ease, color .2s ease;
}
.nav-links a:hover{border-color:var(--maroon); color:var(--maroon);}
.nav-toggle{display:none;}

@media (max-width:720px){
  .nav-links{
    position:fixed; inset:72px 0 0 0;
    background:var(--paper);
    flex-direction:column; gap:0;
    padding:8px 32px 32px;
    transform:translateY(-8px);
    opacity:0; pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
  }
  .nav-links.open{opacity:1; pointer-events:auto; transform:translateY(0);}
  .nav-links a{
    padding:16px 0; border-bottom:1px solid var(--line); font-size:1.05rem;
  }
  .nav-toggle{
    display:block; background:none; border:none; cursor:pointer;
    width:28px; height:20px; position:relative;
  }
  .nav-toggle span{
    display:block; position:absolute; left:0; right:0; height:2px; background:var(--ink);
    transition:transform .2s ease, opacity .2s ease;
  }
  .nav-toggle span:nth-child(1){top:0;}
  .nav-toggle span:nth-child(2){top:9px;}
  .nav-toggle span:nth-child(3){top:18px;}
  .nav-toggle.open span:nth-child(1){transform:translateY(9px) rotate(45deg);}
  .nav-toggle.open span:nth-child(2){opacity:0;}
  .nav-toggle.open span:nth-child(3){transform:translateY(-9px) rotate(-45deg);}
}

/* ---------- HERO (home) ---------- */
.hero{
  padding:120px 0 96px;
  border-bottom:1px solid var(--line);
}
.hero-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:64px;
  align-items:end;
}
.hero h1{
  font-size:clamp(2.4rem, 5vw, 4.1rem);
  max-width:14ch;
}
.hero .kicker{
  font-size:0.95rem;
  color:var(--mid);
  margin-bottom:20px;
  display:flex; align-items:center; gap:8px;
}
.hero .kicker .dot{position:static;}
.hero p.lead{
  margin-top:28px;
  font-size:1.15rem;
  max-width:46ch;
  color:#3a3a38;
}
.hero-side{
  border-left:1px solid var(--line);
  padding-left:32px;
}
.hero-side .label{
  font-size:0.85rem; color:var(--mid); margin-bottom:10px;
}
.hero-side ul{
  list-style:none; margin-top:22px; display:flex; flex-direction:column; gap:10px;
}
.hero-side li{
  font-size:0.95rem;
  display:flex; align-items:baseline; gap:10px;
}
.dot{
  width:8px; height:8px; border-radius:50%; flex:none; position:relative; top:-1px;
}
.dot.coral{background:var(--coral);}
.dot.violet{background:var(--violet);}
.dot.maroon{background:var(--maroon);}

@media (max-width:820px){
  .hero-grid{grid-template-columns:1fr; gap:44px;}
  .hero-side{border-left:none; border-top:1px solid var(--line); padding-left:0; padding-top:28px;}
  .hero{padding:64px 0 56px;}
}

/* reveal on load, hero only */
.reveal{opacity:0; transform:translateY(14px); animation:rise .7s cubic-bezier(.2,.7,.3,1) forwards;}
.reveal.d1{animation-delay:.05s;}
.reveal.d2{animation-delay:.16s;}
.reveal.d3{animation-delay:.27s;}
@keyframes rise{to{opacity:1; transform:translateY(0);}}
@media (prefers-reduced-motion:reduce){
  .reveal{animation:none; opacity:1; transform:none;}
}

/* ---------- DIVISIONS ---------- */
.divisions-head{
  padding:80px 32px 8px;
}
.divisions-head h2{
  font-size:clamp(1.8rem, 3vw, 2.4rem);
}
.divisions-head p{
  margin-top:14px; max-width:52ch; color:#3a3a38; font-size:1.02rem;
}

.panel{
  padding:72px 0;
  border-top:1px solid var(--line);
}
.panel-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:72px;
  align-items:center;
}
.panel.reverse .panel-grid{direction:rtl;}
.panel.reverse .panel-grid > *{direction:ltr;}

.panel-tag{
  display:inline-block;
  font-size:0.85rem;
  padding:5px 12px;
  border:1px solid var(--line);
  border-radius:20px;
  color:var(--mid);
  margin-bottom:22px;
}
.panel h3{
  font-size:clamp(2rem, 4vw, 2.8rem);
  margin-bottom:18px;
}
.panel p.desc{
  font-size:1.05rem;
  color:#3a3a38;
  max-width:42ch;
  margin-bottom:28px;
}
.panel-cta{
  display:inline-flex; align-items:center; gap:10px;
  font-size:0.95rem; font-weight:500;
  padding-bottom:2px;
  border-bottom:1px solid currentColor;
}
.panel-cta-group{
  display:flex;
  gap:28px;
  flex-wrap:wrap;
}
#buttie .panel-cta{color:var(--coral-text);}
#shortsizn .panel-cta{color:var(--violet-text);}

/* motif: halftone / print grid for Buttie FP */
.motif-grid{
  aspect-ratio:1/1;
  background:var(--panel);
  border-radius:var(--radius);
  display:grid;
  grid-template-columns:repeat(8, 1fr);
  grid-template-rows:repeat(8, 1fr);
  gap:6px;
  padding:28px;
}
.motif-grid .cell{
  border-radius:50%;
  background:#2c2c2b;
  transition:transform .25s ease;
}
.motif-grid:hover .cell.hot{transform:scale(1.25);}
.motif-grid .cell.hot{background:var(--coral);}

/* motif: waveform for Short SIZN */
.motif-wave{
  aspect-ratio:1/1;
  background:var(--violet-deep);
  border-radius:var(--radius);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:28px;
}
.motif-wave .bar{
  width:6px;
  background:#5a1a1c;
  border-radius:3px;
  animation:pulse 2.6s ease-in-out infinite;
}
.motif-wave .bar.hot{background:var(--violet);}
@keyframes pulse{
  0%,100%{transform:scaleY(0.4);}
  50%{transform:scaleY(1);}
}
@media (prefers-reduced-motion:reduce){
  .motif-wave .bar{animation:none;}
}

/* motif: content/frame grid for Short SIZN Media */
.motif-frames{
  aspect-ratio:1/1;
  background:var(--violet-deep);
  border-radius:var(--radius);
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-template-rows:repeat(4, 1fr);
  gap:6px;
  padding:28px;
}
.motif-frames .cell{
  border-radius:4px;
  background:#1c2f2d;
  transition:transform .25s ease;
}
.motif-frames:hover .cell.hot{transform:scale(1.06);}
.motif-frames .cell.hot{background:var(--violet);}

@media (max-width:820px){
  .panel-grid{grid-template-columns:1fr; gap:36px;}
  .panel.reverse .panel-grid{direction:ltr;}
  .panel{padding:56px 0;}
  .motif-grid, .motif-wave, .motif-frames{max-width:320px; margin:0 auto;}
}

/* ---------- STRUCTURE ---------- */
.structure{
  padding:96px 0;
  border-top:1px solid var(--line);
}
.structure-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:center;
}
.structure h2{font-size:clamp(1.8rem, 3vw, 2.4rem); margin-bottom:18px;}
.structure p{color:#3a3a38; max-width:44ch; font-size:1.02rem; margin-bottom:12px;}

.org{
  display:flex; flex-direction:column; align-items:center; gap:0;
}
.org-box{
  border:1px solid var(--maroon);
  color:var(--maroon);
  padding:16px 22px;
  font-family:'Space Grotesk', sans-serif;
  font-weight:600;
  font-size:0.95rem;
  background:var(--paper);
  text-align:center;
  border-radius:var(--radius);
}
.org-box.small{font-weight:500; font-size:0.88rem; padding:12px 18px;}
.org-line{width:1px; height:36px; background:var(--line);}
.org-children{
  display:flex; gap:56px; margin-top:0;
}
.org-child{display:flex; flex-direction:column; align-items:center;}
.org-child .org-line{height:36px;}
.org-child.coral .org-box{border-color:var(--coral); color:var(--coral-text);}
.org-child.violet .org-box{border-color:var(--violet); color:var(--violet-text);}

@media (max-width:820px){
  .structure-grid{grid-template-columns:1fr; gap:40px;}
  .org-children{gap:32px;}
}

/* ---------- PAGE HERO (contact / legal pages) ---------- */
.page-hero{
  padding:88px 0 56px;
  border-bottom:1px solid var(--line);
}
.page-hero .kicker{
  font-size:0.95rem; color:var(--maroon); margin-bottom:16px;
  display:flex; align-items:center; gap:8px;
}
.page-hero h1{
  font-size:clamp(2.2rem, 4.5vw, 3.4rem);
  max-width:18ch;
}
.page-hero p.lead{
  margin-top:22px; font-size:1.1rem; max-width:52ch; color:#3a3a38;
}

/* ---------- CONTACT ---------- */
.contact-section{padding:72px 0 96px;}
.contact-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.contact-card{
  background:var(--paper);
  padding:36px 32px;
  display:flex; flex-direction:column; gap:14px;
}
.contact-card .tag{
  display:inline-flex; align-items:center; gap:8px;
  font-size:0.85rem; color:var(--mid);
}
.contact-card h2,.contact-card h3{font-size:1.3rem;}
.contact-card p{font-size:0.98rem; color:#3a3a38;}
.contact-card a.email{
  margin-top:auto;
  font-weight:500;
  font-size:0.98rem;
  padding-bottom:2px;
  border-bottom:1px solid currentColor;
  display:inline-block;
  width:fit-content;
}
.contact-card.general a.email{color:var(--maroon);}
.contact-card.buttie a.email{color:var(--coral-text);}
.contact-card.shortsizn a.email{color:var(--violet-text);}

@media (max-width:820px){
  .contact-cards{grid-template-columns:1fr;}
}

/* ---------- CONTACT FORM ---------- */
.form-divider{
  border-top:1px solid var(--line);
  margin-top:64px;
  padding-top:64px;
}
.form-divider h2{
  font-size:clamp(1.6rem, 3vw, 2.1rem);
}
.form-divider .form-intro{
  margin-top:12px; margin-bottom:36px;
  color:#3a3a38; max-width:52ch; font-size:1.02rem;
}
.contact-form{
  max-width:640px;
  display:flex;
  flex-direction:column;
  gap:22px;
}
.form-row{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.form-row label{
  font-size:0.88rem;
  color:var(--mid);
}
.contact-form input,
.contact-form select,
.contact-form textarea{
  border:1px solid var(--line);
  background:var(--paper);
  padding:13px 14px;
  font-family:'Inter', sans-serif;
  font-size:0.98rem;
  color:var(--ink);
  border-radius:var(--radius);
  width:100%;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
  outline:none;
  border-color:var(--maroon);
  box-shadow:0 0 0 3px rgba(124,31,46,0.18);
}
.contact-form textarea{
  resize:vertical;
  min-height:140px;
}
.contact-form select{
  appearance:none;
  background-image:linear-gradient(45deg, transparent 50%, var(--mid) 50%), linear-gradient(135deg, var(--mid) 50%, transparent 50%);
  background-position:calc(100% - 20px) center, calc(100% - 15px) center;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
}
.form-submit{
  align-self:flex-start;
  background:var(--maroon);
  color:var(--paper);
  border:none;
  padding:15px 30px;
  font-family:'Space Grotesk', sans-serif;
  font-weight:600;
  font-size:0.95rem;
  border-radius:var(--radius);
  cursor:pointer;
  transition:opacity .2s ease;
}
.form-submit:hover{opacity:0.85;}

/* ---------- LEGAL / ARTICLE PAGES ---------- */
.article-section{padding:64px 0 96px;}
.article{
  max-width:74ch;
}
.article .updated{
  font-size:0.9rem; color:var(--mid); margin-bottom:44px;
}
.article h2{
  font-size:1.35rem;
  margin-top:44px;
  margin-bottom:14px;
}
.article h2:first-of-type{margin-top:0;}
.article p{
  margin-bottom:16px;
  color:#2a2a28;
}
.article ul{
  margin:0 0 16px 22px;
  color:#2a2a28;
}
.article li{margin-bottom:8px;}
.article strong{font-weight:600;}
.article .placeholder{
  color:var(--maroon);
  background:rgba(124,31,46,0.08);
  padding:1px 6px;
  border-radius:2px;
  font-weight:500;
}

/* ---------- FOOTER ---------- */
footer{
  border-top:1px solid var(--line);
  padding:56px 0 40px;
}
.footer-grid{
  display:flex; justify-content:space-between; align-items:flex-start; gap:40px; flex-wrap:wrap;
}
footer .logo{margin-bottom:10px;}
footer .contact-line a{
  border-bottom:1px solid var(--line);
  transition:border-color .2s ease;
}
footer .contact-line a:hover{border-color:var(--maroon); color:var(--maroon);}
.footer-legal-links{
  display:flex; gap:20px; font-size:0.9rem; margin-top:14px; flex-wrap:wrap;
}
.footer-legal-links a{
  color:var(--mid);
  border-bottom:1px solid transparent;
}
.footer-legal-links a:hover{color:var(--maroon); border-color:var(--maroon);}
.legal{
  margin-top:36px;
  padding-top:24px;
  border-top:2px solid var(--maroon);
  font-size:0.85rem;
  color:var(--mid);
  max-width:70ch;
}

/* ---------- DBA POLICIES MODAL ---------- */
.dba-modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(18,18,18,0.55);
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  z-index:100;
}
.dba-modal-overlay.open{display:flex;}
.dba-modal{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  max-width:420px;
  width:100%;
  padding:32px;
  position:relative;
  animation:dbaModalIn .22s ease;
}
@keyframes dbaModalIn{
  from{opacity:0; transform:translateY(8px);}
  to{opacity:1; transform:translateY(0);}
}
@media (prefers-reduced-motion:reduce){
  .dba-modal{animation:none;}
}
.dba-modal-close{
  position:absolute;
  top:14px; right:14px;
  background:none;
  border:none;
  cursor:pointer;
  font-size:1.5rem;
  line-height:1;
  color:var(--mid);
  padding:4px;
}
.dba-modal-close:hover{color:var(--maroon);}
.dba-modal h3{
  font-size:1.3rem;
  margin-bottom:8px;
  padding-right:24px;
}
.dba-modal-sub{
  font-size:0.92rem;
  color:var(--mid);
  margin-bottom:24px;
}
.dba-modal-list{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.dba-modal-list a{
  display:block;
  font-size:0.98rem;
  padding-bottom:2px;
  border-bottom:1px solid var(--line);
  width:fit-content;
}
.dba-modal-list a:hover{color:var(--maroon); border-color:var(--maroon);}

/* ---------- subtle tint wash: footer ---------- */
.tint-wrap{
  background: rgba(124, 31, 46, 0.05);
}

/* phones: bigger touch areas for small controls (looks the same, easier to tap) */
@media (max-width:720px){
  .nav-toggle::after{content:''; position:absolute; inset:-12px;}
  .footer-legal-links a{display:inline-block; padding:11px 0;}
}


/* accessibility: clear keyboard focus ring on links, buttons and other controls */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible{
  outline:3px solid #7C1F2E;
  outline-offset:3px;
  box-shadow:0 0 0 2px #fff;
}

.motif-wave{padding:0; overflow:hidden;}