/* crucible.co.nz · Brand sheet round 4: Ink #17171B, Molten #E5482E (graphics only), Ash #F4F3F0.
   Structure follows the jobtracker.co.nz design system: tokens, one display face, generous spacing. */
:root{
  --paper:#FFFFFF; --surface:#FFFFFF; --soft:#F4F3F0; --line:#E6E4DF;
  --ink:#17171B; --ink-2:#7A7A82; --muted:#5B5B63; --good:#1F7A4D; --good-soft:#E7F3EC;
  --band:#17171B; --band-text:#E4E3DF; --band-muted:#A3A3AA; --band-line:#2C2C33;
  --accent:#17171B; --accent-hover:#000000; --amber:#E5482E; --ember:#B8351F;
  --calc:#2E7D32; --hub:#0F5E4C; --jt:#164E52; --und:#1E3A6E;
  --display:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --body:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --frame:min(1180px, calc(100% - 32px));
  --radius:14px;
  --shadow:0 1px 2px rgba(23,23,27,.06),0 8px 28px rgba(23,23,27,.08);
  color-scheme:light;
}
/* Light only, on every device (decided 10 Nov 2026). */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.65 var(--body)}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-underline-offset:3px;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);text-decoration-thickness:1.5px}
a:hover{text-decoration-color:currentColor}
a:hover{color:var(--accent-hover)}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:4px}
.wrap{width:var(--frame);margin-inline:auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:12px;z-index:50;background:var(--surface);padding:8px 12px}
h1,h2,h3{font-family:var(--display);line-height:1.08;letter-spacing:-.025em;margin:0 0 .5em;text-wrap:balance}
h1{font-size:clamp(2.2rem,4.8vw,3.8rem);font-weight:800;letter-spacing:-.035em}
h2{font-size:clamp(1.55rem,2.8vw,2.2rem);font-weight:700}
h3{font-size:1.2rem;font-weight:700}
p{margin:0 0 1em}
.eyebrow{font:500 .76rem/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.lead{font-size:clamp(1.08rem,1.6vw,1.25rem);color:var(--muted);max-width:62ch}
.muted{color:var(--muted)}

/* Header */
.site-head{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:78px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font:800 1.85rem/1 var(--display);letter-spacing:-.04em}
.brand svg{width:40px;height:40px}
.site-foot .brand{font-size:1.5rem}.site-foot .brand svg{width:32px;height:32px}
.nav{display:flex;align-items:center;gap:6px}
.nav a{color:var(--ink);text-decoration:none;font-weight:500;font-size:.96rem;padding:8px 12px;border-radius:8px}
.nav a:hover,.nav a[aria-current=page]{background:var(--soft);color:var(--ink)}
.nav a.btn{margin-left:6px}
.menu{display:none;position:relative}
.menu summary{list-style:none;cursor:pointer;padding:8px 14px;border:1px solid var(--line);border-radius:8px;font-weight:600;font-size:.95rem}
.menu summary::-webkit-details-marker{display:none}
.menu div{position:absolute;right:0;top:calc(100% + 8px);background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:8px;display:grid;min-width:220px}
.menu a{color:var(--ink);text-decoration:none;padding:10px 12px;border-radius:8px}
.menu a:hover{background:var(--soft)}
@media (max-width:820px){.nav{display:none}.menu{display:block}}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:var(--paper)!important;text-decoration:none;font-weight:600;padding:12px 20px;border-radius:10px;border:1px solid var(--ink);transition:transform .15s ease}
.btn:hover{transform:translateY(-1px);background:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink)!important;border-color:var(--line)}
.btn.ghost:hover{border-color:var(--ink)}
.btn.amber{background:#FFFFFF;border-color:#FFFFFF;color:#17171B!important}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* Sections */
section{padding:clamp(56px,8vw,96px) 0}
section.tight{padding:clamp(40px,5vw,64px) 0}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:32px}
.section-head p{margin:0;max-width:56ch}
.rule{border-top:1px solid var(--line)}

/* Hero */
.hero{padding-top:clamp(48px,7vw,88px);padding-bottom:clamp(40px,6vw,72px);position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,64px);align-items:center}
.hero h1{max-width:18ch}
.hero h1 em{font-style:normal;color:var(--ink-2)}
.fan{position:relative;height:440px}
.fan figure{position:absolute;margin:0;width:46%;border-radius:22px;overflow:hidden;border:6px solid #17171B;box-shadow:var(--shadow);background:#17171B}
.fan figure img{aspect-ratio:390/700;object-fit:cover;object-position:top}
.fan figure:nth-child(1){left:0;top:40px;transform:rotate(-7deg)}
.fan figure:nth-child(2){left:18%;top:8px;transform:rotate(-2deg);z-index:2}
.fan figure:nth-child(3){left:36%;top:22px;transform:rotate(3deg);z-index:3}
.fan figure:nth-child(4){left:54%;top:52px;transform:rotate(8deg);z-index:4}
.glow{position:absolute;inset:auto -10% -60% -10%;height:70%;background:radial-gradient(closest-side,var(--soft),transparent);pointer-events:none;z-index:-1}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}.fan{height:330px;max-width:520px}}

