/* ════════════════════════════════════════════════════════════
 kodsmide.com — stylesheet
 Colors & fonts live in :root below; change once, updates everywhere.
 ════════════════════════════════════════════════════════════ */

:root{
 --paper:#edeee8;
 --panel:#f5f6f1;
 --ink:#141613;
 --ink-soft:#3f423c;
 --gray:#62665d;
 --hairline:#c9ccc0;
 --volt:#c8f21c;
 --signal:#e8490f;
 --mono:"IBM Plex Mono",monospace;
 --body:"Familjen Grotesk",sans-serif;
 --display:"Archivo",sans-serif;
 --gutter:clamp(20px,4.5vw,56px);
 --maxw:1180px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{transition:none!important;animation:none!important}
}
body{
 background:var(--paper);
 color:var(--ink);
 font-family:var(--body);
 font-size:17px;
 line-height:1.55;
 -webkit-font-smoothing:antialiased;
}
::selection{background:var(--volt);color:var(--ink)}
a:focus-visible,button:focus-visible{outline:2px solid var(--signal);outline-offset:3px}

/* Overflow guarantees: nothing may widen the page sideways on
 small screens (prevents white-gap / pinch-zoom-out bugs). */
html,body{overflow-x:clip}
h1,h2,h3,h4{overflow-wrap:break-word}
/* Anchor links (#consulting etc.) stop below the sticky header */
[id]{scroll-margin-top:72px}

.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}

h1,h2,h3{
 font-family:var(--display);
 font-variation-settings:"wdth" 123;
 font-weight:800;
 text-transform:uppercase;
 line-height:.96;
 letter-spacing:-.01em;
}
.microlabel{
 font-family:var(--mono);
 font-size:11.5px;
 letter-spacing:.16em;
 text-transform:uppercase;
 color:var(--gray);
}
.spark{display:inline-block;width:.85em;height:.85em;vertical-align:-.07em}
.spark path{fill:var(--volt)}
.dark .microlabel{color:#8d9186}

/* ---------- header ---------- */
header{
 position:sticky;top:0;z-index:40;
 background:var(--paper);
 border-bottom:1px solid var(--ink);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:58px}
.brand{
 display:flex;align-items:center;gap:9px;
 font-family:var(--display);
 font-variation-settings:"wdth" 125;
 font-weight:850;font-size:17px;letter-spacing:.03em;text-transform:uppercase;
 color:var(--ink);text-decoration:none;
}
.nav-links{display:flex;gap:26px;list-style:none}
.nav-links a{
 font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
 color:var(--ink-soft);text-decoration:none;
 border-bottom:2px solid transparent; /* reserved so hover doesn't shift layout */
}
.nav-links a:hover{color:var(--ink);border-bottom-color:var(--volt)}
.nav-toggle{
 display:none;
 font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
 background:none;border:1px solid var(--ink);color:var(--ink);
 padding:7px 12px;cursor:pointer;
}
@media (max-width:740px){
 .nav-toggle{display:block}
 .nav-links{
 display:none;position:absolute;top:58px;left:0;right:0;
 flex-direction:column;gap:0;
 background:var(--paper);border-bottom:1px solid var(--ink);
 }
 .nav-links.open{display:flex}
 .nav-links li{border-top:1px solid var(--hairline)}
 .nav-links a{display:block;padding:15px var(--gutter);border-bottom:none}
 .nav-links a:hover{background:var(--panel)}
}

/* ---------- hero ---------- */
.hero{padding:clamp(56px,10vh,120px) 0 clamp(48px,8vh,96px)}
.hero-meta{
 display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 16px;
 border-bottom:1px solid var(--ink);padding-bottom:12px;margin-bottom:clamp(30px,5vh,54px);
}
.hero h1{
 font-size:clamp(40px,10vw,124px);
}
.hero h1 .hl{
 background:var(--volt);
 padding:0 .08em;
 box-decoration-break:clone;
 -webkit-box-decoration-break:clone;
}
.hero-lower{
 display:grid;grid-template-columns:minmax(0,1.4fr) minmax(240px,1fr);
 gap:clamp(28px,5vw,72px);
 margin-top:clamp(32px,5vh,58px);
 align-items:start;
}
@media (max-width:740px){.hero-lower{grid-template-columns:1fr}}
.hero-lede{font-size:clamp(17px,2vw,20px);color:var(--ink-soft);max-width:54ch}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}

