/* =====================================================================
   MYTRN Enterprises — gold on black
   One stylesheet for every page. Edit a value here, all pages follow.

   Gold is #C6A759: 55% saturation against the old yellow's 66%, which is
   what makes it read as metal rather than as a warning sign. It clears
   8.5:1 on black in both directions, so it can safely carry text AND act
   as a button background.
   ===================================================================== */
:root{
  --black:#0A0A0A;        /* page */
  --black-2:#121212;      /* cards, raised surfaces */
  --black-3:#1A1A1A;      /* hover */
  --white:#FFFFFF;
  --dim:#ADADAD;          /* body copy — 8.8:1 on black */
  --faint:#7E7E7E;        /* small labels only, never body copy */

  --gold:#C6A759;         /* primary accent, buttons */
  --gold-hi:#D9C185;      /* hover */
  --gold-dim:#8F7938;     /* deep gold for quiet edges */
  --line:rgba(198,167,89,.20);      /* gold-tinted hairline */
  --line-soft:rgba(198,167,89,.11);

  --r-lg:18px; --r-md:12px; --r-pill:999px;
  --ease:cubic-bezier(.22,1,.36,1);
  --pad:clamp(20px,3vw,30px);
  --gut:clamp(16px,2.2vw,26px);
  --maxw:1200px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
/* "futura-pt" is deliberately NOT in this stack right now.
   Kit pqm4prr publishes a single face — italic, weight 700 — and CSS font
   matching will use an italic face to satisfy a normal request when the family
   contains no roman face at all. So merely naming futura-pt anywhere in the
   stack makes every word on the site oblique; font-style:normal does not
   override it, because nothing is being synthesised — the browser is using the
   only real face it was given.
   Local 'Futura' is also omitted: on a Mac it resolves to Futura Medium, which
   is heavier than Book and would make Mac visitors see a different site.
   TO RESTORE: tick Book + Heavy (roman) in the kit, set USE_TYPEKIT=True in
   _build/gen_v3.py, and put "futura-pt" back at the front of this list. */
body{
  font-family:'Jost',ui-sans-serif,-apple-system,'Century Gothic','Avenir Next',sans-serif;
  font-style:normal;font-weight:400;
  background:var(--black);color:var(--white);
  line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
button{font-family:inherit;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);}
.lab{
  font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.18em;color:var(--gold);
}
.lab-q{color:var(--faint);}
.sr-only{
  position:absolute !important;width:1px !important;height:1px !important;
  padding:0 !important;margin:-1px !important;overflow:hidden !important;
  clip:rect(0 0 0 0) !important;white-space:nowrap !important;border:0 !important;
}

/* ---------- type ---------- */
h1{font-size:clamp(32px,4.4vw,60px);line-height:1.06;letter-spacing:-.012em;font-weight:400;}
h2{font-size:clamp(25px,3.2vw,40px);line-height:1.1;letter-spacing:-.008em;font-weight:400;}
h3{font-size:clamp(18px,1.9vw,23px);line-height:1.2;font-weight:700;letter-spacing:-.004em;}
.lead{font-size:clamp(16px,1.4vw,18px);color:var(--dim);max-width:54ch;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:52px;padding:0 30px;border-radius:var(--r-pill);
  border:1.5px solid transparent;font-size:15px;font-weight:700;letter-spacing:.02em;
  cursor:pointer;
  transition:background .22s var(--ease),color .22s var(--ease),
             border-color .22s var(--ease),transform .18s var(--ease);
}
.btn:active{transform:translateY(1px);}

/* Primary: a metallic gold stroke, nothing filled. The gradient runs dark
   gold -> highlight -> dark gold across the border so it reads as brushed
   metal rather than a flat rule. Falls back to a solid gold border where
   mask-composite isn't supported. */
.btn-g{background:transparent;color:var(--gold);border-color:var(--gold);}
.btn-g:hover{background:rgba(198,167,89,.10);color:var(--gold-hi);border-color:var(--gold-hi);}
@supports ((-webkit-mask-composite:xor) or (mask-composite:exclude)){
  .btn-g{position:relative;border-color:transparent;}
  .btn-g::before{
    content:'';position:absolute;inset:0;border-radius:inherit;padding:1.5px;
    background:linear-gradient(135deg,#7A6631 0%,#C6A759 26%,#F2E3B4 50%,#C6A759 74%,#7A6631 100%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    mask-composite:exclude;pointer-events:none;
    transition:opacity .22s var(--ease);
  }
  .btn-g:hover::before{
    background:linear-gradient(135deg,#C6A759 0%,#F2E3B4 30%,#FFF6DC 50%,#F2E3B4 70%,#C6A759 100%);
  }
}

/* Secondary: quieter, single-tone stroke so the primary still leads */
.btn-o{background:transparent;color:var(--gold);border-color:var(--gold-dim);}
.btn-o:hover{background:rgba(198,167,89,.10);border-color:var(--gold);}
.btn-w{background:transparent;color:var(--white);border-color:rgba(255,255,255,.28);}
.btn-w:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.55);}
.btn-sm{min-height:44px;padding:0 22px;font-size:14px;}
.lnk{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:var(--gold);}
.lnk:hover{color:var(--gold-hi);}
.lnk span{transition:transform .25s var(--ease);}
.lnk:hover span{transform:translateX(4px);}

/* ---------- header ---------- */
.head{position:sticky;top:0;z-index:90;background:rgba(10,10,10,.9);
      backdrop-filter:blur(14px);border-bottom:1px solid var(--line-soft);}
.nav{max-width:var(--maxw);margin:0 auto;padding:14px var(--pad);
     display:flex;align-items:center;gap:18px;}
.logo img{height:30px;width:auto;}
.menu{display:flex;align-items:center;gap:2px;list-style:none;margin-left:auto;}
.menu a{display:block;padding:9px 15px;border-radius:var(--r-pill);
        font-size:15px;font-weight:400;color:var(--dim);
        transition:color .2s var(--ease),background .2s var(--ease);}
.menu a:hover{color:var(--gold);background:rgba(198,167,89,.09);}
.menu a[aria-current="page"]{color:var(--gold);}
.burger{display:none;width:44px;height:44px;border:0;background:none;
        color:var(--gold);cursor:pointer;align-items:center;justify-content:center;}
.burger span{display:block;width:22px;height:1.5px;background:currentColor;position:relative;}
.burger span::before,.burger span::after{content:'';position:absolute;left:0;width:22px;height:1.5px;background:currentColor;}
.burger span::before{top:-7px;} .burger span::after{top:7px;}
@media(max-width:900px){
  .menu{display:none;}
  .burger{display:flex;}
  .nav>.btn{margin-left:auto;}
  .nav{gap:10px;}
}
@media(max-width:520px){
  .nav .lbl-l{display:none;}
  .logo img{height:24px;}
  .nav{padding:12px 16px;}
}
.nav .lbl-s{display:none;}
@media(max-width:520px){ .nav .lbl-s{display:inline;} }

/* mobile menu sheet */
.sheet{position:fixed;inset:0;z-index:120;background:var(--black);
       display:flex;flex-direction:column;padding:var(--pad);
       transform:translateY(-100%);transition:transform .3s var(--ease);}
.sheet.open{transform:translateY(0);}
.sheet-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:30px;}
.sheet-x{width:44px;height:44px;border:0;background:none;color:var(--gold);font-size:27px;cursor:pointer;}
.sheet nav{display:flex;flex-direction:column;}
.sheet nav a{padding:17px 0;font-size:26px;font-weight:400;letter-spacing:-.01em;
             border-bottom:1px solid var(--line-soft);}
