/* ==========================================================================
   OS GROUP · osgroup.mx
   Dark, full bleed, image forward. The drawings mount on white plates that
   float on the black, the way work gets pinned up on a wall.

   HOW TO EDIT
   The copy lives in the HTML files. This file carries the system only:
   colour, type scale, layout primitives. Change a token in :root and it
   changes everywhere.
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */
:root{
  color-scheme: dark;

  --bg:      #0b0b09;   /* the page */
  --bg2:     #121210;   /* raised band */
  --card:    #171714;   /* panel */
  --line:    #272620;   /* hairline */
  --line2:   #38362d;   /* visible rule */
  --fg:      #efede5;   /* text */
  --fg2:     #a8a396;   /* secondary text */
  --fg3:     #736e61;   /* labels */
  --gold:    #c9a765;   /* accent on dark, lifted so it stays legible */
  --gold-d:  #a08344;   /* the brand gold, for fills and rules */
  --paper:   #ffffff;   /* plates where drawings are mounted */

  --m:     clamp(20px, 5vw, 76px);
  --gap:   clamp(14px, 2vw, 26px);
  --wide:  1440px;
  --read:  1180px;

  --f: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* --- 2. Montserrat, self hosted ------------------------------------------ */
@font-face{
  font-family:'Montserrat'; font-style:normal; font-weight:200 700; font-display:swap;
  src:url('../fonts/montserrat-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Montserrat'; font-style:normal; font-weight:200 700; font-display:swap;
  src:url('../fonts/montserrat-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,
    U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,
    U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* --- 3. Reset ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--f); font-weight:300; font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:80;background:var(--gold-d);color:#0b0b09;
  padding:14px 22px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.skip:focus{left:0}

/* --- 4. Scroll reveal ---------------------------------------------------- */
/* Only arms when JS is on, so the page is fully readable without it.
   The visible state is .vis, NOT .in: .in is the layout container class, and
   naming them the same turned every revealed element into a centred
   max-width box. In a grid that also shrank each card to its content. */
.js .rv{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.js .rv.vis{opacity:1; transform:none}
.js .rv.d1{transition-delay:.08s} .js .rv.d2{transition-delay:.16s} .js .rv.d3{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1!important; transform:none!important; transition:none!important}
}

/* --- 5. Nav -------------------------------------------------------------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; flex-wrap:wrap; align-items:center; gap:12px var(--gap);
  padding:16px var(--m);
  background:linear-gradient(to bottom, rgba(11,11,9,.86), rgba(11,11,9,0));
  transition:background .35s var(--ease), border-color .35s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.stuck{background:rgba(11,11,9,.94); backdrop-filter:blur(14px); border-bottom-color:var(--line)}
.brand{font-size:15px; font-weight:600; letter-spacing:.32em; text-transform:uppercase;
  white-space:nowrap; margin-right:auto; color:var(--fg)}
.brand span{font-weight:200; color:var(--fg2)}
.menu{display:flex; gap:clamp(16px,2vw,30px); list-style:none; margin:0; padding:0}
.menu a{font-size:10.5px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--fg2); padding:6px 0; border-bottom:1px solid transparent; transition:color .25s, border-color .25s}
.menu a:hover{color:var(--fg)}
.menu a[aria-current="page"]{color:var(--fg); border-bottom-color:var(--gold)}
.rgn{display:flex; align-items:center; gap:8px}
.rgn label{font-size:8.5px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--fg3)}
.rgn select{
  font-family:inherit; font-size:10px; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  color:var(--fg); background:var(--card); border:1px solid var(--line2);
  padding:6px 9px; border-radius:2px; cursor:pointer; transition:border-color .25s
}
.rgn select:hover{border-color:var(--gold)}
@media (max-width:860px){
  .nav{padding-top:12px; padding-bottom:12px; gap:9px 16px}
  .menu{order:3; width:100%; justify-content:flex-start; gap:18px}
  .rgn label{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
  .hero{padding-top:172px}
}

/* --- 6. Hero ------------------------------------------------------------- */
.hero{position:relative; min-height:min(92vh,860px); display:flex; align-items:flex-end;
  padding:150px var(--m) clamp(48px,7vw,90px); overflow:hidden; isolation:isolate}
.hero-bg{position:absolute; inset:0; z-index:-2}
.hero-bg img{width:100%; height:100%; object-fit:cover; object-position:center 42%;
  filter:grayscale(.55) contrast(1.06) brightness(.72)}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to top, var(--bg) 1%, rgba(11,11,9,.66) 26%, rgba(11,11,9,.28) 62%, rgba(11,11,9,.58) 100%),
    linear-gradient(to right, rgba(11,11,9,.86) 0%, rgba(11,11,9,.42) 52%, rgba(11,11,9,.2) 100%);
}
.hero-in{width:100%; max-width:var(--wide); margin:0 auto}
.eyebrow{display:flex; align-items:center; gap:12px; margin:0 0 clamp(20px,2.6vw,30px);
  font-size:10px; font-weight:600; letter-spacing:.34em; text-transform:uppercase; color:var(--gold)}
.eyebrow::before{content:""; width:clamp(26px,4vw,54px); height:1px; background:var(--gold); flex:0 0 auto}
h1{
  margin:0 0 clamp(26px,3.4vw,40px);
  font-size:clamp(36px,6.6vw,94px); font-weight:300; line-height:1.02; letter-spacing:-.032em;
  max-width:16ch; text-wrap:balance; color:#fff;
}
h1 em{font-style:normal; color:var(--gold)}
.meta{display:flex; flex-wrap:wrap; gap:8px clamp(18px,2.6vw,34px); margin:0 0 clamp(28px,3.6vw,42px);
  font-size:10.5px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--fg2)}
