/* happyday creative co. — site styles */
@font-face{font-family:'Regina';src:url('../fonts/ReginaBlack-Solid.ttf') format('truetype');font-weight:400;font-display:swap;}
@font-face{font-family:'Outfit';src:url('../fonts/Outfit-VariableFont_wght.ttf') format('truetype-variations');font-weight:100 900;font-display:swap;}
@font-face{font-family:'Outfit';src:url('../fonts/Outfit-Regular.ttf') format('truetype');font-weight:400;font-display:swap;}
@font-face{font-family:'Perandory';src:url('../fonts/Perandory-Regular.ttf') format('truetype');font-weight:400;font-display:swap;}

:root{
  --cream:#FFFDD0; --paper:#FBF6E4; --paper-2:#F4EDD8;
  --navy:#355070; --navy-ink:#2A3F59;
  --plum:#6D597A; --burgundy:#B56576; --coral:#E56B6F; --apricot:#EAAC8B;
  --line:rgba(53,80,112,.22);
  --maxw:1240px; --pad:clamp(20px,4vw,64px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--navy-ink);font-family:'Outfit',system-ui,-apple-system,sans-serif;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.eyebrow{font-family:'Perandory',sans-serif;font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--burgundy);margin:0 0 10px}
.serif{font-family:'Regina',Georgia,serif;font-weight:400;letter-spacing:-.01em}
h1,h2,h3{margin:0;text-wrap:balance}
p{margin:0 0 1em;text-wrap:pretty}
.rule{height:1px;background:var(--line);border:0;margin:0}
a:focus-visible,button:focus-visible{outline:2px solid var(--coral);outline-offset:3px}

/* header */
header{position:sticky;top:0;z-index:50;background:rgba(251,246,228,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:24px;height:74px}
.brand{margin-right:auto;text-decoration:none}
.brand img{width:132px;height:auto}
nav{display:flex;gap:26px;font-size:14px}
nav a{text-decoration:none;padding:6px 0;border-bottom:1px solid transparent}
nav a:hover,nav a:focus-visible{border-bottom-color:var(--coral);outline:none}
nav a[aria-current="page"]{border-bottom-color:var(--navy)}
.btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-size:14px;font-weight:500;padding:12px 20px;border-radius:999px;border:1px solid var(--navy);background:var(--navy);color:var(--cream);transition:background .18s,color .18s,transform .18s}
.btn:hover{background:transparent;color:var(--navy);transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--navy)}
.btn.ghost:hover{background:var(--navy);color:var(--cream)}
.btn.cream{background:var(--cream);color:var(--burgundy);border-color:var(--cream)}
.btn.cream:hover{background:transparent;color:var(--cream)}
.btn.coral{background:var(--coral);border-color:var(--coral)}
.btn.coral:hover{background:transparent;color:var(--coral)}

/* hero */
.hero{position:relative;overflow:hidden;padding:clamp(36px,5vw,72px) 0 clamp(44px,6vw,80px);
  background:
    radial-gradient(120% 95% at 95% -25%, rgba(234,172,139,.6) 0%, rgba(234,172,139,0) 58%),
    radial-gradient(85% 75% at -12% 112%, rgba(109,89,122,.16) 0%, rgba(109,89,122,0) 62%),
    radial-gradient(60% 55% at 55% 130%, rgba(229,107,111,.12) 0%, rgba(229,107,111,0) 70%),
    var(--paper)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(53,80,112,.5) 1px, transparent 1px);
  background-size:24px 24px;opacity:.13;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.9),rgba(0,0,0,0) 72%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.9),rgba(0,0,0,0) 72%)}
