/* 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; }
/* Reset native <button> chrome when .text-link is applied to a button
   (e.g. the cookie banner's tertiary action) instead of an <a>. */
button.text-link{
  background:none;
  border:none;
  border-bottom:1px solid rgba(102,59,99,0.4);
  font-family:inherit;
  cursor:pointer;
}

.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-img{
  height:36px;
  width:auto;
  display:block;
}
.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(-0.5deg); }
.shift-list--from li:nth-child(2){ transform:rotate(0.4deg); }
.shift-list--from li:nth-child(3){ transform:rotate(-0.6deg); }
.shift-list--from li:nth-child(4){ transform:rotate(0.3deg); }
.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 ---------- */

/* Progression bar — Clarify / Build / Grow. The strongest visual cue for
   the package structure is kept deliberately quiet: uppercase labels tied
   together by a thin rule, weight increasing left to right. */
.progression{
  display:flex;
  align-items:center;
  justify-content:center;
  max-width:620px;
  margin:0 auto clamp(3rem,6vw,4.5rem);
}
.progression-step{
  font-family:var(--sans);
  font-size:0.78rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  font-weight:700;
  color:#9a9a9a;
  white-space:nowrap;
}
.progression-step.is-build{ color:var(--plum); }
.progression-step.is-grow{ color:var(--ink); }
.progression-line{
  flex:1;
  height:1px;
  min-width:1.5rem;
  margin:0 0.9rem;
  background:rgba(23,23,23,0.16);
}

/* Package cards — thin rules, no shadows, no rounded "startup" corners.
   The Build tier is set apart with a plum top rule and a faint tint
   rather than a "most popular" badge. */
.packages{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(1.5rem,3vw,2rem);
  align-items:stretch;
  margin-bottom:clamp(4rem,7vw,5.5rem);
}
.package-card{
  display:flex;
  flex-direction:column;
  border:1px solid rgba(23,23,23,0.16);
  padding:clamp(2rem,3vw,2.5rem) clamp(1.5rem,2.5vw,2.1rem);
}
.package-card--build{
  border-color:rgba(102,59,99,0.4);
  border-top:3px solid var(--plum);
  background:rgba(102,59,99,0.035);
}
.package-stage{
  font-family:var(--sans);
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--plum);
  margin-bottom:1rem;
}
.package-name{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.35rem,2vw,1.6rem);
  line-height:1.22;
  margin-bottom:1.1rem;
}
.package-price{
  display:flex;
  align-items:baseline;
  gap:0.55rem;
  margin-bottom:1.1rem;
}
.package-price .label{
  font-family:var(--sans);
  font-size:0.68rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  font-weight:700;
  color:#8a8a8a;
}
.package-price strong{
  font-family:var(--serif);
  font-weight:400;
  font-size:1.9rem;
  color:var(--ink);
}
.package-for{
  font-family:var(--sans);
  font-weight:600;
  font-size:0.92rem;
  color:var(--ink);
  margin-bottom:0.9rem;
}
.package-desc{
  font-size:0.95rem;
  color:#4a4a4a;
  margin-bottom:1.6rem;
  padding-bottom:1.6rem;
  border-bottom:1px solid rgba(23,23,23,0.1);
}
.package-includes-lead{
  font-family:var(--sans);
  font-size:0.76rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  font-weight:700;
  color:#6b6b6b;
  margin-bottom:0.9rem;
}
.package-includes{
  display:flex;
  flex-direction:column;
  gap:0.55rem;
  margin-bottom:1.8rem;
}
.package-includes li{
  position:relative;
  padding-left:1.1rem;
  font-size:0.92rem;
  color:#333;
  line-height:1.45;
}
.package-includes li::before{
  content:"—";
  position:absolute;
  left:0;
  color:var(--plum);
}
.package-foot{
  margin-top:auto;
  padding-top:1.6rem;
  border-top:1px solid rgba(23,23,23,0.1);
}
.package-outcome{
  font-size:0.88rem;
  line-height:1.55;
  color:#4a4a4a;
  margin-bottom:1.3rem;
}
.package-outcome .label{
  display:block;
  font-family:var(--sans);
  font-size:0.68rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--plum);
  margin-bottom:0.4rem;
}
.package-cta{
  display:inline-flex;
  align-items:center;
  gap:0.4rem;
  font-family:var(--sans);
  font-weight:600;
  font-size:0.85rem;
  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;
}
.package-cta:hover{ color:var(--ink); border-color:var(--ink); gap:0.65rem; }

