/* ==========================================================================
   Empowerment Supports — Scrapbook design system
   Warm ivory paper, torn edges, washi tape, polaroids and handwriting.
   Brand palette (blush / dusty rose / deep rose) is kept; sage, honey and
   terracotta join as scrapbook accents so pages never read as one flat wash.
   ========================================================================== */

:root{
  /* paper */
  --paper:#FBF7F5;
  --paper-warm:#FFFBF8;
  --card:#FFFFFF;
  --kraft:#EFE1D4;
  --kraft-deep:#E0CDBB;

  /* ink */
  --ink:#332B2A;
  --ink-soft:#5F5654;
  --ink-faint:#635A57;

  /* brand rose */
  --rose:#A85A64;
  --rose-deep:#8E4650;
  --rose-mid:#DDA6AA;
  --rose-pale:#FFD7DA;
  --rose-wash:#FFF4F5;

  /* scrapbook accents */
  --sage:#7E9478;
  --sage-deep:#4F6449;
  --sage-wash:#EDF1EA;
  --honey:#E5B25E;
  --honey-wash:#FBF0DC;
  --terracotta:#C4784F;
  --terracotta-wash:#FBEDE4;

  /* tape */
  --tape-rose:rgba(255,203,209,.62);
  --tape-sage:rgba(150,177,143,.42);
  --tape-honey:rgba(233,192,122,.52);
  --tape-plain:rgba(238,226,214,.72);

  --line:rgba(51,43,42,.16);
  --line-soft:rgba(221,166,170,.55);

  --hand:"Caveat","Bradley Hand","Segoe Script",cursive;
  --display:"Cormorant Garamond",Cormorant,Garamond,"Times New Roman",serif;
  --body:"Nunito Sans","Avenir Next",Avenir,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --gutter:clamp(20px,5vw,60px);
  --max:1200px;

  --shadow-lift:0 10px 22px -14px rgba(51,43,42,.42), 0 2px 5px -2px rgba(51,43,42,.14);
  --shadow-deep:0 20px 40px -22px rgba(51,43,42,.5), 0 3px 8px -3px rgba(51,43,42,.16);

  --ease:cubic-bezier(.22,1,.36,1);
  /* settle easing: a touch of overshoot so cards look placed, not faded in */
  --ease-place:cubic-bezier(.2,1.12,.35,1);

  /* One grade across every photograph so they read as a single album shot on
     one camera, rather than images sourced from different places. */
  --photo-grade:saturate(.9) contrast(.94) brightness(1.035) sepia(.1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}

body{
  margin:0;
  background-color:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:1.0625rem;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* paper grain — sits above the background, below the content */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.5;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}
body>*{position:relative;z-index:1}

img{max-width:100%;display:block}

/* grid children must be allowed to shrink below their min-content,
   or one long word (an email address) widens the whole page */
.contact-grid>*,.areas-layout>*,.how-layout>*,.approach-layout>*,
.how-head>*,.approach-head>*,.grid>*,.values>*,.ledger>*,.hero-grid>*{min-width:0}
h1,h2,h3,p,li,dd,dt{overflow-wrap:break-word}
.detail dd a,.foot-grid a{overflow-wrap:anywhere}
a{color:inherit}
button{font:inherit;color:inherit}

:focus-visible{
  outline:3px solid var(--rose);
  outline-offset:3px;
  border-radius:3px;
}

.wrap{width:min(var(--max),100%);margin-inline:auto;padding-inline:var(--gutter)}

.skip-link{
  position:fixed;left:1rem;top:1rem;z-index:200;
  transform:translateY(-200%);
  padding:.75rem 1.1rem;
  background:var(--card);
  border:2px solid var(--rose);
  border-radius:4px 12px 4px 12px;
  font-weight:800;text-decoration:none;
}
.skip-link:focus{transform:none}

/* ---------------------------------------------------------------- type -- */

.display{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(2.45rem,5.1vw,4.15rem);
  line-height:1.02;
  letter-spacing:-.022em;
  margin:0;
  text-wrap:balance;
}
h2{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(2rem,3.9vw,3.2rem);
  line-height:1.06;
  letter-spacing:-.02em;
  margin:0;
  text-wrap:balance;
}
h3{
  font-family:var(--body);
  font-weight:800;
  font-size:1.075rem;
  line-height:1.34;
  letter-spacing:-.005em;
  margin:0;
}
p{margin:0 0 1rem}
p:last-child{margin-bottom:0}

.lede{
  font-size:clamp(1.05rem,1.45vw,1.185rem);
  line-height:1.62;
  color:var(--ink-soft);
  max-width:56ch;
  text-wrap:pretty;
}

/* handwritten line — the scrapbook signature */
.hand{
  font-family:var(--hand);
  font-weight:700;
  font-size:clamp(1.55rem,2.9vw,2.5rem);
  line-height:1;
  color:var(--rose);
  letter-spacing:.005em;
  margin:0 0 .35rem;
  display:block;
  transform:rotate(-1.6deg);
  transform-origin:left center;
}
.hand.sage{color:var(--sage-deep)}
.hand.terracotta{color:var(--terracotta)}
.hand.honey{color:#B98426}
.hand-note{
  font-family:var(--hand);
  font-size:1.28rem;
  line-height:1.25;
  color:var(--ink-soft);
  transform:rotate(-1deg);
  display:inline-block;
}

/* small letterspaced label */
.eyebrow{
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--rose);
  margin:0 0 .9rem;
}
.eyebrow.sage{color:var(--sage-deep)}

/* highlighter marker behind a word — background-based so it survives line wraps */
.marker{
  --marker-colour:%23E5B25E;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M4,24 C40,18 70,27 104,21 C140,15 170,25 196,20 L197,35 C165,41 130,32 96,37 C62,42 34,33 3,37 Z' fill='%23E5B25E' opacity='.68'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-size:100% .62em;
  background-position:0 74%;
  padding:0 .1em;
  /* a marker swipe broken over two lines reads as a rendering fault, not a mark */
  white-space:nowrap;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}
.marker.rose{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M4,24 C40,18 70,27 104,21 C140,15 170,25 196,20 L197,35 C165,41 130,32 96,37 C62,42 34,33 3,37 Z' fill='%23FFD7DA'/%3E%3C/svg%3E");
}
.marker.sage{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M4,24 C40,18 70,27 104,21 C140,15 170,25 196,20 L197,35 C165,41 130,32 96,37 C62,42 34,33 3,37 Z' fill='%23B6CBAE' opacity='.75'/%3E%3C/svg%3E");
}

/* hand-drawn circle around a phrase */
.circled{position:relative;display:inline-block;padding:.05em .38em}
.circled::after{
  content:"";
  position:absolute;inset:-.28em -.42em;
  border:2.5px solid var(--terracotta);
  border-radius:52% 47% 49% 53% / 62% 58% 63% 55%;
  opacity:.62;
  pointer-events:none;
}

/* underline scribble */
.underline-scribble{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C 40 2, 70 11, 108 5 S 168 3, 198 7' fill='none' stroke='%23A85A64' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-size:100% .3em;
  background-position:0 100%;
  padding-bottom:.12em;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}

/* ---------------------------------------------------------- scrapbook fx -- */

/* washi tape strip. Position with --tape-top/--tape-left, angle with --tape-rot */
.tape{
  position:absolute;
  top:var(--tape-top,-13px);
  left:var(--tape-left,50%);
  width:var(--tape-w,104px);
  height:26px;
  transform:translateX(-50%) rotate(var(--tape-rot,-3deg));
  background:var(--tape-rose);
  box-shadow:0 1px 3px rgba(51,43,42,.13);
  pointer-events:none;
  z-index:3;
  /* serrated torn ends */
  -webkit-mask-image:linear-gradient(#000,#000);
  mask-image:linear-gradient(#000,#000);
  clip-path:var(--tear,polygon(3% 0,97% 0,100% 22%,97% 48%,100% 76%,96% 100%,4% 100%,0 78%,3% 50%,0 24%));
}
/* No two strips should match. Four tear patterns, cycled with varied width,
   angle, position and opacity, so the tape reads as torn by hand rather than
   as one component repeated. */
.tape--t2{--tear:polygon(2% 0,98% 0,100% 30%,96% 55%,100% 82%,97% 100%,3% 100%,0 70%,4% 44%,0 18%)}
.tape--t3{--tear:polygon(5% 0,95% 0,100% 18%,96% 42%,99% 68%,94% 100%,6% 100%,0 82%,4% 56%,1% 30%)}
.tape--t4{--tear:polygon(3% 0,96% 0,100% 26%,97% 60%,100% 88%,95% 100%,5% 100%,0 74%,2% 40%,0 14%)}
.tape::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.34) 0 3px,transparent 3px 7px);
  opacity:.65;
}
.tape--sage{background:var(--tape-sage)}
.tape--honey{background:var(--tape-honey)}
.tape--plain{background:var(--tape-plain)}
.tape--r{--tape-left:78%;--tape-rot:4deg}
.tape--l{--tape-left:20%;--tape-rot:-5deg}