/* Uppercase tracking adds a space after the last letter, which pushed the
   comma away from the word. Pull it back by the same amount. */
.meta b{color:var(--fg); font-weight:600; margin-right:-.18em}
.meta span{display:flex; align-items:center; gap:9px}
.meta span::before{content:""; width:3px; height:3px; background:var(--gold); border-radius:50%}

/* --- 7. Buttons ---------------------------------------------------------- */
.btns{display:flex; flex-wrap:wrap; gap:12px}
.btn{
  display:inline-flex; align-items:center; gap:11px;
  padding:15px 26px; border-radius:2px; border:1px solid transparent;
  font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  transition:background .28s var(--ease), color .28s, border-color .28s, transform .28s var(--ease);
}
.btn i{font-style:normal; transition:transform .28s var(--ease)}
.btn:hover i{transform:translateX(4px)}
.btn-a{background:var(--gold-d); color:#0b0b09}
.btn-a:hover{background:var(--gold); transform:translateY(-2px)}
.btn-b{border-color:var(--line2); color:var(--fg2)}
.btn-b:hover{border-color:var(--gold); color:var(--fg)}

/* --- 8. Bands and headings ----------------------------------------------- */
.band{padding:clamp(78px,11vw,190px) var(--m); position:relative}
.band.alt{background:var(--bg2); border-block:1px solid var(--line)}
.in{max-width:var(--wide); margin:0 auto}
.in.narrow{max-width:var(--read)}

.zone{display:flex; align-items:baseline; gap:16px; margin:0 0 clamp(30px,4vw,54px)}
.zone .n{font-size:11px; font-weight:600; letter-spacing:.14em; color:var(--gold);
  font-variant-numeric:tabular-nums; flex:0 0 auto}
.zone h2{margin:0; font-size:clamp(23px,3.7vw,46px); font-weight:300; letter-spacing:-.015em;
  line-height:1.18; text-wrap:balance; color:#fff}

h3{font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  margin:0 0 14px; color:var(--gold)}
p{margin:0 0 18px; max-width:66ch; color:var(--fg2)}
p.lead{font-size:clamp(16px,1.7vw,20px); line-height:1.6; color:var(--fg); max-width:52ch}
.note{font-size:11.5px; letter-spacing:.04em; color:var(--fg3); max-width:70ch}
strong,b{color:var(--fg); font-weight:600}

/* --- 9. The headline figure ---------------------------------------------- */
/* The number is the moment, so it gets the full width and the sentence sits
   under it. Side by side, the text column was squeezed to about 190px. */
.figure{padding-bottom:clamp(28px,4vw,48px); border-bottom:1px solid var(--line2)}
.figure .big{
  font-size:clamp(58px,13.5vw,208px); font-weight:200; line-height:.86; letter-spacing:-.045em;
  font-variant-numeric:tabular-nums; color:#fff; display:flex; align-items:baseline; gap:.24em;
}
.figure .big u{text-decoration:none; font-size:clamp(11px,1.4vw,17px); font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; color:var(--gold)}
.figure p.lead{margin:clamp(18px,2.4vw,30px) 0 0; max-width:38ch}

.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px; background:var(--line); margin-top:1px}
.stats div{background:var(--bg); padding:clamp(20px,2.6vw,30px) clamp(16px,2vw,26px)}
.band.alt .stats div{background:var(--bg2)}
.stats dt{font-size:8.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--fg3); margin:0 0 10px}
.stats dd{margin:0; font-size:clamp(20px,2.6vw,30px); font-weight:300; color:#fff;
  font-variant-numeric:tabular-nums; line-height:1.1}