.hero > .wrap{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(24px,5vw,60px);align-items:center}
.hero h1{font-size:clamp(34px,4.5vw,64px);line-height:.98;letter-spacing:-.015em;color:var(--navy)}
.hero h1 .alt{color:var(--coral)}
.subline{font-family:'Regina',serif;font-size:clamp(19px,1.7vw,24px);line-height:1.24;color:var(--plum);max-width:30ch;margin:22px 0 0}
.deck{font-size:16.5px;max-width:38ch;margin-top:20px;color:#3d5570}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.serving{margin:34px 0 0;font-family:'Perandory',sans-serif;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(53,80,112,.7);display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.serving span{white-space:nowrap}
.serving .dot{width:5px;height:5px;border-radius:50%;background:var(--coral);flex:none;transform:translateY(-1.5px)} /* nudged up: the caps sit above the box centre, so a geometrically centred dot reads low */
.hero-media{position:relative;margin:0}
.ph-wrap{position:relative}
.hero-media .frame{position:absolute;inset:16px -16px -16px 16px;border:1px solid var(--coral);pointer-events:none}
.hero-media img.ph{width:100%;height:clamp(360px,40vw,560px);object-fit:cover;object-position:52% 58%;filter:saturate(.96)}
.hero-media figcaption{position:relative;margin-top:28px;font-size:12.5px;color:rgba(53,80,112,.72)}
.tagcard{position:absolute;left:-22px;bottom:58px;background:var(--cream);border:1px solid var(--line);padding:15px 17px;box-shadow:6px 6px 0 rgba(53,80,112,.09);max-width:224px;z-index:2}
.tagcard .k{font-family:'Regina',serif;font-size:19px;line-height:1.08;color:var(--navy);display:block;margin-bottom:6px}
.tagcard .v{font-size:12.5px;line-height:1.22;color:#4a6280}

/* offer rows (the menu) */
.menu-band{background:var(--navy);color:var(--cream);padding:clamp(46px,6.5vw,88px) 0}
.menu-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(22px,3.5vw,40px)}
.menu-head .eyebrow{color:var(--apricot)}
.menu-head h2{font-size:clamp(30px,4.2vw,58px);line-height:.96;color:var(--cream)}
.menu-head .side{max-width:36ch;font-size:14.5px;color:rgba(255,253,208,.72)}
.offer{display:grid;grid-template-columns:58px 1fr auto;align-items:baseline;gap:0 18px;padding:24px 4px;text-decoration:none;border-top:1px solid rgba(255,253,208,.18);transition:padding .2s,background .2s}
.offer:last-of-type{border-bottom:1px solid rgba(255,253,208,.18)}
.offer .no{font-family:'Perandory',sans-serif;font-size:12px;letter-spacing:.18em;color:var(--apricot);padding-top:8px}
.offer .name{display:flex;align-items:baseline;min-width:0}
.offer .name h3{font-family:'Regina',serif;font-size:clamp(23px,3vw,38px);line-height:1.04;color:var(--cream);white-space:nowrap}
.offer .leader{flex:1;border-bottom:1px dotted rgba(255,253,208,.4);margin:0 14px .38em}
.offer .price{font-family:'Perandory',sans-serif;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--cream);white-space:nowrap;padding-top:6px}
.offer .price small{display:block;font-size:10.5px;letter-spacing:.14em;color:rgba(255,253,208,.55);margin-top:3px}
.offer .desc{grid-column:2/-1;font-size:14.5px;color:rgba(255,253,208,.7);max-width:64ch;margin-top:8px}
.offer:hover{background:rgba(255,253,208,.05);padding-left:14px}
.offer:hover .price{color:var(--coral)}



