/* Hegarty House / Sean Hegarty — shared house stylesheet v3.1 (26 Oct 2026)
   Brand Style Guide v1.4 + Branded House standard. Local only: no CDN, no web fonts.
   Motion model: the static page is the product. JS adds html.motion-on only when the
   visitor's OS allows motion AND they have not switched it off; html.motion-off otherwise. */

:root{
  --navy:#0B1F3A; --deep:#132D4F; --navy-light:#193957;
  --gold:#E8A870; --thread:#E8A870; --ember:#C24F2F;
  --mist:#EEF3F8; --slate:#4E6075; --line:#CCD7E3; --white:#FFFFFF;
  --focus:#5A86B5; --ink:#102036;
  --uw-purple:#550091; --uw-violet:#1E0A46; --uw-mauve:#F495F9;
  --sans:Arial,Helvetica,sans-serif;
  --serif:Georgia,"Times New Roman",serif;
  --max:1180px; --measure:62ch;
  --gutter:clamp(16px,4vw,40px);
  --space:clamp(64px,9vw,128px);
  --arch:999px 999px 28px 28px;
  --ease:cubic-bezier(.22,.8,.24,1);
}

*,*::before,*::after{box-sizing:border-box}
html{font-size:100%;-webkit-text-size-adjust:100%;scroll-padding-top:96px}
@media (prefers-reduced-motion:no-preference){html:not(.motion-off){scroll-behavior:smooth}}
body{margin:0;background:var(--white);color:var(--ink);font:400 1.125rem/1.65 var(--sans);letter-spacing:0}
::selection{background:var(--gold);color:var(--navy)}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
p{margin:0 0 1em}
figure{margin:0}
h1,h2,h3{margin:0;color:inherit;line-height:1.08}
h1{font:400 clamp(2.75rem,7vw,5.75rem)/1.02 var(--serif);letter-spacing:-.02em}
h2{font:700 clamp(2rem,4.4vw,3.5rem)/1.06 var(--sans);letter-spacing:-.02em}
h2.serif{font-family:var(--serif);font-weight:400}
h3{font:700 1.375rem/1.25 var(--sans)}
h1,h2,h3{overflow-wrap:break-word}
/* Grid columns may shrink below their content (keeps 200% text and narrow screens inside the page) */
[class*="-grid"] > *{min-width:0}
ul{margin:0;padding:0}
.wrap{width:min(100% - 2*var(--gutter),var(--max));margin-inline:auto}
.measure{max-width:var(--measure)}
.lede{font-size:clamp(1.1875rem,1.6vw,1.375rem);line-height:1.6}
.small{font-size:1rem}
.muted{color:var(--slate)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Focus: clear, never colour-only */
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}
.ground-navy :focus-visible,.site-header :focus-visible,.site-footer :focus-visible,.ground-uw :focus-visible{outline-color:var(--gold)}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--white);color:var(--navy);padding:10px 16px;font-weight:700}
.skip:focus{top:12px}

