/* =========================================================
   Danny Salvador — portfolio
   Concept: the page is one workflow. Sections are nodes on a
   single wire that lights up as you scroll.
   ========================================================= */

:root{
  /* canvas */
  --canvas:      #0B0F0C;
  --canvas-2:    #101610;
  --panel:       #131A14;
  --wire:        #2A3B2E;
  --wire-soft:   #1C271E;

  /* ink */
  --bone:        #EDEBE0;
  --bone-dim:    #C9C7BC;
  --slate:       #8A9188;

  /* signal */
  --lime:        #AEDA09;
  --lime-deep:   #7E9E12;
  --lime-glow:   rgba(174, 218, 9, .16);

  /* type */
  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body:    "Newsreader", Georgia, "Times New Roman", serif;
  --mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* metrics */
  --rail-x:  40px;
  --gutter:  96px;
  --max:     1180px;
  --nav-h:   72px;

  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;

  --ease: cubic-bezier(.2,.7,.3,1);
}

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

html{ scroll-behavior:smooth; scroll-padding-top: calc(var(--nav-h) + 24px); }

body{
  margin:0;
  background:var(--canvas);
  color:var(--bone);
  font-family:var(--body);
  font-size:clamp(16px, .55vw + 14.4px, 18px);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* faint workflow-canvas dot grid */
body::before{
  content:"";
  position:fixed; inset:0;
  background-image:radial-gradient(rgba(237,235,224,.055) 1px, transparent 1px);
  background-size:26px 26px;
  pointer-events:none;
  z-index:0;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

::selection{ background:var(--lime); color:#0B0F0C; }

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

.skip{
  position:absolute; left:-9999px; top:0;
  background:var(--lime); color:#0B0F0C;
  padding:10px 16px; font-family:var(--mono); font-size:13px; z-index:200;
}
.skip:focus{ left:12px; top:12px; }

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

.eyebrow{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--lime);
  margin:0 0 18px;
}
.eyebrow::before{
  content:"◆ ";
  color:var(--lime-deep);
  font-size:9px;
  vertical-align:2px;
}

.lead{
  font-size:clamp(18px, 1.1vw + 15px, 22px);
  line-height:1.55;
  color:var(--bone-dim);
  max-width:42ch;
  margin:0 0 34px;
}

/* ── buttons ─────────────────────────────────────────── */

.btn{
  --btn-fs:14px;
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--mono); font-size:var(--btn-fs); font-weight:500;
  letter-spacing:.02em;
  padding:12px 20px;
  border-radius:var(--r-sm);
  text-decoration:none;
  border:1px solid transparent;
  transition:transform .18s var(--ease), background-color .18s var(--ease),
             border-color .18s var(--ease), color .18s var(--ease);
  white-space:nowrap;
}
.btn--lg{ --btn-fs:15px; padding:15px 26px; }

.btn--solid{ background:var(--lime); color:#0B0F0C; font-weight:700; }
.btn--solid:hover{ background:#C3F216; transform:translateY(-2px); }

.btn--line{ border-color:var(--wire); color:var(--bone); }
.btn--line:hover{ border-color:var(--lime); color:var(--lime); transform:translateY(-2px); }

.btn--ghost{ color:var(--slate); padding-inline:12px; }
.btn--ghost:hover{ color:var(--bone); }

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

.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(11,15,12,.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s var(--ease), background-color .25s var(--ease);
}
.nav.is-scrolled{ border-bottom-color:var(--wire-soft); background:rgba(11,15,12,.9); }

.nav__inner{
  max-width:var(--max);
  margin:0 auto;
  height:var(--nav-h);
  padding:0 28px;
  display:flex; align-items:center; gap:28px;
}

.brand{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:13px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  text-decoration:none;
  margin-right:auto;
}
.brand__dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--lime);
  box-shadow:0 0 0 4px var(--lime-glow);
}

.nav__links{ display:flex; gap:26px; }
.nav__links a{
  font-family:var(--mono); font-size:13px; color:var(--slate);
  text-decoration:none; position:relative; padding-block:6px;
  transition:color .18s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:1px; background:var(--lime);
  transform:scaleX(0); transform-origin:right;
  transition:transform .28s var(--ease);
}
.nav__links a:hover{ color:var(--bone); }
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav__links a.is-active{ color:var(--lime); }

.nav__actions{ display:flex; align-items:center; gap:8px; }

.nav__toggle{
  display:none;
  width:42px; height:42px;
  background:none; border:1px solid var(--wire); border-radius:var(--r-sm);
  cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.nav__toggle span{ display:block; width:16px; height:1.5px; background:var(--bone); transition:transform .2s var(--ease), opacity .2s; }
.nav__toggle[aria-expanded="true"] span:first-child{ transform:translateY(3.25px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child{ transform:translateY(-3.25px) rotate(-45deg); }

.nav__menu{
  border-top:1px solid var(--wire-soft);
  border-bottom:1px solid var(--wire);
  padding:14px 28px 22px;
  display:grid; gap:2px;
  background:rgba(11,15,12,.98);
  box-shadow:0 24px 40px rgba(0,0,0,.5);
}
.nav__menu[hidden]{ display:none; }
.nav__menu a{
  font-family:var(--mono); font-size:15px; color:var(--bone-dim);
  text-decoration:none; padding:12px 0;
  border-bottom:1px solid var(--wire-soft);
}
.nav__menu-cta{
  margin-top:14px; border-bottom:0 !important;
  background:var(--lime); color:#0B0F0C !important; font-weight:700;
  text-align:center; border-radius:var(--r-sm); padding:14px 0 !important;
}

/* ── shell + the wire ────────────────────────────────── */

.shell{
  position:relative;
  max-width:var(--max);
  margin:0 auto;
  padding:0 28px 0 var(--gutter);
  z-index:1;
}

.rail{
  position:absolute;
  left:var(--rail-x); top:0; bottom:0; width:1px;
}
.rail__line{
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 0, var(--wire) 90px, var(--wire) calc(100% - 120px), transparent 100%);
}
.rail__progress{
  position:absolute; top:0; left:0; width:1px; height:0;
  background:linear-gradient(180deg, transparent 0, var(--lime-deep) 90px, var(--lime) 100%);
  box-shadow:0 0 12px var(--lime-glow);
}

.node{
  position:absolute;
  left:calc(0px - var(--gutter) + var(--rail-x) - 4px);
  top:var(--node-top, 118px);
  width:9px; height:9px;
  border-radius:50%;
  background:var(--canvas);
  border:1px solid var(--wire);
  transition:border-color .3s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.node--end{ border-radius:2px; transform:rotate(45deg); }
.section > .node{ top:calc(clamp(72px, 9vw, 128px) + 4px); }

.section.is-live > .node,
.hero.is-live > .node{
  background:var(--lime);
  border-color:var(--lime);
  box-shadow:0 0 0 5px var(--lime-glow);
}

/* ── section rhythm ──────────────────────────────────── */

.section{
  position:relative;
  padding-block:clamp(72px, 9vw, 128px);
  border-top:1px solid var(--wire-soft);
}
.section--last{ padding-bottom:clamp(96px, 11vw, 160px); }

.section__head{ max-width:48ch; margin-bottom:clamp(36px, 4vw, 56px); }

.section__title{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(30px, 3.4vw, 50px);
  line-height:1.06;
  letter-spacing:-.025em;
  margin:0;
}
.section__sub{
  color:var(--slate);
  font-size:17px;
  margin:14px 0 0;
}

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

.hero{
  position:relative;
  --node-top:calc(var(--nav-h) + 60px);
  padding-top:calc(var(--nav-h) + 48px);
  padding-bottom:clamp(72px, 9vw, 120px);
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(32px, 5vw, 72px);
  align-items:center;
}

.hero__title{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(38px, 5.6vw, 76px);
  line-height:.98;
  letter-spacing:-.035em;
  margin:0 0 24px;
  text-wrap:balance;
}
.hero__title em{
  font-style:normal;
  color:var(--lime);
  position:relative;
  white-space:nowrap;
}
.hero__title em::after{
  content:"";
  position:absolute; left:0; right:0; bottom:.1em;
  height:2px; background:var(--lime); opacity:.35;
}

.hero__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:44px; }

.hero__stats{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px,1fr));
  gap:20px 28px;
  margin:0;
  padding-top:26px;
  border-top:1px solid var(--wire-soft);
}
.hero__stats dt{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--slate); margin-bottom:6px;
}
.hero__stats dd{
  margin:0; font-family:var(--display); font-weight:500;
  font-size:16px; line-height:1.3; color:var(--bone);
}

