/* =========================================================
   Michelle Carrillo — Coastal Real Estate
   Quiet-luxury coastal editorial. Motion-first.
   ========================================================= */

:root{
  --ink:        #0c1418;
  --navy:       #0a1f2e;
  --navy-2:     #0d2a3a;
  --teal:       #1b4a5a;
  --teal-2:     #2d6e7e;
  --seaglass:   #9cc4ba;
  --seaglass-2: #c4ddd5;
  --sand:       #e8dcc8;
  --sand-2:     #f2ead9;
  --sun:        #e6a36b;
  --sun-2:      #d9824f;
  --paper:      #f7f2ea;
  --paper-2:    #efe7da;
  --line:       rgba(12,20,24,0.12);

  --maxw: 1320px;
  --pad: clamp(20px, 5vw, 80px);

  --serif: "Fraunces", Georgia, serif;
  --sans: "Manrope", system-ui, sans-serif;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-2: cubic-bezier(0.65, 0, 0.35, 1);
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  line-height:1.6;
}

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--sun); color:var(--navy); }

/* ---------- Typographic helpers ---------- */
.eyebrow{
  font-size:.72rem; letter-spacing:.32em; text-transform:uppercase;
  font-weight:600; color:var(--teal-2);
  display:inline-flex; align-items:center; gap:.7em;
}
.eyebrow::before{ content:""; width:30px; height:1px; background:currentColor; opacity:.6; }
.eyebrow--light{ color:var(--seaglass-2); }

.h2{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2rem, 5vw, 4.1rem);
  line-height:1.02; letter-spacing:-.01em; color:var(--navy);
  margin:.5rem 0 1.5rem;
}

/* =========================================================
   CURSOR
   ========================================================= */
.cursor, .cursor-dot{
  position:fixed; top:0; left:0; border-radius:50%;
  pointer-events:none; z-index:9999; mix-blend-mode:difference;
  translate:-50% -50%;
}
.cursor{
  width:38px; height:38px; border:1px solid rgba(255,255,255,.8);
  transition:width .35s var(--ease), height .35s var(--ease),
             background .35s var(--ease), opacity .3s;
}
.cursor-dot{ width:5px; height:5px; background:#fff; }
.cursor.is-hover{ width:64px; height:64px; background:rgba(255,255,255,.12); border-color:transparent; }
.cursor.is-hidden{ opacity:0; }
@media (hover:none),(max-width:860px){ .cursor,.cursor-dot{ display:none; } }

/* =========================================================
   LOADER
   ========================================================= */
.loader{
  position:fixed; inset:0; z-index:10000; background:var(--navy);
  display:grid; place-items:center;
  transition:opacity .8s var(--ease), visibility .8s;
}
.loader.is-done{ opacity:0; visibility:hidden; }
.loader__inner{ text-align:center; }
.loader__mark{
  font-family:var(--serif); font-size:3rem; color:var(--paper);
  font-style:italic; display:block; letter-spacing:.04em;
}
.loader__bar{
  display:block; width:160px; height:2px; margin:1.4rem auto 0;
  background:rgba(255,255,255,.18); overflow:hidden; border-radius:2px;
}
.loader__bar i{
  display:block; height:100%; width:0%; background:var(--sun);
  transition:width .2s linear;
}

/* =========================================================
   PROGRESS BAR
   ========================================================= */
.progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg, var(--teal-2), var(--sun));
  z-index:1200; transition:width .1s linear;
}

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed; top:0; left:0; width:100%; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:clamp(16px,2.4vw,30px) var(--pad);
  transition:background .5s var(--ease), padding .5s var(--ease),
             box-shadow .5s var(--ease);
  mix-blend-mode:difference; color:#fff;
}
.nav.is-solid{
  mix-blend-mode:normal; background:rgba(247,242,234,.86);
  backdrop-filter:blur(14px); color:var(--ink);
  box-shadow:0 1px 0 var(--line);
  padding-top:clamp(12px,1.6vw,18px); padding-bottom:clamp(12px,1.6vw,18px);
}
.nav__brand{ display:flex; flex-direction:column; line-height:1.05; }
.nav__brand-mark{ font-family:var(--serif); font-size:1.35rem; letter-spacing:.01em; }
.nav__brand-sub{ font-size:.6rem; letter-spacing:.34em; text-transform:uppercase; opacity:.7; margin-top:3px; }
.nav__links{ display:flex; gap:2.4rem; }
.nav__links a{
  font-size:.82rem; font-weight:500; letter-spacing:.04em; position:relative;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-6px; height:1px; width:0;
  background:currentColor; transition:width .4s var(--ease);
}
.nav__links a:hover::after{ width:100%; }
.nav__cta{
  border:1px solid currentColor; padding:.7em 1.5em; border-radius:100px;
  font-size:.8rem; font-weight:600; letter-spacing:.03em;
  overflow:hidden; position:relative;
}
.nav__cta span{ position:relative; z-index:1; transition:color .4s var(--ease); }
.nav__cta::before{
  content:""; position:absolute; inset:0; background:var(--sun);
  transform:translateY(101%); transition:transform .45s var(--ease);
}
.nav__cta:hover::before{ transform:translateY(0); }
.nav__cta:hover span{ color:var(--navy); }
.nav__burger{ display:none; flex-direction:column; gap:6px; background:none; border:0; cursor:pointer; padding:6px; }
.nav__burger i{ width:26px; height:2px; background:currentColor; transition:transform .4s var(--ease), opacity .3s; }
.nav.is-open .nav__burger i:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.nav.is-open .nav__burger i:nth-child(2){ transform:translateY(-8px) rotate(-45deg); }

