/* Single-theme by choice: this is a faithful clone of a light-only site, so every
   colour is stated outright and nothing is left to the viewer's theme. */
:root{
  --paper:#F5F5F5; --ink:#000000; --gold:#CC9933; --dark:#0B0B0B; --dim:#D9D9D9;
  --rule:#D5D5D2; --muted:#4A4A48;
  --display:"Instrument Serif",Didot,"Times New Roman",serif;
  --body:"Newsreader",Georgia,"Times New Roman",serif;
  color-scheme:light;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:20px;line-height:1.5;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;line-height:1.02;
  letter-spacing:-.02em;text-wrap:balance}
p{margin:0 0 1.2em}p:last-child{margin-bottom:0}

.wrap{width:100%;max-width:1290px;margin-inline:auto;
  padding-left:max(20px,env(safe-area-inset-left,0px));
  padding-right:max(20px,env(safe-area-inset-right,0px))}
.pad{padding-block:clamp(60px,9vw,118px)}

.eyebrow{font-family:var(--body);font-weight:400;color:var(--gold);
  font-size:clamp(17px,2.4vw,29px);line-height:1.2;margin:0 0 clamp(14px,2vw,22px);
  letter-spacing:.02em}

.btn{display:inline-block;background:var(--ink);color:#fff;text-decoration:none;
  font-family:var(--body);font-size:clamp(17px,1.7vw,20px);border-radius:10px;
  padding:14px 26px;border:1px solid var(--ink);line-height:1.3;transition:opacity .16s}
.btn:hover{opacity:.82}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff;opacity:1}
.btn-light{background:#fff;color:var(--ink);border-color:#fff}
.btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(24px,3vw,36px)}

/* ---------- nav ---------- */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:var(--paper);
  border-bottom:1px solid var(--rule)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);
  background:var(--paper);z-index:41}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding-block:15px;flex-wrap:wrap}
.brand{font-family:var(--display);font-size:clamp(22px,2.6vw,29px);text-decoration:none;
  letter-spacing:-.02em}
.nav-links{display:flex;gap:clamp(14px,2.2vw,30px);align-items:center;flex-wrap:wrap}
.nav-links a{text-decoration:none;font-size:clamp(15px,1.5vw,18px);color:var(--ink)}
.nav-links a:hover{color:var(--gold)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:clamp(480px,78vh,760px);display:flex;align-items:center;
  justify-content:center;text-align:center;overflow:hidden}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,10,12,.46) 0%,rgba(8,10,12,.22) 42%,rgba(8,10,12,.52) 100%)}
