.btn { white-space: nowrap; justify-content: flex-start; }
.nav-brand { white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
  html, body, a, button, .btn, .cta-btn, .svc-cta, .svc-item, .hyg-track span { cursor: none; }
  .svc-photo, .phone-reel { cursor: auto; }
  #hyg-cursor {
    position: fixed; left: 0; top: 0; z-index: 200; pointer-events: none;
    width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px;
    opacity: 0; transition: opacity .2s ease, width .2s ease, height .2s ease, margin .2s ease;
    will-change: transform;
  }
  #hyg-cursor[data-hot] { width: 17px; height: 17px; margin: -8.5px 0 0 -8.5px; }
  #hyg-cursor circle {
    fill: none; stroke: #EFE7D6; stroke-width: 2;
    /* same broken-ring orbit as the nav logo mark */
    stroke-dasharray: 62 8.4; transform-origin: 12px 12px;
    animation: hyg-orbit 7s linear infinite;
  }
  #hyg-cursor[data-hot] circle { animation-duration: 2.2s; }
  #hyg-cursor[data-invert] circle { stroke: #083628; }
  #hyg-cursor[data-on] { opacity: 1; }
  #hyg-cursor[data-native] { opacity: 0; }
  #hyg-cursor svg { display: block; width: 100%; height: 100%; }


  /* trailing ring — lags behind the arrow and swells over interactive targets */
  #hyg-follow {
    position: fixed; left: 0; top: 0; z-index: 199; pointer-events: none;
    width: 30px; height: 30px; margin: -15px 0 0 -15px;
    opacity: 0;
    transition: opacity .22s ease, width .26s cubic-bezier(.34,1.4,.64,1), height .26s cubic-bezier(.34,1.4,.64,1), margin .26s cubic-bezier(.34,1.4,.64,1);
    will-change: transform;
  }
  #hyg-follow[data-hot] { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
  #hyg-follow[data-on] { opacity: 1; }
  #hyg-follow[data-native] { opacity: 0; }
  #hyg-follow svg { display: block; width: 100%; height: 100%; }
  #hyg-follow circle { transition: stroke-width .22s ease; }
  #hyg-follow[data-invert] circle { stroke: #083628; }
  #hyg-follow[data-hot] circle { stroke-width: 1.6; }
  /* over inline text links the cursor thins out so the words stay readable */
  #hyg-cursor[data-thin] { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; opacity: 0.7; }
  #hyg-follow[data-thin] { width: 34px; height: 34px; margin: -17px 0 0 -17px; opacity: 0.6; }
  #hyg-follow[data-thin] circle { stroke-width: 0.9; }
}
@media (prefers-reduced-motion: reduce) {
  #hyg-follow { transition: opacity .22s ease; }
}

@keyframes hyg-draw { to { stroke-dashoffset: 0; } }
@keyframes hyg-lift { to { transform: translateY(-100%); } }
@keyframes hyg-fade { to { opacity: 0; } }
@keyframes hyg-navin { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: none; } }
#hyg-intro {
  position: fixed; inset: 0; z-index: 90; background: var(--color-bg);
  display: flex; align-items: center; justify-content: center;
  animation: hyg-lift 0.72s cubic-bezier(0.7,0,0.24,1) 2.05s forwards; pointer-events: none;
}
#hyg-intro svg { width: min(34vmin, 260px); height: auto; color: var(--color-text); }
#hyg-intro .ring { stroke-dasharray: 71; stroke-dashoffset: 71; animation: hyg-draw 0.9s cubic-bezier(0.65,0,0.35,1) 0.15s forwards; }
#hyg-intro .hand path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: hyg-draw 0.85s cubic-bezier(0.65,0,0.35,1) forwards; }
#hyg-intro .hand path:nth-child(1) { animation-delay: 0.72s; }
#hyg-intro .hand path:nth-child(2) { animation-delay: 0.80s; stroke-dasharray: 46; stroke-dashoffset: 46; }
#hyg-intro .hand path:nth-child(3) { animation-delay: 0.96s; }
#hyg-intro .hand path:nth-child(4) { animation-delay: 1.02s; stroke-dasharray: 40; stroke-dashoffset: 40; }
#hyg-intro .hand path:nth-child(5) { animation-delay: 1.14s; }
#hyg-intro .wm { opacity: 0; animation: hyg-navin 0.5s ease-out 1.5s forwards; }
.nav-brand svg { animation: hyg-navin 0.55s cubic-bezier(0.34,1.4,0.64,1) 2.5s backwards; }
.foot-brand { font-size: 23px; line-height: 1; letter-spacing: -0.035em; }
@keyframes hyg-orbit { to { transform: rotate(360deg); } }
.nav-brand svg circle {
  stroke-dasharray: 62 8.4;
  transform-origin: 12px 12px;
  animation: hyg-orbit 7s linear 2.9s infinite;
}
.nav-brand:hover svg circle { animation-duration: 2.2s; }
@media (prefers-reduced-motion: reduce) {
  #hyg-intro { display: none; }
  .nav-brand svg { animation: none; }
  .nav-brand svg circle { animation: none; stroke-dasharray: none; }
  #hyg-cursor circle { animation: none; stroke-dasharray: none; }
}