@media (max-width:860px){
  .nav__links, .nav__cta{ display:none; }
  .nav__burger{ display:flex; }
}

/* Mobile menu */
.menu{
  position:fixed; inset:0; z-index:999; background:var(--navy);
  display:flex; flex-direction:column; justify-content:center; gap:.3rem;
  padding:var(--pad);
  clip-path:circle(0% at 100% 0); transition:clip-path .7s var(--ease);
  pointer-events:none;
}
.menu.is-open{ clip-path:circle(150% at 100% 0); pointer-events:auto; }
.menu a{ font-family:var(--serif); font-size:clamp(2rem,9vw,3.5rem); color:var(--paper); line-height:1.2; opacity:.92; }
.menu a:hover{ color:var(--sun); padding-left:.3em; transition:padding .4s var(--ease), color .3s; }
.menu__foot{ margin-top:2.5rem; display:flex; flex-direction:column; gap:.4rem; color:var(--seaglass); font-size:.9rem; letter-spacing:.05em; }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative; height:100svh; min-height:640px;
  overflow:hidden; background:var(--navy);
  display:flex; align-items:center;
}
.hero__canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.hero__grain{
  position:absolute; inset:0; pointer-events:none; opacity:.06; z-index:3;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero__layers{ position:absolute; inset:0; z-index:1; }
.hero__sun{
  position:absolute; left:50%; top:34%; width:min(46vw,520px); aspect-ratio:1;
  translate:-50% -50%;
  background:radial-gradient(circle, rgba(255,228,196,.95) 0%, rgba(230,163,107,.55) 36%, rgba(230,163,107,0) 68%);
  filter:blur(2px);
}
.hero__content{
  position:relative; z-index:4; width:100%; max-width:var(--maxw);
  margin:0 auto; padding:0 var(--pad); color:#fff;
}
.hero__eyebrow{
  font-size:.74rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--seaglass-2); font-weight:600; margin-bottom:1.6rem;
}
.hero__title{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(3rem, 11vw, 9.5rem);
  line-height:.92; letter-spacing:-.02em;
}
.hero__title .line{ display:block; overflow:hidden; }
.hero__title .line > span{ display:block; }
.hero__title .line:last-child > span{ font-style:italic; color:var(--seaglass-2); }
.hero__lead{
  max-width:30ch; margin:2rem 0 2.6rem; font-size:clamp(1rem,1.5vw,1.2rem);
  color:rgba(255,255,255,.82); font-weight:300; line-height:1.7;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:1rem; }

