/* ═══════════════════════════════════════════════════════════
   DJ BENJ MICHELSON
   Near-black ground · bright bone type · one electric green accent.
   Rounded, friendly display type against the sharp deco wordmark.
   ═══════════════════════════════════════════════════════════ */

:root{
  --ink:      #080A09;
  --ink-2:    #101412;
  --ink-3:    #19201C;
  --bone:     #F4F1EA;
  --bone-dim: #C7C3B9;
  --acid:     #3FE07F;
  --acid-2:   #8BF2B0;
  --line:     rgba(244,241,234,.22);
  --line-2:   rgba(244,241,234,.11);

  --display: "Fredoka", "Trebuchet MS", sans-serif;
  --label:   "Figtree", "Helvetica Neue", sans-serif;
  --body:    "Figtree", "Helvetica Neue", sans-serif;

  --pad: clamp(1.25rem, 4vw, 4.5rem);
  --max: 1440px;
  --ease: cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing:border-box }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip }

body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--body);
  font-size:clamp(1.0625rem,1rem + .4vw,1.3rem);
  font-weight:400;
  line-height:1.6;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
::selection{ background:var(--acid); color:var(--ink) }

.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--pad) }

.sr-only{
  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:200;
  background:var(--acid); color:var(--ink); padding:.75rem 1.25rem;
  font-family:var(--label); font-size:.75rem;
}
.skip:focus{ left:0 }

:focus-visible{ outline:2px solid var(--acid); outline-offset:3px }

/* ── atmosphere ─────────────────────────────────────────── */

.grain{
  position:fixed; inset:-120%; z-index:90; pointer-events:none;
  opacity:.055; mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 900ms steps(3) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 33%{transform:translate(-3%,2%)} 66%{transform:translate(2%,-3%)} 100%{transform:translate(0,0)}
}

.vignette{
  position:fixed; inset:0; z-index:89; pointer-events:none;
  background:radial-gradient(120% 80% at 50% 40%, transparent 40%, rgba(0,0,0,.55) 100%);
}

.scroll-rail{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:120;
  background:var(--line-2); pointer-events:none;
}
.scroll-rail span{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--acid),var(--acid-2));
  box-shadow:0 0 12px rgba(63,224,127,.65);
}

/* ── duotone treatment ──────────────────────────────────── */

/* partial duotone: a green multiply laid OVER the photo at part strength,
   so highlights take the green but the photograph still reads as a photograph.
   Strength is one number — bump --wash to push it further. */
.duo{
  position:relative; overflow:hidden; isolation:isolate;
  background:#080A09; --wash:.5;
}
.duo > img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.06);
  transition:filter .7s var(--ease), transform 1.1s var(--ease);
}
.duo::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:linear-gradient(158deg, #6FEFA6 0%, #23B268 48%, #072118 100%);
  mix-blend-mode:multiply; opacity:var(--wash);
  transition:opacity .6s var(--ease);
}
.duo::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:linear-gradient(180deg, rgba(8,10,9,.04), rgba(8,10,9,.42));
  transition:opacity .6s var(--ease);
}

/* ── shared type ────────────────────────────────────────── */

.tag{
  font-family:var(--label); font-size:.85rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--acid);
  margin:0 0 1.5rem;
}
.display{
  font-family:var(--display); font-weight:700;
  font-size:clamp(2.9rem,8vw,7rem); line-height:.92;
  letter-spacing:-.005em; text-transform:uppercase; margin:0;
}
.head{ margin-bottom:clamp(2.5rem,6vw,5rem) }

.btn{
  --bg:var(--acid);
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  gap:.6rem; padding:1.05rem 2.4rem; border:0; cursor:pointer;
  background:var(--bg); color:var(--ink);
  font-family:var(--label); font-size:.85rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  clip-path:polygon(14px 0,100% 0,calc(100% - 14px) 100%,0 100%);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), background .3s;
}
.btn:hover{ transform:translateY(-3px); box-shadow:0 12px 34px -10px rgba(63,224,127,.6); background:var(--acid-2) }
.btn:active{ transform:translateY(0) }
.btn--sm{ padding:.75rem 1.5rem; font-size:.78rem }
.btn--block{ width:100%; padding:1.25rem; clip-path:polygon(18px 0,100% 0,calc(100% - 18px) 100%,0 100%) }