/* Stats */
.stats{display:grid;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;gap:0;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);overflow:hidden}
.stats div{padding:22px 22px 20px;border-left:1px solid var(--line)}
.stats div:first-child{border-left:0}
.stats b{display:block;font:800 clamp(1.6rem,2.6vw,2.15rem)/1.05 var(--display);letter-spacing:-.035em;font-variant-numeric:tabular-nums;margin-bottom:10px}
.stats span{font-size:.92rem;color:var(--muted);line-height:1.4;display:block}
@media (max-width:760px){.stats{grid-auto-flow:row;grid-template-columns:1fr 1fr}.stats div:nth-child(odd){border-left:0}.stats div:nth-child(n+3){border-top:1px solid var(--line)}.stats div:last-child:nth-child(odd){grid-column:1/-1}}

/* Product cards */
.products{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.pcard{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;text-decoration:none;color:var(--ink);transition:transform .2s ease,box-shadow .2s ease}
.pcard:hover{transform:translateY(-3px);box-shadow:var(--shadow);color:var(--ink)}
.pcard .shot{background:var(--soft);padding:18px 18px 0;border-bottom:1px solid var(--line)}
.pcard .shot img{border-radius:10px 10px 0 0;border:1px solid var(--line);border-bottom:0;aspect-ratio:1440/820;object-fit:cover;object-position:top}
.pcard .body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:6px;flex:1}
.pcard .tag{display:inline-flex;align-items:center;gap:8px;font:600 .8rem/1 var(--body);color:var(--muted)}
.pcard .tag i{width:10px;height:10px;border-radius:50%;display:inline-block}
.pcard h3{font-size:1.45rem;margin:4px 0 2px}
.pcard p{margin:0;color:var(--muted)}
.pcard .more{margin-top:auto;padding-top:14px;font-weight:600;color:var(--accent)}
@media (max-width:760px){.products{grid-template-columns:1fr}}
.c-calc{background:var(--calc)} .c-hub{background:var(--hub)} .c-jt{background:var(--jt)} .c-und{background:var(--und)}

/* Pillars */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.pillar{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px;display:flex;flex-direction:column;text-decoration:none;color:var(--ink);position:relative;overflow:hidden}
.pillar::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--ink)}
.pillar:hover{box-shadow:var(--shadow);color:var(--ink)}
.pillar .icon{width:44px;height:44px;border-radius:12px;background:var(--soft);display:grid;place-items:center;margin-bottom:16px;color:var(--ink)}
.pillar .icon svg{width:24px;height:24px}
.pillar small{font-weight:600;color:var(--muted);letter-spacing:.02em}
.pillar h3{font-size:1.6rem;margin:2px 0 8px}
.pillar p{color:var(--muted);margin:0}
.pillar .more{margin-top:auto;padding-top:16px;font-weight:600;color:var(--accent)}
@media (max-width:1100px){.pillars{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.pillars{grid-template-columns:1fr}}

/* Person panel */
.person{display:grid;grid-template-columns:200px 1fr;gap:clamp(24px,4vw,48px);align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(24px,4vw,40px)}
.portrait{width:200px;aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--soft);border:1px solid var(--line)}
.portrait svg,.portrait img{width:100%;height:100%;object-fit:cover}
@media (max-width:700px){.person{grid-template-columns:1fr}.portrait{width:140px}}