.hero__waves{ position:absolute; left:0; bottom:-2px; width:100%; z-index:2; pointer-events:none; }
.hero__waves .wave{ position:absolute; bottom:0; left:0; width:100%; height:clamp(120px,22vh,240px); }
.wave--3 path{ fill:rgba(13,42,58,.45); }
.wave--2 path{ fill:rgba(10,31,46,.7); }
.wave--1 path{ fill:var(--navy); }

.hero__scroll{
  position:absolute; left:50%; bottom:28px; translate:-50% 0; z-index:5;
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  color:rgba(255,255,255,.7); font-size:.66rem; letter-spacing:.3em; text-transform:uppercase;
}
.hero__scroll i{ width:1px; height:46px; background:rgba(255,255,255,.4); position:relative; overflow:hidden; }
.hero__scroll i::after{ content:""; position:absolute; top:-50%; left:0; width:100%; height:50%; background:var(--sun); animation:scrolldrop 1.8s var(--ease) infinite; }
@keyframes scrolldrop{ 0%{ top:-50%; } 60%,100%{ top:100%; } }

/* =========================================================
   MARQUEE
   ========================================================= */
.marquee{
  background:var(--navy); color:var(--seaglass-2); overflow:hidden;
  padding:1.4rem 0; border-bottom:1px solid rgba(255,255,255,.06);
}
.marquee__track{
  display:flex; align-items:center; gap:2.5rem; width:max-content;
  font-family:var(--serif); font-style:italic; font-size:clamp(1.4rem,3vw,2.4rem);
  white-space:nowrap; will-change:transform;
}
.marquee__track i{ color:var(--sun); font-style:normal; font-size:.6em; }

/* =========================================================
   STATEMENT
   ========================================================= */
.statement{
  background:var(--navy); color:var(--paper); position:relative; overflow:hidden;
  padding:clamp(80px,16vh,200px) var(--pad);
}
.statement::before, .quote::before{
  content:""; position:absolute; inset:-30% -10%; z-index:0; pointer-events:none;
  background:
    radial-gradient(40% 50% at 20% 30%, rgba(45,110,126,.5), transparent 60%),
    radial-gradient(45% 55% at 80% 70%, rgba(230,163,107,.22), transparent 60%);
  filter:blur(20px); animation:drift 22s ease-in-out infinite alternate;
}
@keyframes drift{
  0%{ transform:translate3d(-4%,-2%,0) scale(1); }
  100%{ transform:translate3d(5%,3%,0) scale(1.12); }
}
.statement__inner{ position:relative; z-index:1; max-width:1100px; margin:0 auto; }
.statement__text{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.7rem, 4.4vw, 3.6rem);
  line-height:1.28; letter-spacing:-.01em;
}
.statement__text .word{ display:inline-block; opacity:.16; transition:opacity .5s var(--ease); }
.statement__text .word.is-lit{ opacity:1; }

/* =========================================================
   ABOUT
   ========================================================= */