/* Comparison table — editorial, not a SaaS pricing grid. The Build column
   keeps the same faint tint used on its package card for continuity. */
.compare{ margin-bottom:clamp(4rem,7vw,5.5rem); }
.compare-head{ max-width:640px; margin-bottom:clamp(2rem,4vw,2.75rem); }
.compare-head .eyebrow{ margin-bottom:0.9rem; }
.compare-head h3{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.5rem,2.6vw,2rem);
}
.compare-table{
  width:100%;
  border-collapse:collapse;
  font-size:0.9rem;
}
.compare-table th, .compare-table td{
  padding:0.9rem 1rem;
  text-align:center;
  border-bottom:1px solid rgba(23,23,23,0.1);
}
.compare-table .compare-feature-col{ text-align:left; }
.compare-table thead th{
  font-family:var(--sans);
  font-size:0.72rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-weight:700;
  color:#6b6b6b;
  vertical-align:bottom;
  border-bottom:1px solid rgba(23,23,23,0.2);
}
.compare-table thead th:nth-child(3){ color:var(--plum); }
.compare-table td:nth-child(3){ background:rgba(102,59,99,0.035); }
.compare-table tbody th{
  text-align:left;
  font-family:var(--sans);
  font-weight:600;
  font-size:0.9rem;
  color:var(--ink);
}
.compare-table .yes{ color:var(--plum); font-weight:700; }
.compare-table .no{ color:#c8c2b6; }

/* Upgrade model — a quietly bordered panel, set apart from the cards
   above rather than competing with them. */
.upgrade{
  max-width:820px;
  margin:0 auto clamp(4rem,7vw,5.5rem);
  padding:clamp(2.25rem,4vw,3.25rem) clamp(1.75rem,4vw,3rem);
  border:1px solid rgba(102,59,99,0.28);
  border-left:3px solid var(--plum);
  background:rgba(102,59,99,0.035);
}
.upgrade-kicker{
  font-family:var(--sans);
  font-size:0.76rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--plum);
  margin-bottom:1rem;
}
.upgrade-text{
  font-size:1rem;
  color:#3c3c3c;
  max-width:56ch;
  margin-bottom:1.6rem;
}
.upgrade-statement{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1.3rem,2.2vw,1.6rem);
  color:var(--ink);
  margin-bottom:0.9rem;
}
.upgrade-explain{
  font-size:0.95rem;
  color:#4a4a4a;
  max-width:62ch;
  margin-bottom:2rem;
  padding-bottom:2rem;
  border-bottom:1px solid rgba(23,23,23,0.12);
}
.upgrade-paths{ display:flex; flex-direction:column; margin-bottom:1.6rem; }
.upgrade-paths li{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:0.5rem 1.5rem;
  padding:0.9rem 0;
  border-top:1px solid rgba(23,23,23,0.1);
}
.upgrade-paths li:first-child{ border-top:none; padding-top:0; }
.path{ font-family:var(--sans); font-weight:600; font-size:0.92rem; color:var(--ink); }
.path .arrow{ color:var(--plum); margin:0 0.4rem; }
.sum{ display:flex; align-items:baseline; gap:0.5rem; white-space:nowrap; }
.sum .label{
  font-family:var(--sans);
  font-size:0.68rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-weight:700;
  color:#6b6b6b;
}
.sum strong{ font-family:var(--serif); font-weight:400; font-size:1.15rem; color:var(--plum); }
.upgrade-disclaimer{ font-size:0.78rem; color:#7a7a7a; font-style:italic; }

/* Additional services — deliberately quiet and secondary. */
.addons{
  max-width:760px;
  margin:0 auto clamp(4rem,7vw,5.5rem);
  padding-top:clamp(2.5rem,5vw,3.5rem);
  border-top:1px solid rgba(23,23,23,0.1);
  text-align:center;
}
.addons-kicker{
  font-family:var(--sans);
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  font-weight:700;
  color:#9a9a9a;
  margin-bottom:0.9rem;
}
.addons-text{ font-size:0.95rem; color:#4a4a4a; margin:0 auto 1.1rem; max-width:56ch; }
.addons-list{ font-size:0.85rem; color:#6b6b6b; line-height:1.75; margin-bottom:1.4rem; }

/* Services closing CTA */
.services-cta{ max-width:600px; margin:0 auto; text-align:center; }
.services-cta-q{
  font-family:var(--serif);
  font-size:clamp(1.3rem,2.4vw,1.7rem);
  color:var(--ink);
  margin-bottom:0.4rem;
}
.services-cta-a{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1.5rem,2.8vw,2rem);
  color:var(--plum);
  margin-bottom:1.8rem;
}

/* ---------- Outcomes ---------- */
/* Reduced to a single bold statement: the three words, all the same size,
   ivory on a solid plum band — no supporting copy, no ghost type. */
.outcomes{
  background:var(--plum);
  padding-top:clamp(3.5rem,7vw,5.5rem);
  padding-bottom:clamp(3.5rem,7vw,5.5rem);
}
.outcomes-band{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:clamp(1.25rem,4vw,3rem);
  text-align:center;
}
.outcomes-word{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2rem,5vw,3.6rem);
  line-height:1.15;
  color:var(--ivory);
  white-space:nowrap;
}

/* ---------- 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);
  display:inline-block;
}
/* Recolours the (Deep Plum on transparent) logo file to ivory without a
   second image: the PNG is used purely as an alpha mask, filled with the
   ivory background-color. Works because the mark is a single flat colour. */
.footer-logo-mark{
  display:block;
  width:clamp(120px,14vw,160px);
  aspect-ratio:2013 / 550;
  background-color:var(--ivory);
  -webkit-mask-image:url(images/logo-hellonira.png);
  mask-image:url(images/logo-hellonira.png);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-size:contain;
  mask-size:contain;
  -webkit-mask-position:left center;
  mask-position:left center;
}
.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-bottom{
  width:100%;
  margin-top:1.5rem;
  padding-top:1.5rem;
  border-top:1px solid rgba(245,241,232,0.14);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:0.75rem 2rem;
}
.footer-copy{
  font-size:0.82rem;
  color:rgba(217,213,204,0.7);
  margin:0;
}
.footer-legal{ display:flex; flex-wrap:wrap; gap:0.4rem 1.5rem; }
.footer-legal a, .footer-cookie-btn{
  font-family:var(--sans);
  font-size:0.82rem;
  color:rgba(217,213,204,0.7);
  background:none;
  border:none;
  padding:0;
  margin:0;
  cursor:pointer;
}
.footer-legal a:hover, .footer-cookie-btn:hover{ color:var(--ivory); }

/* ---------- Legal pages (Impressum / Privacy Policy / Terms) ---------- */
.legal-hero{
  padding-top:clamp(6rem,11vw,8.5rem);
  padding-bottom:clamp(2.5rem,5vw,3.5rem);
  border-bottom:1px solid rgba(23,23,23,0.12);
}
.legal-hero .eyebrow{ margin-bottom:1rem; }
.legal-hero h1{ font-size:clamp(2.1rem,4.2vw,3rem); max-width:22ch; }
.legal-updated{ margin-top:1.1rem; font-size:0.85rem; color:#6b6b6b; }

.legal-content{ padding-top:0; padding-bottom:0; }
.legal-body{
  max-width:72ch;
  padding-top:clamp(3rem,6vw,4.5rem);
  padding-bottom:clamp(4rem,8vw,6rem);
}
.legal-body h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.25rem,2.2vw,1.55rem);
  margin-top:clamp(2.5rem,5vw,3.25rem);
  margin-bottom:0.9rem;
}
.legal-body > h2:first-child{ margin-top:0; }
.legal-body p{
  font-size:0.98rem;
  line-height:1.7;
  color:#333;
  margin:0 0 1.1rem;
}
.legal-body address{
  font-style:normal;
  font-size:0.98rem;
  line-height:1.7;
  color:#333;
  margin:0 0 1.1rem;
}
.legal-body ul{
  margin:0 0 1.3rem;
  padding-left:0;
  display:flex;
  flex-direction:column;
  gap:0.5rem;
}
.legal-body ul li{
  position:relative;
  padding-left:1.2rem;
  font-size:0.96rem;
  line-height:1.6;
  color:#333;
}
.legal-body ul li::before{ content:"—"; position:absolute; left:0; color:var(--plum); }
.legal-body ol{
  margin:0 0 1.3rem;
  padding-left:1.3rem;
  display:flex;
  flex-direction:column;
  gap:0.5rem;
}
.legal-body ol li{ font-size:0.96rem; line-height:1.6; color:#333; padding-left:0.3rem; }
.legal-body a{ color:var(--plum); border-bottom:1px solid rgba(102,59,99,0.35); }
.legal-body a:hover{ color:var(--ink); border-color:var(--ink); }
.legal-inline-btn{
  font:inherit;
  color:var(--plum);
  background:none;
  border:none;
  border-bottom:1px solid rgba(102,59,99,0.35);
  padding:0;
  cursor:pointer;
}
.legal-inline-btn:hover{ color:var(--ink); border-color:var(--ink); }
.legal-body strong{ color:var(--ink); }
.legal-tbc{
  background:rgba(102,59,99,0.09);
  padding:0.05em 0.45em;
  border-radius:2px;
  font-weight:600;
  color:var(--plum);
}
.legal-packages{
  display:flex;
  flex-direction:column;
  gap:0.9rem;
  margin:0 0 1.3rem;
  padding:1.4rem 1.6rem;
  border:1px solid rgba(23,23,23,0.14);
}
.legal-packages .pkg-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}
.legal-packages .pkg-name{ font-family:var(--sans); font-weight:600; font-size:0.95rem; color:var(--ink); }
.legal-packages .pkg-price{ font-family:var(--serif); font-size:1.1rem; color:var(--plum); white-space:nowrap; }

