/* helloNira — Strategic Brand, Positioning & Web Development for Artists
   Visual system v2 — editorial × art consultancy × strategic creative studio
   Brand palette: Ink #171717, Aubergine #291C28, Deep Plum #663B63,
   Warm Ivory #F5F1E8, Soft Stone #D9D5CC
   Type: DM Serif Display (headlines) / Manrope (body, UI) */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Manrope:wght@400;500;600;700&display=swap');

:root{
  --ink:#171717;
  --aubergine:#291C28;
  --plum:#663B63;
  --ivory:#F5F1E8;
  --stone:#D9D5CC;

  --serif: 'DM Serif Display', Georgia, serif;
  --sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --container: 1220px;
  --gap: clamp(1.5rem, 4vw, 3rem);
  --section-pad: clamp(4.5rem, 11vw, 9rem);
  --edge: clamp(1.25rem, 5vw, 3rem);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3{ font-family:var(--serif); font-weight:400; margin:0; line-height:1.12; }
p{ margin:0; }

.wrap{
  max-width:var(--container);
  margin:0 auto;
  padding-left:var(--edge);
  padding-right:var(--edge);
}

.eyebrow{
  display:flex;
  align-items:center;
  gap:0.7rem;
  font-family:var(--sans);
  font-size:0.76rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--plum);
  font-weight:700;
  margin-bottom:1.1rem;
}
.eyebrow::before{
  content:"";
  width:22px;
  height:1px;
  background:var(--plum);
  flex-shrink:0;
}
.eyebrow.on-dark{ color:var(--stone); }
.eyebrow.on-dark::before{ background:var(--stone); }