.stats dd small{display:block; font-size:10.5px; font-weight:400; color:var(--fg3);
  letter-spacing:.05em; margin-top:8px}

/* --- 10. Plates, where a drawing is mounted ------------------------------ */
figure{margin:0}
.plate{background:var(--paper); border-radius:2px; overflow:hidden;
  box-shadow:0 18px 50px -22px rgba(0,0,0,.9), 0 0 0 1px var(--line);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease)}
.plate:hover{transform:translateY(-4px); box-shadow:0 26px 64px -24px rgba(0,0,0,.95), 0 0 0 1px var(--line2)}
.plate img{width:100%}
.plate.pad{padding:clamp(12px,1.6vw,22px)}
/* A photograph fills its plate; a drawing gets a white margin around it. */
.cap{display:grid; grid-template-columns:auto 1fr; gap:6px 14px; align-items:baseline;
  margin-top:14px}
.cap b{font-size:9px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold); white-space:nowrap; font-variant-numeric:tabular-nums}
.cap span{font-size:13px; line-height:1.6; color:var(--fg2); max-width:64ch}
@media (max-width:560px){ .cap{grid-template-columns:1fr} }

.grid{display:grid; gap:var(--gap)}
@media (min-width:820px){ .g2{grid-template-columns:1fr 1fr} }
@media (min-width:760px){ .g3{grid-template-columns:repeat(3,1fr)} }
.split{display:grid; gap:clamp(26px,4vw,64px); align-items:center}
@media (min-width:900px){
  .split{grid-template-columns:1fr 1fr}
  .split.wide{grid-template-columns:1.35fr 1fr}
  .split.tall{grid-template-columns:.8fr 1.2fr; align-items:start}
}

/* --- 11. Numbered problems ----------------------------------------------- */
.items{list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--line)}
@media (min-width:860px){ .items{grid-template-columns:1fr 1fr} }
.items li{background:var(--bg); padding:clamp(24px,3vw,38px); transition:background .3s}
.band.alt .items li{background:var(--bg2)}
.items li:hover{background:var(--card)}
.items .k{display:block; font-size:10px; font-weight:700; letter-spacing:.16em; color:var(--gold);
  margin-bottom:16px; font-variant-numeric:tabular-nums}
.items .t{margin:0 0 10px; font-size:clamp(16px,1.9vw,20px); font-weight:400; color:#fff;
  letter-spacing:-.01em; line-height:1.3; max-width:22ch}
.items .d{margin:0; font-size:14px; color:var(--fg2); max-width:46ch}

/* --- 12. The ladder ------------------------------------------------------ */
.steps{display:grid; gap:var(--gap)}
.step{background:var(--card); border:1px solid var(--line); border-radius:3px;
  padding:clamp(24px,3vw,40px); transition:border-color .35s var(--ease), transform .35s var(--ease)}
