/* ==========================================================================
   Namal Wijesinghe — English Instructor
   Warm paper base with a bronze accent, drawn from the gold letterforms in the
   studio portraits. Teal appears once, in the hero photograph, as the foil.
   ========================================================================== */

:root{
  /* surfaces */
  --paper:      #F6F1E9;
  --paper-2:    #FCFAF5;
  --sand:       #EFE8DB;
  --espresso:   #241A10;
  --espresso-2: #1A120A;

  /* accents */
  --bronze:       #7E6029;   /* text-safe on paper */
  --bronze-light: #A8874A;   /* large type, rules, dark surfaces */
  --bronze-pale:  rgba(126,96,41,.14);

  /* type */
  --ink:      #1F1A14;
  --ink-soft: #6B6156;
  --cream:    #F2EBE0;
  --cream-soft:#BFB2A0;

  --display: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --body:    'Instrument Sans', 'Segoe UI', system-ui, sans-serif;
  --script:  'Newsreader', Georgia, serif;

  --pad:     clamp(1.25rem, 4vw, 2.5rem);
  --section: clamp(4rem, 8vw, 7rem);
  --radius:  6px;

  /* contextual, flipped per section */
  --bg:    var(--paper);
  --fg:    var(--ink);
  --muted: var(--ink-soft);
  --rule:  rgba(31,26,20,.14);
  --eyebrow-c: var(--bronze);
}

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

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(.98rem, .94rem + .2vw, 1.05rem);
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }

h1,h2,h3{
  font-family:var(--display);
  font-weight:800;
  line-height:1.1;
  letter-spacing:-.02em;
  margin:0;
}

:focus-visible{ outline:2px solid var(--bronze); outline-offset:3px; border-radius:3px; }

.skip-link{
  position:absolute; left:1rem; top:-4rem; z-index:200;
  background:var(--bronze); color:var(--paper);
  font-family:var(--display); font-weight:700; font-size:.85rem;
  padding:.6rem 1rem; border-radius:var(--radius); transition:top .2s;
}
.skip-link:focus{ top:1rem; }

.container{ width:min(1180px, 100% - (var(--pad) * 2)); margin-inline:auto; }
.container-narrow{ width:min(780px, 100% - (var(--pad) * 2)); }

.js .reveal{ opacity:0; transform:translateY(16px); }
.js .reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
}

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--display); font-weight:700; font-size:.9rem;
  padding:.8rem 1.4rem; border-radius:var(--radius);
  border:1.5px solid transparent; cursor:pointer;
  transition:background .18s, color .18s, border-color .18s, transform .18s;
}
.btn svg{ flex:none; }
.btn:hover{ transform:translateY(-1px); }
.btn-solid{ background:var(--bronze); color:var(--paper); border-color:var(--bronze); }
.btn-solid:hover{ background:#664C1D; border-color:#664C1D; }
.btn-line{ color:var(--ink); border-color:var(--rule); background:var(--paper-2); }
.btn-line:hover{ border-color:var(--bronze); color:var(--bronze); }
.btn-lg{ font-size:1rem; padding:.95rem 1.7rem; }

/* ---------------------------------------------------------------- labels */
.eyebrow{
  font-family:var(--display); font-weight:700;
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--eyebrow-c); margin:0 0 .85rem;
}
.kicker{
  font-size:.95rem; font-weight:500; color:var(--ink-soft); margin:0 0 1rem;
}

/* ---------------------------------------------------------------- header */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(246,241,233,.82);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:background .25s, border-color .25s, box-shadow .25s;
}
.site-header.is-stuck{
  background:rgba(246,241,233,.96);
  border-bottom-color:var(--rule);
  box-shadow:0 10px 28px -26px rgba(31,26,20,.8);
}
.header-inner{ display:flex; align-items:center; gap:1.25rem; min-height:76px; }

