/* ============================================================
   PASHA LEGAL — FULL SITE PREVIEW  ·  LIGHT EDITION
   "We handle the Law. You handle your life."
   Warm ivory + beige + grey, charcoal Cormorant serif, silver hairlines.
   Its own personality: hairline frames, generous air, asymmetric serif
   display, quiet luxury. Light, editorial, trustworthy. NO gold, NO black.
   ============================================================ */

:root{
  --bg:#f7f4ec;          /* warm ivory ground */
  --bg-2:#efe9dd;        /* beige band */
  --bg-3:#fbf9f3;        /* near-white panel */
  --paper:#fffdf8;       /* card / white */
  --ink:#23252a;         /* charcoal type */
  --ink-soft:rgba(35,37,42,.7);
  --ink-dim:rgba(35,37,42,.56);
  --ink-faint:rgba(35,37,42,.4);
  --silver:#8a8f97;      /* muted silver accent */
  --silver-deep:#6c727b;
  --line:rgba(35,37,42,.14);
  --line-soft:rgba(35,37,42,.08);
  --frame:rgba(108,114,123,.5);  /* hairline frame */
  --glass:rgba(255,253,248,.7);
  --shadow:0 30px 70px -34px rgba(35,30,18,.28);
  --shadow-sm:0 14px 36px -22px rgba(35,30,18,.3);
  --rad:18px;
  --rad-lg:26px;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Nunito Sans',-apple-system,sans-serif;
}

*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth; overflow-x:hidden}
/* App-like: lock horizontal panning, only ever scroll up/down. */
html, body{max-width:100%; overflow-x:hidden; overscroll-behavior-x:none}
body{font-family:var(--sans); background:var(--bg); color:var(--ink);
  font-size:16.5px; line-height:1.72; font-weight:400; -webkit-font-smoothing:antialiased; width:100%; position:relative}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
::selection{background:var(--ink); color:var(--bg)}
.wrap{max-width:1180px; margin:0 auto; padding:0 28px}
.wrap-narrow{max-width:820px; margin:0 auto; padding:0 28px}
h1,h2,h3,h4{font-family:var(--serif); font-weight:500; line-height:1.07; letter-spacing:.004em; color:var(--ink)}
h1 em,h2 em,h3 em{font-style:italic; color:var(--silver-deep)}
.kicker{font-family:var(--sans); font-size:.68rem; font-weight:700; letter-spacing:.34em; text-transform:uppercase; color:var(--silver-deep); margin-bottom:18px; display:flex; align-items:center; gap:.8em}
.kicker::before{content:""; width:26px; height:1px; background:var(--silver); display:inline-block}
.sec-center .kicker{justify-content:center}

.js-anim .reveal{opacity:0; transform:translateY(26px); transition:opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1)}
.js-anim .reveal.in{opacity:1; transform:none}
.js-anim .reveal[data-d="1"]{transition-delay:.1s}
.js-anim .reveal[data-d="2"]{transition-delay:.2s}
.js-anim .reveal[data-d="3"]{transition-delay:.3s}

/* ============ NAV ============ */
.nav{position:fixed; inset:16px 16px auto; z-index:60; transition:transform .45s cubic-bezier(.22,1,.36,1)}
.nav.hide{transform:translateY(-170%)}
.nav-inner{max-width:1180px; margin:0 auto; display:flex; align-items:center; gap:22px;
  padding:9px 12px 9px 22px; border-radius:4px;
  background:rgba(251,249,243,.82); backdrop-filter:blur(22px) saturate(1.3); -webkit-backdrop-filter:blur(22px) saturate(1.3);
  border:1px solid var(--line); box-shadow:0 12px 40px -22px rgba(35,30,18,.4)}
.nav .logo img{height:52px; width:auto}
.nav-links{display:flex; gap:4px; margin-left:auto; font-size:.84rem; font-weight:600; align-items:center}
.nav-links > a, .nav-item > a{display:inline-flex; align-items:center; gap:.35em; text-decoration:none; color:var(--ink-soft); transition:color .25s; padding:.5em .7em; border-radius:3px}
.nav-links > a:hover, .nav-item > a:hover{color:var(--ink)}
.nav-links a.active{color:var(--ink); box-shadow:inset 0 -2px 0 var(--silver)}
.nav-item{position:relative}
.nav-item > a .chev{width:12px;height:12px;opacity:.55;transition:transform .25s}
.nav-item:hover > a .chev{transform:rotate(180deg)}
.dropdown{position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%) translateY(8px);
  min-width:258px; background:var(--paper); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
  border:1px solid var(--line); border-radius:6px; padding:10px; opacity:0; visibility:hidden;
  transition:opacity .25s, transform .25s, visibility .25s; box-shadow:var(--shadow-sm)}
.nav-item:hover .dropdown{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0)}
.dropdown a{display:flex; flex-direction:column; gap:2px; padding:10px 14px; border-radius:4px; color:var(--ink-soft); transition:background .2s, color .2s}
.dropdown a:hover{background:var(--bg-2); color:var(--ink)}
.dropdown a strong{font-weight:700; font-size:.86rem; color:var(--ink)}
.dropdown a span{font-size:.72rem; color:var(--ink-faint)}
.nav-cta-group{display:flex; align-items:center; gap:8px}
@media(max-width:1080px){ .nav-links{display:none} .nav-cta-group{margin-left:auto} }
@media(max-width:600px){
  .nav-inner{gap:10px; padding:8px 10px 8px 16px}
  .nav-cta-group .btn{display:none}
  .nav .logo img{height:42px}
}

.btn{display:inline-flex; align-items:center; gap:.55em; padding:.92em 1.8em; border-radius:3px;
  font-family:var(--sans); font-weight:700; font-size:.88rem; letter-spacing:.01em; text-decoration:none; border:1px solid transparent; cursor:pointer;
  transition:transform .3s, background .3s, color .3s, box-shadow .3s, border-color .3s}
.btn-ink{background:var(--ink); color:var(--bg); box-shadow:0 16px 36px -18px rgba(35,37,42,.6)}
.btn-ink:hover{transform:translateY(-2px); background:#34373d}
.btn-ghost{background:transparent; color:var(--ink); border:1px solid var(--frame)}
.btn-ghost:hover{background:var(--paper); border-color:var(--ink)}
.btn-ai{background:var(--paper); color:var(--ink); border:1px solid var(--silver); box-shadow:0 12px 30px -20px rgba(35,30,18,.5)}
.btn-ai:hover{transform:translateY(-2px); border-color:var(--ink); background:#fff}
.btn-ai .spark{width:1.05em;height:1.05em;color:var(--silver-deep)}
.btn svg{width:1.02em; height:1.02em; flex:0 0 auto}

/* mobile drawer */
.burger{display:none; width:42px; height:42px; border-radius:4px; border:1px solid var(--line); background:var(--paper);
  align-items:center; justify-content:center; cursor:pointer; flex:0 0 auto}
.burger svg{width:20px; height:20px; color:var(--ink)}
.drawer{position:fixed; inset:0; z-index:70; height:100dvh; background:rgba(247,244,236,.99); backdrop-filter:blur(16px);
  transform:translateX(100%); transition:transform .4s cubic-bezier(.22,1,.36,1); padding:84px 28px 56px;
  overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain}
.drawer.open{transform:none}
/* the drawer content column, with breathing room at the end so the dark CTA never
   clips at the viewport edge (was reading as a "black box" after FAQ) */
.drawer > a:last-child.btn{margin-bottom:24px}
.drawer-close{position:absolute; top:24px; right:22px; width:44px; height:44px; border-radius:4px; border:1px solid var(--line);
  background:var(--paper); color:var(--ink); cursor:pointer; display:grid; place-items:center}
.drawer-close svg{width:22px; height:22px}
.drawer a{display:block; padding:12px 6px; font-family:var(--serif); font-size:1.45rem; border-bottom:1px solid var(--line-soft); color:var(--ink)}
.drawer a.sub{font-family:var(--sans); font-size:.95rem; padding:10px 18px; color:var(--ink-soft); border-bottom:none}
.drawer .grp{font-size:.64rem; font-weight:700; letter-spacing:.28em; text-transform:uppercase; color:var(--silver-deep); margin:24px 0 4px; padding:0 6px}
.drawer .btn{width:100%; justify-content:center; margin-top:16px}
/* the drawer CTA is a .btn-ink <a>, but `.drawer a{color:var(--ink)}` (higher
   specificity) was overriding its white text -> dark-on-dark "black box". Restore it. */
.drawer a.btn-ink{color:var(--bg); border-bottom:none}
.drawer a.btn-ghost{color:var(--ink); border-bottom:none}
@media(max-width:1080px){ .burger{display:flex} }

/* ============ HERO — video background + intake widget ============ */
/* shorter, widescreen hero band — less vertical zoom on the video = crisper, less pixelated */
.hero{position:relative; padding:150px 0 64px; overflow:hidden; background:var(--ink); min-height:0; height:clamp(560px,76vh,760px); display:flex; align-items:center; transition:height .5s ease}
@media(max-width:600px){ .hero{height:auto; min-height:600px; padding:128px 0 56px} }
/* when the search expands into a conversation, let the hero grow to fit (no clipping) */
body.hero-convo-open .hero{height:auto; min-height:clamp(560px,76vh,760px); overflow:visible; padding-bottom:96px}
/* darker, higher-contrast hero video — moody, cinematic backdrop for the glass search */
.hero .hero-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  filter:brightness(.66) contrast(1.12) saturate(1.04)}
/* dark veil — vignette + top/bottom fade so the centered glass + light type pop */
.hero .hero-veil{position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 42%, rgba(20,21,24,0) 0%, rgba(20,21,24,.28) 56%, rgba(18,19,22,.62) 100%),
    linear-gradient(180deg, rgba(18,19,22,.5) 0%, rgba(18,19,22,.16) 26%, rgba(18,19,22,.16) 70%, rgba(18,19,22,.66) 100%)}
.hero .hero-veil::after{content:""; position:absolute; inset:0; background:radial-gradient(70% 50% at 50% 48%, rgba(247,244,236,.06), transparent 70%)}
/* film grain overlay on top of the video — adds texture + hides compression artefacts */
.hero .hero-grain{position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.10; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px; animation:grainShift 1.6s steps(3) infinite}
@keyframes grainShift{0%{transform:translate(0,0)}33%{transform:translate(-3%,2%)}66%{transform:translate(2%,-2%)}100%{transform:translate(0,0)}}
@media(prefers-reduced-motion:reduce){ .hero .hero-grain{animation:none} }
/* soft scrim directly behind the headline text so it stays crisp even where the veil is thin */
.hero .wrap > div:first-child{position:relative}
@media(min-width:981px){ .hero h1, .hero .lede, .hero .ticks, .hero-rate{text-shadow:0 1px 18px rgba(247,244,236,.55)} }
.hero .wrap{position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; width:min(1180px,92vw)}
@media(max-width:980px){ .hero .wrap{grid-template-columns:1fr; gap:30px} }
.hero h1{font-size:clamp(2.7rem,5.6vw,4.6rem); max-width:15ch; letter-spacing:-.005em}
.hero .lede{margin:22px 0 26px; max-width:44ch; font-size:1.08rem; color:var(--ink-soft)}
.ticks{display:grid; gap:11px; margin-bottom:8px}
.tick{display:flex; gap:.7em; align-items:flex-start; font-size:.94rem; font-weight:600; color:var(--ink)}
.tick svg{width:17px; height:17px; color:var(--silver-deep); flex:0 0 auto; margin-top:.32em}

