/* ============================================================
   IMOGEN ISHERWOOD — Private PA & Business Support
   Your time, intelligently managed.

   Editorial, premium, restrained. Type and space do the work.
   Swap photography in one place: the --img-* tokens below.
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  /* Photography. A background-image list is a stack, not a fallback
     chain — every layer downloads — so each token names one file. */
  --img-hero:     url("../img/hero.jpg");
  --img-portrait: url("../img/imogen-headshot.jpg");
  --img-experience: url("../img/imogen-headshot.jpg");
  --img-imogen:     url("../img/imogen-experience.jpg");
  --img-private:    url("../img/imogen-private.jpg");
  --img-corporate:  url("../img/imogen-boardroom.jpg");

  /* Colour */
  --ink:        #0e0e0d;
  --ink-soft:   #191917;
  --ink-lift:   #24241f;
  --bone:       #f6f2ec;
  --bone-warm:  #efe9df;
  --bone-dim:   #d9d2c5;
  --accent:     #a98c63;
  --accent-dk:  #7d6340;   /* small text on light grounds */
  --accent-lt:  #c8ad86;
  --muted:      #6b6660;
  --muted-lt:   rgba(246,242,236,.62);
  --rule:       rgba(14,14,13,.14);
  --rule-lt:    rgba(246,242,236,.16);

  /* Type */
  --serif: "Cormorant Garamond", "Times New Roman", Times, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Space */
  --gutter: clamp(1.5rem, 5vw, 5rem);
  --section-y: clamp(6rem, 14vh, 12rem);
  --measure: 62ch;

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --slow: 1.1s;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(1rem,.95rem + .2vw,1.0625rem);
  font-weight:300;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
h1,h2,h3,p,ul,figure{ margin:0; }
ul{ padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
/* Form controls do not inherit type by default; without this an unstyled
   input falls back to Arial and quietly adds a third family. */
input,textarea,select{ font-family:var(--sans); }
::selection{ background:var(--accent); color:var(--bone); }

.skip-link{
  position:absolute; left:-999px; top:0; z-index:200;
  background:var(--ink); color:var(--bone); padding:.75rem 1.25rem;
}
.skip-link:focus{ left:0; }

:focus-visible{ outline:1px solid var(--accent); outline-offset:4px; }

/* ---------- Layout helpers ---------- */
.wrap{ width:100%; max-width:78rem; margin-inline:auto; padding-inline:var(--gutter); }
.wrap--narrow{ max-width:56rem; }
.section{ padding-block:var(--section-y); position:relative; }

/* ---------- Shared type ---------- */
.eyebrow{
  font-family:var(--sans);
  font-size:.6875rem;
  font-weight:400;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:clamp(1.75rem,4vw,3rem);
}
.eyebrow--light{ color:var(--muted-lt); }

.display{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(2.25rem,1.4rem + 3.6vw,4rem);
  line-height:1.08;
  letter-spacing:-.015em;
  margin:0;
}
.display--lg{ font-size:clamp(2.5rem,1.4rem + 4.4vw,4.75rem); }
.display--xl{ font-size:clamp(2.75rem,1.2rem + 6.2vw,6.5rem); }
.display em{ font-style:italic; }

.prose{
  max-width:var(--measure);
  color:var(--muted);
  margin-top:1.5rem;
}
.prose--centre{ margin-inline:auto; text-align:center; }
.prose--light{ color:var(--muted-lt); }
.prose--accent{ color:var(--ink); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.85em;
  font-size:.75rem; letter-spacing:.24em; text-transform:uppercase;
  font-weight:400;
  padding-bottom:.7rem;
  border-bottom:1px solid currentColor;
  transition:gap .5s var(--ease), color .4s var(--ease);
}
.btn:hover{ gap:1.5em; color:var(--accent-lt); }
.btn--solid{
  border:1px solid var(--rule-lt);
  border-radius:2px;
  padding:1.1rem 2rem;
  align-self:flex-start;
  transition:gap .5s var(--ease), background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.btn--solid:hover{ background:var(--accent); border-color:var(--accent); color:var(--ink); }

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding-block:clamp(1.1rem,2.4vw,1.9rem);
  color:var(--bone);
  transition:background .6s var(--ease), color .6s var(--ease),
             padding .6s var(--ease), box-shadow .6s var(--ease);
}
.site-header__inner{
  width:100%; max-width:78rem; margin-inline:auto; padding-inline:var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
}
.site-header.is-stuck{
  background:rgba(14,14,13,.88);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  color:var(--bone);
  padding-block:.85rem;
  box-shadow:0 1px 0 var(--rule-lt);
}

.wordmark{ display:block; line-height:0; }
.wordmark__logo{
  display:block; width:auto;
  height:clamp(1.65rem,2.6vw,2.15rem);
  transition:height .6s var(--ease);
}
.site-header.is-stuck .wordmark__logo{ height:clamp(1.5rem,2.2vw,1.85rem); }

.nav{ display:flex; align-items:center; gap:clamp(1.5rem,3vw,2.75rem); }
.nav a{
  font-size:.6875rem; letter-spacing:.22em; text-transform:uppercase;
  position:relative; padding-block:.3rem; opacity:.85;
  transition:opacity .35s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .5s var(--ease);
}
.nav a:hover{ opacity:1; }
.nav a:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav__cta{ color:var(--accent-lt); opacity:1; }
.site-header.is-stuck .nav__cta{ color:var(--accent-lt); }

.nav-toggle{ display:none; width:2rem; height:1.25rem; position:relative; }
.nav-toggle span{
  position:absolute; left:0; width:100%; height:1px; background:currentColor;
  transition:transform .45s var(--ease), opacity .3s var(--ease);
}
.nav-toggle span:first-child{ top:.25rem; }
.nav-toggle span:last-child{ bottom:.25rem; }
.nav-toggle[aria-expanded="true"] span:first-child{ transform:translateY(.35rem) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child{ transform:translateY(-.35rem) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:var(--gutter);
  padding-top:clamp(6.5rem,13vh,9rem);
  padding-bottom:clamp(4.5rem,12vh,8rem);
  color:var(--bone);
  overflow:hidden;
  isolation:isolate;
}
.hero__media{
  position:absolute; inset:-2% ; z-index:-2;
  background-color:#141311;
  background-image:var(--img-hero);
  background-size:cover; background-position:center center;
  transform:scale(1.06);
  will-change:transform;
}
.hero__veil{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(10,10,9,.62) 0%, rgba(10,10,9,.18) 38%, rgba(10,10,9,.86) 100%),
    radial-gradient(120% 80% at 20% 60%, rgba(10,10,9,.5), transparent 70%);
}
.hero__content{ width:100%; max-width:78rem; margin-inline:auto; }
.hero__byline{ margin-bottom:clamp(1.25rem,3vw,2rem); }
.hero__name{
  font-size:clamp(.625rem,.58rem + .18vw,.75rem);
  font-weight:400;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:rgba(246,242,236,.7);
  margin:.85rem 0 0 0;
}
/* Imogen's own signature, in gold ink on the dark hero. Decorative only —
   the name is set in text directly above it. */
.hero__signature{
  display:block; height:auto;
  width:min(13.3rem,39vw);
  margin:0 0 0 -.4rem;        /* optical: the capital I starts inset */
}

.hero__title{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2.4rem,.7rem + 7.2vw,7.5rem);
  line-height:.98; letter-spacing:-.025em;
  display:flex; flex-direction:column;
}
.hero__title{ max-width:16ch; }
/* Each line rises out from behind its own mask. The fade-and-lift the
   .reveal class would otherwise apply is cancelled here so the two
   movements don't fight. */
