/* ============================================================
   AGENT SALES & SERVICES — agentsales.com.au
   Design system + split-door hero. Hand-written, no build step.

   Brand values are taken from the official vector artwork in
   "AGent Brand (1).zip", not sampled from rasters:
     navy #15273c · powder swoosh #a0bdde
     Industrial orange #f47a44 (FLAT, not a gradient)
     Pool & Spa blue #0072bc · corporate red #af2e32

   Typography: Archivo + Public Sans stand in for the Typekit
   aktiv-grotesk that agentindustrial.com.au uses. If the kit is
   extended to this domain, change --font-display / --font-body
   and the <link> in the head. Nothing else needs to move.
   ============================================================ */

:root{
  /* brand */
  --navy:#15273c;
  --powder:#a0bdde;
  --ind:#f47a44;
  --ind-deep:#c2551f;
  --pool:#0072bc;
  --pool-soft:#4da1d8;
  --corp-red:#af2e32;

  /* liquid, as rgb triples so alpha can vary by mode */
  --rgb-i-a:250,164,53;  --rgb-i-b:244,122,68;
  --rgb-p-a:77,161,216;  --rgb-p-b:0,114,188;

  /* page — light is the base, dark overrides below */
  --ground:#ffffff;
  --surface:#f7fafc;
  --surface-2:#eef3f8;
  --ink:#15273c;
  --ink-2:#3f5872;
  --muted:#5c7693;
  --line:#dde5ee;

  /* hero */
  --hg:#ffffff;
  --hink:#15273c; --hbody:#3f5872; --hdim:#5c7693;
  --seam:#dfe6ee;
  --liq-top:.07; --liq-bot:.22;
  --photo-rest:.14; --photo-live:.30;
  --veil-0:rgba(255,255,255,.30); --veil-1:rgba(255,255,255,.93); --veil-2:#ffffff;
  --bg-i:#ffffff; --bg-p:#f7fafc;

  --font-display:"Archivo","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-body:"Public Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;

  --measure:66ch;
  --wide:1220px;
}