/* ============ CENTERED, SEARCH-FIRST HERO (DARK GLASS) ============ */
.hero .wrap.hero-center{display:flex; flex-direction:column; align-items:center; text-align:center; gap:0; max-width:900px}
.hero-center .hero-brand{margin-bottom:32px}
.hero-center .hero-tagline{font-family:var(--serif); font-size:clamp(2.3rem,5vw,3.9rem); color:#fdfbf6; margin-bottom:0; font-weight:400; font-style:normal; line-height:1.12; letter-spacing:-.008em; max-width:20ch; text-shadow:0 2px 30px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.3)}
.hero-center .hero-tagline .tl1{display:block}
.hero-center .hero-tagline .tl2{display:block; font-style:italic; color:#fff; opacity:.92}
.hero-center .hero-sub{margin:22px auto 0; max-width:52ch; color:rgba(255,255,255,.88); font-size:1.05rem; line-height:1.6; text-shadow:0 1px 16px rgba(0,0,0,.55)}
@media(max-width:600px){ .hero-center .hero-brand{margin-bottom:24px} .hero-center .hero-tagline{font-size:2rem} .hero-center .hero-sub{font-size:.98rem; margin-top:18px} }

/* ---- glassy premium search bar — ULTRA-THIN, STRONG GLASS EFFECT, GLOWING BORDER ---- */
.hero-search{position:relative; display:flex; align-items:center;
  width:min(680px,100%); margin:32px auto 0; padding:4px; border-radius:999px; cursor:text;
  /* super transparent, clear + sharp, only a whisper of blur */
  background:rgba(255,255,255,.03);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  border:1px solid rgba(255,255,255,.32);
  box-shadow:0 18px 50px -32px rgba(0,0,0,.5);
  transition:border-color .35s, background .35s}
.hero-search:hover{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.42)}
/* no glow — keep it clear */
.hero-search .hs-glow{display:none}
.hero-search:focus-within{border-color:rgba(255,255,255,.55); background:rgba(255,255,255,.05)}
/* centred placeholder/text; symmetric padding reserves room for the right-hand button */
.hero-search .hs-input{flex:1; min-width:0; border:none; background:transparent; font:inherit;
  font-size:1.3rem; font-weight:400; color:#fff; text-align:center; padding:9px 54px;
  letter-spacing:.005em; text-shadow:0 1px 12px rgba(0,0,0,.4);
  text-overflow:ellipsis; white-space:nowrap; overflow:hidden}
.hero-search .hs-input::placeholder{color:rgba(255,255,255,.72); font-weight:400}
.hero-search .hs-input:focus{outline:none}
/* transparent glass button, pinned right so it doesn't offset the centred text */
.hero-search .hs-go{position:absolute; right:5px; top:50%; transform:translateY(-50%); z-index:2;
  width:46px; height:46px; border:1px solid rgba(255,255,255,.3); cursor:pointer; border-radius:50%;
  background:rgba(255,255,255,.10); color:#fff; display:grid; place-items:center;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:transform .25s, background .25s, border-color .25s}
.hero-search .hs-go:hover{background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.55); transform:translateY(-50%) scale(1.06)}
.hero-search .hs-go:active{transform:translateY(-50%) scale(.96)}
.hero-search .hs-go svg{width:19px; height:19px; stroke-width:2.2}
@media(max-width:600px){ .hero-search{padding:5px; margin:26px auto 0} .hero-search .hs-input{font-size:1rem; padding:11px 46px} .hero-search .hs-go{width:42px; height:42px} }

/* powered-by Pasha io tag */
.hs-by{display:inline-flex; align-items:center; gap:.55em; margin:16px auto 0;
  font-size:.78rem; letter-spacing:.04em; color:rgba(255,255,255,.72)}
.hs-by b{color:#fff; font-weight:700; letter-spacing:.01em}
.hs-by .hs-dot{width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.85);
  box-shadow:0 0 0 0 rgba(255,255,255,.5); animation:hsPulse 2.4s ease-in-out infinite}
@keyframes hsPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.45)}50%{box-shadow:0 0 0 5px rgba(255,255,255,0)}}
@media(prefers-reduced-motion:reduce){ .hero-search .hs-glow,.hs-by .hs-dot{animation:none} }

/* ---- the search bubble EXPANDS into a real chat window with an attached input ---- */
/* when a conversation starts, the seed bar collapses away */
.js-anim .hero-search.is-collapsed,
.hero-search.is-collapsed{height:0 !important; min-height:0; padding:0; margin:0 auto; opacity:0 !important;
  border-width:0; overflow:hidden; pointer-events:none;
  transition:opacity .3s ease, height .3s ease, margin .3s ease}
body.hero-convo-open .hs-by{opacity:0; height:0; margin:0; overflow:hidden; transition:opacity .3s, height .3s, margin .3s}

.hero-convo{width:min(680px,100%); margin:0 auto; height:0; overflow:hidden; opacity:0;
  transition:height .5s ease, opacity .4s ease, margin .4s ease; text-align:left; scroll-margin:120px 0}
.hero-convo.open{height:auto; opacity:1; margin:8px auto 56px}
/* the chat window — ultra-clear glass, minimal blur */
.hc-panel{display:flex; flex-direction:column; overflow:hidden;
  background:rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(4px) saturate(1.4); backdrop-filter:blur(4px) saturate(1.4);
  border:1px solid rgba(255,255,255,.35); border-radius:22px;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.5) inset;
  animation:hcGrow .45s cubic-bezier(.22,1,.36,1)}
