/* U Shine — bolder variant.
   One black-and-white still, a stance instead of a description, and the film
   moved down the page where it belongs. Everything else inherits us2.css. */

/* ---- hero: a single still, type centred over it ---- */
.open--still{min-height:100vh;align-items:flex-end;text-align:center;background:#0B0B0C}
.open--still .open__media img{filter:grayscale(1) contrast(1.02) brightness(1.1)}
.open--still .open__media::after{background:radial-gradient(74% 62% at 50% 50%,
  rgba(8,8,9,0),rgba(8,8,9,.18));opacity:1}
.open--still .open__media::before{background:linear-gradient(180deg,
  rgba(0,0,0,.3),transparent 18%,rgba(0,0,0,.2) 46%,rgba(0,0,0,.72))}
.open--still .wrap{padding-bottom:clamp(34px,5vh,70px)}
.stance{text-shadow:0 1px 14px rgba(0,0,0,.6);font-size:clamp(.6rem,1.1vw,.78rem);letter-spacing:.5em;text-transform:uppercase;
  color:rgba(255,255,255,.82);margin:0 0 clamp(18px,2.4vw,30px);font-weight:400}
.open--still h1{font-family:var(--sans);font-weight:500;letter-spacing:-.02em;
  font-size:clamp(1.9rem,4.8vw,4.1rem);line-height:1;max-width:none;text-transform:uppercase;
  text-shadow:0 2px 26px rgba(0,0,0,.62),0 1px 3px rgba(0,0,0,.35)}
.open--still .under{margin:clamp(20px,2.6vw,30px) auto 0;max-width:44ch;
  color:rgba(255,255,255,.8);font-size:clamp(.92rem,1.05vw,1rem);line-height:1.62;
  text-shadow:0 1px 16px rgba(0,0,0,.6)}
.open--still .acts{justify-content:center}
.open--still .meta{justify-content:center;gap:clamp(18px,4vw,54px);border-top:0;
  margin-top:clamp(30px,4vw,56px);padding-top:0}
.open--still .meta span{position:relative}
.open--still .meta span+span::before{content:"";position:absolute;left:clamp(-27px,-2vw,-9px);
  top:50%;width:1px;height:11px;background:rgba(255,255,255,.35);transform:translateY(-50%)}

/* ---- the film, now a chapter of its own ---- */
.filmband{position:relative;background:#0B0B0C;overflow:hidden}
.filmband video{width:100%;height:clamp(340px,64vh,760px);object-fit:cover;display:block;
  filter:saturate(.8) contrast(1.04) brightness(.86)}
.filmband__tag{position:absolute;left:0;right:0;bottom:0;padding:26px 30px;
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  background:linear-gradient(transparent,rgba(0,0,0,.65));
  color:rgba(255,255,255,.85);font-size:.62rem;letter-spacing:.3em;text-transform:uppercase}

/* ---- headings follow the hero's register ---- */
.bold-type h2,.bold-type .say,.bold-type .line{font-family:var(--sans);font-weight:500;
  letter-spacing:-.025em;text-transform:uppercase;line-height:.98}
.bold-type .say em,.bold-type .line em{font-style:normal;color:var(--accent);text-transform:uppercase}
.bold-type .credo .line em{color:var(--duo-b)}
.bold-type .num{font-family:var(--sans);font-weight:500}

/* ---------- interior pages ---------- */
.ihead{padding:clamp(130px,16vw,190px) 0 clamp(30px,4vw,52px);background:var(--paper)}
.ihead h1{font-family:var(--sans);font-weight:500;text-transform:uppercase;
  letter-spacing:-.025em;font-size:clamp(1.9rem,4.6vw,3.6rem);line-height:1.02;max-width:20ch}
.prose{padding:0 0 clamp(60px,8vw,110px)}
.prose .wrap{max-width:820px}
.prose h2{font-family:var(--display);font-weight:400;text-transform:none;letter-spacing:-.015em;
  font-size:clamp(1.5rem,2.8vw,2.2rem);line-height:1.12;margin:2.8rem 0 1rem}
.prose h3{font-family:var(--display);font-weight:400;font-size:1.25rem;margin:2rem 0 .7rem;
  letter-spacing:0;line-height:1.2}
.prose p{font-size:1.05rem;line-height:1.75;color:var(--ink-2);margin:0 0 1.2em}
.prose ul,.prose ol{color:var(--ink-2);font-size:1.03rem;line-height:1.72;
  padding-left:1.2rem;margin:0 0 1.4em}
.prose li{margin-bottom:.5em}
.prose a{color:var(--ink);text-underline-offset:3px}
.prose a:hover{color:var(--accent)}
.prose img{width:100%;height:auto;margin:2rem 0;filter:saturate(.9) contrast(1.02)}
.prose table{width:100%;border-collapse:collapse;margin:1.8rem 0;font-size:.96rem}
.prose td,.prose th{border-bottom:1px solid var(--line);padding:.7rem .4rem;text-align:left}
.booknow{background:var(--ink);color:var(--paper);padding:clamp(54px,7vw,100px) 0;text-align:center}
.booknow h2{color:#fff;font-family:var(--sans);font-weight:500;text-transform:uppercase;
  letter-spacing:-.02em;font-size:clamp(1.5rem,3vw,2.4rem)}
.booknow .acts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:2rem}
.booknow .btn{color:#fff;border-color:rgba(255,255,255,.6)}
.booknow .btn:hover{background:#fff;color:var(--ink)}
.booknow .fine{margin:2.2rem 0 0;font-size:.8rem;color:rgba(239,235,227,.55)}

/* services index */
.svc{border-top:1px solid var(--line)}
.svc a{display:grid;grid-template-columns:62px minmax(0,1fr) minmax(0,1fr) auto;
  gap:clamp(14px,3vw,36px);align-items:baseline;padding:clamp(20px,2.6vw,34px) 0;
  border-bottom:1px solid var(--line);text-decoration:none;transition:padding-left .3s}
.svc a:hover{padding-left:12px}
.svc .n{font-size:.62rem;letter-spacing:.24em;color:var(--accent)}
.svc h3{font-family:var(--display);font-weight:400;font-size:clamp(1.3rem,2.3vw,1.95rem);
  letter-spacing:-.015em;line-height:1.08}
.svc p{margin:0;color:var(--ink-2);font-size:.95rem}
.svc .go{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
@media(max-width:860px){.svc a{grid-template-columns:40px 1fr}.svc p,.svc .go{grid-column:2}}







/* the lead and the sentence under it sit side by side instead of stranding
   two thirds of the screen */
.short{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(20px,4vw,70px);align-items:start}
.short .lead{max-width:none;font-size:clamp(1.5rem,3vw,2.5rem);line-height:1.2}
.short .lead-2{max-width:46ch;margin:.35rem 0 0}
@media(max-width:860px){.short{grid-template-columns:1fr;gap:16px}}

/* the two reasoning columns and the list run the full width too */
.approach{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,5vw,80px)}
.approach p:not(.lbl){max-width:52ch}
.whats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,5vw,80px)}
.whats__t{grid-column:1/-1}
@media(max-width:860px){.whats{grid-template-columns:1fr}}

/* ================= service pages =================
   One measure, one type scale. Every block starts and ends on the same two
   vertical lines, so nothing reads as shifted.
   display 3.5rem · lead 2rem · body 1.125rem · label .7rem                      */
.ihead .wrap,.intro .wrap,.reasoning .wrap,.covers .wrap,.detail .wrap{
  max-width:980px;margin-inline:auto}

.ihead{padding:clamp(130px,16vw,186px) 0 clamp(20px,2.6vw,32px)}
.ihead h1{font-size:clamp(2rem,3.9vw,3.5rem);line-height:1.04;max-width:none}

.intro{padding:0 0 clamp(24px,3vw,40px)}
.intro .lead{font-size:clamp(1.4rem,2.3vw,2rem);line-height:1.26;letter-spacing:-.012em;
  color:var(--ink);margin:0;max-width:none}
.intro .lead-2{font-size:1.125rem;line-height:1.7;color:var(--ink-2);margin:1rem 0 0;
  max-width:none}

.reasoning{padding:0 0 clamp(24px,3vw,40px)}
.reasoning .wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(24px,4vw,56px);padding-top:clamp(22px,2.6vw,34px);border-top:1px solid var(--line)}
.reasoning .lbl,.covers .lbl{font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--accent);margin:0 0 .75rem;font-weight:500}
.reasoning p:not(.lbl){margin:0;font-size:1.125rem;line-height:1.68;color:var(--ink-2);
  max-width:none}