.step:hover{border-color:var(--line2); transform:translateY(-3px)}
.step .top{display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 20px; margin-bottom:18px}
.step .k{font-size:10px; font-weight:700; letter-spacing:.18em; color:var(--gold)}
.step h4{margin:0; font-size:clamp(18px,2.2vw,25px); font-weight:300; letter-spacing:-.015em; color:#fff}
.step .price{margin-left:auto; font-size:13px; font-weight:600; letter-spacing:.04em; color:var(--fg);
  white-space:nowrap; font-variant-numeric:tabular-nums}
.step .price em{font-style:normal; font-weight:400; color:var(--fg3)}
.step p{font-size:14.5px; margin:0; max-width:74ch}
.step p + p{margin-top:12px}
.step.free{border-color:var(--gold-d); background:
  linear-gradient(180deg, rgba(160,131,68,.09), rgba(160,131,68,0) 60%), var(--card)}
.step.free h4{color:#fff}

/* --- 13. Tables ---------------------------------------------------------- */
.tw{overflow-x:auto}
table{width:100%; min-width:560px; border-collapse:collapse; font-size:13.5px}
caption{text-align:left; font-size:8.5px; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--fg3); padding-bottom:14px}
th{text-align:left; font-size:8.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--fg3); border-bottom:1px solid var(--line2); padding:0 18px 12px 0; white-space:nowrap}
td{border-bottom:1px solid var(--line); padding:18px 18px 18px 0; vertical-align:top; color:var(--fg2)}
tr:hover td{color:var(--fg)}
td:first-child{color:var(--fg)}
/* Right aligned, but it still needs a gutter: with padding-right zeroed the
   figure ran straight into the next column's first word. */
.rt{text-align:right; padding-right:28px!important; white-space:nowrap;
  font-variant-numeric:tabular-nums}
td:last-child, th:last-child{padding-right:0}

/* --- 14. Closing call ---------------------------------------------------- */
.close{text-align:center; max-width:760px; margin:0 auto}
.close h2{margin:0 0 20px; font-size:clamp(32px,6vw,76px); font-weight:300; letter-spacing:-.028em;
  line-height:1.08; color:#fff; text-wrap:balance}
.close p{margin-left:auto; margin-right:auto}
.close .btns{justify-content:center}
.mail{display:inline-block; font-size:clamp(16px,2.4vw,26px); font-weight:300; letter-spacing:-.01em;
  color:var(--fg); border-bottom:1px solid var(--gold-d); padding-bottom:6px; word-break:break-all;
  transition:color .28s, border-color .28s}
.mail:hover{color:var(--gold); border-color:var(--gold)}

/* --- 15. Credentials ----------------------------------------------------- */
.creds{list-style:none; margin:0; padding:0}
.creds li{border-top:1px solid var(--line); padding:14px 0 14px 26px; position:relative;
  font-size:13.5px; color:var(--fg2)}
.creds li::before{content:""; position:absolute; left:0; top:22px; width:9px; height:1px; background:var(--gold)}
.creds li b{color:var(--fg)}

/* --- 16. Footer ---------------------------------------------------------- */
.foot{border-top:1px solid var(--line); padding:clamp(34px,4vw,52px) var(--m); background:var(--bg2)}
.foot .in{display:flex; flex-wrap:wrap; gap:16px 40px; align-items:baseline;
  font-size:10.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--fg3)}
.foot a{color:var(--fg2); border-bottom:1px solid var(--line2); transition:color .25s, border-color .25s}
.foot a:hover{color:var(--gold); border-color:var(--gold)}
.foot .r{margin-left:auto}


/* ==========================================================================
   17. Full bleed bands
   An image that runs edge to edge, with the page margin cancelled. Used to
   break the rhythm so the site does not read as one long column of text.
   ========================================================================== */
.bleed{position:relative; margin-inline:calc(var(--m) * -1); overflow:hidden}
/* Toned to sit with the rest of the page. A full colour blue sky against
   near black reads as a stock photo dropped in. */
.bleed img{width:100%; display:block; filter:grayscale(.52) contrast(1.05) brightness(.82)}
.bleed.tall{height:min(78vh,760px)}
.bleed.tall img{height:100%; object-fit:cover}
.bleed .over{position:absolute; inset:auto 0 0 0; padding:clamp(26px,5vw,72px) var(--m);
  background:linear-gradient(to top, rgba(11,11,9,.94), rgba(11,11,9,.55) 55%, transparent)}