.handle{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--label); font-size:.9rem; font-weight:600;
  letter-spacing:.04em; color:var(--bone-dim); transition:color .3s;
}
.handle svg{ width:1.1em; height:1.1em; fill:none; stroke:currentColor; stroke-width:1.6 }
.handle:hover{ color:var(--acid) }
.handle--lg{ font-size:1.05rem; color:var(--bone) }

/* ── nav ────────────────────────────────────────────────── */

.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; gap:2rem;
  padding:1.15rem var(--pad);
  transition:background .5s var(--ease), backdrop-filter .5s, border-color .5s, padding .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(8,10,9,.85); backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--line-2); padding-block:.7rem;
}
.nav__links{ display:flex; gap:2.25rem; margin-right:auto }
.nav__links a{
  position:relative; font-family:var(--label); font-size:.9rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--bone-dim);
  display:inline-flex; align-items:baseline; gap:.45rem; padding-block:.35rem;
  transition:color .3s;
}
.nav__links .idx{ font-size:.7rem; font-weight:700; color:var(--acid) }
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--acid); transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav__links a:hover{ color:var(--bone) }
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left }

.burger{
  display:none; margin-left:auto; width:44px; height:44px; padding:0;
  background:none; border:1px solid var(--line); cursor:pointer;
  position:relative;
}
.burger span{
  position:absolute; left:12px; width:20px; height:1.5px; background:var(--bone);
  transition:transform .4s var(--ease), opacity .3s;
}
.burger span:nth-child(1){ top:18px } .burger span:nth-child(2){ top:25px }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(3.5px) rotate(45deg) }
.burger[aria-expanded="true"] span:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg) }

.drawer{
  position:fixed; inset:0; z-index:99; background:var(--ink);
  display:flex; flex-direction:column; justify-content:center;
  padding:0 var(--pad); gap:2rem;
}
.drawer[hidden]{ display:none }
.drawer nav{ display:flex; flex-direction:column }
.drawer nav a{
  font-family:var(--display); font-weight:600; text-transform:uppercase;
  font-size:clamp(1.9rem,9vw,3.4rem); line-height:1.15;
  border-bottom:1px solid var(--line-2); padding:.35em 0;
  display:flex; align-items:baseline; gap:1rem;
  opacity:0; transform:translateY(20px);
  animation:drawerIn .6s var(--ease) forwards;
}
.drawer nav a:nth-child(1){animation-delay:.05s} .drawer nav a:nth-child(2){animation-delay:.1s}
.drawer nav a:nth-child(3){animation-delay:.15s} .drawer nav a:nth-child(4){animation-delay:.2s}
.drawer nav a:nth-child(5){animation-delay:.25s}
.drawer .idx{ font-family:var(--label); font-size:.8rem; font-weight:700; color:var(--acid) }
.drawer__ig{ font-family:var(--label); font-size:.95rem; font-weight:700; color:var(--acid); letter-spacing:.06em }
@keyframes drawerIn{ to{ opacity:1; transform:none } }

/* ── hero ───────────────────────────────────────────────── */

.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:flex-end;
  padding:7.5rem var(--pad) 3.25rem;
  overflow:hidden;
  isolation:isolate;   /* contains the wordmark's screen blend to the hero */
}
.hero__media{
  position:absolute; inset:0; z-index:0; background:var(--acid);
}
.hero__media{ --wash:.72 }
.hero__media img{ animation:heroPan 22s var(--ease) forwards;
  filter:grayscale(1) contrast(1.12) brightness(.98); }
.hero__media::after{
  background:
    linear-gradient(180deg, rgba(8,10,9,.7) 0%, rgba(8,10,9,.34) 35%, rgba(8,10,9,.88) 85%, var(--ink) 100%),
    linear-gradient(90deg, rgba(8,10,9,.82), transparent 68%);
}
@keyframes heroPan{ from{ transform:scale(1.14) } to{ transform:scale(1) } }

.hero__chev{
  position:absolute; right:calc(var(--pad) * -.4); top:22%; z-index:0;
  width:min(46vw,620px); height:auto; color:var(--acid); opacity:.4;
  animation:chev 9s ease-in-out infinite;
}
@keyframes chev{ 0%,100%{ transform:translateX(0); opacity:.4 } 50%{ transform:translateX(-18px); opacity:.72 } }