.hero__title.reveal{ transform:none; }
.hero__title .line{
  display:block; overflow:hidden;
  padding-bottom:.14em; margin-bottom:-.14em;   /* room for descenders */
}
.hero__title .line__in{
  display:block;
  transform:translateY(115%);
  transition:transform 1.25s var(--ease);
}
.hero__title.is-in .line__in{ transform:none; }
.hero__title.is-in .line:nth-child(1) .line__in{ transition-delay:.10s; }
.hero__title.is-in .line:nth-child(2) .line__in{ transition-delay:.26s; }
.hero__title em{ font-style:italic; color:var(--accent-lt); }
.hero__lede{
  max-width:34ch; margin-top:clamp(1.5rem,3vw,2.25rem);
  color:rgba(246,242,236,.82);
  font-size:clamp(1.0625rem,1rem + .35vw,1.25rem);
}
.hero__content p:last-child{ margin-top:clamp(2rem,4vw,3rem); }

.hero__scroll{
  position:absolute; right:var(--gutter); bottom:clamp(4.5rem,12vh,8rem);
  width:1px; height:clamp(3rem,8vh,5.5rem); overflow:hidden;
}
.hero__scroll-line{
  display:block; width:100%; height:100%;
  background:linear-gradient(to bottom, transparent, rgba(246,242,236,.8));
  animation:drift 2.8s var(--ease) infinite;
}
@keyframes drift{
  0%{ transform:translateY(-100%); }
  60%,100%{ transform:translateY(100%); }
}

/* Short laptop screens: the hero is sized by width alone, so adding the
   byline pushed the call to action below the fold at 800px and 720px tall.
   Scale the type and the padding by viewport height as well. */
@media (min-width:60rem) and (max-height:61rem){
  .hero{
    padding-top:clamp(4.5rem,9vh,6rem);
    padding-bottom:clamp(2.5rem,7vh,4.5rem);
  }
  .hero__title{ font-size:min(clamp(3rem,1.1rem + 8vw,7.5rem), 11.5vh); }
  .hero__signature{ width:min(10.7rem,29vw); margin-top:.5rem; }
  .hero__lede{ margin-top:1rem; font-size:1rem; }
  .hero__content p:last-child{ margin-top:1.5rem; }
  .hero__byline{ margin-bottom:1rem; }
}

/* ============================================================
   STATEMENT — More than a PA
   ============================================================ */
.section--statement{ background:var(--bone); }
.statement{ margin-top:clamp(2.5rem,6vw,4.5rem); }
.statement__lead{
  font-family:var(--serif);
  font-size:clamp(1.5rem,1rem + 1.6vw,2.125rem);
  line-height:1.35; color:var(--ink);
  max-width:30ch;
  padding-bottom:clamp(1.75rem,4vw,2.75rem);
  border-bottom:1px solid var(--rule);
}
.statement__list{ margin-top:clamp(1.75rem,4vw,2.75rem); }
.statement__list li{
  font-family:var(--serif);
  font-size:clamp(1.375rem,.9rem + 1.5vw,2rem);
  line-height:1.5;
  color:var(--muted);
  transition:color .5s var(--ease);
}
.statement__list li:last-child{ color:var(--ink); }

/* ============================================================
   CONSIDER IT HANDLED
   ============================================================ */
.section--handled{ background:var(--bone-warm); }
.handled__head{ margin-bottom:clamp(2.5rem,6vw,4rem); }
/* Two independent lists, not one multi-column list. An item expanding in
   the right-hand column must not open a gap in the left-hand one, which is
   exactly what shared grid rows (or CSS columns) would do. */