.about{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(80px,12vw,160px) var(--pad);
  display:grid; grid-template-columns:0.85fr 1fr; gap:clamp(40px,7vw,110px);
  align-items:center;
}
.about__media{ position:relative; max-width:420px; margin-inline:auto; }
.about__photo{
  position:relative; margin:0; background:var(--paper);
  padding:18px 18px 0; border-radius:3px;
  box-shadow:0 1px 0 rgba(12,20,24,.05), 0 40px 80px -44px rgba(10,31,46,.55);
  border:1px solid rgba(12,20,24,.06);
}
.about__photo img{
  width:100%; aspect-ratio:125/142; object-fit:cover; display:block;
  filter:grayscale(1) contrast(1.04) brightness(1.02);
  image-rendering:auto;
}
.about__photo figcaption{
  font-family:var(--serif); font-style:italic; font-size:.92rem;
  color:#4a585e; text-align:center; padding:14px 0 16px; letter-spacing:.01em;
}
.about__badge{
  position:absolute; right:-24px; bottom:70px;
  background:var(--sun); color:var(--navy); border-radius:6px;
  padding:1.1rem 1.4rem; display:flex; align-items:center; gap:.8rem;
  box-shadow:0 20px 40px -16px rgba(217,130,79,.6);
}
.about__badge strong{ font-family:var(--serif); font-size:2.8rem; line-height:1; }
.about__badge span{ font-size:.72rem; line-height:1.4; font-weight:600; }
.about__cols{ display:grid; gap:1.2rem; margin-bottom:2.5rem; max-width:54ch; color:#3a474d; }
.about__cols p{ font-size:1.02rem; }

.stats{ display:flex; flex-wrap:wrap; gap:clamp(24px,4vw,56px); padding-top:2rem; border-top:1px solid var(--line); }
.stat{ display:flex; flex-direction:column; }
.stat__num{ font-family:var(--serif); font-size:clamp(2.2rem,4vw,3.2rem); color:var(--teal-2); line-height:1; }
.stat__label{ font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:#67767c; margin-top:.5rem; }

@media (max-width:860px){
  .about{ grid-template-columns:1fr; }
  .about__media{ max-width:380px; }
  .about__badge{ right:0; }
}

/* =========================================================
   FEATURED LISTING
   ========================================================= */
.featured{
  background:var(--navy); color:var(--paper); position:relative;
  padding:clamp(70px,11vw,150px) var(--pad);
  overflow:hidden;
}
.featured::before{
  content:""; position:absolute; left:0; right:0; top:0; height:240px;
  background:radial-gradient(120% 100% at 70% 0, rgba(45,110,126,.5), transparent 70%);
  pointer-events:none;
}
.featured__inner{
  position:relative; max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(30px,5vw,72px);
  align-items:center;
}
.featured__frame{
  position:relative; aspect-ratio:4/3; border-radius:10px; overflow:hidden;
  box-shadow:0 50px 90px -50px rgba(0,0,0,.8); background:#06141d;
}
.featured__img{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transform:scale(1.08); transition:opacity 1s var(--ease), transform 6s linear;
}
.featured__img.is-active{ opacity:1; transform:scale(1); }
.featured__frame::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(6,20,29,.55), transparent 40%);
}
.featured__tag{
  position:absolute; top:18px; left:18px; z-index:2;
  background:var(--sun); color:var(--navy); font-size:.66rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; padding:.55em 1em; border-radius:100px;
}
.featured__count{
  position:absolute; right:18px; bottom:16px; z-index:2;
  font-family:var(--serif); font-size:1.05rem; color:#fff;
  display:flex; gap:.35rem; align-items:center; text-shadow:0 2px 10px rgba(0,0,0,.5);
}
.featured__count i{ opacity:.5; }
.featured__count span:last-child{ opacity:.6; }
.featured__thumbs{ display:flex; gap:10px; margin-top:14px; }
.featured__thumb{
  flex:1; height:64px; border:0; border-radius:6px; cursor:pointer; padding:0;
  background-size:cover; background-position:center; position:relative;
  opacity:.5; transition:opacity .4s var(--ease), transform .4s var(--ease);
  outline:2px solid transparent; outline-offset:2px;
}
.featured__thumb:hover{ opacity:.85; transform:translateY(-3px); }
.featured__thumb.is-active{ opacity:1; outline-color:var(--sun); }