@keyframes hcGrow{from{transform:translateY(-8px) scale(.985); opacity:0}to{transform:none; opacity:1}}
/* header strip */
.hc-head{display:flex; align-items:center; gap:11px; padding:14px 18px; border-bottom:1px solid rgba(255,255,255,.16)}
.hc-head .hc-ava{width:34px; height:34px}
.hc-id strong{display:block; color:#fff; font-family:var(--sans); font-weight:700; font-size:.92rem; letter-spacing:.01em}
.hc-id span{display:block; color:rgba(255,255,255,.65); font-size:.72rem; letter-spacing:.02em}
/* scrolls with wheel / trackpad / touch — no visible scrollbar */
.hc-log{display:flex; flex-direction:column; gap:11px; height:min(56vh,460px); min-height:300px; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:16px 16px 12px; scrollbar-width:none; -ms-overflow-style:none}
.hc-log::-webkit-scrollbar{width:0; height:0; display:none}
.hc-msg{display:flex; gap:9px; align-items:flex-start; max-width:92%}
.hc-msg.me{align-self:flex-end; flex-direction:row-reverse}
.hc-ava{width:30px; height:30px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.9); color:var(--ink); font-family:var(--serif); font-style:italic; font-weight:600; font-size:.95rem}
.hc-bub{padding:10px 14px; border-radius:14px; font-size:.95rem; line-height:1.5; color:#fff;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px)}
.hc-msg.me .hc-bub{background:rgba(253,251,246,.96); color:var(--ink); border-color:rgba(255,255,255,.3)}
.hc-bub.typing{display:inline-flex; gap:5px; align-items:center; padding:13px 15px}
.hc-bub.typing i{width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.75); animation:hcDot 1.2s infinite ease-in-out}
.hc-bub.typing i:nth-child(2){animation-delay:.18s}.hc-bub.typing i:nth-child(3){animation-delay:.36s}
@keyframes hcDot{0%,80%,100%{opacity:.3; transform:translateY(0)}40%{opacity:1; transform:translateY(-3px)}}
.hc-chips{display:flex; flex-wrap:wrap; gap:8px; padding:2px 16px 6px}
.hc-chip{padding:.5em 1.05em; border-radius:999px; cursor:pointer; font:inherit; font-size:.84rem; color:#fff;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.28); transition:all .2s}
.hc-chip:hover{background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.5)}
.hc-cta{display:inline-block; margin-top:4px; padding:.6em 1.2em; border-radius:999px; font-size:.88rem; font-weight:700;
  background:#fdfbf6; color:var(--ink)}
.hc-cta:hover{background:#fff}
/* "Send an enquiry" button that pops up after a couple of exchanges */
.hc-enquiry{display:flex; justify-content:center; margin:14px 0 4px; animation:hcPop .45s cubic-bezier(.2,.8,.2,1)}
.hc-enquiry-btn{display:inline-flex; align-items:center; gap:.5em; padding:.8em 1.5em; border-radius:999px;
  font-family:inherit; font-size:.92rem; font-weight:700; text-decoration:none; border:0; cursor:pointer;
  background:#fdfbf6; color:var(--ink);
  box-shadow:0 14px 34px -12px rgba(0,0,0,.55); transition:transform .2s, background .2s}
.hc-enquiry-btn:hover{background:#fff; transform:translateY(-1px)}
.hc-enquiry-btn svg{width:17px; height:17px}
@keyframes hcPop{from{opacity:0; transform:translateY(8px) scale(.96)} to{opacity:1; transform:none}}
.hc-video{margin:8px 0; border-radius:12px; overflow:hidden; max-width:100%; aspect-ratio:16/9;
  box-shadow:0 8px 20px rgba(0,0,0,.3)}
.hc-video iframe{width:100%; height:100%; border:none}
/* attached input row at the foot of the window */
.hc-input{display:flex; align-items:center; gap:8px; padding:10px 10px 10px 18px; border-top:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.05)}
.hc-field{flex:1; min-width:0; border:none; background:transparent; outline:none; font:inherit; font-size:1rem;
  color:#fff; padding:8px 0}
.hc-field::placeholder{color:rgba(255,255,255,.6)}
.hc-field:disabled{opacity:.5}
.hc-send{flex:0 0 auto; width:42px; height:42px; border:1px solid rgba(255,255,255,.3); border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.12); color:#fff; display:grid; place-items:center; transition:background .25s, border-color .25s, transform .25s}
.hc-send:hover{background:rgba(255,255,255,.22); border-color:rgba(255,255,255,.55); transform:scale(1.05)}
.hc-send:disabled{opacity:.4; cursor:default}
.hc-send svg{width:18px; height:18px}
@media(prefers-reduced-motion:reduce){ .hc-bub.typing i{animation:none} .hc-panel{animation:none} }
/* prominent hero brand mark — makes the Pasha Legal logo clearly visible */
.hero-brand{margin-bottom:26px}
.hero-brand img{height:132px; width:auto; filter:drop-shadow(0 8px 28px rgba(0,0,0,.45))}
@media(max-width:980px){ .hero-brand img{height:108px} }
@media(max-width:600px){ .hero-brand img{height:92px} }

.hero-rate{display:inline-flex; align-items:center; gap:.7em; margin-bottom:22px; padding:.5em 1.1em .5em .9em;
  border-radius:3px; background:var(--paper); border:1px solid var(--line); font-size:.82rem; box-shadow:var(--shadow-sm)}
.hero-rate .stars{color:var(--silver-deep); letter-spacing:.1em}
.hero-rate b{color:var(--ink); font-weight:800}
.hero-rate span{color:var(--ink-soft)}

/* ============ "IN YOUR OWN WORDS" intake widget ============ */
.words{background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:26px; box-shadow:var(--shadow);
  position:relative}
.words::before{content:""; position:absolute; inset:-14px; border:1px solid var(--frame); border-radius:12px; pointer-events:none; z-index:-1; opacity:.55}
.words .w-head{display:flex; align-items:center; gap:12px; margin-bottom:6px}
.words .w-ava{width:40px; height:40px; border-radius:50%; flex:0 0 auto; background:var(--ink); color:var(--bg);
  display:grid; place-items:center; font-family:var(--serif); font-style:italic; font-weight:600; font-size:1.25rem}
.words .w-head strong{font-family:var(--serif); font-weight:500; font-size:1.35rem; color:var(--ink); line-height:1.1}
.words .w-head span{display:block; font-size:.74rem; color:var(--silver-deep); letter-spacing:.04em; margin-top:1px}
.words .w-sub{font-size:.92rem; color:var(--ink-soft); margin:8px 0 16px}
.words textarea{width:100%; min-height:96px; resize:vertical; padding:14px 16px; border-radius:6px; border:1px solid var(--line);
  background:var(--bg-3); color:var(--ink); font:inherit; font-size:1rem; line-height:1.5; transition:border-color .25s, box-shadow .25s}
.words textarea::placeholder{color:var(--ink-faint)}
.words textarea:focus{outline:none; border-color:var(--silver); box-shadow:0 0 0 4px rgba(138,143,151,.16)}
.words .w-chips{display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 4px}
.words .w-chip{padding:.5em 1em; border-radius:999px; background:var(--bg-2); border:1px solid var(--line); color:var(--ink-soft);
  font:inherit; font-size:.82rem; cursor:pointer; transition:all .22s}
.words .w-chip:hover{border-color:var(--ink); color:var(--ink); background:var(--paper)}
.words .w-row{display:flex; align-items:center; gap:14px; margin-top:16px; flex-wrap:wrap}
.words .w-row .btn{flex:1; justify-content:center; min-width:180px}
.words .w-priv{display:flex; align-items:center; gap:.5em; font-size:.74rem; color:var(--ink-faint)}
.words .w-priv svg{width:14px; height:14px; stroke-width:1.6}
@media(max-width:980px){ .words::before{display:none} }
@media(max-width:480px){ .words{padding:22px} }

/* conversational qualifier inside the .words card */
.words .w-head strong{font-size:1.2rem}
.words .q-log{display:flex; flex-direction:column; gap:11px; margin:16px 0 14px; max-height:300px; min-height:180px;
  overflow-y:auto; padding-right:4px; scrollbar-width:thin}
.words .q-log .cmsg{max-width:90%}
.words .q-log .cbub{font-size:.9rem}
.words .q-input{display:flex; gap:8px; align-items:center}
.words .q-input input{flex:1; padding:.8em 1.1em; border-radius:999px; border:1px solid var(--line);
  background:var(--bg-3); color:var(--ink); font:inherit; font-size:.95rem; transition:border-color .25s, box-shadow .25s}
.words .q-input input:focus{outline:none; border-color:var(--silver); box-shadow:0 0 0 4px rgba(138,143,151,.16)}
.words .q-input button{width:46px; height:46px; flex:0 0 auto; border-radius:50%; border:none; background:var(--ink);
  color:var(--bg); cursor:pointer; display:grid; place-items:center; transition:background .2s, transform .2s}
.words .q-input button:hover{background:#34373d; transform:scale(1.05)}
.words .q-input button svg{width:18px; height:18px}
.words .q-log .cchip{background:var(--bg-2)}

/* ============ FORMS ============ */
.hero-form, .panel-form{background:var(--paper); border:1px solid var(--line); border-radius:8px;
  padding:32px; box-shadow:var(--shadow)}
.hero-form .fhead, .panel-form .fhead{font-family:var(--serif); font-size:1.7rem; margin-bottom:4px}
.hero-form .fsub, .panel-form .fsub{font-size:.86rem; color:var(--ink-soft); margin-bottom:20px}
.hero-form label, .panel-form label{display:block; font-size:.62rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 6px}
.hero-form input,.hero-form textarea,.hero-form select,
.panel-form input,.panel-form textarea,.panel-form select{width:100%; margin-bottom:14px; padding:.8em 1em; border-radius:4px;
  border:1px solid var(--line); background:var(--bg-3); color:var(--ink); font:inherit; font-size:.93rem; transition:border-color .25s, box-shadow .25s}
.hero-form input::placeholder,.hero-form textarea::placeholder,.panel-form input::placeholder,.panel-form textarea::placeholder{color:var(--ink-faint)}
.hero-form input:focus,.hero-form textarea:focus,.hero-form select:focus,
.panel-form input:focus,.panel-form textarea:focus,.panel-form select:focus{outline:none; border-color:var(--silver); box-shadow:0 0 0 4px rgba(138,143,151,.16)}
.seg{display:flex; background:var(--bg-2); border:1px solid var(--line); border-radius:4px; padding:4px; margin-bottom:14px}
.seg button{flex:1; border:none; background:transparent; color:var(--ink-soft); font:inherit; font-weight:700; font-size:.85rem; padding:.6em; border-radius:3px; cursor:pointer; transition:background .25s,color .25s}
.seg button.sel{background:var(--ink); color:var(--bg)}
.hero-form .btn, .panel-form .btn{width:100%; justify-content:center}
.hero-form .micro, .panel-form .micro{font-size:.72rem; color:var(--ink-faint); text-align:center; margin-top:10px}
.thanks{text-align:center; padding:28px 6px}
.thanks .seal{width:54px; height:54px; margin:0 auto 16px; border-radius:50%; background:var(--ink); color:var(--bg); display:grid; place-items:center}
.thanks .seal svg{width:24px; height:24px}
.thanks h3{font-family:var(--serif); font-weight:500; font-size:1.6rem; margin-bottom:10px}
.thanks p{color:var(--ink-soft)}

/* ============ STAT STRIP ============ */
.stats{border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); background:var(--bg-2)}
.stats .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; padding-top:38px; padding-bottom:38px}
@media(max-width:760px){ .stats .wrap{grid-template-columns:repeat(2,1fr); gap:30px 20px} }
.stat{position:relative; padding-left:18px}
.stat::before{content:""; position:absolute; left:0; top:6px; bottom:6px; width:1px; background:var(--silver)}
.stat .n{font-family:var(--serif); font-style:italic; font-size:2rem; color:var(--ink); line-height:1}
.stat .t{font-size:.7rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); margin-top:6px}

/* ============ AREAS MARQUEE ============ */
.council-band{position:relative; overflow:hidden; padding:40px 0 44px; background:var(--bg); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft)}
.cb-label{text-align:center; font-size:.66rem; font-weight:700; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:24px}
.cb-marquee{overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)}
.cb-track{display:flex; align-items:center; gap:14px; width:max-content; padding-right:14px; animation:cb-scroll 40s linear infinite}
.cb-badge{height:46px; padding:0 24px; flex:0 0 auto; border-radius:3px; display:grid; place-items:center;
  background:var(--paper); border:1px solid var(--line); color:var(--ink-soft);
  font-family:var(--serif); font-style:italic; font-size:1.15rem; white-space:nowrap}
@keyframes cb-scroll{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){ .cb-track{animation:none; width:auto; flex-wrap:wrap; justify-content:center} }
@media(max-width:640px){ .cb-track{gap:10px; padding-right:10px} .cb-badge{height:40px; font-size:1rem; padding:0 16px} }

/* ============ SECTIONS ============ */
.section{padding:118px 0}
.sec-tight{padding-top:84px}
.pt0{padding-top:0}
.pt90{padding-top:90px}
.pb0{padding-bottom:0}
.beige{background:var(--bg-2); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft)}
.paper{background:var(--bg-3); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft)}
.sec-head{max-width:700px; margin-bottom:54px}
.sec-center{margin-inline:auto; text-align:center}
.sec-head h2{font-size:clamp(2.2rem,4vw,3.2rem); margin-bottom:16px; letter-spacing:-.005em}
.sec-head p{color:var(--ink-soft); font-size:1.04rem}
.m0{margin:0}

/* ============ PAGE HERO (interior) ============ */
.phero{position:relative; padding:170px 0 64px; overflow:hidden; background:var(--bg-2); border-bottom:1px solid var(--line-soft)}
.phero.with-photo{background:var(--ink)}
.phero .bg{position:absolute; inset:0; background-position:center; background-size:cover; opacity:0}
.phero.with-photo .bg{opacity:.5}
.phero.with-photo .veil{position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,18,14,.55), rgba(20,18,14,.82))}
.phero.with-photo h1, .phero.with-photo p{color:var(--bg)}
.phero.with-photo .crumbs{color:rgba(255,253,248,.6)} .phero.with-photo .crumbs a{color:var(--bg)}
.phero.with-photo h1 em{color:#d8d2c5}
.phero .wrap{position:relative; max-width:900px}
.phero h1{font-size:clamp(2.5rem,5vw,3.9rem); margin-bottom:18px; letter-spacing:-.005em}
.phero p{color:var(--ink-soft); font-size:1.08rem; max-width:62ch}
.crumbs{font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:20px}
.crumbs a{color:var(--silver-deep)}
.crumbs span{margin:0 .5em; opacity:.5}

/* prose */
.prose{max-width:760px; margin:0 auto}
.prose p{margin-bottom:18px; color:var(--ink-soft)}
.prose h2{font-size:clamp(1.9rem,3vw,2.4rem); margin:46px 0 16px}
.prose h3{font-size:1.5rem; margin:34px 0 12px}
.prose ul,.prose ol{margin:0 0 18px 1.2em; color:var(--ink-soft)}
.prose li{margin-bottom:8px}
.prose strong{color:var(--ink)}
.prose a{color:var(--silver-deep); text-decoration:underline; text-underline-offset:3px}
.prose blockquote{border-left:2px solid var(--silver); padding:8px 0 8px 24px; margin:26px 0; font-family:var(--serif);
  font-style:italic; font-size:1.5rem; color:var(--ink); line-height:1.4}
.prose figure{margin:30px 0}
.prose figure img{border-radius:6px; border:1px solid var(--line); box-shadow:var(--shadow-sm)}
.prose figcaption{font-size:.78rem; color:var(--ink-faint); margin-top:8px; text-align:center}

/* ============ STEPS / WHY ============ */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:0; counter-reset:s}
@media(max-width:880px){ .steps{grid-template-columns:1fr} }
.step{padding:34px 30px; position:relative; border-left:1px solid var(--line)}
.step:first-child{border-left:none}
@media(max-width:880px){ .step{border-left:none; border-top:1px solid var(--line)} .step:first-child{border-top:none} }
.step .num{font-family:var(--serif); font-style:italic; font-size:2.8rem; color:var(--silver); line-height:1}
.step h3{font-size:1.4rem; margin:14px 0 8px}
.step p{font-size:.93rem; color:var(--ink-soft)}

