*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --lagoon:#062B35;--lagoon-mid:#0A3D4C;--lagoon-light:#0E5068;
  --ocean-shallow:#0D7B8A;--ocean-foam:#C8E8EC;
  --coral:#C8523A;--coral-pale:#D4705A;
  --gold:#B8913A;--gold-pale:#CCA84E;
  --ivory:#F2EBD9;--ivory-warm:#E8DEC8;
  --sand:#D4C4A0;--sand-dark:#C0AA80;--sand-wet:#A89060;
  --midnight:#030E12;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Jost',sans-serif;
}
html{scroll-behavior:smooth}
body{
  background:var(--midnight);
  color:var(--ivory-warm);
  font-family:var(--sans);
  font-weight:300;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  /* Subtle sand-grain texture across entire page */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
}
img{display:block;width:100%;object-fit:cover}
a{text-decoration:none;color:inherit}

/* ═══ WAVE SVG divider ═══ */
.wave-divider{width:100%;overflow:hidden;line-height:0;display:block;margin:0;padding:0}
.wave-divider svg{display:block;width:100%}

/* ═══ NAV ═══ */
nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem 3rem;
  background:rgba(3,14,18,0.78);
  backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(184,145,58,0.14);
  transition:background 0.4s,padding 0.3s;
}
nav.scrolled{background:rgba(3,14,18,0.97);padding:0.85rem 3rem}
.nav-logo{font-family:var(--serif);font-size:1.7rem;font-weight:400;letter-spacing:0.1em;color:var(--gold)}
.nav-logo sup{font-size:0.5rem;letter-spacing:0.18em;color:rgba(242,235,217,0.4);font-family:var(--sans);font-weight:300;vertical-align:super;margin-left:0.4rem}
.nav-links{display:flex;gap:2.2rem;list-style:none}
.nav-links a{font-size:0.74rem;letter-spacing:0.14em;color:var(--ivory-warm);opacity:0.6;transition:opacity 0.2s,color 0.2s}
.nav-links a:hover{opacity:1;color:var(--gold)}
.nav-cta{font-size:0.7rem;letter-spacing:0.12em;padding:0.5rem 1.3rem;border:1px solid var(--gold);color:var(--gold);background:transparent;cursor:pointer;font-family:var(--sans);font-weight:400;transition:all 0.25s}
.nav-cta:hover{background:var(--gold);color:var(--midnight)}

/* ═══ HERO ═══ */
.hero{min-height:100vh;position:relative;display:flex;align-items:flex-end;overflow:hidden}
.hero-bg{
  position:absolute;inset:0;
  background-image:url('https://images.unsplash.com/photo-1590523741831-ab7e8b8f9c7f?w=2000&q=90&fit=crop');
  background-size:cover;background-position:center 40%;
  transform:scale(1.07);transition:transform 9s ease-out;
}
.hero-bg.loaded{transform:scale(1)}
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(175deg,rgba(3,14,18,0.08) 0%,rgba(6,43,53,0.3) 35%,rgba(3,14,18,0.82) 70%,rgba(3,14,18,0.98) 100%);
}
/* wet sand shimmer strip at base of hero */
.hero-sand-strip{
  position:absolute;bottom:0;left:0;right:0;height:280px;pointer-events:none;
  background:
    linear-gradient(to top,rgba(160,130,80,0.28) 0%,rgba(184,145,58,0.12) 30%,transparent 100%),
    repeating-linear-gradient(88deg,transparent,transparent 60px,rgba(212,196,160,0.04) 60px,rgba(212,196,160,0.04) 61px);
}
.hero-content{
  position:relative;z-index:10;padding:0 3rem 6rem;width:100%;
  display:grid;grid-template-columns:1fr auto;align-items:flex-end;gap:2rem;
}
.hero-eyebrow{font-size:0.68rem;letter-spacing:0.26em;color:var(--gold);margin-bottom:1.4rem;font-weight:400}
.hero-title{font-family:var(--serif);font-size:clamp(4.5rem,9.5vw,9.5rem);font-weight:300;line-height:0.88;color:var(--ivory);margin-bottom:2rem}
.hero-title em{font-style:italic;color:var(--coral)}
.hero-sub{font-size:0.94rem;line-height:1.82;color:var(--ivory-warm);opacity:0.7;max-width:400px;margin-bottom:2.8rem}
.hero-actions{display:flex;align-items:center;gap:2rem}
.btn-primary{font-size:0.74rem;letter-spacing:0.14em;padding:0.9rem 2.4rem;background:var(--coral);color:var(--ivory);border:none;cursor:pointer;font-family:var(--sans);font-weight:400;transition:background 0.2s}
.btn-primary:hover{background:var(--coral-pale)}
.btn-ghost{font-size:0.74rem;letter-spacing:0.12em;color:var(--ivory-warm);background:none;border:none;cursor:pointer;font-family:var(--sans);font-weight:300;opacity:0.62;text-decoration:underline;text-underline-offset:5px;text-decoration-color:rgba(184,145,58,0.38);transition:opacity 0.2s,color 0.2s}
.btn-ghost:hover{opacity:1;color:var(--gold)}
.hero-stats{display:flex;flex-direction:column;gap:2rem;text-align:right;padding-bottom:0.5rem}
.hero-stat-num{font-family:var(--serif);font-size:2.5rem;font-weight:300;color:var(--gold);display:block;line-height:1}
.hero-stat-lbl{font-size:0.62rem;letter-spacing:0.18em;color:var(--ivory-warm);opacity:0.42;font-weight:400}
.scroll-hint{position:absolute;bottom:3rem;left:50%;transform:translateX(-50%);z-index:10;display:flex;flex-direction:column;align-items:center;gap:0.5rem;opacity:0.38;animation:bobble 2.4s ease-in-out infinite}
.scroll-hint span{font-size:0.58rem;letter-spacing:0.22em;color:var(--ivory-warm)}
.scroll-arrow{width:1px;height:34px;background:linear-gradient(to bottom,var(--gold),transparent)}
@keyframes bobble{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(7px)}}