.brand{ display:flex; align-items:center; gap:.7rem; margin-right:auto; }
.brand-mark{
  flex:none; width:42px; height:42px; display:grid; place-items:center;
  border-radius:50%; background:var(--espresso);
  box-shadow:inset 0 0 0 1.5px var(--bronze-light);
  font-family:var(--display); font-weight:800; font-size:1.15rem; line-height:1;
  color:var(--paper);
  text-shadow:1.5px 1.5px 0 var(--bronze);
  padding-right:1px;
}
.brand-text{ display:flex; flex-direction:column; line-height:1.2; }
.brand-name{
  font-family:var(--display); font-weight:800; font-size:.95rem;
  letter-spacing:.04em; text-transform:uppercase;
}
.brand-role{
  font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--bronze); font-weight:600;
}

.nav{ display:flex; gap:1.5rem; }
.nav a{
  font-weight:500; font-size:.92rem; color:var(--ink-soft);
  padding:.35rem 0; position:relative; transition:color .18s;
}
.nav a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:var(--bronze); transition:right .25s;
}
.nav a:hover{ color:var(--ink); }
.nav a:hover::after{ right:0; }

.nav-toggle{
  display:none; width:44px; height:44px; padding:0; cursor:pointer;
  background:var(--paper-2); border:1px solid var(--rule); border-radius:var(--radius);
}
.nav-toggle span{
  display:block; width:18px; height:2px; background:var(--ink);
  margin:3.5px auto; transition:transform .25s, opacity .2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }

/* ---------------------------------------------------------------- hero */
.hero{
  position:relative;
  padding-top:clamp(2rem, 4vw, 3.5rem);
  padding-bottom:clamp(2rem, 4vw, 3rem);
  /* deliberately flat: the hero portrait is composited on this exact tone, so
     any gradient here would reveal the photograph's plate */
  background:var(--paper);
}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.92fr) minmax(0,.62fr);
  gap:clamp(1.25rem, 3vw, 2.5rem);
  align-items:center;
}

.hero-head{
  font-size:clamp(2.1rem, 1.1rem + 3.2vw, 3.7rem);
  margin:0 0 1.2rem;
}
.hero-head span{ display:block; }
.hero-head .line-accent{ color:var(--bronze); }

.hero-lede{ color:var(--ink-soft); max-width:38ch; margin:0 0 1.6rem; }

.hero-sign{ display:flex; align-items:center; gap:.9rem; margin-bottom:1.6rem; }
.hero-sign img{ width:132px; height:auto; }
.hero-sign span{
  font-size:.82rem; color:var(--ink-soft); line-height:1.4;
  border-left:1px solid var(--rule); padding-left:.9rem;
}
.hero-sign em{ display:block; font-style:normal; color:var(--bronze); font-weight:600; }

.hero-actions{ display:flex; flex-wrap:wrap; gap:.75rem; }

.hero-photo{ margin:0; align-self:center; }
.hero-photo img{
  width:100%; max-width:460px; margin-inline:auto;
  /* soften the crop at his shin so the figure dissolves into the paper */
  mask-image:linear-gradient(to bottom, #000 78%, transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom, #000 78%, transparent 100%);
}

.hero-quote{
  align-self:center;
  position:relative; padding-left:1.4rem;
  border-left:2px solid var(--bronze-light);
}
.quote-mark{
  position:absolute; left:.9rem; top:-1.6rem;
  font-family:var(--display); font-size:3.4rem; line-height:1;
  color:var(--bronze-light); opacity:.55;
}
.hero-quote blockquote{ margin:0; }
.hero-quote p{
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.15rem, .9rem + .8vw, 1.6rem);
  line-height:1.2; letter-spacing:-.015em; color:var(--ink); margin:0;
}
.hero-quote .accent{ color:var(--bronze); }
.quote-sign{ width:112px; margin-top:1rem; opacity:.9; }