.why-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:0}
.why{display:flex; gap:16px; align-items:flex-start; padding:28px 30px; border-top:1px solid var(--line); border-left:1px solid var(--line)}
.why:nth-child(-n+2){border-top:none}
.why:nth-child(odd){border-left:none}
@media(max-width:760px){ .why-grid{grid-template-columns:1fr} .why{border-left:none} .why:nth-child(2){border-top:1px solid var(--line)} }
.why .ic{width:42px;height:42px;flex:0 0 auto;color:var(--silver-deep)}
.why .ic svg{width:42px;height:42px;stroke-width:1.4}
.why strong{display:block; font-family:var(--serif); font-weight:500; font-size:1.3rem; margin-bottom:5px; color:var(--ink)}
.why p{font-size:.9rem; color:var(--ink-soft)}

/* values cards */
.mvv{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:40px}
.mvv-card{background:var(--paper); border:1px solid var(--line); border-radius:6px; padding:34px 30px; position:relative}
.mvv-card .ic{width:38px;height:38px;color:var(--silver-deep);margin-bottom:18px}
.mvv-card .ic svg{width:38px;height:38px;stroke-width:1.4}
.mvv-card h3{font-size:1.45rem; color:var(--ink); font-style:italic; margin-bottom:10px}
.mvv-card p{font-size:.93rem; color:var(--ink-soft)}
@media(max-width:880px){ .mvv{grid-template-columns:1fr} }

/* ============ PRACTICE-AREA CARDS (ICONS, not photos) ============ */
.svc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--line); border-radius:6px; overflow:hidden; background:var(--paper)}
@media(max-width:920px){ .svc-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .svc-grid{grid-template-columns:1fr} }
.svc-card{display:flex; flex-direction:column; padding:38px 34px 34px; position:relative;
  border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--paper);
  transition:background .35s, transform .35s}
.svc-card:hover{background:var(--bg-3)}
.svc-ic{width:46px; height:46px; color:var(--silver-deep); margin-bottom:22px}
.svc-ic svg{width:46px; height:46px; stroke-width:1.4; fill:none; stroke:currentColor; display:block}
.svc-card h3{font-size:1.5rem; margin-bottom:10px; color:var(--ink)}
.svc-card p{font-size:.92rem; color:var(--ink-soft); margin-bottom:18px; flex:1}
.svc-card .more{display:inline-flex; align-items:center; gap:.45em; font-size:.74rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink)}
.svc-card .more svg{width:1.1em; height:1.1em; stroke-width:2; transition:transform .3s}
.svc-card:hover .more svg{transform:translateX(5px)}
.svc-card .idx{position:absolute; top:26px; right:30px; font-family:var(--serif); font-style:italic; font-size:1rem; color:var(--silver)}
/* tidy outer borders */
.svc-grid .svc-card:nth-child(3n){border-right:none}
@media(max-width:920px){ .svc-grid .svc-card:nth-child(3n){border-right:1px solid var(--line)} .svc-grid .svc-card:nth-child(2n){border-right:none} }
@media(max-width:560px){ .svc-grid .svc-card{border-right:none} }

/* per-service top */
.svc-top{display:grid; grid-template-columns:1.2fr .8fr; gap:48px; align-items:center; margin-bottom:48px}
.svc-top .svc-head{margin-bottom:0}
.svc-head{max-width:760px; margin-bottom:44px}
.svc-head h2{font-size:clamp(2rem,3.4vw,2.7rem); margin-bottom:16px}
.svc-head p{color:var(--ink-soft); font-size:.99rem}
.svc-photo{position:relative}
.svc-photo img{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:6px; box-shadow:var(--shadow)}
.svc-photo::before{content:""; position:absolute; inset:-14px; border:1px solid var(--frame); border-radius:8px; z-index:-1}
@media(max-width:880px){ .svc-top{grid-template-columns:1fr; gap:30px} .svc-photo img{aspect-ratio:16/10} }
.svc-cta{margin-top:36px; display:flex; align-items:center; gap:22px; flex-wrap:wrap}

/* a checklist of sub-services */
.checks{display:grid; grid-template-columns:repeat(2,1fr); gap:14px 30px; margin:8px 0}
@media(max-width:680px){ .checks{grid-template-columns:1fr} }
.checks .ck{display:flex; gap:.7em; align-items:flex-start; font-size:.96rem; color:var(--ink)}
.checks .ck svg{width:18px; height:18px; color:var(--silver-deep); flex:0 0 auto; margin-top:.3em; stroke-width:2}

/* ============ FAQ ============ */
.faq-list{max-width:800px; margin:0 auto}
.faq{border-bottom:1px solid var(--line)}
.faq:first-child{border-top:1px solid var(--line)}
.faq summary{cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:20px; align-items:flex-start;
  padding:24px 4px; font-family:var(--serif); font-size:1.4rem; font-weight:500; color:var(--ink); line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary .x{flex:0 0 auto; width:26px; height:26px; display:grid; place-items:center; color:var(--silver-deep); transition:transform .3s}
.faq[open] summary .x{transform:rotate(45deg)}
.faq summary .x svg{width:18px;height:18px;stroke-width:1.6}
.faq .a{padding:0 4px 26px; color:var(--ink-soft); max-width:68ch}

/* ============ TEAM ============ */
.team-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px}
.team-card{position:relative}
.team-card .ph{aspect-ratio:3/4; border-radius:6px; background:var(--bg-2) center/cover no-repeat; border:1px solid var(--line); box-shadow:var(--shadow-sm)}
.team-card figcaption{padding:18px 4px 0}
.team-card figcaption strong{display:block; font-family:var(--serif); font-weight:500; font-size:1.35rem; color:var(--ink)}
.team-card figcaption span{font-size:.68rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--silver-deep)}
.team-card figcaption p{font-size:.84rem; color:var(--ink-soft); margin-top:8px; line-height:1.55}
@media(max-width:980px){ .team-grid{grid-template-columns:repeat(3,1fr)} }
@media(max-width:640px){ .team-grid{grid-template-columns:repeat(2,1fr)} }
.ph-blank{display:grid; place-items:center; background:var(--bg-2); border:1px solid var(--line);
  color:var(--silver-deep); font-family:var(--serif); font-style:italic; font-size:2.6rem}
.ph-card{position:relative}
.ph-card .frame-img{position:relative; border-radius:6px; overflow:hidden; box-shadow:var(--shadow)}
.ph-card .frame-img img{width:100%; aspect-ratio:4/5; object-fit:cover}
.ph-card::before{content:""; position:absolute; inset:-14px; border:1px solid var(--frame); border-radius:8px; z-index:-1; pointer-events:none}
.ph-card figcaption{margin-top:26px; font-size:.72rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-faint)}
/* framed feature video — same hairline treatment as .frame-img */
.ph-card .frame-vid{position:relative; border-radius:6px; overflow:hidden; box-shadow:var(--shadow); background:var(--bg-2)}
.ph-card .frame-vid video{display:block; width:100%; aspect-ratio:4/5; object-fit:cover}
.ph-card .frame-vid .vplay{position:absolute; left:14px; bottom:14px; z-index:2; display:flex; align-items:center; gap:.5em;
  padding:.5em .9em; border-radius:999px; font-size:.66rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:#fff; background:rgba(20,18,14,.4); border:1px solid rgba(255,255,255,.3);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); pointer-events:none}
.ph-card .frame-vid .vplay .dot{width:6px; height:6px; border-radius:50%; background:#9ad1a3}

/* ============ whyrow / standard pills ============ */
.whyrow{display:grid; grid-template-columns:1fr 1fr; gap:68px; align-items:center}
@media(max-width:880px){ .whyrow{grid-template-columns:1fr; gap:40px} }
.whyrow h2{font-size:clamp(2.2rem,4vw,3.1rem); margin-bottom:22px}
.whyrow p{color:var(--ink-soft); margin-bottom:14px}
.standard{margin-top:28px; display:flex; gap:10px; flex-wrap:wrap}
.std{font-family:var(--serif); font-style:italic; font-size:1.2rem; padding:.45em 1.3em; border-radius:3px;
  border:1px solid var(--frame); color:var(--silver-deep); background:var(--paper)}

/* ============ PROOF / GALLERY ============ */
.proof-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:18px}
.proof-grid img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:6px; border:1px solid var(--line); box-shadow:var(--shadow-sm)}
@media(max-width:880px){ .proof-grid{grid-template-columns:repeat(2,1fr); gap:12px} }
.duo{display:grid; grid-template-columns:1.2fr 1fr; gap:18px; margin-top:18px}
@media(max-width:880px){ .duo{grid-template-columns:1fr} }
.duo img{border-radius:6px; box-shadow:var(--shadow-sm); width:100%; height:100%; object-fit:cover; aspect-ratio:16/10; border:1px solid var(--line)}

/* photo band (the ONE place we go dark, for contrast/personality) */
.bark-band{position:relative; overflow:hidden; padding:108px 0; background:var(--ink); color:var(--bg)}
.bark-band .bg{position:absolute; inset:0; background-position:center; background-size:cover; opacity:.3}
.bark-band .bb-veil{position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,18,14,.6), rgba(20,18,14,.78))}
.bb-quote{position:relative; text-align:center; font-family:var(--serif); font-weight:500; color:var(--bg);
  font-size:clamp(2rem,3.8vw,3rem); line-height:1.25; padding:0 28px; max-width:26ch; margin:0 auto}
