/* Koyda Ltd – site styles. Mobile-first, no framework. */
@font-face{font-family:"Space Grotesk";src:url(/assets/fonts/SpaceGrotesk-300-700.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/assets/fonts/JetBrainsMono-400.woff2) format("woff2");font-weight:400 500;font-display:swap}
:root{
  /* KOYDA Option G "DATUM" palette */
  --graphite:#0A0A0A;--carbon:#141414;--steel:#2C2C2C;--line-dark:#222222;
  --paper:#F5F5F5;--white:#fff;--ink:#0A0A0A;--mid:#6B6B6B;--line:#DCDCDC;
  --on-dark:#EDEDED;--on-dark-mid:#A3A3A3;
  --accent:#0FA3C8;        /* Datum Cyan: fills, rules, marks; text only on dark (6.7:1 on #0A0A0A) */
  --accent-light:#2EC0E4;  /* Light Cyan: small text / focus on dark (9.2:1), button hover */
  --accent-text:#087391;   /* Dark Datum Cyan: cyan text/icons on light (5.0:1 on #F5F5F5, 5.4:1 on white) */
  --sans:"Space Grotesk","Segoe UI","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --max:1320px;--gut:clamp(1.1rem,4vw,2.5rem);--r:0;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--sans);font-size:1.0625rem;line-height:1.6;color:var(--ink);background:var(--white);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{color:var(--accent-text)}
:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px}
.dark :focus-visible,.site-header :focus-visible,.util :focus-visible,.site-footer :focus-visible,.facts :focus-visible{outline-color:var(--accent-light)}
h1,h2,h3{line-height:1.08;letter-spacing:-.02em;margin:0 0 .6em;font-weight:600}
h1{font-size:clamp(2.2rem,5.2vw,4.2rem);letter-spacing:-.03em}
h2{font-size:clamp(1.6rem,3vw,2.5rem)}
h3{font-size:1.2rem;letter-spacing:-.01em}
p{margin:0 0 1em}
ul{padding-left:1.1em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.skip{position:absolute;left:-999px;top:0;background:var(--accent);color:var(--ink);padding:.6rem 1rem;z-index:100}
.skip:focus{left:1rem}
.mono,.label{font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase}
.label{display:inline-flex;gap:.6em;align-items:center;color:var(--mid);margin-bottom:1.1rem}
.label::before{content:"";width:1.6rem;height:1px;background:var(--accent)}
.dark .label,.label.on-dark{color:var(--on-dark-mid)}
.lead{font-size:clamp(1.1rem,1.6vw,1.3rem);line-height:1.5;color:var(--mid);max-width:44rem}
.dark .lead{color:var(--on-dark-mid)}

/* Utility bar + header */
.util{background:#050505;color:var(--on-dark-mid);font-family:var(--mono);font-size:.72rem;letter-spacing:.05em}
.util .wrap{display:flex;gap:1.4rem;justify-content:flex-end;align-items:center;min-height:2.2rem;flex-wrap:wrap}
.util a{text-decoration:none;color:var(--on-dark)}
.util a:hover{color:#fff}
.util .loc{margin-right:auto;display:none}
@media(min-width:760px){.util .loc{display:block}}
.site-header{position:sticky;top:0;z-index:50;background:rgba(10,10,10,.92);backdrop-filter:saturate(140%) blur(10px);-webkit-backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line-dark);color:var(--on-dark)}
.site-header .wrap{display:flex;align-items:center;gap:1.5rem;min-height:4.25rem}
.brand{display:flex;align-items:center;text-decoration:none}
.brand img{width:150px;height:auto}
.nav-toggle{margin-left:auto;background:none;border:1px solid var(--steel);color:var(--on-dark);font:500 .75rem var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:.55rem .8rem;cursor:pointer}
.primary-nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--graphite);border-bottom:1px solid var(--line-dark);padding:.5rem var(--gut) 1.25rem}
.primary-nav.open{display:block}
.primary-nav ul{list-style:none;margin:0;padding:0}
.primary-nav a{display:block;padding:.8rem 0;text-decoration:none;border-bottom:1px solid var(--line-dark);font-size:1.05rem;color:var(--on-dark)}
.primary-nav a[aria-current="page"]{color:#fff;box-shadow:inset 3px 0 0 var(--accent);padding-left:.75rem}
.header-cta{display:none}
@media(min-width:1000px){
  .nav-toggle{display:none}
  .primary-nav{display:block;position:static;background:none;border:0;padding:0;margin-left:auto}
  .primary-nav ul{display:flex;gap:.25rem}
  .primary-nav a{border:0;padding:.5rem .75rem;font-size:.95rem;color:var(--on-dark-mid);position:relative}
  .primary-nav a:hover{color:#fff}
  .primary-nav a[aria-current="page"]{color:#fff;box-shadow:none;padding-left:.75rem}
  .primary-nav a[aria-current="page"]::after{content:"";position:absolute;left:.75rem;right:.75rem;bottom:-.95rem;height:2px;background:var(--accent)}
  .header-cta{display:inline-flex}
}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.85rem 1.25rem;font-weight:600;font-size:.95rem;text-decoration:none;border:1px solid transparent;border-radius:var(--r);transition:background .2s,color .2s,border-color .2s}
.btn-accent{background:var(--accent);color:var(--ink)}
.btn-accent:hover{background:var(--accent-light);color:var(--ink)}
.btn-line{border-color:currentColor}
.dark .btn-line{color:var(--on-dark)}
.dark .btn-line:hover{color:#fff;border-color:#fff}
.btn-line:hover{color:var(--accent-text)}
.btn .arr{font-family:var(--mono)}
.btns{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}

/* Sections */
.section{padding:clamp(3.5rem,8vw,6.5rem) 0}
.section.tight{padding:clamp(2.5rem,5vw,4rem) 0}
.paper{background:var(--paper)}
.dark{background:var(--graphite);color:var(--on-dark)}
.dark a:hover{color:#fff}
.grid-bg{background-image:linear-gradient(var(--line-dark) 1px,transparent 1px),linear-gradient(90deg,var(--line-dark) 1px,transparent 1px);background-size:56px 56px;background-position:-1px -1px}
.sec-head{display:grid;gap:1rem;margin-bottom:clamp(2rem,4vw,3rem);border-top:1px solid var(--line);padding-top:1.4rem}
.dark .sec-head{border-color:var(--steel)}
@media(min-width:900px){.sec-head{grid-template-columns:1fr 1fr;align-items:end}.sec-head .lead{justify-self:end}}
.sec-head h2{margin:0}

/* Hero */
.hero{position:relative;overflow:hidden;padding:clamp(3rem,7vw,6rem) 0 clamp(3rem,6vw,5rem)}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 80% at 15% 30%,rgba(10,10,10,0) 0,rgba(10,10,10,.85) 100%);pointer-events:none}
.hero .wrap{position:relative;z-index:1;display:grid;gap:2.5rem;align-items:center}
@media(min-width:960px){.hero .wrap{grid-template-columns:1.1fr .9fr;gap:4rem}}
.hero h1{max-width:15ch;color:#fff}
.hero.sub h1{max-width:20ch;font-size:clamp(2rem,4.4vw,3.6rem)}
.frame{position:relative;margin:0;padding:10px;border:1px solid var(--steel);background:var(--carbon)}
.frame img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:saturate(.9) contrast(1.05)}
.frame::before,.frame::after{content:"";position:absolute;width:18px;height:18px;border-color:var(--accent);border-style:solid}
.frame::before{top:-1px;left:-1px;border-width:2px 0 0 2px}
.frame::after{bottom:-1px;right:-1px;border-width:0 2px 2px 0}
.frame figcaption{display:flex;justify-content:space-between;gap:1rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--on-dark-mid);padding:.7rem .2rem 0}
.paper .frame,.light-frame{background:var(--white);border-color:var(--line)}
.paper .frame figcaption,.light-frame figcaption{color:var(--mid)}
.breadcrumb{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--on-dark-mid);margin-bottom:1.5rem}
.breadcrumb ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.5rem}
.breadcrumb li+li::before{content:"/";margin-right:.5rem;color:var(--steel)}
.breadcrumb a{text-decoration:none}