.sheet nav a[aria-current="page"]{color:var(--gold);}
.sheet nav a.sub{font-size:17px;padding:13px 0 13px 18px;color:var(--dim);}
.sheet .btn{margin-top:26px;}

/* ---------- hero ---------- */
.hero{position:relative;min-height:min(72vh,620px);display:flex;align-items:flex-end;overflow:hidden;}
.hero-img{position:absolute;inset:0;background:var(--black-2);}
/* Slides stack on top of each other and cross-fade. Only the first carries
   real alt text; the rest are decorative. */
/* Fade is .55s against a 1.5s dwell, so each slide sits fully opaque for
   ~.95s. At the old 1s fade the slideshow would be mid-crossfade two thirds
   of the time and never look sharp. */
.hero-img img,.hero-img video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 50%;
  opacity:0;transition:opacity .55s var(--ease);
}
.hero-img img.on,.hero-img video.on{opacity:1;}
/* The clip is a phone video (3:4), same shape as several of the stills, so
   object-fit:cover crops it exactly the way they are cropped. It is muted and
   has no audio track at all, which is what lets it autoplay at all. */
.hero-vid{pointer-events:none;}
.hero-img::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to top,#0A0A0A 3%,rgba(10,10,10,.86) 32%,rgba(10,10,10,.58) 64%,rgba(10,10,10,.42) 100%);}
.hero-in{position:relative;z-index:2;width:100%;
         padding-block:clamp(40px,5vw,66px) clamp(32px,4vw,50px);}
