@import url("https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..900&display=swap");
:root{--teal:#00a6a6;--teal2:#2ec4b6;--coral:#ff6b5b;--sun:#ffc93c;--palm:#1f8a4c;--ink:#0f2530;--sand:#fbf3e4;--x:"Archivo",system-ui,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:var(--x);color:var(--ink);background:var(--sand);line-height:1.55}
a{color:inherit}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--coral);outline-offset:3px}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:99}
.wide{font-stretch:125%;text-transform:uppercase;font-weight:900;letter-spacing:.01em;line-height:.95}
header{position:sticky;top:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:18px 5%;background:rgba(251,243,228,.92);backdrop-filter:blur(8px)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-stretch:125%;font-weight:900;font-size:1.25rem;letter-spacing:.04em}.brand img{width:36px}.brand .t{color:var(--teal)}
nav ul{list-style:none;display:flex;gap:28px;margin:0;padding:0}nav a{text-decoration:none;font-stretch:115%;font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;padding:4px 0;border-bottom:2px solid transparent}nav a:hover,nav a[aria-current]{border-color:var(--coral)}
.menu{display:none;background:none;border:2px solid var(--ink);font:700 .75rem var(--x);letter-spacing:.1em;padding:8px 12px;text-transform:uppercase}
@media(max-width:760px){.menu{display:block}nav ul{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;background:var(--sand);padding:20px 5%;gap:18px}nav.open ul{display:flex}}
.link{display:inline-flex;gap:8px;align-items:center;font-stretch:115%;font-weight:800;font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;text-decoration:none}.link:after{content:"↗";color:var(--coral);transition:transform .3s}.link:hover:after{transform:translate(3px,-3px)}
.btn{display:inline-block;background:var(--ink);color:#fff;padding:16px 26px;font:800 .8rem var(--x);font-stretch:115%;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;border:0;cursor:pointer;transition:background .3s}.btn:hover{background:var(--coral)}.btn.light{background:#fff;color:var(--ink)}.btn.light:hover{background:var(--sun)}
/* hero */
.hero{display:grid;grid-template-columns:1.15fr 1fr;min-height:82vh;position:relative}
.hero .copy{padding:9vh 5% 8vh;align-self:center;z-index:2}
.hero h1{font-size:clamp(2.6rem,7.2vw,6.4rem);margin:0 0 36px;margin-right:-30%}.hero h1 .w{color:var(--teal);-webkit-text-stroke:0}
.hero .art{position:relative;background:linear-gradient(160deg,var(--teal),var(--teal2) 55%,var(--sun));overflow:hidden}
.hero .art:before{content:"";position:absolute;inset:0;background:repeating-radial-gradient(circle at 120% 110%,transparent 0 26px,rgba(255,255,255,.18) 27px 30px)}
.hero .art img{position:absolute;width:46%;left:27%;top:24%;filter:drop-shadow(0 20px 30px #0003)}
.hero .chip{position:absolute;width:120px;height:120px;background:var(--coral);left:calc(53.5% - 60px);bottom:-40px;z-index:3}
.hero p.lead{max-width:440px;font-size:1.05rem;margin:0 0 28px}
@media(max-width:760px){.hero{grid-template-columns:1fr}.hero h1{margin-right:0}.hero .art{min-height:340px}.hero .chip{width:70px;height:70px;left:auto;right:8%;bottom:-24px}}
/* category panels */
.panels{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;padding:110px 2% 40px}
.panel{position:relative;height:520px;overflow:hidden;text-decoration:none;color:#fff;transition:transform .5s cubic-bezier(.2,.7,.2,1)}.panel:nth-child(even){margin-top:40px}.panel:hover{transform:translateY(-12px)}
.panel span{position:absolute;bottom:22px;left:50%;transform:translateX(-50%) rotate(-90deg);transform-origin:center;white-space:nowrap;font-stretch:110%;font-size:2.3rem;font-weight:400;translate:0 -110px}
@media(max-width:760px){.panels{grid-template-columns:repeat(2,1fr);padding-top:70px}.panel{height:260px}.panel span{font-size:1.4rem;translate:0 -60px}}
.p1{background:repeating-linear-gradient(45deg,var(--coral) 0 22px,#ff8a7d 22px 44px)}
.p2{background:radial-gradient(circle at 30% 30%,var(--sun) 0 18%,transparent 19%),radial-gradient(circle at 70% 75%,var(--sun) 0 14%,transparent 15%),var(--teal)}
.p3{background:repeating-linear-gradient(-30deg,var(--palm) 0 30px,#2fa864 30px 34px)}
.p4{background:linear-gradient(180deg,var(--sun),var(--coral))}
.p5{background:repeating-radial-gradient(circle at 50% 120%,var(--ink) 0 20px,#1b4656 20px 40px)}
/* sections */
section{padding:90px 5%;max-width:1240px;margin:auto}
.stack{font-size:clamp(2.4rem,7vw,5.8rem);margin:0 0 30px}.stack .a{display:block;padding-left:8%}.stack .b{display:block;padding-left:22%;color:var(--teal)}
.intro{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;margin-bottom:50px;flex-wrap:wrap}.intro p{max-width:460px;margin:0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:22px}
.card{background:#fff;transition:transform .4s,box-shadow .4s}.card:hover{transform:translateY(-6px);box-shadow:0 18px 40px #0f253014}
.swatch{aspect-ratio:4/5}.card .body{padding:18px;display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.card h3{font-size:.9rem;font-stretch:112%;margin:0 0 4px}.price{color:#5b6b72;font-size:.9rem}
.badge{font-size:.65rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;background:var(--sun);padding:5px 8px;white-space:nowrap}
.card .btn{width:100%;opacity:.55;cursor:not-allowed}
.note{border:1.5px dashed var(--coral);padding:12px 16px;font-size:.9rem;margin-bottom:30px;background:#fff}
/* dark promo band */
.band{background:var(--ink);color:#fff;display:grid;grid-template-columns:auto 1fr;gap:70px;align-items:center;padding:110px 10%}
.band h2{font-size:clamp(1.8rem,4vw,3.4rem);font-weight:500;font-stretch:110%;line-height:1.1;margin:0 0 30px}
.seal{width:190px;height:190px;position:relative}.seal svg{width:100%;animation:spin 18s linear infinite}.seal .mid{position:absolute;inset:0;display:grid;place-items:center}.seal .mid img{width:70px;filter:invert(1)}
.seal .dot{position:absolute;right:-6px;top:44%;width:74px;height:74px;border-radius:50%;background:var(--coral);display:grid;place-items:center;font:900 .7rem var(--x);text-align:center;line-height:1.1;text-transform:uppercase}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:760px){.band{grid-template-columns:1fr;gap:40px;padding:80px 7%}}
/* marquee */
.marquee{background:var(--sun);transform:rotate(-2deg);margin:40px -2%;overflow:hidden;padding:16px 0;border-block:2px solid var(--ink)}
.marquee .track{display:flex;gap:40px;width:max-content;animation:slide 28s linear infinite;font-stretch:125%;font-weight:800;font-size:1.6rem;text-transform:uppercase}
@keyframes slide{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* story */
.verses{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
blockquote{margin:0;background:#fff;padding:30px;border-top:6px solid var(--teal)}blockquote:nth-child(2){border-color:var(--coral)}blockquote:nth-child(3){border-color:var(--sun)}
blockquote p{font-size:1.1rem;margin:0 0 16px}cite{font-style:normal;font-weight:800;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase}
.heat{display:grid;grid-template-columns:repeat(4,1fr);gap:0}.heat div{padding:40px 26px;color:#fff;min-height:260px}.heat div:nth-child(1){background:var(--teal)}.heat div:nth-child(2){background:var(--coral)}.heat div:nth-child(3){background:var(--palm)}.heat div:nth-child(4){background:var(--ink)}
.heat b{display:block;font-size:4.5rem;font-stretch:125%;line-height:1}.heat h3{text-transform:uppercase;letter-spacing:.12em;font-size:.85rem}
@media(max-width:760px){.heat{grid-template-columns:1fr 1fr}.heat div{min-height:200px}}
.mission{font-size:clamp(1.3rem,2.6vw,2rem);font-weight:500;line-height:1.35;max-width:980px}
form{display:grid;gap:14px;max-width:560px}label{font-weight:800;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase}input,textarea{padding:14px;border:0;border-bottom:2px solid var(--ink);background:#fff;font:inherit}
/* reveal */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s,transform .8s}.reveal.in{opacity:1;transform:none}
footer{background:var(--ink);color:#fff;padding:70px 5% 30px}footer .top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:30px;margin-bottom:50px}
footer .big{font-size:clamp(2.5rem,8vw,7rem);color:var(--teal2)}footer ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}footer a{text-decoration:none}footer a:hover{color:var(--sun)}
footer .fine{border-top:1px solid #ffffff22;padding-top:20px;font-size:.8rem;opacity:.75;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.brand img{width:auto;height:40px}
.hero .art img{width:auto;height:72%;max-width:80%;left:50%;top:50%;transform:translate(-50%,-50%);filter:drop-shadow(0 18px 28px #0f253040)}
.seal .mid img{width:64px;filter:none}
.heatintro{display:grid;grid-template-columns:1fr auto;gap:50px;align-items:center}.heatintro p{max-width:460px}
.lockup{width:min(420px,100%);height:auto;background:#fff;padding:34px;box-shadow:0 20px 50px #0f25301a}
@media(max-width:760px){.heatintro{grid-template-columns:1fr}.lockup{justify-self:center;width:85%}}
.flock{height:auto;align-self:center}
html,body{overflow-x:clip}
.heatintro>div{min-width:0}.heatintro .stack{font-size:clamp(2.4rem,5.5vw,4.6rem)}.heatintro .stack .b{padding-left:12%}
.mwrap{overflow:hidden;padding:20px 0}
.heatintro .stack{font-size:clamp(2.2rem,4.6vw,3.8rem)!important}.heatintro .stack .a{padding-left:0}.heatintro .stack .b{padding-left:8%}
@media(min-width:761px){.heatintro{grid-template-columns:minmax(0,1fr) 420px;width:100%}.heatintro .lockup{width:420px}}
/* photos */
.hero .art.photo{background:linear-gradient(160deg,#00a6a655,#ffc93c33),var(--img) center/cover}
.hero .art.photo:before{background:linear-gradient(0deg,#0f253055,transparent 45%)}
.logo-card{position:absolute;right:6%;bottom:8%;background:#fff;padding:16px 18px;box-shadow:0 16px 40px #0f253040}
.hero .art.photo .logo-card img{position:static;transform:none;width:110px;height:auto;max-width:none;filter:none;display:block}
.panel{background:var(--img) center/cover!important}
.panel:before{content:"";position:absolute;inset:0;mix-blend-mode:multiply;opacity:.6;transition:opacity .5s}
.panel:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#0f253099,transparent 55%)}
.panel span{z-index:2}.panel:hover:before{opacity:.25}
.p1:before{background:var(--coral)}.p2:before{background:var(--teal)}.p3:before{background:var(--sun)}.p4:before{background:var(--palm)}.p5:before{background:var(--ink)}
.collage{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:120px;gap:14px}
.collage img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s}.collage img:hover{transform:scale(1.03)}
.c1{grid-column:1/4;grid-row:1/4}.c2{grid-column:4/6;grid-row:1/3}.c3{grid-column:6/7;grid-row:1/4}.c4{grid-column:4/6;grid-row:3/5}.c5{grid-column:1/3;grid-row:4/6}.c6{grid-column:3/4;grid-row:4/6}
.c6{grid-column:3/4}.collage .c4{grid-column:4/7}
@media(max-width:760px){.collage{grid-template-columns:1fr 1fr;grid-auto-rows:140px}.collage img{grid-column:auto!important;grid-row:auto!important}.collage .c1{grid-column:1/3!important;grid-row:span 2!important}}
.story-hero{height:min(56vh,520px);background:linear-gradient(0deg,#00a6a633,transparent),var(--img) center 60%/cover;margin:10px 0 50px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}.split img{width:100%;aspect-ratio:4/5;object-fit:cover;box-shadow:24px 24px 0 var(--sun)}
@media(max-width:760px){.split{grid-template-columns:1fr;gap:40px}.split img{box-shadow:12px 12px 0 var(--sun)}}
.photo-strip{display:grid;grid-template-columns:repeat(3,1fr)}.photo-strip img{width:100%;height:340px;object-fit:cover;display:block}
@media(max-width:760px){.photo-strip img{height:180px}}
@media(min-width:761px){.collage .c1{grid-column:1/4;grid-row:1/4}.collage .c2{grid-column:4/6;grid-row:1/3}.collage .c3{grid-column:6/7;grid-row:1/3}.collage .c4{grid-column:4/7;grid-row:3/6}.collage .c5{grid-column:1/3;grid-row:4/6}.collage .c6{grid-column:3/4;grid-row:4/6}}
.logo-card{right:auto;left:6%;bottom:auto;top:7%}
@media(min-width:761px){.collage .c1{grid-column:1/3;grid-row:1/4}.collage .c3{grid-column:3/5;grid-row:1/6}.collage .c2{grid-column:5/7;grid-row:1/3}.collage .c4{grid-column:5/7;grid-row:3/6}.collage .c5{grid-column:1/2;grid-row:4/6}.collage .c6{grid-column:2/3;grid-row:4/6}}
.collage figure{margin:0;position:relative;overflow:hidden}.collage figure img{object-position:center top}
figcaption{position:absolute;left:14px;bottom:14px;background:var(--ink);color:#fff;font:800 .72rem var(--x);font-stretch:115%;letter-spacing:.14em;text-transform:uppercase;padding:8px 12px}
.ds-fig{margin:0;position:relative}.ds-fig img{width:100%;aspect-ratio:4/5;object-fit:cover;box-shadow:24px 24px 0 var(--sun);display:block}
@media(max-width:760px){.collage .c3{grid-column:1/3!important;grid-row:span 3!important}.ds-fig img{box-shadow:12px 12px 0 var(--sun)}}
.ds figcaption,.ds-fig figcaption{bottom:auto;top:14px}
/* === SawTide neon palette (Oct 31) === */
:root{--lime:#C9FF20;--pink:#FF32B8;--purple:#7838FF;--aqua:#25D9E8;--neon:#00F5D4;--teal:var(--purple);--teal2:var(--neon);--coral:var(--pink);--sun:var(--lime);--palm:var(--aqua)}
.brand .t,.hero h1 .w,.stack .b{color:var(--purple)}
.btn:hover{background:var(--pink);color:var(--ink)}.btn.light:hover{background:var(--lime);color:var(--ink)}
.hero .art{background:linear-gradient(160deg,var(--purple),var(--pink) 50%,var(--lime))}
.hero .art.photo{background:linear-gradient(160deg,#7838FF55,#FF32B833 55%,#C9FF2033),var(--img) center/cover}
.hero .chip{background:var(--lime)}
.p1:before{background:var(--pink)}.p2:before{background:var(--purple)}.p3:before{background:var(--lime)}.p4:before{background:var(--aqua)}.p5:before{background:var(--neon)}
.badge{background:var(--lime);color:var(--ink)}
.note{border-color:var(--purple)}
.seal .dot{background:var(--pink);color:var(--ink)}
.marquee{background:linear-gradient(90deg,var(--lime),var(--neon) 50%,var(--aqua));color:var(--ink)}
blockquote{border-color:var(--purple)}blockquote:nth-child(2){border-color:var(--pink)}blockquote:nth-child(3){border-color:var(--lime)}
.heat div:nth-child(1){background:var(--purple);color:#fff}.heat div:nth-child(2){background:var(--pink);color:var(--ink)}.heat div:nth-child(3){background:var(--neon);color:var(--ink)}.heat div:nth-child(4){background:var(--ink);color:#fff}.heat div:nth-child(4) b{color:var(--lime)}
footer .big{color:var(--neon)}footer a:hover{color:var(--lime)}
.story-hero{background:linear-gradient(0deg,#7838FF33,transparent),var(--img) center 60%/cover}
.split img,.ds-fig img{box-shadow:24px 24px 0 var(--pink)}
@media(max-width:760px){.split img,.ds-fig img{box-shadow:12px 12px 0 var(--pink)}}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline-color:var(--purple)}
/* Site-wide pool-water background (Unsplash+ image from Daniel, license pending) with cream wash for readability */
body{background:transparent;position:relative}
body:before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(rgba(255,246,229,.80),rgba(255,246,229,.72)),url(water-facets.svg) center/480px repeat}
.card,.note,blockquote,form input,form textarea{background:rgba(255,255,255,.94)}
/* === Page themes (Oct 31): home = geometric water facets, shop = palms, story = sand, bentley = neon === */
body.home:before,body.palm:before,body.sand:before,body.bentley:before{display:none}
body.home{background:linear-gradient(rgba(255,246,229,.18),rgba(255,246,229,.18)),url(water-facets.svg) 0 0/480px 480px repeat}
body.palm{background:linear-gradient(rgba(255,246,229,.70),rgba(255,246,229,.78)),url(photos/palms-tall.webp) center top/cover repeat-y}
body.sand{background:linear-gradient(rgba(255,246,229,.55),rgba(255,246,229,.62)),url(photos/sand-bg.webp) center/900px auto repeat}
body.bentley{background:linear-gradient(rgba(255,246,229,.82),rgba(255,246,229,.82)),url(water-facets.svg) 0 0/360px repeat}
body.home main>section,body.home .band,body.home .panels{position:relative}
body.home main>section,body.sand main>section,body.palm main>section{background:rgba(255,246,229,.9);padding-left:clamp(16px,3vw,40px);padding-right:clamp(16px,3vw,40px);box-shadow:0 10px 40px #0b1f3a22;margin-bottom:28px}
body.home header,body.palm header,body.sand header,body.bentley header{background:rgba(255,246,229,.92)}
.palm-banner{height:min(42vh,360px);background:linear-gradient(90deg,#7838FF66,#00F5D433),var(--img) center 40%/cover;display:flex;align-items:flex-end;margin:10px 0 28px}
.palm-banner span{background:var(--lime);color:var(--ink);font:900 clamp(1rem,2.4vw,1.6rem) var(--x);text-transform:uppercase;letter-spacing:.06em;padding:12px 18px;margin:18px}
.palm-strip,.sand-strip{margin-bottom:28px}
.sand .story-hero{box-shadow:0 0 0 10px #fff6e5}
.bentley-feature{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.bf-img{aspect-ratio:4/5;background:linear-gradient(160deg,#FF32B844,#7838FF33),var(--img) center/cover;box-shadow:24px 24px 0 var(--pink)}
.bentley-feature .chip,.bentley .chip{display:inline-block;background:var(--pink);color:var(--ink);font:800 .75rem var(--x);letter-spacing:.14em;text-transform:uppercase;padding:6px 10px}
.bentley-hero{display:grid;grid-template-columns:2fr 1fr 1fr;gap:14px;height:min(52vh,460px);margin:14px 0 30px}
.bentley-hero>div{background:linear-gradient(160deg,#FF32B833,#7838FF22),var(--img) center/cover}
.bentley main>section{background:rgba(255,246,229,.6);padding:0 clamp(12px,3vw,36px) 30px}
@media(max-width:760px){.bentley-feature{grid-template-columns:1fr;gap:28px}.bf-img{box-shadow:12px 12px 0 var(--pink)}.bentley-hero{grid-template-columns:1fr 1fr;height:auto;grid-auto-rows:200px}.bentley-hero .bh1{grid-column:1/3}}
@media(max-width:760px){.bentley-feature h2,.bentley h1.stack{font-size:clamp(1.9rem,9.5vw,2.6rem)!important;overflow-wrap:anywhere}}

.sand .story-hero{box-shadow:none}.palm .story-hero{box-shadow:0 0 0 10px #fff6e5}
.featured-photo{margin:24px 0;text-align:center}.featured-photo img{width:100%;max-width:520px;height:auto;border-radius:18px;box-shadow:0 0 0 8px #FF32B8,0 20px 50px #0b1f3a33}.featured-photo figcaption{font:900 1.2rem var(--x);text-transform:uppercase;letter-spacing:.08em;margin-top:14px;color:#7838FF}