.index-columns{
  border-top:1px solid var(--rule);
  display:grid;
  grid-template-columns:repeat(2,1fr);
  column-gap:clamp(2rem,6vw,6rem);
  align-items:start;
}
.service{ border-bottom:1px solid var(--rule); }

.service__toggle{
  display:block; width:100%; text-align:left;
  /* Same display serif as the hero and section headings. At this size it
     needs more weight than the 300 used for the large headings to stay
     clearly dominant over the description beneath it. */
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(1.3rem,.9rem + 1.2vw,1.8rem);
  line-height:1.25;
  letter-spacing:-.005em;
  color:var(--ink);
  padding:clamp(.9rem,1.8vw,1.35rem) 0 clamp(.9rem,1.8vw,1.35rem) 1.75rem;
  position:relative;
  transition:padding-left .5s var(--ease), color .5s var(--ease);
}
.service__toggle::before{
  content:""; position:absolute; left:0; top:50%;
  width:.5rem; height:1px; background:var(--accent);
  transform:translateY(-50%) scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease), width .5s var(--ease);
}
.service.is-in .service__toggle::before{ transform:translateY(-50%) scaleX(1); }

/* The description is never permanently on screen. 0fr -> 1fr animates the
   row open without measuring heights in JavaScript. */
.service__detail{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .6s var(--ease), opacity .5s var(--ease);
  opacity:0;
}
.service__detail > p{
  overflow:hidden; margin:0;
  max-width:38ch;
  font-family:var(--sans);
  font-weight:300;
  font-size:.9375rem; line-height:1.65;
  color:var(--muted);
  padding-left:1.75rem;
}
.service.is-open .service__detail{ grid-template-rows:1fr; opacity:1; }
.service.is-open .service__detail > p{ padding-bottom:clamp(.9rem,1.8vw,1.35rem); }
.service.is-open .service__toggle{ color:var(--accent); padding-left:2.25rem; }
.service.is-open .service__toggle::before{ width:1rem; }

/* Pointer devices get it on hover, with no click required. */
@media (hover:hover) and (pointer:fine){
  .service:hover .service__detail,
  .service:focus-within .service__detail{ grid-template-rows:1fr; opacity:1; }
  .service:hover .service__detail > p,
  .service:focus-within .service__detail > p{ padding-bottom:clamp(.9rem,1.8vw,1.35rem); }
  .service:hover .service__toggle,
  .service:focus-within .service__toggle{ color:var(--accent); padding-left:2.25rem; }
  .service:hover .service__toggle::before,
  .service:focus-within .service__toggle::before{ width:1rem; }
}

.handled__close{
  margin-top:clamp(2.5rem,6vw,4rem);
}
/* Measure is set per element: `ch` resolves against each one's own
   font-size, so a shared container max-width would strangle the display line. */
.handled__close-line{
  max-width:20ch;
  font-family:var(--serif);
  font-size:clamp(1.5rem,1rem + 1.6vw,2.25rem);
  line-height:1.4;
  margin:0;
}
.handled__close-note{
  margin-top:1.5rem;
  color:var(--muted);
  max-width:52ch;
}


/* ============================================================
   SPLIT SECTIONS
   ============================================================ */
.split{
  display:grid; gap:clamp(2.5rem,6vw,5.5rem);
  grid-template-columns:1fr;
  align-items:center;
}
@media (min-width:60rem){
  .split{ grid-template-columns:5fr 6fr; }
  .split--reverse .split__body{ order:1; }
  .split--reverse .split__media{ order:2; }
}
.split__media{ margin:0; }
.frame{
  position:relative;
  background-color:#1c1a17;
  background-size:cover; background-position:center;
  border-radius:2px;
  box-shadow:0 30px 70px -40px rgba(14,14,13,.55);
}
.frame--portrait{ aspect-ratio:4/5; background-image:var(--img-portrait); }
.frame--experience{ aspect-ratio:4/5; background-image:var(--img-experience); }

.section--relationship{ background:var(--ink); color:var(--bone); }
.section--relationship .display{ color:var(--bone); }
.section--relationship .prose{ color:var(--muted-lt); }
.section--relationship .learn-list li{ color:var(--muted-lt); border-bottom-color:var(--rule-lt); }
.section--relationship .frame{
  box-shadow:none;
  border-radius:0;
}
/* The portrait is shot on black — let it bleed into the section rather
   than sit in a box, with only a whisper of an edge on the lit side. */
.section--relationship .frame::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 55%, rgba(14,14,13,.85) 100%);
  pointer-events:none;
}
.portrait-caption{
  margin-top:1.25rem;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.35rem .9rem;
}
.portrait-caption strong{
  font-family:var(--serif); font-weight:400; font-size:1.125rem; color:var(--bone);
}
.portrait-caption span{
  font-size:.5625rem; letter-spacing:.26em; text-transform:uppercase; color:var(--muted-lt);
}
.learn-list{
  margin-top:clamp(2rem,4vw,3rem);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
  gap:.15rem 2rem;
}
.learn-list li{
  font-size:.9375rem; color:var(--muted);
  padding-block:.65rem;
  border-bottom:1px solid var(--rule);
}

/* ============================================================
   PROACTIVITY
   ============================================================ */