.hero h1{max-width:19ch;margin-top:14px;}
.hero .lead{margin-top:18px;max-width:50ch;}
.hero-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;}

/* Phones: the hero was 72vh with its content bottom-aligned, which pushed the
   headline and buttons most of a screen down. Shorter block + tighter padding
   brings the text up while keeping a real photo band above it. */
@media(max-width:760px){
  .hero{min-height:min(56vh,470px);}
  .hero-in{padding-block:24px 22px;}
  .hero h1{margin-top:10px;max-width:none;}
  .hero-btns{margin-top:20px;gap:10px;}
  .hero-btns .btn{flex:1 1 100%;}
  .phead{padding-block:26px 20px;}
  section.blk{padding-block:38px;}
}

/* monogram set beside the description — a deliberate brand mark on flat black,
   not a watermark over the photo, so it runs at near-full strength */
/* Columns mirror the credential strip above (repeat(3,1fr), no gap), so the
   monogram column begins on exactly the same axis as the SERVICE AREA rule.
   The gap has to be 0 for that to hold — the text column carries its own
   right padding instead. */
.intro-grid{
  display:grid;grid-template-columns:2fr 1fr;
  gap:0;align-items:center;
}
.intro-grid>.intro{padding-right:clamp(24px,4vw,64px);}
/* The mark is roughly 1:2, so sizing it by WIDTH made it enormously tall
   (420px wide = 852px tall) and stretched the whole row. Size by height. */
/* Sized by height, not width. The mark is ~1:2, so at 460px tall it is 230px
   wide — still inside the 380px the 1fr column gets at max width, so the
   2fr/1fr split (and the SERVICE AREA axis alignment it protects) is untouched. */
.intro-mark{
  height:clamp(300px,46vh,460px);width:auto;
  justify-self:start;pointer-events:none;user-select:none;
}
/* The animated mark is a video on a solid black field, not a cut-out. Rather
   than trying to match #0A0A0A exactly (the source black is #000, which would
   show as a faintly darker rectangle), screen-blend it: black screens to the
   page colour and disappears, gold stays gold. No matte, no visible edge. */
.intro-anim{mix-blend-mode:screen;background:transparent;}
.intro-still{display:none;}
/* Anyone who has asked their OS to reduce motion gets the static vector
   instead — which is also the crisper of the two. */
@media(prefers-reduced-motion:reduce){
  .intro-anim{display:none;}
  .intro-still{display:block;}
}
@media(max-width:860px){
  .intro-grid{grid-template-columns:1fr;}
  .intro-grid>.intro{padding-right:0;}
  /* on a phone the mark leads the section rather than trailing it: centred,
     above the label, and small enough to read as a mark not a graphic */
  .intro-mark{
    order:-1;justify-self:center;
    height:clamp(220px,32vh,290px);width:auto;
    margin:0 0 20px;
  }
}

