/* ═══════════════════════════════════════════════════════════════════════════
   Elevate with AI — inner pages, "Poolside Light"
   Loaded AFTER css/mix3.css. Everything the homepage already defines (nav,
   footer, buttons, rules, band-ink, guide, news, finale, cut-list, about-*,
   steps, stats) is inherited untouched. This file only carries the components
   that live on the inner pages, ported from the old dark sheet onto Paper.

   Ink is punctuation here, never the ground. Sections alternate
   Paper → Paper-lo → band-ink so the pages breathe instead of going flat.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Page hero ─────────────────────────────────────────────────────────────
   The homepage hero split, at inner-page scale: Paper on the left so the type
   sits on the ground rather than on a scrim, photograph full-bleed on the
   right. This is the change that lifts the pages out of the dark. */
.phero{
  display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  min-height:min(80svh,780px);align-items:stretch;background:var(--paper);
}
.phero-body{
  display:flex;flex-direction:column;justify-content:center;position:relative;
  padding:clamp(132px,14vw,168px) var(--gut) clamp(64px,7vw,96px)
          max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut)));
}
.phero-body .eyebrow{margin-bottom:clamp(20px,2.6vw,30px);}
.phero-body h1{max-width:12ch;margin:0 0 clamp(22px,2.6vw,32px);}
.phero-body .lede{max-width:44ch;margin:0;}
.phero-actions{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center;
  margin-top:clamp(30px,3.6vw,42px);}

.phero-media{position:relative;overflow:hidden;}
/* The nav floats over this edge, so the top of the photograph is washed back
   into Paper or the links land on busy pixels. */
.phero-media::after{content:'';position:absolute;inset:0 0 auto;height:170px;z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(246,243,239,.92),rgba(246,243,239,.5) 46%,rgba(246,243,239,0));}
.phero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:var(--pos,50% 50%);
  transform:scale(1.14);opacity:0;animation:pheroIn 2.2s var(--e-out) .12s forwards;}
@keyframes pheroIn{to{transform:scale(1.01);opacity:1;}}

/* Contact's phone shot is a white-ground still, not a scene. It gets a warm
   panel behind it and sits inside the column rather than bleeding off it. */
.phero.still .phero-media{background:var(--paper-lo);
  display:grid;place-items:center;padding:clamp(26px,3.2vw,56px);}
.phero.still .phero-media::after{display:none;}
/* The shot was cut out on white. Multiply drops that white into the warm
   ground, so the hand reads as placed on the page rather than pasted onto it.
   The grid track is definite, so 100%/100% + contain letterboxes rather than
   crops and the coiled cord stays in frame. */
.phero.still .phero-media img{position:static;width:100%;height:100%;
  min-width:0;min-height:0;object-fit:contain;
  transform:none;opacity:0;mix-blend-mode:multiply;
  animation:stillIn 1.2s var(--e-out) .2s forwards;}
@keyframes stillIn{to{opacity:1;}}

/* A caption chip, same treatment as the homepage's. */
.phero-cap{position:absolute;z-index:2;left:clamp(18px,2vw,30px);bottom:clamp(18px,2vw,30px);
  background:rgba(246,243,239,.9);backdrop-filter:blur(8px);color:var(--ink);
  font-family:var(--serif);font-size:10.5px;text-transform:uppercase;letter-spacing:.2em;
  padding:9px 16px;}

/* Same specificity clash as `.band`: spell the tonal grounds out as pairs. */
.phero.band-lo{background:var(--paper-lo);}
.phero.band-hi{background:var(--paper-hi);}

/* Legal and any page with no photograph: a plain Paper opener. */
.phero.plain{display:block;min-height:0;padding:clamp(150px,15vw,210px) 0 0;}
.phero.plain .phero-body{padding:0;max-width:var(--wrap);margin:0 auto;
  padding-inline:var(--gut);}