.section--proactive{ background:var(--bone-warm); text-align:center; }
.section--proactive .eyebrow{ text-align:center; }
.quote{
  font-style:italic; color:var(--ink);
  max-width:20ch; margin-inline:auto;
}
.verbs{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:.4rem clamp(1rem,3vw,2.25rem);
  margin-block:clamp(3rem,7vw,5rem);
  padding-block:clamp(2rem,4vw,3rem);
  border-block:1px solid var(--rule);
}
.verbs li{
  font-size:.75rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted);
  transition:color .4s var(--ease);
}
.verbs li:hover{ color:var(--accent); }
.pullquote{
  font-family:var(--serif);
  font-size:clamp(2rem,1.2rem + 3.4vw,4rem);
  line-height:1.15; margin-top:1.25rem;
  color:var(--ink);
}
.pullquote em{ font-style:italic; }

/* ============================================================
   PERSONAL BY DESIGN
   ============================================================ */
.section--design{ background:var(--bone); }

/* ============================================================
   EXPERIENCE
   ============================================================ */
.section--experience{ background:var(--bone-warm); }
.section--experience .prose{ margin-top:1.5rem; }
.section--experience .prose:first-of-type{ margin-top:2rem; }

/* Oversized type carrying its own weight — no box, no rule, no quote marks.
   The space around it is what makes it read as a pull-quote. */
.experience__quote{
  margin-top:clamp(4.5rem,11vw,9rem);
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(1.75rem,1rem + 3.4vw,4rem);
  line-height:1.16;
  letter-spacing:-.015em;
  color:var(--ink);
}
.experience__quote em{ font-style:italic; }

/* ============================================================
   LESS TO CARRY — the mental load
   ============================================================ */
.section--load{ background:var(--bone); }

.load__lead{
  margin-top:clamp(2rem,5vw,3.5rem);
  font-family:var(--serif);
  font-size:clamp(1.375rem,1rem + 1.3vw,1.875rem);
  line-height:1.4;
  color:var(--ink);
  max-width:30ch;
  text-wrap:balance;
}

/* The fragments carry the feeling, so they stay quiet — muted, widely
   leaded, and revealed one at a time rather than as a block. */
.load__list{
  margin-top:clamp(2.5rem,6vw,4rem);
  padding-left:clamp(1rem,4vw,3rem);
  border-left:1px solid var(--rule);
}
.load__list li{
  font-family:var(--serif);
  font-size:clamp(1.25rem,.95rem + 1vw,1.625rem);
  line-height:1.4;
  color:var(--muted);
  padding-block:clamp(.4rem,1vw,.7rem);
}

.load__turn{
  margin-top:clamp(2.5rem,6vw,4rem);
  font-family:var(--serif);
  font-size:clamp(1.375rem,1rem + 1.3vw,1.875rem);
  line-height:1.4;
  color:var(--ink);
  max-width:30ch;
  text-wrap:balance;
}

/* The payoff, and the handover into PA iQ. */
.load__payoff{
  margin-top:clamp(4rem,10vw,8rem);
  /* Balanced rather than hard-broken: a <br> here stranded a word once the
     line stopped fitting the narrow measure. */
  max-width:20ch;
  text-wrap:balance;
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(1.875rem,1.1rem + 3.4vw,4rem);
  line-height:1.16;
  letter-spacing:-.015em;
  color:var(--ink);
}

/* ============================================================
   PA iQ
   ============================================================ */
.section--paiq{
  background:var(--ink); color:var(--bone);
  overflow:hidden;
}
.section--paiq .display{ color:var(--bone); }
.paiq__head{ text-align:center; max-width:44rem; margin-inline:auto; }
.paiq__head .eyebrow{ margin-bottom:clamp(1.75rem,4vw,2.5rem); }
.paiq__logo{
  display:block; height:auto;
  width:min(20rem,64%);
  margin:0 auto clamp(2rem,5vw,3.25rem);
}