/* ═══ SAND TRANSITION (wave to sand colour) ═══ */
.sand-section{
  background:linear-gradient(180deg,#1a1008 0%,#2a1e0e 15%,#3d2d14 35%,#c0aa80 60%,#d4c4a0 75%,#e2d4b4 90%,#ede3cc 100%);
  padding:5rem 3rem 0;
  position:relative;overflow:hidden;
}
/* ripple lines — dry sand surface texture */
.sand-section::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(178deg,transparent,transparent 18px,rgba(160,130,70,0.07) 18px,rgba(160,130,70,0.07) 19px),
    repeating-linear-gradient(2deg,transparent,transparent 40px,rgba(180,150,90,0.05) 40px,rgba(180,150,90,0.05) 41px);
}
.sand-intro-inner{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:end;
  padding-bottom:4rem;
}
.sand-quote{font-family:var(--serif);font-size:clamp(2rem,4vw,3.4rem);font-weight:300;font-style:italic;line-height:1.32;color:var(--midnight)}
.sand-quote em{font-style:normal;color:var(--coral)}
.sand-body{font-size:0.9rem;line-height:1.9;color:#3d2d14;border-left:2px solid var(--coral);padding-left:1.5rem}
.sand-body p+p{margin-top:1rem}

/* ═══ COLLECTION ═══ */
.collection{background:var(--midnight);padding:6rem 3rem;position:relative;overflow:hidden}
.collection::before{content:'';position:absolute;top:0;right:0;width:400px;height:400px;background:radial-gradient(ellipse at 100% 0%,rgba(212,196,160,0.09) 0%,transparent 65%);pointer-events:none}
.collection::after{content:'';position:absolute;bottom:0;left:0;width:400px;height:400px;background:radial-gradient(ellipse at 0% 100%,rgba(13,123,138,0.1) 0%,transparent 65%);pointer-events:none}
.section-label{font-size:0.67rem;letter-spacing:0.24em;color:var(--gold);opacity:0.82;margin-bottom:0.9rem;font-weight:400}
.section-title{font-family:var(--serif);font-size:clamp(2.2rem,5vw,4rem);font-weight:300;color:var(--ivory);line-height:1.08;margin-bottom:3rem}
.section-title em{font-style:italic;color:var(--coral)}
.pieces-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:rgba(184,145,58,0.08);position:relative;z-index:1}
.piece-card{background:var(--lagoon-mid);position:relative;overflow:hidden;transition:transform 0.4s ease}
.piece-card:hover{transform:translateY(-5px)}
.piece-card-img{height:300px;overflow:hidden}
.piece-card-img img{height:100%;object-fit:cover;transition:transform 0.65s ease;filter:brightness(0.84) saturate(1.1)}
.piece-card:hover .piece-card-img img{transform:scale(1.07)}
.piece-card-body{padding:1.75rem;border-top:2px solid transparent;transition:border-top-color 0.3s}
.piece-card:hover .piece-card-body{border-top-color:var(--coral)}
.piece-fabrics{font-size:0.63rem;letter-spacing:0.17em;color:var(--gold);opacity:0.75;margin-bottom:0.5rem;font-weight:400}
.piece-name{font-family:var(--serif);font-size:1.65rem;font-weight:400;color:var(--ivory);margin-bottom:0.65rem;line-height:1.1}
.piece-desc{font-size:0.82rem;line-height:1.68;color:var(--ivory-warm);opacity:0.58;margin-bottom:1.4rem}
.piece-footer{display:flex;align-items:center;justify-content:space-between}
.piece-price{font-family:var(--serif);font-size:1.15rem;color:var(--coral);font-weight:400}
.piece-link{font-size:0.67rem;letter-spacing:0.12em;color:var(--ivory-warm);opacity:0.42;cursor:pointer;text-decoration:underline;text-underline-offset:4px;transition:opacity 0.2s,color 0.2s}
.piece-link:hover{opacity:1;color:var(--gold)}

/* ═══ BEACH PHOTO FULL ═══ */
.beach-full{
  height:70vh;position:relative;overflow:hidden;
  display:flex;align-items:flex-end;
}
.beach-full-img{
  position:absolute;inset:0;
  background-image:url('https://images.unsplash.com/photo-1552465011-b4e21bf6e79a?w=2000&q=88&fit=crop&crop=bottom');
  background-size:cover;background-position:center 55%;
  background-attachment:fixed;
  filter:brightness(0.72) saturate(1.3);
}
/* ocean foam effect at top of this band */
.beach-full::before{
  content:'';position:absolute;top:0;left:0;right:0;height:120px;
  background:linear-gradient(to bottom,var(--midnight) 0%,transparent 100%);
  z-index:2;pointer-events:none;
}
/* sand drift at bottom */
.beach-full::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:180px;
  background:linear-gradient(to top,rgba(30,20,8,0.95) 0%,rgba(50,35,12,0.6) 40%,transparent 100%);
  z-index:2;pointer-events:none;
}
.beach-full-caption{
  position:relative;z-index:10;padding:0 3rem 3rem;width:100%;
  display:flex;justify-content:space-between;align-items:flex-end;
}
.beach-full-caption-text{font-family:var(--serif);font-size:clamp(1.5rem,3vw,2.4rem);font-style:italic;color:var(--ivory);opacity:0.88;line-height:1.3}
.beach-full-caption-loc{font-size:0.64rem;letter-spacing:0.2em;color:var(--gold);opacity:0.7;font-weight:400}