.bb-quote em{font-style:italic; color:#d8d2c5}
.bb-cite{position:relative; display:block; text-align:center; margin-top:24px; font-family:var(--sans);
  font-size:.72rem; letter-spacing:.3em; text-transform:uppercase; color:rgba(255,253,248,.6)}
@media(max-width:640px){ .bark-band{padding:72px 0} }

/* ============ CONSULT STRIP ============ */
.emr-strip{background:var(--ink); color:var(--bg); padding:56px 0}
.emr-strip .wrap{display:flex; gap:30px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.emr-strip h3{font-size:clamp(1.6rem,2.8vw,2.1rem); color:var(--bg)}
.emr-strip h3 em{color:#d8d2c5; font-style:italic}
.emr-strip p{color:rgba(255,253,248,.66); font-size:.96rem; max-width:54ch}
.emr-strip .btn{background:var(--bg); color:var(--ink); border-color:var(--bg); white-space:nowrap}
.emr-strip .btn:hover{transform:translateY(-2px); background:#fff}

/* ============ LOCATIONS / SUBURB GRID ============ */
.sub-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media(max-width:900px){ .sub-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:600px){ .sub-grid{grid-template-columns:1fr} }
.sub-grid.cols-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){ .sub-grid.cols-4{grid-template-columns:repeat(2,1fr)} }
@media(max-width:520px){ .sub-grid.cols-4{grid-template-columns:1fr} }
.sub-card{display:block; border-radius:6px; padding:30px 28px; background:var(--paper); border:1px solid var(--line);
  transition:transform .4s, border-color .4s, box-shadow .4s; position:relative}
.sub-card:hover{transform:translateY(-4px); border-color:var(--silver); box-shadow:var(--shadow-sm)}
.sub-card .reg{font-size:.64rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--silver-deep); margin-bottom:12px}
.sub-card h3{font-size:1.5rem; margin-bottom:8px; color:var(--ink)}
.sub-card p{font-size:.88rem; color:var(--ink-soft); margin-bottom:14px}
.sub-card .more{display:inline-flex; align-items:center; gap:.4em; font-size:.74rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink)}
.sub-card .more svg{width:1.1em; height:1.1em; stroke-width:2; transition:transform .3s}
.sub-card:hover .more svg{transform:translateX(4px)}

/* ============ RESOURCES / BLOG ============ */
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
@media(max-width:900px){ .blog-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:600px){ .blog-grid{grid-template-columns:1fr} }
.post-card{display:flex; flex-direction:column; border-radius:6px; overflow:hidden; background:var(--paper);
  border:1px solid var(--line); transition:transform .4s, box-shadow .4s}
.post-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-sm)}
.post-card .pic{aspect-ratio:16/10; overflow:hidden}
.post-card .pic img{width:100%; height:100%; object-fit:cover; transition:transform .6s}
.post-card:hover .pic img{transform:scale(1.05)}
.post-card .body{padding:24px 24px 28px; display:flex; flex-direction:column; flex:1}
.post-card .cat{font-size:.62rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--silver-deep); margin-bottom:12px}
.post-card .body h3{font-size:1.4rem; margin-bottom:8px; line-height:1.22; color:var(--ink)}
.post-card .body p{font-size:.86rem; color:var(--ink-soft); margin-bottom:16px; flex:1}
.post-card .meta{font-size:.72rem; color:var(--ink-faint)}
.feature-post{display:grid; grid-template-columns:1.05fr .95fr; gap:0; border-radius:6px; overflow:hidden;
  background:var(--paper); border:1px solid var(--line); margin-bottom:36px}
.feature-post .pic{min-height:340px; overflow:hidden}
.feature-post .pic img{width:100%; height:100%; object-fit:cover}
.feature-post .body{padding:46px; display:flex; flex-direction:column; justify-content:center}
.feature-post .cat{font-size:.62rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--silver-deep)}
.feature-post .body h2,.feature-post .body h3{font-size:clamp(1.7rem,3vw,2.3rem); margin:12px 0}
.feature-post .body p{color:var(--ink-soft); margin-bottom:18px}
@media(max-width:820px){ .feature-post{grid-template-columns:1fr} .feature-post .pic{min-height:220px} .feature-post .body{padding:30px} }
.post-card .more,.feature-post .more{display:inline-flex;align-items:center;gap:.45em;font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.post-card .more svg,.feature-post .more svg{width:1.1em;height:1.1em;stroke-width:2;transition:transform .3s}
.post-card:hover .more svg{transform:translateX(4px)}

/* ============ PRESS / IN THE MEDIA ============ */
.press-list{display:grid; gap:0; border-top:1px solid var(--line)}
.press-item{display:grid; grid-template-columns:auto 1fr auto; gap:24px; align-items:center;
  padding:28px 4px; border-bottom:1px solid var(--line); transition:background .3s}
.press-item:hover{background:var(--bg-3)}
.press-item .outlet{font-family:var(--serif); font-style:italic; font-size:1.2rem; color:var(--silver-deep); min-width:170px}
.press-item .pbody h3{font-size:1.4rem; color:var(--ink); margin-bottom:4px; line-height:1.2}
.press-item .pbody p{font-size:.9rem; color:var(--ink-soft)}
.press-item .pmeta{font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); white-space:nowrap; display:inline-flex; align-items:center; gap:.5em}
.press-item .pmeta svg{width:15px;height:15px;stroke-width:2}
@media(max-width:760px){ .press-item{grid-template-columns:1fr; gap:8px} .press-item .outlet{font-size:1.05rem} .press-item .pmeta{margin-top:6px} }

/* article */
.article-hero{position:relative; padding:170px 0 60px; overflow:hidden; background:var(--bg-2); border-bottom:1px solid var(--line-soft)}
.article-hero .wrap{position:relative; max-width:820px}
.article-hero .cat{font-size:.66rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:var(--silver-deep); margin-bottom:16px}
.article-hero h1{font-size:clamp(2.3rem,4.6vw,3.4rem); margin-bottom:18px; max-width:26ch}
.article-meta{font-size:.8rem; color:var(--ink-faint); display:flex; gap:18px; flex-wrap:wrap}
.article-body{padding:64px 0 90px}
.share-row{display:flex; align-items:center; gap:12px; margin:44px 0 0; padding-top:28px; border-top:1px solid var(--line); flex-wrap:wrap}
.share-row .lbl{font-size:.7rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-faint)}
.tagchips{display:flex; gap:8px; flex-wrap:wrap}
.tagchip{font-size:.74rem; padding:.4em 1em; border-radius:3px; background:var(--paper); border:1px solid var(--line); color:var(--ink-soft)}
.author-box{display:flex; gap:18px; align-items:center; background:var(--paper); border:1px solid var(--line);
  border-radius:6px; padding:24px; margin-top:38px}
.author-box .av{width:56px; height:56px; border-radius:50%; flex:0 0 auto; background:var(--bg-2);
  border:1px solid var(--line); display:grid; place-items:center; color:var(--silver-deep); font-family:var(--serif); font-style:italic; font-size:1.5rem}
.author-box strong{display:block; font-family:var(--serif); font-weight:500; font-size:1.3rem; color:var(--ink)}
.author-box span{font-size:.82rem; color:var(--ink-soft)}

/* ============ REVIEWS ============ */
.rev-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.rev-card{background:var(--paper); border:1px solid var(--line); border-radius:6px; padding:32px 30px; display:flex; flex-direction:column}
.rev-stars{color:var(--silver-deep); letter-spacing:.2em; font-size:.95rem; margin-bottom:16px}
.rev-card blockquote{font-size:.96rem; line-height:1.65; margin-bottom:18px; color:var(--ink); flex:1}
.rev-card.feat blockquote{font-family:var(--serif); font-style:italic; font-size:1.35rem; line-height:1.4}
.rev-card figcaption{font-size:.78rem; color:var(--ink-faint); display:flex; align-items:center; gap:11px; margin-top:auto}
.rev-card .ava{width:36px; height:36px; border-radius:50%; flex:0 0 auto; background:var(--bg-2);
  border:1px solid var(--line); color:var(--silver-deep); display:grid; place-items:center; font-weight:800; font-size:.8rem; font-family:var(--sans)}
.rev-card figcaption b{color:var(--ink); font-weight:700; font-family:var(--sans)}
.rev-card figcaption .gw{margin-left:auto; font-size:.66rem; color:var(--ink-faint)}
@media(max-width:880px){ .rev-grid{grid-template-columns:1fr} }
.rev-note{margin-top:26px; font-size:.74rem; color:var(--ink-faint); text-align:center}

.gscore{display:flex; align-items:center; justify-content:center; gap:30px; flex-wrap:wrap; padding:40px;
  background:var(--paper); border:1px solid var(--line); border-radius:6px; margin-bottom:48px}
.gscore .big{font-family:var(--serif); font-style:italic; font-size:3.6rem; color:var(--ink); line-height:1}
.gscore .gstars{color:var(--silver-deep); font-size:1.4rem; letter-spacing:.15em}
.gscore .glabel{font-size:.84rem; color:var(--ink-soft)}
.gscore .gdiv{width:1px; height:56px; background:var(--line)}
.gscore .gbrand{display:flex; align-items:center; gap:8px; font-size:.9rem; color:var(--ink-soft)}
@media(max-width:560px){ .gscore .gdiv{display:none} }

/* ============ FINAL CTA ============ */
.final{background:var(--bg-2); border-top:1px solid var(--line-soft); text-align:center; padding:112px 0}
.final h2{font-size:clamp(2.3rem,4.4vw,3.4rem); margin-bottom:18px}
.final p{color:var(--ink-soft); max-width:54ch; margin:0 auto 32px}

/* Bottom dock — slim, translucent glass; both buttons share the glass style,
   Book a consultation kept to a single line. */
.dock{position:fixed; left:14px; right:14px; bottom:12px; z-index:55; display:none; gap:8px;
  padding:6px; border-radius:14px; background:rgba(251,249,243,.62);
  backdrop-filter:blur(22px) saturate(1.35); -webkit-backdrop-filter:blur(22px) saturate(1.35);
  border:1px solid rgba(255,255,255,.5); box-shadow:0 10px 34px -16px rgba(35,30,18,.4);
  transform:translateY(180%); transition:transform .45s cubic-bezier(.22,1,.36,1)}
.dock.show{transform:none}
.dock .btn{flex:1; justify-content:center; padding:.72em .6em; margin:0; border-radius:10px;
  font-size:.86rem; font-weight:700; white-space:nowrap; min-width:0;
  background:rgba(255,253,248,.34); border:1px solid rgba(255,255,255,.55); color:var(--ink);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); box-shadow:none}
.dock .btn svg{width:1em; height:1em; flex:0 0 auto}
.dock .btn:hover{background:rgba(255,253,248,.55)}
@media(max-width:680px){ .dock{display:flex} }
@media(max-width:360px){ .dock .btn{font-size:.8rem; padding:.72em .4em} }

/* two-col */
.two-col{display:grid; grid-template-columns:1.1fr .9fr; gap:52px; align-items:start}
.two-col-even{grid-template-columns:1fr 1fr}
.two-col-wide{grid-template-columns:1.3fr .7fr}
@media(max-width:860px){ .two-col, .two-col-even, .two-col-wide{grid-template-columns:1fr; gap:34px} }

/* contact info */
.cinfo{display:grid; gap:0}
.cinfo .row{display:flex; gap:16px; align-items:flex-start; padding:20px 0; border-bottom:1px solid var(--line)}
.cinfo .row > div{display:flex; flex-direction:column}
.cinfo .row:first-child{border-top:1px solid var(--line)}
.cinfo .ic{width:42px; height:42px; flex:0 0 auto; display:grid; place-items:center; color:var(--silver-deep)}
.cinfo .ic svg{width:24px; height:24px; stroke-width:1.5}
.cinfo .lbl{font-size:.64rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:4px}
.cinfo .val{font-size:1.04rem; color:var(--ink)}
.cinfo .val a{color:var(--ink); transition:color .2s}
.cinfo .val a:hover{color:var(--silver-deep)}
.mapwrap{border-radius:6px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-sm)}
.mapwrap iframe{width:100%; height:360px; border:0; filter:grayscale(.5) contrast(1.05)}