.hero__inner{ position:relative; width:100%; max-width:var(--max); margin-inline:auto }

.kicker{
  display:flex; flex-wrap:wrap; align-items:center; gap:.85rem;
  font-family:var(--label); font-size:.85rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--bone);
  margin:0 0 2rem;
}
.kicker i{ color:var(--acid); font-style:normal }

.hero__title{ margin:0 }
/* wordmark.png has a real alpha channel — no blend mode, so it stays
   transparent everywhere including iOS Safari */
.hero__logo{
  width:min(100%,1040px); margin-left:0;
  height:auto; max-height:34svh; object-fit:contain; object-position:left center;
  filter:drop-shadow(0 14px 44px rgba(0,0,0,.45));
  /* clip-path wipe rather than opacity: opacity would isolate the blend */
  clip-path:inset(0 100% 0 0);
  animation:wipe 1.1s .15s var(--ease) forwards;
}
@keyframes wipe{ to{ clip-path:inset(0 0 0 0) } }

.hero__rule{
  display:flex; align-items:center; gap:1rem;
  margin:1.75rem 0 0; padding-top:1.4rem; border-top:1px solid var(--line);
  font-family:var(--display); font-weight:600; text-transform:uppercase;
  font-size:clamp(1.05rem,2.8vw,1.85rem); letter-spacing:.04em;
  color:var(--bone);
}
.hero__rule span:not(:last-child)::after{
  content:"·"; color:var(--acid); margin-left:1rem;
}

.hero__lede{
  max-width:46ch; margin:1.5rem 0 2.5rem;
  font-size:clamp(1.15rem,1rem + .75vw,1.6rem); color:var(--bone);
  font-weight:500;
}
.hero__acts{ display:flex; flex-wrap:wrap; align-items:center; gap:2rem }

.hero__scroll{
  position:absolute; right:var(--pad); bottom:3.5rem; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:.75rem;
  font-family:var(--label); font-size:.72rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--bone-dim);
  writing-mode:vertical-rl;
}
.hero__scroll i{
  width:1px; height:56px; background:linear-gradient(var(--acid),transparent);
  animation:drop 2.2s var(--ease) infinite;
}
@keyframes drop{ 0%{transform:scaleY(0);transform-origin:top} 45%{transform:scaleY(1);transform-origin:top} 55%{transform:scaleY(1);transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }

/* ── ticker ─────────────────────────────────────────────── */

.ticker{
  border-block:1px solid var(--line); background:var(--ink-2);
  overflow:hidden; padding:.9rem 0;
}
.ticker__track{ display:flex; width:max-content; animation:slide 34s linear infinite }
.ticker__track span{
  font-family:var(--display); font-weight:600; text-transform:uppercase;
  font-size:clamp(1.4rem,3.2vw,2.4rem); letter-spacing:.01em;
  color:var(--bone); white-space:nowrap; padding-right:1.5rem;
}
.ticker__track b{ color:var(--acid); padding:0 1.5rem; font-weight:400 }
@keyframes slide{ to{ transform:translateX(-50%) } }

/* ── about ─────────────────────────────────────────────── */

.about{ padding:clamp(5rem,12vw,10rem) 0 }
.about__grid{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(2rem,6vw,6rem) }

.about__fig{ aspect-ratio:4/5; border:1px solid var(--line-2) }
.about__fig img{ transform:scale(1.02) }

.about__body .lede{
  font-size:clamp(1.3rem,1.05rem + .95vw,1.9rem); line-height:1.42;
  font-weight:500; color:var(--bone); margin:0 0 2rem; text-wrap:pretty;
}
.about__body .lede::first-letter{
  float:left; font-family:var(--display); font-weight:700; color:var(--acid);
  font-size:3em; line-height:.86; padding:.02em .1em 0 0;
}
.about__body p{ color:var(--bone-dim); max-width:62ch; margin:0 0 1.5rem; font-weight:400 }

.stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1rem;
  margin:3.5rem 0 0; padding-top:2rem; border-top:1px solid var(--line);
}
.stats dt{
  font-family:var(--label); font-size:.8rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--bone-dim); margin-bottom:.5rem;
}
.stats dd{
  margin:0; font-family:var(--display); font-weight:700;
  font-size:clamp(1.9rem,4.4vw,3.4rem); line-height:1; color:var(--bone);
}
.stats dd span{ color:var(--acid) }