/* ---------- Cookie consent (banner + settings modal) ---------- */
.cookie-banner{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:200;
  background:var(--ink);
  color:var(--ivory);
  padding:1.5rem var(--edge);
  transform:translateY(110%);
  transition:transform 400ms ease;
}
.cookie-banner.is-visible{ transform:translateY(0); }
.cookie-banner-inner{
  max-width:var(--container);
  margin:0 auto;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:1.25rem 2rem;
  justify-content:space-between;
}
.cookie-banner-text{ max-width:56ch; font-size:0.92rem; line-height:1.55; color:rgba(245,241,232,0.85); }
.cookie-banner-text a{ color:var(--ivory); border-bottom:1px solid rgba(245,241,232,0.4); }
.cookie-banner-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:0.75rem 1.25rem; }
.cookie-banner-actions .text-link{ color:rgba(245,241,232,0.8); border-bottom-color:rgba(245,241,232,0.35); font-size:0.85rem; }
.cookie-banner-actions .text-link:hover{ color:var(--ivory); border-color:var(--ivory); }
.cookie-btn{
  font-family:var(--sans);
  font-weight:600;
  font-size:0.78rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:0.75rem 1.4rem;
  border:1px solid rgba(245,241,232,0.5);
  background:transparent;
  color:var(--ivory);
  cursor:pointer;
  transition:background 220ms ease, color 220ms ease, border-color 220ms ease;
  white-space:nowrap;
}
.cookie-btn:hover{ background:rgba(245,241,232,0.1); }
.cookie-btn.cookie-btn--primary{ background:var(--plum); border-color:var(--plum); }
.cookie-btn.cookie-btn--primary:hover{ background:var(--ivory); color:var(--ink); border-color:var(--ivory); }