/* Charcoal band */
.band{background:var(--band);color:var(--band-text);position:relative;overflow:hidden}
.band::after{content:"";position:absolute;right:-12%;bottom:-70%;width:70%;height:140%;background:radial-gradient(closest-side,rgba(255,255,255,.07),transparent);pointer-events:none}
.band h2{color:#FFFFFF}
.band p{color:var(--band-text)}
.band a:not(.btn){color:#FFFFFF}
.band .wrap{position:relative;z-index:1}
.band .btn.ghost{color:#FFFFFF!important;border-color:var(--band-line)}

/* Page header */
.page-head{padding:clamp(40px,6vw,72px) 0 clamp(28px,4vw,40px);border-bottom:1px solid var(--line)}
.crumbs{font-size:.9rem;color:var(--muted);margin-bottom:18px}
.crumbs a{color:var(--muted)}
.chip{display:inline-flex;align-items:center;gap:8px;font:600 .82rem/1 var(--body);padding:7px 12px;border-radius:999px;color:#fff;margin-bottom:16px}

/* Facts bar */
.facts{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);margin:0}
.facts div{padding:18px 18px 16px;border-left:1px solid var(--line)}
.facts div:first-child{border-left:0}
.facts dt{font:500 .72rem/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.facts dd{margin:0;font-size:.95rem;line-height:1.45}
@media (max-width:980px){.facts{grid-template-columns:1fr 1fr}.facts div{border-left:0;border-top:1px solid var(--line)}.facts div:nth-child(-n+2){border-top:0}.facts div:nth-child(even){border-left:1px solid var(--line)}}
@media (max-width:520px){.facts{grid-template-columns:1fr}.facts div,.facts div:nth-child(even){border-left:0;border-top:1px solid var(--line)}.facts div:first-child{border-top:0}}

/* Device frames */
.devices{display:grid;grid-template-columns:1fr 230px;gap:28px;align-items:end;margin-top:36px}
.browser{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow)}
.browser .bar{display:flex;align-items:center;gap:7px;padding:10px 14px;background:var(--soft);border-bottom:1px solid var(--line)}
.browser .bar i{width:10px;height:10px;border-radius:50%;background:var(--line)}
.browser .bar span{margin-left:10px;font-size:.8rem;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:3px 10px}
.phone{border:8px solid #17171B;border-radius:30px;overflow:hidden;background:#17171B;box-shadow:var(--shadow)}
.phone img{aspect-ratio:390/760;object-fit:cover;object-position:top;border-radius:22px}
@media (max-width:760px){.devices{grid-template-columns:1fr}.phone{width:62%;margin:0 auto}}

/* Story sections */
.story{display:grid;grid-template-columns:220px 1fr;gap:clamp(20px,4vw,56px);padding:clamp(36px,5vw,56px) 0;border-top:1px solid var(--line)}
.story:first-child{border-top:0}
.story h2{font-size:1.5rem}
.story .num{font:500 .78rem/1 var(--mono);letter-spacing:.12em;color:var(--muted);display:block;margin-bottom:10px}
.story .text{display:grid;grid-template-columns:1fr 1fr;column-gap:40px;align-content:start}
.story .text > :not(p){grid-column:1/-1}
@media (max-width:980px){.story .text{grid-template-columns:1fr}}
@media (max-width:760px){.story{grid-template-columns:1fr}}

/* Flow diagram */
.flow{list-style:none;padding:0;margin:26px 0 8px;display:grid;grid-template-columns:repeat(4,1fr);gap:26px;counter-reset:f}
.flow li{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 16px 14px;counter-increment:f}
.flow li::before{content:counter(f);display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--paper);font:500 .78rem/1 var(--mono);margin-bottom:10px}
.flow li:not(:last-child)::after{content:"";position:absolute;right:-21px;top:50%;width:16px;height:16px;background:no-repeat center/16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4' fill='none' stroke='%237A7A82' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.flow b{display:block;font-family:var(--display);font-size:1.02rem;margin-bottom:4px}
.flow span{display:block;font-size:.9rem;color:var(--muted);line-height:1.45}
@media (max-width:900px){.flow{grid-template-columns:1fr 1fr}.flow li:nth-child(2)::after{display:none}}
@media (max-width:520px){.flow{grid-template-columns:1fr;gap:22px}.flow li:not(:last-child)::after{right:auto;left:50%;top:auto;bottom:-20px;transform:translateX(-50%) rotate(90deg);display:block}}

/* Lists and grids */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.tile h3{margin-bottom:6px}
.tile p{margin:0;color:var(--muted)}
.tile .k{font:500 .76rem/1 var(--mono);letter-spacing:.1em;color:var(--muted);display:block;margin-bottom:12px}
@media (max-width:900px){.grid3{grid-template-columns:1fr}}
@media (max-width:700px){.grid2{grid-template-columns:1fr}}
.prose{max-width:70ch}
.prose h2{margin-top:1.6em;font-size:1.5rem}
.callout{border-left:4px solid var(--ink);background:var(--soft);padding:18px 22px;border-radius:0 12px 12px 0;margin:24px 0}
.next{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:28px 0;border-top:1px solid var(--line);margin-top:20px}
.next a{font-weight:600;text-decoration:none}
.timeline{list-style:none;padding:0;margin:24px 0;border-left:2px solid var(--line)}
.timeline li{position:relative;padding:0 0 22px 24px}
.timeline li::before{content:"";position:absolute;left:-7px;top:7px;width:12px;height:12px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 4px var(--paper)}
.timeline b{font-family:var(--display);display:block;font-size:1.1rem;margin:2px 0 4px}

/* Footer */
.site-foot{background:var(--band);color:var(--band-muted);padding:56px 0 36px;font-size:.93rem}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
.site-foot h2{font:500 .74rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#FFFFFF;margin:4px 0 14px}
.site-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.site-foot a{color:var(--band-text);text-decoration:none}
.site-foot a:hover{color:#FFFFFF}
.site-foot .brand{color:#FFFFFF}
.legal{border-top:1px solid var(--band-line);margin-top:40px;padding-top:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
@media (max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Endorsement, as on the brand sheet: "A [C] Crucible product" */
.endorse{display:inline-flex;align-items:center;gap:6px;font-size:.92rem;color:var(--muted);margin:2px 0 0}
.endorse svg{width:16px;height:16px;color:var(--ink)}
.endorse b{color:var(--ink);font-weight:700;letter-spacing:-.02em}
.timeline .muted:first-child{font-family:var(--display);font-weight:700;color:var(--ink-2)}

/* Positive signals use green: live status, verified, done. Molten is reserved for the Crucible C. */
.facts dd.live{display:flex;align-items:center;gap:8px}
.facts dd.live::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--good);box-shadow:0 0 0 4px var(--good-soft)}
.pcard .live{display:inline-flex;align-items:center;gap:6px;font:500 .72rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--good);background:var(--good-soft);padding:5px 8px;border-radius:999px;margin-left:auto}
.pcard .tag{width:100%}

/* How we build: the ordered stages */
.page-head h1 .soft{color:var(--ink-2)}
.stages{list-style:none;margin:0;padding:0;display:grid;gap:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface)}
.stages li{display:grid;grid-template-columns:190px 1fr 280px;gap:clamp(18px,3vw,40px);padding:clamp(22px,3vw,32px);border-top:1px solid var(--line);position:relative}
.stages li:first-child{border-top:0}
.stages li:nth-child(-n+3){background:var(--soft)}
.st-n span{display:block;font:800 2.6rem/1 var(--display);letter-spacing:-.04em;color:var(--ink-2);margin-bottom:6px}
.st-n b{font:700 1.15rem/1.2 var(--display)}
.st-body h3{font-size:1.35rem;margin-bottom:8px}
.st-body p{margin:0 0 10px;color:var(--muted)}
.st-body .why{margin:0;color:var(--ink);font-size:.95rem}
.st-out{align-self:start;border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:14px 16px;font-size:.95rem;font-weight:600;line-height:1.4}
.st-out small{display:block;font:500 .7rem/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.stages li:nth-child(3)::after{content:"The foundation: done before the build starts";position:absolute;right:clamp(22px,3vw,32px);bottom:-13px;z-index:1;font:500 .7rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;background:var(--ink);color:var(--paper);padding:7px 10px;border-radius:999px}
@media (max-width:900px){.stages li{grid-template-columns:1fr}.st-n{display:flex;align-items:baseline;gap:12px}.st-n span{font-size:2rem;margin:0}.stages li:nth-child(3)::after{left:clamp(22px,3vw,32px);right:auto}}
.compare{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface)}
.cmp-row{display:grid;grid-template-columns:200px 1fr 1fr;border-top:1px solid var(--line)}
.cmp-row:first-child{border-top:0}
.cmp-row span{padding:16px 20px}
.cmp-row span:first-child{font-weight:700}
.cmp-row span:nth-child(2){color:var(--muted)}
.cmp-row .ours{background:var(--good-soft);font-weight:600;display:flex;gap:10px}
.cmp-row .ours::before{content:"";flex:none;width:9px;height:9px;margin-top:.55em;border-radius:50%;background:var(--good)}
.cmp-head span{font:500 .72rem/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)!important;background:var(--soft)!important;font-weight:500!important}
.cmp-head .ours::before{display:none}
@media (max-width:700px){.cmp-row{grid-template-columns:1fr}.cmp-row span{padding:10px 16px}.cmp-row span:first-child{padding-top:16px}.cmp-head{display:none}}
.wide-pair .tile p{margin:0 0 12px}
.wide-pair .tile h3{font-size:1.4rem;margin-bottom:12px}

/* About: who I am */
.who{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(24px,4vw,56px);align-items:start}
.who h2{max-width:22ch}
.who aside h3{margin-bottom:12px}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ticks li{display:grid;grid-template-columns:18px 1fr;column-gap:10px;color:var(--muted);font-size:.95rem;line-height:1.45}
.ticks li::before{content:"";grid-row:span 2;width:9px;height:9px;margin-top:.45em;border-radius:50%;background:var(--good);box-shadow:0 0 0 4px var(--good-soft)}
.ticks b{color:var(--ink);display:block}
@media (max-width:860px){.who{grid-template-columns:1fr}}

/* Contact form */
.contact-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:22px;align-items:start}
.contact-side{display:grid;gap:22px}
.form{display:grid;gap:16px;padding:clamp(22px,3vw,32px)}
.form .h3{font-size:1.35rem;margin:0}
.form label{display:grid;gap:6px;font-weight:600;font-size:.95rem}
.form .opt{font-weight:400;color:var(--muted);font-size:.85rem}
.form input,.form select,.form textarea{font:inherit;font-weight:400;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:11px 13px;width:100%}
.form textarea{resize:vertical;min-height:150px}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--ink) 12%,transparent)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{margin:0;font-size:.88rem;color:var(--muted)}
.form-msg{margin:0;font-size:.95rem}
.form-msg:empty{display:none}
.form-msg.bad{color:#B42318}
.form .btn{justify-self:start;cursor:pointer;font:inherit;font-weight:600}
.form .btn:disabled{opacity:.6;cursor:wait}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}}
@media (max-width:560px){.field-row{grid-template-columns:1fr}}