.nav { display:flex; align-items:center; gap:0; }
.nav-brand { display:flex; align-items:center; gap:12px; font-size:23px; line-height:1; letter-spacing:-0.035em; }
.nav-brand > span { display:flex; align-items:baseline; gap:8px; line-height:1; }
.foot-social { display:flex; align-items:center; gap:8px; }
.foot-mail { font-size:18px; font-weight:700; letter-spacing:-0.035em; line-height:1; text-transform:none; text-decoration:none; white-space:nowrap; color:color-mix(in srgb, var(--color-text) 92%, transparent); transition: opacity .16s ease; }
.foot-mail:hover { opacity: 0.65; }
.foot-rule { width:1px; height:16px; background:color-mix(in srgb, var(--color-text) 28%, transparent); flex-shrink:0; }
.loc-item {
  display:flex; align-items:center; gap:9px; white-space:nowrap;
  font-size:12px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase;
  color:color-mix(in srgb, var(--color-text) 70%, transparent);
}
.loc-item svg { color:var(--color-text); flex-shrink:0; }
.loc-item .loc-dot { transform-origin:12px 12px; animation: loc-tick 4s cubic-bezier(.34,1.5,.64,1) infinite; }
.loc-item:nth-child(2) .loc-dot { animation-delay: 2s; }
@keyframes loc-tick {
  0%, 44%   { transform: scale(1); }
  50%       { transform: scale(0); }
  58%, 100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .loc-item .loc-dot { animation: none; } }