/* ── services ──────────────────────────────────────────── */

.services{ padding:clamp(4rem,10vw,8rem) 0; border-top:1px solid var(--line-2) }
.svc{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line) }
.svc__row{ border-bottom:1px solid var(--line); position:relative }

.svc__btn{
  position:relative; z-index:1; width:100%; display:flex; align-items:center;
  gap:clamp(1rem,4vw,3rem); padding:clamp(1.1rem,2.6vw,2rem) 0;
  background:none; border:0; cursor:pointer; color:var(--bone);
  text-align:left; transition:color .45s var(--ease), padding-inline .5s var(--ease);
}
.svc__row::before{
  content:""; position:absolute; inset:0; background:var(--acid);
  transform:scaleY(0); transform-origin:bottom;
  transition:transform .55s var(--ease);
}
.svc__row:hover::before,
.svc__row.is-open::before{ transform:scaleY(1); transform-origin:top }
.svc__row:hover .svc__btn,
.svc__row.is-open .svc__btn{ color:var(--ink); padding-inline:clamp(1rem,2.5vw,2rem) }

.svc__no{
  font-family:var(--label); font-size:.85rem; font-weight:700; letter-spacing:.08em;
  color:var(--acid); flex:none; transition:color .45s;
}
.svc__row:hover .svc__no,
.svc__row.is-open .svc__no{ color:var(--ink) }

.svc__name{
  font-family:var(--display); font-weight:600; text-transform:uppercase;
  font-size:clamp(1.5rem,4.2vw,3.2rem); line-height:1.02; letter-spacing:-.005em;
  flex:1 1 auto;
}
.svc__mark{
  flex:none; width:34px; height:34px; position:relative;
  border:1px solid currentColor; border-radius:50%; opacity:.5;
  transition:opacity .4s, transform .55s var(--ease);
}
.svc__mark::before,.svc__mark::after{
  content:""; position:absolute; inset:0; margin:auto;
  background:currentColor;
}
.svc__mark::before{ width:12px; height:1.5px }
.svc__mark::after{ width:1.5px; height:12px; transition:transform .5s var(--ease) }
.svc__row.is-open .svc__mark{ opacity:1; transform:rotate(180deg) }
.svc__row.is-open .svc__mark::after{ transform:scaleY(0) }
.svc__row:hover .svc__mark{ opacity:1 }

.svc__panel{
  position:relative; z-index:1;
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .6s var(--ease);
}
.svc__row.is-open .svc__panel{ grid-template-rows:1fr }
.svc__panel > p{
  overflow:hidden; margin:0; max-width:64ch; color:var(--ink);
  padding-inline:clamp(1rem,2.5vw,2rem);
  font-size:1.1rem; font-weight:500;
  opacity:0; transition:opacity .4s .1s, padding-bottom .5s var(--ease);
}
.svc__row.is-open .svc__panel > p{ opacity:1; padding-bottom:clamp(1.4rem,3vw,2.4rem) }

/* ── testimonials (carousel) ───────────────────────────── */

.quote{ position:relative; padding:clamp(4.5rem,10vw,8rem) 0; overflow:hidden }
.quote__bg{ position:absolute; inset:0; z-index:0; --wash:.65 }
.quote__bg::after{ background:rgba(8,10,9,.93) }
.quote__bg > img{ filter:grayscale(1) contrast(1.05) brightness(.8) }
.quote__inner{ position:relative; z-index:1 }

.car{ position:relative }

/* native scroll-snap: swipe works on touch, arrow keys work on desktop */
.car__track{
  list-style:none; margin:0; padding:0 0 .5rem;
  display:flex; align-items:stretch; gap:clamp(.9rem,1.8vw,1.5rem);
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:none;
}
.car__track::-webkit-scrollbar{ display:none }
.car__track:focus-visible{ outline:2px solid var(--acid); outline-offset:6px }