/* at-a-glance strip */
.factbar{
  list-style:none; margin:clamp(1.75rem, 4vw, 2.75rem) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  background:var(--espresso); color:var(--cream);
  border-radius:var(--radius); overflow:hidden;
}
.factbar li{
  display:flex; align-items:center; gap:.8rem;
  padding:1.15rem clamp(.9rem, 2vw, 1.6rem);
  border-right:1px solid rgba(242,235,224,.12);
}
.factbar li:last-child{ border-right:0; }
.factbar svg{ flex:none; width:26px; height:26px; fill:var(--bronze-light); }
.factbar span{ display:flex; flex-direction:column; font-size:.88rem; line-height:1.35; min-width:0; }
.factbar b{
  font-family:var(--display); font-weight:700; font-size:.66rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--bronze-light);
  margin-bottom:.15rem;
}
.factbar a:hover{ color:var(--bronze-light); }

/* ---------------------------------------------------------------- sections */
.section{ padding-block:var(--section); background:var(--bg); color:var(--fg); }
.section-sand{ --bg:var(--sand); }

.section-head{ max-width:44rem; margin-bottom:clamp(2.25rem, 4vw, 3.25rem); }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head h2{ font-size:clamp(1.7rem, 1.2rem + 1.9vw, 2.6rem); margin-bottom:.75rem; }
.section-lede{ color:var(--muted); margin:0; }
.section-head.center .section-lede{ margin-inline:auto; max-width:52ch; }

/* ---------------------------------------------------------------- about */
.about-grid{
  display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1fr);
  gap:clamp(2rem, 5vw, 4rem); align-items:center;
}
.about-photo{ margin:0; }
.photo-plate{ position:relative; display:block; }
.photo-plate::before{
  content:''; position:absolute; inset:0;
  transform:translate(16px, 16px);
  background:var(--bronze-light); border-radius:var(--radius);
}
.photo-plate::after{
  content:''; position:absolute; left:-18px; top:-18px; width:110px; height:110px;
  background-image:radial-gradient(var(--bronze-pale) 1.6px, transparent 1.6px);
  background-size:11px 11px;
}
.photo-plate img{
  position:relative; z-index:1; width:100%;
  border-radius:var(--radius);
}
.about-copy h2{ font-size:clamp(1.7rem, 1.2rem + 1.9vw, 2.5rem); margin-bottom:1.1rem; }
.prose p{ color:var(--ink-soft); margin:0 0 1rem; }
.prose strong{ color:var(--ink); font-weight:600; }

.features{
  list-style:none; margin:2rem 0 0; padding:1.75rem 0 0;
  border-top:1px solid var(--rule);
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1.5rem 1.5rem;
}
.features li{ display:flex; flex-direction:column; gap:.3rem; }
.features svg{ width:26px; height:26px; fill:var(--bronze); margin-bottom:.35rem; }
.features b{ font-family:var(--display); font-weight:700; font-size:.95rem; }
.features span{ font-size:.85rem; color:var(--ink-soft); line-height:1.45; }

/* ---------------------------------------------------------------- quals */
.quals{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:1rem;
}
.quals li{
  background:var(--paper-2); border:1px solid var(--rule);
  border-radius:var(--radius); padding:1.35rem 1.15rem; text-align:center;
  display:flex; flex-direction:column; gap:.3rem;
  transition:transform .2s, border-color .2s;
}
.quals li:hover{ transform:translateY(-3px); border-color:var(--bronze-light); }
.quals b{ font-family:var(--display); font-weight:800; font-size:1.05rem; color:var(--bronze); }
.quals span{ font-size:.78rem; color:var(--ink-soft); line-height:1.4; }
/* needs the same specificity as `.quals li` above, or the paper background wins */
.quals li.qual-years{ background:var(--espresso); border-color:var(--espresso); }
.quals li.qual-years b{ color:var(--bronze-light); }
.quals li.qual-years span{ color:var(--cream-soft); }