.hero__figure{ justify-self:center; width:100%; max-width:400px; }

.portrait{
  position:relative;
  aspect-ratio:1;
  border-radius:50%;
  overflow:hidden;
  /* matches the backdrop baked into the source photo, so the crop has no seam */
  background:#211E20;
}
.portrait img{ width:100%; height:100%; object-fit:cover; object-position:center top; }
.portrait__ring{
  position:absolute; inset:0;
  border-radius:50%;
  border:1px solid var(--wire);
  box-shadow:inset 0 0 60px rgba(174,218,9,.07);
}
.portrait__tag{
  display:flex; align-items:center; gap:9px;
  justify-content:center;
  font-family:var(--mono); font-size:12px; letter-spacing:.06em;
  color:var(--slate);
  margin:20px 0 0;
}
.pulse{
  width:7px; height:7px; border-radius:50%; background:var(--lime);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(174,218,9,.5); }
  50%    { box-shadow:0 0 0 6px rgba(174,218,9,0); }
}

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

.about{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(28px, 4vw, 64px);
  align-items:start;
}
.about__figure{ margin:0; }
.about__figure img{
  width:100%; height:auto;
  /* the photo sits on its own light plate, so the frame matches it */
  background:#EBEBEB;
}

/* ── hire-me hover ───────────────────────────────────────
   Reuses the page's wire language: a lime line runs out of a
   port and terminates in the Hire me node. No new vocabulary.
   ------------------------------------------------------- */