/* ─── Photo band ────────────────────────────────────────────────────────────
   Half photograph, half copy. On Paper by default; add .band-ink for the
   inverted cut, exactly as the homepage does it. */
.band{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;
  min-height:min(88vh,820px);background:var(--paper);}
.band-media{position:relative;overflow:hidden;}
.band-media img{position:absolute;inset:0;width:100%;height:116%;object-fit:cover;
  object-position:var(--pos,50% 50%);}
.band-body{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(56px,7vw,110px) clamp(24px,5vw,90px);}
.band.flip .band-media{order:2;}
/* The tonal variants have to beat `.band`'s own ground: same specificity, and
   this sheet loads last, so they are spelled out as pairs. */
.band.band-lo{background:var(--paper-lo);}
.band.band-hi{background:var(--paper-hi);}
/* `.band-ink` carries the homepage's section padding. A photo band is
   edge-to-edge, so it is taken back off (the Signal top rule stays). */
.band.band-ink{background:#17101A;padding-block:0;}
.band-tag{position:absolute;z-index:3;left:clamp(20px,2.4vw,36px);bottom:clamp(20px,2.4vw,36px);
  background:var(--signal);color:#fff;font-family:var(--serif);font-size:11px;
  text-transform:uppercase;letter-spacing:.18em;padding:10px 18px;}

/* ─── About: the pull quote ─────────────────────────────────────────────── */
.about-quote{font-size:clamp(22px,2.6vw,38px);font-weight:600;letter-spacing:-.032em;
  line-height:1.22;margin:0 0 30px;color:var(--ink);}
.about-quote em{font-style:normal;color:var(--signal-dk);}
.band-ink .about-quote{color:#F6F3EF;}
.band-ink .about-quote em{color:var(--signal-lt);}

/* `.cut` was the light island in a dark page. On a light page it is simply a
   section, so it keeps the ground and stops fighting the one above it. */
.cut{background:var(--paper-lo);}

/* ─── Numbered rules (About: "3 rules I don't break") ───────────────────── */
.step h3{font-size:clamp(23px,2.5vw,38px);letter-spacing:-.03em;font-weight:700;}

/* ─── Two-column section head ───────────────────────────────────────────── */
.plain-head{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);
  gap:clamp(30px,5vw,80px);align-items:end;margin-bottom:clamp(46px,6vw,84px);}
.plain-head h2{max-width:15ch;}
.plain-head .lede{font-size:clamp(16.5px,1.3vw,20px);}

/* ─── Services: at a glance ─────────────────────────────────────────────── */
.glance{border:1px solid var(--line);background:var(--paper-hi);}
.glance a{display:grid;grid-template-columns:56px minmax(0,1.1fr) minmax(0,1.4fr) auto;
  gap:clamp(14px,2vw,30px);align-items:center;
  padding:clamp(18px,2vw,26px) clamp(18px,2.2vw,30px);
  border-bottom:1px solid var(--line);transition:background .4s,padding-left .4s var(--e-out);}
.glance a:last-child{border-bottom:0;}
.glance a:hover{background:var(--paper-lo);padding-left:calc(clamp(18px,2.2vw,30px) + 8px);}
.glance .g-n{font-family:var(--serif);font-size:12px;letter-spacing:.18em;color:var(--signal-dk);}
.glance .g-t{font-size:clamp(18px,1.7vw,24px);font-weight:600;letter-spacing:-.022em;}
.glance .g-d{font-size:15px;color:var(--ink-55);line-height:1.6;}
.glance .g-p{font-size:15px;font-weight:600;white-space:nowrap;color:var(--signal-dk);}

/* ─── Services: one service ─────────────────────────────────────────────── */
.svc{border-top:1px solid var(--line);padding-block:clamp(64px,8vw,120px);}
.svc-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(34px,5vw,86px);}
.svc h2{font-family:var(--sans);font-weight:700;
  font-size:clamp(32px,4.4vw,64px);letter-spacing:-.038em;margin-bottom:20px;line-height:1.02;}