.addon{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(18px,3vw,40px);align-items:center;border:1px solid var(--line);background:var(--cream);padding:clamp(20px,3vw,30px);margin-top:clamp(18px,2.5vw,28px)}
.addon h3{margin-bottom:0}
.addon-prices{display:grid;gap:14px}
.addon-prices div{display:flex;align-items:baseline;gap:14px;border-top:1px solid var(--line);padding-top:12px}
.addon-prices .n{font-size:clamp(24px,2.6vw,32px);color:var(--coral);white-space:nowrap}
.addon-prices .l{font-size:13.5px;color:#41597a}
@media (max-width:900px){.addon{grid-template-columns:1fr}}

/* the everything package */
.pkg{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(40px,5.5vw,76px) 0}
.pkg-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,56px);align-items:center}
.pkg h2{font-size:clamp(28px,4.2vw,56px);line-height:.95;color:var(--navy)}
.pkg .lede{max-width:44ch;color:#41597a;margin-top:14px}
.pkg .incl{list-style:none;padding:0;margin:24px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:10px 22px;font-size:14.5px}
.pkg .incl li{padding-left:20px;position:relative;color:#3d5570}
.pkg .incl li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:1px;background:var(--coral)}
.pkg-card{border:1px solid var(--line);background:var(--cream);padding:clamp(22px,3vw,34px);box-shadow:10px 10px 0 rgba(53,80,112,.07)}
.pkg-card .k{font-family:'Perandory',sans-serif;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--burgundy)}
.pkg-card h3{font-family:'Regina',serif;font-size:clamp(24px,2.6vw,32px);color:var(--navy);margin:8px 0 6px;line-height:1.02}
.pkg-card .ammount{font-family:'Regina',serif;font-size:clamp(40px,5vw,58px);color:var(--coral);line-height:.95;margin:6px 0 4px}
.pkg-card .sep{font-size:13px;color:#4a6280;margin:0 0 16px}
.pkg-card .sep s{opacity:.7;text-decoration:line-through;text-decoration-thickness:1px}
.pkg-card ul{list-style:none;padding:0;margin:0 0 20px;font-size:14px;display:grid;gap:7px;color:#41597a}
.pkg-card li{padding-left:16px;position:relative}
.pkg-card li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1px;background:var(--coral)}
.pkg-card .btn{width:100%;justify-content:center}
.pkg-note{font-size:12.5px;color:#4a6280;margin:12px 0 0}
@media (max-width:900px){.pkg-grid{grid-template-columns:1fr}.pkg .incl{grid-template-columns:1fr}}

/* bundle line */
/* the bundle sits inside the navy band, so it needs dark-ground colours, not the light ones */
.bundle{display:block;margin-top:28px;padding-top:24px;border-top:1px solid rgba(255,253,208,.2)}
.bundle p{margin:0;font-size:15px;line-height:1.55;color:rgba(255,253,208,.8);max-width:58ch}
.bundle p strong{display:block;margin-bottom:6px;font-family:'Regina',serif;font-size:clamp(19px,2.4vw,24px);font-weight:400;line-height:1.1;color:var(--cream)}
.bundle .bundle-link{display:inline-block;margin-top:10px;color:var(--apricot);text-decoration:none;border-bottom:1px solid rgba(234,172,139,.55);padding-bottom:1px}
.bundle .amt{display:block;margin-top:16px;font-family:'Regina',serif;font-size:clamp(30px,5vw,40px);color:var(--cream);white-space:nowrap}
.bundle .amt small{display:block;font-family:'Perandory',sans-serif;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,253,208,.55);margin-top:4px}
.menu-band .bundle{border-top-color:rgba(255,253,208,.18)}
.menu-band .bundle p{color:rgba(255,253,208,.72)}
.menu-band .bundle .amt{color:var(--apricot)}
.menu-band .bundle .amt small{color:rgba(255,253,208,.55)}

/* care plan (text us) */
.care{background:var(--paper-2);border-bottom:1px solid var(--line);padding:clamp(46px,6vw,84px) 0}
.care-grid{display:grid;grid-template-columns:1fr .95fr;gap:clamp(28px,5vw,64px);align-items:center}
.care h2{font-size:clamp(30px,4.2vw,56px);line-height:.96;color:var(--navy);margin-bottom:16px}
.care p{max-width:46ch}
.chat{background:var(--cream);border:1px solid var(--line);padding:22px;box-shadow:8px 8px 0 rgba(53,80,112,.07)}
.chat .msg{font-size:14px;line-height:1.45;padding:11px 15px;border-radius:14px;margin-bottom:10px;max-width:88%}
.chat .them{background:var(--navy);color:var(--cream);border-bottom-left-radius:3px}
.chat .us{background:var(--paper-2);border:1px solid var(--line);margin-left:auto;border-bottom-right-radius:3px;color:var(--navy-ink)}
.chat .meta{font-family:'Perandory',sans-serif;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(53,80,112,.55);text-align:center;margin-top:12px}
.care ul{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:10px}
.care li{position:relative;padding-left:26px;font-size:15px}
.care li::before{content:"";position:absolute;left:0;top:.55em;width:11px;height:1px;background:var(--coral)}

/* work */
.work{padding:clamp(48px,6.5vw,92px) 0}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;margin-bottom:30px}
.sec-head h2{font-size:clamp(30px,4.2vw,56px);line-height:.96;color:var(--navy)}
.sec-head .link{font-size:14px;text-decoration:none;border-bottom:1px solid var(--coral);padding-bottom:2px}
.work-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(16px,2.2vw,26px);align-items:start}
.card{position:relative;display:block;text-decoration:none;border:1px solid var(--line);background:var(--cream);overflow:hidden}
.card .thumb{aspect-ratio:4/3;overflow:hidden;background:var(--navy);display:flex;align-items:center;justify-content:center}
.card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card:hover .thumb img{transform:scale(1.03)}
.card.big .thumb{aspect-ratio:16/11;background:#fff}
.card.big .thumb img{object-fit:contain;padding:clamp(10px,2vw,24px)}
.card .cap{display:flex;justify-content:space-between;gap:14px;align-items:baseline;padding:15px 17px}
.card .cap h3{font-family:'Regina',serif;font-size:clamp(19px,1.9vw,25px);color:var(--navy)}
.card .cap .blurb{margin:8px 0 0;font-size:13.5px;line-height:1.5;color:#4a6280;max-width:46ch}
.card .cap{display:block}
.card .cap .tag{display:inline-block;margin-top:6px}
.card .cap .tag{font-family:'Perandory',sans-serif;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--burgundy);white-space:nowrap}
.work-side{display:grid;grid-template-rows:1fr 1fr;gap:clamp(16px,2.2vw,26px);align-content:start}
.work-side .card{display:grid;grid-template-rows:1fr auto}
.work-side .card .thumb{aspect-ratio:auto;height:100%}
.placeholder{display:grid;place-items:center;height:100%;min-height:170px;color:rgba(255,253,208,.5);font-family:'Perandory',sans-serif;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;text-align:center;padding:20px;line-height:1.9}

/* about */
.about{background:var(--paper-2);padding:clamp(48px,6.5vw,90px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.about-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(26px,5vw,68px);align-items:center}
.about h2{font-size:clamp(30px,4.2vw,54px);line-height:.97;color:var(--navy);margin-bottom:16px}
.about p{max-width:52ch}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:18px 28px;margin-top:26px;padding-top:24px;border-top:1px solid var(--line)}
.fact .n{font-family:'Regina',serif;font-size:clamp(24px,2.8vw,36px);line-height:1;color:var(--coral)}
.fact .l{font-size:13px;color:#4a6280;margin-top:6px}
.about-media{position:relative;padding:22px;background:var(--cream);border:1px solid var(--line);margin:0}
.about-media img{width:100%;height:auto;mix-blend-mode:multiply;opacity:.92}
.about-media .pin{position:absolute;display:flex;align-items:center;gap:7px;font-family:'Perandory',sans-serif;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--navy);background:rgba(255,253,208,.92);padding:4px 8px;white-space:nowrap}
.about-media .pin i{width:8px;height:8px;border-radius:50%;background:var(--coral);flex:none}

/* cta + footer */
.cta{background:var(--burgundy);color:var(--cream);padding:clamp(48px,6.5vw,92px) 0}
.cta-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(24px,4vw,56px);align-items:end}
.cta h2{font-family:'Regina',serif;font-size:clamp(32px,5vw,68px);line-height:.92;color:var(--cream);max-width:16ch}
.cta .sub{color:rgba(255,253,208,.8);margin-top:14px;max-width:40ch}
.cta .alt-line{margin:16px 0 0;font-size:13.5px;color:rgba(255,253,208,.78)}
footer{background:var(--navy);color:rgba(255,253,208,.72);padding:42px 0 32px;font-size:13.5px}
.foot-grid{display:block;padding-top:26px}
footer a{text-decoration:none;border-bottom:1px solid rgba(255,253,208,.28);padding-bottom:1px}
footer a:hover{color:var(--cream);border-bottom-color:var(--coral)}
footer img{width:104px}