.cookie-modal-overlay{
  position:fixed;
  inset:0;
  z-index:210;
  background:rgba(23,23,23,0.55);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.5rem;
  opacity:0;
  pointer-events:none;
  transition:opacity 250ms ease;
}
.cookie-modal-overlay.is-visible{ opacity:1; pointer-events:auto; }
.cookie-modal{
  background:var(--ivory);
  color:var(--ink);
  max-width:560px;
  width:100%;
  max-height:88vh;
  overflow-y:auto;
  padding:clamp(1.75rem,4vw,2.5rem);
  position:relative;
  border:1px solid rgba(23,23,23,0.12);
}
.cookie-modal-close{
  position:absolute;
  top:1.1rem; right:1.1rem;
  width:2rem; height:2rem;
  border:1px solid rgba(23,23,23,0.2);
  background:transparent;
  color:var(--ink);
  cursor:pointer;
  font-size:1rem;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
}
.cookie-modal-close:hover{ background:var(--ink); color:var(--ivory); border-color:var(--ink); }
.cookie-modal h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.4rem,2.6vw,1.7rem);
  margin:0 0 0.9rem;
  padding-right:2.5rem;
}
.cookie-modal-intro{ font-size:0.92rem; color:#3c3c3c; line-height:1.6; margin-bottom:1.6rem; }
.cookie-modal-intro a{ color:var(--plum); border-bottom:1px solid rgba(102,59,99,0.35); }
.cookie-option{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1.25rem;
  padding:1.25rem 0;
  border-top:1px solid rgba(23,23,23,0.12);
}
.cookie-option:first-of-type{ border-top:none; }
.cookie-option-text h3{
  font-family:var(--sans);
  font-weight:700;
  font-size:0.92rem;
  color:var(--ink);
  margin:0 0 0.35rem;
}
.cookie-option-text p{ font-size:0.86rem; color:#4a4a4a; line-height:1.55; margin:0; max-width:36ch; }
.cookie-toggle{
  position:relative;
  flex-shrink:0;
  width:44px; height:24px;
}
.cookie-toggle input{
  position:absolute;
  opacity:0;
  width:100%; height:100%;
  margin:0;
  cursor:pointer;
}
.cookie-toggle-track{
  position:absolute;
  inset:0;
  background:#c9c4b8;
  border-radius:999px;
  transition:background 200ms ease;
}
.cookie-toggle-track::before{
  content:"";
  position:absolute;
  top:3px; left:3px;
  width:18px; height:18px;
  border-radius:50%;
  background:var(--ivory);
  transition:transform 200ms ease;
}
.cookie-toggle input:checked + .cookie-toggle-track{ background:var(--plum); }
.cookie-toggle input:checked + .cookie-toggle-track::before{ transform:translateX(20px); }
.cookie-toggle input:disabled + .cookie-toggle-track{ background:rgba(102,59,99,0.55); cursor:not-allowed; }
.cookie-toggle input:disabled{ cursor:not-allowed; }
.cookie-modal-actions{
  margin-top:1.75rem;
  padding-top:1.5rem;
  border-top:1px solid rgba(23,23,23,0.12);
  display:flex;
  flex-wrap:wrap;
  gap:0.9rem;
}
.cookie-modal-actions .cookie-btn{ border-color:var(--ink); color:var(--ink); }
.cookie-modal-actions .cookie-btn:hover{ background:var(--ink); color:var(--ivory); }
.cookie-modal-actions .cookie-btn.cookie-btn--primary{ background:var(--plum); border-color:var(--plum); color:var(--ivory); }
.cookie-modal-actions .cookie-btn.cookie-btn--primary:hover{ background:var(--ink); border-color:var(--ink); }

/* ---------- 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; }
  /* Packages: stack to one column; the Build card's tint/top-rule still
     reads fine full-width, so no extra override is needed. */
  .packages{ grid-template-columns:1fr; }

  /* Comparison table: no horizontal scroll on narrow screens — each row
     becomes a small labeled block instead, using the data-label already
     present on every cell. */
  .compare-table thead{ display:none; }
  .compare-table, .compare-table tbody, .compare-table tr,
  .compare-table th, .compare-table td{ display:block; width:100%; }
  .compare-table tr{
    padding:1rem 0;
    border-bottom:1px solid rgba(23,23,23,0.14);
  }
  .compare-table tbody th{
    padding:0 0 0.6rem;
    font-family:var(--serif);
    font-weight:400;
    font-size:1.05rem;
    border:none;
  }
  .compare-table td{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0.45rem 0;
    text-align:left;
    border:none;
    background:none !important;
  }
  .compare-table td::before{
    content:attr(data-label);
    font-family:var(--sans);
    font-size:0.78rem;
    font-weight:600;
    color:#6b6b6b;
  }

  .upgrade-paths li{ flex-direction:column; align-items:flex-start; gap:0.35rem; }

  .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; }
  .logo-img{ height:28px; }
  .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; }
  .cookie-banner-inner{ flex-direction:column; align-items:flex-start; }
  .cookie-banner-actions{ width:100%; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
}