.ideal{font-family:var(--serif);font-size:13px;text-transform:uppercase;
  letter-spacing:.16em;color:var(--mute);display:block;margin-top:26px;}
.price-line{font-size:17px;font-weight:600;color:var(--signal-dk);}
.band-ink .price-line{color:var(--signal-lt);}

.incl{list-style:none;margin:0;padding:0;display:grid;gap:0;}
.incl li{font-size:16px;line-height:1.65;color:var(--ink-70);
  padding:16px 0 16px 30px;border-bottom:1px solid var(--line);position:relative;}
.incl li::before{content:'';position:absolute;left:0;top:1.42em;width:14px;height:2px;
  background:var(--signal);}
.incl li:first-child{border-top:1px solid var(--line);}
.incl strong{color:var(--ink);font-weight:600;}
.band-ink .incl strong{color:#F6F3EF;}

/* ─── Services: the three options ───────────────────────────────────────── */
.opts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,24px);
  margin-top:clamp(44px,5vw,70px);}
.opt{border:1px solid var(--line);background:var(--paper-hi);
  padding:clamp(24px,2.4vw,34px);display:flex;flex-direction:column;
  transition:transform .6s var(--e-out),border-color .45s,box-shadow .45s;}
.opt:hover{border-color:rgba(222,8,102,.45);transform:translateY(-6px);
  box-shadow:0 26px 50px -32px rgba(60,20,60,.4);}
.opt .o-n{font-family:var(--serif);font-size:11px;text-transform:uppercase;
  letter-spacing:.2em;color:var(--mute);display:block;margin-bottom:16px;}
.opt h3{font-family:var(--sans);font-weight:700;
  font-size:clamp(20px,1.75vw,26px);letter-spacing:-.024em;margin-bottom:8px;}
.opt .o-p{font-size:15px;font-weight:600;color:var(--signal-dk);margin:0 0 18px;}
.opt ul{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:10px;}
.opt li{font-size:14.5px;line-height:1.6;color:var(--ink-70);padding-left:20px;position:relative;}
.opt li::before{content:'';position:absolute;left:0;top:.62em;width:10px;height:2px;
  background:var(--signal);}
.opt .o-for{margin-top:auto;padding-top:18px;border-top:1px solid var(--line);
  font-family:var(--serif);font-size:12.5px;text-transform:uppercase;
  letter-spacing:.14em;color:var(--mute);margin-bottom:0;}

/* ─── Tag pills ─────────────────────────────────────────────────────────── */
.tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;}
.tags span{border:1px solid var(--line);padding:11px 20px;border-radius:100px;
  font-size:14px;color:var(--ink-70);transition:border-color .35s,color .35s,transform .45s var(--e-out);}