.spec{
 border-top:1px solid var(--ink);
 font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;
}
.spec div{
 display:flex;justify-content:space-between;gap:14px;
 padding:10px 0;border-bottom:1px solid var(--hairline);
}
.spec dt{color:var(--gray);text-transform:uppercase;font-size:11px;letter-spacing:.14em;padding-top:2px}
.spec dd{text-align:right;overflow-wrap:break-word}
.status-dot{
 display:inline-block;width:8px;height:8px;background:var(--volt);
 border:1px solid var(--ink);margin-right:7px;vertical-align:baseline;
}

/* ---------- buttons ---------- */
.btn{
 display:inline-block;
 font-family:var(--mono);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;
 padding:14px 24px;text-decoration:none;
 border:1px solid var(--ink);
 transition:background .18s,color .18s;
}
.btn--solid{background:var(--ink);color:var(--paper)}
.btn--solid:hover{background:var(--volt);color:var(--ink)}
.btn--line{color:var(--ink)}
.btn--line:hover{background:var(--ink);color:var(--paper)}
.btn--volt{background:var(--volt);color:var(--ink);border-color:var(--volt)}
.btn--volt:hover{background:var(--paper);border-color:var(--paper)}

/* ---------- section scaffolding ---------- */
.section{padding:clamp(60px,10vh,120px) 0}
.section-rule{border-top:1px solid var(--ink)}
.section-head{
 display:flex;justify-content:space-between;align-items:baseline;gap:18px;
 margin-bottom:clamp(30px,5vh,52px);flex-wrap:wrap;
}
.section-head h2{font-size:clamp(30px,4.6vw,54px)}
.section-intro{color:var(--ink-soft);max-width:62ch;margin-bottom:clamp(30px,5vh,48px);font-size:clamp(16.5px,1.9vw,19px)}

/* ---------- services ---------- */
.svc-grid{
 display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
 border-top:1px solid var(--ink);border-left:1px solid var(--ink);
}
@media (max-width:740px){.svc-grid{grid-template-columns:1fr}}
.svc{
 background:var(--panel);
 border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);
 padding:clamp(22px,3.5vw,34px);
 display:grid;gap:12px;align-content:start;
}
.svc-tag{
 display:flex;justify-content:space-between;align-items:center;
}
.svc-tag .code{
 font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--gray);
}
.svc-tag .tick{width:10px;height:10px;background:var(--hairline);transition:background .18s}
.svc:hover .tick{background:var(--signal)}
.svc h3{font-size:clamp(19px,2.4vw,24px)}
.svc p{color:var(--ink-soft);font-size:15.5px}
.svc ul{list-style:none;margin-top:4px;display:grid;gap:7px}
.svc li{
 font-size:15px;color:var(--ink-soft);
 padding-left:18px;position:relative;
}
.svc li::before{
 content:"";position:absolute;left:0;top:.48em;
 width:7px;height:7px;background:var(--volt);border:1px solid var(--ink);
}
.svc-foot{
 display:flex;align-items:center;gap:18px;flex-wrap:wrap;
 margin-top:clamp(28px,4vh,40px);
}
.svc-foot p{font-family:var(--mono);font-size:12.5px;color:var(--gray);letter-spacing:.04em}