/* ---------- Buttons & links ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:0.6rem;
  background:var(--plum);
  color:var(--ivory);
  font-family:var(--sans);
  font-weight:600;
  font-size:0.82rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:1rem 2rem;
  border-radius:3px;
  border:1px solid var(--plum);
  cursor:pointer;
  transition:background 260ms ease, color 260ms ease, border-color 260ms ease, transform 260ms ease;
}
.btn:hover{ background:var(--ink); border-color:var(--ink); transform:translateY(-1px); }
.btn.btn-ghost{
  background:transparent;
  color:var(--ivory);
  border:1px solid rgba(245,241,232,0.45);
}
.btn.btn-ghost:hover{ background:rgba(245,241,232,0.1); border-color:var(--ivory); }
.btn.btn-outline{
  background:transparent;
  color:var(--ink);
  border:1px solid var(--ink);
}
.btn.btn-outline:hover{ background:var(--ink); color:var(--ivory); }

.text-link{
  display:inline-flex;
  align-items:center;
  gap:0.4rem;
  font-weight:600;
  font-size:0.9rem;
  color:var(--plum);
  border-bottom:1px solid rgba(102,59,99,0.4);
  padding-bottom:3px;
  transition:color 250ms ease, border-color 250ms ease, gap 250ms ease;
}
.text-link:hover{ color:var(--ink); border-color:var(--ink); gap:0.65rem; }

.scroll-cue{
  display:inline-flex;
  align-items:center;
  gap:0.6rem;
  font-size:0.78rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:#5c5c5c;
  font-weight:600;
}
.scroll-cue .cue-line{
  width:1px; height:26px;
  background:currentColor;
  opacity:0.4;
  display:inline-block;
  animation:cueMove 2.2s ease-in-out infinite;
}
@keyframes cueMove{
  0%,100%{ transform:scaleY(1); opacity:0.15; }
  50%{ transform:scaleY(1); opacity:0.55; }
}

/* ---------- Nav ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(245,241,232,0.9);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom:1px solid rgba(23,23,23,0.08);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:1.1rem;
  padding-bottom:1.1rem;
}
.logo{
  display:flex;
  align-items:center;
  gap:0.6rem;
  font-family:var(--serif);
  font-size:1.5rem;
  color:var(--ink);
}
.logo-mark{
  width:30px; height:30px;
  border-radius:50%;
  background:var(--plum);
  color:var(--ivory);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif);
  font-size:0.72rem;
  letter-spacing:-0.03em;
  flex-shrink:0;
}
.nav-links{
  display:flex;
  align-items:center;
  gap:2.2rem;
}
.nav-links a:not(.btn){
  font-size:0.85rem;
  font-weight:600;
  letter-spacing:0.03em;
  color:var(--ink);
  position:relative;
}
.nav-links a:not(.btn)::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-4px;
  height:1px;
  background:var(--plum);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 250ms ease;
}
.nav-links a:not(.btn):hover::after{ transform:scaleX(1); }
.nav-cta{ display:flex; align-items:center; gap:1.6rem; }

.nav-toggle{
  display:none;
  background:none;
  border:1px solid var(--ink);
  border-radius:3px;
  width:42px; height:38px;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after{
  content:"";
  display:block;
  width:18px;
  height:1.5px;
  background:var(--ink);
  position:relative;
  transition:transform 200ms ease, opacity 200ms ease;
}
.nav-toggle span::before{ position:absolute; top:-6px; }
.nav-toggle span::after{ position:absolute; top:6px; }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  padding-top:clamp(2.5rem, 6vw, 4rem);
  padding-bottom:clamp(4rem, 9vw, 6.5rem);
  overflow:hidden;
}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  align-items:center;
  gap:clamp(1.5rem, 4vw, 3rem);
}
.hero-copy{ position:relative; z-index:2; padding-right:clamp(0px,3vw,2rem); }
.hero-ghost{
  position:absolute;
  top:-3.4rem; left:calc(var(--edge)*-1 + 0px);
  font-family:var(--serif);
  font-size:clamp(9rem, 22vw, 17rem);
  color:transparent;
  -webkit-text-stroke:1px rgba(23,23,23,0.06);
  line-height:1;
  z-index:0;
  pointer-events:none;
  user-select:none;
  white-space:nowrap;
}
.hero h1{
  position:relative;
  font-size:clamp(2.6rem, 5.6vw, 4.6rem);
  letter-spacing:-0.01em;
}
.hero h1 .line{ display:block; opacity:0; transform:translateY(16px); animation:lineIn 900ms ease forwards; }
.hero h1 .line:nth-child(2){ animation-delay:180ms; }
@keyframes lineIn{ to{ opacity:1; transform:none; } }
.hero h1 em{
  font-style:italic;
  color:var(--plum);
}
.hero-copy p.lead{
  margin-top:1.6rem;
  max-width:36ch;
  font-size:1.08rem;
  color:#3c3c3c;
  opacity:0;
  animation:lineIn 900ms ease forwards;
  animation-delay:380ms;
}
.hero-actions{
  margin-top:2.4rem;
  display:flex;
  align-items:center;
  gap:1.8rem;
  flex-wrap:wrap;
  opacity:0;
  animation:lineIn 900ms ease forwards;
  animation-delay:520ms;
}

.hero-visual{
  position:relative;
  margin-right:calc(var(--edge) * -1);
  margin-top:-3.5rem;
}
.texture-panel{
  position:relative;
  overflow:hidden;
  aspect-ratio:4/5;
  background:
    radial-gradient(120% 140% at 22% 12%, rgba(102,59,99,0.55), transparent 55%),
    radial-gradient(130% 150% at 88% 92%, rgba(41,28,40,0.92), transparent 60%),
    linear-gradient(160deg, var(--stone) 0%, var(--ink) 120%);
}
.texture-panel::before{
  content:"";
  position:absolute; inset:0;
  opacity:0.35;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.texture-panel .panel-mark{
  position:absolute;
  bottom:1.7rem; left:1.7rem;
  color:var(--ivory);
  font-family:var(--serif);
  font-style:italic;
  font-size:1.05rem;
  opacity:0.9;
}
/* Over a real photo the panel-mark reads as a small museum-label tag —
   ivory chip, ink text — rather than pale text that would wash out against
   a light image. */
.texture-panel.has-photo .panel-mark{
  bottom:1.1rem; left:1.1rem;
  background:var(--ivory);
  color:var(--ink);
  opacity:1;
  padding:0.32rem 0.75rem;
  font-size:0.92rem;
  letter-spacing:0.01em;
  box-shadow:0 2px 10px rgba(23,23,23,0.18);
}
.hero-visual .texture-panel{ will-change:transform; }

