/* lagomlab.tech - styles. Tokens from design/tokens.json mapped 1:1 to CSS custom properties. */

:root{
  /* fonts, radius, motion (not themed) */
  --font-sans:'Space Grotesk',ui-sans-serif,system-ui,'Segoe UI',Helvetica,Arial,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --radius-sm:10px; --radius-md:12px; --radius-card:14px; --radius-tile:20px; --radius-panel:24px; --radius-pill:999px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --nav-height:68px;
  --container-max:1216px;
  /* fixed CTA panel colors (same in both themes) */
  --cta-bg:#14161A; --cta-text:#F7F6F2; --cta-muted:#C9CCD2; --cta-faint:#9BA0A8;
  --cta-accent:#5EE3D8; --cta-glow:#2BD4C8; --cta-rule:rgba(247,246,242,.14); --cta-btn-border:rgba(247,246,242,.35);
  /* light theme (default) */
  --bg:#F7F6F2; --surface:#FFFFFF; --surface2:#EFEDE7; --line:#E3E0D8; --line2:#CFCBC0;
  --ink:#14161A; --ink2:#464B53; --ink3:#61676F;
  --accent:#12B5A9; --accent-ink:#08756C; --accent-soft:#DDF4F1; --accent-glow:rgba(18,181,169,.22);
  --focus:#08756C; /* accent-ink: 5.1:1 on bg, 5.5:1 on surface (accent itself is 2.4:1) */
  --on-accent:#0B1E1C; --live:#1E9E6A;
  --amber:#F2A33A; --amber-soft:#FBE9CF; --amber-ink:#8A5A12;
  --shadow:0 1px 2px rgba(20,22,26,.04),0 12px 32px -16px rgba(20,22,26,.18);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#0E1013; --surface:#15181D; --surface2:#1C2027; --line:#262B33; --line2:#353B45;
  --ink:#EDEBE6; --ink2:#B7BBC2; --ink3:#8B9098;
  --accent:#2BD4C8; --accent-ink:#5EE3D8; --accent-soft:#143431; --accent-glow:rgba(43,212,200,.16);
  --focus:#2BD4C8; /* accent: 10.3:1 on the dark bg */
  --on-accent:#0B1E1C; --live:#3FCF8E;
  --amber:#F2A33A; --amber-soft:#3A2A12; --amber-ink:#F4C077;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 16px 40px -18px rgba(0,0,0,.6);
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;accent-color:var(--accent)}
h1,h2,h3,p{margin:0}
h1,h2,h3{text-wrap:balance;letter-spacing:-.02em}
p{text-wrap:pretty}
section,footer,header{container-type:inline-size}
a{color:var(--accent-ink)}
a:hover{color:var(--ink)}
::selection{background:var(--accent);color:var(--on-accent)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:6px}
/* the skip-link target: focus moves here for screen reader and keyboard users, but a ring
   around the whole page would be noise */
#main:focus,#main:focus-visible{outline:none}

.skip-link{position:absolute;left:-9999px;top:0;z-index:60;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:0 0 10px 0;font:600 14px var(--font-sans);text-decoration:none}
.skip-link:focus{left:0}

.mono{font-family:var(--font-mono)}
.eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);font-weight:500}
.h1{font-size:44px;line-height:1.04;font-weight:600;letter-spacing:-.03em}
.h2{font-size:30px;line-height:1.1;font-weight:600;text-wrap:balance}
.lead{font-size:17px;line-height:1.55;color:var(--ink2);max-width:620px}
.wrap{width:100%;max-width:var(--container-max);margin:0 auto;padding:0 20px}
.sec{padding:48px 0;scroll-margin-top:80px}
@media (min-width:700px){.h1{font-size:64px}.h2{font-size:36px}.lead{font-size:19px}.wrap{padding:0 40px}.sec{padding:64px 0}}
@media (min-width:1000px){.h1{font-size:76px;letter-spacing:-.035em}.h2{font-size:44px}.wrap{padding:0 48px}.sec{padding:80px 0}}