/* buttons sitting under the intro paragraph */
.intro .hero-btns{margin-top:28px;}

/* ---------- credential strip ---------- */
.strip{border-block:1px solid var(--line-soft);background:var(--black-2);}
.strip ul{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);list-style:none;
          display:grid;grid-template-columns:repeat(3,1fr);}
.strip li{padding:20px 0;}
.strip li+li{border-left:1px solid var(--line-soft);padding-left:clamp(16px,2.4vw,30px);}
.strip b{display:block;margin-top:6px;font-size:clamp(15px,1.5vw,18px);font-weight:700;}
.strip .g{color:var(--gold);}
@media(max-width:700px){
  .strip ul{grid-template-columns:1fr;}
  .strip li+li{border-left:0;border-top:1px solid var(--line-soft);padding-left:0;}
}

/* ---------- sections ---------- */
section.blk{padding-block:clamp(52px,6.5vw,96px);}
.sec-top{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
         margin-bottom:clamp(26px,3.2vw,40px);flex-wrap:wrap;}
.sec-top h2{max-width:20ch;}

/* intro paragraph block */
.intro{max-width:62ch;}
.intro p{margin-top:18px;font-size:clamp(18px,1.8vw,23px);line-height:1.5;color:var(--dim);}

/* ---------- 4 service categories ---------- */
.cats{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gut);}
.cat{
  position:relative;display:block;padding:clamp(26px,3vw,36px);
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--black-2);
  transition:background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
}
.cat:hover{background:var(--black-3);border-color:var(--gold-dim);transform:translateY(-3px);}
.cat h3{margin-top:12px;}
.cat p{margin-top:10px;color:var(--dim);font-size:15px;max-width:34ch;}
.cat .go{margin-top:18px;display:inline-flex;align-items:center;gap:8px;
         font-size:14px;font-weight:700;color:var(--gold);}
.cat:hover .go{color:var(--gold-hi);}
.cat.feature{border-color:var(--gold-dim);
  background:linear-gradient(160deg,rgba(198,167,89,.10),var(--black-2) 58%);}
@media(max-width:760px){ .cats{grid-template-columns:1fr;} }

/* ---------- featured work (compact, homepage) ---------- */
.feat{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--gut);}
.feat .slot:first-child{grid-row:span 2;}
.slot{position:relative;overflow:hidden;border-radius:var(--r-lg);
      background:var(--black-2);border:1px solid var(--line-soft);aspect-ratio:1/1;}
.feat .slot:first-child{aspect-ratio:auto;min-height:300px;}
.slot img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease);}
.slot:hover img{transform:scale(1.04);}
.slot figcaption{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;
  font-size:14px;font-weight:700;
  background:linear-gradient(to top,rgba(10,10,10,.92),transparent);}
@media(max-width:860px){
  .feat{grid-template-columns:1fr 1fr;}
  .feat .slot:first-child{grid-row:auto;grid-column:span 2;aspect-ratio:16/10;min-height:0;}
}

/* placeholder slot — visible, obviously temporary */
.ph{display:flex;align-items:center;justify-content:center;
    background:repeating-linear-gradient(135deg,rgba(198,167,89,.055) 0 10px,transparent 10px 20px),var(--black-2);}
.ph span{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
         color:var(--gold-dim);text-align:center;padding:0 12px;}

/* ---------- commercial band ---------- */
.comm{border-block:1px solid var(--line);
      background:linear-gradient(150deg,rgba(198,167,89,.10),rgba(10,10,10,0) 62%),var(--black-2);}
.comm-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,4vw,60px);align-items:center;}
.comm ul{list-style:none;margin-top:22px;display:grid;gap:9px;}
.comm li{display:flex;gap:11px;align-items:baseline;color:var(--dim);font-size:15.5px;}
.comm li::before{content:'';flex:0 0 5px;height:5px;border-radius:50%;background:var(--gold);transform:translateY(-3px);}
@media(max-width:860px){ .comm-grid{grid-template-columns:1fr;} }