/* Real photography/artwork instead of the placeholder gradient — image
   covers the panel fully, so the grain overlay (meant to texture an empty
   gradient) is switched off rather than layered on top of real art. */
.texture-panel.has-photo::before{ content:none; }
.texture-panel img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.hero-tag{
  position:absolute;
  left:-1.6rem; bottom:2.2rem;
  background:var(--ivory);
  border:1px solid rgba(23,23,23,0.14);
  padding:0.9rem 1.3rem;
  max-width:220px;
  font-size:0.82rem;
  line-height:1.45;
  color:#3c3c3c;
  z-index:2;
}
.hero-tag strong{ display:block; font-family:var(--serif); font-size:1rem; color:var(--ink); margin-bottom:0.2rem; }

/* ---------- Section shell ---------- */
section{ padding-top:var(--section-pad); padding-bottom:var(--section-pad); position:relative; }
.section-head{ max-width:640px; margin-bottom:clamp(3rem,7vw,4.5rem); }
.section-head h2{ font-size:clamp(1.95rem, 3.6vw, 2.9rem); }
.section-head p.lead{
  margin-top:1.1rem;
  font-size:1.05rem;
  color:#3c3c3c;
}

/* ---------- Transformation (dark, editorial) ---------- */
.transform{
  background:var(--aubergine);
  color:var(--ivory);
  position:relative;
  overflow:hidden;
}
.transform-quote{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1.5rem, 3vw, 2.1rem);
  line-height:1.35;
  color:var(--ivory);
  max-width:34ch;
  position:relative;
  z-index:1;
}
.transform-quote span{ color:rgba(245,241,232,0.5); }

/* The transformation moment — a single typographic gesture rather than a
   before/after table. "misaligned" sits pale, loose and slightly off-axis;
   the hN mark travels a thin line toward "intentional", which lands fully
   opaque, tightly set and grounded. The two supporting lists echo the same
   idea below: fragmented italics on the left, an ordered, ruled list on
   the right. */
.shift{
  position:relative;
  margin:clamp(3rem,7vw,5.5rem) 0 clamp(2.5rem,5vw,4rem);
}
.shift-ghost{
  position:absolute;
  top:-1.2em; left:50%;
  transform:translateX(-50%);
  font-family:var(--serif);
  font-size:clamp(6rem,16vw,11rem);
  line-height:1;
  color:transparent;
  -webkit-text-stroke:1px rgba(245,241,232,0.06);
  white-space:nowrap;
  pointer-events:none;
  user-select:none;
  z-index:0;
}
.shift-heading{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:clamp(1rem,3vw,2.5rem);
  margin:0 0 clamp(2.5rem,5vw,4rem);
}
.shift-lead{
  display:block;
  font-family:var(--sans);
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:rgba(245,241,232,0.4);
  margin-bottom:0.6rem;
}
.shift-from{ text-align:left; margin-top:0.6rem; }
.shift-to{ text-align:right; }
.shift-from .shift-word{
  display:inline-block;
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:clamp(2.4rem,6.6vw,4.6rem);
  line-height:1;
  letter-spacing:0.01em;
  color:rgba(245,241,232,0.5);
  transform:rotate(-1.4deg);
}
.shift-to .shift-word{
  display:inline-block;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.7rem,7.4vw,5.4rem);
  line-height:1;
  letter-spacing:-0.01em;
  color:var(--ivory);
}
.shift-to .dot{ color:#c9a7c4; }
.shift-pivot{
  position:relative;
  width:clamp(3rem,7vw,6rem);
  height:2.4rem;
  display:flex;
  align-items:center;
  justify-content:center;
}
.shift-pivot::before{
  content:"";
  position:absolute;
  left:0; right:0; top:50%;
  height:1px;
  transform:translateY(-50%);
  background:linear-gradient(to right, rgba(245,241,232,0.16), var(--plum));
}
.shift-mark{
  position:relative;
  z-index:1;
  width:2.3rem; height:2.3rem;
  flex-shrink:0;
  border-radius:50%;
  background:var(--plum);
  color:var(--ivory);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif);
  font-size:0.85rem;
  letter-spacing:-0.02em;
}