/* nav */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;background:var(--accent);transform-origin:0 50%;transform:scaleX(0);z-index:50;pointer-events:none}
.nav{position:sticky;top:0;z-index:40;height:var(--nav-height);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);background:color-mix(in oklab,var(--bg) 80%,transparent);border-bottom:1px solid var(--line)}
.navlinks{display:none;gap:4px;align-items:center}
.btn.navcta{display:none}
.iconbtn.menubtn{display:inline-flex}
@media (min-width:900px){.navlinks{display:flex}.btn.navcta{display:inline-flex}.iconbtn.menubtn{display:none}}
.navlink{color:var(--ink2);text-decoration:none;font-size:15px;font-weight:500;padding:8px 10px;border-radius:8px;transition:color .2s,background .2s}
.navlink:hover{color:var(--ink);background:var(--surface2)}
.menu{display:flex;flex-direction:column;gap:4px;padding:12px 20px 20px;border-top:1px solid var(--line);background:var(--bg)}
.menu[hidden]{display:none}
.menu a{font-size:18px;font-weight:500;color:var(--ink);text-decoration:none;padding:12px 8px;border-radius:10px;min-height:44px;display:flex;align-items:center}
.menu a:hover{background:var(--surface2)}
.menu .btn{justify-content:flex-start;padding:0 8px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 20px;border-radius:var(--radius-md);font:600 15px/1 var(--font-sans);text-decoration:none;cursor:pointer;border:1px solid transparent;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s,color .2s;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--accent);color:var(--on-accent);box-shadow:0 8px 24px -10px var(--accent-glow)}
.btn-primary:hover{color:var(--on-accent)}
.btn-secondary{background:transparent;color:var(--ink);border-color:var(--line2)}
.btn-secondary:hover{border-color:var(--ink);color:var(--ink)}
.btn .arrow{transition:transform .25s var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}
.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--radius-md);border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;transition:background .2s,transform .25s var(--ease)}
.iconbtn:hover{background:var(--surface2);transform:rotate(-12deg)}
.iconbtn svg{display:block}
.logo-mark svg{width:100%;height:100%;display:block}

/* badges */
.badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:var(--radius-pill);font:600 11px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--line);background:var(--surface);color:var(--ink2)}
.badge .dot{width:7px;height:7px;border-radius:50%;background:var(--live);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(30,158,106,.5)}70%{box-shadow:0 0 0 7px rgba(30,158,106,0)}100%{box-shadow:0 0 0 0 rgba(30,158,106,0)}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s}

/* grids, mobile-first */
.g-svc{display:grid;grid-template-columns:1fr;gap:0}
@media (min-width:700px){.g-svc{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}}
@media (min-width:1000px){.g-svc{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px}}
.g-steps{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:700px){.g-steps{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}}
.g-hero{display:grid;grid-template-columns:1fr;gap:40px;align-items:start}
@media (min-width:1000px){.g-hero{grid-template-columns:1.1fr 1fr;gap:64px;align-items:center}}
.g-num{display:grid;grid-template-columns:1fr;gap:20px}
@media (min-width:700px){.g-num{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}}
.g-foot{display:grid;grid-template-columns:1fr;gap:24px}
@media (min-width:700px){.g-foot{grid-template-columns:1fr auto;gap:40px;align-items:center}}