.covers{padding:0 0 clamp(26px,3.2vw,44px)}
.covers .lbl{color:var(--muted);padding-top:clamp(22px,2.6vw,34px);
  border-top:1px solid var(--line);margin-bottom:.9rem}
.covers ul{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,4vw,56px)}
.covers li{padding:.62rem 0;border-bottom:1px solid var(--line);font-size:1.125rem}

.detail{padding:0 0 clamp(50px,7vw,90px)}
.fold{border-top:1px solid var(--line)}
.fold__body{padding-top:.4rem}
.fold__body p,.fold__body li{font-size:1.125rem;line-height:1.72;color:var(--ink-2);max-width:none}
.fold__body h2,.fold__body h3{font-family:var(--display);font-weight:400;text-transform:none;
  letter-spacing:-.01em;margin:2.2rem 0 .7rem;font-size:1.6rem;line-height:1.2}
.fold__body ul,.fold__body ol{padding-left:1.1rem;margin:0 0 1.3em}
.fold__body figure{margin:1.8rem 0}
.fold__body figure img,.fold__body img{width:100%;height:auto;display:block;max-width:none}

.booknow .wrap{max-width:980px;margin-inline:auto}
.booknow h2{font-size:clamp(1.5rem,2.6vw,2rem)}
.booknow .fine{font-size:1rem}

.fold summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;
  padding:1.25rem 0;font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:var(--accent)}
.fold summary::-webkit-details-marker{display:none}
.fold summary::after{content:"";width:9px;height:9px;border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .3s}
.fold[open] summary::after{transform:rotate(225deg) translateY(-2px)}
.fold[open] summary span::after{content:" — close"}

@media(max-width:860px){
  .reasoning .wrap,.covers ul{grid-template-columns:1fr}
}