/* Texas Wonder Face Painting
   ---------------------------------------------------------------------------
   Styled from Tierney's logo: a watercolour Texas in warm orange with a heavy
   navy outline, sitting on cream paper, surrounded by loose paint splatter in
   coral, teal, blue and green. Black brush lettering with a turquoise glow.

   Three things carry that identity here:
     1. CREAM PAPER, not white. The logo's ground is a warm off-white board and
        it is most of why the thing feels hand-made rather than printed.
     2. THE TURQUOISE GLOW on headings, reproduced with layered text-shadow —
        the single most recognisable detail in the mark.
     3. WATERCOLOUR WASHES as real shapes rather than flat panels, drawn as
        inline SVG so there is not one external request on the page.

   No webfonts and no remote assets on purpose: the site stays fast, works
   offline-ish, and leaks nothing to a third party. */

:root{
  /* Straight off the logo */
  --paper:#f7edda;          /* cream board */
  --paper-deep:#f0e2c6;     /* the warmer edge of it */
  --navy:#1e3a6e;           /* the Texas outline */
  --navy-soft:#38558c;
  --ink:#14213d;
  --ink-soft:#4a5878;
  --orange:#f2a13a;         /* the state fill */
  --orange-deep:#e0762a;
  --coral:#e0503c;          /* top-right splatter */
  --teal:#33cfc2;           /* the lettering glow */
  --teal-deep:#1a9d95;
  --blue:#4a7fbd;           /* lower-left wash */
  --green:#5a9e56;          /* lower-right wash */
  --ok:#1b7f5a; --bad:#b3261e;
  --r:16px;
  --shadow:0 3px 14px rgba(30,58,110,.10);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0; color:var(--ink);
  font:16px/1.65 "Trebuchet MS","Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif;
  /* Paper grain: fractal noise at very low opacity over the cream. Costs one
     inline SVG and stops the background reading as a flat web colour. */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.33 0 0 0 0 0.18 0 0 0 0.055 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E"),
    /* Washes across the whole page, not only the hero — below the fold the cream was bare. Fixed
       attachment so they behave like paint on the board rather than scrolling wallpaper. */
    radial-gradient(closest-side at 6% 24%,  rgba(51,207,194,.20), transparent 62%),
    radial-gradient(closest-side at 96% 34%, rgba(224,80,60,.18),  transparent 62%),
    radial-gradient(closest-side at 12% 62%, rgba(242,161,58,.18), transparent 62%),
    radial-gradient(closest-side at 88% 74%, rgba(90,158,86,.18),  transparent 62%),
    radial-gradient(closest-side at 44% 88%, rgba(74,127,189,.18), transparent 64%),
    linear-gradient(180deg,var(--paper) 0%,var(--paper-deep) 100%);
  background-attachment:fixed;
}

/* Spatter over the whole page too, at low opacity, so no band of the page is bare cream. */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.42;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='900'%3E%3Cg fill='%231e3a6e' opacity='0.45'%3E%3Ccircle cx='90' cy='140' r='5'/%3E%3Ccircle cx='130' cy='180' r='2.5'/%3E%3Ccircle cx='210' cy='96' r='3'/%3E%3Ccircle cx='980' cy='210' r='6'/%3E%3Ccircle cx='1040' cy='260' r='3'/%3E%3Ccircle cx='930' cy='300' r='2.5'/%3E%3Ccircle cx='420' cy='700' r='4.5'/%3E%3Ccircle cx='470' cy='740' r='2'/%3E%3Ccircle cx='760' cy='640' r='5'/%3E%3Ccircle cx='820' cy='700' r='2.5'/%3E%3Ccircle cx='300' cy='420' r='3'/%3E%3Ccircle cx='640' cy='860' r='4'/%3E%3C/g%3E%3Cg fill='%23e0503c' opacity='0.5'%3E%3Ccircle cx='880' cy='90' r='4.5'/%3E%3Ccircle cx='840' cy='140' r='2'/%3E%3Ccircle cx='1100' cy='420' r='3.5'/%3E%3Ccircle cx='160' cy='520' r='3'/%3E%3Ccircle cx='540' cy='260' r='2.5'/%3E%3Ccircle cx='1020' cy='760' r='4'/%3E%3C/g%3E%3Cg fill='%2333cfc2' opacity='0.55'%3E%3Ccircle cx='250' cy='560' r='4'/%3E%3Ccircle cx='300' cy='620' r='2'/%3E%3Ccircle cx='60' cy='340' r='3'/%3E%3Ccircle cx='700' cy='420' r='3.5'/%3E%3Ccircle cx='1140' cy='140' r='2.5'/%3E%3Ccircle cx='480' cy='120' r='3'/%3E%3C/g%3E%3Cg fill='%235a9e56' opacity='0.45'%3E%3Ccircle cx='900' cy='520' r='4'/%3E%3Ccircle cx='120' cy='800' r='3.5'/%3E%3Ccircle cx='600' cy='560' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
  background-size:1200px 900px;
}

