/* Little Sirens concept 1
   Palette and language lifted from their own "Little Sirens Little Wonders" cut
   paper collage artwork: turquoise ground, kraft paper trees, apple red, gold
   spots, purple bird, cream paper. Cards behave like cut paper, slightly askew. */
:root{
  --teal:#35BCCB; --teal-2:#22A3B4; --teal-deep:#0E7A89; --teal-ink:#0B3D46;
  --kraft:#CBA271; --kraft-2:#E0BE92;
  --apple:#D93B2B; --apple-deep:#B32B1D;
  --gold:#F2B333; --gold-2:#FFD37A;
  --grape:#8E6FC4; --leaf:#7BB661;
  --paper:#FBF5E9; --paper-2:#F3E7D2; --white:#fff;
  --ink:#123640; --ink-soft:#4A6A72;
  --line:rgba(18,54,64,.15);
  --disp:'Fraunces',Georgia,serif; --body:'Karla',system-ui,-apple-system,sans-serif;
  --wrap:1200px; --r:20px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
section[id]{scroll-margin-top:96px}
img{max-width:100%;display:block;height:auto}
.wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto}
h1,h2,h3,h4{font-family:var(--disp);font-weight:600;line-height:1.08;margin:0 0 .5em}
h2{font-size:clamp(31px,4.6vw,52px)}
h3{font-size:clamp(21px,2.4vw,27px)}
p{margin:0 0 1em}
a{color:inherit}
.eyebrow{font-family:var(--body);font-weight:700;font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-deep);margin:0 0 14px}
.lede{font-size:clamp(17px,2vw,20px);color:var(--ink-soft);max-width:62ch}
/* multi colour cut paper letters, like the album art */
.cut b{display:inline-block;white-space:nowrap;font-weight:inherit}
.cut i{font-style:normal;display:inline-block}
.cut i:nth-child(6n+1){color:var(--apple)}
.cut i:nth-child(6n+2){color:var(--gold)}
.cut i:nth-child(6n+3){color:var(--grape)}
.cut i:nth-child(6n+4){color:var(--leaf)}
.cut i:nth-child(6n+5){color:var(--kraft-2)}
.cut i:nth-child(6n+6){color:var(--white)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:54px;padding:0 27px;border-radius:999px;font-weight:700;font-size:16px;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s}
.btn:hover{transform:translateY(-2px) rotate(-1deg)}
.btn-1{background:var(--apple);color:#fff;box-shadow:0 8px 0 var(--apple-deep)}
.btn-1:hover{background:var(--apple-deep);box-shadow:0 6px 0 #8d2216}
.btn-2{background:var(--gold);color:var(--ink);box-shadow:0 8px 0 #c98f1c}
.btn-2:hover{background:var(--gold-2);box-shadow:0 6px 0 #c98f1c}
.btn-3{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-3:hover{border-color:var(--ink);background:rgba(18,54,64,.05)}

/* header */
.hd{position:sticky;top:0;z-index:60;background:rgba(251,245,233,.93);backdrop-filter:blur(14px);border-bottom:3px solid var(--teal)}
.hd-in{display:flex;align-items:center;gap:18px;min-height:74px}
.brand{display:flex;align-items:center;gap:.45em;text-decoration:none;font-family:var(--disp);font-weight:700;font-size:22px;min-height:46px}
.brand .dots{display:flex;gap:3px;flex:0 0 auto}
.brand .dots i{width:11px;height:11px;border-radius:50%}
.brand .dots i:nth-child(1){background:var(--apple)}
.brand .dots i:nth-child(2){background:var(--gold)}
.brand .dots i:nth-child(3){background:var(--grape)}
.nav{margin-left:auto;display:flex;gap:4px;align-items:center}
.nav a{position:relative;text-decoration:none;font-weight:600;font-size:15px;padding:12px 13px;border-radius:11px;color:var(--ink-soft)}
.nav a:hover{color:var(--ink);background:rgba(53,188,203,.16)}
.hd-cta{margin-left:8px}
.burger{display:none;margin-left:auto;width:48px;height:48px;border:2px solid var(--teal);background:transparent;border-radius:13px;align-items:center;justify-content:center;cursor:pointer}
.burger span{display:block;width:20px;height:2.5px;background:var(--ink);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:2.5px;background:var(--ink)}
.burger span::before{top:-6px}.burger span::after{top:6px}
.mnav{position:fixed;left:0;right:0;bottom:0;top:74px;background:var(--paper);z-index:55;transform:translateX(100%);transition:transform .3s;overflow-y:auto;padding:24px 20px 60px;display:flex;flex-direction:column;gap:4px}
.mnav[data-open]{transform:none}
.mnav a{text-decoration:none;font-family:var(--disp);font-size:26px;padding:14px 6px;border-bottom:2px dotted var(--line)}
.mnav .btn{margin-top:18px}

/* hero */
.hero{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:min(92vh,880px);padding:70px 0 84px;overflow:hidden;background:var(--teal)}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(11,61,70,.9) 0%,rgba(11,61,70,.76) 38%,rgba(14,122,137,.36) 66%,rgba(11,61,70,.55) 100%)}
/* paper confetti, purely decorative */
.conf{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.conf i{position:absolute;display:block;border-radius:50%;opacity:.75}
.hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;align-items:center}
.hero-copy{max-width:36ch;color:#fff}
.hero-copy .eyebrow{color:var(--gold-2)}
.hero h1{font-size:clamp(42px,6.4vw,78px);color:#fff;text-wrap:balance;letter-spacing:-.01em}
.hero h1 .cut{display:block}
.hero-copy p{color:rgba(255,255,255,.92);font-size:clamp(17px,1.9vw,20px);max-width:40ch}
.hero-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero-meta{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:26px 42px;margin-top:44px;padding-top:26px;border-top:2px dotted rgba(255,255,255,.42)}
.hero-meta div{color:#fff}
.hero-meta b{display:block;font-family:var(--disp);font-size:clamp(25px,3vw,35px);line-height:1;color:var(--gold-2)}
.hero-meta span{font-size:14px;color:rgba(255,255,255,.82)}

/* glass quiz card */
.hero-fig{min-height:520px;display:flex;align-items:center}
.gq{width:100%;background:linear-gradient(160deg,rgba(255,255,255,.21),rgba(255,255,255,.09));backdrop-filter:blur(30px) saturate(165%);-webkit-backdrop-filter:blur(30px) saturate(165%);border-radius:26px;padding:0 0 24px;position:relative;overflow:hidden;box-shadow:0 26px 60px rgba(0,0,0,.34);transform:rotate(-.7deg)}
.gq::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 8% 0%,rgba(255,255,255,.36),transparent 58%);pointer-events:none}
.gq::after{content:"";position:absolute;inset:0;border-radius:26px;padding:1.5px;background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(242,179,51,.55));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){.gq{background:rgba(11,61,70,.94)}}
.gq-brand{position:relative;z-index:2;background:linear-gradient(180deg,rgba(242,179,51,.3),rgba(255,255,255,0));padding:18px 22px 14px;text-align:center}
.gq-brand img{height:74px;width:auto;margin:0 auto;filter:brightness(0) invert(1)}
.gq-body{position:relative;z-index:2;padding:6px 22px 0}
.gq h3{color:#fff;font-size:23px;margin-bottom:6px}
.gq-step{font-size:14px;color:rgba(255,255,255,.85);margin:0 0 14px}
.gq-opts{display:grid;gap:9px;margin-bottom:6px}
.gq-opt{width:100%;text-align:left;min-height:54px;padding:14px 16px;border-radius:14px;border:1.5px solid rgba(255,255,255,.36);background:rgba(255,255,255,.12);color:#fff;font:inherit;font-size:16px;font-weight:600;cursor:pointer;transition:background .18s,transform .18s}
.gq-opt:hover{background:rgba(255,255,255,.24);transform:translateX(4px) rotate(-.5deg)}
.gq-field{display:block;margin-bottom:10px}
.gq-field span{display:block;font-size:14px;font-weight:700;color:rgba(255,255,255,.92);margin-bottom:5px}
.gq-field input{width:100%;min-height:54px;font-size:16px;font-family:inherit;padding:0 14px;border-radius:13px;border:1.5px solid rgba(255,255,255,.36);background:rgba(255,255,255,.14);color:#fff}
.gq-field input::placeholder{color:rgba(255,255,255,.58)}
.gq-field input:focus{outline:2px solid var(--gold-2);outline-offset:1px}
.gq .btn-1{width:100%;margin-top:6px}
.gq-note{font-size:12.5px;color:rgba(255,255,255,.7);margin:12px 0 0;text-align:center}
.gq-ok{display:none;text-align:center;padding:10px 0 4px}
.gq-ok[data-on]{display:block}
.gq-ok h3{margin-bottom:8px}
.gq-ok p{color:rgba(255,255,255,.9);font-size:15.5px}
.gq-bar{height:5px;border-radius:999px;background:rgba(255,255,255,.22);overflow:hidden;margin:0 0 16px}
.gq-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--apple));transition:width .35s}

/* sections */
.sec{padding:96px 0;position:relative}
.sec-paper2{background:var(--paper-2)}
.sec-teal{background:var(--teal);color:#fff}
.sec-teal .eyebrow{color:var(--gold-2)}
.sec-teal .lede{color:rgba(255,255,255,.9)}
.sec-teal h2{color:#fff}
.sec-head{max-width:64ch;margin-bottom:46px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.card{background:var(--white);border-radius:var(--r);overflow:hidden;border:2px solid var(--ink);box-shadow:8px 8px 0 rgba(18,54,64,.14);display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s}
.card:nth-child(1){transform:rotate(-.8deg)}
.card:nth-child(3){transform:rotate(.8deg)}
.card:hover{transform:rotate(0) translateY(-5px);box-shadow:10px 12px 0 rgba(18,54,64,.2)}
.card img{aspect-ratio:4/3;object-fit:cover;width:100%;border-bottom:2px solid var(--ink)}
.card-b{padding:22px 22px 26px;flex:1;display:flex;flex-direction:column}
.card-b p{color:var(--ink-soft);font-size:16px}
.card-b p:last-child{flex:0;color:var(--ink)}
.tag{display:inline-block;align-self:flex-start;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:6px 13px;border-radius:999px;margin-bottom:12px;color:#fff}
.card:nth-child(1) .tag{background:var(--apple)}
.card:nth-child(2) .tag{background:var(--grape)}
.card:nth-child(3) .tag{background:var(--leaf)}

/* session strip */
.sess{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.sess-img{border-radius:var(--r);overflow:hidden;border:3px solid var(--ink);box-shadow:10px 10px 0 var(--gold);transform:rotate(-1deg)}
.sess-img img{aspect-ratio:5/4;object-fit:cover;width:100%}
.sess-img.alt{box-shadow:10px 10px 0 var(--grape);transform:rotate(1deg)}
.facts{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:2px}
.facts li{display:grid;grid-template-columns:42px 1fr;gap:12px;align-items:start;padding:14px 0;border-bottom:2px dotted var(--line)}
.facts b{grid-row:1 / span 2;grid-column:1;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;font-family:var(--disp);font-size:16px;color:#fff;background:var(--teal-2)}
.facts li:nth-child(2) b{background:var(--apple)}
.facts li:nth-child(3) b{background:var(--gold);color:var(--ink)}
.facts li:nth-child(4) b{background:var(--grape)}
.facts div{grid-column:2}
.facts strong{display:block;font-size:16.5px}
.facts small{font-size:14.5px;color:var(--ink-soft)}
.sec-teal .facts small{color:rgba(255,255,255,.85)}
.sec-teal .facts li{border-bottom-color:rgba(255,255,255,.3)}

/* family shoot: paired portrait + the band of home garden photos */
.duo{position:relative}
.duo-a{border-radius:var(--r);overflow:hidden;border:3px solid var(--ink);box-shadow:10px 10px 0 var(--grape);transform:rotate(1deg)}
.duo-a img{aspect-ratio:5/4;object-fit:cover;width:100%}
.duo-b{position:absolute;right:-16px;bottom:-38px;width:44%;border-radius:16px;overflow:hidden;border:3px solid var(--ink);box-shadow:8px 8px 0 var(--gold);transform:rotate(-3deg);background:var(--white)}
.duo-b img{aspect-ratio:4/3;object-fit:cover;width:100%}
.fband{margin-top:104px}
.fband-h{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start;margin-bottom:32px}
.fband-h h3{font-size:clamp(24px,3vw,34px);margin:0}
.fband-h p{margin:0;color:var(--ink-soft);font-size:17px}
.fband-g{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.fband-g figure{margin:0;border-radius:16px;overflow:hidden;border:3px solid var(--ink)}
.fband-g figure:nth-child(3n+1){box-shadow:7px 7px 0 var(--teal)}
.fband-g figure:nth-child(3n+2){box-shadow:7px 7px 0 var(--apple)}
.fband-g figure:nth-child(3n+3){box-shadow:7px 7px 0 var(--gold)}
.fband-g img{aspect-ratio:4/3;object-fit:cover;width:100%;transition:transform .5s}
.fband-g figure:hover img{transform:scale(1.05)}

/* gallery */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.gal figure{margin:0;border-radius:16px;overflow:hidden;border:3px solid var(--ink)}
.gal figure:nth-child(3n+1){box-shadow:6px 6px 0 var(--apple)}
.gal figure:nth-child(3n+2){box-shadow:6px 6px 0 var(--gold)}
.gal figure:nth-child(3n+3){box-shadow:6px 6px 0 var(--grape)}
.gal img{aspect-ratio:1/1;object-fit:cover;width:100%;transition:transform .5s}
.gal figure:hover img{transform:scale(1.06)}
.gal .tall{grid-row:span 2}
.gal .tall img{aspect-ratio:1/2.1}

/* quotes */
.quotes{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.quote{background:var(--white);border:2px solid var(--ink);border-radius:var(--r);padding:32px 30px 28px;position:relative;box-shadow:8px 8px 0 var(--teal)}
.quote:nth-child(2){box-shadow:8px 8px 0 var(--gold);transform:rotate(.7deg)}
.quote:nth-child(1){transform:rotate(-.7deg)}
.quote p{font-family:var(--disp);font-size:19px;line-height:1.5;color:var(--ink)}
.quote footer{font-size:14.5px;color:var(--ink-soft);font-weight:700}
.quote::after{content:"\201D";position:absolute;right:22px;bottom:2px;font-family:var(--disp);font-size:80px;color:rgba(53,188,203,.28);line-height:1}

/* contact */
.ct{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.cbox{background:var(--white);border:2px solid var(--ink);border-radius:var(--r);padding:30px;box-shadow:10px 10px 0 var(--apple)}
.cbox h3{margin-bottom:14px}
.cf{display:grid;gap:12px}
.cf label{display:block}
.cf span{display:block;font-size:14px;font-weight:700;margin-bottom:5px}
.cf input,.cf textarea{width:100%;min-height:54px;font-size:16px;font-family:inherit;padding:14px;border:2px solid var(--line);border-radius:13px;background:var(--paper);color:var(--ink)}
.cf textarea{min-height:110px;resize:vertical}
.cf input:focus,.cf textarea:focus{outline:2px solid var(--teal-2);outline-offset:1px;border-color:var(--teal-2)}
.cnote{font-size:13px;color:var(--ink-soft);margin-top:4px}

/* footer */
.ft{background:var(--teal-ink);color:rgba(255,255,255,.82);padding:64px 0 30px}
.ft a{color:rgba(255,255,255,.82);text-decoration:none}
.ft a:hover{color:#fff}
.ft-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;padding-bottom:36px;border-bottom:2px dotted rgba(255,255,255,.28)}
.ft h4{color:var(--gold-2);font-size:17px;margin-bottom:14px}
.ft ul{list-style:none;padding:0;margin:0;display:grid;gap:4px}
.ft ul a{display:inline-block;padding:7px 0;min-height:34px;font-size:15px}
.ft-bot{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;align-items:center;padding-top:22px;font-size:14px}
.by{position:relative;display:inline-block;padding:8px 0;font-size:14px;color:rgba(255,255,255,.68);text-decoration:none}
.by b{color:var(--gold);font-weight:700}
.by::after{content:"";position:absolute;inset:-6px -8px}
.disc{font-size:13px;color:rgba(255,255,255,.55);max-width:70ch;margin-top:6px}

/* reveal */
.rv{opacity:0;transform:translateY(22px);filter:blur(5px);transition:opacity .7s,transform .7s,filter .7s}
.rv.in{opacity:1;transform:none;filter:none}
body.noanim .rv{opacity:1!important;transform:none!important;filter:none!important}
.prog{position:fixed;top:0;left:0;height:4px;background:linear-gradient(90deg,var(--apple),var(--gold),var(--grape),var(--teal));z-index:80;width:0}

/* ===== dock ===== */
body.has-dock{padding-bottom:88px}
.dk{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:70;background:rgba(11,61,70,.96);backdrop-filter:blur(16px);border-radius:999px;padding:7px;display:flex;gap:2px;box-shadow:0 12px 34px rgba(0,0,0,.3);max-width:calc(100% - 24px)}
.dk-pill{position:absolute;top:7px;bottom:7px;border-radius:999px;background:rgba(255,255,255,.18);transition:left .3s,width .3s;z-index:0}
.dk a,.dk button{position:relative;z-index:1;display:inline-flex;align-items:center;gap:.45em;min-height:46px;padding:0 15px;border-radius:999px;border:0;background:transparent;color:rgba(255,255,255,.8);font:inherit;font-size:14.5px;font-weight:600;text-decoration:none;cursor:pointer;white-space:nowrap}
.dk a.on,.dk a:hover,.dk button:hover{color:#fff}
.dk-chat{display:none}
.dk .dk-cta{background:var(--apple);color:#fff}
.dk .dk-cta:hover{background:var(--apple-deep)}

/* ===== chat ===== */
.lsc-fab{position:fixed;right:20px;bottom:104px;z-index:72;width:62px;height:62px;border-radius:50%;border:3px solid #fff;background:var(--apple);color:#fff;font-size:26px;cursor:pointer;box-shadow:0 12px 28px rgba(217,59,43,.44)}
.lsc-fab:hover{background:var(--apple-deep)}
.lsc{position:fixed;right:20px;bottom:104px;z-index:75;width:min(370px,calc(100vw - 32px));height:min(540px,calc(100vh - 150px));background:var(--paper);border:3px solid var(--ink);border-radius:22px;box-shadow:0 26px 60px rgba(0,0,0,.28);display:none;flex-direction:column;overflow:hidden}
.lsc[data-open]{display:flex}
.lsc-hd{background:var(--teal-2);color:#fff;padding:15px 18px;display:flex;align-items:center;gap:10px}
.lsc-hd b{font-family:var(--disp);font-size:17px}
.lsc-hd button{margin-left:auto;background:transparent;border:0;color:#fff;font-size:24px;cursor:pointer;width:40px;height:40px;border-radius:10px}
.lsc-log{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px}
.lsc-msg{max-width:85%;padding:11px 14px;border-radius:16px;font-size:15px;line-height:1.5}
.lsc-bot{background:#fff;border:2px solid var(--line);border-bottom-left-radius:5px;align-self:flex-start}
.lsc-me{background:var(--apple);color:#fff;border-bottom-right-radius:5px;align-self:flex-end}
.lsc-in{display:flex;gap:8px;padding:12px;border-top:2px dotted var(--line);background:var(--paper)}
.lsc-in input{flex:1;min-height:48px;font-size:16px;font-family:inherit;padding:0 14px;border:2px solid var(--line);border-radius:13px;background:#fff;color:var(--ink);min-width:0}
.lsc-in button{min-height:48px;padding:0 16px;border:0;border-radius:13px;background:var(--apple);color:#fff;font-weight:700;font-size:15px;cursor:pointer}
.lsc-foot{font-size:12.5px;color:var(--ink-soft);text-align:center;padding:0 12px 10px}

/* ===== responsive ===== */
@media(max-width:1023px){
  .lsc-fab{display:none}
  .dk-chat{display:inline-flex}
  .lsc{bottom:96px}
}
@media(max-width:960px){
  .nav,.hd-cta{display:none}
  .burger{display:flex}
  .hero .wrap{grid-template-columns:1fr;gap:34px}
  .hero-fig{min-height:0;order:2}
  .hero-copy{max-width:none}
  .sess,.ct,.quotes{grid-template-columns:1fr;gap:34px}
  .grid-3{grid-template-columns:1fr 1fr}
  .ft-top{grid-template-columns:1fr 1fr}
  .gal{grid-template-columns:repeat(2,1fr)}
  .gal .tall{grid-row:span 1}
  .gal .tall img{aspect-ratio:1/1}
  .fband-h{grid-template-columns:1fr;gap:16px;align-items:start}
  .fband{margin-top:72px}
  .duo-b{width:40%;right:0;bottom:-26px}
  .card,.quote,.sess-img,.gq,.duo-a{transform:none!important}
}
@media(max-width:640px){
  body{font-size:16.5px}
  .sec{padding:64px 0}
  .hero{min-height:0;padding:52px 0 62px}
  .grid-3{grid-template-columns:1fr}
  .ft-top{grid-template-columns:1fr;gap:26px}
  .gal{grid-template-columns:repeat(2,1fr);gap:10px}
  .hero-meta{gap:20px 30px;margin-top:32px}
  .hero-acts .btn{width:100%}
  .dk a span.wide,.dk button span.wide{display:none}
  .dk a,.dk button{padding:0 13px}
  body.has-dock{padding-bottom:82px}
  .fband-g{grid-template-columns:repeat(2,1fr);gap:10px}
  .fband{margin-top:56px}
  .duo-b{position:static;width:100%;margin-top:14px;transform:none}
  .card,.quote,.cbox,.sess-img,.duo-a,.duo-b{box-shadow:5px 5px 0 rgba(18,54,64,.16)}
}
/* phone standard: 16px fields, 12px text floor */
@media(max-width:900px){
  input,textarea,select{font-size:16px!important}
  .eyebrow,.tag,.cnote,.disc,.gq-note,.lsc-foot,.ft-bot,.facts small,.quote footer,.hero-meta span{font-size:13px}
  .lsc-foot{font-size:12.5px}
}

/* dock must never exceed the screen (fixed bar shrink to fit trap) */
@media(max-width:760px){
  .dk{left:12px;right:12px;transform:none;max-width:none;justify-content:space-between;padding:6px}
  .dk a[data-sec="what"],.dk a[data-sec="who"]{display:none}
  .dk a,.dk button{padding:0 12px;font-size:14px;min-width:0}
  .dk .dk-cta{flex:0 0 auto}
}
@media(max-width:400px){
  .dk a,.dk button{padding:0 9px;font-size:13.5px}
}

/* ===== video testimonial rail ===== */
.vrail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(258px,258px);gap:20px;overflow-x:auto;overflow-y:hidden;padding:6px 4px 22px;margin-bottom:26px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.vrail::-webkit-scrollbar{height:9px}
.vrail::-webkit-scrollbar-track{background:rgba(18,54,64,.09);border-radius:99px}
.vrail::-webkit-scrollbar-thumb{background:var(--teal-2);border-radius:99px}
.vcard{margin:0;scroll-snap-align:start;display:flex;flex-direction:column}
.vwrap{position:relative;border:3px solid var(--ink);border-radius:18px;overflow:hidden;background:#0B3D46;aspect-ratio:9/16}
.vcard:nth-child(3n+1) .vwrap{box-shadow:7px 7px 0 var(--apple)}
.vcard:nth-child(3n+2) .vwrap{box-shadow:7px 7px 0 var(--gold)}
.vcard:nth-child(3n+3) .vwrap{box-shadow:7px 7px 0 var(--grape)}
.vwrap video{width:100%;height:100%;object-fit:cover;display:block;background:#0B3D46}
.vplay{position:absolute;inset:0;width:100%;height:100%;border:0;background:linear-gradient(180deg,rgba(11,61,70,.06),rgba(11,61,70,.42));cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}
.vplay:hover{background:linear-gradient(180deg,rgba(11,61,70,.14),rgba(11,61,70,.5))}
.vplay span{width:62px;height:62px;border-radius:50%;background:var(--apple);border:3px solid #fff;box-shadow:0 8px 20px rgba(0,0,0,.32);position:relative;transition:transform .2s}
.vplay:hover span{transform:scale(1.09)}
.vplay span::after{content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #fff}
.vplay[hidden]{display:none}
.vcard figcaption{padding:15px 3px 0}
.vcard figcaption p{font-family:var(--disp);font-size:16.5px;line-height:1.45;margin:0 0 8px}
.vcard cite{font-style:normal;font-size:13.5px;font-weight:700;color:var(--teal-deep)}
.sec-teal .vcard cite{color:var(--gold-2)}
.vnote{font-size:14px;color:var(--ink-soft);margin:0 0 34px}
@media(max-width:640px){
  .vrail{grid-auto-columns:minmax(228px,228px);gap:15px}
  .vplay span{width:54px;height:54px}
  .vcard figcaption p{font-size:15.5px}
}

/* ─────────────────────────────────────────────────────────────────────────
   DIRECTION TWO: the light hero.
   Same collage language, but the first screen sits on their own cream paper
   instead of the deep teal. The photograph stays, ghosted right back so it
   reads as texture behind the type, and everything that was reversed out in
   white comes back to teal ink.
   ───────────────────────────────────────────────────────────────────────── */
.hero{background:var(--paper)}
.hero-bg img{opacity:.34;object-position:50% 40%}
.hero-bg::after{
  background:
    radial-gradient(120% 80% at 78% 30%,rgba(53,188,203,.16),transparent 62%),
    linear-gradient(100deg,rgba(251,245,233,.94) 0%,rgba(251,245,233,.86) 42%,rgba(243,231,210,.72) 100%);
}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--teal);z-index:3}

/* type comes back to ink */
.hero-copy{color:var(--ink)}
.hero-copy .eyebrow{color:#0B6675}
.hero h1{color:var(--ink)}
.hero .cut i:nth-child(6n+5){color:var(--kraft)}
.hero .cut i:nth-child(6n+6){color:var(--teal-deep)}
.hero-copy p{color:var(--ink-soft)}
.hero-meta{border-top:2px dotted rgba(18,54,64,.3)}
.hero-meta div{color:var(--ink)}
.hero-meta b{color:var(--apple)}
.hero-meta span{color:var(--ink-soft)}

/* the glass card becomes cut paper, so it reads on a light ground */
.gq{
  background:var(--white);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  border:2px solid var(--ink);
  box-shadow:12px 12px 0 var(--teal);
}
.gq::before{background:none}
.gq::after{background:none;padding:0}
.gq-brand{background:var(--paper-2);padding:20px 22px 16px;border-bottom:2px dotted rgba(18,54,64,.28)}
.gq-brand img{filter:none}
.gq h3{color:var(--ink)}
.gq-step{color:var(--ink-soft)}
.gq-opt{
  border:1.5px solid rgba(18,54,64,.24);
  background:var(--paper);
  color:var(--ink);
}
.gq-opt:hover{background:var(--paper-2);border-color:var(--ink)}
.gq-field span{color:var(--ink)}
.gq-field input{
  border:1.5px solid rgba(18,54,64,.24);
  background:var(--paper);
  color:var(--ink);
}
.gq-field input::placeholder{color:var(--ink-soft)}
.gq-field input:focus{outline:2px solid var(--teal-deep)}
.gq-note{color:var(--ink-soft)}
.gq-ok p{color:var(--ink-soft)}

/* confetti was tuned for a dark ground */
.conf i{opacity:.5;mix-blend-mode:multiply}

@media(max-width:960px){
  .gq{box-shadow:8px 8px 0 var(--teal)}
}

/* hero headline legibility on the cream ground: gold, leaf and kraft were far under
   the 3:1 large text bar, so each is deepened to the same hue at a readable weight. */
.hero .cut i:nth-child(6n+2){color:#A27822}
.hero .cut i:nth-child(6n+4){color:#5F8C4B}
.hero .cut i:nth-child(6n+5){color:#9A7B56}