/* =============================================================
   Conor Donaghey, Integrative Psychotherapy
   Visual system: warm, editorial, grounded.
   Serif (Fraunces) + Sans (Archivo), self-hosted.
   ============================================================= */

/* ---------- Self-hosted fonts ---------- */
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:100 900;
  font-stretch:100%;
  font-display:swap;
  src:url('../fonts/archivo-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:100 900;
  font-stretch:100%;
  font-display:swap;
  src:url('../fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Fraunces';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('../fonts/fraunces-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Fraunces';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('../fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Fraunces';
  font-style:italic;
  font-weight:100 900;
  font-display:swap;
  src:url('../fonts/fraunces-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Fraunces';
  font-style:italic;
  font-weight:100 900;
  font-display:swap;
  src:url('../fonts/fraunces-italic-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Design tokens ---------- */
:root{
  /* Earthy, warm palette */
  --paper:#f5f1e8;        /* warm off-white ground */
  --paper-2:#efe8da;      /* deeper paper for alternating bands */
  --sage-tint:#e4e8da;    /* pale sage wash */
  --ink:#232620;          /* warm near-black text */
  --ink-soft:#4b4f45;     /* secondary text */
  --green:#2c3a2e;        /* deep green */
  --green-deep:#212d21;   /* darkest green for large moments */
  --sage:#93a183;         /* muted sage, decorative */
  --clay:#b46b45;         /* earthy clay, decorative */
  --clay-ink:#8c4a2c;     /* clay, safe for small text */
  --line:rgba(35,38,32,0.14);
  --line-strong:rgba(35,38,32,0.28);
  --on-green:rgba(245,241,232,0.80);
  --on-green-soft:rgba(245,241,232,0.58);

  --serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --measure:66ch;
  --wrap:1180px;
  --gutter:clamp(1.4rem, 5vw, 4rem);
  --section-y:clamp(4.5rem, 11vh, 8.5rem);
  --ease:cubic-bezier(.22,.61,.36,1);
  --radius-soft:24px;
  --radius-soft-lg:24px;
}
@media (min-width:1280px){
  :root{
    --radius-soft-lg:48px;
  }
}

/* ---------- Reset / base ---------- */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(1.02rem, 0.98rem + 0.2vw, 1.14rem);
  line-height:1.7;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* Very subtle paper grain for warmth (decorative, non-blocking) */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:0.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img,video,svg{max-width:100%;display:block;height:auto;}
a{color:inherit;}
::selection{background:var(--sage);color:var(--ink);}

/* ---------- Typography ---------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:340;line-height:1.08;letter-spacing:-0.012em;color:var(--ink);}
h1,h2{font-size:clamp(2rem, 1.3rem + 3vw, 3.35rem);}
h3{font-size:clamp(1.35rem, 1.1rem + 1vw, 1.85rem);letter-spacing:-0.006em;}
p{max-width:var(--measure);}
strong{font-weight:600;}
em{font-style:italic;}

.eyebrow{
  font-family:var(--sans);
  font-size:0.74rem;
  font-weight:600;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--clay-ink);
  display:flex;
  width:fit-content;
  max-width:100%;
  align-items:center;
  gap:0.7rem;
}
.eyebrow::before{
  content:"";
  flex:none;
  width:1.7rem;
  height:1px;
  background:var(--clay);
}
.lead{
  font-size:clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem);
  line-height:1.5;
  color:var(--ink);
  font-weight:400;
  max-width:34ch;
}
/* Body-prose variant for intro leads: matches .prose p (e.g. online therapy page) */
.lead--prose{
  font-family:var(--sans);
  font-size:clamp(1.06rem,1rem+0.35vw,1.2rem);
  line-height:1.72;
  font-weight:400;
  color:var(--ink);
}

/* ---------- Layout helpers ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter);}
.section{padding-block:var(--section-y);position:relative;scroll-margin-top:84px;}
.section--tint{background:var(--paper-2);}
.section--sage{background:var(--sage-tint);}
.section-head{display:flex;flex-direction:column;gap:1.1rem;max-width:60ch;margin-bottom:clamp(2.4rem,5vw,3.6rem);}
.rule{height:1px;background:var(--line);border:0;}
/* Let grid/flex columns shrink below content width (prevents overflow) */
.hero-grid > *, .about-grid > *, .contact-grid > *, .work-grid > *{min-width:0;}

/* Skip link */
.skip{
  position:absolute;left:1rem;top:-4rem;z-index:200;
  background:var(--green);color:var(--paper);
  padding:0.7rem 1.1rem;border-radius:3px;text-decoration:none;
  transition:top .2s var(--ease);
}
.skip:focus{top:1rem;}

/* ---------- Buttons / links ---------- */
.btn{
  display:inline-flex;align-items:center;gap:0.6rem;
  font-family:var(--sans);font-size:0.9rem;font-weight:600;
  letter-spacing:0.02em;
  padding:0.95rem 1.7rem;
  border:1px solid var(--green);
  border-radius:2px;
  text-decoration:none;
  cursor:pointer;
  transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.btn--solid{background:var(--green);color:var(--paper);}
.btn--solid:hover{background:var(--green-deep);transform:translateY(-2px);}
.btn--ghost{background:transparent;color:var(--green);}
.btn--ghost:hover{background:var(--green);color:var(--paper);transform:translateY(-2px);}

.link-underline{
  color:var(--green);
  text-decoration:none;
  font-weight:600;
  border-bottom:1px solid var(--line-strong);
  padding-bottom:2px;
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
.link-underline:hover{border-color:var(--clay);color:var(--clay-ink);}
.arrow-link{
  display:inline-flex;align-items:center;gap:0.5rem;
  color:var(--green);text-decoration:none;font-weight:600;
}
.arrow-link .arw{transition:transform .3s var(--ease);}
.arrow-link:hover .arw{transform:translateX(4px);}

/* ---------- Header / nav ---------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  background:transparent;
  transition:transform .35s var(--ease), background .3s var(--ease),
             -webkit-backdrop-filter .3s var(--ease), backdrop-filter .3s var(--ease);
  will-change:transform;
}
/* Slides out of view on scroll down, back in on scroll up (JS toggles). */
.site-header.nav-hidden{transform:translateY(-100%);}
/* Once scrolled, a subtle translucent, blurred bar so the content behind the
   nav stays legible. Adapts light/dark with .nav-over-dark. Not a solid bar. */
.site-header.has-bg{
  background:rgba(245,241,232,0.72);
  -webkit-backdrop-filter:blur(10px) saturate(1.06);
  backdrop-filter:blur(10px) saturate(1.06);
}
.site-header.has-bg.nav-over-dark{
  background:rgba(17,21,14,0.42);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  min-height:74px;
}
/* Nav adapts to the section behind it (like a mix-blend logo): dark on light
   backgrounds by default, flipping to light when JS adds .nav-over-dark. */
.brand{
  font-family:var(--serif);font-size:1.18rem;font-weight:400;
  text-decoration:none;color:var(--ink);letter-spacing:-0.01em;
  line-height:1;white-space:nowrap;transition:color .3s var(--ease);
}
.brand span{display:block;font-family:var(--sans);font-size:0.62rem;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;color:var(--ink-soft);margin-top:0.35rem;transition:color .3s var(--ease);}
.primary-nav{display:flex;align-items:center;gap:clamp(1rem,2.2vw,2rem);}
.primary-nav a:not(.btn){
  text-decoration:none;color:var(--ink);
  font-size:0.9rem;font-weight:500;
  position:relative;padding-block:0.3rem;
  transition:color .25s var(--ease);
}
.primary-nav a:not(.btn)::after{
  content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;
  background:currentColor;opacity:0.75;transition:width .3s var(--ease);
}
.primary-nav a:not(.btn):hover::after,
.primary-nav a[aria-current="page"]:not(.btn)::after{width:100%;}
.primary-nav .btn{padding:0.6rem 1.2rem;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);}
.nav-toggle{display:none;}

/* ---------- "More" nav dropdown (Videos, Writing) ---------- */
.nav-more{position:relative;}
.nav-more__toggle{
  all:unset; /* strip default <button> UA styling (padding, line-height, font) so it lines up exactly with the sibling links */
  display:inline-flex;align-items:center;gap:0.35rem;
  cursor:pointer;
  font-family:var(--sans);color:var(--ink);font-size:0.9rem;font-weight:500;
  padding-block:0.3rem;
  transition:color .25s var(--ease);
}
.nav-more__toggle:hover{color:var(--clay-ink);}
.nav-more__caret{
  width:6px;height:6px;flex:none;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  transition:transform .25s var(--ease);
}
.nav-more.is-open .nav-more__caret{transform:rotate(225deg) translateY(1px);}
.nav-more__menu{
  position:absolute;top:calc(100% + 0.85rem);right:0;z-index:10;
  min-width:150px;
  display:flex;flex-direction:column;gap:0.1rem;
  background:var(--paper);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 20px 40px -20px rgba(35,38,32,0.35);
  padding:0.35rem;
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(-6px);
  transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
/* Invisible bridge over the visual gap above the menu, so moving the mouse
   straight down from the button into the menu never breaks :hover. */
.nav-more__menu::before{content:"";position:absolute;left:0;right:0;top:-0.85rem;height:0.85rem;}
.nav-more__menu a{padding-inline:0.7rem;border-radius:6px;}
.nav-more__menu a::after{display:none;}
.nav-more__menu a:hover{background:var(--sage-tint);}
.nav-more.is-open .nav-more__menu,
.nav-more:focus-within .nav-more__menu{
  opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;
}
@media (pointer:fine){
  .nav-more:hover .nav-more__menu{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;}
}
.site-header.nav-over-dark .nav-more__toggle{color:var(--paper);text-shadow:0 1px 10px rgba(10,14,10,0.35);}

/* Over dark sections: light nav */
.site-header.nav-over-dark .brand,
.site-header.nav-over-dark .brand span,
.site-header.nav-over-dark .primary-nav a:not(.btn){color:var(--paper);}
.site-header.nav-over-dark .brand,
.site-header.nav-over-dark .primary-nav a:not(.btn){text-shadow:0 1px 10px rgba(10,14,10,0.35);}
.site-header.nav-over-dark .btn--solid{background:transparent;border-color:var(--paper);color:var(--paper);}
.site-header.nav-over-dark .btn--solid:hover{background:var(--paper);color:var(--green);}
.site-header.nav-over-dark .nav-toggle{color:var(--paper);}
/* The dropdown card is always a light background, even when the bar above
   it is in light-text-over-dark-section mode, so its links must stay dark
   regardless (otherwise: white text on a white card). */
.site-header.nav-over-dark .nav-more__menu a:not(.btn){color:var(--ink);text-shadow:none;}

.page-head{padding-top:clamp(120px,20vh,168px);padding-bottom:0;}
.page-head .backlink{
  display:inline-flex;align-items:center;gap:0.45rem;
  color:var(--ink-soft);text-decoration:none;font-size:0.85rem;letter-spacing:0.02em;
  margin-bottom:1.4rem;transition:color .25s var(--ease);
}
.page-head .backlink:hover{color:var(--clay-ink);}
.page-head .backlink .arw{transition:transform .25s var(--ease);}
.page-head .backlink:hover .arw{transform:translateX(-3px);}
.page-head h1{
  font-family:var(--serif);font-weight:340;line-height:1.04;letter-spacing:-0.014em;
  font-size:clamp(2.2rem,1.3rem+3.4vw,3.6rem);margin-top:0.4rem;color:var(--ink);
}
.page-head .lead{margin-top:1.3rem;color:var(--ink);max-width:52ch;}
.page-body{padding-top:clamp(2.6rem,6vw,3.8rem);}
.page-body .prose + .mini-label,
.page-body .guide + .prose{margin-top:clamp(2.2rem,5vw,3.2rem);}

/* Guide list: unnumbered titled points */
.guide{list-style:none;border-top:1px solid var(--line);max-width:64ch;}
.guide li{padding:1.5rem 0;border-bottom:1px solid var(--line);}
.guide li h3{font-family:var(--sans);font-size:1.06rem;font-weight:600;letter-spacing:0;color:var(--ink);margin-bottom:0.4rem;}
.guide li p{color:var(--ink-soft);font-size:0.98rem;line-height:1.65;max-width:64ch;}

.details dd small a{color:var(--green);text-decoration:none;border-bottom:1px solid var(--line-strong);transition:border-color .25s var(--ease),color .25s var(--ease);}
.details dd small a:hover{border-color:var(--clay);color:var(--clay-ink);}

/* ---------- Writing entries as links ---------- */
.resource-list li{display:block;padding:0;}
.resource-list .resource-link{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:0.5rem 1.4rem;
  padding:1.6rem 0;text-decoration:none;color:inherit;
}
.resource-list h3{transition:color .25s var(--ease);}
.resource-list .resource-link:hover h3{color:var(--clay-ink);}
.resource-arrow{margin-left:auto;align-self:center;color:var(--clay-ink);font-size:1.1rem;transition:transform .25s var(--ease);}
.resource-list .resource-link:hover .resource-arrow{transform:translateX(4px);}

/* ---------- Article (writing pieces) ---------- */
.article{max-width:70ch;margin-inline:auto;}
.article > * + *{margin-top:1.4rem;}
.article p{font-size:clamp(1.06rem,1rem+0.35vw,1.2rem);line-height:1.78;color:var(--ink);}
.article h2{font-family:var(--serif);font-weight:340;font-size:clamp(1.5rem,1.2rem+1.4vw,2.1rem);line-height:1.14;margin-top:clamp(2.4rem,5vw,3.2rem);letter-spacing:-0.01em;}
.article .article-section-title{
  font-weight:340;line-height:1.04;letter-spacing:-0.014em;
  font-size:clamp(2rem,1.3rem+3vw,3.35rem);
}
.article h1.article-section-title{margin-top:0;}
.article h2.article-section-title{margin-top:clamp(3.6rem,8vw,5.2rem);}
.article h3{font-family:var(--sans);font-weight:600;font-size:1.08rem;letter-spacing:0;margin-top:2rem;color:var(--ink);}
.article ul{padding-left:1.2rem;color:var(--ink);}
.article li{margin-top:0.6rem;line-height:1.7;}
.article blockquote{
  margin:clamp(2rem,4vw,2.8rem) 0;padding-left:1.4rem;
  border-left:2px solid var(--clay);
  font-family:var(--serif);font-style:italic;font-weight:340;
  font-size:clamp(1.35rem,1.1rem+1vw,1.7rem);line-height:1.3;color:var(--green);
}
.article blockquote p{font-size:inherit;line-height:inherit;color:inherit;}
.article-foot{
  max-width:70ch;margin:clamp(3rem,6vw,4.5rem) auto 0;
  padding-top:1.8rem;border-top:1px solid var(--line);
}
.draft-note{max-width:70ch;margin:0 auto clamp(1.8rem,4vw,2.6rem);font-size:0.82rem;color:var(--ink-soft);font-style:italic;}

/* ---------- Videos ---------- */
.video-list{display:grid;gap:clamp(2.8rem,6vw,4.6rem);max-width:900px;margin-inline:auto;}
.video-item figure{margin:0;}
.video-frame{
  position:relative;aspect-ratio:16/9;border-radius:var(--radius-soft);overflow:hidden;
  background:var(--ink);border:1px solid var(--line-strong);
}
.video-frame video{width:100%;height:100%;object-fit:cover;display:block;background:var(--ink);}
.video-meta{margin-top:1.1rem;}
.video-meta .cat{font-size:0.72rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--clay-ink);}
.video-meta h2{font-family:var(--serif);font-weight:340;font-size:clamp(1.3rem,1.1rem+0.9vw,1.75rem);line-height:1.12;margin-top:0.5rem;letter-spacing:-0.01em;}
.video-meta p{color:var(--ink-soft);font-size:0.98rem;line-height:1.65;margin-top:0.6rem;max-width:60ch;}

/* ---------- Hero (full-bleed background video) ---------- */
.hero{
  position:relative;
  height:100vh;
  height:100svh;
  min-height:560px;
  display:flex;align-items:center;justify-content:center;text-align:center;
  overflow:hidden;
  background:var(--paper-2);
  padding-inline:var(--gutter);
}
.hero-media{
  position:absolute;inset:0;z-index:0;
  clip-path:inset(0 round 0);
  transform:translateZ(0);
  backface-visibility:hidden;
  isolation:isolate;
}
.hero-poster{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;max-width:none;
  object-fit:cover;object-position:center center;
  filter:saturate(0.96) contrast(1.02);
  transform:translateZ(0);
  backface-visibility:hidden;
}
.hero-poster--mobile{display:none;}
@media (max-width:767px){
  .hero-poster--desktop{display:none;}
  .hero-poster--mobile{display:block;}
}
.hero-media.is-ready .hero-poster{
  opacity:0;
  visibility:hidden;
}
.hero-bg{
  position:absolute;inset:0;z-index:1;
  width:100%;height:100%;max-width:none;
  object-fit:cover;object-position:center center;
  filter:saturate(0.96) contrast(1.02);
  transform:translateZ(0);
  backface-visibility:hidden;
}
.hero-bg--desktop{display:block;}
.hero-bg--mobile{display:none;}
@media (max-width:767px){
  .hero-bg--desktop{display:none;}
  .hero-bg--mobile{display:block;}
}
.hero-scrim{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg, rgba(18,24,18,0.58) 0%, rgba(18,24,18,0.30) 20%, rgba(18,24,18,0.22) 46%, rgba(18,24,18,0.30) 66%, rgba(18,24,18,0.60) 100%);
}
.hero-content{position:relative;z-index:2;max-width:min(46rem, 92vw);margin-inline:auto;}
.hero h1{
  font-family:var(--serif);
  font-weight:320;
  font-size:clamp(2.6rem, 1.3rem + 5.2vw, 5.2rem);
  line-height:1.04;
  letter-spacing:-0.02em;
  color:var(--paper);
  text-wrap:balance;
}
.hero h1 em{font-style:italic;}
.scroll-cue{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;
}
.scroll-cue .stem{
  width:1px;height:38px;
  background:linear-gradient(180deg, rgba(245,241,232,0.8), transparent);
  animation:stem 2.2s var(--ease) infinite;
}
@keyframes stem{
  0%{transform:scaleY(0);transform-origin:top;}
  50%{transform:scaleY(1);transform-origin:top;}
  50.01%{transform-origin:bottom;}
  100%{transform:scaleY(0);transform-origin:bottom;}
}

/* ---------- Art-direction placeholder frames ---------- */
.frame{
  position:relative;
  border:1px solid var(--line-strong);
  background:var(--sage-tint);
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  border-radius:var(--radius-soft);
}
img.frame{
  width:100%;
  display:block;
  object-fit:cover;
}
.frame--wide{border-radius:var(--radius-soft-lg);}
.frame--green{background:var(--green);border-color:transparent;}
.frame--green .frame-note,.frame--green .frame-tag{color:var(--on-green);}
.frame--green .frame-tag{border-color:var(--on-green-soft);}
.frame__inner{padding:clamp(1.2rem,3vw,2rem);max-width:34ch;}
.frame-tag{
  display:inline-block;
  font-size:0.64rem;font-weight:600;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--clay-ink);
  border:1px solid var(--line-strong);
  border-radius:2px;
  padding:0.3rem 0.6rem;
  margin-bottom:0.9rem;
}
.frame-note{
  font-family:var(--sans);
  font-size:0.82rem;
  line-height:1.6;
  color:var(--ink-soft);
  letter-spacing:0.01em;
}
.frame--portrait{aspect-ratio:4 / 5;}
.frame--hero{aspect-ratio:3 / 4;}
.frame--wide{aspect-ratio:16 / 7;width:100%;}
/* corner ticks for the art-direction feel */
.frame::after{
  content:"";position:absolute;inset:0.7rem;
  border:1px solid rgba(35,38,32,0.10);
  border-radius:calc(var(--radius-soft) - 0.7rem);
  pointer-events:none;
}
.frame--wide::after{border-radius:calc(var(--radius-soft-lg) - 0.7rem);}
.frame--green::after{border-color:rgba(245,241,232,0.16);}

/* ---------- About ---------- */
.about-grid{
  display:grid;grid-template-columns:0.9fr 1.1fr;
  gap:clamp(2rem,5vw,4.5rem);align-items:center;
}
.about-copy > * + *{margin-top:1.3rem;}
.about-copy h2{margin-bottom:0.3rem;}
.about-signature{
  margin-top:2rem;font-family:var(--serif);font-style:italic;
  font-size:1.3rem;color:var(--green);
}

/* ---------- Philosophy (large moment) ---------- */
.philosophy{background:var(--green-deep);color:var(--paper);}
.philosophy .wrap{max-width:1000px;}
.philosophy .eyebrow{color:var(--sage);}
.philosophy .eyebrow::before{background:var(--sage);}
.statement{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(2rem, 1.2rem + 4.2vw, 4rem);
  line-height:1.12;
  letter-spacing:-0.018em;
  max-width:20ch;
  margin-top:1.6rem;
}
.statement em{font-style:italic;color:var(--sage);}
.statement-support{
  margin-top:2rem;
  font-size:clamp(1.05rem,1rem+0.4vw,1.25rem);
  line-height:1.6;
  color:var(--on-green);
  max-width:40ch;
}

/* ---------- How I work ---------- */
.work-grid{display:grid;grid-template-columns:1fr;gap:clamp(2.2rem,5vw,3.5rem);}
.mini-label{font-size:0.8rem;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--clay-ink);margin-bottom:0.5rem;}
.prose > * + *{margin-top:1.3rem;}
.prose p{font-size:clamp(1.06rem,1rem+0.35vw,1.2rem);line-height:1.72;color:var(--ink);}
.prose .drop{color:var(--green);}

.steps{
  list-style:none;
  display:grid;
  gap:0;
  counter-reset:step;
  border-top:1px solid var(--line);
}
.steps li{
  counter-increment:step;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:1.3rem;
  padding:1.6rem 0;
  border-bottom:1px solid var(--line);
}
.steps li::before{
  content:counter(step,decimal-leading-zero);
  font-family:var(--serif);font-style:italic;
  font-size:1.15rem;color:var(--clay-ink);
  line-height:1.5;
}
.steps h3{font-size:1.15rem;font-weight:500;font-family:var(--sans);letter-spacing:0;margin-bottom:0.3rem;color:var(--ink);}
.steps p{color:var(--ink-soft);font-size:0.98rem;max-width:60ch;}

/* ---------- What I work with (editorial list) ---------- */
.with-lead{max-width:52ch;}
.experiences{
  list-style:none;
  margin-top:clamp(1.6rem,4vw,2.6rem);
  columns:2;
  column-gap:clamp(2rem,5vw,4.5rem);
}
.experiences li{
  break-inside:avoid;
  font-family:var(--serif);
  font-size:clamp(1.15rem,1rem+0.6vw,1.5rem);
  font-weight:340;
  line-height:1.25;
  color:var(--ink);
  padding:0.85rem 0;
  border-bottom:1px solid var(--line);
  display:flex;gap:0.9rem;align-items:baseline;
}
.experiences li::before{
  content:"";flex:none;
  width:6px;height:6px;margin-top:0.55em;
  border-radius:50%;
  background:var(--clay);
}
.with-note{margin-top:2.2rem;color:var(--ink-soft);font-size:0.98rem;max-width:64ch;}

/* ---------- Fees / practical (detail list) ---------- */
.details{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:0;
  border-top:1px solid var(--line-strong);
}
.details div{
  padding:1.5rem 0;
  border-bottom:1px solid var(--line);
  padding-right:1.5rem;
}
.details dt{
  font-size:0.74rem;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--clay-ink);margin-bottom:0.5rem;
}
.details dd{
  font-family:var(--serif);font-size:clamp(1.3rem,1.1rem+0.8vw,1.7rem);
  font-weight:340;color:var(--ink);line-height:1.2;
}
.details dd small{display:block;font-family:var(--sans);font-size:0.9rem;color:var(--ink-soft);font-weight:400;margin-top:0.4rem;line-height:1.5;letter-spacing:0;}
.fees-note{margin-top:2rem;color:var(--ink-soft);font-style:italic;font-family:var(--serif);font-size:1.15rem;}
/* Small understated cancellation note, not a fifth detail item */
.note-strip{
  margin-top:clamp(1.6rem,4vw,2.4rem);
  max-width:66ch;
  padding:1rem 1.25rem;
  border:1px solid var(--line);
  border-radius:var(--radius-soft);
  background:rgba(84,70,53,0.03);
}
.note-strip .note-strip__title{
  font-family:var(--sans);font-size:0.72rem;font-weight:600;
  letter-spacing:0.16em;text-transform:uppercase;color:var(--clay-ink);
  margin-bottom:0.4rem;
}
.note-strip p{font-family:var(--serif);color:var(--ink-soft);font-size:1.08rem;line-height:1.55;max-width:none;margin:0;}

/* ---------- Resources ---------- */
.resource-list{list-style:none;border-top:1px solid var(--line);margin-top:clamp(1.6rem,4vw,2.4rem);}
.resource-list li{
  border-bottom:1px solid var(--line);
  padding:1.6rem 0;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:0.6rem 1.4rem;
}
.resource-list h3{flex:1 1 18ch;font-weight:360;}
.resource-list p{flex:2 1 34ch;color:var(--ink-soft);font-size:0.98rem;margin:0;}
.status{
  font-size:0.66rem;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--clay-ink);border:1px solid var(--line-strong);border-radius:2px;
  padding:0.25rem 0.55rem;align-self:center;white-space:nowrap;
}

/* ---------- Contact ---------- */
.contact{background:var(--green-deep);color:var(--paper);}
.contact .eyebrow{color:var(--sage);}
.contact .eyebrow::before{background:var(--sage);}
.contact h2{color:var(--paper);}
.contact-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(2.2rem,5vw,4.5rem);align-items:start;
}
.contact-copy p{color:var(--on-green);max-width:44ch;}
.contact-copy .arrow-link{color:var(--paper);}
.contact-aside{margin-top:1.8rem;font-size:0.9rem;color:var(--on-green-soft);}
.contact-aside a{color:var(--paper);}

/* Form */
.form-panel{
  background:var(--paper);
  color:var(--ink);
  padding:clamp(1.6rem,4vw,2.6rem);
  border-radius:var(--radius-soft);
}
.field{display:flex;flex-direction:column;gap:0.45rem;margin-bottom:1.3rem;}
.field label{font-size:0.74rem;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-soft);}
.field input,.field textarea{
  font-family:var(--sans);font-size:1rem;color:var(--ink);
  background:#fbf9f3;
  border:1px solid var(--line-strong);
  border-radius:12px;
  padding:0.85rem 0.95rem;
  width:100%;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.field textarea{min-height:150px;resize:vertical;line-height:1.6;}
.field input:focus,.field textarea:focus{
  outline:none;border-color:var(--green);background:#fff;
}
.field input::placeholder,.field textarea::placeholder{color:rgba(35,38,32,0.4);}
.form-panel .btn{width:100%;justify-content:center;margin-top:0.4rem;}
.form-fineprint{margin-top:1rem;font-size:0.82rem;color:var(--ink-soft);line-height:1.55;}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* Success state */
.form-success{
  display:none;
  padding:clamp(1.6rem,4vw,2.6rem);
  background:var(--paper);color:var(--ink);border-radius:var(--radius-soft);
}
.form-success.is-active{display:block;}
.form-success .tick{
  width:44px;height:44px;border-radius:50%;
  border:1px solid var(--green);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:1.2rem;color:var(--green);
}
.form-success h3{font-size:1.5rem;margin-bottom:0.8rem;}
.form-success p{color:var(--ink-soft);}
.is-hidden{display:none !important;}

/* ---------- Footer ---------- */
.site-footer{background:var(--paper-2);border-top:1px solid var(--line);padding-block:clamp(3rem,7vh,5rem);}
.footer-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2.5rem;}
.footer-brand{font-family:var(--serif);font-size:1.4rem;}
.footer-brand span{display:block;font-family:var(--sans);font-size:0.72rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-soft);margin-top:0.5rem;}
.footer-nav{display:flex;flex-wrap:wrap;gap:0.7rem 1.6rem;list-style:none;}
.footer-nav a{text-decoration:none;color:var(--ink);font-size:0.92rem;border-bottom:1px solid transparent;padding-bottom:2px;transition:border-color .25s var(--ease);}
.footer-nav a:hover{border-color:var(--clay);}
.footer-accreditation{
  margin-top:clamp(2rem,4vw,2.8rem);
  font-size:0.88rem;color:var(--ink-soft);line-height:1.55;max-width:52ch;
}
.footer-accreditation a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;}
.footer-accreditation a:hover{color:var(--clay-ink);}
.footer-bottom{
  margin-top:clamp(2.4rem,5vw,3.4rem);
  padding-top:1.5rem;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;
  font-size:0.82rem;color:var(--ink-soft);
}
.footer-bottom a{color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px;}
.footer-bottom a:hover{color:var(--clay-ink);}
.credit{font-weight:500;}