.wrap{max-width:1060px;margin:0 auto;padding:0 22px}
.narrow{max-width:740px}
.section{padding:60px 22px;position:relative}

/* ── Lettering ───────────────────────────────────────────────────────────────
   The logo sets black brush caps ringed in turquoise. Layered text-shadow gets
   the ring without -webkit-text-stroke, which would thin the glyphs. */
h1,h2,h3{line-height:1.15;margin:0 0 .5em;font-weight:800}
h1,h2{
  text-transform:uppercase; letter-spacing:.005em; color:#101a2e;
  text-shadow:
     2px 0 0 var(--teal), -2px 0 0 var(--teal),
     0 2px 0 var(--teal),  0 -2px 0 var(--teal),
     2px 2px 0 var(--teal), -2px -2px 0 var(--teal),
     2px -2px 0 var(--teal), -2px 2px 0 var(--teal),
     0 5px 16px rgba(30,58,110,.20);
}
h1{font-size:clamp(2.3rem,7vw,4rem)}
h2{font-size:clamp(1.5rem,3.6vw,2.1rem)}
h3{color:var(--navy);font-size:1.1rem;text-transform:none}

a{color:var(--navy);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{color:var(--coral)}

.skip{position:absolute;left:-9999px}
.skip:focus{left:14px;top:14px;background:#fff;padding:10px 14px;border-radius:10px;z-index:20}

/* ── Hero ────────────────────────────────────────────────────────────────────
   Watercolour blooms placed the way the logo places them: coral top-right,
   blue lower-left, green lower-right, teal upper-left. Big, soft, overlapping. */
.hero{
  position:relative; overflow:hidden;
  padding:86px 0 74px;
  border-bottom:4px solid var(--navy);
  background:
    radial-gradient(closest-side at 88% 6%,  rgba(224,80,60,.42), transparent 72%),
    radial-gradient(closest-side at 8% 14%,  rgba(51,207,194,.32), transparent 70%),
    radial-gradient(closest-side at 16% 96%, rgba(74,127,189,.36), transparent 72%),
    radial-gradient(closest-side at 92% 92%, rgba(90,158,86,.32), transparent 72%),
    radial-gradient(closest-side at 50% 46%, rgba(242,161,58,.30), transparent 76%),
    /* Three more, added 2026-07-30 — the cream was reading as empty between the corners. */
    radial-gradient(closest-side at 68% 30%, rgba(51,207,194,.26), transparent 68%),
    radial-gradient(closest-side at 30% 62%, rgba(224,118,42,.24), transparent 70%),
    radial-gradient(closest-side at 78% 66%, rgba(74,127,189,.22), transparent 68%);
}
/* Loose spatter flecks, as the logo has scattered over the wash. */
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.55;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='600'%3E%3Cg fill='%231e3a6e' opacity='0.5'%3E%3Ccircle cx='120' cy='90' r='5'/%3E%3Ccircle cx='150' cy='120' r='2.5'/%3E%3Ccircle cx='96' cy='140' r='3'/%3E%3Ccircle cx='760' cy='160' r='6'/%3E%3Ccircle cx='800' cy='120' r='3'/%3E%3Ccircle cx='735' cy='205' r='2.5'/%3E%3Ccircle cx='300' cy='500' r='4'/%3E%3Ccircle cx='340' cy='540' r='2'/%3E%3Ccircle cx='640' cy='470' r='5'/%3E%3Ccircle cx='680' cy='520' r='2.5'/%3E%3Ccircle cx='200' cy='250' r='3.5'/%3E%3Ccircle cx='450' cy='150' r='2.5'/%3E%3Ccircle cx='560' cy='300' r='4'/%3E%3Ccircle cx='860' cy='380' r='3'/%3E%3Ccircle cx='420' cy='580' r='2.5'/%3E%3C/g%3E%3Cg fill='%23e0503c' opacity='0.55'%3E%3Ccircle cx='700' cy='70' r='4'/%3E%3Ccircle cx='660' cy='110' r='2'/%3E%3Ccircle cx='820' cy='230' r='3'/%3E%3Ccircle cx='520' cy='60' r='2.5'/%3E%3Ccircle cx='880' cy='500' r='3.5'/%3E%3C/g%3E%3Cg fill='%2333cfc2' opacity='0.6'%3E%3Ccircle cx='200' cy='420' r='3.5'/%3E%3Ccircle cx='240' cy='380' r='2'/%3E%3Ccircle cx='60' cy='300' r='3'/%3E%3Ccircle cx='380' cy='330' r='2.5'/%3E%3Ccircle cx='90' cy='480' r='3'/%3E%3C/g%3E%3Cg fill='%235a9e56' opacity='0.5'%3E%3Ccircle cx='620' cy='560' r='3.5'/%3E%3Ccircle cx='780' cy='540' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
  background-size:cover;
}
.hero .wrap{position:relative;z-index:1}

.eyebrow{
  margin:0 0 12px;font-size:.8rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--navy);
}
/* The logo is a square, centred mark — left-aligning it against a full-width wash left the hero
   looking lopsided. Centre the mark, the opening paragraph and the call to action together. */