/* ------------------------------------------- the difference (custom block) */
.compare{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr));
  gap:1.25rem; align-items:stretch;
}
.compare-col{ border-radius:var(--radius); padding:clamp(1.5rem, 3vw, 2.25rem); }
.compare-label{
  font-family:var(--display); font-weight:700; font-size:.72rem;
  letter-spacing:.16em; text-transform:uppercase; margin:0 0 1.25rem;
}
.compare-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:.9rem; }
.compare-col li{ position:relative; padding-left:2rem; line-height:1.5; }
.compare-col li::before{
  position:absolute; left:0; top:.05em;
  width:1.3rem; text-align:center; font-weight:700;
}

.compare-old{
  background:transparent; border:1px dashed var(--rule);
  color:var(--ink-soft);
}
.compare-old .compare-label{ color:var(--ink-soft); }
.compare-old li::before{ content:'\00d7'; color:#B0A493; font-size:1.15em; }

.compare-new{
  background:var(--espresso); color:var(--cream);
  box-shadow:0 24px 50px -34px rgba(36,26,16,.9);
}
.compare-new .compare-label{ color:var(--bronze-light); }
.compare-new li::before{ content:'\2713'; color:var(--bronze-light); }

/* ---------------------------------------------------------------- cards */
.cards{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:1.25rem; }
.card{
  background:var(--paper-2); border:1px solid var(--rule);
  border-top:3px solid var(--bronze-light);
  border-radius:var(--radius); padding:clamp(1.5rem, 3vw, 2rem);
  display:flex; flex-direction:column;
  transition:transform .22s, box-shadow .22s, border-top-color .22s;
}
.card:hover{
  transform:translateY(-4px); border-top-color:var(--bronze);
  box-shadow:0 18px 40px -28px rgba(31,26,20,.65);
}
.card-tag{
  font-family:var(--display); font-weight:700; font-size:.68rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--bronze); margin:0 0 .8rem;
}
.card h3{ font-size:1.3rem; margin-bottom:.7rem; }
.card-body{ color:var(--ink-soft); font-size:.94rem; margin:0 0 1.25rem; }
.card-list{
  list-style:none; margin:auto 0 0; padding:1.15rem 0 0;
  border-top:1px solid var(--rule); display:grid; gap:.5rem;
}
.card-list li{ position:relative; padding-left:1.3rem; font-size:.9rem; }
.card-list li::before{
  content:''; position:absolute; left:0; top:.6em;
  width:7px; height:7px; background:var(--bronze-light); border-radius:1px;
}

/* ---------------------------------------------------------------- method */
.flow{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
  gap:clamp(1.5rem, 3vw, 2.25rem);
}
.flow li{ padding-top:1.4rem; border-top:2px solid var(--rule); position:relative; }
.flow-mark{
  position:absolute; top:-6px; left:0; width:10px; height:10px;
  background:var(--bronze); box-shadow:3px 3px 0 var(--bronze-light);
}
.flow h3{ font-size:1.05rem; margin-bottom:.5rem; }
.flow p{ margin:0; font-size:.9rem; color:var(--ink-soft); }

/* ---------------------------------------------------------------- modes */
.modes{ display:grid; grid-template-columns:repeat(auto-fit, minmax(290px,1fr)); gap:1.25rem; }
.mode{
  background:var(--paper-2); border:1px solid var(--rule);
  border-radius:var(--radius); padding:clamp(1.6rem, 3vw, 2.1rem);
}
.mode-icon{
  display:grid; place-items:center; width:52px; height:52px; border-radius:50%;
  background:var(--bronze); margin-bottom:1.1rem;
}
.mode-icon svg{ width:24px; height:24px; fill:var(--paper); }
.mode-kicker{
  font-family:var(--display); font-weight:700; font-size:.68rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--bronze); margin:0 0 .35rem;
}
.mode h3{ font-size:1.4rem; margin-bottom:.6rem; }
.mode p{ margin:0; color:var(--ink-soft); font-size:.94rem; }