/* ============ FOOTER ============ */
footer{background:var(--bg-2); color:var(--ink-soft); padding:72px 0 48px; font-size:.9rem; border-top:1px solid var(--line)}
footer .fcols{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:44px; margin-bottom:48px}
@media(max-width:900px){ footer .fcols{grid-template-columns:1fr 1fr} }
@media(max-width:560px){ footer .fcols{grid-template-columns:1fr} }
footer .flogo{height:48px; width:auto; margin-bottom:18px}
footer .blurb{color:var(--ink-soft); max-width:36ch}
footer h4{font-size:.64rem; font-weight:700; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:16px}
footer ul{list-style:none}
footer li{margin-bottom:9px; color:var(--ink-soft)}
footer li a{transition:color .2s} footer li a:hover{color:var(--ink)}
.fcontact{display:flex; align-items:flex-start; gap:.6em; margin-bottom:11px; color:var(--ink-soft)}
.fcontact svg{width:16px; height:16px; color:var(--silver-deep); flex:0 0 auto; margin-top:.2em; stroke-width:1.6}
.follow{display:flex; align-items:center; gap:10px; margin-top:16px}
.soc{width:38px; height:38px; border-radius:4px; display:grid; place-items:center; color:var(--ink-soft);
  background:var(--paper); border:1px solid var(--line); transition:color .3s, border-color .3s}
.soc:hover{color:var(--ink); border-color:var(--silver)}
.soc svg{width:16px; height:16px}
.foot-base{border-top:1px solid var(--line); padding-top:28px; display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center; font-size:.78rem; color:var(--ink-faint)}
.disclaimer{font-size:.72rem; color:var(--ink-faint); max-width:80ch; margin-top:22px; line-height:1.6}
.built-by{display:inline-flex; align-items:center; gap:.55em; font-size:.68rem; font-weight:700; line-height:1;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); text-decoration:none; transition:color .3s}
.built-by b{color:var(--ink-soft); font-weight:800; letter-spacing:.22em}
.built-by:hover{color:var(--ink)}
.foot-privacy{font-size:.74rem; color:var(--ink-faint); text-decoration:none; letter-spacing:.02em; transition:color .3s; order:2}
.foot-privacy:hover{color:var(--ink); text-decoration:underline}
/* privacy / legal body: comfortable reading, clear section breaks */
.privacy-body h2{font-size:clamp(1.5rem,2.4vw,1.9rem); margin:44px 0 14px; padding-top:8px; border-top:1px solid var(--line-soft)}
.privacy-body h2:first-of-type{border-top:none; padding-top:0}
.privacy-body h3{font-size:1.25rem; margin:28px 0 10px; color:var(--ink)}
.privacy-body ul{margin:0 0 18px 1.2em}
.privacy-body a{color:var(--ink); text-decoration:underline; text-underline-offset:2px}
.privacy-body strong{color:var(--ink)}
.form-privacy{margin-top:12px; line-height:1.55; color:var(--ink-faint)}
.form-privacy a{color:var(--ink-soft); text-decoration:underline}

/* ============ PASHA IO — lead magnet tool ============ */
.ai-hero{position:relative; padding:172px 0 70px; background:var(--bg-2); border-bottom:1px solid var(--line-soft); overflow:hidden}
.ai-hero::after{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(90% 70% at 80% 0%, rgba(138,143,151,.16), transparent 55%)}
.ai-hero .wrap{position:relative; max-width:880px; text-align:center}
.ai-badge{display:inline-flex; align-items:center; gap:.55em; padding:.5em 1.1em; border-radius:3px; margin-bottom:22px;
  background:var(--paper); border:1px solid var(--silver); font-size:.7rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--silver-deep)}
.ai-badge svg{width:15px;height:15px;stroke-width:1.6}
.ai-hero h1{font-size:clamp(2.6rem,5vw,4rem); margin-bottom:18px}
.ai-hero p{color:var(--ink-soft); font-size:1.1rem; max-width:60ch; margin:0 auto}
.ai-stage{max-width:780px; margin:0 auto}
.ai-card{background:var(--paper); border:1px solid var(--line); border-radius:8px; box-shadow:var(--shadow); overflow:hidden}
.ai-steps{display:flex; border-bottom:1px solid var(--line); background:var(--bg-3)}
.ai-step{flex:1; padding:16px 18px; text-align:center; font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); position:relative}
.ai-step.on{color:var(--ink)}
.ai-step.done{color:var(--silver-deep)}
.ai-step:not(:last-child)::after{content:""; position:absolute; right:0; top:14px; bottom:14px; width:1px; background:var(--line)}
.ai-step .n{font-family:var(--serif); font-style:italic; font-size:1.1rem; margin-right:.4em; text-transform:none; letter-spacing:0}
.ai-pane{padding:36px}
.ai-pane[hidden]{display:none}
/* dropzone */
.dropzone{border:1.5px dashed var(--frame); border-radius:6px; padding:48px 28px; text-align:center; cursor:pointer; transition:border-color .25s, background .25s; background:var(--bg-3)}
.dropzone:hover, .dropzone.drag{border-color:var(--silver); background:var(--paper)}
.dropzone .dz-ic{width:46px; height:46px; margin:0 auto 16px; color:var(--silver-deep)}
.dropzone .dz-ic svg{width:46px;height:46px;stroke-width:1.4}
.dropzone strong{display:block; font-family:var(--serif); font-size:1.4rem; font-weight:500; margin-bottom:6px; color:var(--ink)}
.dropzone span{font-size:.86rem; color:var(--ink-soft)}
.dropzone .pick{color:var(--ink); text-decoration:underline; text-underline-offset:3px}
.filelist{display:grid; gap:10px; margin-top:20px}
.filerow{display:flex; align-items:center; gap:14px; padding:13px 16px; border:1px solid var(--line); border-radius:5px; background:var(--bg-3)}
.filerow .fic{width:34px;height:34px;flex:0 0 auto;display:grid;place-items:center;color:var(--silver-deep);background:var(--paper);border:1px solid var(--line);border-radius:4px}
.filerow .fic svg{width:18px;height:18px;stroke-width:1.6}
.filerow .fmeta{flex:1; min-width:0}
.filerow .fname{font-size:.9rem; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.filerow .fsize{font-size:.74rem; color:var(--ink-faint)}
.filerow .fx{width:30px;height:30px;flex:0 0 auto;border:none;background:none;color:var(--ink-faint);cursor:pointer;border-radius:4px;display:grid;place-items:center;transition:color .2s,background .2s}
.filerow .fx:hover{color:var(--ink);background:var(--bg-2)}
.filerow .fx svg{width:16px;height:16px;stroke-width:2}
.ai-note{font-size:.74rem; color:var(--ink-faint); margin-top:16px; text-align:center}
/* processing */
.ai-proc{text-align:center; padding:30px 10px}
.ai-spinner{width:54px;height:54px;margin:0 auto 22px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--silver-deep);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.ai-proc h3{font-family:var(--serif);font-weight:500;font-size:1.6rem;margin-bottom:8px}
.ai-proc p{color:var(--ink-soft);font-size:.92rem}
.ai-proclog{margin-top:22px;display:grid;gap:8px;max-width:380px;margin-left:auto;margin-right:auto;text-align:left}
.ai-proclog .pl{display:flex;align-items:center;gap:.7em;font-size:.86rem;color:var(--ink-faint);opacity:.4;transition:opacity .3s,color .3s}
.ai-proclog .pl.on{opacity:1;color:var(--ink)}
.ai-proclog .pl svg{width:16px;height:16px;color:var(--silver-deep);stroke-width:2}
/* gate */
.ai-gate .fhead{font-family:var(--serif);font-size:1.7rem;margin-bottom:4px}
.ai-gate .fsub{font-size:.9rem;color:var(--ink-soft);margin-bottom:22px}
/* result summary */
.ai-result{}
.ai-result .doc{border:1px solid var(--line); border-radius:6px; overflow:hidden; box-shadow:var(--shadow-sm)}
.ai-result .doc-head{display:flex; align-items:center; gap:14px; padding:20px 26px; background:var(--ink); color:var(--bg)}
.ai-result .doc-head img{height:30px;width:auto}
.ai-result .doc-head .dh{flex:1}
.ai-result .doc-head .dh strong{display:block;font-family:var(--serif);font-size:1.15rem;font-weight:500}
.ai-result .doc-head .dh span{font-size:.72rem;color:rgba(255,253,248,.6);letter-spacing:.08em}
.ai-result .doc-body{padding:32px 30px; background:var(--paper)}
.ai-result .doc-body h4{font-family:var(--serif);font-size:1.3rem;font-weight:500;margin:24px 0 10px;color:var(--ink)}
.ai-result .doc-body h4:first-child{margin-top:0}
.ai-result .doc-body p{color:var(--ink-soft);font-size:.94rem;margin-bottom:12px}
.ai-result .doc-body ul{margin:0 0 14px 1.1em;color:var(--ink-soft);font-size:.94rem}
.ai-result .doc-body li{margin-bottom:7px}
.ai-result .doc-body .flag{display:flex;gap:.7em;align-items:flex-start;padding:14px 16px;border:1px solid var(--line);border-radius:5px;background:var(--bg-3);margin-bottom:10px;font-size:.9rem}
.ai-result .doc-body .flag svg{width:18px;height:18px;color:var(--silver-deep);flex:0 0 auto;margin-top:.2em;stroke-width:1.8}
.ai-emailed{display:flex;gap:.7em;align-items:center;justify-content:center;margin-top:22px;padding:16px;border:1px solid var(--silver);border-radius:5px;background:var(--bg-3);font-size:.92rem;color:var(--ink)}
.ai-emailed svg{width:20px;height:20px;color:var(--silver-deep);stroke-width:2}
.ai-disc{font-size:.74rem;color:var(--ink-faint);text-align:center;margin-top:20px;max-width:60ch;margin-left:auto;margin-right:auto}

/* ============ CHAT WIDGET (light, Pasha-themed — like Eden, ivory/charcoal) ============ */
.chat-fab{position:fixed; right:20px; bottom:20px; z-index:80; display:flex; align-items:center; gap:10px;
  padding:13px 20px 13px 16px; border-radius:999px; border:1px solid var(--ink); cursor:pointer;
  background:var(--ink); color:var(--bg); font:inherit; font-weight:700; font-size:.88rem;
  box-shadow:0 16px 40px -16px rgba(35,30,18,.5); transition:transform .3s, box-shadow .3s}
.chat-fab:hover{transform:translateY(-2px) scale(1.02); box-shadow:0 20px 48px -16px rgba(35,30,18,.6)}
.chat-fab svg{width:21px; height:21px}
.chat-fab .pulse{position:absolute; top:-2px; right:-2px; width:13px; height:13px; border-radius:50%;
  background:var(--silver); border:2px solid var(--bg); animation:chatpulse 2s ease-in-out infinite}
@keyframes chatpulse{0%,100%{box-shadow:0 0 0 0 rgba(138,143,151,.5)} 50%{box-shadow:0 0 0 7px rgba(138,143,151,0)}}
.chat-panel{position:fixed; right:20px; bottom:20px; z-index:81; width:390px; max-width:calc(100vw - 40px);
  height:580px; max-height:calc(100vh - 40px); border-radius:12px; overflow:hidden;
  background:var(--bg); border:1px solid var(--line); box-shadow:0 40px 90px -30px rgba(35,30,18,.45);
  display:flex; flex-direction:column; transform:translateY(20px) scale(.98); opacity:0; visibility:hidden;
  transition:transform .35s cubic-bezier(.22,1,.36,1), opacity .35s, visibility .35s, margin .35s}
.chat-panel.open{transform:none; opacity:1; visibility:visible; margin-bottom:16px}
.chat-head{display:flex; align-items:center; gap:12px; padding:16px 18px; background:var(--ink); color:var(--bg)}
.chat-head .ava{width:40px; height:40px; border-radius:50%; flex:0 0 auto; background:var(--bg); color:var(--ink);
  display:grid; place-items:center; font-family:var(--serif); font-style:italic; font-weight:600; font-size:1.25rem}
.chat-head .who strong{display:block; font-size:1.05rem; color:var(--bg); font-family:var(--serif); font-weight:500}
.chat-head .who span{font-size:.72rem; color:rgba(255,253,248,.7); display:flex; align-items:center; gap:5px}
.chat-head .who span::before{content:""; width:7px; height:7px; border-radius:50%; background:#7fc18a; display:inline-block}
.chat-head .x{margin-left:auto; width:32px; height:32px; border-radius:50%; border:1px solid rgba(255,253,248,.25);
  background:rgba(255,253,248,.08); color:var(--bg); cursor:pointer; display:grid; place-items:center}
.chat-head .x svg{width:18px; height:18px}
.chat-log{flex:1; overflow-y:auto; padding:18px 16px; display:flex; flex-direction:column; gap:12px; background:var(--bg-3); min-height:200px}
.cmsg{display:flex; gap:9px; align-items:flex-end; max-width:88%}
.cmsg.me{align-self:flex-end}
.cmsg.bot{align-self:flex-start}
.cmsg .cava{width:26px; height:26px; border-radius:50%; flex:0 0 auto; background:var(--ink); color:var(--bg);
  display:grid; place-items:center; font-family:var(--serif); font-style:italic; font-weight:600; font-size:.9rem}
.cbub{padding:11px 15px; border-radius:14px; font-size:.92rem; line-height:1.5}
.cmsg.bot .cbub{background:var(--paper); border:1px solid var(--line); color:var(--ink); border-bottom-left-radius:5px}
.cmsg.me .cbub{background:var(--ink); color:var(--bg); border-bottom-right-radius:5px}
.cbub a{color:inherit}
.cbub a.cbtn{display:inline-flex; align-items:center; gap:.5em; margin-top:4px; padding:.6em 1.2em; border-radius:4px;
  background:var(--ink); color:var(--bg); font-weight:700; font-size:.85rem; text-decoration:none}
.cmsg.me .cbub a.cbtn, .cmsg.bot .cbub a.cbtn{border:1px solid var(--ink)}
/* chat button that opens the form modal (matches .cbtn, but it's a <button>) */
.cbub button.cbtn-form{display:inline-flex; align-items:center; gap:.5em; margin-top:2px; padding:.7em 1.3em; border-radius:5px;
  background:var(--ink); color:var(--bg); border:1px solid var(--ink); font:inherit; font-weight:700; font-size:.85rem; cursor:pointer;
  transition:transform .2s, box-shadow .2s}
.cbub button.cbtn-form:hover{transform:translateY(-1px); box-shadow:0 10px 24px -12px rgba(35,30,18,.5)}

/* ============ CONTACT FORM MODAL (popup) ============ */
.pf-modal{position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center;
  padding:20px; visibility:hidden; opacity:0; transition:opacity .3s, visibility .3s}
.pf-modal.open{visibility:visible; opacity:1}
.pf-backdrop{position:absolute; inset:0; background:rgba(20,18,14,.55); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px)}
.pf-card{position:relative; z-index:1; width:min(480px,100%); max-height:calc(100dvh - 40px); overflow-y:auto;
  -webkit-overflow-scrolling:touch; background:var(--paper); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 44px 100px -30px rgba(35,30,18,.5); transform:translateY(18px) scale(.98);
  transition:transform .4s cubic-bezier(.22,1,.36,1)}
.pf-modal.open .pf-card{transform:none}
.pf-x{position:absolute; top:12px; right:12px; z-index:2; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; background:var(--bg-2); border:1px solid var(--line); color:var(--ink); cursor:pointer}
.pf-x svg{width:17px; height:17px}
.pf-x:hover{background:var(--bg-3)}
.pf-body{padding:34px 30px 30px}
.pf-head{font-family:var(--serif); font-size:1.7rem; line-height:1.15; color:var(--ink); margin-bottom:6px}
.pf-sub{font-size:.92rem; color:var(--ink-soft); margin-bottom:20px}
.pf-form{display:flex; flex-direction:column}
.pf-form label{font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--silver-deep); margin:14px 0 6px}
.pf-form input, .pf-form select, .pf-form textarea{width:100%; padding:.85em 1em; border:1px solid var(--line); border-radius:8px;
  background:var(--bg-3); font:inherit; font-size:1rem; color:var(--ink); -webkit-appearance:none; appearance:none}