/* Tagline: "Crucible | Where ideas converge." */
.tagline{display:inline-flex;align-items:center;gap:8px;margin:0 0 16px;font-size:1rem;color:var(--muted)}
.tagline svg{width:18px;height:18px;color:var(--ink)}
.tagline b{color:var(--ink);font-weight:800;letter-spacing:-.03em}
.tagline span{padding-left:10px;border-left:1.5px solid var(--line);font-weight:500}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media (max-width:1100px){.grid4{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.grid4{grid-template-columns:1fr}}

/* Full-width timelines: year | heading | text in rows */
.timeline.rows{border-left:0;margin:28px 0 0}
.timeline.rows li{display:grid;grid-template-columns:150px minmax(200px,300px) 1fr;gap:6px 32px;padding:20px 0 20px 0;border-top:1px solid var(--line);align-items:baseline}
.timeline.rows li:last-child{border-bottom:1px solid var(--line)}
.timeline.rows li::before{display:none}
.timeline.rows .yr{font:700 .95rem/1.3 var(--display);color:var(--ink-2);letter-spacing:-.01em}
.timeline.rows b{margin:0;font-size:1.1rem;line-height:1.3}
.timeline.rows .muted{line-height:1.6}
.timeline.rows.two li{grid-template-columns:minmax(220px,380px) 1fr}
@media (max-width:820px){.timeline.rows li,.timeline.rows.two li{grid-template-columns:1fr;gap:4px}}
/* Two-column sections */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:start}
.pair .callout{margin-top:0}
@media (max-width:860px){.pair{grid-template-columns:1fr}}
.cols2{columns:2;column-gap:56px}
.cols2 h2{font-size:1.4rem;margin-top:0;break-after:avoid}
.cols2 p{break-inside:avoid}
@media (max-width:760px){.cols2{columns:1}}