.device{
  position:relative;
  margin:clamp(3.5rem,8vw,6rem) auto 0;
  max-width:64rem;
  perspective:1600px;
}
.device__laptop{
  width:82%;
  transform:rotateX(6deg) translateY(2rem);
  opacity:0;
  transition:transform 1.4s var(--ease), opacity 1.2s var(--ease);
  transform-style:preserve-3d;
}
.device.is-in .device__laptop{ transform:rotateX(0deg) translateY(0); opacity:1; }
.device__screen{
  background:linear-gradient(#141412,#0f0f0e);
  border:1px solid rgba(246,242,236,.14);
  border-radius:10px 10px 3px 3px;
  padding:.5rem;
  box-shadow:0 60px 120px -50px rgba(0,0,0,.9);
}
.device__base{
  height:.7rem;
  margin:0 -4%;
  background:linear-gradient(180deg,#2a2a26,#151513);
  border-radius:0 0 12px 12px;
  box-shadow:0 24px 40px -24px rgba(0,0,0,.9);
}

.ui{
  background:linear-gradient(170deg,#fbf9f5,#f2ede4);
  color:var(--ink);
  border-radius:6px 6px 2px 2px;
  overflow:hidden;
  min-height:clamp(18rem,36vw,25rem);
  display:flex; flex-direction:column;
}
.ui__bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:.9rem clamp(1rem,2.5vw,1.75rem);
  border-bottom:1px solid var(--rule);
}
.ui__mark{ font-family:var(--serif); font-size:1.0625rem; letter-spacing:.06em; }
.ui__client{ font-size:.5625rem; letter-spacing:.28em; text-transform:uppercase; color:var(--muted); }
.ui__body{ padding:clamp(1.25rem,3vw,2.5rem); flex:1; }
.ui__today{
  font-family:var(--serif);
  font-size:clamp(1.5rem,1rem + 1.4vw,2.125rem);
  line-height:1;
}
.ui__stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(7rem,1fr));
  gap:1rem clamp(1rem,3vw,2rem);
  margin-block:clamp(1.5rem,3vw,2.25rem);
  padding-bottom:clamp(1.25rem,3vw,2rem);
  border-bottom:1px solid var(--rule);
}
.ui__num{
  display:block;
  font-family:var(--serif);
  font-size:clamp(2rem,1.2rem + 2.4vw,3.25rem);
  line-height:1; font-weight:300;
  font-variant-numeric:tabular-nums;
}
.ui__stats li:first-child .ui__num{ color:var(--accent); }
.ui__label{
  display:block; margin-top:.5rem;
  font-size:.5625rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted);
}
.ui__items li{
  display:flex; align-items:baseline; gap:.75rem;
  font-size:.875rem; color:var(--muted);
  padding-block:.6rem;
}
.ui__dot{
  flex:none; width:5px; height:5px; border-radius:50%; background:var(--muted);
  transform:translateY(-2px);
}
.ui__dot--decision{ background:var(--accent); }
.ui__dot--progress{ background:#7d8f7a; }
.ui__dot--waiting{ background:#b9b2a5; }

.device__phone{
  position:absolute; right:0; bottom:-2rem;
  width:clamp(9rem,17vw,12.5rem);
  aspect-ratio:9/16;
  background:linear-gradient(#1d1d1a,#101010);
  border:1px solid rgba(246,242,236,.16);
  border-radius:1.5rem;
  padding:.45rem;
  box-shadow:0 40px 70px -35px rgba(0,0,0,.95);
  opacity:0; transform:translateY(2.5rem);
  transition:opacity 1s var(--ease) .35s, transform 1.2s var(--ease) .35s;
}
.device.is-in .device__phone{ opacity:1; transform:translateY(0); }
.device__phone-screen{
  height:100%; border-radius:1.15rem;
  background:linear-gradient(170deg,#fbf9f5,#efe9df);
  padding:1.25rem .9rem;
  display:flex; flex-direction:column; gap:.6rem;
}
.phone__label{
  font-size:.5rem; letter-spacing:.26em; text-transform:uppercase; color:var(--muted);
  margin-bottom:.25rem;
}
.phone__bubble,.phone__reply{
  font-size:.6875rem; line-height:1.45; padding:.6rem .7rem; border-radius:.65rem;
}
.phone__status{
  margin-top:auto;
  font-size:.5rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); text-align:center;
  padding-top:.75rem; border-top:1px solid var(--rule);
}
.phone__bubble{ background:#e3ddd1; color:var(--ink); border-bottom-right-radius:.15rem; }
.phone__reply{
  background:var(--ink); color:var(--bone);
  border-bottom-left-radius:.15rem;
  font-family:var(--serif); font-size:.8125rem;
  align-self:flex-start;
}
@media (max-width:52rem){
  .device__phone{ display:none; }
  .device__laptop{ width:100%; }
}

.paiq__note{
  text-align:center; margin-top:clamp(4rem,9vw,7rem);
  font-family:var(--serif);
  font-size:clamp(1.25rem,.9rem + 1.1vw,1.75rem);
  color:var(--muted-lt);
}

/* ============================================================
   EQUATION
   ============================================================ */
.section--equation{ background:var(--bone); text-align:center; }
.section--equation .eyebrow{ text-align:center; }
.equation{
  display:grid; gap:clamp(1.25rem,3vw,2rem);
  align-items:center; justify-items:center;
  margin-bottom:clamp(3rem,6vw,4.5rem);
}
@media (min-width:52rem){
  .equation{ grid-template-columns:1fr auto 1fr auto 1.4fr; }
}
.equation__kicker{
  font-size:.5625rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--muted); margin-bottom:.75rem;
}
.equation__name{
  font-family:var(--serif);
  font-size:clamp(1.5rem,1rem + 1.6vw,2.25rem);
  line-height:1.15;
}
.equation__part--result .equation__name{ color:var(--accent); }
.equation__op{
  font-family:var(--serif); font-size:1.5rem; color:var(--muted);
}

/* ============================================================
   CONTACT
   ============================================================ */
.section--contact{ background:var(--ink); color:var(--bone); }
.section--contact .display{ color:var(--bone); }
.split--contact{ align-items:start; }
@media (min-width:60rem){ .split--contact{ grid-template-columns:6fr 5fr; } }
.contact__direct{ margin-top:clamp(2rem,4vw,3rem); }
.contact__direct a{
  font-family:var(--serif); font-size:clamp(1.125rem,1rem + .8vw,1.5rem);
  color:var(--accent-lt);
  border-bottom:1px solid rgba(200,173,134,.35);
  padding-bottom:.25rem;
  transition:border-color .4s var(--ease);
}
.contact__direct a:hover{ border-color:var(--accent-lt); }

.form{ display:flex; flex-direction:column; gap:1.5rem; }
.form__hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.field{ display:flex; flex-direction:column; gap:.6rem; }
.field label{
  font-size:.5625rem; letter-spacing:.26em; text-transform:uppercase; color:var(--muted-lt);
}
.field input,.field textarea{
  font-family:var(--sans); font-size:1rem; font-weight:300;
  color:var(--bone);
  background:transparent;
  border:0; border-bottom:1px solid var(--rule-lt);
  padding:.65rem 0;
  border-radius:0;
  transition:border-color .4s var(--ease);
}
.field textarea{ resize:vertical; }
.field input:focus,.field textarea:focus{
  outline:none; border-bottom-color:var(--accent);
}
.form__note{ font-size:.8125rem; color:var(--muted-lt); margin-top:-.5rem; }
.form__status{ margin:0; font-size:.9375rem; min-height:1.4em; }
.form__status[data-state="sent"]{ color:var(--accent-lt); }
.form__status[data-state="error"]{ color:#d99a8c; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background:var(--ink); color:var(--bone); padding-bottom:clamp(3rem,6vw,4.5rem); }
.site-footer__inner{
  position:relative;
  padding-top:clamp(2.5rem,5vw,3.5rem);
  display:flex; flex-direction:column; gap:.75rem;
}
.site-footer__inner::before{
  content:""; position:absolute; top:0; left:var(--gutter); right:var(--gutter);
  height:1px; background:var(--rule-lt);
}
.site-footer__logo{
  /* The footer is a column flex container, so a stretched item would be
     pulled to full width and squashed against the fixed height. */
  align-self:flex-start;
  display:block; width:auto;
  height:clamp(1.9rem,3.4vw,2.5rem);
  margin-bottom:clamp(1.25rem,2.5vw,1.75rem);
}
.site-footer__name{ font-family:var(--serif); font-size:1.5rem; }
.site-footer__line{ color:var(--muted-lt); font-size:.9375rem; }
.site-footer__meta{
  display:flex; flex-wrap:wrap; gap:.75rem;
  margin-top:clamp(1.5rem,3vw,2.5rem);
  font-size:.6875rem; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(246,242,236,.45);
}

/* ============================================================
   REVEAL
   ============================================================ */
.reveal{
  opacity:0;
  transform:translateY(1.25rem);
  transition:opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
}
.reveal.is-in{ opacity:1; transform:none; }
.reveal--delay-1{ transition-delay:.12s; }
.reveal--delay-2{ transition-delay:.24s; }
.reveal--delay-3{ transition-delay:.36s; }
/* staggered children */
.statement__list li,.service,.learn-list li,.verbs li,.load__list li{ transition-delay:calc(var(--i,0) * 60ms); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:54rem){
  .index-columns{ grid-template-columns:1fr; }

  /* Portrait viewports crop this 16:9 frame hard. Favour the window side
     so the skyline and desk survive rather than a flat stretch of wall. */
  .hero__media{ background-position:72% center; }

  .nav-toggle{ display:block; }
  .nav{
    position:fixed; inset:0; z-index:-1;
    flex-direction:column; justify-content:center;
    gap:2rem;
    background:var(--ink); color:var(--bone);
    opacity:0; visibility:hidden;
    transition:opacity .5s var(--ease), visibility .5s var(--ease);
  }
  .nav.is-open{ opacity:1; visibility:visible; z-index:90; }
  .nav a{ font-size:.875rem; letter-spacing:.28em; opacity:1; }
  .site-header{ z-index:100; }
  body.nav-open{ overflow:hidden; }
  body.nav-open .site-header{ color:var(--bone); background:transparent; box-shadow:none; }
}

/* ============================================================
   MOTION PREFERENCES
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .service__detail{ transition:none; }
  .hero__title .line__in{ transform:none; }
  .device__laptop,.device__phone{ opacity:1; transform:none; }
}

/* Print */
@media print{
  .site-header,.hero__scroll,.device__phone,.form{ display:none; }
  body{ background:#fff; color:#000; }
  .section{ padding-block:2rem; }
}


/* ============================================================
   02 MEET IMOGEN
   ============================================================ */
.section--imogen{ background:var(--bone); }
.frame--imogen{ aspect-ratio:4/5; background-image:var(--img-imogen); }

.signoff{ margin-top:clamp(2.5rem,5vw,3.5rem); }
.signoff__mark{ display:block; width:min(11rem,42vw); height:auto; margin:0 0 .75rem -.3rem; }
.signoff__name{ font-family:var(--serif); font-size:1.375rem; margin:0; }
.signoff__role{
  margin:.35rem 0 0; font-size:.625rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--muted);
}

/* ============================================================
   03 TWO WORLDS
   ============================================================ */
.section--worlds{ background:var(--bone-warm); }
.worlds__head{ margin-bottom:clamp(2.5rem,6vw,4.5rem); }
.worlds{
  display:grid; gap:clamp(2.5rem,6vw,5rem);
  grid-template-columns:1fr;
}
@media (min-width:52rem){ .worlds{ grid-template-columns:1fr 1fr; } }

.world .frame{ aspect-ratio:4/5; margin-bottom:clamp(1.5rem,3vw,2.25rem); }
.frame--private{ background-image:var(--img-private); }
.frame--corporate{ background-image:var(--img-corporate); }
.world__kicker{
  font-size:.625rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--accent); margin:0 0 .9rem;
}
.world__title{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.5rem,.9rem + 1.6vw,2.5rem);
  line-height:1.15; margin:0;
}
.world__copy{ margin:1.1rem 0 1.9rem; color:var(--muted); max-width:36ch; }

/* ============================================================
   04 THE OVERLAP
   ============================================================ */
.section--overlap{ background:var(--ink); color:var(--bone); }
.section--overlap .display{ color:var(--bone); }
.overlap__lead{
  margin-top:clamp(2rem,5vw,3.5rem);
  font-family:var(--serif);
  font-size:clamp(1.375rem,1rem + 1.3vw,1.875rem);
  line-height:1.4; color:var(--bone); max-width:28ch; text-wrap:balance;
}
.overlap__payoff{
  margin-top:clamp(3.5rem,8vw,6rem);
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.75rem,1.1rem + 3vw,3.5rem);
  line-height:1.2; letter-spacing:-.015em; color:var(--accent-lt);
}

/* ============================================================
   05 SERVICES
   ============================================================ */
.section--services{ background:var(--bone); }
.services__head{ margin-bottom:clamp(2.5rem,5vw,3.5rem); }

.scope{
  display:flex; flex-wrap:wrap; gap:.5rem;
  margin-top:clamp(2rem,4vw,3rem);
}
.scope__btn{
  font-size:.6875rem; letter-spacing:.24em; text-transform:uppercase;
  padding:.85rem 1.5rem;
  border:1px solid var(--rule); border-radius:2px;
  color:var(--muted);
  transition:color .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease);
}
.scope__btn:hover{ color:var(--ink); border-color:var(--ink); }
.scope__btn.is-active{ background:var(--ink); border-color:var(--ink); color:var(--bone); }