.pf-form textarea{resize:vertical; min-height:76px}
.pf-form input:focus, .pf-form select:focus, .pf-form textarea:focus{outline:none; border-color:var(--silver); background:var(--paper)}
.pf-form .pf-submit{margin-top:20px; width:100%; justify-content:center}
.pf-micro{margin-top:12px; text-align:center; font-size:.74rem; color:var(--ink-faint)}
.pf-done{text-align:center; padding:14px 6px}
.pf-done .pf-tick{width:56px; height:56px; margin:0 auto 16px; border-radius:50%; display:grid; place-items:center;
  background:var(--bg-2); border:1px solid var(--silver); color:var(--silver-deep)}
.pf-done .pf-tick svg{width:26px; height:26px}
.pf-done p{color:var(--ink-soft); margin-top:8px}
body.pf-lock{overflow:hidden}

/* ============ MOBILE REFINEMENTS (app-like, centered chat) ============ */
@media(max-width:680px){
  /* belt-and-braces: nothing may push the page sideways */
  .wrap, .nav-inner{ max-width:100%; }
  section, header, footer{ max-width:100%; overflow-x:clip; }
  /* hero chat + its expanded conversation stay centered */
  .hero-search{ width:100%; max-width:520px; margin-left:auto; margin-right:auto; }
  .hero-convo{ width:100%; max-width:520px; margin-left:auto; margin-right:auto; }
  .hc-panel, .words{ text-align:left; }
  .words{ max-width:520px; margin-left:auto; margin-right:auto; }
  .q-log, #qLog, .chat-log{ scroll-behavior:smooth; }
  /* chat bubbles: comfortable width, centered column */
  .words .q-log .cmsg{ max-width:96%; }
  /* keep the form modal card from ever exceeding the viewport */
  .pf-card{ width:100%; }
  /* leave room above the dock so content isn't hidden behind it */
  footer{ padding-bottom:96px; }
}
.cbub.typing{display:flex; gap:4px; padding:14px}
.cbub.typing i{width:6px; height:6px; border-radius:50%; background:var(--silver); animation:ctype 1.2s infinite}
.cbub.typing i:nth-child(2){animation-delay:.2s} .cbub.typing i:nth-child(3){animation-delay:.4s}
@keyframes ctype{0%,60%,100%{opacity:.25; transform:translateY(0)} 30%{opacity:1; transform:translateY(-3px)}}
.cchips{display:flex; flex-wrap:wrap; gap:8px; align-self:flex-start; max-width:90%}
.cchip{padding:.5em 1em; border-radius:999px; background:var(--bg-2); border:1px solid var(--line);
  color:var(--ink-soft); font:inherit; font-size:.82rem; font-weight:600; cursor:pointer; transition:all .2s}
.cchip:hover{background:var(--paper); border-color:var(--ink); color:var(--ink)}
.chat-input{display:flex; gap:8px; padding:12px; background:var(--bg); border-top:1px solid var(--line)}
.chat-input input{flex:1; padding:.7em 1em; border-radius:999px; border:1px solid var(--line);
  background:var(--bg-3); color:var(--ink); font:inherit; font-size:.9rem}
.chat-input input:focus{outline:none; border-color:var(--silver); box-shadow:0 0 0 3px rgba(138,143,151,.16)}
.chat-input button{width:42px; height:42px; flex:0 0 auto; border-radius:50%; border:none; background:var(--ink);
  color:var(--bg); cursor:pointer; display:grid; place-items:center; transition:background .2s, transform .2s}