/* ---------------------------------------------------------------- faq */
.faq details{ border-bottom:1px solid var(--rule); padding:1.1rem 0; }
.faq details:first-child{ border-top:1px solid var(--rule); }
.faq summary{
  list-style:none; cursor:pointer; display:flex; align-items:flex-start; gap:1rem;
  font-family:var(--display); font-weight:700; font-size:1.02rem; line-height:1.35;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:'+'; margin-left:auto; flex:none;
  font-size:1.2rem; line-height:1; color:var(--bronze); transition:transform .22s;
}
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details p{ margin:.8rem 0 .2rem; padding-right:2rem; color:var(--ink-soft); }
.faq details p a{ color:var(--bronze); text-decoration:underline; text-underline-offset:3px; }

/* --------------------------------------------- call script (custom block) */
.callout{
  background:var(--espresso); color:var(--cream);
  padding-block:clamp(3.25rem, 6vw, 5rem);
  --eyebrow-c:var(--bronze-light);
}
.callout-grid{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(2rem, 5vw, 4rem); align-items:center;
}
.callout h2{ font-size:clamp(1.7rem, 1.2rem + 1.9vw, 2.5rem); margin-bottom:1.5rem; }
.script{
  margin:0 0 1.5rem; padding:1.1rem 0 1.1rem 1.5rem;
  border-left:3px solid var(--bronze-light);
}
.script p{
  margin:0; font-family:var(--script); font-style:italic; font-weight:300;
  font-size:clamp(1.15rem, .95rem + .8vw, 1.6rem); line-height:1.4; color:var(--paper);
}
.callout-note{ margin:0; color:var(--cream-soft); font-size:.94rem; max-width:52ch; }

.callout-action{
  background:rgba(242,235,224,.05);
  border:1px solid rgba(242,235,224,.14);
  border-radius:var(--radius);
  padding:clamp(1.6rem, 3vw, 2.25rem); text-align:center;
}
.callout-label{
  display:block; font-family:var(--display); font-weight:700; font-size:.68rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--bronze-light); margin-bottom:.6rem;
}
.callout-number{
  display:block; font-family:var(--display); font-weight:800;
  font-size:clamp(1.85rem, 1.2rem + 2.4vw, 2.9rem); letter-spacing:-.02em;
  color:var(--paper); margin-bottom:1.25rem;
  text-shadow:2px 2px 0 var(--bronze);
  transition:text-shadow .2s, color .2s;
}
.callout-number:hover{ color:#fff; text-shadow:4px 4px 0 var(--bronze); }
.callout-action .btn-solid{ background:var(--bronze-light); border-color:var(--bronze-light); color:var(--espresso); }
.callout-action .btn-solid:hover{ background:var(--paper); border-color:var(--paper); }
.callout-place{ margin:1.1rem 0 0; font-size:.82rem; color:var(--cream-soft); }

/* ---------------------------------------------------------------- footer */
.site-footer{
  background:var(--espresso-2); color:var(--cream-soft);
  padding-top:clamp(2.75rem, 5vw, 4rem); font-size:.92rem;
}
.footer-grid{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:clamp(1.75rem, 4vw, 3rem); padding-bottom:2.5rem;
}
.site-footer .brand{ margin:0 0 1rem; }
.site-footer .brand-name{ color:var(--cream); }
.site-footer .brand-role{ color:var(--bronze-light); }
.site-footer .brand-mark{ background:var(--espresso); color:var(--paper); }
.footer-blurb{ margin:0; line-height:1.6; max-width:34ch; }

.site-footer h2{
  font-family:var(--display); font-weight:700; font-size:.7rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--cream);
  margin:0 0 1rem;
}
.footer-col{ display:flex; flex-direction:column; gap:.55rem; align-items:flex-start; }
.footer-col p{ margin:0; }
.footer-col a{ transition:color .18s; }
.footer-col a:hover{ color:var(--bronze-light); }
.footer-contact p:first-of-type a{
  font-family:var(--display); font-weight:800; font-size:1.15rem; color:var(--cream);
}
.footer-place{ margin-top:.5rem !important; line-height:1.6; }