.services{
  border-top:1px solid var(--rule);
  display:grid; grid-template-columns:1fr;
  column-gap:clamp(2rem,6vw,6rem);
}
@media (min-width:52rem){ .services{ grid-template-columns:1fr 1fr; } }
.services li{
  font-family:var(--serif);
  font-size:clamp(1.125rem,.9rem + .8vw,1.5rem);
  padding:clamp(.85rem,1.7vw,1.2rem) 0 clamp(.85rem,1.7vw,1.2rem) 1.75rem;
  border-bottom:1px solid var(--rule);
  position:relative;
}
.services li::before{
  content:""; position:absolute; left:0; top:50%;
  width:.5rem; height:1px; background:var(--accent);
  transform:translateY(-50%);
}
.services li[data-origin="corporate"]::before{ background:var(--muted); }

/* ============================================================
   06 THE APPROACH
   ============================================================ */
.section--approach{ background:var(--bone-warm); }
.section--approach .learn-list{ margin-top:clamp(2.5rem,6vw,4rem); }
.approach__close{
  margin-top:clamp(3rem,7vw,5rem);
  font-family:var(--serif);
  font-size:clamp(1.375rem,1rem + 1.4vw,2rem);
  line-height:1.35; max-width:30ch; text-wrap:balance;
}