/* push pin */
.pin{
  position:absolute;
  top:-11px;left:50%;
  width:22px;height:22px;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#fff 0 12%,var(--rose) 13% 62%,var(--rose-deep) 63% 100%);
  box-shadow:0 3px 5px -1px rgba(51,43,42,.4);
  z-index:3;pointer-events:none;
}
.pin--sage{background:radial-gradient(circle at 34% 30%,#fff 0 12%,var(--sage) 13% 62%,var(--sage-deep) 63% 100%)}
.pin--honey{background:radial-gradient(circle at 34% 30%,#fff 0 12%,var(--honey) 13% 62%,#B98426 63% 100%)}

/* paper clip */
.clip{
  position:absolute;top:-16px;right:22px;width:20px;height:46px;
  border:3px solid #B9B2AC;border-radius:11px;
  border-bottom-color:transparent;
  transform:rotate(9deg);
  z-index:3;pointer-events:none;
  box-shadow:0 2px 3px rgba(51,43,42,.16);
}
.clip::after{
  content:"";position:absolute;left:3px;top:8px;right:3px;bottom:9px;
  border:3px solid #CFC8C2;border-radius:8px;border-bottom-color:transparent;
}

/* torn paper edge — put on a section to tear its top or bottom into the next */
.torn-top,.torn-bottom{position:relative}
.torn-top::before,.torn-bottom::after{
  content:"";
  position:absolute;
  left:-2vw;right:-2vw;
  height:26px;
  background:var(--torn-from,var(--paper));
  z-index:2;
  pointer-events:none;
}
.torn-top::before{
  top:-1px;
  -webkit-mask:url("torn-top.svg") no-repeat center/100% 100%;
  mask:url("torn-top.svg") no-repeat center/100% 100%;
}
.torn-bottom::after{
  bottom:-1px;
  -webkit-mask:url("torn-bottom.svg") no-repeat center/100% 100%;
  mask:url("torn-bottom.svg") no-repeat center/100% 100%;
}

/* ------------------------------------------------------------- surfaces -- */

/* base pasted-paper card */
.scrap{
  position:relative;
  background:var(--card);
  border-radius:3px;
  padding:clamp(1.35rem,2.6vw,1.9rem);
  box-shadow:var(--shadow-lift);
  transform:rotate(var(--rot,0deg));
  transition:transform 320ms var(--ease),box-shadow 320ms var(--ease);
}
.scrap::after{ /* soft paper edge */
  content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(51,43,42,.07);
  pointer-events:none;
}
.scrap:hover{transform:rotate(0deg) translateY(-4px);box-shadow:var(--shadow-deep)}

/* deckled / hand-cut edge */
.scrap--cut{border-radius:14px 4px 16px 5px}
.scrap--cut2{border-radius:4px 16px 5px 14px}

/* stitched border */
.scrap--stitch::before{
  content:"";position:absolute;inset:7px;border-radius:inherit;
  border:2px dashed rgba(168,90,100,.34);
  pointer-events:none;
}

/* tinted paper variants */
.scrap--rose{background:var(--rose-wash)}
.scrap--sage{background:var(--sage-wash)}
.scrap--honey{background:var(--honey-wash)}
.scrap--kraft{background:var(--kraft)}

/* sticky note */
.sticky{
  position:relative;
  padding:clamp(1.25rem,2.4vw,1.6rem);
  background:var(--honey-wash);
  box-shadow:var(--shadow-lift);
  transform:rotate(var(--rot,-1deg));
  transition:transform 300ms var(--ease),box-shadow 300ms var(--ease);
  border-radius:2px 2px 14px 2px;
}
.sticky::after{ /* curled corner */
  content:"";position:absolute;right:0;bottom:0;width:26px;height:26px;
  background:linear-gradient(135deg,transparent 50%,rgba(51,43,42,.13) 50%,rgba(255,255,255,.85) 52%);
  border-radius:0 0 3px 0;
}
.sticky:hover{transform:rotate(0deg) translateY(-4px);box-shadow:var(--shadow-deep)}
.sticky--rose{background:#FFEAEC}
.sticky--sage{background:#E9F0E6}
.sticky--blue{background:#E7EFF3}
.sticky--kraft{background:#F3E6D8}

/* ruled index card */
.index-card{
  position:relative;
  background:
    linear-gradient(transparent 0 calc(100% - 1px),rgba(168,90,100,.22) calc(100% - 1px)) 0 0/100% 32px repeat-y,
    var(--card);
  border-radius:4px;
  box-shadow:var(--shadow-lift);
  overflow:hidden;
}
.index-card::before{ /* red margin rule */
  content:"";position:absolute;top:0;bottom:0;left:clamp(14px,3.6%,30px);width:2px;
  background:rgba(196,120,79,.42);
}

/* polaroid photo */
.polaroid{
  position:relative;
  margin:0;
  padding:11px 11px 0;
  background:var(--card);
  box-shadow:var(--shadow-deep);
  transform:rotate(var(--rot,-2deg));
  transition:transform 380ms var(--ease),box-shadow 380ms var(--ease);
  border-radius:2px;
}
.polaroid img{
  filter:var(--photo-grade);
  width:100%;
  aspect-ratio:var(--ar,4/3);
  object-fit:cover;
  object-position:var(--pos,center);
  background:var(--kraft);
  border-radius:1px;
}
.polaroid figcaption{
  padding:.62rem .35rem .95rem;
  font-family:var(--hand);
  font-size:1.24rem;
  line-height:1.16;
  color:var(--ink);
  text-align:center;
}
.polaroid figcaption small{
  display:block;
  margin-top:.1rem;
  font-family:var(--body);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--rose);
}
.polaroid:hover{transform:rotate(0deg) scale(1.015);box-shadow:0 26px 48px -22px rgba(51,43,42,.55)}

/* circular photo cut-out */
.cutout{
  position:relative;margin:0;
  border-radius:50%;
  overflow:hidden;
  box-shadow:0 0 0 9px var(--card),var(--shadow-deep);
  transform:rotate(var(--rot,0deg));
}
.cutout img{width:100%;aspect-ratio:1;object-fit:cover;filter:var(--photo-grade)}

/* sticker — rotated circular badge */
.sticker{
  position:relative;
  display:inline-grid;
  place-items:center;
  gap:.05rem;
  width:var(--size,112px);height:var(--size,112px);
  padding:.5rem;
  border-radius:50%;
  background:var(--rose);
  color:#fff;
  text-align:center;
  font-size:.63rem;
  font-weight:800;
  letter-spacing:.09em;
  line-height:1.22;
  text-transform:uppercase;
  transform:rotate(var(--rot,-9deg));
  box-shadow:var(--shadow-deep);
}
.sticker::before{
  content:"";position:absolute;inset:5px;border-radius:50%;
  border:1.5px dashed rgba(255,255,255,.62);
}
.sticker--sage{background:var(--sage-deep)}
.sticker--honey{background:var(--honey);color:var(--ink)}
.sticker--honey::before{border-color:rgba(51,43,42,.3)}
.sticker b{display:block;font-family:var(--hand);font-size:1.5rem;letter-spacing:0;text-transform:none;font-weight:700}

/* torn label chip (areas, tags) */
.chip{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.42rem .95rem;
  background:var(--card);
  border-radius:3px 12px 4px 11px;
  box-shadow:0 3px 8px -4px rgba(51,43,42,.4),inset 0 0 0 1px rgba(51,43,42,.09);
  font-size:.875rem;
  font-weight:700;
  color:var(--ink-soft);
  transform:rotate(var(--rot,0deg));
  transition:transform 240ms var(--ease),color 240ms;
}
.chip:hover{transform:rotate(0deg) translateY(-2px);color:var(--rose)}
.chip svg{width:14px;height:14px;flex:none;color:var(--rose)}
.chip--rose{background:var(--rose-wash)}
.chip--sage{background:var(--sage-wash)}
.chip--honey{background:var(--honey-wash)}

/* ---------------------------------------------------------------- buttons */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  min-height:48px;
  padding:.78rem 1.5rem;
  border:0;
  border-radius:26px 24px 27px 25px;
  font-family:var(--body);
  font-size:.9rem;
  font-weight:800;
  letter-spacing:.055em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  transition:transform 200ms var(--ease),box-shadow 200ms var(--ease),background 200ms;
}
.btn-primary{
  background:var(--rose);
  color:#fff;
  box-shadow:0 5px 0 -1px var(--rose-deep),0 10px 18px -10px rgba(51,43,42,.5);
}
.btn-primary:hover{background:var(--rose-deep);transform:translateY(2px);box-shadow:0 3px 0 -1px #7A3B44,0 8px 14px -10px rgba(51,43,42,.5)}
.btn-honey{
  background:var(--honey);color:var(--ink);
  box-shadow:0 5px 0 -1px #C9973F,0 10px 18px -10px rgba(51,43,42,.45);
}
.btn-honey:hover{transform:translateY(2px);box-shadow:0 3px 0 -1px #B08430,0 8px 14px -10px rgba(51,43,42,.45)}
.btn-sage{
  background:var(--sage-deep);color:#fff;
  box-shadow:0 5px 0 -1px #3C4E37,0 10px 18px -10px rgba(51,43,42,.45);
}
.btn-sage:hover{transform:translateY(2px);box-shadow:0 3px 0 -1px #33432F,0 8px 14px -10px rgba(51,43,42,.45)}
.btn-ghost{
  background:var(--card);
  color:var(--rose);
  box-shadow:inset 0 0 0 2px var(--rose-mid),0 4px 10px -6px rgba(51,43,42,.4);
}
.btn-ghost:hover{background:var(--rose-wash);box-shadow:inset 0 0 0 2px var(--rose),0 4px 10px -6px rgba(51,43,42,.4)}
.btn-sm{min-height:42px;padding:.55rem 1.15rem;font-size:.78rem}

/* --------------------------------------------------------------- doodles -- */

.doodle{
  position:absolute;
  pointer-events:none;
  color:var(--rose-mid);
  opacity:.75;
  z-index:0;
}
.doodle svg{width:100%;height:100%;display:block;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.doodle--sage{color:#A9BFA1}
.doodle--honey{color:#EAC384}
.doodle--terracotta{color:#DBA382}

/* ----------------------------------------------------------------- bands -- */

.band{padding:clamp(3.4rem,7vw,6rem) 0;position:relative}
.band-rose{background:var(--rose-wash)}
.band-sage{background:var(--sage-wash)}
.band-kraft{background:var(--kraft)}
.band-paper{background:var(--paper)}

/* Matches .how-head and .approach-head, which were already two-column. The
   single-column version left a large empty area to the right of the heading. */
.head{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  column-gap:clamp(1.4rem,4vw,3.5rem);
  row-gap:.4rem;
  align-items:end;
  margin-bottom:clamp(2rem,4.5vw,3.2rem);
  position:relative;
}
.head>.hand{grid-column:1;grid-row:1}
.head>h2{grid-column:1;grid-row:2}
.head>.lede{grid-column:2;grid-row:2;margin:0}
@media (max-width:900px){
  .head{grid-template-columns:1fr;align-items:start}
  .head>.hand,.head>h2,.head>.lede{grid-column:1}
  .head>.hand{grid-row:1}.head>h2{grid-row:2}.head>.lede{grid-row:3;margin-top:1rem}
}

/* corner tape — a diagonal strip over one corner rather than a strip across
   the top, so the fastenings vary the way real ones would */
.tape--corner{--tape-left:13%;--tape-rot:-40deg;--tape-w:76px;top:-15px}
.tape--corner-r{--tape-left:87%;--tape-rot:40deg;--tape-w:76px;top:-15px}
.tape--short{--tape-w:72px}
.tape--long{--tape-w:132px}

/* which colour is tearing INTO each band (i.e. the section above it) */
#how{--torn-from:var(--paper)}
#services{--torn-from:var(--rose-wash)}
#approach{--torn-from:var(--paper)}
#areas{--torn-from:var(--sage-wash)}
#faq{--torn-from:var(--paper)}
#contact{--torn-from:var(--rose-wash)}
footer.torn-top{--torn-from:var(--rose)}

/* --------------------------------------------------------------- reveals -- */

.reveal{
  opacity:0;
  transform:translateY(22px) rotate(calc(var(--rot,0deg) - 2.4deg)) scale(.988);
  transition:opacity 620ms var(--ease),transform 760ms var(--ease-place);
}
.reveal.in{opacity:1;transform:translateY(0) rotate(var(--rot,0deg)) scale(1)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:rotate(var(--rot,0deg))}
  .scrap:hover,.sticky:hover,.polaroid:hover,.chip:hover{transform:rotate(var(--rot,0deg))}
}

/* ==========================================================================
   Page furniture
   ========================================================================== */

/* ------------------------------------------------------------------- nav -- */

.site-head{position:sticky;top:0;z-index:60;padding:10px 0}
.nav-inner{
  display:flex;align-items:center;gap:1rem;
  min-height:64px;
  padding:8px 10px 8px 14px;
  background:rgba(255,251,248,.94);
  border-radius:20px 8px 20px 8px;
  box-shadow:inset 0 0 0 1.5px var(--rose-pale),0 8px 20px -14px rgba(51,43,42,.55);
  backdrop-filter:blur(10px) saturate(140%);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
}
.lockup{display:flex;align-items:center;gap:.6rem;text-decoration:none;flex:none}
.lockup img{width:42px;height:42px;border-radius:50%;box-shadow:0 2px 6px -3px rgba(51,43,42,.5)}
.wordmark{line-height:1.02}
.wordmark b{
  display:block;font-family:var(--display);font-weight:600;
  font-size:1.05rem;letter-spacing:.045em;text-transform:uppercase;color:var(--ink);
}
.wordmark span{
  display:block;margin-top:.1rem;font-family:var(--hand);
  font-size:.98rem;letter-spacing:.02em;color:var(--rose);
}
.nav-links{display:flex;align-items:center;gap:.1rem;margin:0 auto;padding:0;list-style:none}
.nav-links a{
  display:grid;place-items:center;min-height:42px;
  padding:.45rem .8rem;border-radius:16px 6px 16px 6px;
  font-size:.885rem;font-weight:700;color:var(--ink-soft);text-decoration:none;
  transition:background 200ms,color 200ms;
}
.nav-links a:hover,.nav-links a[aria-current="page"]{background:var(--rose-wash);color:var(--rose)}
.nav-actions{display:flex;align-items:center;gap:.6rem;flex:none}
.nav-phone{
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--body);font-size:.9rem;font-weight:700;color:var(--sage-deep);text-decoration:none;white-space:nowrap;
}
.nav-phone svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9}
.nav-phone:hover{color:var(--rose)}

/* dropdown */
.has-menu{position:relative}
.has-menu>.menu-trigger{display:flex;align-items:center}
.menu-toggle-btn{
  display:grid;place-items:center;width:26px;height:26px;margin-left:-.35rem;
  border:0;background:none;border-radius:50%;cursor:pointer;color:var(--ink-soft);
}
.menu-toggle-btn svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.4;transition:transform 240ms var(--ease)}
.has-menu[data-open="true"] .menu-toggle-btn svg{transform:rotate(180deg)}
.drop{
  position:absolute;top:calc(100% + 12px);left:-8px;
  z-index:100;
  display:none;min-width:230px;padding:.5rem;
  background:var(--card);
  border-radius:4px 16px 4px 16px;
  box-shadow:var(--shadow-deep),inset 0 0 0 1.5px var(--rose-pale);
}
.drop::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-12px;
  height:12px;
}
.has-menu[data-open="true"] .drop{display:block}
.drop a{display:block;padding:.55rem .75rem;border-radius:10px 4px 10px 4px;font-size:.875rem;font-weight:600;color:var(--ink-soft);text-decoration:none}
.drop a:hover{background:var(--rose-wash);color:var(--rose)}

.feedback-tab{position:fixed;right:0;top:48%;z-index:90;padding:.78rem .7rem;border-radius:14px 0 0 5px;background:var(--rose-deep);color:#fff;font-size:.82rem;font-weight:800;letter-spacing:.03em;text-decoration:none;writing-mode:vertical-rl;box-shadow:-5px 8px 18px rgba(54,47,46,.26);transition:transform 180ms var(--ease),background 180ms var(--ease)}
.feedback-tab:hover,.feedback-tab:focus-visible{background:var(--ink);transform:translateX(-3px);color:#fff}
.feedback-tab:focus-visible{outline:3px solid var(--honey);outline-offset:3px}
@media(max-width:820px){.feedback-tab{display:none}}

/* burger + sheet */
.burger{display:none;width:46px;height:46px;flex:none;border:0;cursor:pointer;border-radius:14px 5px 14px 5px;background:var(--rose-wash);box-shadow:inset 0 0 0 1.5px var(--rose-pale);place-items:center;color:var(--rose)}
.burger svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round}
.sheet{display:none;margin-top:10px;padding:.6rem;background:var(--card);border-radius:6px 20px 6px 20px;box-shadow:var(--shadow-deep),inset 0 0 0 1.5px var(--rose-pale)}
.sheet[data-open="true"]{display:block}
.sheet a,.sheet summary{display:block;padding:.78rem .85rem;border-radius:12px 4px 12px 4px;font-weight:700;text-decoration:none;color:var(--ink);cursor:pointer}
.sheet a:hover,.sheet summary:hover{background:var(--rose-wash);color:var(--rose)}
.sheet details .sheet-sub a{padding-left:1.7rem;font-weight:600;font-size:.9rem;color:var(--ink-soft)}
.sheet summary::marker{color:var(--rose)}

/* ------------------------------------------------------------------ hero -- */

.hero{position:relative;padding:clamp(2.2rem,5vw,4rem) 0 clamp(2.5rem,6vw,4.5rem);overflow:hidden}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
}
.hero-copy{position:relative;z-index:2}
.hero .display em{font-style:normal;color:var(--rose)}
.hero-rule{width:158px;height:12px;margin:1.5rem 0 1.35rem;color:var(--rose-mid)}
.hero-rule svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round}
.hero-chips{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.5rem}
/* the one doodle with a job: curls up into the primary action */
.hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem;position:relative}
.cta-arrow{
  top:calc(100% + 2px);
  left:30px;
  width:46px;height:36px;
  transform:scaleY(-1) rotate(-10deg);
  color:var(--rose-mid);
  opacity:.85;
}
@media (max-width:900px){.cta-arrow{display:none}}

/* photo collage */
.collage{position:relative;min-height:clamp(400px,46vw,540px)}
.collage .polaroid{position:absolute;box-shadow:var(--shadow-deep)}
.collage-a{width:54%;top:2%;left:0;--rot:-4.5deg;z-index:2}
.collage-b{width:47%;top:26%;right:2%;--rot:5deg;z-index:3}
.collage-c{width:43%;bottom:2%;left:12%;--rot:2.5deg;z-index:4}
.collage .sticker{position:absolute;bottom:7%;left:-5%;z-index:5}
.collage .ndis-sticker{
  position:absolute;top:1%;right:1%;width:98px;z-index:5;
  transform:rotate(11deg);
  filter:drop-shadow(0 8px 14px rgba(51,43,42,.32));
}
.collage .doodle{z-index:1}

/* ------------------------------------------------------------ trust cards -- */

.ledger{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(1rem,2.2vw,1.7rem);
  margin-top:clamp(2.5rem,5vw,4rem);
}
.ledger .scrap{padding:1.5rem 1.25rem 1.35rem}
.ledger dt{
  font-family:var(--hand);font-size:1.42rem;line-height:1.1;color:var(--rose);margin-bottom:.35rem;
}
.ledger dd{margin:0;font-size:.925rem;line-height:1.55;color:var(--ink-soft)}

/* -------------------------------------------------------------- how steps -- */

.how-head{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:end;margin-bottom:clamp(2.2rem,5vw,3.4rem)}
.how-layout{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(2rem,4.5vw,4rem);align-items:start}
.how-photo-col{position:relative;position:sticky;top:110px}
.how-photo-col .hand-note{display:block;margin-top:1.4rem;text-align:center}
.steps{display:grid;gap:3.5rem;margin:0;padding:0;list-style:none}
.step{position:relative;padding-left:0}
.step .scrap{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:start}
.step-n{
  display:grid;place-items:center;
  width:52px;height:52px;flex:none;
  border-radius:50%;
  background:var(--rose-wash);
  box-shadow:inset 0 0 0 2px var(--rose-pale);
  font-family:var(--hand);font-size:1.75rem;font-weight:700;color:var(--rose);
}
.step:nth-child(2) .step-n{background:var(--sage-wash);box-shadow:inset 0 0 0 2px #CBDCC3;color:var(--sage-deep)}
.step:nth-child(3) .step-n{background:var(--honey-wash);box-shadow:inset 0 0 0 2px #F0D9A9;color:#A9761F}
.step:nth-child(4) .step-n{background:var(--terracotta-wash);box-shadow:inset 0 0 0 2px #EFCBB3;color:var(--terracotta)}
.step h3{margin-bottom:.4rem}
.step p{margin:0;font-size:.94rem;color:var(--ink-soft)}
/* A left-side connector carries the eye from each step down to the next. */
.step-arrow{
  position:absolute;
  right:auto;
  left:24px;
  bottom:-45px;
  width:44px;
  height:34px;
  z-index:4;
  opacity:.9;
  transform:rotate(82deg);
  transform-origin:center;
}

/* -------------------------------------------------------------- services -- */

.filter-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:clamp(1.5rem,3vw,2.2rem)}
.filters{display:flex;flex-wrap:wrap;gap:.5rem}
.filter-pill{
  min-height:42px;padding:.5rem 1.15rem;border:0;cursor:pointer;
  border-radius:20px 7px 20px 7px;
  background:var(--card);
  box-shadow:inset 0 0 0 1.5px rgba(51,43,42,.12),0 3px 8px -6px rgba(51,43,42,.5);
  font-size:.855rem;font-weight:800;color:var(--ink-soft);
  transition:transform 200ms var(--ease),background 200ms,color 200ms,box-shadow 200ms;
}
.filter-pill:hover{transform:translateY(-2px) rotate(-1deg)}
.filter-pill[aria-pressed="true"]{background:var(--rose);color:#fff;box-shadow:0 4px 0 -1px var(--rose-deep)}
.count{margin:0;font-family:var(--hand);font-size:1.25rem;color:var(--ink-soft)}

/* Explicit columns, not auto-fill: the featured cards below span two of them,
   and a span only behaves predictably against a known column count.
   align-items:start lets each card size to its own content — equal-height rows
   left dead space under the shorter ones. */
.grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.1rem,2.4vw,1.75rem);
  align-items:start;
}

/* Seven cards over three columns leaves an orphan (3+3+1). Two double-width
   cards make nine column-units — three full rows — and promote the two
   services that deserve the weight. */
.grid .card.card--wide{
  grid-column:span 2;
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  column-gap:clamp(1.4rem,3vw,2.6rem);
  row-gap:.5rem;
  align-content:start;
}
.grid .card.card--wide>.tag{grid-column:1;grid-row:1;justify-self:start}
.grid .card.card--wide>h3{grid-column:1;grid-row:2;font-size:1.42rem}
.grid .card.card--wide>.card-link{grid-column:1;grid-row:3;margin-top:.35rem}
.grid .card.card--wide>p{grid-column:2;grid-row:1/4;align-self:center;margin:0}

.card-link{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.82rem;font-weight:800;letter-spacing:.03em;
  color:var(--rose);text-decoration:none;
}
.card-link:hover{text-decoration:underline;text-underline-offset:3px}
.grid .card{display:flex;flex-direction:column;gap:.6rem;padding-top:1.75rem}
.card .tag{
  align-self:flex-start;
  padding:.25rem .7rem;border-radius:3px 10px 3px 10px;
  background:var(--rose-wash);color:var(--rose);
  font-size:.63rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
}
.card .tag.cb{background:var(--sage-wash);color:var(--sage-deep)}
.card h3{font-size:1.16rem;font-family:var(--display);font-weight:600;letter-spacing:-.01em;line-height:1.16}
.card h3 a{text-decoration:none}
.card h3 a:hover{color:var(--rose);text-decoration:underline;text-underline-offset:3px}
.card p{margin:0;font-size:.9rem;line-height:1.58;color:var(--ink-soft)}
.card .group{
  margin-top:auto;padding-top:.85rem;
  border-top:1.5px dashed rgba(168,90,100,.32);
  font-size:.73rem;color:var(--ink-faint);line-height:1.45;
}
.card .group b{display:block;font-size:.63rem;letter-spacing:.12em;text-transform:uppercase;color:var(--rose);margin-bottom:.15rem}
.card[hidden]{display:none}

/* -------------------------------------------------------------- approach -- */

.approach-head{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(1.4rem,4vw,3.5rem);align-items:end;margin-bottom:clamp(2.2rem,5vw,3.4rem)}
.approach-layout{display:grid;grid-template-columns:.86fr 1.14fr;gap:clamp(2rem,4.5vw,4rem);align-items:start}
.approach-photo-col{position:relative}
.values{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,2.2vw,1.6rem)}
.values .sticky h3{margin-bottom:.5rem;font-size:1.04rem}
.values .sticky p{margin:0;font-size:.9rem;line-height:1.57;color:var(--ink-soft)}

/* ----------------------------------------------------------------- areas -- */

.areas-layout{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(2rem,4.5vw,4rem);align-items:center}
.areas{display:flex;flex-wrap:wrap;gap:.65rem}
.areas .chip{font-size:.9rem;padding:.5rem 1.05rem}

/* ------------------------------------------------------------------- faq -- */

.faq{display:grid;gap:clamp(.85rem,1.8vw,1.15rem);max-width:900px}
.faq-item{position:relative;overflow:hidden}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.15rem clamp(1.1rem,2.4vw,1.6rem) 1.15rem clamp(2.4rem,5%,3.1rem);
  border:0;background:none;cursor:pointer;text-align:left;
  font-family:var(--body);font-size:1.02rem;font-weight:800;line-height:1.35;color:var(--ink);
}
.faq-q:hover{color:var(--rose)}
.faq-q svg{width:22px;height:22px;flex:none;fill:none;stroke:var(--rose);stroke-width:2.4;stroke-linecap:round;transition:transform 300ms var(--ease)}
.faq-q[aria-expanded="true"] svg{transform:rotate(45deg)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows 380ms var(--ease)}
.faq-q[aria-expanded="true"]+.faq-a{grid-template-rows:1fr}
.faq-a>div{overflow:hidden}
.faq-a p{
  margin:0;padding:0 clamp(1.1rem,2.4vw,1.6rem) 1.35rem clamp(2.4rem,5%,3.1rem);
  font-size:.94rem;line-height:1.65;color:var(--ink-soft);max-width:72ch;
}

/* --------------------------------------------------------------- contact -- */

.contact-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.detail{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1rem;padding:1rem 0;border-bottom:1.5px dashed rgba(168,90,100,.3)}
.detail:first-child{border-top:1.5px dashed rgba(168,90,100,.3)}
.detail dt{font-family:var(--hand);font-size:1.3rem;color:var(--rose);min-width:6.5rem}
.detail dd{margin:0;font-size:.94rem;line-height:1.55;color:var(--ink-soft)}
.detail dd a{color:var(--rose);text-decoration:none;font-weight:700}
.detail dd a:hover{text-decoration:underline;text-underline-offset:3px}
.contact-promise{margin-top:1.8rem;padding:1.15rem 1.35rem}
.contact-promise strong{display:block;font-family:var(--hand);font-weight:700;font-size:1.42rem;color:var(--sage-deep);margin-bottom:.2rem}
.contact-promise span{font-size:.92rem;line-height:1.55;color:var(--ink-soft)}

form{padding:clamp(1.4rem,3vw,2.2rem)}
.field{display:block;margin-bottom:1.05rem}
.field>span{
  display:block;margin-bottom:.4rem;
  font-family:var(--hand);font-size:1.2rem;color:var(--ink);
}
.field input,.field select,.field textarea{
  width:100%;padding:.78rem .95rem;
  font:inherit;font-size:.95rem;color:var(--ink);
  background:var(--paper-warm);
  border:0;border-radius:10px 4px 10px 4px;
  box-shadow:inset 0 0 0 1.5px rgba(168,90,100,.34);
  transition:box-shadow 200ms;
}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;box-shadow:inset 0 0 0 2.5px var(--rose)}
.form-note{margin:.9rem 0 0;font-size:.8rem;line-height:1.5;color:var(--ink-faint)}

/* ----------------------------------------------------------- credentials -- */

.credential-strip{background:var(--rose);color:#fff;padding:1.1rem 0}
.credential-strip .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1.6rem;justify-content:center;text-align:center}
.credential-strip strong{font-family:var(--hand);font-weight:700;font-size:1.5rem}
.credential-strip span{font-size:.78rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;opacity:.92}
.credential-strip span::before{content:"✦";margin-right:.55rem;opacity:.7}

/* ---------------------------------------------------------------- footer -- */

footer{position:relative;background:var(--kraft);padding:clamp(3rem,6vw,4.5rem) 0 2rem;color:var(--ink)}
.foot-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1.5rem;margin-bottom:clamp(2.2rem,5vw,3.4rem)}
.foot-mark{width:120px;height:120px;border-radius:50%;box-shadow:0 0 0 8px rgba(255,255,255,.6),var(--shadow-lift);transform:rotate(-3deg)}
.foot-top .ndis-mark{width:104px;transform:rotate(6deg);filter:drop-shadow(0 6px 12px rgba(51,43,42,.22))}
.foot-grid{display:grid;grid-template-columns:1fr 1fr 1.25fr 1.25fr;gap:clamp(1.5rem,3vw,2.5rem)}
.foot-grid h4{
  margin:0 0 .8rem;font-family:var(--hand);font-weight:700;font-size:1.5rem;color:var(--rose);
}
.foot-grid ul{margin:0;padding:0;list-style:none}
.foot-grid li+li{margin-top:.4rem}
.foot-grid a,.foot-grid p{font-size:.885rem;line-height:1.6;color:var(--ink-soft)}
.foot-grid a{text-decoration:none}
.foot-grid a:hover{color:var(--rose);text-decoration:underline;text-underline-offset:3px}
.country-ack{
  display:grid;grid-template-columns:auto 1fr;gap:1.2rem;align-items:start;
  margin-top:clamp(2.2rem,5vw,3.2rem);padding:1.3rem 1.5rem;
}
.country-flags{display:flex;gap:.5rem}
.country-flag{display:block;width:46px;height:31px;border-radius:2px;box-shadow:0 2px 5px -2px rgba(51,43,42,.5)}
.aboriginal-flag{background:linear-gradient(#000 0 50%,#C8102E 50% 100%);position:relative}
.aboriginal-flag::after{content:"";position:absolute;inset:0;margin:auto;width:13px;height:13px;border-radius:50%;background:#FFB81C}
.country-ack p{margin:0;font-size:.83rem;line-height:1.6;color:var(--ink-soft)}
.foot-base{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem;
  margin-top:2.2rem;padding-top:1.2rem;
  border-top:1.5px dashed rgba(168,90,100,.35);
  font-size:.78rem;color:var(--ink-faint);
}

/* ------------------------------------------------------------ responsive -- */

/* two columns: 7 cards + one span = 8 units = four full rows */
@media (max-width:1024px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid .card.card--wide:last-child{grid-column:auto;display:flex;flex-direction:column;gap:.6rem}
  .grid .card.card--wide:last-child>*{grid-column:auto;grid-row:auto}
}
@media (max-width:660px){
  .grid{grid-template-columns:1fr}
  .grid .card.card--wide{grid-column:auto;display:flex;flex-direction:column;gap:.6rem}
  .grid .card.card--wide>*{grid-column:auto;grid-row:auto}
  .grid .card.card--wide>h3{font-size:1.16rem}
}

@media (max-width:1080px){
  .nav-links{display:none}
  .nav-phone{display:none}
  .burger{display:grid}
  .nav-inner{justify-content:space-between}
  .hero-grid{grid-template-columns:1fr}
  .collage{min-height:min(78vw,470px);margin-top:1rem}
  .ledger{grid-template-columns:repeat(2,1fr)}
  .how-head,.approach-head{grid-template-columns:1fr;align-items:start}
  .how-layout,.approach-layout,.areas-layout,.contact-grid{grid-template-columns:1fr}
  .how-photo-col{position:static}
  .how-photo-col .polaroid,.approach-photo-col .polaroid{max-width:460px;margin-inline:auto}
  .foot-grid{grid-template-columns:1fr 1fr}
}

/* below this the lockup + CTA + burger no longer fit on one row */
@media (max-width:700px){
  .nav-actions{display:none}
}

@media (max-width:640px){
  /* decorative marks stop competing with text on small screens */
  .doodle:not(.step-arrow){display:none}
  .ledger{grid-template-columns:1fr}
  .values{grid-template-columns:1fr}
  .hero-cta .btn{width:100%}
  .step .scrap{grid-template-columns:1fr}
  .step-arrow{
    display:block;
    right:auto;
    left:18px;
    bottom:-45px;
    transform:rotate(82deg);
  }
  .foot-grid{grid-template-columns:1fr}
  .country-ack{grid-template-columns:1fr}
  .collage-a{width:64%;left:0}
  .collage-b{width:52%}
  .collage-c{width:50%;left:22%}
  .collage .sticker{--size:84px;left:-6%;bottom:4%}
  .collage .ndis-sticker{width:72px}
  .filter-bar{flex-direction:column;align-items:flex-start}
  .credential-strip .wrap{flex-direction:column;gap:.5rem}
}

/* ==========================================================================
   Sticky mobile call / refer bar
   Support coordinators and families often land here on a phone mid-task; the
   two things they need are never more than a thumb away.
   ========================================================================== */

.mobile-cta{display:none}

@media (max-width:760px){
  .mobile-cta{
    position:fixed;
    left:0;right:0;bottom:0;
    z-index:70;
    display:grid;
    grid-template-columns:auto 1fr;
    gap:.6rem;
    padding:.6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
    background:rgba(255,251,248,.96);
    box-shadow:0 -6px 20px -12px rgba(51,43,42,.6),inset 0 1.5px var(--rose-pale);
    backdrop-filter:blur(10px) saturate(140%);
    -webkit-backdrop-filter:blur(10px) saturate(140%);
  }
  .mobile-cta a{
    display:flex;align-items:center;justify-content:center;gap:.45rem;
    min-height:48px;padding:.6rem 1rem;
    border-radius:22px 8px 22px 8px;
    font-size:.85rem;font-weight:800;letter-spacing:.04em;
    text-transform:uppercase;text-decoration:none;
  }
  .mobile-cta .cta-call{
    background:var(--card);color:var(--rose);
    box-shadow:inset 0 0 0 2px var(--rose-mid);
  }
  .mobile-cta .cta-refer{
    background:var(--rose);color:#fff;
    box-shadow:0 4px 0 -1px var(--rose-deep);
  }
  .mobile-cta svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  /* keep the bar from covering the end of the page */
  body{padding-bottom:76px}
}

/* ==========================================================================
   Print — support coordinators and plan managers do print these pages
   ========================================================================== */

@media print{
  @page{margin:16mm}

  html,body{background:#fff!important;color:#000!important;font-size:11pt}
  body::before{display:none!important}          /* paper grain */
  body{padding-bottom:0}

  /* chrome and decoration carry no meaning on paper */
  .site-head,.burger,.sheet,.mobile-cta,.skip-link,
  .doodle,.tape,.pin,.clip,.sticker,.ndis-sticker,
  .torn-top::before,.torn-bottom::after,
  .filter-bar,.hero-cta,.credential-strip{display:none!important}

  /* flatten every pasted-paper surface */
  .scrap,.sticky,.index-card,.polaroid,.chip,.card,form,
  .scrap--rose,.scrap--sage,.scrap--honey,.scrap--kraft{
    transform:none!important;
    box-shadow:none!important;
    background:#fff!important;
    border:1px solid #999!important;
    border-radius:0!important;
  }
  .scrap::after,.scrap--stitch::before,.sticky::after{display:none!important}

  .band,.band-rose,.band-sage,.band-kraft,.band-paper,footer{
    background:#fff!important;padding:1.2rem 0!important;
  }

  .hand,.hand-note,.eyebrow,h2,h3,.display,p,li,dt,dd{color:#000!important}
  .marker,.underline-scribble{background-image:none!important}
  .polaroid img{filter:none!important}

  /* answers must be readable on paper, not collapsed behind a button */
  .faq-a{grid-template-rows:1fr!important}
  .faq-q svg{display:none}
  .card[hidden]{display:flex!important}

  /* spell out destinations that a click would otherwise hide */
  a[href^="http"]::after,a[href^="mailto"]::after,a[href^="tel"]::after{
    content:" (" attr(href) ")";
    font-size:9pt;color:#444;word-break:break-all;
  }
  .nav-links a::after,.foot-grid a::after{content:""}

  /* don't split a card across two sheets */
  .card,.step,.value,.sticky,.faq-item,.detail,.scrap{
    break-inside:avoid;page-break-inside:avoid;
  }
  h2,h3{break-after:avoid;page-break-after:avoid}
  .reveal{opacity:1!important;transform:none!important}
}

/* ==========================================================================
   Hero entrance — the page assembles itself once, then holds still
   Every animation uses fill-mode:backwards, never forwards: the final keyframe
   matches each element's resting style, so once the animation ends the element
   returns to normal CSS and hover/parallax keep working.
   The global prefers-reduced-motion rule disables all of it.
   ========================================================================== */

@keyframes heroRise{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}
@keyframes heroWrite{           /* the greeting is written left to right */
  from{clip-path:inset(-12% 100% -28% 0)}
  to{clip-path:inset(-12% -3% -28% 0)}
}
@keyframes heroSwipe{           /* the highlighter is drawn across the word */
  from{background-size:0 .62em}
  to{background-size:100% .62em}
}
@keyframes heroDraw{            /* the rule is sketched */
  from{stroke-dashoffset:210}
  to{stroke-dashoffset:0}
}
@keyframes heroDrop{            /* a photo is laid down and settles */
  from{opacity:0;transform:translateY(-26px) rotate(calc(var(--rot,0deg) + 7deg)) scale(.94)}
  to{opacity:1;transform:translateY(0) rotate(var(--rot,0deg)) scale(1)}
}
@keyframes heroTape{            /* then taped into place */
  from{opacity:0;transform:translateX(-50%) rotate(var(--tape-rot,-3deg)) scaleX(.15)}
  to{opacity:1;transform:translateX(-50%) rotate(var(--tape-rot,-3deg)) scaleX(1)}
}
@keyframes heroChip{
  from{opacity:0;transform:translateY(12px) rotate(var(--rot,0deg))}
  to{opacity:1;transform:rotate(var(--rot,0deg))}
}
@keyframes heroStamp{           /* the seal is pressed on last */
  from{opacity:0;transform:rotate(var(--rot,-9deg)) scale(1.32)}
  to{opacity:1;transform:rotate(var(--rot,-9deg)) scale(1)}
}

.hero .hand{animation:heroWrite .58s var(--ease) .08s backwards}
.hero .display{animation:heroRise .62s var(--ease) .22s backwards}
.hero .display .marker{animation:heroSwipe .46s ease-out .80s backwards}
.hero-rule svg{stroke-dasharray:210;stroke-dashoffset:0;animation:heroDraw .7s var(--ease) .60s backwards}
.hero .lede{animation:heroRise .6s var(--ease) .72s backwards}

.hero-chips .chip{animation:heroChip .5s var(--ease-place) backwards}
.hero-chips .chip:nth-child(1){animation-delay:.90s}
.hero-chips .chip:nth-child(2){animation-delay:.97s}
.hero-chips .chip:nth-child(3){animation-delay:1.04s}

.hero-cta .btn{animation:heroRise .5s var(--ease) backwards}
.hero-cta .btn:nth-of-type(1){animation-delay:1.06s}
.hero-cta .btn:nth-of-type(2){animation-delay:1.14s}
.cta-arrow{animation:heroRise .5s var(--ease) 1.32s backwards}

.collage .polaroid{animation:heroDrop .68s var(--ease-place) backwards}
.collage .polaroid.collage-a{animation-delay:.30s}
.collage .polaroid.collage-b{animation-delay:.44s}
.collage .polaroid.collage-c{animation-delay:.58s}

.collage .polaroid .tape{animation:heroTape .3s var(--ease) backwards}
.collage .polaroid.collage-a .tape{animation-delay:.64s}
.collage .polaroid.collage-b .tape{animation-delay:.78s}
.collage .polaroid.collage-c .tape{animation-delay:.92s}

.collage .ndis-sticker{animation:heroRise .5s var(--ease) 1.08s backwards}
.collage .sticker{animation:heroStamp .5s var(--ease-place) 1.20s backwards}

/* ==========================================================================
   Hero depth — the collage tilts toward the pointer
   Parallax uses the independent `translate` property, so it never collides
   with the `transform` that carries each photo's resting angle and hover.
   Pointer devices only; --px/--py are set by scrapbook.js and default to 0.
   ========================================================================== */

.collage{
  perspective:1000px;
  transform:rotateY(calc(var(--px,0) * 2.1deg)) rotateX(calc(var(--py,0) * -2.1deg));
  transition:transform .4s ease-out;
}
.collage .polaroid,
.collage .sticker,
.collage .ndis-sticker{
  transition:translate .4s ease-out,transform 380ms var(--ease),box-shadow 380ms var(--ease);
}
/* different depths: the front card travels furthest */
.collage-a{--depth:11}
.collage-b{--depth:7}
.collage-c{--depth:17}
.collage .sticker{--depth:22}
.collage .ndis-sticker{--depth:5}

.collage .polaroid,
.collage .sticker,
.collage .ndis-sticker{
  translate:calc(var(--px,0) * var(--depth,0) * 1px) calc(var(--py,0) * var(--depth,0) * .6px);
}

@media (hover:none){
  .collage{transform:none}
  .collage .polaroid,.collage .sticker,.collage .ndis-sticker{translate:none}
}
@media (prefers-reduced-motion:reduce){
  .collage{transform:none!important}
  .collage .polaroid,.collage .sticker,.collage .ndis-sticker{translate:none!important}
}

/* Client review: readable forms and the approved vision and values. */
form .field > span, form .field label, form label.choice, form .choice > span,
form .consent, form .consent > span {font-family:Arial,sans-serif;font-size:1rem;line-height:1.5;font-style:normal}
.home-values > .wrap > h2{text-align:center;margin-bottom:2.5rem}
.vision-paper{position:relative;max-width:760px;margin:0 auto 3rem;padding:2.5rem;text-align:center;background:var(--rose-wash)}
.vision-paper h3{font-family:var(--display);font-size:2rem;margin:0 0 1rem}
.vision-paper p{font-size:1.2rem;color:var(--ink);margin:0}
.values-heading{text-align:center;font-size:2rem;margin:0 0 2rem}
.values-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem}
.values-list h4{font-family:var(--display);font-size:1.65rem;color:var(--rose-deep);margin:0 0 .8rem}
.values-list p{font-size:1rem;line-height:1.75;color:var(--ink-soft);margin:0}
.collage .polaroid figcaption{font-size:clamp(1.15rem,1.5vw,1.65rem);line-height:1.15;padding:.65rem .25rem .35rem;text-wrap:balance}
@media(max-width:900px){.values-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.values-list{grid-template-columns:1fr;gap:1.8rem}.vision-paper{padding:2rem 1.3rem}.collage .polaroid figcaption{font-size:1.15rem}}

/* Restore the original website's brand lettering, without handwriting. */
.wordmark span{font-family:var(--body);font-size:.5rem;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:var(--rose-deep);margin-top:.12rem}
.home-services h2{text-align:center;margin-bottom:3rem}
.home-service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem}
.home-service-grid .card{padding:2rem;min-width:0}
.home-service-grid h3{font-family:var(--display);font-size:1.8rem;line-height:1.15;margin:0 0 1rem}
.home-service-grid h3 a{color:var(--rose-deep);text-decoration:none}
.home-service-grid h3 a:hover{text-decoration:underline}
.home-service-more{text-align:center;margin-top:2.5rem}
@media(max-width:900px){.home-service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.home-service-grid{grid-template-columns:1fr}}