.hero{text-align:center}
.lede{
  font-size:1.15rem;color:var(--ink-soft);font-weight:500;
  max-width:58ch;margin-left:auto;margin-right:auto;
}
.cta-row{margin-top:28px;display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
/* Everything below the hero stays left-aligned — centred body copy is harder to read. */
main,footer{text-align:left}

/* ── Buttons: orange paint with a navy edge, like the state in the mark ─────── */
.btn{
  display:inline-block;padding:14px 28px;border-radius:999px;text-decoration:none;
  font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:.92rem;
  background:linear-gradient(160deg,var(--orange),var(--orange-deep));
  color:#fff8ea; border:3px solid var(--navy);
  box-shadow:0 3px 0 var(--navy);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 5px 0 var(--navy);color:#fff}
.btn:active{transform:translateY(1px);box-shadow:0 1px 0 var(--navy)}

/* ── Cards ─────────────────────────────────────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.card{
  background:rgba(255,255,255,.80); border:3px solid var(--navy); border-radius:var(--r);
  padding:22px; box-shadow:var(--shadow); position:relative;
}
/* A brushed colour bar on each card, cycling the logo's palette. */
.card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:7px;
  border-radius:12px 12px 0 0;background:var(--orange);
}
.card:nth-child(2)::before{background:var(--teal)}
.card:nth-child(3)::before{background:var(--coral)}
.card:nth-child(4)::before{background:var(--blue)}
.card:nth-child(5)::before{background:var(--green)}
.card p{margin:0 0 .6em;color:var(--ink-soft);font-size:.97rem}
.price{font-weight:800;color:var(--navy);font-size:1rem}

.areas{
  margin-top:24px;padding:16px 20px;border-radius:var(--r);
  border:3px dashed var(--navy); background:rgba(255,255,255,.62);
  color:var(--ink-soft);font-size:.96rem;
}
.areas strong{color:var(--navy);text-transform:uppercase;letter-spacing:.06em;font-size:.82rem;margin-right:8px}

/* ── Gallery placeholders ──────────────────────────────────────────────────── */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:14px;margin-top:16px}
.shot{
  aspect-ratio:1/1;border-radius:var(--r);border:3px dashed var(--navy);
  background:
    radial-gradient(closest-side at 30% 25%, rgba(242,161,58,.35), transparent 70%),
    radial-gradient(closest-side at 75% 70%, rgba(51,207,194,.32), transparent 70%),
    rgba(255,255,255,.5);
  display:grid;place-items:center;color:var(--navy);opacity:.85;
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
}

/* ── FAQ ───────────────────────────────────────────────────────────────────── */
details{
  border:3px solid var(--navy);border-radius:var(--r);background:rgba(255,255,255,.78);
  padding:15px 20px;margin-bottom:12px;
}
summary{cursor:pointer;font-weight:800;color:var(--navy)}
summary::marker{color:var(--teal)}
details p{color:var(--ink-soft);margin:.7em 0 0}