.hero-in{position:relative;padding-block:clamp(70px,11vw,120px)}
.hero .eyebrow{color:#E6B65C;text-shadow:0 1px 16px rgba(0,0,0,.6)}
.hero h1{font-size:clamp(52px,10.5vw,89px);color:#F5F5F5;margin-bottom:clamp(14px,2vw,22px);
  text-shadow:0 2px 28px rgba(0,0,0,.35)}
.hero .serving{color:#EDE9E2;font-size:clamp(17px,2.1vw,23px);margin:0 auto clamp(26px,3.4vw,38px);
  max-width:30ch}

/* ---------- tagline strip ---------- */
.strip{border-bottom:1px solid var(--rule);text-align:center}
.strip p{margin:0;padding-block:clamp(22px,3vw,34px);font-size:clamp(18px,2.2vw,24px);
  color:var(--ink)}

/* ---------- two-column blocks ---------- */
.two{display:grid;grid-template-columns:1fr;gap:clamp(30px,4.5vw,58px);align-items:start}
@media(min-width:880px){.two{grid-template-columns:1fr 1fr}
  .two.flip>.col-img{order:-1}}
.col-img img{width:100%;border-radius:4px}
.h-big{font-size:clamp(38px,6.4vw,66px);margin-bottom:clamp(18px,2.4vw,28px)}

/* quick facts */
.facts{margin:clamp(26px,3.4vw,38px) 0 0;padding-top:clamp(20px,2.6vw,28px);
  border-top:1px solid var(--rule)}
.facts h3{font-family:var(--body);font-size:20px;margin:0 0 14px;letter-spacing:0}
.facts dl{margin:0;display:grid;grid-template-columns:1fr;gap:0}
.facts div{display:grid;grid-template-columns:1fr;gap:2px;padding:11px 0;
  border-bottom:1px solid var(--rule)}
@media(min-width:620px){.facts div{grid-template-columns:168px 1fr;gap:18px}}
.facts dt{color:var(--gold);font-size:17px;line-height:1.45}
.facts dd{margin:0;font-size:18px;line-height:1.5;min-width:0}

/* ---------- dark bands ---------- */
.band{background:var(--dark);color:var(--dim)}
.band h2{color:#F5F5F5;text-align:center;font-size:clamp(36px,6vw,62px)}
.band .eyebrow{text-align:center}

.ig{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(8px,1.2vw,15px);
  margin-top:clamp(28px,4vw,46px)}
@media(min-width:620px){.ig{grid-template-columns:repeat(3,1fr)}}
.ig{max-width:980px;margin-inline:auto}
.ig a{background:#1a1a1a}
.ig-play{position:absolute;top:10px;right:12px;color:#fff;font-size:15px;text-shadow:0 1px 6px rgba(0,0,0,.6);pointer-events:none}
.ig a{display:block;position:relative;aspect-ratio:1;overflow:hidden;border-radius:3px}
.ig img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease,opacity .25s}
.ig a:hover img{transform:scale(1.05);opacity:.85}
.ig-foot{text-align:center;margin-top:clamp(26px,3.4vw,38px)}

.revs{display:grid;grid-template-columns:1fr;gap:clamp(26px,3.4vw,44px);
  margin-top:clamp(30px,4vw,48px)}
@media(min-width:820px){.revs{grid-template-columns:1fr 1fr}}
.rev{border-top:1px solid rgba(255,255,255,.2);padding-top:22px;min-width:0}
.rev .stars{color:var(--gold);letter-spacing:.14em;font-size:16px;margin:0 0 12px}
.rev p{font-family:var(--display);font-size:clamp(21px,2.5vw,27px);line-height:1.3;
  color:#F5F5F5;margin:0 0 16px;letter-spacing:-.012em}
.rev cite{font-style:normal;font-size:17px;color:var(--dim)}
.rev cite b{display:block;color:#fff;font-weight:500}

/* ---------- form ---------- */
.cf{display:grid;gap:2px}
.cf .row{display:grid;gap:6px;padding:9px 0}
.cf .row2{display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:560px){.cf .row2{grid-template-columns:1fr 1fr;gap:0 20px}}
.cf label{font-size:16px;color:var(--gold)}
.cf input,.cf select,.cf textarea{font-family:var(--body);font-size:19px;color:var(--ink);
  background:#fff;border:1px solid var(--rule);border-radius:6px;padding:12px 13px;
  min-height:50px;width:100%;min-width:0}
.cf textarea{min-height:104px;resize:vertical;line-height:1.5}
.cf input:focus,.cf select:focus,.cf textarea:focus{outline:none;border-color:var(--gold);
  box-shadow:0 0 0 1px var(--gold)}
.cf .send{margin-top:18px;justify-self:start;cursor:pointer}
.cf .note{margin:14px 0 0;font-size:17px;color:var(--muted);line-height:1.5;max-width:46ch}
.cf .note:empty{display:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--rule);padding-block:clamp(40px,6vw,66px) clamp(46px,7vw,76px)}
.foot-top{display:flex;gap:clamp(16px,3vw,40px);flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;margin-bottom:clamp(26px,3.4vw,40px)}
.foot-top h2{font-size:clamp(34px,5.4vw,56px)}
.foot-line{display:flex;gap:clamp(12px,2vw,26px);flex-wrap:wrap;font-size:18px;
  padding-top:22px;border-top:1px solid var(--rule)}
.foot-line a{text-decoration:none}.foot-line a:hover{color:var(--gold)}
.legal{margin-top:clamp(24px,3vw,36px);font-size:15px;line-height:1.6;color:var(--muted);
  max-width:92ch}
.legal p{margin:0 0 .7em}
/* ---------- sub-page banners and shared page furniture ---------- */
.hero-sm{min-height:clamp(320px,46vh,470px)}
.hero-sm h1{font-size:clamp(42px,8.4vw,74px)}
.nav-links a[aria-current="page"]{color:var(--gold)}

.lead{font-family:var(--display);font-size:clamp(28px,4.4vw,46px);line-height:1.08;
  letter-spacing:-.02em;margin:0 0 clamp(18px,2.4vw,28px)}

.h-sub{font-family:var(--body);font-size:17px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);margin:clamp(34px,4.4vw,52px) 0 14px;font-weight:400;line-height:1.4}

.narrow{max-width:900px}

.col-img .cap{margin:11px 0 0;font-size:17px;color:var(--muted);font-style:italic;line-height:1.45}
@media(min-width:880px){.col-img.sticky{position:sticky;top:96px}}

/* testimonials */
.tgrid{display:grid;grid-template-columns:1fr;gap:clamp(22px,3vw,34px)}
@media(min-width:820px){.tgrid{grid-template-columns:1fr 1fr}}
.tcard{margin:0;background:#fff;border:1px solid var(--rule);border-radius:6px;
  padding:clamp(22px,2.8vw,32px);min-width:0}
.tcard .stars{color:var(--gold);letter-spacing:.14em;font-size:16px;margin:0 0 14px}
.tcard blockquote{margin:0 0 18px}
.tcard blockquote p{font-size:19px;line-height:1.55;margin:0;color:var(--ink)}
.tcard figcaption{border-top:1px solid var(--rule);padding-top:14px;font-size:17px;color:var(--muted)}
.tcard figcaption b{display:block;color:var(--ink);font-weight:500;font-size:18px}

/* faq */
.qa{border-bottom:1px solid var(--rule)}
.qa summary{cursor:pointer;list-style:none;padding:clamp(18px,2.4vw,26px) 40px clamp(18px,2.4vw,26px) 0;
  font-family:var(--display);font-size:clamp(21px,2.9vw,30px);letter-spacing:-.015em;
  line-height:1.2;position:relative}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);
  color:var(--gold);font-size:28px;line-height:1;font-family:var(--body)}
.qa[open] summary::after{content:"\2212"}
.qa summary:hover{color:var(--gold)}
.qa-a{padding:0 0 clamp(20px,2.6vw,30px)}
.qa-a p{font-size:19px;line-height:1.6;margin:0 0 .9em}
.qa-a p:last-child{margin-bottom:0}

.tailnote{margin:clamp(28px,3.6vw,42px) 0 0;padding-top:22px;border-top:1px solid var(--rule);
  font-size:18px;line-height:1.6;color:var(--muted);max-width:66ch}
.tailnote a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--gold)}
.tailnote a:hover{color:var(--gold)}