/* services: desktop static list vs mobile accordion (both in DOM, CSS shows/hides) */
.svclist{display:none}
.acc-list{display:flex;flex-direction:column;border-bottom:1px solid var(--line)}
@media (min-width:700px){.svclist{display:grid}.acc-list{display:none}.acc-hint{display:none}}
.svc{display:flex;flex-direction:column;gap:8px;padding:18px 0 4px;border-top:1px solid var(--line)}
.svc .n{font-size:12px;color:var(--accent-ink);letter-spacing:.1em}
.svc h3{font-size:17px;font-weight:600;line-height:1.3}
.svc p{font-size:14px;line-height:1.55;color:var(--ink2)}
.acc-item{border-top:1px solid var(--line)}
.acch{margin:0;font:inherit;letter-spacing:normal}
.accbtn{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:12px 0;background:transparent;border:0;color:var(--ink);font-family:var(--font-sans);cursor:pointer;text-align:left}
.accbtn .n{font-size:12px;color:var(--accent-ink);letter-spacing:.1em;width:28px;flex:none}
.accbtn .t{flex:1;font-size:16px;font-weight:600;line-height:1.3;text-align:left}
.accbtn:hover .accicon{background:var(--accent-soft);color:var(--accent-ink)}
.accicon{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;color:var(--ink2);flex:none;transition:background .2s,color .2s}
.accbtn[aria-expanded="true"] .accicon{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.accicon .icon-minus{display:none}
.accbtn[aria-expanded="true"] .icon-plus{display:none}
.accbtn[aria-expanded="true"] .icon-minus{display:block}
.accbody{font-size:14px;line-height:1.55;color:var(--ink2);padding:0 40px 16px 40px;margin:0;display:block}
/* without JS: bodies always visible (readable with JS disabled). With JS: obey aria-expanded. */
html.js .accbody{display:none}
html.js .acc-item[data-open] .accbody{display:block}
.acc-hint{font-size:11px;color:var(--ink3);letter-spacing:.08em;padding-top:10px}

/* process steps */
.step{display:flex;gap:14px;align-items:center;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface)}
@media (min-width:700px){.step{flex-direction:column;align-items:flex-start;gap:10px;padding:18px}}
.stepnum{width:40px;height:40px;border-radius:50%;border:2px solid var(--accent);display:inline-flex;align-items:center;justify-content:center;font:600 13px var(--font-mono);flex:none}
.step-title{font-size:15px;font-weight:600}
.step-text{font-size:13px;line-height:1.45;color:var(--ink2)}
.loopback{display:none;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.loopback-m{display:flex;align-items:center;gap:8px;padding:12px 0 0}
@media (min-width:700px){.loopback{display:grid}.loopback-m{display:none}}
/* One horizontal dashed line below the grid. The two vertical segments of the old U, and the
   chevron that sat 12px above it, reached up into step card 02 and crossed its text (bug 10). */
.loopback-line{grid-column:2 / 6;height:26px;margin:0 28px;border:none;border-bottom:2px dashed var(--accent);position:relative}
.loopback-line svg{position:absolute;left:-7px;top:6px}
.loopback-line .loop-label{position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);background:var(--surface);padding:0 10px;font-size:11px;letter-spacing:.1em;color:var(--accent-ink)}
.loopback-m .loop-label{font-size:11px;letter-spacing:.1em;color:var(--accent-ink)}

