/* ============================================================
   iBeauty Denver — service page stylesheet
   ------------------------------------------------------------
   Load after site.css. Adds what a service page needs and the
   home page does not: a split hero with a fact strip, a technique
   grid, a numbered walkthrough and a healing timeline.

   Grid modifiers: .tqs--4 for four techniques instead of three,
   .tqs--2 for a centred pair, .tqs--single where the frames are one
   healed result rather than a split before/after.
   ============================================================ */

/* ---------- breadcrumb ---------- */
.crumb{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem;
  margin:0 0 1.25rem; padding:0; list-style:none;
  font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase;
  font-variation-settings:"wdth" 86,"wght" 620;
  color:var(--fg-3); max-width:none;
}
.crumb a{ color:var(--fg-2); text-decoration:none; transition:color .18s var(--ease); }
.crumb a:hover{ color:var(--neon); }
.crumb li+li::before{ content:"/"; margin-right:.5rem; color:var(--fg-3); opacity:.55; }
.crumb li{ display:inline-flex; align-items:center; }

/* ---------- 1 · service hero (night) ----------
   Nothing raster and nothing that repeats what the page says further down. The
   right half is one graphic object: the service word set very large in the
   headline face and filled with a neon-to-nothing gradient, over a soft pink
   bloom bled into the black. Type used as image, not as more copy.
   ------------------------------------------------------------------------- */
.svc-hero{
  position:relative; overflow:hidden; padding:0; background:var(--ink);
  min-height:min(70svh,700px); display:flex; flex-direction:column; justify-content:center;
}
/* the bloom: the only soft edge on the page, and the reason the word has air */
.svc-hero-glow{
  position:absolute; z-index:0; pointer-events:none;
  inset:-45% -35% -45% 26%;
  background:radial-gradient(50% 50% at 56% 50%, rgba(255,46,136,.34), rgba(255,46,136,.10) 46%, rgba(255,46,136,0) 74%);
}

