/* ============================================================
   BASE — everything the sixteen pages have in common
   ============================================================

   Reset and base typography, the colour and type tokens, buttons, the nav
   (including the mobile version under 1080px), the footer, the skip link.

   These rules used to sit in all sixteen page stylesheets at once, character for
   character, which meant the nav had to be edited in sixteen places. They were
   moved here verbatim, in the order they had, and removed from the page files.
   Every page loads this file BEFORE its own, so the cascade is unchanged.

   What stays in the page files is what is genuinely per-page: hero, cards,
   testimonials, the reveal animations. Those differ between pages on purpose —
   the coaching page tilts its photo stack as it reveals, the homepage does not.

   Change something in here and you change it for every page, which is the point.
   Remember to raise the ?v= number in every HTML file afterwards.
   ============================================================ */

/* ============================================================
   ROSIE RAPP — 1:1 COACHING
   Same token set + primitives as version-a-editorial.html
   ============================================================ */

:root{
  --ink:        #534F51;
  --apricot:    #EDA57D;
  --cream:      #F5F2F1;
  --blush:      #E6D8CF;
  --tan:        #A98570;
  --white:      #FFFFFF;

  --ink-deep:   #353233;
  --ink-soft:   #1E1B1C;
  --ink-faint:  #423D3F;
  --hairline:   rgba(83,79,81,.16);
  --terracotta: #C4633C;
  --sand:       #EFE7E1;
  --paper:      #FBF9F8;
  --dune:       #E7DCD3;

  --serif:  'Playfair Display', Georgia, serif;
  --sans:   'Open Sans', system-ui, -apple-system, sans-serif;
  --cond:   'Barlow Condensed', 'Open Sans', sans-serif;
  --script: 'Caveat', cursive;

  --gutter: clamp(1.25rem, 5vw, 5.5rem);
  --maxw:   1320px;
  --ease:   cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* height:auto is load-bearing — without it the HTML height attribute survives as a
   presentational hint and stretches any image whose CSS only sets a width */
img{max-width:100%;display:block;height:auto}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-weight:400;line-height:1.06;letter-spacing:-.015em}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
/* paper grain ------------------------------------------------ */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:200;opacity:.32;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}
.script{font-family:var(--script);font-weight:600;line-height:.95;color:var(--terracotta)}
/* buttons ----------------------------------------------------- */
.btn{
  --bg:var(--ink);--fg:var(--cream);
  display:inline-flex;align-items:center;gap:.7em;
  padding:1.02em 2.15em;border:1px solid var(--bg);border-radius:999px;
  background:var(--bg);color:var(--fg);
  font-family:var(--cond);font-weight:500;font-size:.9375rem;
  letter-spacing:.2em;text-transform:uppercase;text-decoration:none;line-height:1;
  position:relative;overflow:hidden;isolation:isolate;cursor:pointer;
  transition:color .45s var(--ease),border-color .45s var(--ease);
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--apricot);
  transform:translateY(101%);transition:transform .5s var(--ease);
}
.btn--ghost{--bg:transparent;--fg:var(--ink);border-color:var(--ink-faint)}
.btn--terra{--bg:var(--terracotta);--fg:#fff}
.btn .arw{transition:transform .45s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}
:focus-visible{outline:2px solid var(--terracotta);outline-offset:4px;border-radius:2px}
.nav.is-stuck{
  background:rgba(245,242,241,.86);
  backdrop-filter:blur(16px) saturate(1.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  box-shadow:0 1px 0 var(--hairline);
  padding:.9rem 0;
}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:2rem}
.brand{text-decoration:none;line-height:1;display:inline-flex;align-items:center}
.brand__name{
  font-family:var(--serif);font-size:clamp(1.05rem,.98rem + .34vw,1.3rem);
  letter-spacing:.01em;font-weight:600;}
.brand__name em{font-style:italic;letter-spacing:.14em;text-transform:none;font-weight:500}
.nav .brand__name em{font-style:normal;font-family:inherit;letter-spacing:inherit;text-transform:inherit;font-weight:inherit}
.nav__links{display:flex;align-items:center;gap:clamp(.9rem,1.8vw,2rem)}
.nav__link{
  font-family:var(--cond);font-size:1rem;letter-spacing:.06em;
  text-transform:uppercase;text-decoration:none;position:relative;
  padding:.3em 0;white-space:nowrap;font-weight:500;}
.nav__link::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease);
}
.nav__link:hover::after,.nav__link[aria-current="page"]::after{transform:scaleX(1)}
.nav__link[aria-current="page"]{color:var(--terracotta)}
.burger{display:none;width:44px;height:44px;border:0;background:none;padding:0;cursor:pointer}
.burger span{display:block;height:1px;background:var(--ink);margin:7px auto;width:26px;transition:.4s var(--ease)}
.nav.is-open .burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav.is-open .burger span:nth-child(2){opacity:0}
.nav.is-open .burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
/* --- "Other" dropdown ---------------------------------------
   Opens on hover and on focus so it works with a mouse and a keyboard;
   the click handler is there for touch, where hover never fires. */