[data-theme="dark"]{
  --ground:#0d1b2e;
  --surface:#102131;
  --surface-2:#16293f;
  --ink:#edf3fa;
  --ink-2:#c5d6ea;
  --muted:#8fa9c8;
  --line:#22344e;

  --hg:#0d1b2e;
  --hink:#edf3fa; --hbody:#c5d6ea; --hdim:#7e98b8;
  --seam:#2b4160;
  --liq-top:.13; --liq-bot:.36;
  --photo-rest:.26; --photo-live:.52;
  --bg-i:repeating-linear-gradient(58deg, rgba(160,189,222,.035) 0 2px, transparent 2px 26px),
         radial-gradient(125% 95% at 4% 118%, rgba(244,122,68,.16), transparent 60%), #102131;
  --bg-p:repeating-linear-gradient(180deg, rgba(160,189,222,.04) 0 1px, transparent 1px 22px),
         radial-gradient(125% 95% at 96% 118%, rgba(0,114,188,.26), transparent 60%), #0c1a2b;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font:400 16.5px/1.65 var(--font-body);
  -webkit-text-size-adjust:100%;
}
.wrap{max-width:var(--wide);margin:0 auto;padding-inline:22px}
.col{max-width:var(--measure)}
h1,h2,h3,h4{font-family:var(--font-display);text-wrap:balance;margin:0}
h2{font-size:clamp(23px,3.1vw,32px);font-weight:700;letter-spacing:-.024em;line-height:1.15}
h3{font-size:18px;font-weight:700;letter-spacing:-.012em}
p{margin:0}
img{max-width:100%;display:block}
a{color:inherit}
.mono{font-family:var(--font-mono)}
.eyebrow{font:600 11px/1 var(--font-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.lede{font-size:19px;line-height:1.62;color:var(--ink-2)}
.note{font-size:14.5px;color:var(--muted)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
a.skip{position:absolute;left:-9999px;top:0;z-index:50;background:var(--ink);color:var(--ground);padding:12px 18px}
a.skip:focus{left:0}

/* ============================================================
   HERO — the split door
   ============================================================ */
@property --split{syntax:"<length-percentage>";inherits:true;initial-value:50%}

/* The stage is taller than the screen; the hero sticks to the top and the
   doors part across that extra scroll, revealing the parent company behind
   them. --open is 0..1, set by js/site.js from scroll position. */
.stage{position:relative;height:200vh}
.hero{
  position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  background:var(--seam);--split:50%;--open:0;isolation:isolate;
  transition:--split .52s cubic-bezier(.2,.78,.18,1), background-color .52s ease;
}

/* what sits behind the doors */
.reveal{
  position:absolute;inset:0;z-index:1;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:18px;
  /* Committed navy in BOTH modes. In light, white doors parting onto a white
     panel reads as nothing at all - the parent company needs its own ground,
     and navy is the corporate colour. */
  background:#15273c;text-align:center;padding:24px;
  /* Opaque, full bleed - it is the ground BEHIND the doors, not a card
     fading in over them. Held at 0 while shut so the hover seam colour still
     shows through the gap, then solid almost immediately once you move. */
  opacity:clamp(0, calc(var(--open) * 9), 1);
}
.reveal > *{
  opacity:clamp(0, calc(var(--open) * 2 - 0.45), 1);
  transform:translateY(calc((1 - var(--open)) * 16px));
}
.reveal .lgm.corp{height:clamp(46px,6vw,74px);
  background-image:url("../assets/logos/agent-corp-rev.svg")}
.reveal-line{
  font-family:var(--font-display);font-weight:800;letter-spacing:-.035em;line-height:1.02;
  font-size:clamp(34px,6vw,68px);color:#edf3fa;
}
.reveal-sub{font:500 12px/1 var(--font-mono);letter-spacing:.22em;text-transform:uppercase;color:#7e98b8}

/* the doors slide apart; the seam widens into the gap between them */
.door{box-shadow:0 0 70px rgba(9,20,34,calc(var(--open) * .45))}
.door--i{transform:translate3d(calc(var(--open) * -62%),0,0)}
.door--p{transform:translate3d(calc(var(--open) * 62%),0,0)}
.hero[style*="--open:1"] .door{pointer-events:none}

.scrollcue{
  position:absolute;left:50%;bottom:22px;z-index:6;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:9px;pointer-events:none;
  font:600 10px/1 var(--font-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--hdim);
  opacity:calc(1 - var(--open) * 3);
}
.scrollcue span{width:1px;height:26px;background:currentColor;animation:cue 2.1s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.4);opacity:.4}50%{transform:scaleY(1);opacity:1}}
.sitebar{
  position:absolute;top:0;left:0;right:0;z-index:9;
  opacity:calc(1 - var(--open) * 1.4);
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:14px clamp(18px,2.6vw,32px);
}
.sitebar .mark{font:500 10.5px/1 var(--font-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--hdim)}
.sitebar .acts{margin-left:auto;display:flex;align-items:center;gap:10px}
.sitebar a{text-decoration:none;font-family:var(--font-mono);white-space:nowrap}
.sitebar .tel{font:700 15px/1 var(--font-mono);color:var(--hink);padding:8px 4px}
.sitebar .cta{
  font:600 10.5px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--hink);border:1px solid currentColor;padding:10px 14px;opacity:.72;transition:opacity .2s;
}
.sitebar .cta:hover,.sitebar .cta:focus-visible{opacity:1}
.sitebar a:focus-visible{outline:2px solid var(--hink);outline-offset:3px}

.door{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(26px,4vw,72px);
  text-decoration:none;overflow:hidden;transition:filter .52s ease;
}
.door--i{
  --liq-a:var(--rgb-i-a); --liq-b:var(--rgb-i-b); --w1:var(--wv-i1); --w2:var(--wv-i2);
  clip-path:polygon(0 0, calc(var(--split) + 34px) 0, calc(var(--split) - 34px) 100%, 0 100%);
  background:var(--bg-i);
}
.door--p{
  --liq-a:var(--rgb-p-a); --liq-b:var(--rgb-p-b); --w1:var(--wv-p1); --w2:var(--wv-p2);
  clip-path:polygon(calc(var(--split) + 36px) 0, 100% 0, 100% 100%, calc(var(--split) - 32px) 100%);
  background:var(--bg-p);
}

/* photography — masked to the top so it never sits behind the type */
.photo{
  position:absolute;inset:0;z-index:0;background-size:cover;
  opacity:var(--photo-rest);transition:opacity .52s ease;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 30%,transparent 68%);
  mask-image:linear-gradient(180deg,#000 0%,#000 30%,transparent 68%);
}
.door--i .photo{background-image:url("../assets/photos/hero-industrial-032.webp");background-position:64% 26%}
.door--p .photo{background-image:url("../assets/photos/hero-pool-019.webp");background-position:42% 34%}
.door:hover .photo,.door:focus-visible .photo{opacity:var(--photo-live)}

/* ---------- the liquid ---------- */
:root{
  --wv-i1:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='30' viewBox='0 0 190 30' preserveAspectRatio='none'%3E%3Cpath d='M0 16 Q47.5 3 95 16 T190 16 L190 30 L0 30 Z' fill='%23f47a44'/%3E%3C/svg%3E");
  --wv-i2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='279' height='30' viewBox='0 0 279 30' preserveAspectRatio='none'%3E%3Cpath d='M0 16 Q69.75 5 139.5 16 T279 16 L279 30 L0 30 Z' fill='%23faa435'/%3E%3C/svg%3E");
  --wv-p1:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='30' viewBox='0 0 190 30' preserveAspectRatio='none'%3E%3Cpath d='M0 16 Q47.5 3 95 16 T190 16 L190 30 L0 30 Z' fill='%230072bc'/%3E%3C/svg%3E");
  --wv-p2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='279' height='30' viewBox='0 0 279 30' preserveAspectRatio='none'%3E%3Cpath d='M0 16 Q69.75 5 139.5 16 T279 16 L279 30 L0 30 Z' fill='%234da1d8'/%3E%3C/svg%3E");
}
.liq{
  position:absolute;left:-5%;right:-5%;bottom:0;height:0;z-index:0;
  pointer-events:none;overflow:hidden;
  transition:height var(--fill-dur,.82s) cubic-bezier(.18,.84,.26,1);
}
.liq-body{
  position:absolute;left:0;right:0;top:var(--body-top,24px);bottom:-2px;
  background:linear-gradient(180deg, rgba(var(--liq-a),var(--liq-top)), rgba(var(--liq-b),var(--liq-bot)));
}
.liq-wave{position:absolute;left:0;right:0;height:var(--wv-h,30px);background-repeat:repeat-x}
.liq-wave.w1{top:0;background-image:var(--w1);
  background-size:var(--w1-w,190px) var(--wv-h,30px);
  animation:waveA var(--w1-dur,5.4s) linear infinite;opacity:.88}
.liq-wave.w2{top:var(--w2-top,7px);background-image:var(--w2);
  background-size:var(--w2-w,279px) var(--wv-h,30px);
  animation:waveB var(--w2-dur,8.9s) linear infinite;opacity:.5}
@keyframes waveA{from{background-position-x:0}to{background-position-x:190px}}
@keyframes waveB{from{background-position-x:0}to{background-position-x:-279px}}
@keyframes waveAh{from{background-position-x:0}to{background-position-x:340px}}
@keyframes waveBh{from{background-position-x:0}to{background-position-x:-470px}}

/* Bulk acid does not effervesce; spa water does. Industrial gets a long,
   shallow, slow surface and no bubbles. This is deliberate — see the
   project notes before "fixing" it. */
.door--i{
  --wv-h:13px; --w2-top:4px; --body-top:11px;
  --w1-w:340px; --w2-w:470px; --w1-dur:13s; --w2-dur:19s;
  --fill-dur:1.05s; --liq-bot:.26;
}
.door--i .liq-wave.w1{animation-name:waveAh}
.door--i .liq-wave.w2{animation-name:waveBh}
[data-theme="dark"] .door--i{--liq-bot:.42}
.door--i .bubs{display:none !important}

.bubs{position:absolute;inset:0}
.bubs span{position:absolute;bottom:-18px;border-radius:50%;background:rgba(255,255,255,.44);opacity:0}
[data-theme="dark"] .bubs span{background:rgba(255,255,255,.52)}
/* negative delays: the column is already populated as the water arrives */
.bubs span:nth-child(1){left:8%;width:7px;height:7px;animation-duration:4.6s;animation-delay:-0.5s}
.bubs span:nth-child(2){left:19%;width:4px;height:4px;animation-duration:5.8s;animation-delay:-1.1s}
.bubs span:nth-child(3){left:29%;width:10px;height:10px;animation-duration:4.1s;animation-delay:-1.5s}
.bubs span:nth-child(4){left:41%;width:5px;height:5px;animation-duration:5.2s;animation-delay:-2.7s}
.bubs span:nth-child(5){left:53%;width:8px;height:8px;animation-duration:4.4s;animation-delay:-0.2s}
.bubs span:nth-child(6){left:66%;width:5px;height:5px;animation-duration:6.1s;animation-delay:-3.6s}
.bubs span:nth-child(7){left:78%;width:9px;height:9px;animation-duration:4.9s;animation-delay:-1.9s}
.bubs span:nth-child(8){left:90%;width:6px;height:6px;animation-duration:5.5s;animation-delay:-4.0s}
@keyframes rise{
  0%{transform:translateY(0) translateX(0);opacity:0}
  5%{opacity:.8}
  86%{opacity:.5}
  100%{transform:translateY(-420px) translateX(11px);opacity:0}
}

/* ---------- door content ---------- */
.door > .content{position:relative;z-index:1;display:flex;flex-direction:column;gap:clamp(18px,2vw,28px);align-items:flex-start;
  transition:opacity .52s ease, filter .52s ease}
.door--p > .content{align-items:flex-end;text-align:right}
.lgm{display:block;width:auto;background-repeat:no-repeat;background-position:left center;
  background-size:contain;height:clamp(66px,10.5vw,148px)}
.lgm.ind{aspect-ratio:429.45/283.63;background-image:url("../assets/logos/agent-ind.svg")}
.lgm.pool{aspect-ratio:429.44/283.05;background-image:url("../assets/logos/agent-pool.svg")}
[data-theme="dark"] .lgm.ind{background-image:url("../assets/logos/agent-ind-rev.svg")}
[data-theme="dark"] .lgm.pool{background-image:url("../assets/logos/agent-pool-rev.svg")}
.door .line{font-size:clamp(16px,1.45vw,22px);line-height:1.5;color:var(--hbody);max-width:26ch;font-weight:500}
.door .go{
  font:700 clamp(13px,1.05vw,16px)/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;
  padding:clamp(16px,1.5vw,22px) clamp(22px,2.2vw,32px);color:#fff;
  transition:transform .32s cubic-bezier(.2,.78,.18,1);
}
.door--i .go{background:var(--ind-deep)}
.door--p .go{background:var(--pool)}
[data-theme="dark"] .door--i .go{background:var(--ind);color:#2a1405}
[data-theme="dark"] .door--p .go{background:var(--pool-soft);color:#04253c}

/* ---------- engaged ---------- */
.hero:has(.door--i:hover),.hero:has(.door--i:focus-visible){--split:66%;--seam:var(--ind)}
.hero:has(.door--p:hover),.hero:has(.door--p:focus-visible){--split:34%;--seam:var(--pool)}
.door:hover .liq,.door:focus-visible .liq{height:78%}
.door:hover .bubs span,.door:focus-visible .bubs span{animation-name:rise;animation-timing-function:linear;animation-iteration-count:infinite}
.door:hover .go,.door:focus-visible .go{transform:translateX(6px)}
.door--p:hover .go,.door--p:focus-visible .go{transform:translateX(-6px)}
.door:focus-visible{outline:2px solid var(--hink);outline-offset:-10px}

/* NEVER put opacity() on a panel: the hero's own background is the seam
   colour, so a translucent panel lets the live brand colour flood the quiet
   side and it reads as filled. Dark can use brightness() (alpha stays 1);
   light steps the CONTENT back instead. */
[data-theme="dark"] .hero:has(.door--i:hover) .door--p,
[data-theme="dark"] .hero:has(.door--i:focus-visible) .door--p,
[data-theme="dark"] .hero:has(.door--p:hover) .door--i,
[data-theme="dark"] .hero:has(.door--p:focus-visible) .door--i{filter:saturate(.45) brightness(.9) blur(.7px)}
:root:not([data-theme="dark"]) .hero:has(.door--i:hover) .door--p .content,
:root:not([data-theme="dark"]) .hero:has(.door--i:focus-visible) .door--p .content,
:root:not([data-theme="dark"]) .hero:has(.door--p:hover) .door--i .content,
:root:not([data-theme="dark"]) .hero:has(.door--p:focus-visible) .door--i .content{opacity:.4}

/* ============================================================
   BELOW THE FOLD
   ============================================================ */
.band{
  background:var(--surface);border-block:1px solid var(--line);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
}
.band > div{padding:26px 24px;display:flex;flex-direction:column;gap:7px;border-right:1px solid var(--line)}
.band > div:last-child{border-right:0}
.band b{font-family:var(--font-display);font-size:clamp(28px,3.6vw,40px);font-weight:800;
  letter-spacing:-.035em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.band span{font-size:14px;color:var(--muted);line-height:1.45}

section{padding-block:clamp(46px,6vw,80px)}
.sec-head{display:flex;flex-direction:column;gap:12px;margin-bottom:30px;max-width:var(--measure)}

.split2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(24px,3.4vw,48px);align-items:center}
.split2 img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.cards > div{background:var(--ground);padding:26px 24px;display:flex;flex-direction:column;gap:10px}
.cards .k{font:600 10.5px/1 var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.cards p{font-size:15px;line-height:1.6;color:var(--ink-2)}
.cards--ind .k{color:var(--ind-deep)}
[data-theme="dark"] .cards--ind .k{color:var(--ind)}

.sectors{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.sectors span{
  font:600 12px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;
  border:1px solid var(--line);padding:11px 14px;color:var(--ink-2);
}

.cta-strip{
  background:var(--surface);border-block:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:18px 28px;align-items:center;
  padding:clamp(26px,3.4vw,40px) 0;
}
.cta-strip .btn{
  font:700 12.5px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;
  padding:15px 22px;text-decoration:none;background:var(--ink);color:var(--ground);
}
.cta-strip .btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.cta-strip .tel{font:800 clamp(22px,2.8vw,30px)/1 var(--font-mono);color:var(--ink);text-decoration:none;letter-spacing:-.02em}

footer{background:var(--surface-2);border-top:1px solid var(--line);padding-block:36px 42px}
footer .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:26px}
footer h4{font:600 10.5px/1 var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
footer a{color:var(--ink-2);text-decoration:none;font-size:14.5px}
footer a:hover{color:var(--ink);text-decoration:underline}
footer .fine{margin-top:30px;padding-top:20px;border-top:1px solid var(--line);font-size:13px;color:var(--muted);line-height:1.6}

/* theme toggle */
.tt{
  appearance:none;background:transparent;border:1px solid currentColor;color:var(--hink);
  font:600 10.5px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;
  padding:10px 12px;cursor:pointer;opacity:.72;transition:opacity .2s;
}
.tt:hover,.tt:focus-visible{opacity:1}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width:760px){
  .stage{height:auto}
  .hero{position:static;height:auto;display:flex;flex-direction:column;background:var(--hg)}
  .reveal,.scrollcue{display:none}
  .door--i,.door--p{transform:none}
  .sitebar{opacity:1}
  .door{position:relative;inset:auto;clip-path:none;min-height:max(56vh,300px);justify-content:center}
  .door--i{border-bottom:3px solid;border-image:linear-gradient(90deg,var(--ind),var(--pool)) 1}
  .door--p > .content{align-items:flex-start;text-align:left}
  .hero:has(.door:hover) .door,.hero:has(.door:focus-visible) .door{filter:none}
  .hero:has(.door:hover) .content,.hero:has(.door:focus-visible) .content{opacity:1}
  .sitebar{position:relative;background:var(--hg);padding:14px 22px;border-bottom:1px solid var(--line)}
  .sitebar .mark{display:none}
  .sitebar .acts{margin-left:0;width:100%;justify-content:space-between;gap:8px;min-width:0}
  .sitebar .tel{font-size:15.5px;padding:8px 0}
  .sitebar .cta{font-size:9.5px;letter-spacing:.07em;padding:9px 9px}
  /* No hover on touch — the door you have scrolled to fills itself, one at a
     time, so neither reads as chosen by default. */
  .door.in-view .liq{height:78%}
  .door.in-view .photo{opacity:var(--photo-live)}
  .door.in-view .bubs span{animation-name:rise;animation-timing-function:linear;animation-iteration-count:infinite}
  .door:active .liq{height:78%}
  .band > div{border-right:0;border-bottom:1px solid var(--line)}
  .band > div:last-child{border-bottom:0}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .stage{height:auto}
  .hero{position:static;height:auto;min-height:88svh}
  .reveal{display:none}
  .door--i,.door--p{transform:none}
  .scrollcue span{animation:none}
  .hero,.door,.liq,.go,.content,.photo{transition:none}
  .liq-wave{animation:none}
  .bubs{display:none}
}

/* ============================================================
   INNER PAGES
   Shared masthead, page header, prose and the SDS library.
   ============================================================ */
.masthead{
  position:sticky;top:0;z-index:40;background:var(--ground);
  border-bottom:1px solid var(--line);
}
.masthead .bar{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding-block:13px}
.masthead .home{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
.masthead .home .lgm{height:40px}
.lgm.corp{aspect-ratio:429.44/263.34;background-image:url("../assets/logos/agent-corp.svg")}
[data-theme="dark"] .lgm.corp{background-image:url("../assets/logos/agent-corp-rev.svg")}
.masthead nav{display:flex;gap:2px;flex-wrap:wrap;margin-left:auto;align-items:center}
.masthead nav a{
  text-decoration:none;color:var(--ink-2);padding:10px 12px;
  font:600 11.5px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;
  border-bottom:2px solid transparent;
}
.masthead nav a:hover{color:var(--ink)}
.masthead nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ind)}
.masthead .tel{font:700 14.5px/1 var(--font-mono);color:var(--ink);text-decoration:none;padding:10px 6px}
.masthead .tt{color:var(--ink);padding:9px 11px}

.pagehead{border-bottom:1px solid var(--line);background:var(--surface)}
.pagehead .wrap{padding-block:clamp(34px,5vw,66px)}
.pagehead h1{
  font-family:var(--font-display);font-size:clamp(31px,5.2vw,52px);font-weight:800;
  letter-spacing:-.034em;line-height:1.05;margin:10px 0 0;color:var(--ink);
}
.pagehead .lede{margin-top:16px;max-width:58ch}

.prose{max-width:var(--measure)}
.prose > * + *{margin-top:17px}
.prose h2{margin-top:38px}
.prose h3{margin-top:28px}
.prose p{color:var(--ink-2);font-size:16.5px;line-height:1.72}
.prose ul{padding-left:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.prose ul li{
  position:relative;padding-left:24px;color:var(--ink-2);font-size:16px;line-height:1.6;
}
.prose ul li::before{
  content:"";position:absolute;left:0;top:.62em;width:9px;height:2px;background:var(--ind);
}
.prose a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.prose .small{font-size:14.5px;color:var(--muted);line-height:1.65}

.notice{
  border-left:3px solid var(--ind);background:var(--surface);padding:18px 20px;
  display:flex;flex-direction:column;gap:9px;max-width:var(--measure);
}
.notice h4{font:600 10.5px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ind-deep)}
[data-theme="dark"] .notice h4{color:var(--ind)}
.notice p{font-size:15px;line-height:1.6;color:var(--ink-2);margin:0}

/* ---------- SDS library ---------- */
.sds-tools{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  padding-block:20px;border-bottom:1px solid var(--line);
  position:sticky;top:63px;background:var(--ground);z-index:20;
}
.sds-search{
  flex:1 1 260px;min-width:0;font:500 16px/1 var(--font-body);
  padding:14px 15px;border:1px solid var(--line);background:var(--surface);color:var(--ink);
}
.sds-search:focus{outline:2px solid var(--ind);outline-offset:-1px}
.sds-filters{display:flex;gap:0;border:1px solid var(--line)}
.sds-filters button{
  appearance:none;background:transparent;border:0;cursor:pointer;color:var(--muted);
  font:600 10.5px/1 var(--font-mono);letter-spacing:.11em;text-transform:uppercase;padding:12px 13px;
}
.sds-filters button + button{border-left:1px solid var(--line)}
.sds-filters button[aria-pressed="true"]{background:var(--ink);color:var(--ground)}
.sds-filters button:focus-visible{outline:2px solid var(--ind);outline-offset:-2px}
.sds-count{font:500 13px/1 var(--font-mono);color:var(--muted);white-space:nowrap}

.sds-group{margin-top:34px}
.sds-group h2{font-size:19px;letter-spacing:-.015em}
.sds-group .gk{font:600 10.5px/1 var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:8px}
.sds-list{
  margin-top:16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);
}
.sds-list a{
  background:var(--ground);padding:14px 16px;text-decoration:none;color:var(--ink);
  display:flex;align-items:center;gap:12px;font-size:15px;line-height:1.4;
  transition:background .15s;
}
.sds-list a:hover,.sds-list a:focus-visible{background:var(--surface-2)}
.sds-list a::after{
  content:"PDF";margin-left:auto;font:600 10px/1 var(--font-mono);letter-spacing:.1em;
  color:var(--muted);border:1px solid var(--line);padding:5px 6px;flex:0 0 auto;
}
.sds-empty{padding:40px 0;color:var(--muted);font-size:16px}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(26px,3.4vw,52px)}
.contact-block{display:flex;flex-direction:column;gap:8px}
.contact-block .k{font:600 10.5px/1 var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.contact-block .v{font-size:18px;line-height:1.5;color:var(--ink)}
.contact-block a{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--ind);padding-bottom:2px}
.contact-block .big{font:800 clamp(24px,3.2vw,34px)/1 var(--font-mono);letter-spacing:-.02em;border:0}
.map{width:100%;border:1px solid var(--line);aspect-ratio:16/9;background:var(--surface-2)}

@media (max-width:760px){
  .masthead .bar{gap:10px}
  .masthead nav{width:100%;margin-left:0;order:3;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .masthead nav::-webkit-scrollbar{display:none}
  .masthead .tel{margin-left:auto}
  .sds-tools{position:static}
  .sds-list{grid-template-columns:1fr}
}

/* ---------- forms ----------
   Netlify Forms: no backend, works on a drag-and-drop deploy. Submissions
   land in the Netlify dashboard and can be emailed to admin@. */
.formwrap{border:1px solid var(--line);background:var(--surface);padding:clamp(22px,3vw,38px)}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.field{display:flex;flex-direction:column;gap:7px}
.field.wide{grid-column:1/-1}
.field label{font:600 10.5px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.field .req{color:var(--ind-deep)}
[data-theme="dark"] .field .req{color:var(--ind)}
.field input,.field select,.field textarea{
  font:400 16px/1.4 var(--font-body);padding:13px 14px;color:var(--ink);
  background:var(--ground);border:1px solid var(--line);width:100%;
}
.field textarea{min-height:118px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--ind);outline-offset:-1px}
.field .hint{font-size:13px;color:var(--muted)}
.formwrap .actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:22px}
.formwrap button[type=submit]{
  font:700 12.5px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;
  padding:16px 26px;border:0;background:var(--ink);color:var(--ground);cursor:pointer;
}
.formwrap button[type=submit]:hover{opacity:.88}
.hp{position:absolute;left:-9999px}