.qcard{
  flex:0 0 100%;                 /* exactly one testimonial per slide */
  scroll-snap-align:start;
  display:flex;
  background:rgba(19,21,20,.72); backdrop-filter:blur(3px);
  border:1px solid var(--line-2);
  padding:clamp(1.9rem,3.6vw,2.9rem) clamp(1.5rem,4vw,3rem);
  transition:border-color .4s var(--ease);
}
.qcard blockquote{
  margin:0; width:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
}
/* decorative opening mark, sized off the quote itself */
.qcard blockquote::before{
  content:"\201C"; display:block;
  font-family:var(--display); font-weight:700; color:var(--acid);
  font-size:clamp(2.75rem,5.5vw,4rem); line-height:.62; margin-bottom:.28em;
}
.qcard blockquote p{
  margin:0; max-width:60ch; color:var(--bone);
  font-weight:500; font-size:clamp(1.25rem,1.02rem + .92vw,1.75rem);
  line-height:1.45; text-wrap:pretty;
}
.qcard footer{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.9rem;
  margin-top:clamp(1.75rem,3vw,2.5rem);
  font-family:var(--label); font-size:.82rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--bone-dim);
}
.qcard footer i{ width:28px; height:1px; background:var(--acid); flex:none }
.qcard footer span:first-child{ color:var(--acid) }

/* controls */
.car__ui{
  display:flex; align-items:center; justify-content:center; gap:1.5rem;
  margin-top:clamp(1.75rem,3.5vw,2.75rem);
}
.car__btn{
  flex:none; width:52px; height:52px; padding:0; cursor:pointer;
  background:none; border:1px solid var(--line); color:var(--bone);
  display:grid; place-items:center;
  transition:background .35s, color .35s, border-color .35s, opacity .35s;
}
.car__btn svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2 }
.car__btn:hover:not(:disabled){ background:var(--acid); color:var(--ink); border-color:var(--acid) }
.car__btn:disabled{ opacity:.28; cursor:default }

.car__dots{ display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem }
.car__dots button{
  width:9px; height:9px; padding:0; border:0; cursor:pointer; border-radius:50%;
  background:var(--line); transition:background .35s, transform .35s var(--ease);
}
.car__dots button:hover{ background:var(--bone-dim) }
.car__dots button[aria-selected="true"]{ background:var(--acid); transform:scale(1.45) }

/* ── gallery ───────────────────────────────────────────── */

.gal{ padding:clamp(4rem,10vw,8rem) 0; border-top:1px solid var(--line-2) }
.gal__grid{
  columns:3; column-gap:clamp(.5rem,1.2vw,1rem);
  padding-inline:var(--pad); max-width:var(--max); margin-inline:auto;
}
.gal__it{
  break-inside:avoid; display:block; cursor:pointer;
  margin:0 0 clamp(.5rem,1.2vw,1rem);
  border:1px solid var(--line-2);
}
/* height comes from the photo itself, so nothing gets cropped */
.gal__it > img{ height:auto }
.gal__it:hover::after,
.gal__it:hover::before{ opacity:0 }
.gal__it:hover > img{ filter:none; transform:scale(1.04) }

/* ── contact ───────────────────────────────────────────── */

.contact{ padding:clamp(5rem,12vw,10rem) 0; border-top:1px solid var(--line-2) }
.contact__grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(2.5rem,7vw,7rem);
}
.contact__h{ font-size:clamp(2.5rem,6vw,5.2rem); margin-bottom:1.5rem }
.contact__h em{ font-style:normal; color:var(--acid) }
.contact__note{ color:var(--bone-dim); font-weight:500; margin:0 0 2rem }

.cdetails{ list-style:none; margin:0; padding:0; align-self:start }
.cdetail{
  display:grid; grid-template-columns:1fr auto; align-items:center;
  gap:.4rem 1.5rem;
  padding:clamp(1.4rem,3vw,2rem) 0;
  border-top:1px solid var(--line);
}
.cdetail:last-child{ border-bottom:1px solid var(--line) }

.cdetail__label{
  grid-column:1/-1; margin:0 0 .35rem;
  font-family:var(--label); font-size:.78rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--bone-dim);
}
.cdetail__label i{ color:var(--acid); font-style:normal; margin:0 .15em }

.cdetail__value{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.45rem,1.1rem + 1.5vw,2.5rem); line-height:1.1;
  color:var(--bone); letter-spacing:.005em;
  transition:color .3s;
}
.cdetail__value:hover{ color:var(--acid) }
.cdetail__value--mail{
  font-size:clamp(1.05rem,.85rem + 1.05vw,1.75rem);
  overflow-wrap:anywhere;
}