/* inner pages */
.page-head{padding:clamp(40px,5.5vw,76px) 0 clamp(24px,3vw,40px)}
.page-head h1{font-size:clamp(36px,5.2vw,72px);line-height:.94;color:var(--navy);max-width:18ch}
.page-head .deck{margin-top:20px;font-size:18px;max-width:52ch}
.prose{max-width:62ch}
.prose h2{font-size:clamp(24px,3vw,36px);line-height:1.05;color:var(--navy);margin:38px 0 12px}
.prose h3{font-size:19px;margin:26px 0 8px;color:var(--navy)}
.prose ul{padding-left:20px}
.prose li{margin-bottom:8px}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px);margin:clamp(26px,4vw,44px) 0}
.price-card{border:1px solid var(--line);background:var(--cream);padding:26px 22px;display:flex;flex-direction:column}
.price-card .k{font-family:'Perandory',sans-serif;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--burgundy);margin-bottom:10px}
.price-card h3{font-family:'Regina',serif;font-size:clamp(21px,2.2vw,27px);color:var(--navy);line-height:1.05;margin-bottom:8px}
.price-card .amt{font-family:'Regina',serif;font-size:30px;color:var(--coral);line-height:1;margin-bottom:12px}
.price-card ul{list-style:none;padding:0;margin:0 0 20px;font-size:14px;display:grid;gap:8px;color:#41597a}
.price-card li{padding-left:18px;position:relative}
.price-card li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:1px;background:var(--coral)}
.price-card .btn{margin-top:auto;align-self:flex-start}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:start;margin:clamp(26px,4vw,44px) 0}
.field{display:grid;gap:6px;margin-bottom:16px}
.field label{font-family:'Perandory',sans-serif;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--burgundy)}
.field input,.field textarea,.field select{font:inherit;font-size:15px;padding:12px 14px;border:1px solid var(--line);background:var(--cream);color:var(--navy-ink);border-radius:2px}
.field textarea{min-height:130px;resize:vertical}
.note{font-size:13px;color:#4a6280}
.two-col{columns:2;column-gap:40px}
@media (max-width:980px){.price-grid{grid-template-columns:1fr}}

/* responsive */
@media (max-width:900px){
  .hero-grid,.about-grid,.work-grid,.cta-grid,.care-grid,.split{grid-template-columns:1fr}
  .work-side{grid-template-rows:auto;grid-template-columns:1fr 1fr}
  .hero-media{order:-1}
  .hero-media .frame{inset:12px -12px -12px 12px}
  .tagcard{left:12px;bottom:12px;max-width:232px;padding:11px 13px}
  .about-media .pin{font-size:10px;letter-spacing:.16em}
}

/* mobile header: one icon button, and a full-width panel under a sticky bar */
.mnav{display:none}
@media (max-width:900px){
  header{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:1px solid var(--line)}
  .bar{flex-wrap:nowrap;gap:10px;padding-top:9px;padding-bottom:9px}
  .bar nav{display:none}
  .bar .btn{display:none}
  .mnav{display:block;margin-left:auto}
  .mnav>summary{position:relative;list-style:none;cursor:pointer;display:grid;place-items:center;place-content:center;gap:4px;width:44px;height:44px;border:0;border-radius:99px;background:var(--navy)}
  .mnav>summary::-webkit-details-marker{display:none}
  .mnav>summary span{display:block;width:18px;height:2px;background:var(--cream);border-radius:1px;
    transition:transform .3s cubic-bezier(.2,.7,.3,1),opacity .18s ease}
  .mnav[open]>summary span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .mnav[open]>summary span:nth-child(2){opacity:0;transform:scaleX(.3)}
  .mnav[open]>summary span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  /* panel slides in under the bar */
  .mnav[open] .panel{animation:panelIn .24s cubic-bezier(.2,.7,.3,1) both}
  @keyframes panelIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
  /* the panel has to end somewhere: warmer ground than the page, a hard navy edge, and a deep shadow */
  .mnav .panel{position:absolute;left:0;right:0;top:100%;min-width:0;background:var(--paper);border-top:0;border-bottom:3px solid var(--navy);box-shadow:0 20px 40px rgba(42,63,89,.28);padding:6px 0 16px;display:grid}
  .mnav .panel a{padding:15px 20px;font-size:17px;text-decoration:none;color:var(--navy-ink);border:0}
  .mnav .panel a+a{border-top:1px solid rgba(53,80,112,.12)}
  .mnav .panel a[aria-current="page"]{color:var(--burgundy)}
  .mnav .panel .panel-cta{margin:10px 20px 0;padding:13px 20px;background:var(--navy);color:var(--cream);border-radius:99px;text-align:center;font-size:15px;border:0}
  /* dim the page under an open menu so the panel reads as a layer, not more content */
  .mnav[open] .panel::after{content:"";position:absolute;left:0;right:0;top:100%;height:100vh;background:rgba(53,80,112,.42);pointer-events:none}
}

/* booking block on /contact */
.book{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(20px,3.4vw,44px);align-items:center;border:1px solid var(--line);background:var(--cream);padding:clamp(22px,3vw,38px)}
.book-slot{min-height:200px;display:grid;place-items:center;border:1px dashed rgba(53,80,112,.35);background:var(--paper);padding:22px;text-align:center}
.book-placeholder .tag{font-family:'Perandory',sans-serif;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--burgundy)}
.book-placeholder p{margin:8px 0 14px;font-size:13.5px;color:#4a6280;max-width:30ch}
@media (max-width:860px){.book{grid-template-columns:1fr}}

/* mobile: the offer rows kept their desktop 3-column grid, so titles with nowrap ran
   underneath the price. Stack them. */
@media (max-width:700px){
  .offer{grid-template-columns:1fr auto;grid-template-areas:"name price" "desc desc";gap:8px 14px;padding:22px 2px}
  .offer .no{display:none}
  .offer .name{grid-area:name;display:block}
  .offer .name h3{white-space:normal;font-size:clamp(24px,7vw,30px);line-height:1.06}
  .offer .leader{display:none}
  .offer .price{grid-area:price;text-align:right;padding-top:4px;font-size:11.5px}
  .offer .price small{font-size:10px}
  .offer .desc{grid-area:desc;margin-top:4px;max-width:none}
  section[id]{scroll-margin-top:80px}
}

/* ---------- elements borrowed from the model rounds ---------- */

/* 1. package card: hard offset shadow, navy outline, dotted rules, asterisk bullets, save badge */
.pkg-card{position:relative;border:2px solid var(--navy);background:var(--cream);box-shadow:14px 14px 0 var(--apricot);padding:clamp(24px,3.4vw,40px)}
.pkg-card .badge{position:absolute;top:-30px;left:-26px;width:96px;height:96px;background:var(--coral);color:var(--navy);display:grid;place-content:center;text-align:center;transform:rotate(-9deg);font-family:'Regina',serif;font-size:15px;line-height:1.05;clip-path:polygon(50.0% 0.0%, 57.0% 5.6%, 65.5% 2.4%, 70.4% 9.9%, 79.4% 9.5%, 81.8% 18.2%, 90.5% 20.6%, 90.1% 29.6%, 97.6% 34.5%, 94.4% 43.0%, 100.0% 50.0%, 94.4% 57.0%, 97.6% 65.5%, 90.1% 70.4%, 90.5% 79.4%, 81.8% 81.8%, 79.4% 90.5%, 70.4% 90.1%, 65.5% 97.6%, 57.0% 94.4%, 50.0% 100.0%, 43.0% 94.4%, 34.5% 97.6%, 29.6% 90.1%, 20.6% 90.5%, 18.2% 81.8%, 9.5% 79.4%, 9.9% 70.4%, 2.4% 65.5%, 5.6% 57.0%, 0.0% 50.0%, 5.6% 43.0%, 2.4% 34.5%, 9.9% 29.6%, 9.5% 20.6%, 18.2% 18.2%, 20.6% 9.5%, 29.6% 9.9%, 34.5% 2.4%, 43.0% 5.6%);filter:drop-shadow(5px 5px 0 rgba(53,80,112,.16))}
.pkg-card .pkg-head{display:flex;align-items:baseline;gap:10px;margin-bottom:6px;padding-right:56px}
.pkg-card .pkg-head h3{font-size:clamp(20px,2vw,26px);line-height:1.02}
.pkg-card .pkg-head h3{white-space:nowrap}
.pkg-card .pkg-head .leader{flex:1;border-bottom:2px dotted rgba(53,80,112,.5);margin-bottom:.34em}
.pkg-card .pkg-head .ammount{font-family:'Regina',serif;font-size:clamp(30px,3.6vw,42px);color:var(--burgundy);white-space:nowrap}
.pkg-card .pkg-sub{margin:0 0 16px;font-size:15px;color:#41597a;max-width:52ch}
.pkg-card ul.pkg-list{list-style:none;padding:0;margin:0 0 6px;columns:2;column-gap:30px;font-size:14.5px;color:#41597a}
.pkg-card ul.pkg-list li{break-inside:avoid;padding-left:19px;position:relative;margin-bottom:9px;line-height:1.45;list-style:none}
.pkg-card ul.pkg-list li::marker{content:"";font-size:0}
.pkg-card ul.pkg-list li::before{content:"";position:absolute;left:0;top:.34em;width:11px;height:11px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cg stroke='%23E56B6F' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M6 1.2v9.6M1.9 3.6l8.2 4.8M10.1 3.6L1.9 8.4'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain}
.pkg-card hr.dots{border:0;border-top:2px dotted rgba(53,80,112,.45);margin:20px 0 16px}
.pkg-card .sep{font-size:14.5px;color:#41597a;margin:0 0 16px}

/* 2. footer: cream wordmark with a coral full stop, apricot links, fine print */
footer{background:var(--navy);color:rgba(255,253,208,.7);padding:0 0 30px;font-size:13.5px}
.foot-mark{display:inline-block;font-family:'Regina',serif;font-size:clamp(26px,3vw,34px);line-height:1;color:var(--cream);text-decoration:none;margin-bottom:16px}
.foot-mark span{color:var(--coral)}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 24px;margin-bottom:14px}
.foot-links a{color:var(--apricot);text-decoration:none;font-size:14.5px}
.foot-links a:hover{color:var(--cream)}
.foot-fine{color:rgba(255,253,208,.5);font-size:12.5px}

/* 3. palette divider strip */
.palette-rule{display:flex;height:13px}
.palette-rule i{display:block;height:100%}
@media (max-width:700px){
  .pkg-card{box-shadow:8px 8px 0 var(--apricot)}
  .pkg-card ul.pkg-list{columns:1}
  .pkg-card .badge{position:static;width:76px;height:76px;font-size:12px;margin:0 0 12px;transform:rotate(-6deg)}
  .pkg-card .pkg-head h3{white-space:normal}
}

@media (prefers-reduced-motion:reduce){
  .mnav>summary span,.mnav[open] .panel{transition:none!important;animation:none!important}*{transition:none!important;animation:none!important}}

/* hero receipt card (branch: launch price) */
.tagcard.receipt{padding:14px 15px;max-width:240px}
.tagcard .row{display:flex;align-items:baseline;gap:7px;font-size:11.5px;color:#41597a;line-height:1.55}
.tagcard .row span{white-space:nowrap}
.tagcard .row i{flex:1;border-bottom:1px dotted rgba(53,80,112,.5);transform:translateY(-3px)}
.tagcard .row b{font-family:'Regina',serif;font-size:13.5px;color:var(--navy);font-weight:400}
.tagcard .foot{display:block;margin-top:9px;padding-top:8px;border-top:1px dotted rgba(53,80,112,.4);font-family:'Perandory',sans-serif;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--burgundy)}

/* hero checklist card (branch) */
.tagcard.checks{padding:14px 15px;max-width:246px}
.tagcard.checks .row{display:flex;gap:7px;align-items:flex-start;font-size:11.5px;line-height:1.45;color:#41597a}
.tagcard.checks .row em{font-style:normal;color:var(--coral);font-size:10.5px;line-height:1.5;flex:none}
.tagcard.checks .foot{display:block;margin-top:9px;padding-top:8px;border-top:1px dotted rgba(53,80,112,.4);font-family:'Perandory',sans-serif;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--burgundy)}

/* launch-price tag on the package card (branch) */
.pkg-card .launch-tag{display:block;background:var(--coral);color:#FFFDD0;font-family:'Perandory',sans-serif;font-size:10px;letter-spacing:.22em;text-transform:uppercase;padding:7px 12px;margin:-26px -26px 18px;text-align:center}

/* contact form: hidden honeypot + status line */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{margin:0 0 14px;font-size:14.5px;line-height:1.4;max-width:44ch}
.form-status.ok{color:#2f6b46}
.form-status.err{color:#a33b2b}
button[type="submit"][disabled]{opacity:.6;cursor:default}

/* legal pages */
.prose.legal h2{font-family:'Regina',serif;font-size:clamp(20px,2.2vw,27px);color:var(--navy);margin:34px 0 10px;line-height:1.1}
.prose.legal h2:first-child{margin-top:0}
.prose.legal p,.prose.legal li{font-size:15.5px;line-height:1.62;color:#3d5570}
.prose.legal ul{margin:10px 0 16px;padding-left:20px;display:grid;gap:8px}
.prose.legal li::marker{color:var(--coral)}
.prose.legal strong{color:var(--navy)}
.legal-updated{margin-top:34px;padding-top:16px;border-top:1px dotted rgba(53,80,112,.35);font-size:13.5px;color:#4a6280}

/* legal links sit on the last line of the footer */
.foot-fine a{color:var(--apricot);text-decoration:none}
.foot-fine a:hover{text-decoration:underline}
.foot-fine .dotsep{opacity:.45;padding:0 6px}

/* ---------- intro: the mark, once per visit ---------- */
.intro{position:fixed;inset:0;z-index:9999;background:var(--navy);display:none;place-items:center}
html.hd-intro .intro{display:grid}
html.hd-intro body{overflow:hidden}
.intro-mark{display:grid;justify-items:center;gap:20px}
.intro-mark img{width:min(46vw,320px);height:auto;opacity:0;transform:translateY(12px) scale(.965);filter:blur(7px)}
.intro-mark .intro-rule{width:0;height:2px;background:var(--coral);display:block}
.intro.go .intro-mark img{animation:introMark 620ms cubic-bezier(.22,1,.36,1) forwards}
.intro.go .intro-mark .intro-rule{animation:introRule 460ms 400ms cubic-bezier(.22,1,.36,1) forwards}
.intro.done{transform:translateY(-100%);transition:transform 620ms cubic-bezier(.76,0,.24,1)}
@keyframes introMark{to{opacity:1;transform:none;filter:blur(0)}}
@keyframes introRule{to{width:min(46vw,320px)}}
@media (prefers-reduced-motion:reduce){
  html.hd-intro .intro{display:none}
  html.hd-intro body{overflow:auto}
}

/* the one menu link that asks a question */
.mnav .panel a.panel-hi{color:var(--burgundy);font-weight:700}

/* the launch-price seal: scalloped sticker, sits in the card's flow so it never covers the title */
.launch-seal{position:absolute;top:-34px;right:-30px;z-index:4;display:grid;place-content:center;justify-items:center;
  width:106px;height:106px;background:var(--coral);color:#FFFDD0;text-align:center;
  clip-path:polygon(50.0% 0.0%, 57.0% 5.6%, 65.5% 2.4%, 70.4% 9.9%, 79.4% 9.5%, 81.8% 18.2%, 90.5% 20.6%, 90.1% 29.6%, 97.6% 34.5%, 94.4% 43.0%, 100.0% 50.0%, 94.4% 57.0%, 97.6% 65.5%, 90.1% 70.4%, 90.5% 79.4%, 81.8% 81.8%, 79.4% 90.5%, 70.4% 90.1%, 65.5% 97.6%, 57.0% 94.4%, 50.0% 100.0%, 43.0% 94.4%, 34.5% 97.6%, 29.6% 90.1%, 20.6% 90.5%, 18.2% 81.8%, 9.5% 79.4%, 9.9% 70.4%, 2.4% 65.5%, 5.6% 57.0%, 0.0% 50.0%, 5.6% 43.0%, 2.4% 34.5%, 9.9% 29.6%, 9.5% 20.6%, 18.2% 18.2%, 20.6% 9.5%, 29.6% 9.9%, 34.5% 2.4%, 43.0% 5.6%);filter:drop-shadow(3px 5px 0 rgba(53,80,112,.22));transform:rotate(-8deg)}
.launch-seal b{display:block;font-family:'Regina',serif;font-weight:400;font-size:15px;line-height:.92;letter-spacing:0}
.launch-seal i{display:block;font-style:normal;font-family:'Outfit',sans-serif;font-size:7.5px;line-height:1.2;margin-top:5px;letter-spacing:.14em;text-transform:uppercase;opacity:.95}

@media (max-width:640px){
  .launch-seal{top:-26px;right:-10px;width:88px;height:88px}
  .launch-seal b{font-size:13px}
  .launch-seal i{font-size:6.5px}
  .pkg-card .pkg-head{padding-right:44px}
}