@media (max-width: 560px){
  .process-steps{ grid-template-columns:1fr; }
  .process-steps li:nth-child(even){ margin-top:0; }
  .progression{ max-width:100%; }
  .progression-step{ font-size:0.66rem; }
  .progression-line{ margin:0 0.5rem; }
  .package-card{ padding:1.75rem 1.4rem; }
  .upgrade{ padding:1.9rem 1.4rem; }
}

/* ==========================================================
   Marketing additions (booking, FAQ, founder, timelines)
   Uses the existing tokens: --plum, --ivory, --stone, --serif
   ========================================================== */

/* Hero microcopy under the CTA */
.x-micro{
  margin-top:1.1rem;
  font-size:0.82rem;
  color:#5c5c5c;
  opacity:0;
  animation:lineIn 900ms ease forwards;
  animation-delay:640ms;
}

/* Package: "Most chosen" flag + timeline */
.package-card--build{ position:relative; }
.x-flag{
  position:absolute; top:-3px; right:-1px;
  background:var(--plum); color:var(--ivory);
  font-size:0.66rem; letter-spacing:0.14em; text-transform:uppercase; font-weight:700;
  padding:0.4rem 0.8rem;
}
.x-timeline{
  font-size:0.82rem; color:#6b6b6b;
  margin:-0.3rem 0 0.9rem;
}
.x-timeline strong{ font-weight:700; color:#4a4a4a; }

/* About: founder block */
.x-founder{ margin:0 0 1.8rem; }
.x-founder-name{
  font-family:var(--serif); font-size:1.35rem; line-height:1.2; margin-bottom:0.9rem;
}
.x-founder-name span{
  display:block; font-family:var(--sans); font-size:0.72rem; letter-spacing:0.14em;
  text-transform:uppercase; font-weight:700; color:var(--plum); margin-top:0.35rem;
}
.x-founder > p{ font-size:0.98rem; color:#3c3c3c; max-width:56ch; }
.x-stats{
  display:grid; grid-template-columns:1fr 1fr; gap:1.3rem 1.6rem; margin-top:1.6rem;
}
.x-stats li{ font-size:0.84rem; color:#4a4a4a; line-height:1.4; }
.x-stats strong{
  display:block; font-family:var(--serif); font-weight:400;
  font-size:1.55rem; line-height:1.15; color:var(--plum); margin-bottom:0.15rem;
}

/* FAQ */
.x-faq-list{ max-width:820px; border-top:1px solid rgba(23,23,23,0.16); }
.x-faq-list details{ border-bottom:1px solid rgba(23,23,23,0.16); }
.x-faq-list summary{
  cursor:pointer; list-style:none; position:relative;
  font-family:var(--serif); font-size:clamp(1.1rem,1.8vw,1.3rem);
  padding:1.3rem 2.6rem 1.3rem 0;
}
.x-faq-list summary::-webkit-details-marker{ display:none; }
.x-faq-list summary::after{
  content:"+"; position:absolute; right:0.2rem; top:50%; transform:translateY(-50%);
  font-family:var(--sans); font-size:1.5rem; font-weight:300; color:var(--plum);
}
.x-faq-list details[open] summary::after{ content:"–"; }
.x-faq-list details p{ margin:0 0 1.5rem; max-width:62ch; color:#3c3c3c; font-size:0.98rem; }

/* Contact: facts + booking embed + alternative form */
.x-facts{ margin-top:2rem; }
.x-facts li{
  padding:0.7rem 0; border-bottom:1px solid rgba(23,23,23,0.14); font-size:0.95rem; color:#3c3c3c;
}
.x-facts span{
  display:inline-block; width:7rem; font-size:0.72rem; letter-spacing:0.14em;
  text-transform:uppercase; font-weight:700; color:var(--plum);
}
.x-book{
  border:1px solid rgba(102,59,99,0.35); border-top:3px solid var(--plum);
  background:rgba(102,59,99,0.035); padding:clamp(1.5rem,3vw,2.1rem);
}
.x-book-title{ font-family:var(--serif); font-size:1.5rem; line-height:1.2; margin-bottom:0.6rem; }
.x-book-copy{ font-size:0.95rem; color:#4a4a4a; max-width:44ch; }
.x-chips{ display:flex; flex-wrap:wrap; align-items:center; gap:0.5rem; margin:1.4rem 0 1.6rem; }
.x-chips-label{
  font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; font-weight:700;
  color:#5c5c5c; margin-right:0.4rem;
}
.x-chip{
  font-family:var(--sans); font-size:0.78rem; font-weight:600; letter-spacing:0.06em;
  padding:0.45rem 0.85rem; border:1px solid rgba(102,59,99,0.45); border-radius:3px;
  background:transparent; color:var(--plum); cursor:pointer;
  transition:background 200ms ease, color 200ms ease;
}
.x-chip:hover{ background:rgba(102,59,99,0.1); }
.x-chip[aria-pressed="true"]{ background:var(--plum); color:var(--ivory); }
.x-fine{ font-size:0.78rem; color:#5c5c5c; margin-top:1.1rem; line-height:1.55; }
.x-fine a, .x-consent a{ color:var(--plum); text-decoration:underline; }
#bookingFrame{
  display:block; width:100%; min-height:680px;
  border:1px solid rgba(23,23,23,0.16); background:#fff;
}
.x-alt{ margin-top:1.8rem; border-top:1px solid rgba(23,23,23,0.16); padding-top:1rem; }
.x-alt summary{
  cursor:pointer; padding:0.4rem 0; font-weight:600; font-size:0.92rem; color:var(--plum);
  text-decoration:underline; text-underline-offset:3px;
}
.x-alt form{ margin-top:1.4rem; }
/* Consent checkbox: neutralise the global label/input styling */
label.x-consent{
  display:flex; gap:0.7rem; align-items:flex-start; margin:0;
  text-transform:none; letter-spacing:0; font-weight:400; font-size:0.84rem; color:#4a4a4a;
}
.x-consent input{
  width:auto; flex:none; margin-top:0.2rem; padding:0; border:none; accent-color:var(--plum);
}

/* ---------- Responsive fixes for the additions ---------- */
@media (max-width: 980px){
  /* hero-copy is display:contents here, so the microcopy needs its own order */
  .hero-copy .x-micro{ order:6; }
  /* about-copy is display:contents + named grid areas: give the founder block its own row */
  .about-grid{
    grid-template-areas:
      "eyebrow eyebrow"
      "heading heading"
      "lead lead"
      "founder founder"
      "image triad"
      "close close";
  }
  .x-founder{ grid-area:founder; margin:0.2rem 0 2rem; }
}
@media (max-width: 560px){
  .x-stats{ grid-template-columns:1fr 1fr; gap:1.1rem 1rem; }
  .x-facts span{ width:100%; display:block; margin-bottom:0.15rem; }
  #bookingFrame{ min-height:760px; }
}