.featured__addr{
  font-family:var(--serif); font-weight:400; line-height:1.02;
  font-size:clamp(2rem,4vw,3.4rem); margin:.6rem 0 0; color:#fff;
}
.featured__addr span{
  display:block; font-family:var(--sans); font-style:normal; font-weight:400;
  font-size:.9rem; letter-spacing:.04em; color:var(--seaglass-2); margin-top:.7rem;
}
.featured__desc{ color:rgba(255,255,255,.78); margin:1.4rem 0 1.8rem; max-width:44ch; font-weight:300; line-height:1.7; }
.featured__specs{ display:flex; flex-wrap:wrap; gap:clamp(18px,3vw,40px); padding:1.4rem 0; margin-bottom:1.8rem; border-top:1px solid rgba(255,255,255,.14); border-bottom:1px solid rgba(255,255,255,.14); }
.spec{ display:flex; flex-direction:column; }
.spec strong{ font-family:var(--serif); font-weight:400; font-size:clamp(1.6rem,2.6vw,2.2rem); color:var(--sun); line-height:1; }
.spec span{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.6); margin-top:.5rem; }

@media (max-width:860px){
  .featured__inner{ grid-template-columns:1fr; }
}

/* =========================================================
   COAST / AREAS
   ========================================================= */
.coast{ max-width:var(--maxw); margin:0 auto; padding:clamp(40px,6vw,90px) var(--pad) clamp(80px,12vw,160px); }
.coast__head{ margin-bottom:clamp(30px,5vw,60px); max-width:680px; }
.coast__grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  grid-auto-rows:minmax(220px,30vh); gap:clamp(12px,1.5vw,22px);
}
.place{
  position:relative; border-radius:8px; overflow:hidden; cursor:pointer;
  background:var(--navy); isolation:isolate;
}
.place--lg{ grid-row:span 2; grid-column:span 1; }
.place--wide{ grid-column:span 2; }
.place__img{
  position:absolute; inset:-12% 0; background-image:var(--img);
  background-size:cover; background-position:center; will-change:transform;
  transition:transform 1.1s var(--ease), filter .6s var(--ease);
  filter:saturate(.9) brightness(.78);
}
.place::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(8,22,32,.85) 0%, rgba(8,22,32,.1) 55%, rgba(8,22,32,.25) 100%);
  z-index:1;
}
.place:hover .place__img{ transform:scale(1.06); filter:saturate(1.05) brightness(.9); }
.place__meta{ position:absolute; inset:auto 0 0 0; z-index:2; padding:clamp(18px,2vw,30px); color:#fff; }
.place__index{ font-family:var(--serif); font-style:italic; font-size:.95rem; color:var(--sun); opacity:.95; }
.place__meta h3{ font-family:var(--serif); font-weight:400; font-size:clamp(1.5rem,2.6vw,2.4rem); line-height:1.05; margin:.2rem 0 .4rem; }
.place__meta p{ font-size:.9rem; color:rgba(255,255,255,.78); max-width:36ch; opacity:0; transform:translateY(8px); transition:opacity .5s var(--ease), transform .5s var(--ease); }
.place:hover .place__meta p{ opacity:1; transform:none; }

@media (max-width:860px){
  .coast__grid{ grid-template-columns:1fr 1fr; grid-auto-rows:minmax(180px,26vh); }
  .place--lg{ grid-row:span 1; }
  .place--wide{ grid-column:span 2; }
  .place__meta p{ opacity:1; transform:none; }
}
@media (max-width:540px){
  .coast__grid{ grid-template-columns:1fr; }
  .place--wide{ grid-column:span 1; }
}

/* =========================================================
   THE RANGE (interactive coastline map)
   ========================================================= */
.range{
  background:var(--navy); color:var(--paper); position:relative; overflow:hidden;
  display:grid; grid-template-columns:1fr .9fr; gap:clamp(30px,5vw,80px);
  align-items:center; padding:clamp(70px,11vw,150px) var(--pad);
}
.range::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(50% 60% at 80% 50%, rgba(45,110,126,.35), transparent 70%);
}
.range__text{ position:relative; z-index:1; }
.range__title{ font-family:var(--serif); font-weight:300; font-size:clamp(2rem,4.4vw,3.6rem); line-height:1.02; color:#fff; margin:.6rem 0 1.4rem; }
.range__lead{ color:rgba(255,255,255,.78); max-width:40ch; font-weight:300; line-height:1.7; }
.range__legend{ margin-top:1.8rem; font-size:.82rem; letter-spacing:.04em; color:var(--seaglass-2); display:flex; align-items:center; gap:.6rem; }
.range__legend-home{ width:12px; height:12px; border-radius:50%; background:var(--sun); box-shadow:0 0 0 4px rgba(230,163,107,.25); }

.range__map{ position:relative; width:100%; max-width:520px; margin-inline:auto; aspect-ratio:1/1.25; }
.range__coast{ position:absolute; inset:0; width:100%; height:100%; }
.range__land{ fill:rgba(45,110,126,.12); }
.range__line{
  fill:none; stroke:var(--seaglass); stroke-width:2.5; stroke-linecap:round;
  stroke-dasharray:2600; stroke-dashoffset:2600;
  transition:stroke-dashoffset 2.4s var(--ease);
}
.range__map.is-drawn .range__line{ stroke-dashoffset:0; }

.pin{
  position:absolute; transform:translate(-50%,-50%); background:none; border:0;
  cursor:pointer; padding:0; z-index:2; opacity:0; scale:.4;
  transition:opacity .5s var(--ease), scale .5s var(--ease);
}
.range__map.is-drawn .pin{ opacity:1; scale:1; }
.pin i{
  display:block; width:13px; height:13px; border-radius:50%;
  background:var(--seaglass-2); border:2px solid var(--navy);
  box-shadow:0 0 0 0 rgba(156,196,186,.5); transition:transform .35s var(--ease), background .35s;
}
.pin span{
  position:absolute; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%) translateY(6px);
  white-space:nowrap; background:var(--paper); color:var(--navy);
  font-size:.72rem; font-weight:600; letter-spacing:.04em; padding:.4em .8em; border-radius:6px;
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.pin span::after{ content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:5px solid transparent; border-top-color:var(--paper); }
.pin:hover{ z-index:5; }
.pin:hover i{ transform:scale(1.5); background:#fff; }
.pin:hover span, .pin.is-shown span{ opacity:1; transform:translateX(-50%) translateY(0); }
.pin--home i{
  width:18px; height:18px; background:var(--sun);
  animation:pinPulse 2.4s ease-out infinite;
}
.pin--home span{ background:var(--sun); }
.pin--home span::after{ border-top-color:var(--sun); }
@keyframes pinPulse{
  0%{ box-shadow:0 0 0 0 rgba(230,163,107,.55); }
  70%{ box-shadow:0 0 0 18px rgba(230,163,107,0); }
  100%{ box-shadow:0 0 0 0 rgba(230,163,107,0); }
}
@media (max-width:860px){
  .range{ grid-template-columns:1fr; }
  .range__map{ max-width:380px; }
}

/* =========================================================
   WORK (sticky rail + panels)
   ========================================================= */
.work{
  background:var(--paper-2); position:relative;
  display:grid; grid-template-columns:0.9fr 1.1fr;
  gap:clamp(20px,4vw,60px); padding:0 var(--pad);
  border-top:1px solid var(--line);
}
.work__rail{ }
.work__sticky{
  position:sticky; top:0; height:100svh; display:flex; flex-direction:column;
  justify-content:center; padding:clamp(60px,10vh,120px) 0;
}
.work__sticky .h2{ margin-top:.6rem; }
.work__note{ max-width:34ch; color:#56646a; font-size:1.02rem; margin-bottom:2rem; }
.work__count{ font-family:var(--serif); font-size:1.4rem; color:var(--teal-2); display:flex; align-items:center; gap:.4rem; }
.work__count i{ opacity:.4; }
.work__count span:last-child{ opacity:.4; }

.work__panels{ padding:clamp(60px,12vh,160px) 0; display:flex; flex-direction:column; gap:clamp(40px,8vh,90px); }
.panel{
  background:var(--paper); border:1px solid var(--line); border-radius:12px;
  padding:clamp(28px,4vw,52px); box-shadow:0 30px 60px -50px rgba(10,31,46,.5);
  position:relative; overflow:hidden;
}
.panel::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(var(--teal-2), var(--sun)); transform:scaleY(0); transform-origin:top;
  transition:transform .8s var(--ease);
}
.panel.is-in::before{ transform:scaleY(1); }
.panel__num{ font-family:var(--serif); font-style:italic; font-size:1.1rem; color:var(--sun); }
.panel h3{ font-family:var(--serif); font-weight:400; font-size:clamp(1.8rem,3.4vw,2.8rem); color:var(--navy); margin:.3rem 0 1rem; }
.panel p{ color:#46545a; max-width:46ch; margin-bottom:1.4rem; }
.panel ul{ list-style:none; display:grid; gap:.6rem; }
.panel li{ position:relative; padding-left:1.6em; color:#3a474d; font-size:.96rem; }
.panel li::before{ content:"✦"; position:absolute; left:0; color:var(--teal-2); font-size:.8em; top:.15em; }

@media (max-width:860px){
  .work{ grid-template-columns:1fr; }
  .work__sticky{ position:relative; height:auto; padding:clamp(60px,10vh,120px) 0 0; }
  .work__panels{ padding-top:clamp(30px,6vh,60px); }
}

/* =========================================================
   QUOTE
   ========================================================= */
.quote{
  background:var(--teal); color:var(--paper); position:relative; overflow:hidden;
  padding:clamp(80px,16vh,200px) var(--pad); text-align:center;
}
.quote__inner{ max-width:1000px; margin:0 auto; position:relative; z-index:1; }
.quote__mark{ font-family:var(--serif); font-size:8rem; line-height:.6; color:var(--sun); opacity:.6; }
.quote blockquote{
  font-family:var(--serif); font-weight:300; font-style:italic;
  font-size:clamp(1.6rem,4vw,3.2rem); line-height:1.3; letter-spacing:-.01em;
}
.quote blockquote .word{ display:inline-block; opacity:.2; transition:opacity .5s var(--ease); }
.quote blockquote .word.is-lit{ opacity:1; }
.quote cite{ display:block; margin-top:2rem; font-style:normal; font-family:var(--sans); font-size:.8rem; letter-spacing:.28em; text-transform:uppercase; color:var(--seaglass-2); }

/* =========================================================
   WORTH CTA
   ========================================================= */
.worth{
  position:relative; overflow:hidden; min-height:80svh;
  display:grid; place-items:center; text-align:center; color:#fff;
  padding:clamp(80px,14vh,160px) var(--pad);
}
.worth__bg{
  position:absolute; inset:-15% 0; z-index:0;
  background-image:linear-gradient(rgba(8,22,32,.62),rgba(8,22,32,.72)),url("https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=1900&q=80");
  background-size:cover; background-position:center; will-change:transform;
}
.worth__inner{ position:relative; z-index:1; max-width:760px; }
.worth__title{ font-family:var(--serif); font-weight:300; font-size:clamp(2.4rem,7vw,5.5rem); line-height:1; letter-spacing:-.02em; margin:1rem 0; }
.worth__lead{ font-size:clamp(1rem,1.6vw,1.25rem); color:rgba(255,255,255,.85); font-weight:300; max-width:46ch; margin:0 auto 2.4rem; }

/* =========================================================
   CONTACT
   ========================================================= */
.contact{ max-width:var(--maxw); margin:0 auto; padding:clamp(80px,12vw,160px) var(--pad); }
.contact__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,7vw,100px); align-items:start; }
.contact__lead p{ color:#46545a; max-width:42ch; }
.contact__details{ margin-top:2.5rem; display:flex; flex-direction:column; gap:1rem; }
.contact__detail{ display:flex; flex-direction:column; gap:.2rem; padding:1rem 0; border-top:1px solid var(--line); }
.contact__detail span{ font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:#829096; }
.contact__detail strong{ font-family:var(--serif); font-weight:400; font-size:1.5rem; color:var(--navy); }
a.contact__detail:hover strong{ color:var(--teal-2); }

/* Form */
.form{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem 1.2rem; }
.field{ position:relative; }
.field--full{ grid-column:1 / -1; }
.field input, .field select, .field textarea{
  width:100%; background:transparent; border:0; border-bottom:1px solid var(--line);
  padding:1.1rem 0 .6rem; font-family:var(--sans); font-size:1rem; color:var(--ink);
  transition:border-color .4s var(--ease);
}
.field textarea{ resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--teal-2); }
.field label{
  position:absolute; left:0; top:1.1rem; color:#8b979c; pointer-events:none;
  transition:transform .35s var(--ease), font-size .35s var(--ease), color .35s var(--ease);
}
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label{
  transform:translateY(-1.4rem); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--teal-2);
}
.field--select{ display:flex; flex-direction:column; }
.field .label--static{ position:static; transform:none; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:#8b979c; margin-bottom:.1rem; display:block; }
.field select{ appearance:none; cursor:pointer; padding-top:.4rem; }
.form__note{ grid-column:1/-1; font-size:.85rem; color:#82909c; text-align:center; }
.form__note a{ color:var(--teal-2); border-bottom:1px solid currentColor; }
.form.is-sent{ position:relative; }

@media (max-width:860px){
  .contact__grid{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  .form{ grid-template-columns:1fr; }
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  padding:1.05em 2.1em; border-radius:100px; font-weight:600; font-size:.86rem;
  letter-spacing:.03em; overflow:hidden; cursor:pointer; border:1px solid transparent;
  -webkit-tap-highlight-color:transparent;
}
.btn span{ position:relative; z-index:1; transition:color .45s var(--ease), transform .45s var(--ease); }
.btn--lg{ padding:1.2em 2.6em; font-size:.95rem; }
.btn--full{ width:100%; }
.btn--solid{ background:var(--sun); color:var(--navy); }
.btn--solid::before{ content:""; position:absolute; inset:0; background:var(--navy); transform:translateY(101%); transition:transform .5s var(--ease); }
.btn--solid:hover span{ color:var(--paper); }
.btn--solid:hover::before{ transform:translateY(0); }
.btn--ghost{ border-color:rgba(255,255,255,.45); color:#fff; }
.btn--ghost::before{ content:""; position:absolute; inset:0; background:#fff; transform:translateY(101%); transition:transform .5s var(--ease); }
.btn--ghost:hover span{ color:var(--navy); }
.btn--ghost:hover::before{ transform:translateY(0); }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ background:var(--navy); color:var(--seaglass-2); padding:clamp(50px,8vw,90px) var(--pad) 2rem; }
.footer__top{ max-width:var(--maxw); margin:0 auto; display:flex; flex-wrap:wrap; justify-content:space-between; gap:2rem; padding-bottom:3rem; border-bottom:1px solid rgba(255,255,255,.1); }
.footer__mark{ font-family:var(--serif); font-size:1.8rem; color:var(--paper); }
.footer__brand p{ margin-top:.6rem; max-width:34ch; font-size:.92rem; color:rgba(255,255,255,.6); }
.footer__nav{ display:flex; flex-wrap:wrap; gap:1.4rem; align-items:flex-start; }
.footer__nav a{ font-size:.86rem; opacity:.8; }
.footer__nav a:hover{ color:var(--sun); opacity:1; }
.footer__bottom{ max-width:var(--maxw); margin:0 auto; padding-top:1.6rem; display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem; font-size:.74rem; letter-spacing:.04em; color:rgba(255,255,255,.45); }

/* =========================================================
   REVEAL ANIMATIONS
   ========================================================= */
[data-reveal]{ opacity:0; transform:translateY(30px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
[data-reveal].is-in{ opacity:1; transform:none; }

[data-reveal-line] > span{ transform:translateY(110%); transition:transform 1.1s var(--ease); display:block; }
[data-reveal-line].is-in > span{ transform:none; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  [data-reveal], [data-reveal-line] > span{ opacity:1 !important; transform:none !important; }
}