/* ═══ PROMISE ═══ */
.promise{
  position:relative;overflow:hidden;
  background:linear-gradient(145deg,var(--lagoon) 0%,var(--lagoon-mid) 55%,var(--midnight) 100%);
  padding:6rem 3rem;
  display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center;
}
/* sand whisp top-left */
.promise::before{content:'';position:absolute;top:0;left:0;width:350px;height:350px;background:radial-gradient(ellipse at 0% 0%,rgba(212,196,160,0.13) 0%,transparent 65%);pointer-events:none}
.promise::after{content:'';position:absolute;bottom:0;right:0;width:300px;height:300px;background:radial-gradient(ellipse at 100% 100%,rgba(200,82,58,0.07) 0%,transparent 65%);pointer-events:none}
.promise-left p{font-size:0.9rem;line-height:1.9;color:var(--ivory-warm);opacity:0.66;margin-bottom:2.5rem}
.promise-pillars{display:flex;flex-direction:column}
.pillar{display:grid;grid-template-columns:3.5rem 1fr;gap:1rem;align-items:start;padding:1.25rem 0;border-top:1px solid rgba(184,145,58,0.12)}
.pillar:last-child{border-bottom:1px solid rgba(184,145,58,0.12)}
.pillar-num{font-family:var(--serif);font-size:1.8rem;font-weight:300;color:var(--coral);opacity:0.52;line-height:1}
.pillar-name{font-size:0.76rem;letter-spacing:0.1em;color:var(--gold);font-weight:400;margin-bottom:0.3rem}
.pillar-text{font-size:0.81rem;line-height:1.65;color:var(--ivory-warm);opacity:0.58}
.promise-right{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:rgba(184,145,58,0.08);position:relative;z-index:1}
.promise-tile{background:var(--lagoon-mid);padding:2.2rem 1.8rem;border-bottom:2px solid var(--coral)}
.promise-tile.gold{border-bottom-color:var(--gold)}
.promise-tile-num{font-family:var(--serif);font-size:3.2rem;font-weight:300;color:var(--ivory);line-height:1;margin-bottom:0.4rem}
.promise-tile-lbl{font-size:0.66rem;letter-spacing:0.13em;color:var(--ivory-warm);opacity:0.48;font-weight:400}