.shift-cols{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:clamp(1rem,3vw,2.5rem);
  border-top:1px solid rgba(245,241,232,0.14);
  padding-top:clamp(1.75rem,3.5vw,2.75rem);
}
.shift-spine{ width:1px; background:rgba(245,241,232,0.1); }
.shift-list{ list-style:none; margin:0; padding:0; }
.shift-list--from li{
  font-family:var(--serif);
  font-style:italic;
  font-size:0.98rem;
  color:rgba(245,241,232,0.55);
  padding:0.55rem 0;
  transform-origin:left center;
}
.shift-list--from li:nth-child(1){ transform:rotate(-1.2deg); }
.shift-list--from li:nth-child(2){ transform:rotate(0.9deg) translateX(0.5rem); }
.shift-list--from li:nth-child(3){ transform:rotate(-1.6deg) translateX(0.15rem); }
.shift-list--from li:nth-child(4){ transform:rotate(1.1deg) translateX(0.7rem); }
.shift-list--to{ text-align:right; }
.shift-list--to li{
  font-family:var(--sans);
  font-weight:600;
  font-size:0.92rem;
  letter-spacing:0.01em;
  color:var(--ivory);
  padding:0.55rem 0;
  border-top:1px solid rgba(245,241,232,0.14);
}
.shift-list--to li:first-child{ border-top:none; }

.transform-resolve{
  position:relative;
  z-index:1;
  margin-top:clamp(2.5rem,5vw,4rem);
  text-align:right;
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1.2rem,2.2vw,1.5rem);
  color:#c9a7c4;
}

/* ---------- Services ---------- */
.services-intro{
  max-width:64ch;
  font-size:1.08rem;
  color:#2b2b2b;
  margin-bottom:clamp(3rem,6vw,4.5rem);
  padding-bottom:clamp(3rem,6vw,4.5rem);
  border-bottom:1px solid rgba(23,23,23,0.12);
}
.services-intro strong{ color:var(--ink); }

.service-list{ display:flex; flex-direction:column; }
.service-row{
  display:grid;
  grid-template-columns:5rem minmax(0,1fr);
  gap:clamp(1.25rem,3vw,2.5rem);
  align-items:start;
  padding:clamp(2rem,4vw,2.75rem) 0;
  border-top:1px solid rgba(23,23,23,0.14);
}
.service-list .service-row:last-child{ border-bottom:1px solid rgba(23,23,23,0.14); }
.service-num{
  font-family:var(--serif);
  font-size:1.4rem;
  color:var(--plum);
}
.service-row.lead .service-num{ font-size:1.8rem; }
.service-body{ max-width:62ch; }
.service-row h3{
  font-family:var(--serif);
  font-weight:400;
  font-size:1.4rem;
}
.service-row.lead h3{ font-size:clamp(1.7rem,3vw,2.1rem); }
.service-row p{ color:#3c3c3c; font-size:0.98rem; }
.service-row.lead p{ font-size:1.03rem; }
.service-tag{
  display:inline-block;
  margin-top:0.6rem;
  font-size:0.72rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--plum);
}

/* Package pricing/includes — deliberately typographic, not a pricing card:
   inline meta row under each service, tied together by the same rules,
   numbering and spacing as the rest of the list. */
.service-meta{
  margin-top:1.3rem;
  padding-top:1.1rem;
  border-top:1px solid rgba(23,23,23,0.1);
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:0.5rem 1.6rem;
}
.service-price{
  font-family:var(--serif);
  font-size:1.05rem;
  color:var(--ink);
  white-space:nowrap;
}
.service-price .label{
  font-family:var(--sans);
  font-size:0.68rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  font-weight:700;
  color:#6b6b6b;
  margin-right:0.55rem;
}
.service-price strong{ color:var(--plum); font-weight:400; }
.service-includes{
  font-size:0.85rem;
  color:#5c5c5c;
  line-height:1.5;
}