/* Testimonials */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.quote{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column;gap:16px}
.quote blockquote{margin:0}
.quote blockquote p{margin:0;font-size:1.02rem;line-height:1.6;color:var(--ink)}
.quote blockquote p::before{content:"“";display:block;font:800 2.6rem/.6 var(--display);color:var(--ink-2);margin-bottom:10px}
.quote figcaption{margin-top:auto;display:grid;gap:2px;font-size:.9rem;color:var(--muted)}
.quote figcaption b{color:var(--ink);font-size:.98rem}
.quote-src{margin:12px 0 0;font-size:.85rem;color:var(--muted)}
/* Experience strip */
.exp{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:22px 0 0;font-size:.95rem}
.exp span{font:500 .72rem/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-right:6px}
.exp b{font-weight:600;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
.who aside .exp{margin-top:14px}
/* Case studies */
.pcard.case .body{padding:26px 26px 24px}
.pcard.case .big{font:800 clamp(1.9rem,3vw,2.5rem)/1 var(--display);letter-spacing:-.035em;margin-top:8px}
.pcard .small{font-size:.9rem}
.case-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:18px 0 0}
.case-head b{font:800 clamp(2.2rem,4vw,3.2rem)/1 var(--display);letter-spacing:-.04em}
.case-head span{color:var(--muted)}
.facts.four{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){.facts.four{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.facts.four{grid-template-columns:1fr}}
/* Numbers table */
.ntable{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;font-size:.95rem}
.ntable th,.ntable td{text-align:left;padding:14px 16px;border-top:1px solid var(--line);vertical-align:top}
.ntable thead th{border-top:0;background:var(--soft);font:500 .72rem/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
@media (max-width:760px){.ntable thead{display:none}.ntable tr{display:grid;border-top:1px solid var(--line)}.ntable th,.ntable td{border-top:0;padding:6px 16px}.ntable tr th{padding-top:14px}}

/* ---------- Phone layout (10 Nov 2026) ---------- */
.mbar{display:none}
@media (max-width:820px){
  /* Compact sticky bar and full-screen menu */
  .site-head{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--paper)}
  .site-head .wrap{height:60px}
  .site-head .brand{font-size:1.4rem;gap:8px}
  .site-head .brand svg{width:30px;height:30px}
  .menu summary{width:44px;height:44px;padding:0;display:grid;place-items:center;border-radius:10px}
  .bars{display:grid;gap:5px;width:20px}
  .bars i{display:block;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s ease,opacity .2s ease}
  .menu[open] .bars i:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .menu[open] .bars i:nth-child(2){opacity:0}
  .menu[open] .bars i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .menu .menu-panel{position:fixed;inset:60px 0 0 0;min-width:0;border:0;border-radius:0;box-shadow:none;background:var(--paper);padding:12px 16px 32px;display:flex;flex-direction:column;gap:2px;overflow-y:auto;z-index:30}
  .menu .menu-panel a{font:700 1.5rem/1.2 var(--display);letter-spacing:-.02em;padding:16px 4px;border-bottom:1px solid var(--line);border-radius:0}
  .menu .menu-panel a[aria-current=page]{background:transparent;color:var(--ink-2)}
  .menu .menu-panel a.btn{margin-top:24px;justify-content:center;font-size:1.1rem;padding:16px 20px;border-radius:12px;border-bottom:1px solid var(--ink)}
  .menu-note{margin:auto 0 0;padding-top:24px;color:var(--muted);font-size:.95rem}
  body:has(.menu[open]){overflow:hidden}

  /* Tagline once: drop the second logo */
  .hero .tagline svg,.hero .tagline b{display:none}
  .hero .tagline span{padding-left:0;border-left:0}
  .hide-sm{display:none}

  /* Sticky contact bar */
  .mbar{display:flex;align-items:center;justify-content:center;gap:8px;position:fixed;left:12px;right:12px;bottom:12px;z-index:25;background:var(--ink);color:#FFFFFF!important;text-decoration:none;font-weight:600;padding:15px 18px;border-radius:14px;box-shadow:0 8px 28px rgba(23,23,27,.25);transform:translateY(140%);transition:transform .25s ease}
  .mbar.on{transform:none}
  .site-foot{padding-bottom:96px}
}
@media (max-width:600px){
  /* Hero: fits in three to four lines, buttons stacked */
  .hero{padding-top:28px;padding-bottom:28px}
  .hero h1{font-size:2.05rem;line-height:1.06;max-width:none}
  .hero .lead{font-size:1.05rem}
  .hero .actions{flex-direction:column}
  .hero .actions .btn{justify-content:center;padding:15px 20px}
  h1{font-size:2rem}
  h2{font-size:1.6rem}
  section{padding:48px 0}
  section.tight{padding:36px 0}
  .page-head{padding:28px 0 24px}

  /* Phone fan becomes a swipeable strip */
  .fan{height:auto;max-width:none;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:4px -16px 0;padding:6px 16px 14px;scrollbar-width:none}
  .fan::-webkit-scrollbar{display:none}
  .fan figure{position:static;transform:none!important;flex:0 0 46%;scroll-snap-align:start;border-width:5px;border-radius:20px}

  /* Stats: compact list, number left */
  .stats{grid-auto-flow:row;grid-template-columns:1fr}
  .stats div,.stats div:nth-child(odd),.stats div:last-child:nth-child(odd){display:grid;grid-template-columns:minmax(0,9.5rem) 1fr;gap:14px;align-items:center;padding:14px 16px;border-left:0;border-top:1px solid var(--line);grid-column:auto}
  .stats div:first-child{border-top:0}
  .stats b{font-size:1.35rem;margin:0;line-height:1.1}
  .stats span{font-size:.9rem}

  /* Cards: short screenshot strip */
  .pcard .shot{padding:12px 12px 0}
  .pcard .shot img{aspect-ratio:1440/520}
  .pcard .body{padding:18px 18px 20px}
  .pcard h3{font-size:1.3rem}

  /* Tighter tiles and quotes */
  .tile,.pillar,.quote{padding:20px}
  .exp b{padding:5px 10px;font-size:.88rem}
  .section-head{margin-bottom:22px}
}

/* ---------- Phone spacing pass 2 (10 Nov 2026): tighter hero, logo never smaller than the headline ---------- */
@media (max-width:820px){
  .site-head .wrap{height:64px}
  .site-head .brand{font-size:1.85rem;gap:9px}
  .site-head .brand svg{width:36px;height:36px}
  .menu .menu-panel{inset:64px 0 0 0}
  .band::after{display:none}
}
@media (max-width:600px){
  .hero{padding-top:14px;padding-bottom:18px}
  .hero-grid{gap:16px}
  .hero .tagline{margin-bottom:6px;font-size:.95rem}
  .hero h1{font-size:1.85rem;line-height:1.05;margin-bottom:10px}
  .hero .lead{line-height:1.5;margin-bottom:0}
  .hero .actions{flex-direction:row;margin-top:16px;gap:10px}
  .hero .actions .btn{flex:1 1 0;padding:13px 12px;font-size:.98rem}
  .fan{margin-top:0;padding-top:2px}
  section{padding:36px 0}
  section.tight{padding:28px 0}
  .section-head{gap:6px;margin-bottom:18px}
  .section-head h2{margin-bottom:4px}
  .section-head p{font-size:1rem;line-height:1.55}
  .eyebrow{margin-bottom:8px}
  .lead{line-height:1.55}
  .pillar .icon{width:38px;height:38px;margin-bottom:12px}
  .pillar .more,.pcard .more{padding-top:10px}
}

/* ================= UX audit (10 Nov 2026) ================= */
/* Header 64px, 16px nav */
.site-head .wrap{height:64px}
.nav a{font-size:1rem}
/* Type scale */
h1{font-size:clamp(2.2rem,5.9vw,3.8rem)}
h2{font-size:clamp(1.75rem,4vw,2.2rem)}
.eyebrow{font-size:.8125rem;color:var(--ink)}
.pcard .tag,.tile .k,.story .num,.facts dt,.ccard .tag{font-size:.8125rem;color:var(--ink)}
/* Section rhythm: white and Ash bands, footer the only dark block */
section{padding:80px 0}
section.tight{padding:56px 0}
.ash{background:var(--soft)}
.ash .tile,.ash .pillar,.ash .quote,.ash .person{background:var(--surface)}
/* Molten accent: decorative arrows bright, text in the darker tone (5.9:1 on white) */
.arr{color:var(--amber)}
.hero h1 em{color:#B8351F}
.btn.molten{background:#B8351F;border-color:#B8351F;color:#FFFFFF!important}
.btn.molten:hover{background:#9C2C19;border-color:#9C2C19}
/* Hero */
.hero .lead{max-width:560px}
.hero-link{margin:14px 0 0;font-weight:600}
.hero-link a{text-decoration:none}
/* Compact product cards: 4 across, 16:10 crop */
.products.compact{grid-template-columns:repeat(4,1fr);gap:24px}
.pcard.compact .shot{padding:12px 12px 0}
.pcard.compact .shot img{aspect-ratio:16/10}
.pcard.compact .body{padding:16px 18px 18px;gap:4px}
.pcard.compact h3{font-size:1.2rem;margin:2px 0}
.pcard.compact p{font-size:.95rem}
.pcard.compact .more{padding-top:10px;font-size:.95rem}
/* Track record: three case cards and one testimonial */
.proof-row{display:grid;grid-template-columns:3fr 1fr;gap:20px;align-items:stretch}
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.proof-row .quotes{grid-template-columns:1fr;height:100%}
.ccard{display:flex;flex-direction:column;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px;text-decoration:none;color:var(--ink);transition:box-shadow .2s ease}
.ccard:hover{box-shadow:var(--shadow);color:var(--ink)}
.ccard .result{font:800 40px/1 var(--display);letter-spacing:-.035em;color:#B8351F;margin-top:10px}
.ccard .small{font-size:.9rem}
.ccard p{color:var(--muted);margin:10px 0 0;font-size:.96rem}
.ccard .more{margin-top:auto;padding-top:14px;font-weight:600}
/* Advisory and venture cards */
.advs{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.adv{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px;display:flex;flex-direction:column;scroll-margin-top:84px}
.adv h3{font-size:1.2rem;margin-bottom:6px}
.adv p{color:var(--muted);margin:0 0 12px;font-size:.96rem}
.adv .k{font:500 .8125rem/1 var(--mono);letter-spacing:.1em;color:var(--ink);margin-bottom:12px}
.adv .ex{font-size:.92rem;border-top:1px solid var(--line);padding-top:12px}
.adv .ex span{display:block;font:500 .8125rem/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin-bottom:4px}
.adv .more{margin-top:auto;font-weight:600;text-decoration:none}
/* Ventures teaser */
.teaser{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;border:1px solid var(--line);border-radius:var(--radius);padding:28px 32px}
.teaser h2{margin-bottom:6px}
.teaser p{margin:0;max-width:60ch}
/* Contact band: white with a molten top edge */
.cta-band{background:var(--paper);border-top:4px solid var(--amber)}
.cta-inner{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.cta-inner h2{margin-bottom:6px}
.cta-inner p{margin:0;max-width:56ch}
.form-grid{display:grid;grid-template-columns:1fr minmax(0,560px);gap:48px;align-items:start}
/* Form: 560px max, 48px fields, three-way selector */
.form{max-width:560px;width:100%;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.form input,.form select{min-height:48px}
.pick{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pick legend{font-weight:600;font-size:.95rem;margin-bottom:8px;padding:0}
.pick label{display:block;font-weight:600}
.pick input{position:absolute;opacity:0;width:1px;height:1px;min-height:0}
.pick span{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid var(--line);border-radius:999px;cursor:pointer;background:var(--paper)}
.pick input:checked + span{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.pick input:focus-visible + span{outline:3px solid var(--ink);outline-offset:2px}
.form-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.form-foot .btn{justify-self:auto}
.form-note{font-size:.88rem;color:var(--muted)}
.more-links{display:flex;flex-wrap:wrap;gap:8px 20px;margin:22px 0 0;font-weight:600}
/* Tablet */
@media (max-width:1100px){
  .products.compact,.advs{grid-template-columns:1fr 1fr}
  .proof-row{grid-template-columns:1fr}
  .proof-row .quotes{grid-template-columns:1fr}
}
@media (max-width:900px){
  section{padding:56px 0}
  section.tight{padding:40px 0}
  .hero h1{max-width:none}
  .pcard h3,.pillar h3,.adv h3,.tile h3{font-size:1.25rem}
  .fan{margin-inline:auto;width:100%;max-width:560px}
  .fan figure:nth-child(1){left:3%}
  .cases{grid-template-columns:1fr 1fr 1fr}
  .form-grid{grid-template-columns:1fr;gap:24px}
}
@media (max-width:820px){
  .site-foot .foot-grid > div:first-child{grid-column:1/-1}
  .site-foot ul{gap:0}
  .site-foot li a{display:block;padding:12px 0}
}
/* Phone */
@media (max-width:600px){
  body{font-size:16px}
  section{padding:48px 0}
  section.tight{padding:32px 0}
  .products.compact{grid-template-columns:1fr;gap:12px}
  .pcard.compact{flex-direction:row;align-items:stretch}
  .pcard.compact .shot{width:96px;flex:none;padding:0;border-bottom:0;border-right:1px solid var(--line)}
  .pcard.compact .shot img{aspect-ratio:auto;height:100%;width:100%;object-fit:cover;object-position:top left;border:0;border-radius:0}
  .pcard.compact .body{padding:12px 14px;gap:2px}
  .pcard.compact h3{font-size:1.1rem}
  .pcard.compact p{font-size:.9rem;line-height:1.4}
  .pcard.compact .more{display:none}
  .cases,.advs{grid-template-columns:1fr}
  .ccard .result{font-size:34px}
  .teaser{padding:22px}
  .teaser .btn{width:100%;justify-content:center}
  .cta-inner .actions{width:100%}
  .cta-inner .btn{flex:1 1 auto;justify-content:center}
  .form{padding:20px}
  .form-foot .btn{width:100%;justify-content:center}
}
/* Phone: long card runs become swipeable rows */
@media (max-width:600px){
  .swipe-sm,.swipe-wrap .quotes{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 -16px;padding:2px 16px 10px;scrollbar-width:none}
  .swipe-sm::-webkit-scrollbar,.swipe-wrap .quotes::-webkit-scrollbar{display:none}
  .swipe-sm > *,.swipe-wrap .quote{flex:0 0 84%;scroll-snap-align:start}
  .proof-row > .quotes,.proof-row > .quote-src{display:none}
  .proof-row{display:block}
}
/* Contact page: the form fills its column; thank-you heading at a calmer size */
.contact-grid{grid-template-columns:1.6fr 1fr;gap:32px}
.contact-grid .form{max-width:none;padding:clamp(24px,3vw,36px)}
.contact-grid .form textarea{min-height:200px}
.contact-grid .form-foot .btn{padding:14px 28px}
.small-head h1{font-size:clamp(1.9rem,3.4vw,2.6rem)}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}}
/* Page headers: less dead space above and below, intro runs the full width */
.crumbs{margin-bottom:0}
.page-head{padding:20px 0 32px}
.page-head .lead{max-width:none;margin-bottom:0}
.page-head .actions{margin-top:20px}
.page-head + section,.page-head + section.tight{padding-top:36px}
@media (max-width:600px){.page-head{padding:14px 0 24px}.page-head + section,.page-head + section.tight{padding-top:28px}}
/* Home contact band: form takes the larger share and fills it */
.form-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:56px}
.form-band .form{max-width:none;padding:clamp(24px,3vw,36px)}
.form-band .form-foot .btn{padding:14px 28px}
@media (max-width:900px){.form-grid{grid-template-columns:1fr;gap:24px}}
/* Fifth product: PAYECalculator.co.nz (navy, its own brand colour) */
.c-paye{background:#1F3A68}
.products.compact{grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}
@media (max-width:1100px){.products.compact{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.products.compact{grid-template-columns:1fr}}

/* Text runs the full width it has (10 Nov 2026): no character caps that stack lines which would fit */
.section-head p,.teaser p,.cta-inner p,.who h2,.story .text,.prose{max-width:none}
.section-head > div:first-child{flex:0 1 auto}
.section-head p{flex:1 1 420px}
/* Section heading, then its intro underneath on the full width (James, 10 Nov 2026) */
.section-head{display:block}
.section-head p{margin:10px 0 0;max-width:none}