/* ---------- page header ---------- */
.phead{padding-block:clamp(40px,5.5vw,78px) clamp(26px,3.2vw,42px);
       border-bottom:1px solid var(--line-soft);}
.phead h1{max-width:20ch;margin-top:13px;}
.phead .lead{margin-top:16px;}

/* Contact header: copy left, brand shot right, sharing one baseline.
   The photo is portrait but this slot is landscape, so it is cropped 4:3 with
   object-fit — the embroidery sits centre-frame in the source, so a centre
   crop keeps the whole mark. */
.phead-split{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(26px,5vw,64px);align-items:center;
}
/* No frame: the shot dissolves into the page instead of sitting in a box.
   The slot takes the photo's OWN 912:1151 ratio and is sized by height, so
   nothing is cropped — collar and full monogram both survive. Sized by height
   rather than width because at 100% width the portrait would be ~683px tall
   and tower over the heading beside it.
   Mark margins in the full frame are 29/18/34/23%, so the 15%/11% fades below
   never touch it. The two gradients are intersected so all four edges fade. */
.phead-shot{
  aspect-ratio:912/1151;
  height:clamp(320px,48vh,480px);width:auto;max-width:100%;
  justify-self:center;object-fit:cover;
  border:0;border-radius:0;background:transparent;
}
@supports ((-webkit-mask-composite:source-in) or (mask-composite:intersect)){
  .phead-shot{
    -webkit-mask-image:
      linear-gradient(to right,transparent 0,#000 15%,#000 85%,transparent 100%),
      linear-gradient(to bottom,transparent 0,#000 11%,#000 89%,transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:
      linear-gradient(to right,transparent 0,#000 15%,#000 85%,transparent 100%),
      linear-gradient(to bottom,transparent 0,#000 11%,#000 89%,transparent 100%);
    mask-composite:intersect;
  }
}
@media(max-width:860px){
  /* One column, shot below the copy so it never pushes the form and phone
     number down — on a phone this page exists to be actioned, not admired.
     Shorter than on desktop for the same reason; the whole photo still shows,
     it is simply smaller. */
  .phead-split{grid-template-columns:1fr;gap:22px;}
  .phead-shot{height:clamp(260px,40vh,360px);}
}

/* ---------- photo + copy band (service pages) ---------- */
/* The photo is portrait, so it sits in a column rather than being cropped
   into a wide strip. Text column is wider so the page still reads as text-led. */
.pic-row{
  display:grid;grid-template-columns:.82fr 1.18fr;
  gap:clamp(24px,4vw,58px);align-items:center;
}
.pic{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  border:1px solid var(--line);background:var(--black-2);
  aspect-ratio:3/4;
}
.pic img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;}
.pic figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:14px 16px;
  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gold);
  background:linear-gradient(to top,rgba(10,10,10,.92),transparent);
}
.pic-row h2{margin-top:12px;max-width:16ch;}
.pic-row .lead{margin-top:14px;}
.pic-row .lnk{margin-top:20px;}
@media(max-width:820px){
  .pic-row{grid-template-columns:1fr;gap:24px;}
  .pic{aspect-ratio:4/3;}          /* shorter on phones so it doesn't dominate */
  .pic-row h2{max-width:none;}
}

/* ---------- service page detail ---------- */
.svc{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gut);}
.svc-card{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--black-2);
          padding:clamp(24px,2.8vw,32px);}
.svc-card ul{list-style:none;margin-top:16px;}
.svc-card li{padding:9px 0;border-top:1px solid var(--line-soft);color:var(--dim);font-size:15px;}
.svc-card li:first-child{border-top:0;}
@media(max-width:760px){ .svc{grid-template-columns:1fr;} }

/* ---------- projects gallery ---------- */
.filters{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:clamp(24px,3vw,36px);}
.filt{min-height:44px;padding:0 20px;border-radius:var(--r-pill);cursor:pointer;
  border:1px solid var(--line);background:transparent;color:var(--dim);
  font-size:14px;font-weight:700;letter-spacing:.01em;
  transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease);}