.hire{
  position:relative;
  display:block;
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.45);
  isolation:isolate;
}
.hire img{
  transition:transform .6s var(--ease), filter .4s var(--ease);
}

.hire__scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(11,15,12,0) 40%, rgba(11,15,12,.5) 70%, rgba(11,15,12,.93) 100%);
  opacity:0;
  transition:opacity .4s var(--ease);
}

.hire__port{
  position:absolute; left:8px; bottom:41px;
  width:9px; height:9px; border-radius:50%;
  background:var(--lime);
  box-shadow:0 0 0 5px rgba(174,218,9,.18);
  opacity:0; transform:scale(.4);
  transition:opacity .25s var(--ease), transform .25s var(--ease);
}

.hire__wire{
  position:absolute; left:13px; bottom:45px;
  height:1px; width:0;
  background:var(--lime);
  box-shadow:0 0 10px rgba(174,218,9,.55);
  transition:width .42s var(--ease);
}

.hire__chip{
  position:absolute; left:26px; bottom:24px;
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--mono); font-size:13px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  color:#0B0F0C; background:var(--lime);
  padding:12px 18px; border-radius:var(--r-sm);
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  opacity:0; transform:translateY(10px);
  transition:opacity .3s var(--ease) .1s, transform .3s var(--ease) .1s,
             background-color .2s var(--ease);
}
.hire__chip svg{ width:16px; height:16px; transition:transform .3s var(--ease); }