/* Section grounds — adjacent zones never share a ground */
.ground-white{background:var(--white);color:var(--ink)}
.ground-mist{background:var(--mist);color:var(--ink)}
.ground-navy{background:var(--navy);color:var(--white)}
.ground-navy .muted{color:#C7D3E0}
.ground-uw{background:var(--uw-purple);color:var(--white)}
section{position:relative;padding-block:var(--space)}

/* Broad curved section boundaries. Three silhouettes so the page never stripes mechanically:
   default bowl, sweep-l (rises to the left), sweep-r (rises to the right). */
.curve-top{padding-top:calc(var(--space) + 40px)}
.curve-top::before{content:"";position:absolute;left:0;right:0;top:-1px;height:clamp(40px,6vw,90px);
  background:var(--prev,var(--white));border-radius:0 0 50% 50%/0 0 100% 100%}
.curve-top.sweep-r::before{border-radius:0 0 100% 0/0 0 100% 0}
.curve-top.sweep-l::before{border-radius:0 0 0 100%/0 0 0 100%}
.prev-white{--prev:var(--white)} .prev-mist{--prev:var(--mist)} .prev-navy{--prev:var(--navy)} .prev-uw{--prev:var(--uw-purple)}

/* ---------- Header ---------- */
.site-header{background:var(--navy);color:var(--white);position:sticky;top:0;z-index:50;border-bottom:1px solid rgba(255,255,255,.08)}
.site-header .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;min-height:76px;padding-block:6px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:0 0 auto}
.brand img.wordmark{width:clamp(164px,18vw,214px);height:auto}
.nav{margin-left:auto;display:flex;align-items:center;gap:6px}
.nav a{text-decoration:none;font-size:1rem;padding:10px 12px;border-radius:8px;color:#E6EDF5}
.nav a:hover{color:var(--white);background:rgba(255,255,255,.07)}
.nav a[aria-current]{color:var(--white);box-shadow:inset 0 -2px 0 var(--gold)}
.nav .btn{margin-left:10px;color:var(--text);background:var(--face);padding:10px 18px;border-radius:6px}
.nav .btn:hover,.nav .btn:focus-visible{background:var(--wash);color:var(--text)}
.btn.head-cta{display:none}
.menu-btn{display:none;background:none;border:1px solid rgba(255,255,255,.35);color:var(--white);
  font:700 0.9375rem var(--sans);padding:10px 14px;border-radius:10px;cursor:pointer;min-height:44px}
@media (max-width:900px){
  .js .menu-btn{display:inline-flex;align-items:center;gap:8px}
  .js .btn.head-cta{display:inline-flex;margin-left:auto}
  .js .nav{display:none}
  .js .nav.open{display:flex}
  .nav{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;
       background:var(--navy);padding:8px var(--gutter) 22px;border-top:1px solid rgba(255,255,255,.1)}
  html:not(.js) .nav{position:static;padding:0 0 14px;border:0;flex-direction:row;flex-wrap:wrap}
  html:not(.js) .site-header .wrap{flex-wrap:wrap}
  .nav a{padding:14px 4px;border-bottom:1px solid rgba(255,255,255,.08);border-radius:0;font-size:1.125rem}
  .nav a[aria-current]{box-shadow:inset 3px 0 0 var(--gold);padding-left:14px}
  .nav .btn{margin:16px 0 0;align-self:flex-start;border:1.5px solid var(--edge);border-radius:6px;padding:12px 20px}
}
@media (max-width:420px){.js .head-cta .label-long{display:none}}
@media (max-width:370px){.js .btn.head-cta{display:none}.js .menu-btn{margin-left:auto}.brand img.wordmark{width:150px}}

/* ---------- CTA button — matches the live hegartyhouse.co.uk button ----------
   Rounded rectangle, Paper White face, Lion Gold edge. Hover/focus: warm wash, gold highlight
   offset beneath, soft gold glow, small lift (lift only when motion is allowed). */
.btn{--edge:var(--gold);--face:var(--white);--text:var(--navy);--wash:#FBF0E6;--glow:rgba(232,168,112,.55);
  display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:48px;padding:14px 20px;
  border:1.5px solid var(--edge);border-radius:6px;background:var(--face);color:var(--text);
  font:700 1rem/1.2 var(--sans);text-decoration:none;cursor:pointer;
  box-shadow:2px 3px 0 transparent;
  transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease,color .18s ease}
.btn .arrow{font-size:1.3125rem;line-height:.75;flex:none;transition:transform .18s ease}
.btn:hover,.btn:focus-visible{background:var(--wash);box-shadow:3px 4px 0 var(--edge),0 10px 24px -8px var(--glow)}
.btn:active{box-shadow:0 1px 0 var(--edge)}
html:not(.motion-off) .btn:hover,html:not(.motion-off) .btn:focus-visible{transform:translate(-2px,-2px)}
html:not(.motion-off) .btn:hover .arrow{transform:translateX(3px)}
html:not(.motion-off) .btn:active{transform:translate(0,1px)}
/* Gold fill variant for the single most important action on a section */
.btn--gold{--face:var(--gold);--wash:var(--white);box-shadow:3px 4px 0 rgba(148,85,43,.27)}
.btn--gold:hover,.btn--gold:focus-visible{box-shadow:4px 5px 0 var(--gold),0 10px 24px -8px var(--glow)}
.btn--light{}
.btn--small{min-height:44px;padding:10px 16px;gap:10px;font-size:.9375rem}
.btn--uw{--edge:var(--uw-mauve);--text:var(--uw-purple);--wash:#FBE3FC;--glow:rgba(244,149,249,.6)}
@media (prefers-reduced-motion:reduce){
  html:not(.motion-on) .btn:hover,html:not(.motion-on) .btn:focus-visible,html:not(.motion-on) .btn:active,
  html:not(.motion-on) .btn:hover .arrow{transform:none}
}

/* Thread links: real links, Golden Thread underline draws on hover */
.thread{display:inline-block;line-height:1.5;text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:5px;
  font-weight:700;background:linear-gradient(var(--gold),var(--gold)) no-repeat 0 100%/0 2px;transition:background-size .3s ease}
.thread:hover{background-size:100% 2px;text-decoration-color:transparent}
.ground-navy .thread,.ground-uw .thread{color:var(--white)}

/* Golden Thread drawing */
.gt path{fill:none;stroke:var(--thread);stroke-width:3;stroke-linecap:round}

/* ---------- Photo treatments: people first, no window frames ----------
   stage  = a transparent cut-out of a person stepping out of a navy plate (head breaks the top edge)
   leaf   = two big opposing curves, two tight corners (calm, organic, not bubbly)
   pebble = soft irregular round for supporting photos
   round  = circle, used for small portraits and overlaps */
.stage{position:relative;isolation:isolate}
.stage .plate{position:absolute;left:0;right:0;bottom:0;height:74%;background:var(--navy);
  border-radius:54% 46% 44% 56%/60% 52% 48% 40%;z-index:-2}
.stage .plate--gold{background:var(--gold)}
.stage .gt{position:absolute;z-index:-1;pointer-events:none}
.stage img.cutout{position:relative;display:block;width:100%;height:auto;filter:drop-shadow(0 22px 26px rgba(11,31,58,.22))}
.leaf{border-radius:clamp(56px,11vw,170px) 16px;overflow:hidden;background:var(--mist)}
.leaf.flip{border-radius:16px clamp(56px,11vw,170px)}
.band{aspect-ratio:21/8;width:100%}
@media (max-width:640px){.band{aspect-ratio:16/9}}
.pebble{border-radius:48% 52% 44% 56%/54% 46% 54% 46%;overflow:hidden;background:var(--mist)}
.round{border-radius:50%;overflow:hidden;background:var(--mist)}
.leaf img,.pebble img,.round img{display:block;width:100%;height:100%;object-fit:cover}
.ring{box-shadow:0 0 0 6px var(--white)}
.ground-navy .ring{box-shadow:0 0 0 6px var(--navy)}
.ground-mist .ring{box-shadow:0 0 0 6px var(--mist)}
.photo-note{font-size:.875rem;line-height:1.4;color:var(--slate);margin:10px 0 0}
.ground-navy .photo-note{color:#AFC0D2}

/* ---------- Lists ---------- */
.ticks{list-style:none}
.ticks li{position:relative;padding:14px 0 14px 34px;border-top:1px solid var(--line)}
.ticks li:last-child{border-bottom:1px solid var(--line)}
.ticks li::before{content:"";position:absolute;left:2px;top:23px;width:14px;height:8px;border-left:2.5px solid var(--gold);border-bottom:2.5px solid var(--gold);transform:rotate(-45deg)}
.ground-navy .ticks li{border-color:rgba(255,255,255,.16)}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:22px 48px 22px 0;font:700 1.25rem/1.35 var(--sans);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:30px;width:12px;height:12px;border-right:2.5px solid var(--navy);border-bottom:2.5px solid var(--navy);transform:rotate(45deg);transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(-135deg);top:36px}
.faq .answer{padding:0 0 22px;max-width:var(--measure)}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy);color:#D6E0EA;padding:72px 0 40px;font-size:1rem}
.site-footer a{color:var(--white)}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:start}
.footer-links{display:flex;flex-wrap:wrap;gap:8px 22px;list-style:none}
.footer-links a{text-decoration:none;padding:6px 0;display:inline-block}
.footer-links a:hover{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px}
.footer-mission{font:400 clamp(1.375rem,2.4vw,1.75rem)/1.3 var(--serif);color:var(--white);margin:22px 0 0;max-width:22ch}
.footer-legal{margin-top:48px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);font-size:0.875rem;line-height:1.6;color:#B9C7D6}
.footer-tools{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:28px}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr}}