/* team video */
.vid{position:relative;width:100%;max-width:700px;aspect-ratio:16/9;background:#0B0B0B;
  border:1px solid var(--rule);border-radius:4px;overflow:hidden}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vidlink{margin:0;max-width:470px}
.vidlink a{display:grid;grid-template-columns:auto 1fr;gap:3px 16px;align-items:center;
  text-decoration:none;border:1px solid var(--rule);border-radius:6px;padding:17px 21px;
  background:#fff;transition:border-color .16s}
.vidlink a:hover{border-color:var(--gold)}
.vidlink .play{grid-row:1 / span 2;color:var(--gold);font-size:21px;line-height:1}
.vidlink .vt{font-family:var(--display);font-size:21px;color:var(--ink);line-height:1.2;text-align:left}
.vidlink .vs{font-size:15px;color:var(--muted);text-align:left}

.facts dd a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--gold)}
.facts dd a:hover{color:var(--gold)}

.col-img img{height:auto}
.talk-img{aspect-ratio:5/4;object-fit:cover}

.talk-copy{font-size:clamp(19px,1.9vw,22px);line-height:1.6;max-width:34ch}
.talk-copy b{font-weight:600}

.center-block{text-align:center}
.center-block .h-big{margin-bottom:clamp(24px,3.4vw,40px)}
.vid-wrap{display:flex;justify-content:center}
.vid-wrap .vid,.vid-wrap .vidlink{margin-inline:auto}
.team-copy{max-width:58ch;margin:clamp(26px,3.4vw,40px) auto 0;font-size:clamp(19px,1.9vw,21px);line-height:1.6}
.plain-head{text-align:center;padding-block:clamp(56px,8vw,96px) clamp(30px,4vw,48px)}
.plain-head h1{font-size:clamp(46px,8vw,80px);margin-bottom:12px}
.plain-head .serving{color:var(--muted);font-size:clamp(17px,2vw,21px);margin:0}
.contact-line{font-size:18px;margin:0 0 clamp(18px,2.4vw,26px)}
.contact-line a{text-decoration:none;border-bottom:1px solid var(--gold)}
.contact-line a:hover{color:var(--gold)}