/* Facts strip */
.facts{border-top:1px solid var(--line-dark);background:var(--carbon);color:var(--on-dark)}
.facts ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){.facts ul{grid-template-columns:repeat(4,1fr)}}
.facts li{padding:1.3rem 1.2rem;border-right:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark)}
.facts b{display:block;font-size:1.05rem;font-weight:600;color:#fff}
.facts span{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--on-dark-mid)}

/* Audience split */
.split{display:grid;gap:1px;background:var(--line)}
@media(min-width:860px){.split{grid-template-columns:1fr 1fr}}
.split>div{background:var(--white);padding:clamp(1.75rem,4vw,3rem)}
.split .alt{background:var(--paper)}
.ticks{list-style:none;padding:0;margin:1rem 0 1.5rem}
.ticks li{position:relative;padding:.55rem 0 .55rem 1.6rem;border-bottom:1px solid var(--line)}
.dark .ticks li{border-color:var(--line-dark)}
.ticks li::before{content:"";position:absolute;left:0;top:1.15rem;width:.65rem;height:2px;background:var(--accent)}

/* Service cards */
.cards{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media(min-width:640px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.cards{grid-template-columns:repeat(4,1fr)}}
.card{background:var(--white);display:flex;flex-direction:column;text-decoration:none;color:var(--ink);position:relative;transition:background .25s}
.card:hover{background:var(--paper);color:var(--ink)}
.card .ph{aspect-ratio:4/3;overflow:hidden;background:var(--carbon)}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.card:hover .ph img{transform:scale(1.04)}
.card .body{padding:1.2rem 1.2rem 1.4rem;display:flex;flex-direction:column;gap:.4rem;flex:1}
.card .idx{font-family:var(--mono);font-size:.72rem;color:var(--accent-text);letter-spacing:.08em}
.card h3{margin:0;font-size:1.15rem}
.card p{margin:0;color:var(--mid);font-size:.95rem}
.card .more{margin-top:auto;padding-top:.8rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.card .more::after{content:" →";transition:margin .2s}
.card:hover .more::after{margin-left:.3rem}
.card.cta-card{background:var(--graphite);color:var(--on-dark);justify-content:space-between;padding:1.4rem}
.card.cta-card:hover{background:var(--carbon);color:#fff}
.card.cta-card p{color:var(--on-dark-mid)}

/* Process */
.steps{list-style:none;padding:0;margin:0;display:grid;gap:1px;background:var(--line-dark);border:1px solid var(--line-dark)}
@media(min-width:860px){.steps{grid-template-columns:repeat(3,1fr)}}
.steps li{background:var(--graphite);padding:1.75rem}
.steps .n{font-family:var(--mono);font-size:.75rem;color:var(--accent-light);letter-spacing:.1em}
.steps h3{margin:.8rem 0 .5rem;color:#fff}
.steps p{color:var(--on-dark-mid);margin:0}

/* Projects */
.projects{display:grid;gap:1.5rem}
@media(min-width:700px){.projects{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.projects{grid-template-columns:repeat(3,1fr)}}
.proj{margin:0;background:var(--white);border:1px solid var(--line)}
.proj img{width:100%;aspect-ratio:4/3;object-fit:cover}
.proj .body{padding:1.1rem 1.2rem 1.3rem}
.proj h3{font-size:1.08rem;margin:0 0 .7rem}
.spec{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1rem;margin:0;font-size:.9rem}
.spec dt{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mid);padding-top:.2rem}
.spec dd{margin:0}

/* Placeholders (to be filled by Koyda) */
.ph-tag{display:inline-block;font-family:var(--mono);font-size:.65rem;letter-spacing:.08em;text-transform:uppercase;background:#FFF4D6;color:#5C4300;border:1px dashed #B58900;padding:.1rem .4rem;border-radius:2px;vertical-align:middle}
.placeholder{border:1px dashed #B58900;background:repeating-linear-gradient(135deg,#FFFBEF 0 12px,#FFF6DD 12px 24px);padding:1.4rem;color:#4A3600}
.dark .placeholder{background:repeating-linear-gradient(135deg,#1c1a12 0 12px,#211e14 12px 24px);color:#E8D9A8;border-color:#7d6a2c}
.placeholder .ph-tag{margin-bottom:.6rem}
.badges{display:grid;gap:1rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:860px){.badges{grid-template-columns:repeat(4,1fr)}}
.badges .placeholder{min-height:7rem;display:flex;flex-direction:column;justify-content:center;font-size:.92rem}
.quote{display:grid;gap:1.5rem}
@media(min-width:860px){.quote{grid-template-columns:repeat(2,1fr)}}

/* Service page */
.svc{display:grid;gap:3rem}
@media(min-width:1000px){.svc{grid-template-columns:minmax(0,1fr) 380px;gap:5rem}}
.prose{max-width:44rem}
.prose h2{font-size:clamp(1.4rem,2.4vw,1.9rem);margin-top:2.4rem;padding-top:1.2rem;border-top:1px solid var(--line)}
.prose h2:first-child{margin-top:0}
.prose ul{list-style:none;padding:0}
.prose ul li{position:relative;padding:.55rem 0 .55rem 1.6rem;border-bottom:1px solid var(--line)}
.prose ul li::before{content:"";position:absolute;left:0;top:1.2rem;width:.65rem;height:2px;background:var(--accent)}
.aside{align-self:start}
@media(min-width:1000px){.aside{position:sticky;top:6rem}}
.sheet{border:1px solid var(--ink);background:var(--white)}
.sheet header{display:flex;justify-content:space-between;background:var(--ink);color:#fff;padding:.7rem 1rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.sheet dl{margin:0}
.sheet .row{display:grid;grid-template-columns:7.5rem 1fr;border-top:1px solid var(--line)}
.sheet .row:first-child{border-top:0}
.sheet dt{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mid);padding:.8rem 1rem;border-right:1px solid var(--line)}
.sheet dd{margin:0;padding:.75rem 1rem;font-size:.92rem}
.sheet .foot{padding:1rem;border-top:1px solid var(--line);display:grid;gap:.6rem}
.sheet .foot .btn{justify-content:center}
.figs{display:grid;gap:1rem;margin-top:2rem}
@media(min-width:700px){.figs{grid-template-columns:1fr 1fr}}
.figs figure{margin:0}
.figs img{width:100%;aspect-ratio:4/3;object-fit:cover}
.figs figcaption{font-family:var(--mono);font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;color:var(--mid);padding-top:.5rem}

/* FAQ */
.faq{border-top:1px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:1.15rem 2.5rem 1.15rem 0;position:relative;font-weight:600;font-size:1.08rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.25rem;top:.9rem;font:400 1.5rem var(--mono);color:var(--accent-text)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 1.2rem;color:var(--mid);max-width:46rem}

/* Other services nav */
.svc-nav{display:grid;gap:1px;background:var(--line-dark);border:1px solid var(--line-dark)}
@media(min-width:700px){.svc-nav{grid-template-columns:repeat(3,1fr)}}
.svc-nav a{background:var(--graphite);padding:1.1rem 1.2rem;text-decoration:none;display:flex;gap:.8rem;align-items:baseline}
.svc-nav a:hover{background:var(--carbon)}
.svc-nav .idx{font-family:var(--mono);font-size:.72rem;color:var(--accent-light)}

/* CTA band */
.cta-band .wrap{display:grid;gap:1.5rem;align-items:center}
@media(min-width:900px){.cta-band .wrap{grid-template-columns:1.4fr 1fr}}
.cta-band h2{margin:0;color:#fff}
.cta-band .contact-lines{display:grid;gap:.6rem;font-size:1.15rem}
.cta-band .contact-lines a{text-decoration:none;display:flex;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--steel);padding:.7rem 0}
.cta-band .contact-lines a span{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--on-dark-mid);align-self:center}

/* Gallery */
.gallery{display:grid;gap:.75rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.gallery{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1100px){.gallery{grid-template-columns:repeat(4,1fr)}}
.gallery figure{margin:0}
.gallery button{all:unset;cursor:zoom-in;display:block;width:100%}
.gallery button:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px}
.gallery img{width:100%;aspect-ratio:1;object-fit:cover;background:var(--paper)}
.gallery figcaption{font-size:.85rem;color:var(--mid);padding:.45rem 0 .6rem;line-height:1.35}
dialog.lightbox{border:0;padding:0;background:transparent;max-width:min(92vw,1000px)}
dialog.lightbox::backdrop{background:rgba(5,5,5,.92)}
dialog.lightbox img{max-height:80vh;width:auto;margin:0 auto}
dialog.lightbox p{color:#fff;text-align:center;font-size:.95rem;margin:.8rem 0 0}
dialog.lightbox button{position:fixed;top:1rem;right:1rem;background:var(--accent);color:var(--ink);border:0;font:500 .8rem var(--mono);padding:.6rem .9rem;cursor:pointer}

/* People / contact */
.people{display:grid;gap:1.5rem}
@media(min-width:760px){.people{grid-template-columns:1fr 1fr}}
.person{border:1px solid var(--line);display:grid;grid-template-columns:110px 1fr}
.person .avatar{background:var(--carbon) repeating-linear-gradient(135deg,#1a1a1a 0 10px,#141414 10px 20px);display:flex;align-items:center;justify-content:center;color:var(--on-dark-mid);font-family:var(--mono);font-size:1.4rem}
.person .body{padding:1.2rem 1.3rem}
.person h3{margin:0 0 .2rem}
.person .role{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mid);margin-bottom:.8rem}
.person a{display:block;text-decoration:none}
.kv{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1.5rem;margin:0}
.kv dt{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mid);padding-top:.25rem}
.kv dd{margin:0}
.two{display:grid;gap:3rem}
@media(min-width:960px){.two{grid-template-columns:1fr 1fr;gap:5rem}}
form.enquiry{display:grid;gap:1rem}
form.enquiry .row2{display:grid;gap:1rem}
@media(min-width:640px){form.enquiry .row2{grid-template-columns:1fr 1fr}}
form.enquiry label{display:grid;gap:.35rem;font-size:.9rem;font-weight:600}
form.enquiry input,form.enquiry select,form.enquiry textarea{font:inherit;font-weight:400;padding:.75rem .85rem;border:1px solid #8A939C;border-radius:var(--r);background:#fff;color:var(--ink)}
form.enquiry textarea{min-height:9rem;resize:vertical}
form.enquiry .note{font-size:.85rem;color:var(--mid)}
form.enquiry button{justify-self:start;cursor:pointer;font:inherit;font-weight:600}

/* Footer */
.site-footer{background:#050505;color:var(--on-dark-mid);font-size:.92rem;padding:4rem 0 2rem}
.site-footer .cols{display:grid;gap:2.5rem}
@media(min-width:900px){.site-footer .cols{grid-template-columns:1.3fr 1fr 1fr 1fr}}
.site-footer h2{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark);font-weight:500;margin-bottom:1rem}
.site-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:.45rem}
.site-footer a{text-decoration:none;color:var(--on-dark-mid)}
.site-footer a:hover{color:#fff}
.site-footer address{font-style:normal}
.site-footer .legal{border-top:1px solid var(--line-dark);margin-top:3rem;padding-top:1.5rem;display:flex;flex-wrap:wrap;gap:.5rem 2rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.04em}

/* Motion: subtle reveal, only when allowed */
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
  .js .reveal.in{opacity:1;transform:none}
}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* fixes */
.site-header .header-cta{display:none}
@media(min-width:1000px){.site-header .header-cta{display:inline-flex}}
.placeholder .ph-tag{align-self:flex-start}
.section.svc-other{background:var(--carbon)}
.steps .n,.svc-nav .idx{color:var(--accent-light)}

/* ---- DATUM motif: registration marks and datum squares (kept subtle) ---- */
.label::before{width:.5rem;height:.5rem;background:var(--accent)}
.frame{background-color:var(--carbon);background-image:
  linear-gradient(var(--accent),var(--accent)),linear-gradient(var(--accent),var(--accent)),
  linear-gradient(var(--accent),var(--accent)),linear-gradient(var(--accent),var(--accent));
  background-repeat:no-repeat;background-size:1.5px 8px,1.5px 8px,8px 1.5px,8px 1.5px;
  background-position:50% 0,50% 100%,0 50%,100% 50%}
.paper .frame,.light-frame{background-color:var(--white)}
.frame::before,.frame::after{width:22px;height:22px;border-color:var(--accent)}
.sheet header span:first-child{display:inline-flex;align-items:center;gap:.55rem}
.sheet header span:first-child::before{content:"";width:.45rem;height:.45rem;background:var(--accent)}
.sec-head{position:relative}
.sec-head::before{content:"";position:absolute;top:-4px;left:0;width:1.5px;height:8px;background:var(--accent)}
.card .idx::before{content:"";display:inline-block;width:.4rem;height:.4rem;background:var(--accent);margin-right:.45rem;vertical-align:.05em}

/* ---- Brand-forward revision (Joe: "larger KOYDA, main writing swamps the brand") ---- */
.brand img{width:160px}
.site-header .wrap{min-height:4.75rem}
@media(min-width:1000px){
  .brand img{width:240px}
  .site-header .wrap{min-height:6rem}
  .primary-nav a[aria-current="page"]::after{bottom:-1.85rem}
}
h1{font-size:clamp(1.9rem,3.8vw,3rem);letter-spacing:-.025em}
.hero h1{max-width:18ch}
.hero.sub h1{font-size:clamp(1.75rem,3.2vw,2.6rem)}
h2{font-size:clamp(1.45rem,2.4vw,2.1rem)}
/* large, subtle Datum mark behind the home hero */
.hero.home::before{content:"";position:absolute;z-index:0;pointer-events:none;
  width:min(62vw,760px);aspect-ratio:1;right:-6%;top:50%;transform:translateY(-50%);
  background:url(/assets/brand/koyda-icon-mono-white.svg) center/contain no-repeat;opacity:.05}
@media(max-width:959px){.hero.home::before{width:110vw;right:-35%;top:28%;opacity:.04}}

/* ---- Task 4: SEO build components ---- */
@media(min-width:900px){.site-footer .cols{grid-template-columns:1.3fr 1fr 1fr 1fr 1fr}}
.site-footer .cred{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-light);margin-top:1rem}
.linklike{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}
.badge-ok{border:1px solid var(--ink);background:var(--white);padding:1.4rem;display:flex;flex-direction:column;gap:.5rem}
.badge-ok .mono{color:var(--accent-text);font-size:.65rem}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf-turnstile{min-height:65px;margin:.5rem 0}
.consent{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:60;background:var(--graphite);color:var(--on-dark);border:1px solid var(--steel);padding:1rem 1.25rem;display:grid;gap:.8rem;max-width:44rem;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.consent[hidden]{display:none}
.consent p{margin:0;font-size:.92rem}
.consent a{color:var(--accent-light)}
.consent div{display:flex;gap:.6rem;flex-wrap:wrap}
.consent .btn-line{color:var(--on-dark);background:transparent;border-color:var(--on-dark-mid)}
.consent .btn{cursor:pointer;font-family:inherit}
.consent :focus-visible{outline-color:var(--accent-light)}
@media(min-width:760px){.consent{grid-template-columns:1fr auto;align-items:center;left:1.5rem;bottom:1.5rem}}
.linkcards{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media(min-width:700px){.linkcards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.linkcards{grid-template-columns:repeat(3,1fr)}}
.linkcard{background:var(--white);padding:1.6rem;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:.5rem}
.linkcard h3{margin:.2rem 0}
.linkcard p{margin:0;color:#3d3d3d;font-size:.95rem}
.linkcard .idx{font-family:var(--mono);font-size:.72rem;color:var(--mid)}
.linkcard .more{margin-top:auto;font-weight:600;color:var(--accent-text)}
.linkcard:hover h3{color:var(--accent-text)}
.table-wrap{overflow-x:auto;margin:1.2rem 0;border:1px solid var(--line)}
.prose table{border-collapse:collapse;width:100%;font-size:.92rem}
.prose th,.prose td{text-align:left;padding:.65rem .8rem;border-bottom:1px solid var(--line);vertical-align:top}
.prose thead th{background:var(--ink);color:#fff;font-family:var(--mono);font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;font-weight:500}
.prose tbody th{font-weight:500}
.prose tbody tr:nth-child(even){background:var(--paper)}
.keypoints{border-left:3px solid var(--accent);background:var(--paper);padding:1.2rem 1.4rem;margin-bottom:2rem}
.keypoints h2{border:0!important;margin:0 0 .5rem!important;padding:0!important;font-size:1.15rem}
.prose ol.sources{padding-left:1.2rem}
.prose ol.sources li{padding:.3rem 0}
.toc{margin:.5rem 0;padding:.4rem 1rem .6rem 2.2rem;font-size:.92rem}
.toc li{padding:.25rem 0}
.meta-line{color:var(--on-dark-mid);margin-top:1rem}
.sitemap-grid{display:grid;gap:2rem}
@media(min-width:760px){.sitemap-grid{grid-template-columns:repeat(3,1fr)}}
.sitemap-grid h2{font-size:1.2rem}
@media(min-width:1000px) and (max-width:1279px){.primary-nav a{padding:.5rem .5rem;font-size:.9rem}.brand img{width:200px}}
@media(min-width:1000px) and (max-width:1179px){.site-header .header-cta{display:none}}
.form-error{border:1px solid #B58900;background:#FFF4D6;color:#4A3600;padding:.75rem 1rem;margin:0 0 1rem}
.form-error[hidden]{display:none}
.direct{display:grid;gap:1px;background:var(--line);border:1px solid var(--ink)}
.direct-line{display:flex;flex-direction:column;gap:.35rem;padding:1.3rem 1.4rem;background:var(--white);text-decoration:none;color:var(--ink)}
.direct-line:first-child{background:var(--ink);color:#fff}
.direct-line:first-child .mono{color:var(--accent-light)}
.direct-line .mono{color:var(--accent-text);font-size:.7rem}
.direct-line strong{font-size:clamp(1.25rem,2.4vw,1.7rem);font-weight:600;overflow-wrap:anywhere}
.direct-line:hover strong{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}

/* ---- Contact update (Joe, 10 Oct 2026): one "Contact us" button in the header, director cards on /contact-us/ ---- */
.site-header .header-cta{display:inline-flex;order:2;margin-left:auto;padding:.6rem .9rem;font-size:.85rem;white-space:nowrap}
.site-header .header-cta .arr{display:none}
.site-header .nav-toggle{order:3;margin-left:0}
.site-header .wrap{gap:.75rem}
@media(max-width:359px){.brand img{width:130px}}
@media(min-width:1000px){
  .site-header .wrap{gap:1.5rem}
  .site-header .header-cta{order:0;margin-left:0;padding:.85rem 1.25rem;font-size:.95rem}
  .site-header .header-cta .arr{display:inline}
}
.directors{display:grid;gap:1.5rem}
@media(min-width:760px){.directors{grid-template-columns:1fr 1fr}}
.director{border:1px solid var(--ink);background:var(--white);display:flex;flex-direction:column}
.director header{display:flex;align-items:center;gap:1rem;padding:1.3rem 1.4rem;background:var(--ink);color:#fff;border-bottom:3px solid var(--accent)}
.director .avatar{width:3.4rem;height:3.4rem;flex:none;display:flex;align-items:center;justify-content:center;border:1px solid var(--accent);color:var(--accent-light);font-family:var(--mono);font-size:1rem}
.director h3{margin:0;color:#fff}
.director .role{margin:.15rem 0 0;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--on-dark-mid)}
.director .dline{display:flex;flex-direction:column;gap:.3rem;padding:1.1rem 1.4rem;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.director .dline .mono{color:var(--accent-text);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase}
.director .dline strong{font-size:clamp(1.15rem,2vw,1.45rem);font-weight:600;overflow-wrap:anywhere}
.director .dline:hover strong{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.director .dbtns{display:flex;flex-wrap:wrap;gap:.75rem;padding:1.2rem 1.4rem 1.4rem;margin-top:auto}
.director .dbtns .btn{flex:1 1 9rem;justify-content:center}
@media(min-width:1000px){.primary-nav .nav-contact{display:none}} /* the Contact us button covers it on desktop; kept in the mobile menu */
#directors{scroll-margin-top:6rem}

/* ---- CTA band, neutral (10 Oct 2026): buttons to the contact page, no personal numbers ---- */
.cta-band .cta-actions{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.cta-band .cta-actions .btn{flex:1 1 13rem;justify-content:center}
.cta-band .cta-actions .mono{flex:1 1 100%;margin:.4rem 0 0;color:var(--on-dark-mid);font-size:.7rem}
#upload{scroll-margin-top:6rem}

/* ---- Upload your drawings (contact page; behind UPLOAD_ENABLED) ---- */
.up-intro{color:var(--mid);max-width:40rem;margin:0}
.up-grid{display:grid;gap:1.5rem}
@media(min-width:960px){.up-grid{grid-template-columns:1fr 1fr;gap:2.5rem}}
.up-fields{display:grid;gap:1rem;align-content:start}
.upload-form .opt{font-weight:400;color:var(--mid)}
.upload-form textarea{min-height:10rem}
.dropzone{position:relative;border:1px dashed #8A939C;background:var(--white);transition:border-color .15s,background-color .15s;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:28px 28px;background-position:-1px -1px}
.dropzone .rm{position:absolute;width:18px;height:18px;border:0 solid var(--accent);pointer-events:none;z-index:1}
.rm-tl{top:-1px;left:-1px;border-width:2px 0 0 2px!important}
.rm-tr{top:-1px;right:-1px;border-width:2px 2px 0 0!important}
.rm-bl{bottom:-1px;left:-1px;border-width:0 0 2px 2px!important}
.rm-br{bottom:-1px;right:-1px;border-width:0 2px 2px 0!important}
.upload-form .dz-label{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45rem;text-align:center;padding:3rem 1.25rem 2.4rem;min-height:15rem;font-size:1rem;font-weight:600}
.dz-icon{width:44px;height:44px;color:var(--accent-text);margin-bottom:.3rem}
.dz-title{font-size:1.15rem}
.dz-browse{color:var(--accent-text);text-decoration:underline;text-underline-offset:.2em}
.dz-meta{color:var(--mid);font-weight:400;font-size:.68rem}
.dropzone input[type=file]{display:block;margin:0 1.25rem 1.25rem;font:inherit;font-size:.9rem;max-width:calc(100% - 2.5rem)}
/* with JS the native input covers the whole zone (click or keyboard opens the picker) and is invisible */
.js .dropzone input[type=file]{position:absolute;inset:0;width:100%;height:100%;max-width:none;margin:0;opacity:0;cursor:pointer}
.dropzone:hover,.dropzone.is-over{border-color:var(--accent);border-style:solid;background-color:#EAF7FB}
.dropzone:hover .dz-browse{color:var(--ink)}
.dropzone:focus-within{outline:2px solid var(--accent-text);outline-offset:3px}
.dropzone.is-over .dz-title{font-size:0}
.dropzone.is-over .dz-title::after{content:"Release to add files";font-size:1.15rem;color:var(--accent-text)}
.dz-status{min-height:1.4em;margin:.6rem 0 0;font-size:.88rem;color:var(--mid)}
.dz-status.is-error{color:#8A1F11}
.file-list{list-style:none;margin:.6rem 0 0;padding:0;border:1px solid var(--ink);background:var(--white)}
.file-list[hidden]{display:none}
.file-list li{display:grid;grid-template-columns:auto 1fr auto auto;gap:.75rem;align-items:center;padding:.6rem .8rem;border-bottom:1px solid var(--line);font-size:.92rem}
.file-list li:last-child{border-bottom:0}
.file-list .ftype{font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--accent-text);color:var(--accent-text);padding:.15rem .35rem;min-width:3.2rem;text-align:center}
.file-list .fname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.file-list .fsize{font-family:var(--mono);font-size:.72rem;color:var(--mid);white-space:nowrap}
.file-list .frm{background:none;border:1px solid var(--line);color:var(--ink);font:500 .68rem var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:.35rem .55rem;cursor:pointer}
.file-list .frm:hover{border-color:#8A1F11;color:#8A1F11}
.file-list li.total{background:var(--paper);font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mid);grid-template-columns:1fr auto}
.up-progress{margin:.5rem 0 0}
.up-progress[hidden]{display:none}
.up-progress .bar{height:6px;background:var(--line);position:relative;overflow:hidden}
.up-progress .bar span{position:absolute;inset:0 auto 0 0;width:0;background:var(--accent);transition:width .2s}
.up-progress .mono{margin:.5rem 0 0;color:var(--accent-text)}
.up-actions{display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:center}
.up-actions .note{margin:0;flex:1 1 18rem}
.upload-form button[disabled]{opacity:.6;cursor:progress}
.up-done{position:relative;border:1px solid var(--ink);background:var(--white);padding:2rem 1.8rem;max-width:44rem;border-left:3px solid var(--accent)}
.up-done[hidden]{display:none}
.up-done .rm{position:absolute;width:18px;height:18px;border:0 solid var(--accent)}
.up-done h3{font-size:1.5rem}
.up-done .btn{cursor:pointer;font:inherit;font-weight:600;background:none}
form.upload-form[hidden]{display:none}
@media(max-width:480px){.file-list li{grid-template-columns:1fr auto auto;gap:.5rem}.file-list .ftype{display:none}}
/* ---------- Steel section tables (DATUM) ---------- */
.sec-fig{margin:0;background:var(--white);border:1px solid var(--line)}
.sec-fig svg,.seccard-fig svg{display:block;width:100%;height:auto}
.sec-fig figcaption{display:flex;justify-content:space-between;padding:.55rem .9rem;border-top:1px solid var(--line);font:500 .68rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mid)}
.seccards{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media(min-width:640px){.seccards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.seccards{grid-template-columns:repeat(4,1fr)}}
.seccard{background:var(--white);text-decoration:none;color:var(--ink);display:flex;flex-direction:column}
.seccard-fig{border-bottom:1px solid var(--line)}
.seccard .body{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;gap:.35rem;flex:1}
.seccard h3{margin:0;font-size:1.1rem}
.seccard p{margin:0;font-size:.88rem;color:#3d3d3d}
.seccard .idx{font:500 .72rem var(--mono);letter-spacing:.08em;color:var(--accent-text)}
.seccard .more{margin-top:auto;padding-top:.5rem;font-weight:600;color:var(--accent-text)}
.seccard:hover h3{color:var(--accent-text)}
.sec-top{display:grid;gap:2.5rem}
@media(min-width:960px){.sec-top{grid-template-columns:minmax(0,1fr) 360px;gap:4rem;align-items:start}}
.sym-key{margin:0;display:grid;border-top:1px solid var(--ink)}
@media(min-width:700px){.sym-key{grid-template-columns:1fr 1fr;column-gap:2rem}}
.sym-key>div{display:grid;grid-template-columns:4.2rem 1fr auto;gap:.8rem;align-items:baseline;padding:.6rem 0;border-bottom:1px solid var(--line)}
.sym-key dt{font:500 .95rem var(--mono);color:var(--ink)}
.sym-key dt sub{font-size:.7em}
.sym-key dd{margin:0;font-size:.93rem}
.sym-key dd.u{font:400 .75rem var(--mono);color:var(--mid)}
.note{font-size:.88rem;color:var(--mid);margin-top:1rem}
.dl-list{list-style:none;margin:0;padding:0}
.dl-list li{border-top:1px solid var(--line)}
.dl-list li:first-child{border-top:0}
.dl-list a{display:flex;gap:.8rem;align-items:baseline;padding:.8rem 1rem;text-decoration:none;font-size:.95rem}
.dl-list .mono{font-size:.68rem;color:var(--accent-text);min-width:2.4rem}
.sec-dl .foot p{margin:0;font-weight:600}
.sec-tools{display:flex;flex-wrap:wrap;gap:.8rem 1.2rem;align-items:flex-end;margin:0 0 1rem}
.sec-tools[hidden]{display:none}
.sec-tools label{display:grid;gap:.3rem;font:500 .68rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mid)}
.sec-tools input,.sec-tools select{font:400 1rem var(--sans);letter-spacing:0;text-transform:none;padding:.6rem .75rem;border:1px solid #8A939C;border-radius:0;background:#fff;color:var(--ink);min-width:12rem}
.sec-count{margin:0 0 .7rem auto;color:var(--mid)}
.sec-table-wrap{overflow:auto;max-height:80vh;border:1px solid var(--ink);background:var(--white);-webkit-overflow-scrolling:touch}
.sec-table{border-collapse:separate;border-spacing:0;width:100%;font-size:.9rem;font-variant-numeric:tabular-nums}
.sec-table th,.sec-table td{padding:.5rem .75rem;white-space:nowrap;border-bottom:1px solid var(--line);text-align:right}
.sec-table thead th{position:sticky;top:0;z-index:2;background:var(--ink);color:#fff;font:500 .72rem var(--mono);letter-spacing:.04em;vertical-align:bottom;border-bottom:2px solid var(--accent)}
.sec-table thead th sub{font-size:.8em}
.sec-table thead .u{display:block;margin-top:.15rem;color:var(--on-dark-mid);font-size:.64rem;letter-spacing:0;text-transform:none}
.sec-table thead th:first-child{left:0;z-index:3;text-align:left}
.sec-table tbody th{position:sticky;left:0;z-index:1;text-align:left;font-weight:600;background:inherit;border-right:1px solid var(--line)}
.sec-table tbody tr{background:var(--white)}
.sec-table tbody tr:nth-child(even){background:var(--paper)}
.sec-js .sec-table tbody tr{background:var(--white)}
.sec-js .sec-table tbody tr.z{background:var(--paper)}
.sec-table tbody tr:hover,.sec-table tbody tr:target{background:#DCF1F7}
.sec-table tbody tr:target th{box-shadow:inset 3px 0 0 var(--accent)}
.sec-table .dag{color:var(--accent-text);margin-left:.15rem;cursor:help}
.sec-table .sort{all:unset;cursor:pointer;display:block;text-align:inherit}
.sec-table .sort:focus-visible{outline:2px solid var(--accent-light);outline-offset:2px}
.sec-table .sort::after{content:"";display:inline-block;width:.45rem;height:.45rem;margin-left:.4rem;border:1px solid var(--on-dark-mid);vertical-align:.05em}
.sec-table th[aria-sort] .sort::after{background:var(--accent);border-color:var(--accent)}
.sec-table th[aria-sort=descending] .sort::after{transform:rotate(45deg)}
.sec-note{margin-top:.8rem}
.std-list li{font-size:.93rem}
.disclaimer{border-left:3px solid var(--accent);background:var(--paper);padding:1.2rem 1.4rem;margin-top:1.5rem}
.paper .disclaimer{background:var(--white)}
.disclaimer h2,.disclaimer h3{font-size:1.1rem;margin-bottom:.5rem}
.disclaimer p{font-size:.92rem;color:#3d3d3d;margin:0 0 .6rem}
@media print{.site-header,.site-footer,.cta-band,.sec-tools,.svc-other{display:none}.sec-table-wrap{max-height:none;overflow:visible}.sec-table thead th{position:static}}
.pop{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.pop a{display:inline-flex;gap:.45rem;align-items:baseline;padding:.35rem .6rem;border:1px solid var(--line);background:var(--white);text-decoration:none;font-weight:600;font-size:.88rem;white-space:nowrap}
.pop a span{font:400 .7rem var(--mono);color:var(--mid)}
.pop a:hover{border-color:var(--accent-text)}
.pop-grid{display:grid;gap:1.6rem 2.5rem}
@media(min-width:760px){.pop-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.pop-grid{grid-template-columns:repeat(4,1fr)}}
.pop-grid h3{font-size:1rem;margin:0 0 .6rem;padding-bottom:.4rem;border-bottom:1px solid var(--ink)}
.pop-grid h3 a{text-decoration:none}
.pop-row{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;margin:0 0 1.2rem}
.pop-row .mono{margin:0;color:var(--mid)}
.calc-form{padding:1rem 1rem 1.2rem;display:grid;gap:1rem}
.calc-form[hidden],.calc-grid[hidden]{display:none}
.calc-mode{border:0;margin:0;padding:0;display:flex;border:1px solid var(--ink)}
.calc-mode label{flex:1;position:relative}
.calc-mode input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.calc-mode span{display:block;text-align:center;padding:.55rem .5rem;font:500 .72rem var(--mono);letter-spacing:.08em;text-transform:uppercase}
.calc-mode input:checked+span{background:var(--ink);color:#fff}
.calc-mode input:focus-visible+span{outline:2px solid var(--accent-text);outline-offset:2px}
.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.calc-grid .wide{grid-column:1/-1}
.calc-form label{display:grid;gap:.3rem;font:500 .66rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mid)}
.calc-form select,.calc-form input[type=number]{font:400 1rem var(--sans);letter-spacing:0;text-transform:none;padding:.6rem .7rem;border:1px solid #8A939C;border-radius:0;background:#fff;color:var(--ink);width:100%;min-width:0}
.calc-form .in{display:flex;align-items:stretch}
.calc-form .unit{display:flex;align-items:center;padding:0 .6rem;border:1px solid #8A939C;border-left:0;background:var(--paper);font:400 .75rem var(--mono);color:var(--mid);text-transform:none;letter-spacing:0}
.calc-form .unit.pre{border-left:1px solid #8A939C;border-right:0}
.calc-out{border-top:1px solid var(--ink);padding-top:.9rem}
.calc-out output{display:block;font:600 1.9rem var(--sans);letter-spacing:-.02em;color:var(--ink)}
.calc-out p{margin:.3rem 0 0;font-size:.85rem;color:var(--mid);overflow-wrap:anywhere}
.calc-out .calc-cost{color:var(--ink);font-weight:600}
.calc-note{margin:0;font-size:.8rem;color:var(--mid)}
.calc-note a{color:var(--accent-text)}
.calc-nojs{padding:1rem;margin:0;font-size:.92rem}