.filt:hover{color:var(--gold);border-color:var(--gold-dim);}
/* active filter reads as selected via a full-strength gold stroke and tint,
   rather than a gold fill */
.filt[aria-pressed="true"]{background:rgba(198,167,89,.14);color:var(--gold-hi);
                           border-color:var(--gold);box-shadow:inset 0 0 0 1px rgba(198,167,89,.45);}
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gut);}
.gal .slot{aspect-ratio:4/3;}
.gal .slot.wide{grid-column:span 2;aspect-ratio:8/3;}
@media(max-width:860px){
  .gal{grid-template-columns:repeat(2,1fr);}
  .gal .slot.wide{grid-column:span 2;aspect-ratio:16/9;}
}
@media(max-width:520px){
  .gal{grid-template-columns:1fr;}
  .gal .slot.wide{grid-column:auto;aspect-ratio:4/3;}
}
.gal-empty{padding:40px 0;color:var(--faint);font-size:15px;}

/* ---------- projects gallery (hand-curated, captioned) ---------- */
/* Cards are a fixed ideal width rather than fractions of the row, and the row
   is centred. That way one photo sits as a deliberate single card instead of
   stretching across 1200px, and the layout still fills out properly as more
   are added — no rule needs changing when the count grows. */
.pgal{display:flex;flex-wrap:wrap;justify-content:center;
      align-items:flex-start;gap:clamp(22px,3vw,34px);}
/* Grows to fill the row but capped, so one photo reads as a feature card at
   520px rather than a 1200px slab; three fit across on a wide screen. */
.pcard{flex:1 1 340px;max-width:520px;}
.pshot{
  position:relative;
  overflow:hidden;border-radius:var(--r-lg);border:1px solid var(--line-soft);
  background:var(--black-2);aspect-ratio:4/5;
}
/* Set by the generator when a card's photos are landscape. 4:3 is the native
   shape of those shots, so they are shown whole rather than losing ~40% of
   their width to the portrait frame. Cards top-align, so a row mixing the two
   shapes reads as an editorial grid instead of a broken one. */
.pshot.wide{aspect-ratio:4/3;}
.pshot img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;}

/* --- multi-photo card ---
   A scroll-snap strip, so it swipes natively on touch and still works with
   JS off. The arrows and dots are added by script on top of that. */
.ptrack{
  display:flex;height:100%;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
}
.ptrack::-webkit-scrollbar{display:none;}
.ptrack img{flex:0 0 100%;scroll-snap-align:center;}
.ptrack:focus-visible{outline:2px solid var(--gold);outline-offset:-3px;}

.pnav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:40px;height:40px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:rgba(10,10,10,.66);
  color:var(--gold);font-size:23px;line-height:1;
  opacity:0;transition:opacity .2s var(--ease),background .2s var(--ease),
                       border-color .2s var(--ease);
}
.pnav.prev{left:10px;} .pnav.next{right:10px;}
.pshot:hover .pnav,.pnav:focus-visible{opacity:1;}
.pnav:hover{background:rgba(10,10,10,.88);border-color:var(--gold-dim);}
.pnav:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
/* Touch devices have no hover to reveal them, so they stay put. */
@media(hover:none){ .pnav{opacity:1;} }

/* The photos are light, so the dots sit on a scrim or they vanish. */
.pdots{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;justify-content:center;gap:2px;padding:30px 0 10px;
  background:linear-gradient(180deg,transparent,rgba(10,10,10,.62));
  pointer-events:none;
}
.pdot{
  position:relative;width:24px;height:24px;padding:0;border:0;
  background:none;cursor:pointer;pointer-events:auto;
}
.pdot::before{
  content:'';position:absolute;top:50%;left:50%;
  width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;
  background:rgba(255,255,255,.5);
  transition:background .2s var(--ease),width .2s var(--ease),
             height .2s var(--ease),margin .2s var(--ease);
}
.pdot.on::before{background:var(--gold);width:9px;height:9px;margin:-4.5px 0 0 -4.5px;}
.pdot:focus-visible{outline:2px solid var(--gold);outline-offset:0;border-radius:50%;}
/* Captions are real sentences, not labels, so they get body-copy treatment
   and a gold rule to tie them to the card above. */
