/* Hallmark · pre-emit critique: P5 H5 E5 S4 R5 V4
 * Hallmark · macrostructure: unchanged (user-locked "same layout")
 * genre: modern-minimal · tone: utilitarian/technical · theme: custom (brand-anchored)
 * paper oklch(99.2% .003 255) · accent oklch(56.5% .214 22) warm
 * display Space Grotesk 600 · body Inter · mono IBM Plex Mono
 * axes: light paper / grotesk-sans display / warm accent
 */
@import url("tokens.css");

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:4.5rem;overflow-x:clip}
body{
  margin:0;overflow-x:clip;
  font-family:var(--font-body);font-size:var(--text-md);line-height:1.65;
  font-feature-settings:"cv05","ss01";
  color:var(--color-ink-2);background:var(--color-paper);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}

h1,h2,h3{
  font-family:var(--font-display);font-style:normal;font-weight:600;
  color:var(--color-ink);line-height:1.08;letter-spacing:-0.022em;
  margin:0 0 var(--space-md);overflow-wrap:anywhere;min-width:0;
}
h1{font-size:var(--text-display);letter-spacing:-0.03em}
h2{font-size:var(--text-2xl)}
h3{font-size:var(--text-lg);line-height:1.25;letter-spacing:-0.012em}
p{margin:0 0 var(--space-sm)}
p:last-child{margin-bottom:0}

a{color:var(--color-link);text-underline-offset:0.18em;text-decoration-thickness:1px}
a:hover{color:var(--color-accent)}
:focus-visible{outline:var(--rule-bold) solid var(--color-focus);outline-offset:2px;border-radius:var(--radius-sm)}

section{padding:var(--space-2xl) 0}
.wrap{width:min(1120px,92vw);margin:0 auto}
/* ponytail: constrain the children, not the container — narrow blocks stay on the same left rail as the full-width sections. */
.narrow > *{max-width:62ch}
.band{background:var(--color-paper-2);border-block:var(--rule-hair) solid var(--color-rule)}

/* ── nav ─────────────────────────────────────────────────────────── */
.nav{
  position:sticky;top:0;z-index:10;
  background:color-mix(in oklab,var(--color-paper) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:var(--rule-hair) solid var(--color-rule);
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);
  padding:var(--space-xs) max(4vw,var(--space-sm));
}
.brand{display:block;line-height:0}
.brand img{height:34px;width:auto}
.nav nav{display:flex;gap:var(--space-md);align-items:center}
.nav nav a{
  color:var(--color-ink);text-decoration:none;white-space:nowrap;
  font-size:var(--text-sm);font-weight:500;letter-spacing:0.01em;
  padding:var(--space-3xs) 0;border-bottom:var(--rule-bold) solid transparent;
  transition:border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
}
.nav nav a:hover{color:var(--color-ink);border-bottom-color:var(--color-accent)}
.nav .cta{
  background:var(--color-accent);color:var(--color-accent-ink);
  padding:var(--space-2xs) var(--space-sm);border-radius:var(--radius-md);
  border-bottom-color:transparent;
}
.nav .cta:hover{background:var(--color-accent-hi);color:var(--color-accent-ink);border-bottom-color:transparent}
.nav .cta:active{transform:translateY(1px)}
.burger{display:none;color:var(--color-ink);font-size:1.5rem;line-height:1;cursor:pointer;padding:var(--space-3xs) var(--space-2xs)}
.burger:focus-visible,#menu:focus-visible+.burger{outline:var(--rule-bold) solid var(--color-focus);outline-offset:2px}

/* ── hero ────────────────────────────────────────────────────────── */
/* ponytail: flat navy, no gradient. The numbered service list is the artwork. */
.hero{background:var(--color-deep);color:var(--color-on-deep);padding:var(--space-3xl) 0 var(--space-2xl)}
.hero h1{color:var(--color-on-deep);max-width:17ch}
.hero p{color:var(--color-on-deep-2)}
.hero a:not(.btn){color:var(--color-link-deep)}

.hero-list{
  list-style:none;padding:0;counter-reset:svc;
  margin:var(--space-xl) 0 var(--space-xl);
  border-top:var(--rule-hair) solid var(--color-rule-deep);
  display:grid;gap:0 var(--space-xl);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
}
.hero-list li{
  counter-increment:svc;
  display:flex;gap:var(--space-sm);align-items:baseline;
  padding:var(--space-xs) 0;
  border-bottom:var(--rule-hair) solid var(--color-rule-deep);
  color:var(--color-on-deep);font-size:var(--text-base);
}
.hero-list li::before{
  content:counter(svc,decimal-leading-zero);
  font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;
  color:var(--color-link-deep);flex:none;
}