/* hero visual (no hidden states) */
.w{display:inline-block;animation:rise 1.1s var(--ease) both;animation-delay:calc(var(--i) * 90ms + 120ms)}
@keyframes rise{from{font-weight:300;translate:0 .18em}to{font-weight:600;translate:0 0}}
.lift{animation:lift .8s var(--ease) both}
@keyframes lift{from{translate:0 14px}to{translate:0 0}}
.grid-bg{background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 70% 40%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 70% 40%,#000 30%,transparent 75%)}
.hero-card{border-radius:var(--radius-tile);display:flex;flex-direction:column;padding:16px 18px;gap:12px;box-shadow:var(--shadow);animation-delay:200ms}
/* Resting state = the state the slogan claims: both bars equal, marker on "just enough",
   equals sign visible. Every animation runs from somewhere else back to this (tokens rule1),
   so reduced motion and static captures show the final frame.
   scaleY/translateX instead of height/left: height and left reflow and cost CLS (review 6). */
.bar{border-radius:8px 8px 3px 3px;width:52px;height:58%;transform-origin:50% 100%}
.barL{background:var(--ink)}
.barR{background:var(--accent);will-change:transform;animation:settle 2.6s var(--ease) .5s both}
/* scale factors are the designed heights over the resting 58%: 96, 40, 66, 58 */
@keyframes settle{0%{transform:scaleY(1.655)}45%{transform:scaleY(.69)}72%{transform:scaleY(1.138)}100%{transform:scaleY(1)}}
.eq{opacity:1;animation:fadein .5s var(--ease) 3s both}
@keyframes fadein{from{opacity:0}to{opacity:1}}
/* the marker rides a track as wide as the scale, so a percentage translate equals a
   percentage of the scale (a percentage transform on the dot itself would not) */
.marker-track{position:absolute;inset:0;will-change:transform;animation:slide 2.6s var(--ease) .5s both}
.marker{position:absolute;left:50%;top:50%;width:16px;height:16px;border-radius:50%;background:var(--accent);border:3px solid var(--surface);box-shadow:0 0 0 2px var(--accent);transform:translate(-50%,-50%)}
/* offsets are the designed marker positions minus the resting 50% */
@keyframes slide{0%{transform:translateX(38%)}45%{transform:translateX(-36%)}72%{transform:translateX(10%)}100%{transform:translateX(0)}}
.tick{position:absolute;top:50%;width:1px;height:10px;background:var(--line2);transform:translateY(-50%)}
.caret{display:inline-block;width:8px;height:1.1em;background:var(--accent);vertical-align:text-bottom;margin-left:3px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.hero-status{display:flex;flex-direction:column;gap:6px;padding-top:12px;border-top:1px solid var(--line)}
.hero-status-note{font-size:12px;line-height:1.45;color:var(--ink3)}
.live-dot{width:9px;height:9px;border-radius:50%;background:var(--live);animation:pulse 2s infinite;display:inline-block;flex:none}

@supports (animation-timeline: view()){
  .progress{animation:grow linear both;animation-timeline:scroll(root)}
  @keyframes grow{to{transform:scaleX(1)}}
  .rv{animation:rv linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
  @keyframes rv{from{translate:0 32px;scale:.985}to{translate:0 0;scale:1}}
}
@supports not (animation-timeline: view()){
  .progress{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  .progress{display:none}
}

/* contact: fixed-color dark panel in both themes */
.cta-panel{background:var(--cta-bg);color:var(--cta-text);border:1px solid var(--line);border-radius:var(--radius-panel);padding:28px 24px;display:flex;flex-direction:column;gap:24px;position:relative;overflow:hidden}
.cta-glow{position:absolute;right:-120px;top:-120px;width:380px;height:380px;border-radius:50%;background:var(--cta-glow);opacity:.16;filter:blur(60px)}
.cta-numbers{position:relative;padding-bottom:22px;border-bottom:1px solid var(--cta-rule)}
.cta-numbers .metric{display:flex;flex-direction:column;gap:4px}
.cta-numbers .metric .val{font-family:var(--font-mono);font-size:40px;font-weight:600;letter-spacing:-.03em;line-height:1}
.cta-numbers .metric .val .suffix{color:var(--cta-accent)}
.cta-numbers .metric .label{font-size:14px;color:var(--cta-muted)}
.cta-numbers .metric .val.text{white-space:nowrap}
.cta-numbers .metric .note{font-size:13px;line-height:1.45;color:var(--cta-faint);max-width:34ch}
.cta-line .tel{color:inherit;text-decoration:underline;text-underline-offset:3px;display:inline-flex;align-items:center;min-height:44px}
.cta-body{display:flex;flex-direction:column;gap:18px;position:relative;max-width:720px}
.cta-body .eyebrow{color:var(--cta-accent)}
.cta-body .h2{color:var(--cta-text)}
.cta-body .lead-cta{font-size:16px;line-height:1.6;color:var(--cta-muted)}
.cta-body .btn-secondary{color:var(--cta-text);border-color:var(--cta-btn-border)}
.cta-line{font-size:12px;color:var(--cta-faint)}

/* footer */
.site-footer{border-top:1px solid var(--line);padding:40px 0 32px}
.footer-brand{display:flex;flex-direction:column;gap:10px}
.footer-mark{display:inline-flex;align-items:center;gap:10px}
.footer-mark span.word{font-size:17px;font-weight:600;letter-spacing:-.03em}
.footer-tagline{font-size:14px;color:var(--ink2)}
.footer-copy{font-size:12px;color:var(--ink3)}
.footer-legal{display:flex;flex-direction:column;gap:4px;padding-top:6px}
.footer-legal-line{font-size:12px;line-height:1.5;color:var(--ink3)}
.footer-legal-links{display:flex;flex-wrap:wrap;gap:0 16px;font-size:12px}
.footer-legal-links a{display:inline-flex;align-items:center;min-height:32px;color:var(--ink2);text-decoration:underline;text-underline-offset:2px}
.footer-legal-links a:hover{color:var(--ink)}
.footer-legal-note{font-size:12px;line-height:1.5;color:var(--ink3)}
.footer-controls{display:flex;gap:8px;align-items:center}
.footer-controls .btn-secondary{min-height:42px}

/* mobile menu: dim page behind the panel and lock scroll */
html.menu-open,html.menu-open body{overflow:hidden}
.menu-backdrop{position:fixed;inset:0;background:rgba(20,22,26,.6);z-index:39;display:none}
html.menu-open .menu-backdrop{display:block}

/* document pages (privacy notice): one narrow reading column */
.doc{max-width:72ch;display:flex;flex-direction:column;gap:8px}
.doc-updated{font-size:12px;color:var(--ink3);padding-bottom:8px}
.doc-section{display:flex;flex-direction:column;gap:10px;padding-top:22px}
.doc-section h2{font-size:19px;font-weight:600;line-height:1.3}
.doc-section p,.doc-section li{font-size:15px;line-height:1.65;color:var(--ink2)}
.doc-section ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.doc-back{padding-top:32px;font-size:14px}

/* 404 */
.notfound{min-height:100svh;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:18px;width:100%;max-width:var(--container-max);margin:0 auto;padding:40px 20px}
.notfound-mark{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);margin-bottom:4px}
.notfound-word{font-size:19px;font-weight:600;letter-spacing:-.03em}

/* Windows High Contrast and friends drop background-color, which is all the bars and the
   marker are, and flatten both buttons to the same chrome (review bug 2). */
@media (forced-colors: active){
  .bar,.marker{forced-color-adjust:none}
  .barL{background:CanvasText}
  .barR,.marker{background:Highlight}
  .marker{border-color:Canvas;box-shadow:0 0 0 2px Highlight}
  .btn-primary{border:2px solid ButtonText}
}

/* print: the dark CTA panel would eat a toner cartridge, and controls do not work on paper */
@media print{
  .progress,.menu,.menu-backdrop,.iconbtn,.btn.navcta,.footer-controls,.cta-glow{display:none !important}
  .nav{position:static;height:auto;padding:12px 0;backdrop-filter:none;-webkit-backdrop-filter:none;background:none}
  .sec{padding:18px 0}
  .cta-panel{background:#FFFFFF;color:#14161A;border:1px solid #14161A;border-radius:0}
  .cta-panel .h2,.cta-panel .lead-cta,.cta-panel .label,.cta-panel .note,.cta-panel .cta-line,.cta-panel .val{color:#14161A}
  .cta-panel .eyebrow,.cta-panel .suffix{color:#08756C}
  .cta-panel .btn-secondary,.cta-panel .btn-primary{color:#14161A;background:none;border:1px solid #14161A;box-shadow:none}
  .cta-numbers{border-bottom-color:#14161A}
  /* the mailto CTA carries a prefilled body that would print as 250 characters of escapes;
     its address is already on the page as text in .cta-line */
  #contact a[href^="http"]::after,#contact a[href^="tel:"]::after{content:" (" attr(href) ")";font-size:10px;word-break:break-all}
}