/* pointer devices get the reveal; keyboard focus gets it too */
@media (hover:hover){
  .hire:hover img,
  .hire:focus-visible img{ transform:scale(1.04); filter:saturate(1.08); }

  .hire:hover .hire__scrim,
  .hire:focus-visible .hire__scrim{ opacity:1; }

  .hire:hover .hire__port,
  .hire:focus-visible .hire__port{ opacity:1; transform:scale(1); }

  .hire:hover .hire__wire,
  .hire:focus-visible .hire__wire{ width:13px; }

  .hire:hover .hire__chip,
  .hire:focus-visible .hire__chip{ opacity:1; transform:none; }

  .hire:hover .hire__chip svg{ transform:translateX(3px); }
  .hire:hover .hire__chip{ background:#C3F216; }
}

/* touch has no hover, so the invitation is simply always there */
@media (hover:none){
  .hire__scrim{ opacity:1; }
  .hire__chip{ opacity:1; transform:none; }
  .hire__port{ opacity:1; transform:scale(1); }
  .hire__wire{ width:13px; }
}
.about__intro{
  font-size:clamp(19px, 1.3vw + 15px, 25px);
  line-height:1.45;
  margin:0 0 28px;
  color:var(--bone);
  max-width:34ch;
}
.about__note{
  color:var(--slate);
  border-left:1px solid var(--wire);
  padding-left:20px;
  margin:28px 0 30px;
  max-width:46ch;
  font-style:italic;
}
.about__actions{ display:flex; flex-wrap:wrap; gap:12px; }

/* port list — each item is an output on the wire */
.ports{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.ports li{
  position:relative;
  padding-left:26px;
  font-family:var(--display);
  font-weight:500;
  font-size:17px;
  color:var(--bone-dim);
}
.ports li::before{
  content:"";
  position:absolute; left:0; top:.62em;
  width:10px; height:1px; background:var(--lime-deep);
}
.ports li::after{
  content:"";
  position:absolute; left:12px; top:calc(.62em - 2px);
  width:5px; height:5px; border-radius:50%;
  background:var(--lime);
}
.ports--tight{ gap:12px; }
.ports--tight li{ font-size:16px; }

/* ── service cards ───────────────────────────────────── */

.cards{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(268px,1fr));
  gap:14px;
}
.card{
  position:relative;
  background:var(--panel);
  border:1px solid var(--wire-soft);
  border-radius:var(--r-md);
  padding:26px 24px 28px;
  transition:border-color .22s var(--ease), transform .22s var(--ease), background-color .22s var(--ease);
}
.card::before{ /* input port */
  content:"";
  position:absolute; left:-4px; top:34px;
  width:7px; height:7px; border-radius:50%;
  background:var(--wire);
  transition:background-color .22s var(--ease), box-shadow .22s var(--ease);
}
.card:hover{ border-color:var(--wire); transform:translateY(-3px); background:#161E17; }
.card:hover::before{ background:var(--lime); box-shadow:0 0 0 4px var(--lime-glow); }

.card__icon{
  width:26px; height:26px;
  color:var(--lime);
  margin-bottom:20px;
  opacity:.9;
  transition:opacity .22s var(--ease), transform .22s var(--ease);
}
.card:hover .card__icon{ opacity:1; transform:translateY(-1px); }
.card h3{
  font-family:var(--display);
  font-weight:700; font-size:19px; line-height:1.2;
  letter-spacing:-.015em;
  margin:0 0 10px;
}
.card p{
  margin:0; font-size:16px; line-height:1.55; color:var(--slate);
}

/* ── panels (why) ────────────────────────────────────── */

.panels{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px,1fr));
  gap:16px;
}
.panel{
  background:linear-gradient(180deg, #141C15 0%, #0F150F 100%);
  border:1px solid var(--wire-soft);
  border-radius:var(--r-lg);
  padding:clamp(26px, 3vw, 40px);
}
.panel h3{
  font-family:var(--display); font-weight:700;
  font-size:22px; letter-spacing:-.02em;
  margin:0 0 22px;
  color:var(--lime);
}
.panel__kicker{
  margin:26px 0 0; padding-top:20px;
  border-top:1px solid var(--wire-soft);
  font-size:17px; color:var(--bone);
}

/* ── work ────────────────────────────────────────────── */

.work{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px,1fr));
  gap:16px;
}
.work__item a{
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-areas:"shot shot" "meta go";
  align-items:center;
  gap:0 12px;
  text-decoration:none;
  background:var(--panel);
  border:1px solid var(--wire-soft);
  border-radius:var(--r-md);
  padding:12px 12px 6px;
  height:100%;
  transition:border-color .22s var(--ease), transform .22s var(--ease);
}
.work__item a:hover{ border-color:var(--lime-deep); transform:translateY(-3px); }

.work__shot{
  grid-area:shot;
  display:block; overflow:hidden;
  border-radius:var(--r-sm);
  /* the mockups are 1906x1080 on a black field, so the plate is black too */
  background:#000;
  /* wider than the source's 1.765 on purpose: cover then trims only the
     14% of dead black above the devices, never the sides — the tablet
     sits just 2% from the left edge and was getting clipped */
  aspect-ratio:1.95;
}
.work__shot img{
  width:100%; height:100%; object-fit:cover; object-position:center bottom;
  transition:transform .5s var(--ease), filter .3s var(--ease);
  filter:saturate(.85) brightness(.92);
}
.work__item a:hover .work__shot img{ transform:scale(1.04); filter:saturate(1) brightness(1); }