.btn{
  display:inline-block;background:var(--color-accent);color:var(--color-accent-ink);
  font-family:var(--font-body);font-size:var(--text-base);font-weight:500;letter-spacing:0.01em;
  text-decoration:none;padding:var(--space-xs) var(--space-lg);
  border:0;border-radius:var(--radius-md);cursor:pointer;
  transition:background var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out);
}
.btn:hover{background:var(--color-accent-hi);color:var(--color-accent-ink)}
.btn:active{transform:translateY(1px)}
.btn:disabled{background:var(--color-paper-3);color:var(--color-ink-3);cursor:not-allowed;transform:none}

/* ── cards ───────────────────────────────────────────────────────── */
/* ponytail: hairline boxes, no shadows, no coloured top-border. The accent
   rule only appears on hover, so the grid reads as one page, not six stickers. */
.grid{display:grid;gap:var(--space-md);grid-template-columns:repeat(auto-fit,minmax(min(100%,17.5rem),1fr))}
.grid article{
  position:relative;background:var(--color-paper);
  border:var(--rule-hair) solid var(--color-rule);border-radius:var(--radius-md);
  padding:var(--space-md);min-width:0;
  transition:border-color var(--dur-short) var(--ease-out),transform var(--dur-short) var(--ease-out);
}
.grid article::after{
  content:"";position:absolute;inset:-1px -1px auto -1px;height:var(--rule-bold);
  background:var(--color-accent);border-radius:var(--radius-md) var(--radius-md) 0 0;
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur-short) var(--ease-out);
}
.grid article:hover{border-color:var(--color-ink-3);transform:translateY(-2px)}
.grid article:hover::after{transform:scaleX(1)}
.grid h3{margin-bottom:var(--space-2xs)}
.grid p{color:var(--color-ink-2);font-size:var(--text-base);margin:0}

/* ── form ────────────────────────────────────────────────────────── */
form{display:grid;gap:var(--space-sm);margin-top:var(--space-lg);max-width:34rem}
label{
  display:grid;gap:var(--space-3xs);
  font-size:var(--text-sm);font-weight:500;letter-spacing:0.01em;color:var(--color-ink);
}
input,textarea{
  font:inherit;font-size:var(--text-base);width:100%;
  padding:var(--space-2xs) var(--space-xs);
  color:var(--color-ink);background:var(--color-paper);
  border:var(--rule-hair) solid var(--color-rule);border-radius:var(--radius-md);
  transition:border-color var(--dur-fast) var(--ease-out);
}
input::placeholder,textarea::placeholder{color:var(--color-ink-3)}
input:hover,textarea:hover{border-color:var(--color-ink-3)}
input:focus-visible,textarea:focus-visible{border-color:var(--color-focus);outline:var(--rule-bold) solid var(--color-focus);outline-offset:1px}
input:disabled,textarea:disabled{background:var(--color-paper-2);color:var(--color-ink-3);cursor:not-allowed}
input:user-invalid,textarea:user-invalid{border-color:var(--color-accent)}
form .btn{justify-self:start;margin-top:var(--space-2xs)}

/* ── footer ──────────────────────────────────────────────────────── */
footer{background:var(--color-deep);color:var(--color-on-deep-2);padding:var(--space-xl) 0}
.footer-in{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-sm) var(--space-lg);
  padding-bottom:var(--space-md);border-bottom:var(--rule-hair) solid var(--color-rule-deep);
}
/* ponytail: one logo file; the footer sits on navy so the colour art is knocked out to white */
.foot-logo{height:38px;width:auto;flex:none;filter:brightness(0) invert(1)}
.footer-in p{margin:0}
.footer-in a{color:var(--color-on-deep);white-space:nowrap}
.footer-in a:hover{color:var(--color-link-deep)}
.small{
  display:block;margin-top:var(--space-md);
  font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:0.01em;
  color:var(--color-on-deep-3);
}

/* ── mobile ──────────────────────────────────────────────────────── */
@media(max-width:820px){
  .burger{display:block}
  .nav nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    background:var(--color-paper);border-bottom:var(--rule-hair) solid var(--color-rule);
    flex-direction:column;align-items:stretch;
    padding:var(--space-xs) max(4vw,var(--space-sm)) var(--space-sm);gap:var(--space-2xs);
  }
  .nav nav a{padding:var(--space-2xs) 0;border-bottom:0;font-size:var(--text-base)}
  .nav .cta{text-align:center;padding:var(--space-xs) var(--space-sm);margin-top:var(--space-2xs)}
  #menu:checked~nav{display:flex}
  .hero{padding:var(--space-2xl) 0 var(--space-xl)}
  .hero-list{gap:0;margin:var(--space-lg) 0}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:0.01ms !important;animation-duration:0.01ms !important}
  .grid article:hover{transform:none}
}