.svc-hero-row{
  position:relative; z-index:2; overflow:hidden;
  display:grid; grid-template-columns:1.06fr .94fr;
  gap:clamp(1.5rem,1rem + 3vw,4rem); align-items:center;
  padding:clamp(2.5rem,1.8rem + 3.5vw,4.5rem) 0 clamp(2rem,1.4rem + 2.5vw,3.5rem);
}
.svc-hero .crumb{ margin-bottom:1.5rem; color:#85858F; }
.svc-hero .crumb a{ color:var(--on-ink-2); }
.svc-hero .display{ font-size:clamp(2.1rem,1.2rem + 3.4vw,4.2rem); margin-bottom:0; }
.svc-hero h1{ margin-bottom:0; }
.svc-hero h1 .display{ display:block; color:var(--on-ink); }
.svc-hero .lede{ color:#D2D2DA; margin:1.25rem 0 2rem; max-width:34ch; }
.svc-hero .lede strong{ color:#fff; font-variation-settings:"wdth" 100,"wght" 620; }
.svc-hero-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.5rem; }
.svc-hero-note{ color:var(--on-ink-3); font-size:.8125rem; max-width:18ch; line-height:1.45; margin:0; }
.svc-facts{ position:relative; z-index:2; }

/* the word, used as artwork. Decorative: the H1 already names the service, so it
   is hidden from the accessibility tree rather than read out twice. */
.svc-mark{
  margin:0; display:block; user-select:none; pointer-events:none;
  font-family:"Fraunces","Archivo",Georgia,serif; font-optical-sizing:none;
  font-variation-settings:"opsz" 144,"wght" 680,"SOFT" 0,"WONK" 1;
  font-size:clamp(3.6rem,11.6vw,12rem); line-height:.86; letter-spacing:-.045em;
  text-align:right; white-space:nowrap;
  background-image:linear-gradient(146deg,#FF2E88 4%,rgba(255,46,136,.62) 42%,rgba(255,255,255,.13) 96%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
/* the long ones would burst the column, so they set a step smaller */
.svc-mark--long{ font-size:clamp(2.7rem,8.2vw,8.4rem); }
/* the hairline the word sits on, drawn in from the right as the block lands */
.svc-mark-rule{
  display:block; height:1px; margin-top:clamp(.9rem,.7rem + .6vw,1.4rem);
  background:linear-gradient(to left,var(--neon),rgba(255,46,136,0));
  transform:scaleX(0); transform-origin:right;
}
.js .svc-hero .lift .svc-mark-rule,
.svc-mark-rule{ animation:markRule 1.1s var(--ease) .5s forwards; }
@keyframes markRule{ to{ transform:scaleX(1); } }
@media (prefers-reduced-motion:reduce){ .svc-mark-rule{ animation:none; transform:scaleX(1); } }

/* a still frame used inside a section rather than behind one */
.svc-shot{ margin:0; position:relative; border-radius:6px; overflow:hidden; }
.svc-shot img{ width:100%; display:block; }
.svc-shot--crop img{ aspect-ratio:4/3; object-fit:cover; object-position:50% 50%; }
.svc-shot figcaption{
  position:absolute; inset:auto 0 0 0; padding:2.25rem .9rem .7rem;
  background:linear-gradient(to top,rgba(10,10,11,.9),transparent);
  color:#D2D2DA;
  font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase;
  font-variation-settings:"wdth" 86,"wght" 620;
}

@media (max-width:860px){
  .svc-hero{ min-height:0; }
  .svc-hero-row{
    grid-template-columns:1fr; align-items:start;
    gap:clamp(1.5rem,1.2rem + 1.5vw,2.25rem);
    padding:clamp(1.75rem,1.4rem + 2vw,2.5rem) 0 1.25rem;
  }
  /* stacked, the wordmark would sit directly under an H1 that already says the
     same word, so it drops out and the bloom carries the block on its own */
  .svc-mark{ display:none; }
  .svc-hero-glow{ inset:-15% -35% -30% -15%; background:radial-gradient(52% 46% at 62% 62%, rgba(255,46,136,.30), rgba(255,46,136,.09) 48%, rgba(255,46,136,0) 76%); }
  .svc-hero .lede{ max-width:38ch; }
}

/* the fact strip that closes the dark block */
.facts{
  position:relative; z-index:2; max-width:none; margin:0;
  border-top:1px solid rgba(255,255,255,.14);
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem 2rem;
  padding:1.35rem 0 clamp(2rem,1.4rem + 2vw,3rem);
}
.facts div{ display:grid; gap:.3rem; }
.facts dt,.facts b{
  color:var(--neon);
  font-size:.625rem; letter-spacing:.18em; text-transform:uppercase;
  font-variation-settings:"wdth" 86,"wght" 700;
}
.facts dd,.facts span{ margin:0; color:#fff; font-size:.9375rem; line-height:1.4; }
@media (max-width:760px){ .facts{ grid-template-columns:repeat(2,1fr); gap:1rem 1.25rem; }
  .facts dd,.facts span{ font-size:.875rem; } }

/* ---------- 2 · what it is ---------- */
.split{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(1.75rem,1.2rem + 3.5vw,4rem); align-items:start;
}
.split p{ color:var(--fg-2); }
.split p strong{ color:var(--fg); font-variation-settings:"wdth" 100,"wght" 620; }
@media (max-width:860px){ .split{ grid-template-columns:1fr; } }

/* a short block of standalone copy, no figure — used where a service has no
   colour-mixing or portfolio image to pair it with */
.prose{ max-width:60ch; }
.prose p{ color:var(--fg-2); }
.prose p+p{ margin-top:1rem; }

/* a bordered aside that carries a short list — "who it suits", "what to bring" */
.panel{
  border:1px solid var(--line); border-radius:8px; background:var(--surface);
  padding:clamp(1.35rem,1.1rem + 1.4vw,2rem);
}
.panel h3{
  font-size:1.0625rem; margin-bottom:1rem;
  font-variation-settings:"wdth" 104,"wght" 700;
}
.ticks{ list-style:none; margin:0; padding:0; display:grid; gap:.85rem; }
.ticks li{
  display:grid; grid-template-columns:auto 1fr; gap:.75rem; align-items:start;
  color:var(--fg-2); font-size:.9375rem; line-height:1.5;
}
.ticks li::before{
  content:""; width:16px; height:16px; margin-top:.25rem; flex:none;
  background:var(--neon);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 10.5 4 4 9-9'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 10.5 4 4 9-9'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* the same list, but for things that mean waiting rather than booking */
.ticks--wait li::before{
  background:var(--fg-3);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='7.5'/%3E%3Cpath d='M10 6v4.5l3 1.8'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='7.5'/%3E%3Cpath d='M10 6v4.5l3 1.8'/%3E%3C/svg%3E");
}

/* ---------- 3 · techniques ----------
   The frames are shot as one image split down the middle, so the card
   says so out loud: BEFORE on the left half, AFTER on the right, and a
   hairline where the two meet. */
.tqs{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(1rem,.7rem + 1.6vw,1.75rem);
}
/* four cards read as a square block, not a row of three with an orphan */
.tqs--4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:1100px){ .tqs--4{ grid-template-columns:repeat(2,1fr); } }
/* two cards only — a pair, centred, not stretched across a three-column row */
.tqs--2{ grid-template-columns:repeat(2,1fr); max-width:860px; margin:0 auto; }
@media (max-width:700px){ .tqs--2{ grid-template-columns:1fr; } }
@media (max-width:960px){ .tqs{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .tqs{ grid-template-columns:1fr; } }

.tq{
  display:flex; flex-direction:column; margin:0;
  border:1px solid var(--line); border-radius:6px; overflow:hidden;
  background:var(--surface);
  transition:border-color .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
.tq:hover{
  border-color:rgba(255,46,136,.45); transform:translateY(-4px);
  box-shadow:0 26px 60px -34px rgba(10,10,11,.5);
}
.tq-media{ position:relative; overflow:hidden; background:var(--raised); }
.tq-media img{ width:100%; aspect-ratio:16/10; object-fit:cover; display:block; transition:transform .9s var(--ease); }
.tq:hover .tq-media img{ transform:scale(1.04); }
/* Not every service has split frames. Where the reference is a single healed
   result — brows, eyeliner — the seam and the two chips come off and the picture
   is just a picture. */
.tqs--single .tq-media::after,
.tqs--single .tq-ba,
.tq--single .tq-media::after,
.tq--single .tq-ba{ display:none; }

/* the seam, and the two labels that explain it */
.tq-media::after{
  content:""; position:absolute; top:0; bottom:0; left:50%; width:1px;
  background:rgba(255,255,255,.85); pointer-events:none;
}
.tq-ba{
  position:absolute; bottom:.6rem; z-index:2;
  padding:.22rem .55rem; border-radius:999px;
  background:rgba(10,10,11,.72); color:#fff;
  font-size:.5625rem; letter-spacing:.18em; text-transform:uppercase;
  font-variation-settings:"wdth" 86,"wght" 700;
}
.tq-ba--b{ left:.6rem; }
.tq-ba--a{ right:.6rem; background:var(--neon); color:#0A0A0B; }

.tq-body{ padding:clamp(1.1rem,.9rem + .8vw,1.5rem); display:flex; flex-direction:column; flex:1 1 auto; }
.tq-body h3{
  font-family:"Fraunces","Archivo",Georgia,serif; font-optical-sizing:none;
  font-size:1.25rem; line-height:1.15; letter-spacing:-.02em; margin-bottom:.5rem;
  font-variation-settings:"opsz" 96,"wght" 640,"SOFT" 20,"WONK" 1;
}
.tq-body p{ color:var(--fg-2); font-size:.9375rem; line-height:1.55; margin:0 0 .9rem; max-width:none; }
.tq-for{
  margin:0; padding-top:.9rem; border-top:1px solid var(--line);
  color:var(--fg-3); font-size:.8125rem; line-height:1.45; max-width:none;
}
.tq-for b{
  color:var(--fg-2);
  font-size:.625rem; letter-spacing:.16em; text-transform:uppercase;
  font-variation-settings:"wdth" 86,"wght" 700; margin-right:.4rem;
}
/* the button lives on the card, so a visitor can book the technique she is
   looking at without scrolling back to the top of the page */
.tq-foot{ margin-top:auto; padding-top:1.1rem; }
.tq-note{
  margin-top:clamp(1.25rem,1rem + 1vw,1.75rem); color:var(--fg-3);
  font-size:.9375rem; max-width:70ch;
}
.tq-note b{ color:var(--fg-2); font-variation-settings:"wdth" 100,"wght" 660; }

/* ---------- 4 · the walkthrough: numbered, on a rule ---------- */
.steps{ list-style:none; margin:0; padding:0; display:grid; gap:0; counter-reset:step; }
.steps li{
  counter-increment:step;
  display:grid; grid-template-columns:auto 1fr; gap:clamp(1rem,.8rem + 1.2vw,2rem);
  padding:clamp(1.1rem,.9rem + 1vw,1.6rem) 0;
  border-top:1px solid var(--line);
}
.steps li:last-child{ border-bottom:1px solid var(--line); }
.steps li::before{
  content:counter(step,decimal-leading-zero);
  font-family:"Fraunces","Archivo",Georgia,serif; font-optical-sizing:none;
  font-variation-settings:"opsz" 144,"wght" 400,"SOFT" 0,"WONK" 1;
  font-size:clamp(1.5rem,1.2rem + 1.4vw,2.25rem); line-height:1;
  color:var(--neon); min-width:2.2ch;
}
.steps h3{
  font-size:clamp(1.0625rem,1rem + .4vw,1.25rem); margin-bottom:.4rem;
  font-variation-settings:"wdth" 104,"wght" 700;
}
.steps p{ color:var(--fg-2); font-size:.9375rem; margin:0; }
.steps .when{
  display:block; margin-top:.5rem; color:var(--fg-3);
  font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase;
  font-variation-settings:"wdth" 86,"wght" 620;
}

/* ---------- 5 · healing, drawn as a line ---------- */
.heal{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,.8rem + 1.5vw,2rem); }
.heal::before{
  content:""; position:absolute; left:0; right:0; top:7px; height:1px;
  background:linear-gradient(to right,var(--neon),var(--line));
}
.heal div{ position:relative; padding-top:2.15rem; }
.heal div::before{
  content:""; position:absolute; left:0; top:2px; width:11px; height:11px;
  border-radius:50%; background:var(--bg); border:2px solid var(--neon);
}
.heal dt,.heal b{
  display:block; margin-bottom:.4rem;
  font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase;
  font-variation-settings:"wdth" 86,"wght" 700;
}
.heal dd,.heal p{ margin:0; color:var(--fg-2); font-size:.9375rem; line-height:1.55; }
@media (max-width:860px){
  .heal{ grid-template-columns:1fr; gap:0; }
  .heal::before{ left:5px; right:auto; top:0; bottom:0; width:1px; height:auto;
    background:linear-gradient(to bottom,var(--neon),var(--line)); }
  .heal div{ padding:0 0 1.5rem 2rem; }
  .heal div::before{ top:4px; }
  .heal div:last-child{ padding-bottom:0; }
}

/* a quiet strip of practical lines under the timeline */
.care{
  margin-top:clamp(2rem,1.4rem + 2vw,3rem); padding-top:clamp(1.5rem,1.2rem + 1.5vw,2.25rem);
  border-top:1px solid var(--line);
  display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.5rem,1rem + 2vw,3rem);
}
@media (max-width:760px){ .care{ grid-template-columns:1fr; } }

/* ---------- 6 · the closing booking block (night) ---------- */
.close-cta{
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:clamp(1.75rem,1.2rem + 3vw,3.5rem); align-items:center;
}
.close-cta p{ color:var(--fg-2); }
.close-cta .h2{ margin-bottom:1rem; }
.close-box{
  border:1px solid var(--line); border-radius:8px; background:var(--surface);
  padding:clamp(1.5rem,1.2rem + 1.5vw,2.25rem);
}
.close-box .h3{ margin-bottom:.7rem; }
.close-box p{ font-size:.9375rem; margin-bottom:1.35rem; }
@media (max-width:860px){ .close-cta{ grid-template-columns:1fr; } }

/* the disclosure line that has to sit under medical wording */
.legal{
  margin-top:clamp(1.5rem,1.2rem + 1.5vw,2.25rem);
  padding-top:1.1rem; border-top:1px solid var(--line);
  color:var(--fg-3); font-size:.8125rem; line-height:1.55; max-width:78ch;
}

/* ---------- the service feed ----------
   Six posts per service, so the grid holds its three columns at every width the
   way a profile grid does on Instagram itself, rather than dropping to two and
   turning six tiles into three rows. */
@media (max-width:560px){
  #work .feed-grid{ grid-template-columns:repeat(3,1fr); }
}