.work__meta{ grid-area:meta; display:block; padding:16px 8px 14px; }
.work__name{
  display:block;
  font-family:var(--display); font-weight:700; font-size:18px;
  letter-spacing:-.015em; color:var(--bone);
}
.work__type{
  display:block; margin-top:4px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--slate);
}
.work__go{
  grid-area:go;
  font-family:var(--mono); font-size:18px; color:var(--wire);
  padding-right:8px;
  transition:color .22s var(--ease), transform .22s var(--ease);
}
.work__item a:hover .work__go{ color:var(--lime); transform:translate(2px,-2px); }

/* ── testimonial strip ───────────────────────────────── */

.strip{ margin-bottom:clamp(48px, 6vw, 80px); }
.strip__track{
  list-style:none; margin:0; padding:0 28px 18px 0;
  display:flex; gap:14px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:thin;
  scrollbar-color:var(--wire) transparent;
  cursor:grab;
}
.strip__track.is-dragging{ cursor:grabbing; scroll-snap-type:none; }
.strip__track::-webkit-scrollbar{ height:6px; }
.strip__track::-webkit-scrollbar-thumb{ background:var(--wire); border-radius:99px; }
.strip__track li{
  flex:0 0 min(340px, 78vw);
  scroll-snap-align:start;
  border:1px solid var(--wire-soft);
  border-radius:var(--r-md);
  overflow:hidden;
  background:var(--panel);
}
.strip__track img{ width:100%; height:auto; pointer-events:none; }

/* ── logo marquee ────────────────────────────────────── */