/* ---------- project (dark) ---------- */
.dark{background:var(--ink);color:var(--paper)}
.dark .section-head h2{color:var(--paper)}
.project-grid{
 display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,1fr);
 gap:clamp(30px,5vw,70px);align-items:start;
}
@media (max-width:740px){.project-grid{grid-template-columns:1fr}}
.project-copy p{color:#c6c9bf;margin-bottom:16px;font-size:clamp(16.5px,1.9vw,18.5px)}
.project-copy p strong{color:var(--paper);font-weight:600}
.wip-tag{
 display:inline-block;
 font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
 color:var(--signal);border:1px solid var(--signal);
 padding:5px 10px;margin-bottom:18px;
}
.spec--dark{border-top-color:var(--paper)}
.spec--dark div{border-bottom-color:#3a3d37}
.spec--dark dt{color:#8d9186}
.spec--dark dd{color:var(--paper)}
.project-cta{margin-top:26px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.project-cta p{font-family:var(--mono);font-size:12.5px;color:#8d9186;letter-spacing:.04em;max-width:34ch}

/* ---------- method ---------- */
.method-grid{
 display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
 border-top:1px solid var(--ink);border-left:1px solid var(--ink);
}
@media (max-width:900px){.method-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.method-grid{grid-template-columns:1fr}}
.step{
 border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);
 padding:22px 22px 28px;
 display:grid;gap:9px;align-content:start;
 background:var(--paper);
}
.step .no{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;color:var(--signal)}
.step h3{font-size:19px}
.step p{font-size:14.5px;color:var(--ink-soft)}

/* ---------- about ---------- */
.about-grid{
 display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);
 gap:clamp(28px,5vw,72px);align-items:start;
}
@media (max-width:740px){.about-grid{grid-template-columns:1fr}}
.about-grid h2{font-size:clamp(28px,4vw,46px);margin-top:10px}
.about-copy{display:grid;gap:15px;color:var(--ink-soft)}
.about-copy strong{color:var(--ink);font-weight:600}

/* ---------- contact (dark) ---------- */
.contact h2{font-size:clamp(34px,8vw,84px);color:var(--paper);margin:14px 0 26px}
.contact h2 .hl{background:var(--volt);color:var(--ink);padding:0 .08em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.contact-mail{
 font-family:var(--mono);font-size:clamp(16px,2.4vw,21px);letter-spacing:.03em;
 color:var(--volt);text-decoration:none;border-bottom:1px solid var(--volt);
 padding-bottom:3px;
}
.contact-mail:hover{color:var(--paper);border-color:var(--paper)}
.contact-row{
 display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;
 margin-top:34px;
}
.contact-row .microlabel{max-width:36ch}

/* ---------- footer ---------- */
footer{background:var(--ink);border-top:1px solid #3a3d37;padding:20px 0 28px}
.foot-row{
 display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
 font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
 color:#8d9186;
}
/* ---------- roadmap (inside the dark project section) ----------
 One <li class="ms"> per milestone. Status classes:
 ms--done (volt, complete) · ms--now (orange, current) · ms--plan (dim, target)
 To add a milestone: copy an <li> block in index.html and edit. */
.roadmap{margin-top:clamp(40px,7vh,64px);border-top:1px solid #3a3d37;padding-top:clamp(28px,5vh,44px)}
.roadmap-head{display:flex;justify-content:space-between;align-items:baseline;gap:18px;flex-wrap:wrap;margin-bottom:clamp(24px,4vh,36px)}
.roadmap-head h3{
 font-family:var(--display);font-variation-settings:"wdth" 120;
 font-weight:800;font-size:clamp(24px,3.6vw,38px);text-transform:uppercase;color:var(--paper);
}
.ms-list{list-style:none;max-width:760px}
.ms{position:relative;padding:0 0 clamp(24px,4vh,34px) 30px;border-left:2px solid #3a3d37}
.ms:last-child{padding-bottom:2px}
.ms::before{
 content:"";position:absolute;left:-7px;top:3px;
 width:12px;height:12px;background:var(--ink);border:2px solid #3a3d37;
}
.ms--done{border-left-color:var(--volt)}
.ms--done::before{background:var(--volt);border-color:var(--volt)}
.ms--now::before{background:var(--signal);border-color:var(--signal)}
.ms-head{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:7px}
.ms-date{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#8d9186}
.ms-tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;padding:3px 8px;border:1px solid}
.ms--done .ms-tag{color:var(--volt);border-color:var(--volt)}
.ms--now .ms-tag{color:var(--signal);border-color:var(--signal)}
.ms--plan .ms-tag{color:#8d9186;border-color:#3a3d37}
.ms h4{
 font-family:var(--display);font-variation-settings:"wdth" 116;
 font-weight:800;font-size:clamp(17px,2.2vw,21px);text-transform:uppercase;
 color:var(--paper);margin-bottom:8px;
}
.ms p{font-size:15px;color:#c6c9bf;max-width:64ch}
.roadmap-note{
 margin-top:clamp(20px,3vh,28px);
 font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:#8d9186;
}