/* Coastwell - colours and fonts from brand guide v7 */
:root{
  --chalk:#F4F3EF; --white:#FFFFFF; --deep:#2F506A; --ink:#1F3444; --dusty:#92B0C2;
  --green:#4F624A; --muted:#55616B; --line:#DDDCD6;
  --head:"Montserrat", system-ui, sans-serif; --body:"Lato", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r:18px;
}
*{box-sizing:border-box;margin:0}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{background:var(--chalk);color:var(--ink);font:400 17px/1.65 var(--body);overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
.wrap{max-width:1200px;margin:0 auto;padding-inline:max(20px,4vw)}
.narrow{max-width:760px}
h1,h2,h3{font-family:var(--head);font-weight:700;line-height:1.08;letter-spacing:-.015em;color:var(--deep);text-wrap:balance}
h1{font-size:clamp(40px,6.4vw,84px)}
h2{font-size:clamp(30px,3.8vw,50px)}
h3{font-size:24px}
.eyebrow{font:700 12px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--green);margin-bottom:18px}
.lead{font-size:clamp(18px,1.6vw,21px);color:var(--muted);max-width:46ch;margin-top:22px}
.placeholder{color:#5F666E;font-style:italic}
.skip{position:absolute;left:-999px;top:8px;background:var(--deep);color:#fff;padding:8px 14px;border-radius:8px;z-index:99}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--dusty);outline-offset:3px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:12px;background:var(--deep);color:#fff;padding:15px 26px;border-radius:999px;font:700 15px/1 var(--body);text-decoration:none;border:2px solid var(--deep);cursor:pointer;transition:transform .3s,background .3s,color .3s}
.btn:hover{transform:translateY(-2px);background:var(--ink);border-color:var(--ink)}
.btn span{transition:transform .3s}.btn:hover span{transform:translateX(4px)}
.btn.ghost{background:transparent;color:var(--deep)}
.btn.ghost:hover{background:var(--deep);color:#fff}
.btn.light{background:var(--chalk);color:var(--deep);border-color:var(--chalk)}
.btn.light:hover{background:#fff;border-color:#fff}
.btn.disabled{background:transparent;color:var(--muted);border-color:var(--line);cursor:default;transform:none}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.link-btn{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-align:left}

/* nav */
nav{position:fixed;inset:0 0 auto;z-index:30;padding-block:22px;transition:background .4s,padding .4s,box-shadow .4s}
nav.scrolled{background:rgba(244,243,239,.92);backdrop-filter:blur(10px);padding-block:12px;box-shadow:0 1px 0 var(--line)}
nav .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px}
.brand img{height:30px;width:auto}
.links{display:flex;gap:28px;align-items:center}
.links a{text-decoration:none;font-weight:700;font-size:15px;color:var(--ink)}
.links a[aria-current]{color:var(--deep);box-shadow:inset 0 -2px 0 var(--dusty)}
.links a:hover{color:var(--deep)}
.links .pill{border:2px solid var(--deep);color:var(--deep);padding:9px 18px;border-radius:999px}
.links .lang{font-weight:400;color:var(--muted);border-left:1px solid var(--line);padding-left:20px}
.menu-btn{display:none;background:none;border:0;width:44px;height:44px;cursor:pointer;position:relative}
.menu-btn span{position:absolute;left:10px;right:10px;height:2px;background:var(--deep);transition:transform .3s}
.menu-btn span:first-child{top:17px}.menu-btn span:last-child{top:25px}
.menu-btn[aria-expanded=true] span:first-child{transform:translateY(4px) rotate(45deg)}
.menu-btn[aria-expanded=true] span:last-child{transform:translateY(-4px) rotate(-45deg)}
@media (max-width:860px){
  .menu-btn{display:block}
  .links{position:fixed;inset:64px 0 auto;flex-direction:column;align-items:flex-start;gap:4px;background:var(--chalk);padding:16px max(20px,4vw) 28px;box-shadow:0 12px 24px rgba(31,52,68,.08);transform:translateY(-8px);opacity:0;pointer-events:none;transition:.3s}
  .links.open{transform:none;opacity:1;pointer-events:auto}
  .links a{padding:10px 0;font-size:18px}
  .links .lang{border:0;padding-left:0}
}

/* wave band from the approved pattern tile */
.hero-band,.band{background:url(/assets/pattern.svg) repeat-x 0 0/360px 79px;height:79px}
.band{height:60px;background-size:274px 60px;opacity:.9}

/* photo placeholders */
.ph{position:relative;background:linear-gradient(150deg,#E8EFF3,#D7E2EA);border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;display:flex;align-items:flex-end;padding:18px}
.ph::before{content:"";position:absolute;inset:auto 0 0;height:60px;background:url(/assets/pattern.svg) repeat-x 0 0/274px 60px;opacity:.55}
.ph span{position:relative;font:700 11px/1.3 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--deep);background:rgba(255,255,255,.75);padding:7px 10px;border-radius:999px}
.ph.tall{aspect-ratio:4/5}
.ph.pattern-only{background:var(--white)}
.ph.pattern-only::before{inset:0;height:auto;background-size:240px 53px;background-repeat:repeat;opacity:.5}

/* home hero */
.hero{position:relative;padding-top:140px;min-height:min(100vh,900px);display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.hero .hero-band{position:absolute;left:0;right:0;bottom:0}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:6vw;align-items:center;padding-bottom:130px}
.hero h1{font-size:clamp(46px,7vw,96px)}
.split .w{display:inline-block;overflow:hidden;vertical-align:top}
.split .w>span{display:inline-block}
.hero-media{max-width:460px;justify-self:end;width:100%}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr}.hero-media{justify-self:start;max-width:none}.hero-media .ph{aspect-ratio:4/3}}

/* story */
.story{padding-block:130px}
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:6vw;align-items:center}
.story h2{margin-bottom:24px}
.story p+p{margin-top:16px}
.story p+h2{margin-top:44px}
.story p+.btn-row{margin-top:28px}
.stack{position:relative;height:600px}
.stack .a{position:absolute;inset:0 18% 12% 0}
.stack .a .ph,.stack .b .ph{height:100%;aspect-ratio:auto}
.stack .b{position:absolute;width:48%;height:50%;right:0;bottom:0;border:10px solid var(--chalk);border-radius:calc(var(--r) + 10px)}
.lead-p{font-size:21px}
@media (max-width:860px){.story-grid{grid-template-columns:1fr}.stack{height:440px}}

/* product cards */
.products{padding-bottom:130px}
.sec-head{margin-bottom:44px}
.cards{display:grid;grid-template-columns:1.4fr 1fr;gap:28px;align-items:start}
.card a{text-decoration:none}
.card .ph{aspect-ratio:5/4;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.card a:hover .ph{transform:scale(1.02)}
.card .num{display:block;margin-top:20px;font:700 12px/1 var(--body);letter-spacing:.16em;color:var(--green);text-transform:uppercase}
.card h3{margin-top:10px}.card h3 a{text-decoration:none}
.card p{color:var(--muted);margin-top:8px;max-width:48ch}
.card-links{display:flex;gap:22px;font-weight:700}
.card-links a{color:var(--deep);text-decoration:none}
.card.soon .ph{aspect-ratio:5/4}
@media (max-width:860px){.cards{grid-template-columns:1fr}}

/* call to action band */
.cta{background:var(--deep);color:var(--chalk);padding-block:90px}
.cta h2{color:var(--chalk);max-width:22ch}
.cta p{color:rgba(244,243,239,.75);margin-top:12px}
.cta .eyebrow{color:#C9D8E1}
.cta-grid{display:flex;justify-content:space-between;align-items:end;gap:32px;flex-wrap:wrap}
.cta .btn-row{margin-top:0}

/* inner page header */
.page-head{position:relative;padding:170px 0 120px}
.page-head .hero-band{position:absolute;left:0;right:0;bottom:0;height:60px;background-size:274px 60px}

/* product page */
.prod-hero{padding:150px 0 110px}
.prod-grid{display:grid;grid-template-columns:1fr 1fr;gap:6vw;align-items:start}
.gallery{position:sticky;top:100px}
.small-h{font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:var(--green);margin:34px 0 14px}
.ticks{list-style:none;padding:0;display:grid;gap:12px}
.ticks li{padding-left:30px;position:relative}
.ticks li::before{content:"";position:absolute;left:0;top:.55em;width:14px;height:8px;border-left:2px solid var(--deep);border-bottom:2px solid var(--deep);transform:rotate(-45deg)}
.uses{padding-bottom:120px}
.use-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.use .ph{aspect-ratio:1}
.use figcaption{margin-top:12px;font:700 16px/1.3 var(--head);color:var(--deep)}
@media (max-width:860px){.prod-grid{grid-template-columns:1fr}.gallery{position:static}.use-grid{grid-template-columns:1fr 1fr}}

/* care page */
.care{padding:90px 0 120px}
.care-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.care-card{background:var(--white);border-radius:var(--r);padding:38px;position:relative}
.care-card.wide{grid-column:1/-1}
.care-card h2{font-size:26px;margin-bottom:18px}
.care-card ol,.care-card ul{padding-left:1.2em;display:grid;gap:10px}
.care-card ul.dots{list-style:none;padding:0}
.care-card ul.dots li{padding-left:22px;position:relative}
.care-card ul.dots li::before{content:"";position:absolute;left:0;top:.6em;width:9px;height:9px;border-radius:50%;background:var(--dusty)}
.step-n{position:absolute;top:30px;right:34px;font:700 44px/1 var(--head);color:var(--dusty);opacity:.6}
.strip{list-style:none;padding:0 !important;display:grid !important;grid-template-columns:repeat(4,1fr);gap:16px !important;margin-top:22px;counter-reset:s}
.strip li{counter-increment:s}
.strip .ph{aspect-ratio:1}
.strip li>span{display:block;margin-top:10px;font-weight:700}
.strip li>span::before{content:counter(s) ". ";color:var(--green)}
.care-card.normal{grid-column:1/-1;background:#E7ECE6}
.care-card.normal h2{color:var(--green)}
.care-contact{margin-top:40px;color:var(--muted)}
.care-contact a{color:var(--deep);font-weight:700}
@media (max-width:860px){.care-grid{grid-template-columns:minmax(0,1fr)}.care-card,.strip li{min-width:0}.strip{grid-template-columns:1fr 1fr}.care-card{padding:28px}}

/* contact */
.contact{padding:170px 0 120px}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:6vw;align-items:start}
.or-email{margin-top:30px;color:var(--muted)}
.or-email a{color:var(--deep);font-weight:700}
form{display:grid;gap:26px;background:var(--deep);padding:44px;border-radius:var(--r)}
.f{position:relative}
.f input,.f textarea{width:100%;background:transparent;border:0;border-bottom:1px solid rgba(244,243,239,.35);color:var(--chalk);font:inherit;padding:14px 0;outline:none;transition:border-color .3s}
.f textarea{min-height:120px;resize:vertical}
.f label{position:absolute;left:0;top:14px;color:rgba(244,243,239,.85);pointer-events:none;transition:.25s}
.f input:focus,.f textarea:focus{border-color:var(--dusty)}
.f input:focus+label,.f input:not(:placeholder-shown)+label,.f textarea:focus+label,.f textarea:not(:placeholder-shown)+label{top:-10px;font-size:12px;letter-spacing:.1em;color:#C9D8E1}
form .btn{justify-self:start}
.f input:focus-visible,.f textarea:focus-visible{outline:3px solid #C9D8E1;outline-offset:4px;border-radius:2px}
form .btn:focus-visible{outline-color:#C9D8E1}
#sent{color:var(--chalk);min-height:1.5em}
.hp{display:none}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}form{padding:30px}}

/* privacy */
.prose{padding:70px 0 120px}
.prose h2{font-size:26px;margin:36px 0 12px}
.prose p,.prose ul{margin-bottom:14px}
.prose ul{padding-left:1.2em}
.prose a{color:var(--deep)}
.note{background:var(--white);border-left:4px solid var(--dusty);padding:18px 22px;border-radius:8px}

/* footer */
footer{background:var(--white);margin-top:0}
.foot{display:grid;grid-template-columns:1.2fr 1fr 1.2fr;gap:40px;padding-block:56px 48px;font-size:15px}
.foot-logo{height:26px;width:auto}
.foot-tag{margin-top:14px;color:var(--muted)}
.foot-links{display:grid;gap:8px}
.foot-links a,.foot-links .link-btn{text-decoration:none;color:var(--ink)}
.foot-links a:hover,.foot-links .link-btn:hover{color:var(--deep);text-decoration:underline}
.foot-meta{color:var(--muted);display:grid;gap:8px;align-content:start}
.foot-meta a{color:var(--deep);font-weight:700;text-decoration:none}
@media (max-width:860px){.foot{grid-template-columns:1fr}}

/* cookie banner */
.consent{max-height:calc(100vh - 32px);overflow-y:auto;overflow-x:hidden;position:fixed;left:16px;right:16px;bottom:16px;max-width:560px;z-index:50;background:var(--white);border-radius:var(--r);padding:26px;box-shadow:0 18px 50px rgba(31,52,68,.22)}
.consent .ck-title{font:700 20px/1.2 var(--head);color:var(--deep);margin-bottom:8px}
.consent p{font-size:15px;color:var(--muted)}
.consent p a{color:var(--deep)}
.ck-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.ck-btns .btn{padding:12px 18px;font-size:14px}
.ck-btns{align-items:center}
.consent .ck-manage{font-size:14px;color:var(--deep);text-decoration:underline;padding:8px 4px}
.ck-panel{margin-top:16px;display:grid;gap:12px}
.ck-panel[hidden]{display:none}
.ck-row{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--muted);cursor:pointer}
.ck-row input{width:20px;height:20px;margin-top:2px;flex:none;accent-color:var(--deep)}
.ck-panel .btn{justify-self:start;padding:12px 18px;font-size:14px}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none !important}}