/* ============================================================
   07 PA iQ — pillars
   ============================================================ */
.pillars{
  display:grid; gap:clamp(1.75rem,4vw,3rem);
  grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
  margin-top:clamp(3.5rem,8vw,6rem);
  padding-top:clamp(2.5rem,5vw,3.5rem);
  border-top:1px solid var(--rule-lt);
}
.pillars__title{
  font-family:var(--serif); font-size:1.375rem; margin:0 0 .6rem; color:var(--bone);
}
.pillars__copy{ margin:0; font-size:.9375rem; color:var(--muted-lt); }

/* ============================================================
   08 CLIENT PORTAL
   ============================================================ */
.section--portal{ background:var(--bone); }
.portal__head{ text-align:center; max-width:44rem; margin-inline:auto; }
.portal__note{
  text-align:center; margin-top:clamp(3.5rem,8vw,6rem);
  max-width:52ch; margin-inline:auto; color:var(--muted);
}
.ui__count{
  margin:1.25rem 0 clamp(1.5rem,3vw,2.25rem);
  padding-bottom:clamp(1.25rem,3vw,2rem);
  border-bottom:1px solid var(--rule);
  font-size:.75rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted);
}
.ui__count .ui__num{ display:inline; font-size:1.5rem; color:var(--accent); margin-right:.4rem; }
.ui__item-name{ flex:1; color:var(--ink); }
.ui__state{ font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.ui__dot--done{ background:#7d8f7a; }
.ui__tabs{
  display:flex; flex-wrap:wrap; gap:.4rem 1.5rem;
  margin-top:clamp(1.5rem,3vw,2.25rem);
  padding-top:clamp(1.25rem,2.5vw,1.75rem);
  border-top:1px solid var(--rule);
}
.ui__tabs li{
  font-size:.5625rem; letter-spacing:.24em; text-transform:uppercase; color:var(--muted);
}
.ui__tabs li:first-child{ color:var(--accent); }

/* ============================================================
   09 EXPERIENCE
   ============================================================ */
.section--experience{ background:var(--ink); color:var(--bone); }
.section--experience .display{ color:var(--bone); }
.frame--experience{ aspect-ratio:4/5; background-image:var(--img-experience); }

/* ============================================================
   Hero additions
   ============================================================ */
.hero__sub{
  max-width:44ch; margin-top:1.1rem;
  color:rgba(246,242,236,.62); font-size:.9375rem; line-height:1.7;
}
.hero__actions{
  display:flex; flex-wrap:wrap; gap:1.25rem 2.5rem;
  margin-top:clamp(2rem,4vw,3rem);
}

/* ============================================================
   Enquiry scope
   ============================================================ */
.scope-field{ border:0; padding:0; margin:0; }
.scope-field legend{
  font-size:.5625rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--muted-lt); padding:0; margin-bottom:.9rem;
}
.scope-field__options{ display:flex; flex-wrap:wrap; gap:.75rem 1.75rem; }
.scope-field__options label{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.9375rem; color:var(--bone); cursor:pointer;
}
.scope-field__options input{ accent-color:var(--accent); }


/* ============================================================
   Display sizing by context
   ------------------------------------------------------------
   .display and .display--xl are sized against the viewport, but they sit
   in containers of very different widths — the narrow wrap gives 752px and
   a split body about 670px, against 1088px for the full wrap. At the full
   size the browser re-wrapped headings past their authored <br>, so
   "Because work and life / rarely stay separate." arrived as four lines.
   Size them against the container they are actually in.
   ============================================================ */
.wrap--narrow .display--xl{ font-size:clamp(2.25rem,1.2rem + 4.4vw,4.5rem); }
.wrap--narrow .display{ font-size:clamp(2rem,1.2rem + 2.8vw,3.25rem); }
.split__body .display{ font-size:clamp(1.75rem,.9rem + 2.2vw,3rem); }

/* Centred heads sit in the full wrap but still need room for their
   longest authored line. */
.paiq__head .display--xl,
.portal__head .display--xl{ font-size:clamp(2.25rem,1.2rem + 4.8vw,5rem); }

.overlap__payoff{ font-size:clamp(1.5rem,1rem + 2.2vw,2.5rem); }


/* On a phone there is not enough width for an authored line like "Five
   Directors. Different priorities." to hold, so the break produced four
   ragged lines instead of two. Drop the authored breaks below 34rem and let
   the text balance itself into even lines instead. */
@media (max-width:34rem){
  .display br,
  .experience__quote br,
  .overlap__payoff br,
  .handled__close-line br{ display:none; }
  .display,
  .experience__quote,
  .overlap__payoff{ text-wrap:balance; }
}


/* ============================================================
   Hero calls to action
   ------------------------------------------------------------
   Two underlined text links sat side by side read as one continuous
   sentence, their rules almost touching. These are two different routes
   into the business, so they need to look like two things: a bordered
   card each, a kicker naming the route, and real space between them.
   ============================================================ */
.hero__actions{ gap:1rem; }

.btn--outline{
  flex-direction:column; align-items:flex-start; gap:.5rem;
  border:1px solid rgba(246,242,236,.28);
  border-bottom-width:1px;                 /* not the .btn underline */
  border-radius:3px;
  padding:1.1rem 1.6rem 1.15rem;
  min-width:min(19rem,100%);
  letter-spacing:normal; text-transform:none;
  transition:border-color .45s var(--ease), background .45s var(--ease);
}
.btn--outline:hover{
  gap:.5rem;                               /* .btn animates gap; hold it */
  border-color:var(--accent-lt);
  background:rgba(200,173,134,.08);
  color:var(--bone);
}
.btn__kicker{
  font-size:.5625rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--accent-lt);
}
.btn__label{
  font-family:var(--serif); font-size:1.125rem; letter-spacing:.01em;
  text-transform:none; color:var(--bone);
}