.nav__has-sub{position:relative;display:flex;align-items:center}
.nav__link--sub{
  background:none;border:0;padding:.3em 0;margin:0;cursor:pointer;color:inherit;
  display:inline-flex;align-items:center;gap:.45em;line-height:inherit;
}
.nav__chev{transition:transform .4s var(--ease)}
.nav__has-sub:hover .nav__chev,
.nav__has-sub:focus-within .nav__chev,
.nav__has-sub.is-open .nav__chev{transform:rotate(180deg)}
/* invisible bridge across the gap, so the panel survives the trip down to it */
.nav__has-sub::after{content:"";position:absolute;top:100%;left:0;right:0;height:1.1rem}
.nav__sub{
  /* right-aligned: "Other" is the last item, so a centred panel would hang off
     the edge on narrower desktops */
  position:absolute;top:calc(100% + 1rem);right:0;z-index:1;
  transform:translateY(-8px);
  display:grid;min-width:13.5rem;padding:.45rem 0;
  background:var(--cream);border:1px solid var(--hairline);border-radius:4px;
  box-shadow:0 34px 64px -44px rgba(38,34,31,.65);
  opacity:0;visibility:hidden;
  transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s;
}
.nav__has-sub:hover .nav__sub,
.nav__has-sub:focus-within .nav__sub,
.nav__has-sub.is-open .nav__sub{opacity:1;visibility:visible;transform:translateY(0)}
.nav__sublink{
  padding:.62rem 1.3rem;text-decoration:none;white-space:nowrap;
  font-family:var(--cond);font-size:.875rem;letter-spacing:.06em;text-transform:uppercase;
  transition:background .3s var(--ease),color .3s var(--ease);font-weight:500;}
.nav__sublink:hover{background:var(--blush);color:var(--terracotta)}
@media (max-width:1080px){
  /* inside the full-screen menu "Other" is an accordion, not an always-open group:
     its links fold away until the row is tapped, so the menu opens on four evenly
     spaced items instead of two spacings stacked on top of each other. */
  .nav__has-sub{flex-direction:column;gap:0}
  .nav__has-sub::after{display:none}
  /* the chevron is the only thing that says the row opens, so it has to be visible
     here — and it follows the panel, not hover, which sticks around after a tap */
  .nav__chev{display:block;width:12px;height:8px}
  .nav__has-sub:hover .nav__chev,
  .nav__has-sub:focus-within .nav__chev{transform:none}
  .nav__has-sub.is-open .nav__chev{transform:rotate(180deg)}
  .nav__link--sub{cursor:pointer}
  .nav__sub{
    position:static;transform:none;
    background:none;border:0;box-shadow:none;padding:0;min-width:0;
    /* the same 2rem .nav__links runs on, so every row sits on one rhythm */
    justify-items:center;gap:2rem;
    /* max-height rather than height:auto, so the fold can be animated; 18rem
       clears the four links' real height with room to spare */
    overflow:hidden;max-height:0;opacity:0;visibility:hidden;margin-top:0;
    transition:max-height .55s var(--ease),margin-top .55s var(--ease),
               opacity .4s var(--ease),visibility .55s;
  }
  .nav__has-sub:hover .nav__sub,
  .nav__has-sub:focus-within .nav__sub{max-height:0;opacity:0;visibility:hidden;margin-top:0}
  .nav__has-sub.is-open .nav__sub{max-height:18rem;opacity:1;visibility:visible;margin-top:2rem}
  .nav__sublink{padding:0;font-size:1.0625rem;letter-spacing:.08em;color:var(--ink-faint)}
  .nav__sublink:hover{background:none}
}
.foot a{color:inherit;text-decoration:none;transition:color .35s var(--ease)}
.foot a:hover{color:var(--apricot)}
.foot__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:clamp(2rem,5vw,4.5rem)}
.foot__hi{font-family:var(--script);font-size:2.3rem;color:var(--apricot);line-height:.9;display:block;margin-bottom:.7rem;transform:rotate(-2deg)}
.foot__tag{max-width:38ch;font-size:.9375rem;line-height:1.75;margin-top:1.1rem}
.foot h4{font-family:var(--cond);font-weight:500;font-size:.875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--apricot);margin-bottom:1.05rem}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;font-size:.9375rem}
.foot__slink{display:inline-flex;align-items:center;gap:.6rem}
.foot__ico{width:1.15em;height:1.15em;flex:none;fill:currentColor}
.foot__bottom{
  margin-top:clamp(2rem,4vw,3rem);padding-top:1.4rem;border-top:1px solid rgba(245,242,241,.14);
  display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  font-family:var(--cond);font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;color:#FFFFFF;
}
.foot__legal{display:flex;gap:1.6rem;flex-wrap:wrap}
/* Skip link — sits off-screen until it is tabbed to, then drops in. Lets anyone
   navigating by keyboard jump the whole nav instead of tabbing through it on
   every page. */
.skip-link{
  position:fixed;top:-100px;left:16px;z-index:300;
  padding:.7em 1.2em;border-radius:999px;
  background:var(--terracotta);color:var(--cream);
  font-family:var(--cond);font-size:.9375rem;letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none;
  transition:top .25s var(--ease);
}
.skip-link:focus{top:14px}