/* Motion switch: a real toggle button, state announced through aria-pressed */
.motion-toggle{display:none;align-items:center;gap:10px;min-height:44px;padding:8px 16px 8px 10px;border-radius:999px;
  background:transparent;border:1.5px solid rgba(255,255,255,.35);color:var(--white);font:700 0.9375rem/1 var(--sans);cursor:pointer}
.js .motion-toggle{display:inline-flex}
.motion-toggle .track{width:38px;height:22px;border-radius:999px;background:rgba(255,255,255,.18);position:relative;flex:0 0 auto;border:1.5px solid rgba(255,255,255,.5)}
.motion-toggle .track::after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:var(--white);transition:transform .2s ease}
.motion-toggle[aria-pressed="true"] .track{background:var(--gold);border-color:var(--gold)}
.motion-toggle[aria-pressed="true"] .track::after{transform:translateX(16px);background:var(--navy)}
.motion-toggle .state{font-weight:400;color:#C7D3E0}
.motion-toggle:hover{border-color:var(--gold)}

/* ======================================================================
   MOTION LAYER — everything below needs html.motion-on (set by house.js)
   ====================================================================== */

/* Entrances */
.motion-on .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.motion-on .reveal.in{opacity:1;transform:none}

/* People arrive: the plate settles, then the person steps up out of it */
.motion-on .stage .plate{opacity:0;transform:scale(.88) translateY(18px);animation:plate .9s .1s var(--ease) forwards}
.motion-on .stage img.cutout{opacity:0;transform:translateY(46px);animation:rise .95s .35s var(--ease) forwards}
.motion-on .reveal:not(.in) .stage .plate,.motion-on .reveal:not(.in) .stage img.cutout{animation-play-state:paused}
@keyframes plate{to{opacity:1;transform:none}}
@keyframes rise{to{opacity:1;transform:none}}
.motion-on .door-note{opacity:0;transform:translateY(10px);animation:rise .6s 1.1s var(--ease) forwards}
/* Organic photos open from within their shape as they come into view */
.motion-on .unveil img{clip-path:circle(0% at 40% 55%);transform:scale(1.06);transition:clip-path 1.1s var(--ease),transform 1.4s var(--ease)}
.motion-on .in .unveil img,.motion-on .unveil.in img{clip-path:circle(130% at 40% 55%);transform:none}

/* Golden Thread draws once and settles */
.motion-on .gt.draw path{stroke-dasharray:1600;stroke-dashoffset:1600;animation:thread 2.2s .5s cubic-bezier(.45,.05,.2,1) forwards}
@keyframes thread{to{stroke-dashoffset:0}}

/* Staggered children: steps arrive in order */
.motion-on .stagger > *{opacity:0;transform:translateY(16px);transition:opacity .55s var(--ease),transform .55s var(--ease);transition-delay:calc(var(--i,0) * 90ms)}
.motion-on .stagger.in > *{opacity:1;transform:none}

/* Kinetic type */
.kt-flap{display:inline-block;white-space:nowrap}
.kt-flap .ch{display:inline-block;transform-origin:50% 55%;backface-visibility:hidden}
.motion-on .kt-flap .ch.flip{animation:flip .42s ease-in-out}
@keyframes flip{0%{transform:rotateX(0)}50%{transform:rotateX(90deg)}100%{transform:rotateX(0)}}
.kt-mark{background:linear-gradient(var(--gold),var(--gold)) no-repeat 0 92%/100% .09em}
.motion-on .kt-mark.pending{background-size:0 .09em}
.motion-on .kt-mark.drawn{transition:background-size .8s var(--ease);background-size:100% .09em}
.kt-gap{display:inline-block;white-space:nowrap}
.kt-gap .ch{display:inline-block}
.motion-on .kt-gap.open .ch:nth-child(2){transform:translateX(.3em)}
.motion-on .kt-gap.open .ch:nth-child(3){transform:translateX(.62em)}
.motion-on .kt-gap .ch{transition:transform 1.1s var(--ease)}

/* Forced colours (Windows High Contrast): keep shapes honest, drop decoration */
@media (forced-colors:active){
  .btn{border:2px solid ButtonText}
  .gt,.curve-top::before{display:none}
  .motion-toggle .track{border-color:ButtonText}
  .motion-toggle .track::after{background:ButtonText}
  .kt-mark{background:none;text-decoration:underline}
  .ticks li::before{border-color:CanvasText}
  /* white logos would vanish on a light system canvas: give them their own navy plate */
  img[src*="wordmark-primary"],img[src*="flying-lion-white"]{forced-color-adjust:none;background:#0B1F3A;padding:6px 8px;border-radius:6px}
}

@media print{.site-header,.menu-btn,.gt,.motion-toggle{display:none}section{padding-block:24px}.ground-navy,.ground-uw{background:#fff;color:#000}}