.foot-social a {
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; box-sizing:border-box; border-radius:999px;
  border:1.6px solid var(--color-text);
  color:var(--color-text); text-decoration:none;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.foot-social a:hover { background:var(--color-text); color:var(--color-bg); border-color:var(--color-text); opacity:1; }
.foot-social a:focus-visible { outline:2px solid var(--color-text); outline-offset:3px; }
@media (max-width: 980px) {
  footer { grid-template-columns: 1fr !important; justify-items: center; row-gap: 26px; text-align: center; padding-left: 0 !important; padding-right: 0 !important; }
  .foot-locale { order: 3; }
  .foot-brand { justify-content: center; }
}


.hyg-marquee { overflow: hidden; position: relative; padding: 8px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.hyg-track { display: flex; width: max-content; animation: hyg-marquee 38s linear infinite; }
.hyg-marquee:hover .hyg-track { animation-play-state: paused; }
.hyg-track > div { display: flex; align-items: center; gap: 72px; padding-right: 72px; flex-shrink: 0; }
.hyg-track img { opacity: 0.72; transition: opacity 0.2s ease; }
.hyg-track img:hover { opacity: 1; }
.hyg-track span { font-family: var(--font-heading); font-weight: 800; font-size: 22px;
  letter-spacing: -0.02em; white-space: nowrap; opacity: 0.55; transition: opacity 0.2s ease; }
.hyg-track span:hover { opacity: 1; }
@keyframes hyg-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .hyg-track { animation: none; } }


.svc { margin: 0 -24px; }
.hyg-hl .hl-fill { color: var(--color-text); -webkit-text-stroke: 0; }
.hyg-hl .hl-fill, .hyg-hl .hl-out { display: inline; }
.hl-sp { display: none; }
.hyg-bounce { display: inline-block; animation: hyg-bounce 4s cubic-bezier(.3,1.4,.5,1) var(--b, 0s) infinite; }
@keyframes hyg-bounce {
  0%, 8%, 100% { transform: none; }
  3%           { transform: translateY(-7.5px); }
  5.5%         { transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) { .hyg-bounce { animation: none; } }
.hl-l {
  display: inline-block; will-change: transform, clip-path;
  animation: hl-drop 0.86s cubic-bezier(.16,1.02,.3,1) calc(2.95s + var(--n) * 0.052s) both;
}
@keyframes hl-drop {
  0%   { clip-path: inset(-0.42em -0.12em 108% -0.06em); transform: translateY(0.34em) scaleY(1.14); opacity: 0; }
  38%  { opacity: 1; }
  62%  { clip-path: inset(0 0 -0.2em 0); transform: translateY(-0.045em) scaleY(0.975); }
  /* generous bleed all round so lowercase descenders (g, y) and ascenders never clip */
  100% { clip-path: inset(-0.42em -0.12em -0.42em -0.06em); transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .hl-l { animation: none; } }
.hyg-copy .hl-out { color: transparent; -webkit-text-stroke: 0.7px var(--color-text); paint-order: stroke fill; }
.hyg-hl .hl-out { color: transparent; -webkit-text-stroke: var(--hl-stroke, 2.5px) var(--color-text); paint-order: stroke fill; }
.hyg-hl[data-fill="solid"] .hl-out { color: var(--color-text); -webkit-text-stroke: 0; }
.hyg-hl[data-fill="outline"] .hl-fill { color: transparent; -webkit-text-stroke: var(--hl-stroke, 2.5px) var(--color-text); paint-order: stroke fill; }
@media (max-width: 900px) {
  .hyg-hero { grid-template-columns: minmax(0,1fr) !important; padding-top: 64px !important; }
  .hyg-hl { grid-column: 1 !important; grid-row: 1 !important; white-space: normal !important; font-size: clamp(40px,13vw,88px) !important; --hl-stroke: 1.8px; }
  .hyg-copy { grid-column: 1 !important; grid-row: 2 !important; padding-top: 26px !important; }
  .hyg-phone-wrap { grid-column: 1 !important; grid-row: 3 !important; margin-top: 40px !important; }
}
.svc-item { opacity: 0; transform: translateY(14px);
  transition: opacity .55s cubic-bezier(.22,.8,.3,1), transform .55s cubic-bezier(.22,.8,.3,1); }
.svc.in .svc-item { opacity: 1; transform: none; transition-delay: calc(var(--i) * 80ms + 180ms); }
.svc-item span { transition: padding-left .22s ease; }
.svc-item:hover > span { padding-left: 10px; }
.svc-tick { opacity: 0; transform: translateX(-8px); transition: opacity .22s ease, transform .22s ease; font-weight: 800; }
.svc-item:hover .svc-tick { opacity: 1; transform: none; }
.svc-plats { display: flex; align-items: center; gap: 10px; margin: 0 0 28px; }
.svc-plat {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; box-sizing: border-box; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--color-bg) 42%, transparent);
  color: var(--color-bg); flex-shrink: 0;
  opacity: 0; transform: translateY(12px) scale(0.82);
  transition: opacity .5s cubic-bezier(.22,.8,.3,1), transform .5s cubic-bezier(.34,1.45,.64,1),
              background .18s ease, color .18s ease, border-color .18s ease;
}
.svc.in .svc-plat { animation: plat-wave 5.5s cubic-bezier(.4,0,.3,1) calc(var(--p) * 0.34s) infinite both; }
@keyframes plat-wave {
  0%   { opacity: 0; transform: translateX(-14px) scale(0.86); }
  9%   { opacity: 1; transform: none; }
  44%  { opacity: 1; transform: none; }
  56%  { opacity: 0; transform: translateX(14px) scale(0.86); }
  100% { opacity: 0; transform: translateX(-14px) scale(0.86); }
}
.svc-plats:hover .svc-plat { animation: none; opacity: 1; transform: none; }
.svc-plat:hover { background: var(--color-bg); color: var(--color-accent); border-color: var(--color-bg); }
.svc-plat svg { transition: transform .3s cubic-bezier(.34,1.5,.64,1); }
.svc-plat:hover svg { transform: scale(1.14); }
.svc-title { opacity: 0; transform: translateY(16px);
  transition: opacity .6s cubic-bezier(.22,.8,.3,1), transform .6s cubic-bezier(.22,.8,.3,1); }
.svc.in .svc-title { opacity: 1; transform: none; }
.svc-cta .svc-ring circle { stroke-dasharray: 62 8.4; transform-origin: 12px 12px;
  animation: hyg-orbit 7s linear 2.9s infinite; }
.svc-cta:hover .svc-ring circle { animation-duration: 2.2s; }
.svc-cta span { transition: transform .3s cubic-bezier(.34,1.5,.64,1); }
.svc-cta:hover span { transform: translateX(3px); }
.svc-cta:hover { opacity: 1; }
.cta-btn .svc-ring circle { stroke-dasharray: 62 8.4; transform-origin: 12px 12px;
  animation: hyg-orbit 7s linear 2.9s infinite; }
.cta-btn:hover .svc-ring circle { animation-duration: 2.2s; }
.cta-btn span { transition: transform .3s cubic-bezier(.34,1.5,.64,1); }
.cta-btn:hover span { transform: translateX(3px); }
.cta-btn:hover { opacity: 1; }
.cta-btn-ghost:hover { background: var(--color-bg) !important; color: var(--color-accent) !important; }
@media (max-width: 1060px) {
  .cta-band > div { flex-direction: column; align-items: center !important; justify-content: flex-start; text-align: center; gap: 30px !important; }
  /* flex-basis was authored for a row; in column it becomes a height */
  .cta-band > div > div:first-child { flex: 0 0 auto !important; }
  .cta-band h2, .cta-band p { text-align: center; }
  .cta-band p { margin-left: auto !important; margin-right: auto !important; }
  .cta-band .cta-row { justify-content: center; width: 100%; }
}
@media (max-width: 720px) { .cta-band { padding: 56px 24px !important; } }
@media (max-width: 900px) {
  .svc { grid-template-columns: minmax(0,1fr) !important; }
  .svc figure { min-height: 260px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-item, .svc-title, .svc-plat { opacity: 1 !important; transform: none !important; transition: none; }
  .svc.in .svc-plat { animation: none !important; }
  .svc-cta .svc-ring circle, .cta-btn .svc-ring circle { animation: none; stroke-dasharray: none; }
}

#hyg-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 80;
  background: var(--color-text); transform: scaleX(0); transform-origin: 0 50%;
  will-change: transform; pointer-events: none;
}
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.75s cubic-bezier(0.22,0.8,0.3,1), transform 0.75s cubic-bezier(0.22,0.8,0.3,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal-row { opacity: 0; transform: translateY(20px); transition: opacity 0.65s cubic-bezier(0.22,0.8,0.3,1), transform 0.65s cubic-bezier(0.22,0.8,0.3,1); }
.reveal-row.in { opacity: 1; transform: none; }
.rule-draw { transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.9s cubic-bezier(0.22,0.8,0.3,1); }
.rule-draw.in { transform: scaleX(1); }
.hyg-phone { transition: transform 0.9s cubic-bezier(0.22,0.8,0.3,1); will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-row, .rule-draw { opacity: 1 !important; transform: none !important; transition: none; }
  .hyg-phone { transform: none !important; }
  #hyg-progress { display: none; }
}

.nav .gday {
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; box-sizing: border-box; font-size: 14px; font-weight: 700;
  line-height: 1; letter-spacing: -0.01em; white-space: nowrap; border-radius: 999px;
  padding: 0 20px; text-decoration: none;
}
.nav .gday {
  padding: 0 24px; border-radius: 999px !important;
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--color-text); color: var(--color-bg);
  width: var(--gday-w, auto);
  transition: width 0.52s cubic-bezier(.16,1,.3,1), transform 0.3s cubic-bezier(.22,.8,.3,1);
}
.nav .gday:hover { width: var(--gday-hw, auto); }
/* ink wipe: a disc grows from the pointer's entry point */
.nav .gday .gday-ink {
  position: absolute; left: var(--mx, 50%); top: var(--my, 50%);
  width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: var(--color-bg); z-index: -1;
  transform: scale(0); transition: transform 0.62s cubic-bezier(.16,1,.3,1);
}
.nav .gday:hover .gday-ink { transform: scale(var(--ink, 30)); }
.nav .gday:hover { color: var(--color-text); }
.nav .gday .gday-a, .nav .gday .gday-b { display: flex; white-space: nowrap; }
.nav .gday .gday-b {
  position: absolute; left: 0; right: 0; justify-content: center;
}
.nav .gday .gc {
  display: inline-block;
  transition: transform 0.46s cubic-bezier(.16,1,.3,1), opacity 0.24s ease;
}
/* out: letters lift away left-to-right */
.nav .gday:hover .gday-a .gc {
  transform: translateY(-118%) rotate(-6deg); opacity: 0;
  transition-delay: calc(var(--c) * 16ms);
}
/* in: address letters drop into place after the wipe reaches them */
.nav .gday .gday-b .gc { transform: translateY(118%); opacity: 0; }
.nav .gday:hover .gday-b .gc {
  transform: none; opacity: 1;
  transition-delay: calc(120ms + var(--c) * 15ms);
}
@media (prefers-reduced-motion: reduce) {
  .nav .gday, .nav .gday .gc, .nav .gday .gday-ink { transition: none; }
}
@media (max-width: 900px) { .hyg-hero { grid-template-columns: minmax(0,1fr) !important; } }
:root {
  --color-bg: #083628;
  --color-surface: #0B4232;
  --color-text: #EFE7D6;
  --color-accent: #EFE7D6;
  --color-accent-600: #E2D8C2;
  --color-accent-700: #EFE7D6;
  --color-accent-800: #D5C9AE;
  --color-divider: color-mix(in srgb, #EFE7D6 35%, transparent);
}

/* real media in place of the editor slots */
.svc-photo, .phone-reel { width:100%; height:100%; object-fit:cover; display:block; }
figure.grayscale { background:var(--color-surface); }
.phone-reel { border-radius:30px; background:var(--color-surface); }
.foot-legal { font-size:12px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; text-decoration:none;
  color:color-mix(in srgb, var(--color-text) 55%, transparent); transition:opacity .16s ease; }
.foot-legal:hover { color:var(--color-text); }
a:focus-visible, button:focus-visible { outline:2px solid var(--color-text); outline-offset:3px; }
.legal { max-width:720px; margin:0 auto; padding:56px 24px 96px; }
.legal h1 { font-family:var(--font-heading); font-weight:800; font-size:clamp(34px,5vw,58px); letter-spacing:-0.04em; line-height:1; margin:0 0 10px; }
.legal p.sub { font-size:13px; letter-spacing:0.14em; text-transform:uppercase; font-weight:700;
  color:color-mix(in srgb, var(--color-text) 60%, transparent); margin:0 0 40px; }
.legal h2 { font-family:var(--font-heading); font-weight:800; font-size:22px; letter-spacing:-0.02em; margin:38px 0 10px; }
.legal p, .legal li { font-family:'General Sans',var(--font-body),sans-serif; font-size:16.5px; line-height:1.7; margin:0 0 12px; }
.legal ul { padding-left:20px; margin:0 0 12px; }
.legal a { color:var(--color-text); }

/* --- enquiry form modal + click-to-copy --- */
.enq-scrim {
  position: fixed; inset: 0; z-index: 95; display: grid; place-items: center;
  padding: 24px; background: color-mix(in srgb, #041b14 78%, transparent);
  backdrop-filter: blur(6px) saturate(.9); -webkit-backdrop-filter: blur(6px) saturate(.9);
  opacity: 0; transition: opacity .3s ease; overflow-y: auto;
}
.enq-scrim[hidden] { display: none; }
.enq-scrim[data-open] { opacity: 1; }
.enq-panel {
  position: relative; width: 100%; max-width: 800px; box-sizing: border-box;
  --enq-ink: #083628; --enq-paper: #EFE7D6;
  background: var(--enq-paper); color: var(--enq-ink);
  border: 1.5px solid color-mix(in srgb, var(--enq-ink) 22%, transparent);
  border-radius: 32px; padding: 52px 52px 44px; margin: auto;
  transform: translateY(18px) scale(.97); opacity: 0;
  transition: transform .44s cubic-bezier(.16,1,.3,1), opacity .34s ease;
}
.enq-scrim[data-open] .enq-panel { transform: none; opacity: 1; }
.enq-kicker { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: color-mix(in srgb, var(--enq-ink) 58%, transparent); margin: 0 0 10px; }
.enq-panel h2 { font-family: var(--font-heading); font-weight: 800; font-size: clamp(34px,4.4vw,52px);
  letter-spacing: -.04em; line-height: 1; margin: 0; }
.enq-sub { font-size: 20px; line-height: 1.5; margin: 16px 0 38px; max-width: 44ch;
  color: color-mix(in srgb, var(--enq-ink) 74%, transparent); }
.enq-close {
  position: absolute; top: 26px; right: 26px; width: 49px; height: 49px; display: grid; place-items: center;
  background: transparent; color: var(--enq-ink); border: 1.5px solid color-mix(in srgb, var(--enq-ink) 28%, transparent);
  border-radius: 999px; padding: 0; cursor: pointer; transition: background .16s ease, color .16s ease, transform .3s cubic-bezier(.34,1.5,.64,1);
}
.enq-close:hover { background: var(--enq-ink); color: var(--enq-paper); transform: rotate(90deg); }
.enq-form { display: grid; grid-template-columns: 1fr 1fr; gap: 29px 26px; }
.enq-field { display: flex; flex-direction: column; gap: 9px; min-width: 0; border: 0; padding: 0; margin: 0; }
.enq-wide { grid-column: 1 / -1; }
.enq-field > span, .enq-field > legend {
  font-size: 15px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; padding: 0;
  color: color-mix(in srgb, var(--enq-ink) 62%, transparent);
}
.enq-field > span em, .enq-field > legend em { font-style: normal; opacity: .62; letter-spacing: .1em; }
.enq-field input, .enq-field textarea {
  font-family: 'General Sans', var(--font-body), sans-serif; font-size: 21px; color: var(--enq-ink);
  background: transparent; border: 0; border-bottom: 2px solid color-mix(in srgb, var(--enq-ink) 26%, transparent);
  padding: 11px 2px; border-radius: 0; box-sizing: border-box; width: 100%;
  transition: border-color .18s ease; resize: vertical; cursor: auto;
}
.enq-field input:hover, .enq-field textarea:hover { border-bottom-color: color-mix(in srgb, var(--enq-ink) 48%, transparent); }
.enq-field input:focus, .enq-field textarea:focus { outline: none; border-bottom-color: var(--enq-ink); }
.enq-field input:focus-visible, .enq-field textarea:focus-visible { outline: none; }
.enq-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.enq-chips label { position: relative; cursor: pointer; }
.enq-chips input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.enq-chips span {
  display: block; font-size: 17px; font-weight: 600; letter-spacing: -.01em; padding: 11px 20px; border-radius: 999px;
  border: 1.5px solid color-mix(in srgb, var(--enq-ink) 26%, transparent);
  color: color-mix(in srgb, var(--enq-ink) 78%, transparent); transition: all .18s ease;
}
.enq-chips label:hover span { border-color: color-mix(in srgb, var(--enq-ink) 55%, transparent); color: var(--enq-ink); }
.enq-chips input:checked + span { background: var(--enq-ink); color: var(--enq-paper); border-color: var(--enq-ink); }
.enq-chips input:focus-visible + span { outline: 2px solid var(--enq-ink); outline-offset: 3px; }
.enq-actions { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 10px; }
.enq-submit {
  display: inline-flex; align-items: center; gap: 13px; flex-shrink: 0; cursor: pointer;
  font-family: var(--font-heading); font-size: 19px; font-weight: 700; letter-spacing: -.01em;
  background: var(--enq-ink); color: var(--enq-paper); border: 0; border-radius: 999px; padding: 18px 22px 18px 32px;
  transition: transform .3s cubic-bezier(.22,.8,.3,1), opacity .2s ease;
}
.enq-submit:hover { transform: translateY(-2px); }
.enq-submit[disabled] { opacity: .5; transform: none; cursor: default; }
.enq-submit svg { transition: transform .4s cubic-bezier(.34,1.5,.64,1); }
.enq-submit:hover svg { transform: rotate(-14deg) scale(1.06); }
.enq-submit svg circle { stroke-dasharray: 62 8.4; transform-origin: 12px 12px;
  animation: hyg-orbit 7s linear infinite; }
.enq-submit:hover svg circle { animation-duration: 2.2s; }
@media (prefers-reduced-motion: reduce) {
  .enq-submit svg circle { animation: none; stroke-dasharray: none; }
}
.enq-fine { font-size: 17px; line-height: 1.5; margin: 0; color: color-mix(in srgb, var(--enq-ink) 62%, transparent); }
.enq-fine a { color: var(--enq-ink); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--enq-ink) 40%, transparent); }
.enq-fine a:hover { border-bottom-color: var(--enq-ink); }
.enq-done { display: none; }
.enq-panel[data-sent] .enq-form, .enq-panel[data-sent] .enq-sub { display: none; }
.enq-panel[data-sent] .enq-done { display: block; }
.enq-done p { font-size: 21px; line-height: 1.6; margin: 18px 0 0; max-width: 42ch;
  color: color-mix(in srgb, var(--enq-ink) 76%, transparent); }
@media (max-width: 620px) {
  .enq-panel { padding: 40px 26px 32px; border-radius: 22px; }
  .enq-form { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .enq-scrim, .enq-panel { transition: none; }
}

/* footer address: click to copy */
button.foot-mail { position: relative; background: none; border: 0; padding: 6px 14px; margin: -6px -14px; font-family: var(--font-heading); cursor: pointer; }
button.foot-mail:hover { opacity: .65; }
.copy-toast {
  position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translate(-50%, 6px);
  background: var(--color-text); color: var(--color-bg); border-radius: 999px; padding: 5px 12px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .34s cubic-bezier(.34,1.5,.64,1);
}
button.foot-mail[data-copied] .copy-toast { opacity: 1; transform: translate(-50%, 0); }
.enq-panel[data-sent] > .enq-kicker, .enq-panel[data-sent] > h2 { display: none; }
.enq-done h2 { margin: 0; }
.enq-done .enq-kicker { margin: 0 0 10px; }


/* --- architectural grid: hairlines behind the whole page, as on the social posts --- */
#hyg-grid {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  --g-line: color-mix(in srgb, #EFE7D6 7%, transparent);
  --g-col: 12.5%;
  --g-row: 220px;
  /* every line lives in the SVG now, at irregular intervals */
  opacity: 0; animation: hyg-navin 1.1s ease-out 2.35s forwards;
}
@media (max-width: 900px) { #hyg-grid { --g-col: 25%; --g-row: 160px; } }
@media (prefers-reduced-motion: reduce) { #hyg-grid { opacity: 1; animation: none; } }

/* the grid sits at z-index -1, so the ground colour must live on <html> not <body> */
html { background: #083628; }
body { background: transparent !important; }
#hyg-grid { --g-line: color-mix(in srgb, #EFE7D6 11%, transparent) !important; }

/* the drafting arcs that run with the straight hairlines */
#hyg-grid .g-arcs {
  position: absolute; inset: 0; width: 100%; height: 100%;
  fill: none; stroke: color-mix(in srgb, #EFE7D6 13%, transparent); stroke-width: 1;
}
#hyg-grid .g-arcs > * { vector-effect: non-scaling-stroke; }
@media (max-width: 900px) { #hyg-grid .g-arcs { display: none; } }

#hyg-grid .g-arcs { stroke-width: 1.2; }
#hyg-grid .g-faint { stroke: color-mix(in srgb, #EFE7D6 5%, transparent); }
#hyg-grid .g-mid { stroke: color-mix(in srgb, #EFE7D6 9%, transparent); }
#hyg-grid .g-strong { stroke: color-mix(in srgb, #EFE7D6 15%, transparent); }
#hyg-grid .g-sweep { stroke: color-mix(in srgb, #EFE7D6 8%, transparent); }
@media (max-width: 900px) { #hyg-grid .g-arcs { display: block; } }

/* the sweeps drift slowly against each other; the straight lines hold still */
@keyframes g-driftA { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(26px, -19px); } }
@keyframes g-driftB { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-22px, 24px); } }
@keyframes g-driftC { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(18px, 27px); } }
@keyframes g-driftD { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-30px, -13px); } }
@keyframes g-driftE { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(14px, -28px); } }
#hyg-grid .g-sweep { will-change: transform; }
#hyg-grid circle.g-sweep:nth-of-type(1) { animation: g-driftA 26s cubic-bezier(.45,0,.55,1) infinite; }
#hyg-grid circle.g-sweep:nth-of-type(2) { animation: g-driftB 33s cubic-bezier(.45,0,.55,1) -6s infinite; }
#hyg-grid circle.g-sweep:nth-of-type(3) { animation: g-driftC 29s cubic-bezier(.45,0,.55,1) -14s infinite; }
#hyg-grid circle.g-sweep:nth-of-type(4) { animation: g-driftD 38s cubic-bezier(.45,0,.55,1) -3s infinite; }
#hyg-grid circle.g-sweep:nth-of-type(5) { animation: g-driftE 31s cubic-bezier(.45,0,.55,1) -20s infinite; }
@media (prefers-reduced-motion: reduce) { #hyg-grid .g-sweep { animation: none !important; } }

/* the modal used to run a full-screen backdrop-filter over a page full of
   looping animations, which re-composited every frame - hence the lag */
.enq-scrim { backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  background: color-mix(in srgb, #041b14 88%, transparent) !important; }
html[data-modal] #hyg-grid .g-sweep,
html[data-modal] .hyg-bounce,
html[data-modal] .hyg-track,
html[data-modal] #hyg-cursor circle,
html[data-modal] .svc-cta .svc-ring circle,
html[data-modal] .cta-btn .svc-ring circle,
html[data-modal] .nav-brand svg circle { animation-play-state: paused !important; }
html[data-modal] #hyg-grid .g-sweep { will-change: auto; }
/* hero CTA: the logo's orbiting ring, drawn around the pill */
@property --hyg-ring { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.cta-orbit { position: relative; isolation: isolate; }
.cta-orbit::after {
  content: ''; position: absolute; inset: -5px; border-radius: 999px; padding: 1.6px;
  pointer-events: none;
  background: conic-gradient(from var(--hyg-ring), transparent 0deg 44deg, var(--color-text) 44deg 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: hyg-ring-orbit 7s linear infinite;
}
.cta-orbit:hover::after { animation-duration: 2.2s; }
@keyframes hyg-ring-orbit { to { --hyg-ring: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  .cta-orbit::after { animation: none; background: var(--color-text); }
}

/* --- touch devices: hide the desktop-only custom cursor elements --------------
   #hyg-cursor and #hyg-follow are only styled inside
   @media (hover: hover) and (pointer: fine). On a phone no style applies, so the
   bare <svg><circle> renders with its default black fill and sits in the page
   flow as a large black disc. Desktop matches (hover: hover) and (pointer: fine)
   and therefore never matches this rule. ------------------------------------- */
@media (hover: none), (pointer: coarse) {
  #hyg-cursor,
  #hyg-follow { display: none !important; }
}

/* mobile: the drafting arcs kept circular (the wide viewBox with preserveAspectRatio:none
   squashed them into tall ellipses on a phone). Straight hairlines are unaffected by
   the stretch, so they stay in the main svg; the sweeps swap to an aspect-preserving one. */
/* superseded by .g-orb / .o-d / .o-m below: the aspect-correct mobile arcs now come
   from each orb's own svg, so the old duplicate-svg swap is no longer needed. */

/* thanks page: same drafting grid, nav and footer as the home page; the message sits
   on the middle six columns so it lines up with the hero's centre axis. The old
   .thx-brand lockup is superseded by the real footer - rules kept, markup retired. */
.thx-col { grid-column: 4 / 10; text-align: center; }
.thx-kicker { font-family: var(--font-heading); font-size: 12px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; margin: 0 0 26px;
  color: color-mix(in srgb, var(--color-text) 52%, transparent); }
.thx-hl { font-family: var(--font-heading); font-weight: 800; text-transform: lowercase;
  font-size: clamp(40px, 7.2vw, 96px); line-height: 0.98; letter-spacing: -0.05em;
  margin: 0; text-wrap: balance; }
.thx-rule { height: 1px; margin: 40px auto; width: 100%;
  background: color-mix(in srgb, var(--color-text) 22%, transparent); }
.thx-body { font-family: 'General Sans', var(--font-body), sans-serif;
  font-size: 17.5px; line-height: 1.68; margin: 0 auto; max-width: 54ch;
  color: color-mix(in srgb, var(--color-text) 82%, transparent); }
.thx-body + .thx-cta { margin-top: 38px; }
.thx-cta { display: flex; align-items: center; justify-content: center; gap: 12px;
  flex-wrap: wrap; margin-top: 44px; }
.thx-btn-solid { background: var(--color-text); color: var(--color-bg);
  display: inline-flex; align-items: center; gap: 13px; text-decoration: none;
  border-radius: 999px; padding: 15px 18px 15px 26px;
  font-family: var(--font-heading); font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.thx-btn-ghost { position: relative; display: inline-flex; align-items: center;
  background: transparent; color: var(--color-text); cursor: pointer;
  border: 1.5px solid color-mix(in srgb, var(--color-text) 34%, transparent);
  border-radius: 999px; padding: 15px 26px;
  font-family: var(--font-heading); font-size: 15px; font-weight: 700; letter-spacing: -0.01em;
  transition: border-color .18s ease, background .18s ease; }
.thx-btn-ghost:hover { border-color: var(--color-text);
  background: color-mix(in srgb, var(--color-text) 8%, transparent); }
.thx-note { font-family: 'General Sans', var(--font-body), sans-serif; font-size: 13px;
  margin: 22px 0 0; color: color-mix(in srgb, var(--color-text) 46%, transparent); }
.thx-nav-loc { font-size: 12px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
@media (max-width: 900px) {
  .thx-col { grid-column: 1 / -1; }
  .thx-rule { margin: 32px auto; }
  .thx-cta { margin-top: 34px; }
}

/* retired: superseded by the footer above */
.thx-brand { max-width: 1180px; margin: 0 auto; padding: 84px 32px 96px; text-align: center; }
.thx-brand .nav-brand { display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-heading); font-weight: 800; font-size: 26px;
  letter-spacing: -0.035em; line-height: 1; color: var(--color-text); }
.thx-brand .nav-brand svg { animation-delay: 0.25s; }
.thx-brand .nav-brand svg circle { animation-delay: 0.5s; }
@media (max-width: 720px) { .thx-brand { padding: 56px 22px 72px; } }

/* service blocks: softened corners. The section clips its own children so the photo
   and the accent panel share one rounded silhouette. */
/* the services block and the CTA band read as one slab: only its four outer
   corners round, the seam where they meet stays square */
/* The two rows alternate dark photo / cream panel, so at the seam the fills used to
   cross in a hard checkerboard notch. Rounding the dark blocks instead — on a cream
   slab ground — turns every interior junction into a soft pinch. */
.svc { background: var(--color-accent); }
.svc figure.grayscale { border-radius: 26px; overflow: hidden; }
@media (max-width: 900px) { .svc figure.grayscale { border-radius: 20px; } }
/* the two dark blocks sit diagonally opposite across the seam; squaring just the one
   corner each turns toward the crossing lets their tips meet at a point instead of
   the curves receding into a gap. Only relevant while the rows are two-up. */
@media (min-width: 901px) {
  #social figure.grayscale { border-radius: 26px 26px 7px 26px; }
  #websites figure.grayscale { border-radius: 7px 26px 26px 26px; }
}

/* there are two .svc rows: only the first one's top corners round */
.svc { border-radius: 0; overflow: hidden; }
#social { border-radius: 28px 28px 0 0; }
.cta-band { border-radius: 0 0 28px 28px; overflow: hidden; }
@media (max-width: 900px) {
  #social { border-radius: 22px 22px 0 0; }
  .cta-band { border-radius: 0 0 22px 22px; }
}

/* ---- performance: the drifting arcs -----------------------------------------
   The five sweeps used to be <circle>s inside one viewport-sized <svg>, each with
   its own transform animation. SVG element transforms aren't composited, so every
   frame repainted the whole grid layer - which is what made the cursor feel heavy.
   Each arc now lives in its own <svg> inside a .g-orb div; the div carries the
   drift, so the arc is rasterised once and only a layer moves. */
#hyg-grid { contain: strict; }
#hyg-grid .g-sweep { will-change: auto; animation: none !important; }
.g-orbs { position: absolute; inset: 0; }
.g-orb { position: absolute; inset: 0; will-change: transform; transform: translateZ(0); }
.g-orb svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none;
  stroke: color-mix(in srgb, #EFE7D6 8%, transparent); stroke-width: 1.2; }
.g-orb svg circle { vector-effect: non-scaling-stroke; }
.g-orb .o-m { display: none; }
@media (max-width: 900px) {
  .g-orb .o-d { display: none; }
  .g-orb .o-m { display: block; }
}
.g-orb:nth-child(1) { animation: g-driftA 26s cubic-bezier(.45,0,.55,1) infinite; }
.g-orb:nth-child(2) { animation: g-driftB 33s cubic-bezier(.45,0,.55,1) -6s infinite; }
.g-orb:nth-child(3) { animation: g-driftC 29s cubic-bezier(.45,0,.55,1) -14s infinite; }
.g-orb:nth-child(4) { animation: g-driftD 38s cubic-bezier(.45,0,.55,1) -3s infinite; }
.g-orb:nth-child(5) { animation: g-driftE 31s cubic-bezier(.45,0,.55,1) -20s infinite; }
html[data-modal] .g-orb { animation-play-state: paused !important; will-change: auto; }
@media (prefers-reduced-motion: reduce) { .g-orb { animation: none !important; } }

/* the headline letters kept a transform+clip-path layer alive long after their
   one-shot intro finished; app.js releases it once the animation ends */
.hl-l[data-settled] { will-change: auto; }


/* ---- mobile-only: nav lockup breathing room + centred footer strip ---- */
@media (max-width: 700px) {
  .nav { gap: 12px; justify-content: space-between; }
  .nav-brand { font-size: 19px; letter-spacing: -0.03em; gap: 9px; min-width: 0; }
  .nav-brand > span { gap: 6px; }
  .nav-brand svg { width: 32px; height: 32px; }
  .nav .gday { flex: 0 0 auto; height: 36px; padding: 0 16px; font-size: 13px; }
  footer > span:last-child {
    justify-content: center !important;
    flex-wrap: wrap; row-gap: 14px; column-gap: 14px;
    width: 100%; text-align: center;
  }
  .foot-mail { font-size: 16px; }
  .foot-brand { font-size: 22px; }
}
@media (max-width: 380px) {
  .nav-brand { font-size: 17px; }
  .nav .gday { padding: 0 13px; font-size: 12px; }
  .foot-mail { font-size: 15px; }
}


/* mobile-only: hide the footer brand lockup (wordmark + animated mark) */
@media (max-width: 700px) {
  footer .foot-brand { display: none !important; }
}