.pcard figcaption{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft);
  font-size:16px;line-height:1.55;color:var(--dim);
}
@media(max-width:560px){
  .pgal{gap:30px;}
  .pcard{flex:1 1 100%;}
  .pcard figcaption{font-size:15px;}
}

/* ---------- contact ---------- */
.cta{border-top:1px solid var(--line-soft);
     background:linear-gradient(180deg,rgba(198,167,89,.055),transparent 70%);}
.cta-in{text-align:center;}
.cta-in .lead{margin:16px auto 0;}
.cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px;}
.c-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4.5vw,64px);align-items:start;}
.c-list{list-style:none;}
.c-list li{padding:17px 0;border-bottom:1px solid var(--line-soft);}
.c-list li:first-child{padding-top:0;}
.c-list a,.c-list .v{display:block;margin-top:5px;font-size:clamp(18px,2.1vw,23px);
                     font-weight:700;letter-spacing:-.01em;}
.c-list a:hover{color:var(--gold);}
.c-list .g{color:var(--gold);}
@media(max-width:860px){ .c-grid{grid-template-columns:1fr;} }

/* ---------- form ---------- */
form.cf{display:grid;gap:4px;}
form.cf label{margin-top:15px;}
form.cf input,form.cf select,form.cf textarea{
  width:100%;font:400 16px/1.4 inherit;font-family:inherit;color:var(--white);
  background:var(--black-2);border:1px solid var(--line);border-radius:var(--r-md);
  padding:14px 16px;min-height:52px;
  transition:border-color .2s var(--ease),background .2s var(--ease);}
form.cf textarea{min-height:120px;resize:vertical;}
form.cf input::placeholder,form.cf textarea::placeholder{color:#6B6B6B;}
form.cf input:focus,form.cf select:focus,form.cf textarea:focus{
  outline:none;border-color:var(--gold);background:var(--black-3);}
form.cf select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),
                   linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 21px) 23px,calc(100% - 15px) 23px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:44px;}
form.cf option{background:#121212;color:#FFFFFF;}
form.cf .btn{margin-top:24px;}

/* ---------- thank you ---------- */
.ty{min-height:66vh;display:flex;align-items:center;}
.ty .lead{margin-top:16px;}
.ty .hero-btns{margin-top:28px;}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line-soft);padding-block:clamp(34px,4vw,52px);}
.f-grid{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.f-word{height:26px;width:auto;}
.social{display:flex;gap:8px;flex-wrap:wrap;}
.social a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;
  border:1px solid var(--line-soft);border-radius:var(--r-pill);font-size:14px;
  color:var(--dim);transition:color .2s var(--ease),border-color .2s var(--ease);}
.social a:hover{color:var(--gold);border-color:var(--gold-dim);}
.fine{margin-top:26px;padding-top:22px;border-top:1px solid var(--line-soft);
      display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
      font-size:12px;color:var(--faint);letter-spacing:.03em;}

/* Phones: the wordmark repeats the header logo and eats a whole row, so the
   footer drops to the social links alone, spanning the full width as three
   equal columns with each label centred — no one platform looks weightier.
   MUST stay after the base footer rules above — a media query adds no
   specificity, so anything declared later would override it. */
@media(max-width:760px){
  .f-word{display:none;}
  .f-grid{flex-wrap:nowrap;gap:0;}
  .social{flex:1 1 auto;min-width:0;display:grid;
          grid-template-columns:repeat(3,1fr);gap:8px;}
  .social a{display:flex;justify-content:center;text-align:center;
            padding:0 6px;font-size:13px;}
  .fine{margin-top:20px;padding-top:18px;}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;}
  html{scroll-behavior:auto;}
}