.service-tailored{
  margin-top:clamp(2rem,4vw,2.75rem);
  font-family:var(--serif);
  font-style:italic;
  font-size:1.05rem;
  color:#3c3c3c;
  max-width:56ch;
}

.service-note{
  margin-top:1.4rem;
  display:flex;
  align-items:baseline;
  gap:0.7rem;
  font-size:0.94rem;
  color:#5c5c5c;
}
.service-note .dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--plum); flex-shrink:0;
  transform:translateY(-2px);
}
.service-note strong{ color:var(--ink); font-weight:700; }

.service-cta{
  margin-top:clamp(2.5rem,5vw,3.5rem);
  padding-top:clamp(2rem,4vw,2.75rem);
  border-top:1px solid rgba(23,23,23,0.14);
  font-family:var(--serif);
  font-size:1.2rem;
  color:var(--ink);
}
.service-cta .text-link{ margin-left:0.4rem; }

/* ---------- Outcomes ---------- */
/* The three words become the visual statement — large, unevenly scaled and
   aligned — with their explanations demoted to small supporting text set
   apart from the headline rather than stacked directly beneath it. */
.outcomes{
  background:var(--stone);
  padding-top:clamp(4rem,8vw,7rem);
  padding-bottom:clamp(4rem,8vw,7rem);
}
.outcomes-head{ max-width:720px; margin-bottom:clamp(3rem,6vw,5rem); }
.outcomes-kicker{
  font-family:var(--sans);
  font-weight:700;
  font-size:0.78rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--plum);
  margin-bottom:0.9rem;
}
.outcomes-head .lead{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1.2rem,2.4vw,1.55rem);
  color:#3c3c3c;
  margin:0;
}

.outcome-item{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:clamp(1.25rem,3.5vw,3rem);
  padding:clamp(1.75rem,4vw,3.25rem) 0;
  border-top:1px solid rgba(23,23,23,0.14);
}
.outcome-item:first-child{ border-top:none; padding-top:0; }
.outcome-item h3{
  font-family:var(--serif);
  font-weight:400;
  line-height:0.95;
  margin:0;
}
.outcome-item p{
  font-family:var(--sans);
  font-size:0.94rem;
  line-height:1.6;
  color:#3c3c3c;
  margin:0;
  max-width:26ch;
}

.outcome-item--clarity h3{
  flex:1 1 55%;
  font-size:clamp(3.4rem,9.5vw,7.5rem);
  color:var(--ink);
}
.outcome-item--clarity p{ flex:1 1 220px; }

.outcome-item--confidence{ flex-direction:row-reverse; }
.outcome-item--confidence h3{
  flex:1 1 45%;
  font-size:clamp(2.7rem,7.4vw,5.3rem);
  font-style:italic;
  color:var(--plum);
  text-align:right;
}
.outcome-item--confidence p{ flex:1 1 220px; text-align:left; }

.outcome-item--credibility{
  position:relative;
  padding-top:clamp(2.5rem,5.5vw,4.5rem);
}
.outcome-item--credibility h3{
  flex:1 1 100%;
  font-size:clamp(3.8rem,10.5vw,8.5rem);
  color:var(--ink);
  position:relative;
  z-index:1;
}
.outcome-item--credibility h3::after{
  content:"";
  display:block;
  width:3.5rem; height:2px;
  background:var(--plum);
  margin-top:1.2rem;
}
.outcome-item--credibility p{ flex:1 1 100%; max-width:40ch; margin-top:0.25rem; }
.outcome-ghost{
  position:absolute;
  top:clamp(0.5rem,2vw,1.5rem); left:0;
  font-family:var(--serif);
  font-size:clamp(6rem,17vw,12rem);
  line-height:1;
  color:transparent;
  -webkit-text-stroke:1px rgba(23,23,23,0.06);
  white-space:nowrap;
  pointer-events:none;
  user-select:none;
  z-index:0;
}