/* ---------- Reveal animation (progressive enhancement) ---------- */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease), transform .8s var(--ease);}
.js .reveal.is-visible{opacity:1;transform:none;}
.js .reveal[data-delay="1"]{transition-delay:.08s;}
.js .reveal[data-delay="2"]{transition-delay:.16s;}
.js .reveal[data-delay="3"]{transition-delay:.24s;}

/* ---------- Mobile navigation ---------- */
@media (max-width:1000px){
  .nav-toggle{
    display:inline-flex;align-items:center;justify-content:center;
    width:40px;height:40px;background:transparent;border:0;
    cursor:pointer;color:var(--ink);margin-right:-6px;
  }
  .nav-toggle span{position:relative;width:20px;height:1.5px;background:currentColor;transition:background .2s var(--ease);}
  .nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:20px;height:1.5px;background:currentColor;transition:transform .28s var(--ease);}
  .nav-toggle span::before{top:-6px;}
  .nav-toggle span::after{top:6px;}
  .nav-toggle[aria-expanded="true"] span{background:transparent;}
  .nav-toggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg);}
  .nav-toggle[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg);}
  .site-header.nav-over-dark .nav-toggle{color:var(--paper);filter:drop-shadow(0 1px 3px rgba(10,14,10,0.45));}

  .primary-nav{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);
    border-bottom:1px solid var(--line);
    padding:0.5rem var(--gutter) 1.4rem;
    box-shadow:0 20px 40px -28px rgba(35,38,32,0.4);
    clip-path:inset(0 0 100% 0);
    opacity:0;pointer-events:none;
    transition:clip-path .35s var(--ease), opacity .25s var(--ease);
  }
  .primary-nav.is-open{clip-path:inset(0 0 0 0);opacity:1;pointer-events:auto;}
  .primary-nav a:not(.btn){padding-block:0.95rem;border-bottom:1px solid var(--line);font-size:1.05rem;}
  .primary-nav a:not(.btn)::after{display:none;}
  .primary-nav .btn{margin-top:1.1rem;justify-content:center;padding:0.9rem 1.2rem;}
  /* Inside the open panel (cream), keep links dark and the CTA solid,
     whatever section is behind the bar. */
  .site-header.nav-over-dark .primary-nav a:not(.btn){color:var(--ink);text-shadow:none;}
  .site-header.nav-over-dark .btn--solid{background:var(--green);border-color:var(--green);color:var(--paper);}

  /* "More" collapses into a plain flat list here, same as every other item. */
  .nav-more{position:static;}
  .nav-more__toggle{display:none;}
  .nav-more__menu{
    position:static;opacity:1;visibility:visible;pointer-events:auto;transform:none;
    box-shadow:none;border:0;border-radius:0;padding:0;background:transparent;
  }
  .nav-more__menu a{padding-inline:0;}
  .nav-more__menu a:hover{background:transparent;}
}

/* ---------- Responsive layout ---------- */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:2.4rem;}
  /* Lead with the headline on mobile; the visual follows it. */
  .frame--hero{aspect-ratio:16 / 11;}
  .about-grid{grid-template-columns:1fr;gap:2.4rem;}
  .about-visual{max-width:460px;}
  .contact-grid{grid-template-columns:1fr;gap:2.4rem;}
}
@media (max-width:620px){
  .experiences{columns:1;}
  .details{grid-template-columns:1fr;}
  .details div{padding-right:0;}
  .resource-list li{gap:0.4rem 1rem;}
  .hero-actions .btn{flex:1 1 auto;justify-content:center;}
}

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

/* ---------- Focus visibility ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,.btn:focus-visible{
  outline:2px solid var(--clay-ink);
  outline-offset:3px;
  border-radius:2px;
}