.bleed .over p{margin:0; max-width:44ch; color:var(--fg)}
/* Parallax is applied by JS; the transform origin keeps the crop centred. */
.px img{will-change:transform}

/* ==========================================================================
   18. Model viewer
   The signature interaction. Four exports of the same camera, one per
   discipline, crossfaded by the buttons underneath. It shows what federation
   means rather than describing it.
   ========================================================================== */
.viewer{position:relative}
.stage{position:relative; background:var(--paper); border-radius:3px; overflow:hidden;
  box-shadow:0 26px 70px -30px rgba(0,0,0,.95), 0 0 0 1px var(--line)}
.stage::after{content:""; display:block; padding-top:var(--r,53.8%)}
.stage img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  opacity:0; transition:opacity .65s var(--ease)}
.stage img.on{opacity:1}
.ctl{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px}
.ctl button{
  font-family:inherit; font-size:10px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--fg2); background:transparent; border:1px solid var(--line2); border-radius:2px;
  padding:12px 18px; cursor:pointer;
  transition:color .28s, border-color .28s, background .28s;
}
.ctl button:hover{color:var(--fg); border-color:var(--fg3)}
.ctl button[aria-pressed="true"]{background:var(--gold-d); border-color:var(--gold-d); color:#0b0b09}
.ctl .sw{display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:9px;
  vertical-align:-1px; background:currentColor}

/* ==========================================================================
   19. Before and after
   Two exports of the same camera, split by a handle you drag.
   ========================================================================== */
.ba{position:relative; overflow:hidden; border-radius:3px; background:var(--paper);
  box-shadow:0 26px 70px -30px rgba(0,0,0,.95), 0 0 0 1px var(--line);
  touch-action:pan-y; cursor:ew-resize; user-select:none}
.ba img{display:block; width:100%}
.ba .top{position:absolute; inset:0; width:50%; overflow:hidden}
.ba .top img{width:auto; height:100%; max-width:none}
.ba .bar{position:absolute; top:0; bottom:0; left:50%; width:2px; background:var(--gold);
  transform:translateX(-1px); pointer-events:none}
.ba .bar::after{
  content:""; position:absolute; top:50%; left:50%; width:44px; height:44px;
  transform:translate(-50%,-50%); border-radius:50%;
  background:var(--gold); box-shadow:0 4px 18px rgba(0,0,0,.5);
}
.ba .tag{position:absolute; top:14px; font-size:9px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; padding:7px 12px; border-radius:2px; background:rgba(11,11,9,.82);
  color:var(--fg); pointer-events:none}
.ba .tag.l{left:14px} .ba .tag.r{right:14px}

/* ==========================================================================
   20. Three step chain
   ========================================================================== */
.chain .steps-n{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line);
  margin-top:18px}
.chain .steps-n button{
  font-family:inherit; text-align:left; cursor:pointer; background:var(--bg); border:0;
  padding:clamp(16px,2vw,24px); transition:background .3s;
}
.band.alt .chain .steps-n button{background:var(--bg2)}
.chain .steps-n button:hover{background:var(--card)}
.chain .steps-n button[aria-pressed="true"]{background:var(--card)}
.chain .steps-n button[aria-pressed="true"] .sn{color:var(--gold)}
.chain .sn{display:block; font-size:10px; font-weight:700; letter-spacing:.16em; color:var(--fg3);
  margin-bottom:9px; transition:color .3s}
.chain .st{display:block; font-size:clamp(13px,1.5vw,16px); font-weight:400; color:var(--fg);
  letter-spacing:-.005em; line-height:1.35}
.chain .sd{display:block; font-size:12px; color:var(--fg3); margin-top:7px; line-height:1.5}

/* ==========================================================================
   21. Counter
   ========================================================================== */
.count{font-variant-numeric:tabular-nums; display:inline-block}

/* --- tighter type for the lighter copy --------------------------------- */
.kicker{font-size:clamp(15px,1.9vw,22px); font-weight:300; line-height:1.5; color:var(--fg);
  max-width:34ch; margin:0 0 clamp(26px,3.4vw,44px)}