.chat-input button:hover{background:#34373d; transform:scale(1.05)}
.chat-input button svg{width:18px; height:18px}
@media(max-width:560px){ .chat-fab{right:14px; bottom:14px} .chat-fab .lbl{display:none} .chat-fab{padding:13px}
  .chat-panel{right:8px; left:8px; bottom:8px; width:auto; height:calc(100vh - 16px)} }
body.dock-on .chat-fab{bottom:86px}

@media(prefers-reduced-motion:reduce){ *{animation-duration:.001s !important} }

/* default: print-only logo hidden, light logo shown (on-screen dark header) */
.doc-logo-print{display:none}

/* ============ PRINT — Pasha IO summary as a clean document ============ */
@media print{
  /* hide everything except the summary document */
  body * { visibility:hidden !important; }
  #paneResult, #paneResult * { visibility:visible !important; }
  .no-print, .ai-actions, .ai-disc, .nav, .dock, .drawer, footer, .ai-steps, .ai-hero { display:none !important; }
  /* lift the result to the top of the page */
  #paneResult{ position:absolute !important; left:0; top:0; width:100%; margin:0; padding:0; }
  html, body{ background:#fff !important; color:#000 !important; }
  @page{ margin:18mm 16mm; }
  /* the document card: flat, no shadows, black on white */
  #paneResult .doc{ box-shadow:none !important; border:none !important; border-radius:0 !important; background:#fff !important; max-width:100% !important; }
  #paneResult .doc-head{ background:#fff !important; border-bottom:1.5px solid #111 !important; padding:0 0 14px !important; display:flex; align-items:center; gap:14px; }
  /* swap to black logo for white paper */
  .doc-logo-light{ display:none !important; }
  .doc-logo-print{ display:block !important; height:38px !important; width:auto !important; filter:none !important; }
  #paneResult .doc-head .dh strong{ color:#111 !important; font-size:1.05rem; }
  #paneResult .doc-head .dh span{ color:#444 !important; }
  #paneResult .doc-body{ padding:18px 0 0 !important; color:#111 !important; }
  #paneResult .doc-body h4{ color:#111 !important; margin:16px 0 6px; font-size:1rem; border-bottom:none; }
  #paneResult .doc-body p, #paneResult .doc-body li{ color:#222 !important; font-size:.95rem; line-height:1.5; }
  #paneResult .flag{ background:#f6f6f4 !important; border:1px solid #ddd !important; color:#222 !important; }
  /* footer line on the printed page */
  #paneResult .doc-body::after{
    content:"Prepared by Pasha IO · Pasha Legal · (03) 9848 7275 · pashalegal.com.au — General information only, not legal advice.";
    display:block; margin-top:26px; padding-top:12px; border-top:1px solid #ccc;
    font-size:.72rem; color:#666; }
}

/* =====================================================================
   V5 additions — photo-light rebuild.
   Toby (Pasha Legal Marketing, 24 Jun): photos repeat / look random.
   Direction (Tim): use each photo ONCE, then icons or nicely-designed
   text/headline layouts everywhere else. These are the shared photo-less
   primitives the pages use in place of the repeated city-NN images.
   ===================================================================== */

/* --- Icon card: a .post-card / resource card whose media panel is an
   on-brand icon tile instead of a repeated photo. Drop-in: replace the
   <div class="pic"><img></div> with <div class="pic-ico"><span data-ico="key"></span></div> --- */
.post-card .pic-ico,
.card-ico .pic-ico{
  aspect-ratio:16/10; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(120% 140% at 18% 0%, rgba(255,253,248,.9), rgba(239,233,221,.55)),
    linear-gradient(135deg, var(--bg-2), var(--bg-3));
  border-bottom:1px solid var(--line-soft); position:relative; overflow:hidden;
}
.post-card .pic-ico::after,
.card-ico .pic-ico::after{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(45deg, transparent 0 13px, rgba(108,114,123,.045) 13px 14px);
  pointer-events:none;
}
.post-card .pic-ico span,
.card-ico .pic-ico span{ width:54px; height:54px; color:var(--silver-deep); position:relative; z-index:1; }
.post-card .pic-ico span svg,
.card-ico .pic-ico span svg{ width:54px; height:54px; stroke-width:1.35; fill:none; stroke:currentColor; display:block; }
.post-card:hover .pic-ico span{ color:var(--ink); transition:color .4s; }

/* subtle monogram behind resource icon tiles, keeps them from feeling empty */
.post-card .pic-ico[data-mono]::before{
  content:attr(data-mono); position:absolute; right:-6px; bottom:-30px; z-index:0;
  font-family:var(--serif); font-style:italic; font-size:8rem; line-height:1;
  color:rgba(108,114,123,.08); letter-spacing:-.03em;
}

/* --- Decorative text hero: a photo-free page/section header that still has
   presence — big serif headline, hairline rule, kicker, faint index numeral.
   Used where a page previously leaned on a random city-NN photo. --- */
.text-hero{ position:relative; padding:96px 0 68px; border-bottom:1px solid var(--line-soft);
  background:linear-gradient(180deg, var(--bg-3), var(--bg)); overflow:hidden; }
.text-hero .th-ico,
.article-hero .th-ico{ display:block; width:52px; height:52px; color:var(--silver-deep); margin-bottom:22px; }
.text-hero .th-ico svg,
.article-hero .th-ico svg{ width:52px; height:52px; stroke-width:1.3; fill:none; stroke:currentColor; }
.text-hero h1{ font-size:clamp(2.4rem,5.4vw,4rem); line-height:1.02; letter-spacing:-.01em; }
.text-hero .lede{ max-width:56ch; margin-top:20px; font-size:1.06rem; color:var(--ink-soft); }
.text-hero .th-num{ position:absolute; top:40px; right:6%; font-family:var(--serif); font-style:italic;
  font-size:clamp(4rem,12vw,9rem); color:rgba(108,114,123,.09); line-height:1; user-select:none; z-index:0; }
.text-hero .wrap{ position:relative; z-index:1; }
.text-hero .th-rule{ width:64px; height:2px; background:var(--silver); margin:26px 0 0; }

/* --- Feature block that used a framed photo but should now be photo-free:
   a serif pull-panel with an icon + supporting checklist (used for Pasha IO
   feature, "why us", etc. where the old .ph-card image repeated). --- */
.brand-panel{ position:relative; border-radius:var(--rad); padding:44px 40px;
  background:linear-gradient(150deg, var(--bg-2), var(--bg-3)); border:1px solid var(--line);
  box-shadow:var(--shadow-sm); overflow:hidden; }
.brand-panel::before{ content:""; position:absolute; inset:-1px; border-radius:var(--rad);
  border:1px solid var(--frame); margin:12px; pointer-events:none; opacity:.5; }
.brand-panel .bp-ico{ width:60px; height:60px; color:var(--silver-deep); margin-bottom:20px; }
.brand-panel .bp-ico svg{ width:60px; height:60px; stroke-width:1.3; fill:none; stroke:currentColor; }
.brand-panel h3{ font-size:1.7rem; margin-bottom:10px; }
.brand-panel p{ color:var(--ink-soft); }
.brand-panel .bp-mono{ position:absolute; right:-10px; bottom:-40px; font-family:var(--serif);
  font-style:italic; font-size:11rem; line-height:1; color:rgba(108,114,123,.07); z-index:0; }

/* --- Review placeholder tile: an empty, on-brand "space for more reviews"
   card so the reviews section reads as fuller / a living collection
   (Toby: add space for more reviews so it looks more complete/credible). --- */
.rev-card.rev-empty{ display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; border:1px dashed var(--frame); background:transparent; box-shadow:none;
  color:var(--ink-faint); min-height:200px; gap:12px; }
.rev-card.rev-empty .re-ico{ width:34px; height:34px; color:var(--silver); }
.rev-card.rev-empty .re-ico svg{ width:34px; height:34px; stroke-width:1.4; fill:none; stroke:currentColor; }
.rev-card.rev-empty span{ font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; }
.rev-card.rev-empty small{ font-size:.86rem; letter-spacing:0; text-transform:none; color:var(--ink-dim); max-width:22ch; }

/* --- Team member card: polished, finished-looking placeholder with a serif
   monogram avatar (no random photo) + name/role + "photo & bio to come" note.
   (Toby: team section looks unfinished — make it look complete.) --- */
.team-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
@media(max-width:900px){ .team-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .team-grid{ grid-template-columns:1fr; } }
.tm-card{ border:1px solid var(--line); border-radius:var(--rad); background:var(--paper);
  padding:32px 28px 28px; text-align:center; position:relative; box-shadow:var(--shadow-sm); }
.tm-avatar{ width:96px; height:96px; margin:0 auto 20px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-family:var(--serif);
  font-size:2.1rem; color:var(--silver-deep); background:linear-gradient(150deg,var(--bg-2),var(--bg-3));
  border:1px solid var(--frame); }
.tm-card h3{ font-size:1.4rem; margin-bottom:4px; }
.tm-card .role{ font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--silver-deep); }
.tm-card p{ font-size:.9rem; color:var(--ink-soft); margin-top:14px; }
.tm-card .tm-note{ margin-top:16px; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); }

/* --- Framed ICON PANEL replacing a body feature photo (.svc-photo on service
   pages, .ph-card on area/feature blocks). Same hairline frame, no image. --- */
.svc-photo.ico-panel,
.ph-card.ico-panel{ display:flex; align-items:center; justify-content:center; }
.svc-photo.ico-panel .panel,
.ph-card.ico-panel .panel{
  position:relative; width:100%; aspect-ratio:4/5; border-radius:6px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(255,253,248,.9), rgba(239,233,221,.6)),
    linear-gradient(150deg, var(--bg-2), var(--bg-3));
  border:1px solid var(--line); overflow:hidden; text-align:center; padding:34px;
}
@media(max-width:880px){ .svc-photo.ico-panel .panel{ aspect-ratio:16/10; } }
.svc-photo.ico-panel .panel::after,
.ph-card.ico-panel .panel::after{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(45deg, transparent 0 15px, rgba(108,114,123,.04) 15px 16px);
  pointer-events:none;
}
.svc-photo.ico-panel .panel .p-ico,
.ph-card.ico-panel .panel .p-ico{ width:72px; height:72px; color:var(--silver-deep); position:relative; z-index:1; }
.svc-photo.ico-panel .panel .p-ico svg,
.ph-card.ico-panel .panel .p-ico svg{ width:72px; height:72px; stroke-width:1.25; fill:none; stroke:currentColor; }
.svc-photo.ico-panel .panel .p-cap,
.ph-card.ico-panel .panel .p-cap{ position:relative; z-index:1; font-family:var(--serif); font-style:italic;
  font-size:1.35rem; color:var(--ink-soft); line-height:1.25; max-width:20ch; }
.svc-photo.ico-panel .panel .p-mono,
.ph-card.ico-panel .panel .p-mono{ position:absolute; right:-8px; bottom:-34px; z-index:0;
  font-family:var(--serif); font-style:italic; font-size:9rem; line-height:1; color:rgba(108,114,123,.07); }
/* keep the outer hairline frame on the icon panel variant too */
.ph-card.ico-panel::before{ content:""; position:absolute; inset:-14px; border:1px solid var(--frame); border-radius:8px; z-index:-1; pointer-events:none; }

/* Contact capture modal */
.contact-capture-modal{
  position:fixed; inset:0; background:rgba(0,0,0,.3); display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .3s ease; z-index:999;
}
.contact-capture-modal.show{
  opacity:1; pointer-events:auto;
}
.contact-capture-modal .ccm-box{
  background:var(--paper); border-radius:var(--rad-lg); padding:36px 32px; max-width:420px;
  box-shadow:var(--shadow); position:relative;
}
.contact-capture-modal .ccm-close{
  position:absolute; top:12px; right:12px; background:none; border:none; font-size:28px;
  cursor:pointer; color:var(--ink-dim); padding:0; width:32px; height:32px; display:flex;
  align-items:center; justify-content:center;
}
.contact-capture-modal .ccm-close:hover{
  color:var(--ink);
}
.contact-capture-modal h3{
  font-size:1.4rem; margin-bottom:8px;
}
.contact-capture-modal p{
  font-size:.9rem; color:var(--ink-dim); margin-bottom:22px;
}
.contact-capture-modal .ccm-form{
  display:flex; flex-direction:column; gap:16px;
}
.contact-capture-modal input{
  padding:10px 14px; border:1px solid var(--line); border-radius:8px;
  font-family:var(--sans); font-size:.95rem; color:var(--ink);
  background:var(--bg-3); transition:border-color .2s;
}
.contact-capture-modal input:focus{
  outline:none; border-color:var(--silver-deep);
}
.contact-capture-modal button[type="submit"]{
  padding:11px 24px; border:none; border-radius:8px;
  background:var(--ink); color:var(--paper); font-weight:600;
  cursor:pointer; font-size:.9rem; margin-top:8px;
  transition:background .2s;
}
.contact-capture-modal button[type="submit"]:hover{
  background:var(--ink-soft);
}