.legal-line{margin:clamp(22px,3vw,32px) 0 0;font-size:15px;line-height:1.6;color:var(--muted)}
.team-copy b{font-weight:600}

/* About banner: keep the palm crown in frame */
.hero img[src$="about-palm.jpg"]{object-position:72% 0%}
@media(max-width:700px){.hero img[src$="about-palm.jpg"]{object-position:86% 0%}}

/* Home hero: slow push-in on the photo. CSS only, so it runs without scripts. */
@keyframes heroDrift{
  from{transform:scale(1.08) translate3d(-1%,-.6%,0)}
  to{transform:scale(1) translate3d(0,0,0)}
}
.hero:not(.hero-sm)>img{transform-origin:60% 45%;will-change:transform;
  animation:heroDrift 30s ease-in-out infinite alternate;backface-visibility:hidden}
@media (prefers-reduced-motion: reduce){.hero:not(.hero-sm)>img{animation:none}}

/* About banner: Duke surfing. Desktop keeps him left of the name; on phones the
   text drops to the bottom so he stays visible above it. */
.hero img[src$="about-surf.jpg"]{object-position:50% 46%}
/* taller banner for the surf shot = more of the wave in frame */
.hero-sm:has(img[src$="about-surf.jpg"]){min-height:clamp(420px,48vw,640px)}
.hero img[src$="about-surf2.jpg"]{object-position:50% 60%}
@media(max-width:700px){
  .hero-sm:has(img[src*="about-surf"]){align-items:flex-end;min-height:420px}
  .hero-sm:has(img[src*="about-surf"]) .hero-in{padding-block:0 26px}
  .hero img[src$="about-surf2.jpg"]{object-position:0% 50%}
  /* this frame has Duke mid-height, so on phones the text goes to the top, over the sky */
  .hero-sm:has(img[src$="about-surf2.jpg"]){align-items:flex-start}
  .hero-sm:has(img[src$="about-surf2.jpg"]) .hero-in{padding-block:24px 0}
  .hero img[src$="about-surf.jpg"]{object-position:4% 38%}
}

/* proof line under the tagline */
.strip p{padding-bottom:8px}
.proof{display:inline-flex;align-items:center;gap:10px;margin-bottom:clamp(20px,2.8vw,30px);
  font-size:16px;letter-spacing:.04em;color:var(--muted);text-decoration:none}
.proof .stars{color:var(--gold);letter-spacing:.16em;font-size:15px}
.proof:hover{color:var(--ink)}

/* phone menu: CSS only, so it works anywhere */
.navt{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.navb{display:none;cursor:pointer;width:44px;height:44px;margin-right:-8px;
  flex-direction:column;justify-content:center;align-items:center;gap:6px}
.navb span{display:block;width:24px;height:2px;background:var(--ink);transition:transform .2s,opacity .2s}
@media(max-width:820px){
  .nav-in{flex-wrap:wrap;padding-block:10px}
  .navb{display:flex}
  .nav-links{display:none;width:100%;flex-direction:column;align-items:stretch;gap:0;padding:6px 0 8px}
  .navt:checked ~ .nav-links{display:flex}
  .nav-links a,.nav-links label{padding:13px 0;border-top:1px solid var(--rule);font-size:18px}
  .navt:checked + .navb span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .navt:checked + .navb span:nth-child(2){opacity:0}
  .navt:checked + .navb span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
}
.seg button[aria-selected="false"]{background:transparent!important;color:var(--ink)!important}

.pull{margin:22px 0 6px;padding:2px 0 2px 18px;border-left:2px solid var(--gold)}
.pull blockquote{margin:0;font-style:italic;font-size:17px;line-height:1.55;color:var(--muted)}
.pull figcaption{margin-top:8px;font-size:14px;color:var(--muted)}
.pull figcaption a{color:inherit;text-decoration:underline;text-underline-offset:3px}

.team-logo{display:block;width:min(440px,86%);height:auto;margin:6px auto clamp(26px,4vw,38px)}
.foot-logo{display:block;width:min(250px,70%);height:auto;margin:34px 0 12px;opacity:.9}