/* ═══ WET SAND INTERLUDE ═══ */
.wet-sand{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,#1a1008 0%,#2e2010 10%,#8a7040 35%,#b09060 55%,#c8aa78 70%,#d4c090 82%,#ddd0a8 100%);
  padding:5rem 3rem;
}
.wet-sand::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(175deg,transparent,transparent 22px,rgba(255,255,255,0.025) 22px,rgba(255,255,255,0.025) 23px),
    repeating-linear-gradient(5deg,transparent,transparent 50px,rgba(160,120,60,0.06) 50px,rgba(160,120,60,0.06) 51px);
}
.wet-sand-inner{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;
}
.wet-sand-img-wrap{
  height:480px;overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,0.4);
}
.wet-sand-img-wrap img{height:100%;object-fit:cover;filter:brightness(0.9) saturate(1.15)}
.wet-sand-text{}
.wet-sand-label{font-size:0.65rem;letter-spacing:0.22em;color:var(--coral);margin-bottom:0.8rem;font-weight:400}
.wet-sand-title{font-family:var(--serif);font-size:clamp(2rem,4vw,3.2rem);font-weight:300;color:var(--midnight);line-height:1.12;margin-bottom:1.5rem}
.wet-sand-title em{font-style:italic;color:var(--coral)}
.wet-sand-body{font-size:0.9rem;line-height:1.9;color:#3a2c10}
.wet-sand-body p+p{margin-top:1rem}
.wet-sand-body strong{font-weight:500;color:var(--midnight)}

/* ═══ FABRICS ═══ */
.fabrics{background:var(--ivory);color:var(--midnight);padding:6rem 3rem;position:relative;overflow:hidden}
.fabrics::before{content:'';position:absolute;top:0;right:0;width:400px;height:400px;background:radial-gradient(ellipse at 100% 0%,rgba(184,145,58,0.1) 0%,transparent 65%);pointer-events:none}
.fabrics::after{content:'';position:absolute;bottom:0;left:0;width:400px;height:400px;background:radial-gradient(ellipse at 0% 100%,rgba(200,82,58,0.05) 0%,transparent 65%);pointer-events:none}
.fabrics .section-label{color:var(--coral)}
.fabrics .section-title{color:var(--midnight)}
.fabrics .section-title em{color:var(--coral)}
.fabrics-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid rgba(184,145,58,0.22);position:relative;z-index:1}
.fabric-cell{padding:1.75rem 1.4rem;border-right:1px solid rgba(184,145,58,0.22);border-bottom:1px solid rgba(184,145,58,0.22);transition:background 0.25s}
.fabric-cell:hover{background:rgba(184,145,58,0.05)}
.fabric-cell:nth-child(4n){border-right:none}
.fabric-cell:nth-last-child(-n+4){border-bottom:none}
.fabric-swatch{width:100%;height:3.5rem;margin-bottom:1rem;border-radius:2px}
.sw-washed{background:repeating-linear-gradient(45deg,#c8b896,#c8b896 1px,#d4c4a8 1px,#d4c4a8 4px)}
.sw-voile{background:repeating-linear-gradient(0deg,rgba(200,184,150,0.45),rgba(200,184,150,0.45) 1px,transparent 1px,transparent 6px),repeating-linear-gradient(90deg,rgba(200,184,150,0.45),rgba(200,184,150,0.45) 1px,transparent 1px,transparent 6px)}
.sw-jersey{background:repeating-linear-gradient(60deg,#c0b088,#c0b088 1px,#ccc098 1px,#ccc098 5px)}
.sw-twill{background:repeating-linear-gradient(45deg,#b8a880,#b8a880 2px,#c8b890 2px,#c8b890 8px)}
.sw-silk{background:linear-gradient(135deg,#d4b896,#e8d0a8,#c8a880,#dcc098,#e0c8a0)}
.sw-irish{background:repeating-linear-gradient(0deg,#c4b484,#c4b484 1px,#d8c898 1px,#d8c898 3px)}
.sw-cotton{background:repeating-linear-gradient(90deg,#d8c8a8,#d8c8a8 2px,#e4d8b8 2px,#e4d8b8 8px)}
.sw-lawn{background:linear-gradient(170deg,#ece4cc,#f4ecdc,#e8e0c8)}
.fabric-name{font-family:var(--serif);font-size:1.15rem;font-weight:400;color:var(--midnight);margin-bottom:0.2rem}
.fabric-tags{font-size:0.67rem;color:var(--coral);letter-spacing:0.1em;font-weight:400}

/* ═══ OCEAN PANORAMA ═══ */
.panorama{
  height:70vh;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.panorama-img{
  position:absolute;inset:-5%;
  background-image:url('https://images.unsplash.com/photo-1500375592092-40eb2168fd21?w=2200&q=88&fit=crop');
  background-size:cover;background-position:center 45%;
  background-attachment:fixed;
  filter:brightness(0.55) saturate(1.4);
}
/* foam top & sand bottom bleed */
.panorama::before{content:'';position:absolute;top:0;left:0;right:0;height:140px;background:linear-gradient(to bottom,var(--ivory) 0%,transparent 100%);z-index:3;pointer-events:none}
.panorama::after{content:'';position:absolute;bottom:0;left:0;right:0;height:160px;background:linear-gradient(to top,var(--midnight) 0%,transparent 100%);z-index:3;pointer-events:none}
.panorama-text{position:relative;z-index:10;text-align:center;padding:0 2rem}
.panorama-text blockquote{font-family:var(--serif);font-size:clamp(1.8rem,4vw,3.6rem);font-weight:300;font-style:italic;color:var(--ivory);line-height:1.32;max-width:820px}
.panorama-text cite{display:block;font-size:0.68rem;letter-spacing:0.2em;color:var(--gold);font-style:normal;margin-top:1.5rem;font-weight:400}

/* ═══ PROCESS ═══ */
.process{background:var(--midnight);padding:6rem 3rem;position:relative;overflow:hidden}
.process::before{content:'';position:absolute;top:0;left:0;width:300px;height:300px;background:radial-gradient(ellipse at 0% 0%,rgba(212,196,160,0.09) 0%,transparent 65%);pointer-events:none}
.process::after{content:'';position:absolute;bottom:0;right:0;width:300px;height:300px;background:radial-gradient(ellipse at 100% 100%,rgba(14,80,104,0.16) 0%,transparent 65%);pointer-events:none}
.process-track{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;margin-top:3.5rem;position:relative;z-index:1}
.process-track::before{content:'';position:absolute;top:1.1rem;left:1.1rem;right:1.1rem;height:1px;background:linear-gradient(90deg,var(--coral),var(--gold),var(--lagoon-light))}
.process-step{padding-top:3rem;position:relative}
.step-dot{width:2.2rem;height:2.2rem;border-radius:50%;border:1px solid var(--gold);background:var(--midnight);display:flex;align-items:center;justify-content:center;position:absolute;top:0;left:0}
.step-dot-inner{width:0.7rem;height:0.7rem;border-radius:50%;background:var(--coral)}
.step-label{font-family:var(--serif);font-size:1.4rem;font-weight:400;color:var(--ivory);margin-bottom:0.6rem}
.step-text{font-size:0.81rem;line-height:1.7;color:var(--ivory-warm);opacity:0.56}

/* ═══ STORY ═══ */
.story{
  background:var(--lagoon);padding:7rem 3rem;overflow:hidden;position:relative;
}
/* sand whisp top-left and bottom-right */
.story::before{content:'';position:absolute;top:0;left:0;width:400px;height:400px;background:radial-gradient(ellipse at 0% 0%,rgba(212,196,160,0.14) 0%,transparent 65%);pointer-events:none}
.story-sand-br{position:absolute;bottom:0;right:0;width:350px;height:350px;background:radial-gradient(ellipse at 100% 100%,rgba(212,196,160,0.12) 0%,transparent 65%);pointer-events:none;z-index:1}
.story-giant-q{position:absolute;top:-5rem;right:-3rem;font-family:var(--serif);font-size:32rem;font-weight:300;color:rgba(14,80,104,0.25);line-height:1;pointer-events:none}
.story-inner{max-width:720px;position:relative;z-index:2}
.story-quote{font-family:var(--serif);font-size:clamp(1.45rem,2.8vw,2.1rem);font-style:italic;font-weight:300;color:var(--ivory);line-height:1.55;margin-bottom:2.5rem;border-left:2px solid var(--coral);padding-left:1.75rem}
.story-body{font-size:0.92rem;line-height:1.95;color:var(--ivory-warm);opacity:0.76}
.story-body p+p{margin-top:1.25rem}
.story-body strong{font-weight:400;color:var(--gold);opacity:1}
.story-attr{margin-top:3rem;display:flex;gap:3rem;border-top:1px solid rgba(184,145,58,0.14);padding-top:2.5rem}
.story-attr-item{display:flex;flex-direction:column;gap:0.3rem}
.story-attr-item strong{font-family:var(--serif);font-size:1.45rem;font-weight:300;color:var(--gold)}
.story-attr-item span{font-size:0.64rem;letter-spacing:0.17em;color:var(--ivory-warm);opacity:0.42;font-weight:400}

/* ═══ LIFESTYLE TRIO ═══ */
.lifestyle-trio{display:grid;grid-template-columns:1fr 1.6fr 1fr;height:58vh;gap:3px;background:var(--midnight)}
.lifestyle-cell{overflow:hidden;position:relative}
.lifestyle-cell img{width:100%;height:100%;object-fit:cover;filter:brightness(0.75) saturate(1.15);transition:transform 0.7s ease,filter 0.4s ease}
.lifestyle-cell:hover img{transform:scale(1.06);filter:brightness(0.9) saturate(1.25)}
.lifestyle-cell-overlay{position:absolute;bottom:0;left:0;right:0;height:60%;background:linear-gradient(to top,rgba(3,14,18,0.85) 0%,transparent 100%)}
.lifestyle-cell-label{position:absolute;bottom:1.5rem;left:1.5rem;z-index:2}
.lifestyle-cell-label span{display:block;font-size:0.62rem;letter-spacing:0.2em;color:var(--gold);font-weight:400;margin-bottom:0.25rem}
.lifestyle-cell-label p{font-family:var(--serif);font-size:1.05rem;font-style:italic;color:var(--ivory);opacity:0.9}

/* ═══ SAND-TO-DARK TRANSITION ═══ */
.shore-transition{
  height:200px;
  background:linear-gradient(180deg,#ede3cc 0%,#d4c090 20%,#b09060 40%,#6a4c20 65%,#2a1e0e 85%,#030E12 100%);
  position:relative;overflow:hidden;
}
.shore-transition::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(178deg,transparent,transparent 14px,rgba(255,255,255,0.03) 14px,rgba(255,255,255,0.03) 15px);
}

/* ═══ CONTACT ═══ */
.contact{background:var(--midnight);padding:6rem 3rem;display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start;position:relative;overflow:hidden}
.contact::before{content:'';position:absolute;top:0;left:0;width:300px;height:300px;background:radial-gradient(ellipse at 0% 0%,rgba(212,196,160,0.07) 0%,transparent 65%);pointer-events:none}
.contact::after{content:'';position:absolute;bottom:0;right:0;width:300px;height:300px;background:radial-gradient(ellipse at 100% 100%,rgba(14,80,104,0.18) 0%,transparent 65%);pointer-events:none}
.contact-left{position:relative;z-index:1}
.contact-left .section-title{margin-bottom:1rem}
.contact-left>p{font-size:0.9rem;line-height:1.85;color:var(--ivory-warm);opacity:0.6;margin-bottom:2.5rem}
.contact-detail{display:flex;gap:1rem;align-items:flex-start;margin-bottom:1.4rem}
.contact-detail-icon{width:2.2rem;height:2.2rem;border:1px solid rgba(184,145,58,0.28);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:var(--serif);font-size:0.9rem;color:var(--gold)}
.contact-detail-body{font-size:0.84rem;line-height:1.5;color:var(--ivory-warm);opacity:0.65}
.contact-detail-body strong{display:block;color:var(--ivory);opacity:1;font-weight:400;font-size:0.88rem;margin-bottom:0.15rem}
.contact-right{position:relative;z-index:1}
.form-field{margin-bottom:1.2rem}
.form-field label{display:block;font-size:0.65rem;letter-spacing:0.16em;color:var(--gold);opacity:0.8;margin-bottom:0.5rem;font-weight:400}
.form-field input,.form-field select,.form-field textarea{width:100%;background:rgba(14,80,104,0.1);border:1px solid rgba(184,145,58,0.16);color:var(--ivory);font-family:var(--sans);font-size:0.87rem;font-weight:300;padding:0.78rem 1rem;outline:none;transition:border-color 0.25s,background 0.25s;-webkit-appearance:none;border-radius:0}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{border-color:rgba(184,145,58,0.5);background:rgba(14,80,104,0.18)}
.form-field input::placeholder,.form-field textarea::placeholder{color:var(--ivory-warm);opacity:0.26}
.form-field select option{background:var(--lagoon);color:var(--ivory)}
.form-field textarea{height:110px;resize:none}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.btn-submit{width:100%;padding:1rem;background:var(--coral);color:var(--ivory);border:none;font-family:var(--sans);font-size:0.73rem;letter-spacing:0.17em;cursor:pointer;margin-top:0.5rem;transition:background 0.25s;font-weight:400}
.btn-submit:hover{background:var(--coral-pale)}

/* ═══ FOOTER ═══ */
footer{background:var(--midnight);border-top:1px solid rgba(184,145,58,0.1);padding:3.5rem 3rem 2.5rem}
.footer-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:3rem}
.footer-logo{font-family:var(--serif);font-size:1.8rem;font-weight:400;color:var(--gold);letter-spacing:0.08em}
.footer-logo small{display:block;font-family:var(--sans);font-size:0.63rem;letter-spacing:0.17em;color:rgba(232,220,200,0.32);margin-top:0.3rem;font-weight:300}
.footer-nav{display:flex;gap:4rem}
.footer-nav-col h4{font-size:0.63rem;letter-spacing:0.2em;color:var(--gold);opacity:0.68;font-weight:400;margin-bottom:1rem}
.footer-nav-col ul{list-style:none}
.footer-nav-col li{margin-bottom:0.55rem}
.footer-nav-col a{font-size:0.78rem;color:var(--ivory-warm);opacity:0.4;transition:opacity 0.2s,color 0.2s}
.footer-nav-col a:hover{opacity:0.82;color:var(--gold)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(184,145,58,0.08);padding-top:2rem}
.footer-copy{font-size:0.67rem;color:var(--ivory-warm);opacity:0.26;letter-spacing:0.06em}
.footer-legal{display:flex;gap:1.5rem}
.footer-legal a{font-size:0.67rem;color:var(--ivory-warm);opacity:0.26;transition:opacity 0.2s}
.footer-legal a:hover{opacity:0.6}

/* ═══ WHATSAPP FLOAT ═══ */
.wa-float{
  position:fixed;bottom:2rem;right:2rem;z-index:300;
  width:3.2rem;height:3.2rem;border-radius:50%;
  background:#25D366;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 20px rgba(37,211,102,0.35);
  cursor:pointer;transition:transform 0.2s,box-shadow 0.2s;
  text-decoration:none;
}
.wa-float:hover{transform:scale(1.1);box-shadow:0 6px 28px rgba(37,211,102,0.5)}
.wa-float svg{width:1.6rem;height:1.6rem;fill:#fff}

/* ═══ ANIMATIONS ═══ */
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
.fade-up{opacity:0;animation:fadeUp 1s ease forwards}
.fade-up.d1{animation-delay:0.1s}.fade-up.d2{animation-delay:0.3s}.fade-up.d3{animation-delay:0.55s}.fade-up.d4{animation-delay:0.8s}

/* ═══ RESPONSIVE ═══ */
@media(max-width:960px){
  .pieces-grid{grid-template-columns:repeat(2,1fr)}
  .fabrics-grid{grid-template-columns:repeat(2,1fr)}
  .promise{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr}
  .wet-sand-inner{grid-template-columns:1fr}
  .wet-sand-img-wrap{height:320px}
  .sand-intro-inner{grid-template-columns:1fr}
  .lifestyle-trio{grid-template-columns:1fr;height:auto}
  .lifestyle-cell{height:260px}
  .hero-content{grid-template-columns:1fr}
  .hero-stats{flex-direction:row;text-align:left}
  nav{padding:1rem 1.5rem}
  .nav-links{display:none}
  .process-track{grid-template-columns:1fr 1fr}
  .process-track::before{display:none}
  .story-giant-q{font-size:14rem;right:-1rem}
  .footer-nav{gap:2rem}
  .beach-full{height:50vh}
}


/* =====================================================
   DXL MASTER BRAND — overrides/extensions to ocean theme
   ===================================================== */

/* Hero — DXL "Beauty Comes in All Sizes" */
.dxl-hero{
  position:relative;height:100vh;min-height:640px;overflow:hidden;
  display:flex;align-items:center;
  background:#0a0a0a;
}
.dxl-hero-bg{
  position:absolute;inset:0;
  background-image:url('https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=2200&q=88&fit=crop');
  background-size:cover;background-position:center 35%;
  filter:brightness(0.55) saturate(1.1);
}
.dxl-hero::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,0.55) 0%,rgba(0,0,0,0.2) 50%,rgba(0,0,0,0) 100%);
  z-index:2;
}
.dxl-hero-inner{
  position:relative;z-index:5;padding:0 4rem;max-width:680px;color:var(--ivory);
}
.dxl-hero-title{
  font-family:var(--serif);font-size:clamp(2.6rem,5.4vw,4.6rem);
  font-weight:300;line-height:1.05;letter-spacing:0.01em;
  color:var(--ivory);margin:0 0 1.5rem;
}
.dxl-hero-sub{
  font-family:var(--serif);font-size:1.15rem;font-style:italic;
  line-height:1.6;color:var(--ivory);opacity:0.86;margin-bottom:1.2rem;
  border-left:2px solid var(--gold);padding-left:1.2rem;
}
.dxl-hero-tag{
  font-size:0.7rem;letter-spacing:0.22em;color:var(--gold);
  text-transform:uppercase;margin-top:2.5rem;font-weight:400;
}

/* Brand Story — DXL */
.brand-story{background:var(--ivory);color:var(--midnight);padding:5rem 4rem}
.brand-story-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:3rem;align-items:start}
.brand-story h2{
  font-family:var(--serif);font-size:2.4rem;font-weight:400;color:var(--midnight);
  margin:0 0 1rem;line-height:1.1;
}
.brand-story .bs-section{margin-bottom:2rem}
.brand-story .bs-section h3{
  font-family:var(--serif);font-size:1.3rem;font-weight:400;color:var(--midnight);
  margin:0 0 0.8rem;letter-spacing:0.01em;
}
.brand-story .bs-section p{
  font-size:0.88rem;line-height:1.75;color:#3a3a3a;
}
.brand-story .bs-mark{text-align:center}
.brand-story .bs-mark-logo{
  font-family:var(--serif);font-size:3.6rem;font-weight:300;
  color:var(--midnight);letter-spacing:0.04em;line-height:1;
  border:2px solid var(--midnight);display:inline-block;
  padding:0.6rem 1.4rem;margin-bottom:0.6rem;
}
.brand-story .bs-mark-crown{font-size:1.2rem;color:var(--midnight);margin-bottom:0.4rem;letter-spacing:0.3em}
.brand-story .bs-mark-sub{
  font-size:0.65rem;letter-spacing:0.22em;color:#666;
  text-transform:uppercase;border-top:1px solid #999;padding-top:0.6rem;display:inline-block;
}
.story-list{list-style:none;padding:0;margin:1rem 0}
.story-list li{
  display:flex;gap:0.8rem;align-items:flex-start;
  margin-bottom:0.9rem;font-size:0.85rem;line-height:1.55;color:#3a3a3a;
}
.story-list .icon{
  width:1.4rem;height:1.4rem;flex-shrink:0;color:var(--midnight);
  border:1px solid #999;display:flex;align-items:center;justify-content:center;
  font-size:0.7rem;margin-top:2px;
}

/* Product Universe — DXL */
.dxl-universe{background:var(--ivory);color:var(--midnight);padding:4rem 4rem 5rem}
.dxl-universe h2{
  font-family:var(--serif);font-size:1.5rem;font-weight:400;color:var(--midnight);
  text-align:center;letter-spacing:0.04em;margin:0 0 2rem;
}
.universe-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.5rem;align-items:end}
.universe-cat{text-align:center}
.universe-cat h3{
  font-size:0.7rem;letter-spacing:0.22em;color:var(--midnight);
  text-transform:uppercase;margin:0 0 0.6rem;font-weight:500;
}
.universe-tags{font-size:0.7rem;letter-spacing:0.15em;color:#666;text-transform:uppercase;line-height:1.9}

/* Fabric Library */
.dxl-fabrics{
  background:linear-gradient(180deg,var(--ivory) 0%,#f0e9d8 100%);
  color:var(--midnight);padding:4rem;
}
.dxl-fabrics h3{
  font-family:var(--serif);font-size:1.4rem;font-weight:400;color:var(--midnight);
  margin:0 0 0.4rem;
}
.dxl-fabrics p{font-size:0.78rem;color:#666;margin:0 0 1.5rem;font-style:italic}
.fabric-row{display:grid;grid-template-columns:repeat(9,1fr);gap:0.6rem;margin-bottom:1.5rem}
.fabric-swatch{aspect-ratio:1;border-radius:2px}
.fabric-name{font-size:0.6rem;letter-spacing:0.08em;color:var(--midnight);text-align:center;margin-top:0.4rem;text-transform:uppercase}
.fabric-promises{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid #d4c8a8}
.fabric-promise{text-align:center;font-size:0.7rem;letter-spacing:0.15em;color:#666;text-transform:uppercase;line-height:1.4}
.fabric-promise .fp-icon{font-size:1.2rem;margin-bottom:0.4rem;color:var(--midnight)}
.fp-strong{color:var(--midnight);font-weight:500;display:block;margin-top:0.2rem}

/* Brand Architecture */
.dxl-arch{
  background:var(--midnight);color:var(--ivory);
  padding:3.5rem 4rem;display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:2.5rem;align-items:center;
}
.dxl-arch-block{text-align:center}
.dxl-arch-block h3{
  font-family:var(--serif);font-size:1.5rem;font-weight:400;color:var(--gold);
  margin:0 0 0.2rem;letter-spacing:0.08em;
}
.dxl-arch-block .arch-sub{
  font-size:0.6rem;letter-spacing:0.22em;color:var(--ivory-warm);
  opacity:0.6;text-transform:uppercase;margin-bottom:0.6rem;
}
.dxl-arch-block p{font-size:0.75rem;line-height:1.55;color:var(--ivory-warm);opacity:0.7}
.dxl-arch-tagline{
  font-size:0.65rem;letter-spacing:0.22em;color:var(--gold);
  text-transform:uppercase;text-align:center;grid-column:1/-1;
  padding-top:1.5rem;border-top:1px solid rgba(184,145,58,0.18);
  font-weight:400;
}

/* OCEAN by DXL — co-brand block */
.ocean-block{
  background:linear-gradient(135deg,#1a3540 0%,#062B35 60%,#030E12 100%);
  color:var(--ivory);padding:4rem;display:grid;grid-template-columns:1.2fr 1fr;
  gap:3rem;align-items:center;position:relative;overflow:hidden;
}
.ocean-block::before{
  content:'';position:absolute;top:0;right:0;width:500px;height:500px;
  background:radial-gradient(ellipse at 100% 0%,rgba(13,123,138,0.25) 0%,transparent 65%);
  pointer-events:none;
}
.ocean-block-label{font-size:0.62rem;letter-spacing:0.24em;color:var(--gold);text-transform:uppercase;margin-bottom:0.6rem}
.ocean-block-title{
  font-family:var(--serif);font-size:2.6rem;font-weight:300;
  color:var(--ivory);margin:0 0 0.4rem;line-height:1.1;font-style:italic;
}
.ocean-block-by{font-size:0.8rem;letter-spacing:0.22em;color:var(--gold);text-transform:uppercase;margin-bottom:1.2rem}
.ocean-block-sub{font-size:0.78rem;letter-spacing:0.18em;color:var(--gold);text-transform:uppercase;margin-bottom:0.8rem}
.ocean-block-body{font-size:0.85rem;line-height:1.7;color:var(--ivory-warm);opacity:0.78;margin-bottom:1.2rem}
.ocean-block-pillars{display:flex;gap:1.5rem;flex-wrap:wrap}
.ocean-pillar{text-align:center;font-size:0.62rem;letter-spacing:0.14em;color:var(--ivory-warm);text-transform:uppercase}
.ocean-pillar .op-icon{font-size:1.3rem;margin-bottom:0.3rem;color:var(--gold);display:block}
.ocean-block-img{height:340px;background-size:cover;background-position:center;border-radius:2px}

/* Assortment-at-a-glance sidebar */
.assortment{
  background:var(--ivory);color:var(--midnight);
  padding:3rem 4rem;display:grid;grid-template-columns:2fr 1fr;gap:3rem;align-items:start;
}
.assortment-products{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:1.5rem}
.assortment-col h3{
  font-size:0.7rem;letter-spacing:0.22em;color:var(--midnight);
  text-transform:uppercase;margin:0 0 0.7rem;padding-bottom:0.5rem;
  border-bottom:1px solid #c8b896;font-weight:500;
}
.assortment-col ul{list-style:none;padding:0;margin:0}
.assortment-col li{font-size:0.78rem;line-height:1.8;color:#3a3a3a;position:relative;padding-left:0.8rem}
.assortment-col li::before{content:'•';position:absolute;left:0;color:var(--coral)}
.assortment-col li ul{list-style:none;padding:0 0 0 0.8rem;margin:0.1rem 0 0.4rem}
.assortment-col li ul li{font-size:0.7rem;color:#666;line-height:1.7;padding-left:0.6rem}
.assortment-col li ul li::before{content:'–';color:#999;left:0}
.assortment-glance{
  background:#0a1a30;color:var(--ivory);padding:1.8rem 1.5rem;border-radius:2px;
}
.assortment-glance h3{
  background:var(--midnight);color:var(--ivory);
  font-size:0.72rem;letter-spacing:0.2em;text-transform:uppercase;
  text-align:center;padding:0.7rem;margin:-1.8rem -1.5rem 1.3rem;font-weight:500;
}
.assortment-glance-item{
  display:flex;gap:0.7rem;align-items:flex-start;margin-bottom:1rem;
  padding-bottom:1rem;border-bottom:1px solid rgba(255,255,255,0.08);
}
.assortment-glance-item:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.assortment-glance-icon{font-size:1.2rem;color:var(--gold);flex-shrink:0;margin-top:2px}
.assortment-glance-text strong{
  display:block;font-family:var(--serif);font-size:1rem;color:var(--ivory);
  margin-bottom:0.1rem;font-weight:400;
}
.assortment-glance-text span{font-size:0.68rem;color:var(--ivory-warm);opacity:0.7;line-height:1.4;display:block}

/* Promise + Partnership dark band */
.dxl-bottom{
  background:var(--midnight);color:var(--ivory);
  padding:2.5rem 4rem;display:grid;grid-template-columns:1fr 1.4fr 1fr 1fr;
  gap:2rem;align-items:center;border-top:1px solid rgba(184,145,58,0.15);
}
.dxl-bottom-block h4{
  font-size:0.68rem;letter-spacing:0.22em;color:var(--gold);
  text-transform:uppercase;margin:0 0 0.5rem;font-weight:500;
}
.dxl-bottom-block p{font-size:0.78rem;line-height:1.6;color:var(--ivory-warm);opacity:0.75;margin:0}
.dxl-bottom-block.dxl-brand h3{
  font-family:var(--serif);font-size:2rem;font-weight:300;color:var(--ivory);
  margin:0;letter-spacing:0.04em;
}
.dxl-bottom-block.dxl-brand .dxl-tag{
  font-size:0.6rem;letter-spacing:0.2em;color:var(--gold);
  text-transform:uppercase;margin-top:0.3rem;
}
.dxl-bottom-block.ocean-brand h3{
  font-family:var(--serif);font-size:1.6rem;font-weight:300;
  color:var(--gold);font-style:italic;margin:0;
}
.dxl-bottom-block.ocean-brand .ocean-tag{
  font-size:0.6rem;letter-spacing:0.2em;color:var(--ivory-warm);
  text-transform:uppercase;margin-top:0.3rem;
}

/* Responsive */
@media(max-width:1100px){
  .brand-story-grid{grid-template-columns:1fr;gap:2rem}
  .universe-row{grid-template-columns:1fr;gap:1.5rem}
  .fabric-row{grid-template-columns:repeat(4,1fr)}
  .fabric-promises{grid-template-columns:repeat(2,1fr)}
  .dxl-arch{grid-template-columns:1fr;gap:1.5rem}
  .ocean-block{grid-template-columns:1fr;gap:2rem}
  .ocean-block-img{height:240px}
  .assortment{grid-template-columns:1fr}
  .assortment-products{grid-template-columns:1fr 1fr}
  .dxl-bottom{grid-template-columns:1fr;gap:1.5rem;text-align:center}
}