.tags span:hover{border-color:var(--signal);color:var(--ink);transform:translateY(-3px);}
.band-ink .tags span{border-color:rgba(246,243,239,.24);color:rgba(246,243,239,.78);}
.band-ink .tags span:hover{border-color:var(--signal);color:#F6F3EF;}

/* ─── FAQ ───────────────────────────────────────────────────────────────── */
.faq{border-top:1px solid var(--line);}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{list-style:none;cursor:pointer;
  padding:clamp(22px,2.4vw,30px) 56px clamp(22px,2.4vw,30px) 0;position:relative;
  font-size:clamp(17px,1.5vw,22px);font-weight:600;letter-spacing:-.022em;
  transition:color .3s;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary:hover{color:var(--signal-dk);}
.faq summary::after,.faq summary::before{content:'';position:absolute;right:8px;top:50%;
  background:var(--signal);transition:transform .45s var(--e-out);}
.faq summary::after{width:18px;height:2px;margin-top:-1px;}
.faq summary::before{width:2px;height:18px;margin-top:-9px;margin-right:8px;}
.faq details[open] summary::before{transform:rotate(90deg) scaleX(0);}
.faq .ans{padding:0 clamp(40px,8vw,140px) clamp(24px,2.6vw,34px) 0;
  margin:0;color:var(--ink-70);line-height:1.85;font-size:16.5px;
  animation:faqIn .5s var(--e-out);}
@keyframes faqIn{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:none;}}

/* ─── Contact form ──────────────────────────────────────────────────────── */
.cform{display:grid;gap:18px;}
.cform .row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.cform label{font-family:var(--serif);font-size:11px;text-transform:uppercase;
  letter-spacing:.16em;color:var(--mute);display:block;margin-bottom:9px;}
.cform input,.cform textarea,.cform select{width:100%;background:var(--paper);
  border:1px solid var(--line);color:var(--ink);
  font-family:var(--sans);font-size:16px;padding:15px 17px;border-radius:4px;
  transition:border-color .3s,background .3s;}
.cform textarea{min-height:150px;resize:vertical;}
.cform input::placeholder,.cform textarea::placeholder{color:var(--mute);}
.cform input:focus,.cform textarea:focus,.cform select:focus{
  outline:none;border-color:var(--signal);background:var(--paper-hi);}
.cform select option{background:var(--paper);color:var(--ink);}
.cform button{justify-self:start;}

/* The card the form sits in. */
.panel{border:1px solid var(--line);background:var(--paper-hi);border-radius:6px;
  padding:clamp(28px,3.4vw,48px);}
/* Over a photograph the panel needs to be opaque enough to carry small print. */
.finale .panel{background:rgba(252,250,248,.94);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-color:rgba(23,16,26,.1);
  box-shadow:0 26px 60px -34px rgba(60,20,60,.45);}

/* ─── Long-form legal copy ──────────────────────────────────────────────── */
.prose{max-width:70ch;}
.prose h2{font-family:var(--sans);font-weight:700;
  font-size:clamp(24px,2.4vw,34px);letter-spacing:-.028em;line-height:1.15;
  margin:clamp(44px,5vw,64px) 0 16px;}
.prose h3{font-family:var(--sans);font-weight:600;
  font-size:clamp(19px,1.7vw,23px);letter-spacing:-.02em;margin:34px 0 12px;}
.prose p,.prose li{color:var(--ink-70);line-height:1.85;font-size:16.5px;}
.prose p{margin:0 0 18px;}
.prose ul,.prose ol{margin:0 0 20px;padding-left:22px;}
.prose li{margin-bottom:10px;}
.prose a{color:var(--signal-dk);text-decoration:underline;text-underline-offset:3px;}
.prose strong{color:var(--ink);font-weight:600;}
.prose hr{border:0;border-top:1px solid var(--line);margin:clamp(40px,5vw,64px) 0;}
.prose table{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:15.5px;}
.prose th,.prose td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--line);
  vertical-align:top;color:var(--ink-70);}
.prose th{font-family:var(--serif);font-size:12px;text-transform:uppercase;
  letter-spacing:.14em;color:var(--ink);font-weight:500;}
.prose .updated{font-family:var(--serif);font-size:12px;text-transform:uppercase;
  letter-spacing:.16em;color:var(--mute);margin-bottom:34px;}

/* ─── Blog index ────────────────────────────────────────────────────────── */
.posts{display:grid;gap:1px;background:var(--line);
  border-block:1px solid var(--line);}
.post{background:var(--paper);display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(20px,4vw,60px);padding:clamp(30px,3.6vw,52px) clamp(4px,1vw,10px);
  transition:background .45s;}
.post:hover{background:var(--paper-hi);}
.post .meta{font-family:var(--serif);font-size:12px;text-transform:uppercase;
  letter-spacing:.16em;color:var(--mute);margin:0;}
.post h2{font-family:var(--sans);font-weight:700;
  font-size:clamp(23px,2.4vw,36px);letter-spacing:-.03em;line-height:1.15;margin-bottom:14px;}
.post p{color:var(--ink-70);line-height:1.75;margin:0 0 24px;font-size:16px;}