.cdetail__wa{
  display:inline-flex; align-items:center; gap:.5rem; flex:none;
  padding:.6rem 1.1rem;
  border:1px solid var(--line); color:var(--bone-dim);
  font-family:var(--label); font-size:.75rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  transition:background .3s, color .3s, border-color .3s, transform .3s var(--ease);
}
.cdetail__wa svg{ width:1.15em; height:1.15em; fill:currentColor }
.cdetail__wa:hover{
  background:var(--acid); color:var(--ink); border-color:var(--acid);
  transform:translateY(-2px);
}

/* ── footer ────────────────────────────────────────────── */

.foot{
  position:relative; border-top:1px solid var(--line-2);
  padding:clamp(3rem,7vw,5rem) 0 2.5rem; overflow:hidden;
}
.foot__mark{
  width:min(100%,900px); margin:0 auto 2.25rem; opacity:.13;
  pointer-events:none;
}
.foot__bar{
  display:flex; flex-wrap:wrap; align-items:center; gap:1.25rem 2rem;
  font-family:var(--label); font-size:.82rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--bone-dim);
}
.foot__bar p{ margin:0 }
.foot__bar a:hover{ color:var(--acid) }
.foot__top{ margin-left:auto }

/* ── lightbox ──────────────────────────────────────────── */

.lb{
  position:fixed; inset:0; z-index:150; background:rgba(6,5,5,.96);
  display:flex; align-items:center; justify-content:center; padding:5vmin;
  backdrop-filter:blur(6px); animation:pop .35s var(--ease);
}
.lb[hidden]{ display:none }
.lb img{ max-width:100%; max-height:90vh; object-fit:contain; border:1px solid var(--line) }
.lb__x,.lb__nav{
  position:absolute; background:none; border:1px solid var(--line);
  color:var(--bone); cursor:pointer; font-size:1.5rem; line-height:1;
  width:52px; height:52px; transition:background .3s, color .3s, border-color .3s;
}
.lb__x:hover,.lb__nav:hover{ background:var(--acid); color:var(--ink); border-color:var(--acid) }
.lb__x{ top:4vmin; right:4vmin; font-size:1rem }
.lb__nav{ top:50%; transform:translateY(-50%); font-size:2rem }
.lb__nav--p{ left:2vmin } .lb__nav--n{ right:2vmin }

/* ── reveal ────────────────────────────────────────────── */

.r{ opacity:0; transform:translateY(28px); }
.r.in{
  opacity:1; transform:none;
  transition:opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay:calc(var(--d,0) * 110ms);
}

/* ── responsive ────────────────────────────────────────── */

@media (max-width:1000px){
  .about__grid,.contact__grid{ grid-template-columns:1fr }
  .about__side{ display:block }
  /* portrait source — a 16/9 crop cut his face off entirely */
  .about__fig{ aspect-ratio:3/4; width:100%; margin:0 }
  .about__fig img{ object-position:center 20% }
  .gal__grid{ columns:2 }
  .hero__chev{ opacity:.22 }
}

@media (max-width:760px){
  .nav__links,.nav__cta{ display:none }
  .burger{ display:block }
  .hero{ padding-top:7rem; align-items:center }
  .hero__scroll{ display:none }
  .hero__chev{ display:none }   /* too busy behind the kicker at this width */
  .hero__rule{ flex-wrap:wrap; gap:.5rem }
  .hero__rule span:not(:last-child)::after{ margin-left:.5rem }
  .form{ grid-template-columns:1fr }
  .gal__grid{ columns:1 }
  .car__ui{ gap:1rem }
  /* give the phone number the full width instead of letting it wrap */
  .cdetail{ grid-template-columns:1fr }
  .cdetail__value{ white-space:nowrap }
  .cdetail__value--mail{ white-space:normal }
  .cdetail__wa{ justify-self:start; margin-top:1rem }
  .car__dots{ gap:.5rem }
  .svc__mark{ display:none }
  .stats dd{ font-size:1.9rem }
  .lb__nav{ width:44px; height:44px }
}

/* services: always open on touch, since hover doesn't exist */
@media (hover:none){
  .svc__row .svc__panel{ grid-template-rows:1fr }
  .svc__panel > p{ opacity:1; padding-bottom:1.4rem; color:var(--bone-dim) }
  .svc__row::before{ display:none }
  .svc__btn{ color:var(--bone) }
  .svc__mark{ display:none }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .r{ opacity:1; transform:none }
  .grain{ display:none }
}