/* ---------- Process ---------- */
.process{ overflow:hidden; }
.process-rail{ position:relative; }
.process-rail::before{
  content:"";
  position:absolute;
  left:0; right:0; top:2.55rem;
  height:1px;
  background:rgba(23,23,23,0.14);
}
.process-steps{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:1.5rem;
  position:relative;
}
.process-steps li{ position:relative; }
.process-steps li:nth-child(even){ margin-top:2.6rem; }
.step-num{
  display:block;
  font-family:var(--serif);
  font-size:clamp(2.4rem,4vw,3.4rem);
  line-height:1;
  color:transparent;
  -webkit-text-stroke:1.1px var(--plum);
  margin-bottom:1.4rem;
}
@supports not (-webkit-text-stroke: 1px black){
  .step-num{ color:var(--plum); -webkit-text-stroke:0; }
}
.process-steps h3{
  font-family:var(--sans);
  font-weight:700;
  font-size:0.92rem;
  margin-bottom:0.55rem;
  text-transform:uppercase;
  letter-spacing:0.05em;
}
.process-steps p{ font-size:0.9rem; color:#3c3c3c; }
.process-foot{
  margin-top:clamp(3rem,6vw,4.5rem);
  padding-top:clamp(2rem,4vw,3rem);
  border-top:1px solid rgba(23,23,23,0.12);
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1.15rem,2vw,1.4rem);
  color:#3c3c3c;
  max-width:56ch;
}

/* ---------- Work ---------- */
.work-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:2rem;
  margin-bottom:clamp(3rem,6vw,4.5rem);
}
.work-header .section-head{ margin-bottom:0; }
.work-index{
  font-family:var(--serif);
  font-style:italic;
  color:#8a8a8a;
  font-size:1rem;
  white-space:nowrap;
}
.case-study{
  display:grid;
  grid-template-columns:minmax(0,0.95fr) minmax(0,1.05fr);
  gap:clamp(2rem,5vw,3.5rem);
  align-items:start;
}
.case-visual{ position:relative; }
.case-visual .texture-panel{ aspect-ratio:6/5; }
.case-visual .texture-panel.small{
  position:absolute;
  width:46%;
  aspect-ratio:1/1;
  right:-8%;
  bottom:-12%;
  border:6px solid var(--ivory);
}
.case-copy .eyebrow{ margin-bottom:1rem; }
.case-copy h3{
  font-family:var(--serif);
  font-size:clamp(1.7rem,3vw,2.2rem);
  margin-bottom:1.1rem;
}
.case-copy > p.intro{ color:#3c3c3c; margin-bottom:2rem; max-width:52ch; }
.case-breakdown{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.5rem 2rem;
  padding-top:1.75rem;
  border-top:1px solid rgba(23,23,23,0.14);
  margin-bottom:2rem;
}
.case-breakdown dt{
  font-size:0.72rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--plum);
  margin-bottom:0.4rem;
}
.case-breakdown dd{
  margin:0;
  font-size:0.92rem;
  color:#3c3c3c;
  line-height:1.5;
}
.work-note{
  margin-top:clamp(2.5rem,5vw,3.5rem);
  font-size:0.88rem;
  color:#6b6b6b;
  font-style:italic;
}

/* ---------- About ---------- */
#about{ position:relative; overflow:hidden; }
.about-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);
  gap:clamp(2rem,5vw,4rem);
}
.about-grid .section-head{ margin-bottom:0; }
/* The sculpture sits as a large, quiet presence on the right of the
   section — vertically centred, bleeding slightly past the edge — rather
   than as a boxed inline picture. The copy column reserves a gutter so
   its text never runs under it. */