.marquee__label{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--slate);
  margin:0 0 20px;
}
.marquee__mask{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track{
  list-style:none; margin:0; padding:0;
  display:flex; gap:14px; width:max-content;
  animation:slide 42s linear infinite;
}
.marquee__mask:hover .marquee__track{ animation-play-state:paused; }
.marquee__track li{
  flex:0 0 auto;
  width:150px; height:80px;
  padding:12px;
  /* the logo files carry white backgrounds, so the plate is white too */
  background:#fff;
  border-radius:var(--r-sm);
}
.marquee__track img{ width:100%; height:100%; object-fit:contain; }
@keyframes slide{ from{ transform:translateX(0); } to{ transform:translateX(calc(-50% - 7px)); } }

/* ── closing cta ─────────────────────────────────────── */

.cta{ max-width:52ch; }
.cta__title{
  font-family:var(--display); font-weight:800;
  font-size:clamp(34px, 4.6vw, 62px);
  line-height:1.02; letter-spacing:-.03em;
  margin:0 0 20px;
  text-wrap:balance;
}
.cta__body{ color:var(--bone-dim); font-size:19px; margin:0 0 32px; }
.cta__actions{ display:flex; flex-wrap:wrap; gap:12px; }

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

.foot{
  border-top:1px solid var(--wire-soft);
  position:relative; z-index:1;
}
.foot__inner{
  max-width:var(--max); margin:0 auto;
  padding:28px;
  display:flex; flex-wrap:wrap; gap:10px 28px; align-items:center;
  font-family:var(--mono); font-size:12px; color:var(--slate);
}
.foot__inner p{ margin:0; }
.foot__mid{ margin-right:auto !important; }
.foot__inner a{ text-decoration:none; transition:color .18s var(--ease); }
.foot__inner a:hover{ color:var(--lime); }

/* the way in to the admin hub — deliberately quiet, but the password is
   what protects the panel, not how small this link is */
.foot__admin{
  color:var(--wire) !important;
  border:1px solid var(--wire-soft);
  border-radius:var(--r-sm);
  padding:5px 10px;
}
.foot__admin:hover{ color:var(--lime) !important; border-color:var(--lime); }

/* ── motion ──────────────────────────────────────────── */

.load{ animation:rise .7s var(--ease) both; animation-delay:var(--d, 0ms); }
@keyframes rise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

[data-reveal]{ opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
[data-reveal].in{ opacity:1; transform:none; }

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

@media (max-width:1040px){
  :root{ --gutter:72px; --rail-x:26px; }
  .hero{ grid-template-columns:1fr; }
  .hero__figure{ grid-row:1; justify-self:start; max-width:230px; }
  .hero__stats{ grid-template-columns:repeat(auto-fit, minmax(140px,1fr)); }
  .about{ grid-template-columns:1fr; }
  .about__figure{ max-width:420px; }
}

@media (max-width:860px){
  .nav__links, .nav__actions{ display:none; }
  .nav__toggle{ display:flex; }
  .brand{ font-size:12px; }
}

@media (max-width:720px){
  :root{ --gutter:0px; }
  .shell{ padding-left:20px; padding-right:20px; }
  .rail{ display:none; }
  .node{ display:none; }
  .section{ padding-block:64px; }
  .hero{ padding-top:calc(var(--nav-h) + 28px); }
  .hero__actions .btn{ flex:1 1 auto; justify-content:center; }
  .about__note{ padding-left:16px; }
  .work__item a{ padding:10px 10px 4px; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-reveal]{ opacity:1; transform:none; }
  .marquee__track{ animation:none; }
}

/* =========================================================
   Booking page — the calendar itself is GoHighLevel's live
   widget in an iframe; everything here is the frame around it.
   ========================================================= */

.shell--book{ padding-bottom:0; }

.booking{
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(32px, 5vw, 72px);
  align-items:start;
  padding-top:calc(var(--nav-h) + 56px);
  padding-bottom:clamp(72px, 9vw, 120px);
}

.booking__title{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(34px, 4.4vw, 58px);
  line-height:1.02;
  letter-spacing:-.032em;
  margin:0 0 22px;
  text-wrap:balance;
}
.booking__title em{ font-style:normal; color:var(--lime); }

/* the four things people want to know before they commit a slot */
.facts{
  margin:0 0 32px;
  padding:0;
  border-top:1px solid var(--wire-soft);
}
.fact{
  display:grid;
  grid-template-columns:130px 1fr;
  gap:16px;
  padding:14px 0;
  border-bottom:1px solid var(--wire-soft);
}
.fact dt{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--slate);
  padding-top:3px;
}
.fact dd{
  margin:0;
  font-family:var(--display); font-weight:500; font-size:16px;
  line-height:1.35; color:var(--bone);
}

.booking__aside{
  border-left:1px solid var(--wire);
  padding-left:20px;
  color:var(--slate);
  max-width:42ch;
}
.booking__aside p{ margin:0; }
.booking__aside-title{
  font-family:var(--display); font-weight:700;
  color:var(--bone); margin-bottom:6px !important;
}
.booking__aside a{ color:var(--lime); text-decoration:none; border-bottom:1px solid transparent; }
.booking__aside a:hover{ border-bottom-color:var(--lime); }

/* the widget sits on its own plate so the seam with GHL's own
   background never shows, whatever theme the calendar is set to */
.widget-frame{
  background:var(--canvas);
  border:1px solid var(--wire);
  border-radius:var(--r-lg);
  overflow:hidden;
  min-height:640px;
  /* faint neon ring so the widget's brighter accent reads as
     deliberate rather than a mismatch with the page */
  box-shadow:0 0 0 1px rgba(198,246,36,.10), 0 30px 70px rgba(0,0,0,.5);
}
.widget-frame iframe{
  display:block;
  width:100%;
  height:720px;         /* form_embed.js resizes this once it loads */
  border:0;
}
.widget-note{
  margin:14px 2px 0;
  font-family:var(--mono); font-size:12px; line-height:1.6;
  color:var(--slate);
}
.widget-note a{ color:var(--bone); }
.widget-note a:hover{ color:var(--lime); }

@media (max-width:1040px){
  .booking{ grid-template-columns:1fr; padding-top:calc(var(--nav-h) + 36px); }
  .booking__widget{ order:-1; }        /* calendar first on narrow screens */
}

@media (max-width:720px){
  .fact{ grid-template-columns:1fr; gap:4px; padding:12px 0; }
  .widget-frame{ min-height:560px; border-radius:var(--r-md); }
}