@media (min-width:46rem){
  .hero__actions{ gap:1.25rem; }
  .btn--outline{ min-width:17rem; }
}


/* ============================================================
   Contrast and robustness fixes
   ============================================================ */

/* The hero took all of its darkness from a background image. If that image
   is slow, fails, or is served stale, the white headline lands on the cream
   body background and disappears. Paint the section dark in its own right. */
.hero{ background-color:var(--ink); }

/* The brand gold is a display colour. Below about 24px it does not reach
   4.5:1 on the ivory grounds, so small labels use the darker tone. */
.world__kicker{ color:var(--accent-dk); }
.ui__tabs li:first-child{ color:var(--accent-dk); }
.site-footer__meta{ color:rgba(246,242,236,.62); }

/* ============================================================
   Signature placement
   ============================================================ */
.signoff__mark{ width:min(8.5rem,34vw); }

.hero__sign{
  display:block; height:auto;
  width:min(19rem,60vw);
  margin:0 0 1.35rem -.55rem;   /* optical: the capital I starts inset */
}


/* The experience section moved to a dark ground in the restructure; its
   pull-quote kept the ink colour it had on ivory and was invisible. */
.section--experience .experience__quote{ color:var(--bone); }
.section--experience .experience__quote em{ color:var(--accent-lt); }


/* ============================================================
   Anchor targets
   ------------------------------------------------------------
   The header is fixed, so an anchor jump used to put the target's top
   under it. The two panels also carry their own ids inside one section,
   so "Private" landed mid-section with the image already scrolled past.
   ============================================================ */
main [id],
section[id],
.world[id]{ scroll-margin-top:clamp(5.5rem,9vh,7.5rem); }


/* ============================================================
   Hero text column
   ------------------------------------------------------------
   The lede and the supporting line were measured in ch at different
   font sizes, so their right edges landed in different places and the
   column read as ragged. One shared measure in rem aligns them.
   ============================================================ */
.hero__lede,
.hero__sub{ max-width:31rem; }
.hero__lede{ margin-top:clamp(1.5rem,3vw,2rem); }
.hero__sub{ margin-top:1.25rem; }


/* A 667px-tall handset has no room for the signature at full size once the
   headline, lede, supporting line and two cards are in — the call to action
   dropped below the fold. Scale it back there only. */
@media (max-width:46rem) and (max-height:44rem){
  .hero__sign{ width:min(12.5rem,44vw); margin-bottom:.9rem; }
  .hero__sub{ margin-top:.9rem; }
}


/* ============================================================
   09 Experience — portrait edge
   ------------------------------------------------------------
   The portrait is shot on pure black and the section is near-black, so
   it bleeds by design. That also means it reads as an empty rectangle
   the moment anything is slightly off. A hairline and a soft lift give
   it an edge without turning it into a boxed photograph.
   ============================================================ */
.section--experience .split__media{ position:relative; }
.frame--experience{
  box-shadow:0 0 0 1px rgba(246,242,236,.10),
             0 40px 80px -50px rgba(0,0,0,.9);
  background-color:#0a0a09;
}


/* ============================================================
   Frames are images, not backgrounds
   ------------------------------------------------------------
   These were divs painted with background-image through a custom
   property. That is three things that can each fail silently — the
   property, the url, the request — and when any of them does the slot
   renders as an empty rectangle with no clue why. As real <img> elements
   they carry alt text, show something when a request fails, and drop a
   whole class of failure.
   ============================================================ */
img.frame{
  display:block; width:100%; height:auto;
  object-fit:cover;
  background-image:none;
}
img.frame--imogen,
img.frame--experience{ aspect-ratio:4/5; }
img.frame--private,
img.frame--corporate{ aspect-ratio:4/5; }