.about-copy{ padding-right:clamp(0px,20vw,240px); }
.about-image{
  position:absolute;
  top:50%; right:calc(var(--edge) * -1);
  transform:translateY(-50%);
  width:clamp(220px,20vw,320px);
  z-index:0;
  pointer-events:none;
}
.about-image img{ width:100%; display:block; }
.about-copy p.lead{
  font-family:var(--serif);
  font-size:clamp(1.3rem,2.2vw,1.6rem);
  line-height:1.45;
  margin-bottom:1.8rem;
}
.about-triad{
  margin:1.8rem 0;
  padding:1.6rem 0;
  border-top:1px solid rgba(23,23,23,0.14);
  border-bottom:1px solid rgba(23,23,23,0.14);
}
.triad-line{
  display:flex;
  align-items:center;
  gap:0.9rem;
  padding:0.5rem 0;
}
.triad-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:26px; height:26px;
  flex-shrink:0;
  color:var(--plum);
}
.triad-icon svg{ width:16px; height:16px; }
.about-triad p{
  font-size:1.02rem;
  color:#2b2b2b;
  padding:0;
}
.about-copy > p.close{ margin-top:1.6rem; color:#3c3c3c; max-width:56ch; }

/* ---------- Final CTA (dark) ---------- */
.final-cta{
  background:var(--ink);
  color:var(--ivory);
  text-align:center;
}
.final-cta .wrap{ max-width:760px; }
.final-cta h2{
  font-size:clamp(2.1rem, 4.6vw, 3.2rem);
  margin-bottom:1.3rem;
}
.final-cta p{
  font-size:1.05rem;
  color:var(--stone);
  max-width:48ch;
  margin:0 auto;
}
.final-cta .btn{ margin-top:2.4rem; }

/* ---------- Contact ---------- */
.contact-grid{
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:var(--gap);
}
.contact .section-head p.lead{ max-width:44ch; }
.contact-detail{ margin-top:2rem; font-size:0.95rem; color:#3c3c3c; }
.contact-detail a{ color:var(--plum); font-weight:600; }

form{ display:flex; flex-direction:column; gap:1.2rem; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
label{
  display:block;
  font-size:0.78rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  font-weight:700;
  color:#3c3c3c;
  margin-bottom:0.5rem;
}
input, select, textarea{
  width:100%;
  font-family:var(--sans);
  font-size:0.98rem;
  color:var(--ink);
  background:transparent;
  border:none;
  border-bottom:1px solid rgba(23,23,23,0.28);
  border-radius:0;
  padding:0.7rem 0.1rem;
  transition:border-color 200ms ease;
}
input:focus, select:focus, textarea:focus{
  outline:none;
  border-color:var(--plum);
}
textarea{ resize:vertical; min-height:110px; }
.form-status{ font-size:0.9rem; min-height:1.2em; }
.form-status.success{ color:#3f6b4a; }
.form-status.error{ color:#a3453a; }

/* ---------- Footer ---------- */
.site-footer{
  background:var(--aubergine);
  color:var(--stone);
  padding-top:3rem;
  padding-bottom:3rem;
}
.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:1.5rem;
}
.footer-logo{
  font-family:var(--serif);
  font-size:1.3rem;
  color:var(--ivory);
}
.footer-links{ display:flex; gap:1.8rem; }
.footer-links a{ font-size:0.9rem; color:var(--stone); }
.footer-links a:hover{ color:var(--ivory); }
.footer-copy{
  width:100%;
  margin-top:1.5rem;
  padding-top:1.5rem;
  border-top:1px solid rgba(245,241,232,0.14);
  font-size:0.82rem;
  color:rgba(217,213,204,0.7);
}

/* ---------- Reveal-on-scroll (subtle) ---------- */
/* Deliberately ".js .reveal" (no "html" type selector) so this stays
   equal-specificity with ".reveal.is-visible" below and loses to it on
   source order — "html.js .reveal" adds an extra type-selector point
   that made the hidden state always win and left every scroll-revealed
   section permanently blank regardless of the is-visible class. */
.js .reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity 700ms ease, transform 700ms ease;
}
.reveal.is-visible{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
  html.js .reveal{ opacity:1; transform:none; }
  .hero h1 .line, .hero-copy p.lead, .hero-actions{ opacity:1; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns:1fr; }
  /* Mobile reading order: heading, then image, then eyebrow / lead / actions.
     hero-copy becomes a transparent wrapper so its children can be
     reordered individually alongside hero-visual — desktop is untouched. */
  .hero-copy{ display:contents; }
  .hero h1{ order:1; }
  .hero-visual{ order:2; margin:0 0 2.5rem; max-width:380px; }
  .hero-copy .eyebrow{ order:3; }
  .hero-copy p.lead{ order:4; }
  .hero-copy .hero-actions{ order:5; }
  .hero-ghost{
    top:-0.7rem; left:calc(var(--edge) * -1);
    font-size:clamp(4.5rem,26vw,7.5rem);
    -webkit-text-stroke:1px rgba(23,23,23,0.08);
  }
  .hero-tag{ display:none; }
  .shift-ghost{
    top:-0.35em; left:calc(var(--edge) * -1);
    transform:none;
    font-size:clamp(4.5rem,26vw,7.5rem);
    -webkit-text-stroke:1px rgba(245,241,232,0.09);
  }
  .shift-heading{ grid-template-columns:1fr; text-align:left; gap:1.5rem; justify-items:start; }
  .shift-from, .shift-to{ text-align:left; margin-top:0; }
  .shift-pivot{ width:2.3rem; height:2.3rem; }
  .shift-pivot::before{ display:none; }
  .shift-cols{ grid-template-columns:1fr; gap:2rem; }
  .shift-spine{ display:none; }
  .shift-list--to{ text-align:left; }
  .transform-resolve{ text-align:left; }
  .service-row{ grid-template-columns:3rem 1fr; }
  .outcome-ghost{ display:none; }
  .outcome-item, .outcome-item--confidence{ flex-direction:column; align-items:flex-start; gap:0.9rem; }
  .outcome-item h3, .outcome-item p{ flex:none; max-width:none; }
  .outcome-item--clarity h3, .outcome-item--confidence h3, .outcome-item--credibility h3{ text-align:left; }
  .outcome-item--confidence p{ text-align:left; }
  .process-steps{ grid-template-columns:1fr 1fr; }
  .process-rail::before{ display:none; }
  .case-study{ grid-template-columns:1fr; }
  .case-visual .texture-panel.small{ right:0; bottom:-2rem; width:40%; }
  /* Meet helloNira: after the intro paragraph, the image and the three
     statements sit side by side — image left, icons/text right — instead
     of the desktop arrangement (image below the heading, in its own
     column). section-head/about-copy become transparent wrappers so their
     children can be placed freely as one grid. */
  .about-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:1.1rem;
    row-gap:0;
    align-items:start;
    grid-template-areas:
      "eyebrow eyebrow"
      "heading heading"
      "lead lead"
      "image triad"
      "close close";
  }
  .about-grid .section-head, .about-grid .about-copy{ display:contents; }
  .about-grid .eyebrow{ grid-area:eyebrow; }
  .about-grid .section-head h2{ grid-area:heading; }
  .about-copy{ padding-right:0; }
  .about-image{
    grid-area:image;
    position:static;
    top:auto; right:auto; transform:none;
    width:100%; max-width:none;
    margin-top:0;
    align-self:start;
  }
  .about-copy p.lead{ grid-area:lead; margin-top:1.75rem; }
  .about-triad{ grid-area:triad; margin:0; padding:0; border:none; align-self:start; }
  .about-copy > p.close{ grid-area:close; margin-top:1.8rem; }
  .triad-line{ padding:0.4rem 0; }
  .contact-grid{ grid-template-columns:1fr; }
  .work-header{ flex-direction:column; align-items:flex-start; gap:0.75rem; }
}

@media (max-width: 760px){
  .nav-links, .nav-cta .text-link{ display:none; }
  .nav-toggle{ display:flex; }
  .nav-cta{ gap:0.9rem; }
  .site-header.menu-open .nav-links{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:1.1rem;
    position:absolute;
    top:100%; left:0; right:0;
    background:var(--ivory);
    padding:1.5rem var(--edge) 2rem;
    border-bottom:1px solid rgba(23,23,23,0.1);
  }
  .process-steps{ grid-template-columns:1fr 1fr; }
  .form-row{ grid-template-columns:1fr; }
}

@media (max-width: 560px){
  .service-row{ grid-template-columns:1fr; }
  .service-num{ margin-bottom:0.3rem; }
  .process-steps{ grid-template-columns:1fr; }
  .process-steps li:nth-child(even){ margin-top:0; }
}