/* Nothing published yet in a section: say so, don't leave a hole. */
.post-none{border-block:1px solid var(--line);padding:clamp(40px,5vw,72px) 0;
  color:var(--mute);}

/* ─── Lead-magnet forms (the Claude guide) ──────────────────────────────── */
.lm-form{display:grid;gap:12px;}
.lm-form input{width:100%;background:var(--paper);border:1px solid var(--line);
  color:var(--ink);font-family:var(--sans);font-size:16px;padding:15px 17px;border-radius:4px;
  transition:border-color .3s,background .3s;}
.lm-form input:focus{outline:none;border-color:var(--signal);background:var(--paper-hi);}
.lm-form input::placeholder{color:var(--mute);}
.lm-form button{justify-content:center;}
.lm-hp{position:absolute;left:-9999px;}
.lm-success{display:none;}
.lm-success.show{display:block;animation:faqIn .5s var(--e-out);}
.lm-error{display:none;color:var(--signal-dk);font-size:14.5px;margin-top:12px;}
.lm-error.show{display:block;}
.lm-note{font-size:13px;color:var(--mute);line-height:1.7;margin-top:14px;}
.lm-note a{text-decoration:underline;text-underline-offset:3px;}

/* On the Ink finale the same form has to flip. */
.band-ink .lm-form input{background:rgba(246,243,239,.06);border-color:rgba(246,243,239,.26);
  color:#F6F3EF;}
.band-ink .lm-form input:focus{border-color:var(--signal);background:rgba(246,243,239,.1);}
.band-ink .lm-error{color:var(--signal-lt);}

/* ─── Guide chapters ────────────────────────────────────────────────────── */
.chapters{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);
  margin-top:clamp(40px,5vw,64px);}
.chapter{background:var(--paper);padding:clamp(24px,2.6vw,36px);transition:background .5s;}
.chapter:hover{background:var(--paper-hi);}
.chapter .cn{font-family:var(--serif);font-size:12px;letter-spacing:.2em;
  color:var(--signal-dk);display:block;margin-bottom:14px;}
.chapter h3{font-family:var(--sans);font-weight:600;
  font-size:clamp(18px,1.6vw,22px);letter-spacing:-.02em;margin-bottom:10px;}
.chapter p{margin:0;font-size:15.5px;line-height:1.7;color:var(--ink-70);}

/* ─── Small print ───────────────────────────────────────────────────────── */
.small{font-size:13px;color:var(--mute);line-height:1.7;}
.small a{text-decoration:underline;text-underline-offset:3px;}

/* ─── Responsive ────────────────────────────────────────────────────────── */
@media (max-width:1080px){
  .phero{grid-template-columns:1fr;min-height:0;}
  .phero-body{padding:132px var(--gut) clamp(44px,7vw,68px);}
  .phero-media{min-height:58vh;}
  .phero.still .phero-media{min-height:0;padding:clamp(24px,5vw,48px) var(--gut);}
  .phero.still .phero-media img{max-height:none;}
  .band{grid-template-columns:1fr;min-height:0;}
  .band-media{min-height:56vh;}
  .band.flip .band-media{order:0;}
  .svc-grid,.plain-head,.chapters{grid-template-columns:1fr;}
  .opts{grid-template-columns:1fr;}
  .post{grid-template-columns:1fr;gap:14px;}
  .glance a{grid-template-columns:44px minmax(0,1fr) auto;}
  .glance .g-d{display:none;}
}
@media (max-width:640px){
  .cform .row{grid-template-columns:1fr;}
  .glance a{grid-template-columns:1fr;gap:8px;}
  .glance .g-p{justify-self:start;}
}

@media (prefers-reduced-motion:reduce){
  .phero-media img{opacity:1!important;transform:scale(1.01)!important;animation:none!important;}
  .phero.still .phero-media img{opacity:1!important;transform:none!important;animation:none!important;}
}