/* ==========================================================================
   22. The index
   Justified rows with ZERO cropping. Each tile carries its real aspect ratio
   and grows in proportion to it, so every tile in a row lands on the same
   height without a single pixel being cut off. The invisible fillers stop the
   last row stretching taller than the ones above it.
   ========================================================================== */
.gal{display:flex; flex-wrap:wrap; gap:10px; margin:0}
.gal a{
  position:relative; flex:var(--ar) 1 calc(var(--ar) * 210px); min-width:0;
  aspect-ratio:var(--ar); background:var(--paper); border-radius:2px; overflow:hidden;
  box-shadow:0 0 0 1px var(--line); transition:box-shadow .35s var(--ease), transform .35s var(--ease);
}
.gal a:hover{box-shadow:0 0 0 1px var(--gold), 0 16px 40px -18px rgba(0,0,0,.9); transform:translateY(-2px); z-index:2}
.gal a img{width:100%; height:100%; display:block}
.gal a::after{
  content:attr(data-p); position:absolute; inset:auto 0 0 0; padding:22px 12px 9px;
  font-size:9px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#fff;
  background:linear-gradient(to top, rgba(11,11,9,.9), transparent);
  opacity:0; transition:opacity .3s; pointer-events:none;
}
.gal a:hover::after{opacity:1}
.gal i.fill{flex:14 1 300px; height:0; margin:0; padding:0}

.galsec{margin-bottom:clamp(38px,5vw,70px)}
.galsec h3{display:flex; align-items:baseline; gap:14px; margin:0 0 18px;
  font-size:11px; letter-spacing:.2em}
.galsec h3 em{font-style:normal; color:var(--fg3); font-weight:400; letter-spacing:.1em}

/* --- lightbox ----------------------------------------------------------- */
.lb{position:fixed; inset:0; z-index:90; display:none; background:rgba(6,6,5,.97);
  align-items:center; justify-content:center; padding:clamp(16px,4vw,56px)}
.lb.open{display:flex}
.lb img{max-width:100%; max-height:82vh; width:auto; height:auto; background:#fff;
  border-radius:2px; box-shadow:0 30px 90px -30px #000}
.lb .meta{position:absolute; inset:auto 0 0 0; padding:18px clamp(16px,4vw,56px);
  display:flex; flex-wrap:wrap; gap:8px 24px; align-items:baseline;
  font-size:10px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--fg2)}
.lb .meta b{color:var(--fg)}
.lb .meta .c{margin-left:auto; color:var(--fg3); text-transform:none; letter-spacing:.04em; font-size:11px}
.lb button{position:absolute; background:transparent; border:1px solid var(--line2); color:var(--fg);
  width:46px; height:46px; border-radius:50%; cursor:pointer; font-size:17px; line-height:1;
  transition:border-color .25s, color .25s}
.lb button:hover{border-color:var(--gold); color:var(--gold)}
.lb .x{top:clamp(14px,3vw,28px); right:clamp(14px,3vw,28px)}
.lb .p{left:clamp(8px,2vw,24px); top:50%; transform:translateY(-50%)}
.lb .n{right:clamp(8px,2vw,24px); top:50%; transform:translateY(-50%)}
@media (max-width:640px){ .lb .p,.lb .n{top:auto; bottom:64px; transform:none} .lb .p{left:16px} .lb .n{right:16px} }

/* A quiet link on the paid steps. The free step gets the real button; these
   only need to be reachable, not to compete with it. */
.ask{display:inline-flex; align-items:center; gap:9px; margin-top:20px;
  font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); border-bottom:1px solid transparent; padding-bottom:3px;
  transition:border-color .25s}
.ask i{font-style:normal; transition:transform .25s var(--ease)}
.ask:hover{border-bottom-color:var(--gold)}
.ask:hover i{transform:translateX(3px)}

/* The strongest thing on the page to a buyer who has never met him, so it
   stops being a sentence in a paragraph. */
.risk{position:relative; margin-top:18px!important; padding:16px 20px 16px 22px;
  border-left:2px solid var(--gold); background:rgba(160,131,68,.07);
  font-size:14px!important; color:var(--fg)!important; max-width:62ch}
.risk::first-line{font-weight:600}