/* Same fonts as the homepage (trimmed to the characters the site uses) */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 400 800; font-display: block; src: url(fonts/bricolage-grotesque.woff2) format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 600; font-display: block; src: url(fonts/figtree.woff2) format("woff2"); }
@font-face { font-family: "Gochi Hand"; font-style: normal; font-weight: 400; font-display: block; src: url(fonts/gochi-hand.woff2) format("woff2"); }
@font-face { font-family: "Special Elite"; font-style: normal; font-weight: 400; font-display: block; src: url(fonts/special-elite.woff2) format("woff2"); }
  /* ===== Tokens — change the whole look from here ===== */
  :root {
    color-scheme: dark;
    --ground: #000000;        /* pure black */
    --ground-2: #0d0d13;      /* raised surfaces */
    --line: #1f1f2a;          /* hairlines */
    --ink: #eeebf2;           /* main text */
    --muted: #8d8a99;         /* secondary text */
    --pink: #f4a7c9;          /* pale hot pink */
    --blue: #8fb4d1;          /* pale ocean steel blue */
    --pink-deep: #e2799f;
    --display: "Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
    --body: "Figtree", "Segoe UI", system-ui, sans-serif;
    --hand: "Gochi Hand", "Comic Sans MS", cursive;
    --gutter: clamp(16px, 5vw, 64px);
    --max: 1180px;
  }

  html { background: var(--ground); scroll-behavior: smooth; }
  body {
    background: var(--ground);
    color: var(--ink);
    font: 400 17px/1.6 var(--body);
    position: relative;
    overflow-x: hidden;
    min-height: 100%;
  }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  /* ===== Background layers ===== */
  .crayon-clip { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
  #crayon {                 /* the squiggles: anchored top-right, drift down the page */
    position: absolute; inset: 0 0 auto auto;   /* width set by the script: just the right-hand strip */
    pointer-events: none; z-index: 0;
    will-change: transform;
  }
  #trail {                  /* cursor crayon trail: sits behind all text, cards and images */
    position: fixed; inset: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 0;
  }
  #tag { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; opacity: .85; }   /* chalk stick figures playing tag */
  #hearts { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }   /* easter egg: draw a heart */
  .floaters {               /* X / triangle / circle bouncing around the background (all screen sizes) */
    position: fixed; inset: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 0; display: block; opacity: .6;
  }
  @media (prefers-reduced-motion: reduce) { .floaters { display: none !important; } }

  /* ===== Layout ===== */
  .wrap { position: relative; z-index: 1; padding-inline: var(--gutter); }
  .inner { max-width: var(--max); margin-inline: auto; }

  /* Nav */
  .nav {
    position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5;
    padding-block: 18px;
    background: linear-gradient(var(--ground) 30%, transparent);
  }
  .nav .inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
  .mark {
    color: var(--ink); text-decoration: none;
    display: inline-flex; align-items: flex-start; gap: 8px;
  }
  /* Dygert signature: an original hand-drawn pen line in pure white that writes itself on load (and again on hover) */
  .mark .sig { display: block; height: 54px; width: auto; aspect-ratio: 242 / 100; overflow: visible; transform: rotate(-2deg); }
  @media (max-width: 560px) { .mark .sig { height: 46px; } .mark .sub { margin-top: 19px !important; } }
  .sig path {
    fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 1 1.1; stroke-dashoffset: 0;
    animation: sig-write var(--d) cubic-bezier(.45,.05,.55,.95) var(--w) both;
  }
  .mark:is(:hover, :focus-visible) .sig path { animation-name: sig-rewrite; }
  @keyframes sig-write { from { stroke-dashoffset: 1.02; } to { stroke-dashoffset: 0; } }
  @keyframes sig-rewrite { from { stroke-dashoffset: 1.02; } to { stroke-dashoffset: 0; } }
  @media (prefers-reduced-motion: reduce) { .sig path { animation: none !important; } }
  .mark .sub { font: 400 13px/1 "Special Elite", "Courier New", monospace; letter-spacing: .26em; text-transform: uppercase; color: var(--blue); margin-top: 24px; }   /* small typewriter caps */
  .links { display: flex; gap: clamp(14px, 3vw, 32px); list-style: none; margin: 0; padding: 0; }
  .links a {
    color: var(--muted); text-decoration: none; font-weight: 500; font-size: 15px;
    position: relative; transition: color .2s;
  }
  .links a:is(:hover, :focus-visible) { color: var(--ink); }
  .links a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
    background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .25s;
    border-radius: 2px;
  }
  .links a:is(:hover, :focus-visible)::after { transform: scaleX(1); }
  .links a[aria-current="page"] { color: var(--ink); }
  .links a[aria-current="page"]::after { transform: scaleX(1); background: var(--pink); }
  .subpage { padding-block: clamp(48px, 8vw, 110px) clamp(64px, 10vw, 140px); min-height: 55vh; }
  .subpage h2 { font-size: clamp(40px, 7vw, 84px); }
  .subpage .sec-head { flex-direction: column; align-items: flex-start; gap: 14px; }   /* keep copy on the left, clear of the crayon corner */

  @media (max-height: 500px) and (orientation: landscape) { .nav { position: relative; } }

  /* Phones: thumb-sized targets, full-width buttons, tighter type */
  @media (max-width: 560px) {
    .nav { padding-block: 12px 6px; background: linear-gradient(var(--ground) 84%, transparent); }
    .nav .inner { row-gap: 4px; }
    .links { gap: 4px; margin-left: -10px; }
    .links a { display: inline-block; padding: 10px; font-size: 16px; }
    .links a::after { left: 10px; right: 10px; bottom: 4px; }
    .eyebrow { letter-spacing: .08em; font-size: 12px; }
    .lede { margin-block: 22px 28px; }
    .hero .ctas, .contact .ctas { flex-direction: column; align-items: stretch; max-width: 420px; }
    .hero .ctas .btn, .contact .ctas .btn { justify-content: center; padding-block: 18px; font-size: 17px; }
    .card { padding: 12px 12px 20px; }
    input, textarea { font-size: 16px; }            /* stops iPhone zooming in on tap */
    footer .inner { flex-direction: column; align-items: flex-start; }
  }

  /* Hero */
  .hero { padding-block: clamp(56px, 12vw, 150px) clamp(48px, 8vw, 110px); }
  .eyebrow {
    font: 500 13px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--blue);
    margin: 0 0 22px;
  }
  h1 {
    font: 800 clamp(44px, 9vw, 118px)/.95 var(--display);
    letter-spacing: -.035em; margin: 0; max-width: 11ch; text-wrap: balance;
    font-variation-settings: "opsz" 96;   /* display cut at every size, so the drawn-in "outside" matches the words around it */
  }
  .scribble { position: relative; display: inline-block; color: var(--pink); white-space: nowrap; }
  .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* real word, for Google and screen readers */
  /* "outside" draws itself: each letter's outline is sketched in pink, then the letters fill in, then the underline goes under */
  .scribble .word { display: inline-block; overflow: visible; }
  .w-fill { fill: var(--pink); opacity: 0; animation: w-fill .45s ease 1.35s forwards; }
  .w-line use {
    fill: none; stroke: var(--pink); stroke-width: 22; stroke-linejoin: round; stroke-linecap: round;
    stroke-dasharray: 1 1.1; stroke-dashoffset: 1.02;
    animation: w-draw .55s cubic-bezier(.45,.05,.55,.95) calc(.25s + var(--i) * .13s) forwards, w-ink .4s ease 1.75s forwards;
  }
  @keyframes w-draw { to { stroke-dashoffset: 0; } }
  @keyframes w-fill { to { opacity: 1; } }
  @keyframes w-ink { to { stroke-opacity: 0; } }
  .scribble .underline {
    position: absolute; left: -4%; bottom: -.12em; width: 108%; height: .32em; overflow: visible;
  }
  .scribble .underline path {
    fill: none; stroke: var(--blue); stroke-width: 7; stroke-linecap: round;
    stroke-dasharray: 700; stroke-dashoffset: 0;
    animation: draw 1.4s cubic-bezier(.6,.1,.3,1) 1.6s both;
    filter: url(#rough);
  }
  @keyframes draw { from { stroke-dashoffset: 700; } to { stroke-dashoffset: 0; } }
  @media (prefers-reduced-motion: reduce) {
    .scribble .underline path { animation: none; }
    .w-fill { opacity: 1; animation: none; } .w-line { display: none; }
  }

  .lede {
    font-size: clamp(18px, 2vw, 21px); color: var(--muted); max-width: 46ch; margin: 30px 0 38px;
  }
  .lede strong { color: var(--ink); font-weight: 600; }

  .ctas { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
  .btn {
    --mx: 0px; --my: 0px;
    display: inline-flex; align-items: center; gap: 10px;
    font: 600 16px/1 var(--body); text-decoration: none; cursor: pointer;
    padding: 17px 26px; border-radius: 999px; border: 1.5px solid transparent;
    transform: translate(var(--mx), var(--my));
    transition: transform .25s cubic-bezier(.3,.7,.4,1.4), background .2s, color .2s, border-color .2s, box-shadow .25s;
  }
  /* crayon / chalk fill: the colour sits on a layer behind the label with waxy specks knocked out of it */
  .btn-primary, .btn-blue { background: transparent; position: relative; isolation: isolate; }
  .btn-primary::before, .btn-blue::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
    background: var(--fill);
    -webkit-mask: 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='.22 .95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 -10 8.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 160px 160px; mask: 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='.22 .95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 -10 8.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 160px 160px;
    filter: url(#rough);
  }
  .btn-primary { --fill: var(--pink); color: #1a0b12; }
  .btn-blue { --fill: var(--blue); color: #0b1620; }   /* same blue as the crayon lines */
  .btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
  .btn .arrow { transition: transform .25s; }
  @media (hover: hover) {   /* real mouse only: on phones a tap left these stuck on */
    .btn-primary:hover { box-shadow: 0 0 0 6px rgba(244,167,201,.14), 0 10px 40px -10px rgba(244,167,201,.6); }
    .btn-blue:hover { box-shadow: 0 0 0 6px rgba(143,180,209,.16), 0 10px 40px -10px rgba(143,180,209,.6); }
    .btn:hover .arrow { transform: translateX(4px); }
    .card:hover .visit { transform: translate(2px, -2px); }
  }
  .btn, .card, .links a, .mark { -webkit-tap-highlight-color: transparent; }   /* they have their own pressed looks */
  [tabindex="-1"]:focus { outline: none; }   /* headings that get focus when you switch pages (for screen readers) */

  /* Section headings */
  section { padding-block: clamp(56px, 9vw, 120px); }
  .sec-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; margin-bottom: 38px; }
  h2 { font: 800 clamp(32px, 5vw, 58px)/1 var(--display); letter-spacing: -.03em; margin: 0; text-wrap: balance; }
  .sec-head p { color: var(--muted); max-width: 38ch; margin: 0; }

  /* Work grid */
  .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 22px; }
  .card {
    --rx: 0deg; --ry: 0deg;
    position: relative; display: flex; flex-direction: column; gap: 16px;
    padding: 14px 14px 22px; border-radius: 18px;
    background: var(--ground-2); border: 1px solid var(--line);
    color: inherit; text-decoration: none;
    transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
    transition: transform .35s cubic-bezier(.2,.7,.3,1), border-color .25s;
    transform-style: preserve-3d;
  }
  .card:is(:hover, :focus-visible) { border-color: #3a3a52; outline: none; }
  .card:focus-visible { box-shadow: 0 0 0 2px var(--blue); }
  .shot {
    aspect-ratio: 16 / 10; max-width: 100%; border-radius: 10px; overflow: hidden;
    background: #0a0a10; border: 1px solid var(--line); position: relative;
  }
  .shot .bar { height: 22px; display: flex; gap: 6px; align-items: center; padding-inline: 10px; background: #111119; }
  .shot .bar i { width: 7px; height: 7px; border-radius: 50%; background: #2d2d3d; }
  .shot .page { position: absolute; inset: 22px 0 0 0; padding: 14px; display: grid; gap: 10px; align-content: start; }
  .blk { border-radius: 5px; background: #1a1a25; height: 10px; }
  .tw .shot { background: #111a14; }
  .shot .bar .url { margin-left: 8px; font-size: 10.5px; color: #6f7a73; letter-spacing: .02em; }
  /* Tree-Wright homepage, recreated from the live site with its real photo and logo */
  .tw-site { padding: 0 !important; gap: 0 !important; display: flex !important; flex-direction: column; }
  .tw-top { display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: #151a16; flex: none; }
  .tw-brand { display: grid; line-height: 1; }
  .tw-brand b { font: 700 9.5px/1 Georgia, "Times New Roman", serif; color: #f1ece2; }
  .tw-brand small { font-size: 4.5px; letter-spacing: .25em; color: #c9b27a; margin-top: 1px; }
  .tw-pills { margin-left: auto; display: flex; gap: 3px; }
  .tw-pills i { font-style: normal; font-size: 5.5px; font-weight: 600; color: #e9e4da; border: 1px solid #3a423c; border-radius: 99px; padding: 2px 5px; background: #1c221e; }
  .tw-hero-img {
    flex: 1; min-height: 0; overflow: hidden; position: relative; padding: 10px 10px; display: flex; flex-direction: column; justify-content: center; gap: 4px;
  }
  .card .tw-site .tw-hero-img p { margin: 0; max-width: none; }
  .card .tw-site .tw-eyebrow { font-size: 4.5px; font-weight: 700; letter-spacing: .18em; color: #eee8dc; }
  .card .tw-site .tw-h { font: 600 clamp(19px, 2.6vw, 24px)/.98 Georgia, "Times New Roman", serif; color: #fff; letter-spacing: -.01em; }
  .card .tw-site .tw-sub { font-size: 6px; line-height: 1.4; color: #e7e2d8; max-width: 26ch; }
  .tw-btn { align-self: flex-start; margin-top: 3px; background: #d97b55; color: #2a140b; font-size: 6px; font-weight: 700; border-radius: 99px; padding: 4px 16px; }
  .visit { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--pink); align-self: center; transition: transform .2s; }
  /* "Same info, everywhere": three listings, the wrong details get crossed out and fixed in crayon, then all check off */
  .gbp .sync { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 1fr auto; gap: 8px; padding: 12px 10px 10px; align-content: stretch; }
  .li { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0;
        padding: 8px 7px 9px; border-radius: 8px; background: #12121a; border: 1px solid var(--line); }
  .li .src { font: 600 8.5px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
  .li .th { flex: 1; min-height: 22px; max-height: 44px; border-radius: 5px; position: relative; overflow: hidden; }
  .th.map { background: repeating-linear-gradient(35deg, #17171f 0 7px, #1c1c27 7px 14px); }
  .th.map::after { content: ""; position: absolute; left: 44%; top: 26%; width: 11px; height: 11px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--pink); }
  .th.site { background: linear-gradient(135deg, #1b2530, #151a22); display: grid; gap: 4px; align-content: center; padding-inline: 7px; }
  .th.site .blk { height: 5px; background: #2a3644; border-radius: 3px; }
  .th.soc { background: linear-gradient(#1d1d2a 58%, #12121a 58%); }
  .th.soc::after { content: ""; position: absolute; left: 6px; bottom: 3px; width: 14px; height: 14px; border-radius: 50%; background: #12121a; border: 2px solid var(--blue); box-sizing: border-box; }
  .li .nm { font: 700 11px/1.1 var(--display); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .li .row { position: relative; padding-top: 14px; font: 500 9px/1 var(--body); color: #b9b6c4; white-space: nowrap; }
  .li .row s { text-decoration: none; position: relative; transition: color .3s; }
  .li .row s::after {       /* the crayon strike-through */
    content: ""; position: absolute; left: -2px; right: -2px; top: 40%; height: 2.5px; border-radius: 2px;
    background: var(--pink); transform: scaleX(0) rotate(-6deg); transform-origin: left center;
    filter: url(#rough); transition: transform .35s ease-out;
  }
  .li .row em {             /* the handwritten correction, written in left to right */
    position: absolute; left: 2px; top: -2px; font: 400 13px/1 var(--hand); font-style: normal; color: var(--blue);
    transform: rotate(-4deg); clip-path: inset(-4px 100% -4px 0); transition: clip-path .6s linear;
  }
  .li .ok { position: absolute; top: 5px; right: 5px; width: 14px; height: 14px; transform: scale(0); transition: transform .35s cubic-bezier(.3,1.7,.5,1); }
  .li .ok path { fill: none; stroke: var(--blue); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; filter: url(#rough); }
  .sync-note { grid-column: 1 / -1; justify-self: center; font: 400 19px/1 var(--hand); color: var(--pink); transform: rotate(-3deg); opacity: 0; transition: opacity .5s; }
  .gbp.play .f1 s { color: #5f5c6c; transition-delay: .7s; }
  .gbp.play .f1 s::after { transform: scaleX(1) rotate(-7deg); transition-delay: .7s; }
  .gbp.play .f1 em { clip-path: inset(-4px 0 -4px 0); transition-delay: 1.1s; }
  .gbp.play .f2 s { color: #5f5c6c; transition-delay: 1.9s; }
  .gbp.play .f2 s::after { transform: scaleX(1) rotate(-7deg); transition-delay: 1.9s; }
  .gbp.play .f2 em { clip-path: inset(-4px 0 -4px 0); transition-delay: 2.3s; }
  .gbp.play .ok { transform: scale(1); transition-delay: 3.1s; }
  .gbp.play .li:nth-child(2) .ok { transition-delay: 3.25s; }
  .gbp.play .li:nth-child(3) .ok { transition-delay: 3.4s; }
  .gbp.play .sync-note { opacity: 1; transition-delay: 3.7s; }
  .gbp.reset *, .gbp.reset *::after { transition: none !important; }
  .open .shot { border-style: dashed; border-color: #34344a; display: grid; place-items: center; }
  .open .shot span { font: 400 26px/1 var(--hand); color: var(--pink); transform: rotate(-5deg); }

  .card h3 { font: 600 22px/1.15 var(--display); letter-spacing: -.02em; margin: 0 6px; }
  .card p { margin: 0 6px; color: var(--muted); font-size: 15.5px; }
  .tags { display: flex; gap: 8px; flex-wrap: wrap; margin: 2px 6px 0; }
  .tag { font-size: 12px; font-weight: 600; letter-spacing: .04em; padding: 5px 10px; border-radius: 999px; border: 1px solid #2c2c3d; color: var(--blue); }
  .tag.pink { color: var(--pink); }

  /* Services */
  .services { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 0; border-top: 1px solid var(--line); }
  .svc { padding: 30px 26px 30px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
  .svc h3 { font: 600 24px/1.1 var(--display); letter-spacing: -.02em; margin: 0; display: flex; align-items: center; gap: 12px; }
  .svc h3 svg { width: 30px; height: 30px; flex: none; }
  .svc p { margin: 0; color: var(--muted); max-width: 34ch; }
  .svc .price, .care .price { color: var(--ink); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
  .svc .price { margin-top: auto; padding-top: 8px; }   /* prices line up across the row */
  .price b { font: 800 38px/1 var(--display); letter-spacing: -.03em; }
  .price span { font: 400 20px/1 var(--hand); color: var(--pink); }
  .price em { font: 400 18px/1 var(--hand); font-style: normal; color: var(--blue); border: 1.5px solid currentColor; border-radius: 999px; padding: 3px 10px 4px; transform: rotate(-3deg); align-self: center; }   /* bundle savings tag */
  .care {
    margin-top: 34px; padding: 26px 28px; border: 1.5px dashed #34344a; border-radius: 18px;
    display: flex; justify-content: space-between; align-items: center; gap: 18px 40px; flex-wrap: wrap;
  }
  .care h3 { font: 600 24px/1.1 var(--display); letter-spacing: -.02em; margin: 0 0 8px; }
  .care p { margin: 0; color: var(--muted); max-width: 52ch; }
  .care .price { margin: 0; }
  .fine { color: var(--muted); margin: 22px 0 0; max-width: 60ch; }
  .fine a { color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--pink); }
  .fine a:is(:hover, :focus-visible) { color: var(--pink); }

  /* Contact */
  .contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: clamp(28px, 5vw, 64px); align-items: start; }
  .contact h2 { max-width: 12ch; }
  .contact .aside { color: var(--muted); margin-top: 18px; max-width: 40ch; }
  form { display: grid; gap: 16px; }
  label { font-size: 14px; font-weight: 600; color: var(--muted); display: grid; gap: 8px; }
  input, textarea {
    font: 400 16px/1.4 var(--body); color: var(--ink);
    background: var(--ground-2); border: 1.5px solid var(--line); border-radius: 12px;
    padding: 14px 16px; width: 100%; box-sizing: border-box; transition: border-color .2s;
  }
  textarea { min-height: 120px; resize: vertical; }
  input:focus, textarea:focus { outline: none; border-color: var(--blue); }
  .form-msg { font: 400 20px/1.2 var(--hand); color: var(--pink); min-height: 1.2em; margin: 0; }
  .hp { display: none; }                                  /* spam trap: people never see it, bots fill it in */
  button[disabled] { opacity: .6; cursor: progress; }
  .reach { line-height: 1.9; }
  .reach a { color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--pink); transition: color .2s, border-color .2s; }
  .reach a:is(:hover, :focus-visible) { color: var(--pink); }
  .reach a:nth-of-type(2) { border-color: var(--blue); }
  .reach a:nth-of-type(2):is(:hover, :focus-visible) { color: var(--blue); }
  .reach .copied, .fine .copied { font: 400 18px/1 var(--hand); color: var(--blue); margin-left: 8px; display: inline-block; transform: rotate(-4deg); }
  /* computer visitors: clicking "Text me" shows the number in handwriting (and copies it) */
  .phone-note { font: 400 24px/1 var(--hand); color: var(--blue); transform: rotate(-4deg); margin-left: 6px; animation: pop-in .35s cubic-bezier(.3,1.6,.5,1); }
  .phone-note a { color: inherit; text-decoration: none; }
  .phone-note small { font-size: 16px; color: var(--pink); margin-left: 4px; }
  @keyframes pop-in { from { opacity: 0; transform: rotate(-4deg) scale(.6); } to { opacity: 1; transform: rotate(-4deg) scale(1); } }
  @media (prefers-reduced-motion: reduce) { .phone-note { animation: none; } }

  footer { padding-block: 40px 56px; color: var(--muted); font-size: 14px; border-top: 1px solid var(--line); }
  footer .inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
  .signoff { font: 400 22px/1 var(--hand); color: var(--ink); display: inline-flex; align-items: center; gap: 10px; }
  .infinity { width: 78px; height: 34px; overflow: visible; }
  .infinity path {
    fill: none; stroke-width: 7; stroke-linecap: round; filter: url(#rough);
    stroke-dasharray: 160; animation: draw-inf 1.6s ease-in-out both;
  }
  .infinity .loop-l { stroke: var(--pink); }
  .infinity .loop-r { stroke: var(--blue); animation-delay: .8s; }
  @keyframes draw-inf { from { stroke-dashoffset: 160; } to { stroke-dashoffset: 0; } }
  @media (prefers-reduced-motion: reduce) { .infinity path { animation: none !important; } }
  /* "Serving Newburgh · Beacon · the Hudson Valley" in the footer */
  .serving { color: var(--muted); font-size: 14px; }
  .serving a { color: var(--ink); text-decoration: none; border-bottom: 1.5px solid var(--line); transition: color .2s, border-color .2s; }
  .serving a:is(:hover, :focus-visible) { color: var(--pink); border-color: var(--pink); }

  html, body { margin: 0; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  /* ===== Town pages and case studies ===== */
  .page-hero { padding-block: clamp(48px, 9vw, 120px) clamp(24px, 4vw, 48px); }
  .page-hero h1 { font-size: clamp(40px, 7.4vw, 92px); max-width: 14ch; }
  .crumbs { font-size: 14px; color: var(--muted); margin: 0 0 18px; }
  .crumbs a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line); }
  .crumbs a:is(:hover, :focus-visible) { color: var(--ink); }
  .block { padding-block: clamp(36px, 6vw, 72px); border-top: 1px solid var(--line); }
  .block h2 { font-size: clamp(30px, 4.4vw, 50px); max-width: 20ch; margin-bottom: 22px; }
  .prose > * { max-width: 64ch; }
  .prose p { color: var(--muted); margin: 0 0 16px; }
  .prose p strong { color: var(--ink); font-weight: 600; }
  .prose a, .note a { color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--pink); }
  .prose a:is(:hover, :focus-visible), .note a:is(:hover, :focus-visible) { color: var(--pink); }
  .checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; max-width: 70ch; }
  .checks li { position: relative; padding-left: 34px; color: var(--muted); }
  .checks li b { color: var(--ink); font-weight: 600; }
  .checks li::before {      /* a crayon tick */
    content: ""; position: absolute; left: 2px; top: .38em; width: 16px; height: 9px;
    border-left: 3px solid var(--blue); border-bottom: 3px solid var(--blue); border-radius: 2px;
    transform: rotate(-48deg); filter: url(#rough);
  }
  .faq { display: grid; gap: 26px; max-width: 70ch; }
  .faq h3 { font: 600 21px/1.2 var(--display); letter-spacing: -.01em; margin: 0 0 8px; }
  .faq p { margin: 0; color: var(--muted); }
  .note { color: var(--muted); font-size: 14px; margin: 18px 0 0; max-width: 70ch; }
  .next { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; }
  .next p { margin: 0; color: var(--muted); max-width: 52ch; }
  .shot-lg { aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); max-width: 760px; }
  @media (max-width: 560px) { .page-hero .ctas { flex-direction: column; align-items: stretch; max-width: 420px; } .page-hero .ctas .btn { justify-content: center; padding-block: 18px; font-size: 17px; } }