/* ── Form ──────────────────────────────────────────────────────────────────── */
form{margin-top:20px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
label{display:block;margin-bottom:18px;font-weight:700;font-size:.9rem;color:var(--navy);
      text-transform:uppercase;letter-spacing:.05em}
input,select,textarea{
  width:100%;margin-top:7px;padding:12px 14px;font:inherit;font-weight:400;font-size:1rem;
  text-transform:none;letter-spacing:normal;color:var(--ink);
  border:3px solid var(--navy);border-radius:12px;background:#fffdf7;
}
input:focus,select:focus,textarea:focus{outline:4px solid rgba(51,207,194,.55);border-color:var(--teal-deep)}
textarea{resize:vertical}
.req{color:var(--coral)}
button[type=submit]{
  padding:15px 34px;border-radius:999px;border:3px solid var(--navy);
  background:linear-gradient(160deg,var(--orange),var(--orange-deep));
  color:#fff8ea;font:inherit;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  cursor:pointer;box-shadow:0 3px 0 var(--navy);
}
button[type=submit]:hover{transform:translateY(-2px);box-shadow:0 5px 0 var(--navy)}
.hp{position:absolute;left:-9999px}   /* honeypot: off-screen, never seen, never tabbed to */

.note{color:var(--ink-soft);font-size:.92rem}
.placeholder{color:var(--ink-soft);border-left:5px solid var(--orange);padding-left:16px;font-style:italic}
.ok{background:rgba(51,207,194,.18);border:3px solid var(--teal-deep);color:#0f5f57;padding:18px 20px;border-radius:var(--r)}
.bad{background:rgba(224,80,60,.13);border:3px solid var(--coral);color:#8d2418;padding:14px 20px;border-radius:var(--r)}
.bad ul{margin:0;padding-left:22px}

/* ── Footer: the navy band the logo's outline suggests ─────────────────────── */
footer{
  margin-top:36px;padding:34px 0;background:var(--navy);color:#e9f2ff;
  border-top:6px solid var(--teal);
}
footer p{margin:.35em 0;color:#c9dcf5}
footer strong{color:#fff;text-transform:uppercase;letter-spacing:.05em}
footer a{color:var(--teal);text-decoration:none;font-weight:700}
footer a:hover{color:var(--orange);text-decoration:underline}
.small{font-size:.86rem;color:#9fb8d8!important}

@media (max-width:620px){
  .row{grid-template-columns:1fr}
  .section{padding:44px 20px}
  .hero{padding:62px 0 54px}
  h1,h2{text-shadow:1.5px 0 0 var(--teal),-1.5px 0 0 var(--teal),0 1.5px 0 var(--teal),0 -1.5px 0 var(--teal),0 4px 12px rgba(30,58,110,.2)}
}
@media (prefers-reduced-motion:no-preference){
  .btn,button[type=submit]{transition:transform .12s ease, box-shadow .12s ease, background .2s ease}
}

/* Her actual logo, used in place of the text treatment as soon as
   public/assets/logo.png exists. Sized so the square mark does not swamp the
   fold on a phone. */
.logo{
  display:block;width:min(420px,82vw);height:auto;margin:0 auto 18px;
  border-radius:var(--r);border:4px solid var(--navy);box-shadow:0 4px 0 var(--navy);
}

/* ── Gallery ─────────────────────────────────────────────────────────────────
   The front page shows a fixed THREE across, as asked. The gallery page fills
   the width responsively, because twenty pictures in three columns would be a
   very long page on a desktop. */
.grid{display:grid;gap:14px;margin-top:16px}
.grid-3{grid-template-columns:repeat(3,1fr)}
#gal{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}

.shot{
  aspect-ratio:1/1;border-radius:var(--r);overflow:hidden;
  border:3px solid var(--navy);box-shadow:0 3px 0 var(--navy);
  padding:0;background:rgba(255,255,255,.5);display:block;
}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
button.shot{cursor:zoom-in;font:inherit}
a.shot{text-decoration:none}
.shot:hover{transform:translateY(-3px);box-shadow:0 6px 0 var(--navy)}
.shot:focus-visible{outline:4px solid var(--teal);outline-offset:3px}

/* Empty-state tiles keep the dashed placeholder look. */
a.shot[aria-hidden]{
  border-style:dashed;box-shadow:none;display:grid;place-items:center;
  color:var(--navy);opacity:.8;font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;
  background:
    radial-gradient(closest-side at 30% 25%, rgba(242,161,58,.35), transparent 70%),
    radial-gradient(closest-side at 75% 70%, rgba(51,207,194,.32), transparent 70%),
    rgba(255,255,255,.5);
}
a.shot[aria-hidden]:hover{transform:none;box-shadow:none}

/* ── Lightbox ──────────────────────────────────────────────────────────────── */
.lb{
  position:fixed;inset:0;z-index:60;display:grid;place-items:center;
  background:rgba(20,33,61,.94);padding:24px;cursor:zoom-out;
}
.lb[hidden]{display:none}
.lb img{
  max-width:100%;max-height:82vh;border-radius:var(--r);
  border:4px solid var(--teal);box-shadow:0 10px 40px rgba(0,0,0,.5);background:#fff;
}
.lbcap{
  margin:14px 0 0;color:#dcecff;font-size:.9rem;text-align:center;
  text-transform:capitalize;letter-spacing:.02em;
}
.lbclose{
  position:absolute;top:16px;right:20px;width:46px;height:46px;border-radius:50%;
  border:3px solid var(--teal);background:rgba(255,255,255,.10);color:#fff;
  font-size:1.6rem;line-height:1;cursor:pointer;
}
.lbclose:hover{background:var(--coral);border-color:var(--coral)}
body.noscroll{overflow:hidden}

.hero-slim{padding:52px 0 44px}
.hero-slim .eyebrow a{color:var(--navy);text-decoration:none}
.hero-slim .eyebrow a:hover{color:var(--coral);text-decoration:underline}

@media (max-width:520px){
  .grid-3{grid-template-columns:repeat(3,1fr);gap:8px}   /* keep 3 across, just tighter */
  #gal{grid-template-columns:repeat(2,1fr)}
}

/* One flat rate covers everything but the bagpiper, so it gets a band of its own above the cards
   rather than being repeated on each. Orange because it is the commercial fact on the page. */
.pricing{
  margin: 0 0 22px; padding: 14px 20px; border-radius: var(--r);
  border: 3px solid var(--navy); background: rgba(242,161,58,.20);
  color: var(--ink); font-weight: 700; font-size: 1.02rem;
}

/* ── The full-width card ──────────────────────────────────────────────────────
   The bagpiper is not like the others — it is a different kind of booking at a
   different rate — so it spans every column instead of sitting in the grid as
   one more equal tile. Driven by a 'wide' flag in config, not by matching the
   service name, so renaming the service cannot silently break the layout. */
.card.wide{
  grid-column: 1 / -1;
  /* Extra room above so the separator has somewhere to sit, and so the card reads as a section of
     its own rather than the last tile in the grid. */
  margin-top: 26px;
  background: rgba(255,255,255,.90);
  box-shadow: 0 4px 0 var(--navy), var(--shadow);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 26px;
  align-items: center;
}
.card.wide::before{ background: var(--teal); }      /* its own colour, not the cycling palette */

/* Separator above the wide card. Drawn as ::after (::before is the colour bar) and positioned up
   into the margin, so it spans the full grid width without needing a wrapper element. */
.card.wide::after{
  content: "";
  position: absolute;
  left: 0; right: 0; top: -17px;
  height: 3px; border-radius: 2px;
  background: var(--navy);
  opacity: .28;
}
.card.wide h3{ grid-column: 1; margin-bottom: .25em; font-size: 1.25rem; }
.card.wide p{ grid-column: 1; margin: 0; }
.card.wide .price{
  grid-column: 2; grid-row: 1 / span 2; align-self: center;
  font-size: 1.12rem; white-space: nowrap;
  padding-left: 22px; border-left: 3px solid var(--line);
}
@media (max-width: 620px){
  /* Stacked on a phone: a nowrap price beside the text would force a sideways scroll. */
  .card.wide{ grid-template-columns: 1fr; }
  .card.wide .price{
    grid-column: 1; grid-row: auto; padding-left: 0; border-left: 0;
    margin-top: 10px; padding-top: 10px; border-top: 3px solid var(--line);
  }
}

/* Tierney's own words. Slightly larger and looser than the surrounding copy — this is the part a
   parent actually reads before deciding, so it should feel like someone talking rather than
   marketing filler. The first line gets a touch more weight to draw the eye in. */
.about{ font-size: 1.04rem; line-height: 1.75; color: var(--ink-soft); margin: 0 0 1.05em; }
.about:first-of-type{ color: var(--ink); font-size: 1.1rem; }
.about:last-child{ margin-bottom: 0; }