.footer-base{
  display:flex; flex-wrap:wrap; gap:.7rem 1.5rem;
  justify-content:space-between; align-items:center;
  padding:1.3rem 0; border-top:1px solid rgba(242,235,224,.1); font-size:.8rem;
}
.footer-base p{ margin:0; }
.footer-motto{ color:var(--bronze-light); letter-spacing:.02em; }

/* ------------------------------------------------------- Plixoo credit bar */
.plixoo{
  background:#140E07;                                  /* one step under the footer */
  border-top:1px solid rgba(168,135,74,.25);           /* site accent, low opacity   */
  padding:16px 0;
}
.plixoo .container{
  display:flex; align-items:center; justify-content:center;
  gap:18px; flex-wrap:wrap; text-align:center;
}
.plixoo p{
  font-family:var(--body); font-size:.88rem;
  color:var(--cream-soft); line-height:1.4; margin:0;
}
.plixoo strong{ color:var(--bronze-light); font-weight:600; }
.plixoo-btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--display); font-weight:700; font-size:.86rem;
  border:1.5px solid var(--bronze-light); color:#E8D9BC;
  border-radius:var(--radius); padding:9px 20px;
  transition:background .2s, color .2s;
}
.plixoo-btn svg{ flex:none; }
.plixoo-btn:hover{ background:var(--bronze-light); color:#140E07; }

/* ---------------------------------------------------------------- responsive */
@media (max-width:1080px){
  .hero-grid{ grid-template-columns:minmax(0,1fr) minmax(0,.85fr); }
  .hero-quote{
    grid-column:1 / -1; align-self:start; padding-bottom:0;
    border-left:0; border-top:2px solid var(--bronze-light);
    padding-left:0; padding-top:1.6rem; margin-top:.5rem;
    display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
  }
  .hero-quote .quote-mark{ display:none; }
  .quote-sign{ margin-top:0; }
  .factbar{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .factbar li:nth-child(2n){ border-right:0; }
  .factbar li:nth-child(-n+2){ border-bottom:1px solid rgba(242,235,224,.12); }
  .about-grid{ grid-template-columns:1fr; }
  .about-photo{ max-width:380px; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer-brand{ grid-column:1 / -1; }
}

@media (max-width:880px){
  .header-cta{ display:none; }
  .nav-toggle{ display:block; }
  .nav{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; gap:0;
    background:var(--paper-2); border-bottom:1px solid var(--rule);
    padding:0 var(--pad); max-height:0; overflow:hidden;
    transition:max-height .3s ease;
  }
  .nav.is-open{ max-height:420px; }
  .nav a{ padding:.95rem 0; font-size:1rem; border-bottom:1px solid var(--rule); }
  .nav a:last-child{ border-bottom:0; }
  .nav a::after{ display:none; }

  .hero-grid{ grid-template-columns:1fr; }
  .hero-photo{ max-width:420px; margin-inline:auto; }
  .callout-grid{ grid-template-columns:1fr; }
}

@media (max-width:560px){
  .factbar{ grid-template-columns:1fr; }
  .factbar li{ border-right:0; border-bottom:1px solid rgba(242,235,224,.12); }
  .factbar li:last-child{ border-bottom:0; }
  .hero-actions .btn{ flex:1 1 100%; }
  .footer-grid{ grid-template-columns:1fr; }
  .brand-role{ display:none; }
  .hero-quote{ flex-direction:column; align-items:flex-start; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js .reveal{ opacity:1; transform:none; }
}

@media print{
  .site-header,.nav-toggle,.plixoo,.hero-photo,.about-photo{ display:none; }
  body{ background:#fff; color:#000; }
}