/* donico.io teaser. Tokens from the Donico Brand Guide v0.2 (Color + Typography). The hero is the
   guide's dark ground with blueprint linework; everything after it is the bright, white brand. */
:root {
  --bg:#FFFFFF; --panel:#F4F8FC; --ink:#0E1C2B; --muted:#556575; --border:#E3EAF2;
  --blue:#1A5FD0; --blue-hi:#2F74E6; --blue-tint:#EAF1FE; --green:#12A06A; --green-text:#0B7A50;
  --night:#0C1622; --night-2:#0E1C2B; --line:#7AAAFF; --line-dim:rgba(122,170,255,.38); --line-faint:rgba(122,170,255,.16);
  --paper:#DCE8FF;
  --sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:light;
}
*, *::before, *::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font:400 17px/1.6 var(--sans); -webkit-font-smoothing:antialiased; }
a { color:inherit; }
:focus-visible { outline:3px solid var(--blue); outline-offset:3px; border-radius:4px; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip { position:absolute; left:-9999px; top:12px; z-index:100; padding:10px 14px; background:#fff; color:var(--ink); border-radius:6px; }
.skip:focus { left:16px; }
.wrap { width:min(1160px, calc(100% - 48px)); margin:0 auto; }
.kicker { margin:0 0 18px; font:500 12px/1.4 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }

/* header */
.bar { position:fixed; inset:0 0 auto 0; z-index:50; display:flex; align-items:center; justify-content:space-between;
  height:84px; padding:0 max(24px, calc((100% - 1160px) / 2)); color:#fff; transition:background .3s, color .3s, box-shadow .3s; }
.bar.solid { background:rgba(255,255,255,.92); color:var(--ink); box-shadow:0 1px 0 var(--border); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.mark { font:800 clamp(26px, 2.3vw, 33px)/1 var(--sans); letter-spacing:-.035em; text-decoration:none; }
.mark .dot { color:var(--green); }
.nav { display:flex; gap:26px; }
.nav a { font-size:15px; font-weight:500; text-decoration:none; opacity:.82; }
.nav a:hover { opacity:1; text-decoration:underline; text-underline-offset:4px; }

/* hero: blueprint */
.hero { position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:center; overflow:hidden;
  background:linear-gradient(180deg, var(--night) 0%, var(--night-2) 100%); color:#fff; isolation:isolate; }
.hero::after { content:""; position:absolute; left:0; right:0; bottom:0; height:14px; z-index:3; opacity:.55;
  background:repeating-linear-gradient(90deg, var(--line-dim) 0 1px, transparent 1px 16px) bottom/100% 7px no-repeat,
             repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 80px) bottom/100% 14px no-repeat; }
.layers { position:absolute; inset:0; z-index:0; }
.layer { position:absolute; will-change:transform; }
.grid { inset:-12% 0 -12% 0; width:100%; height:124%;
  transform:translate3d(calc(var(--px, 0) * -10px), calc(var(--y, 0) * .45px + var(--py, 0) * -10px), 0); }
.grid path { fill:none; stroke:var(--line-faint); stroke-width:1; }
.grid .major { stroke:rgba(122,170,255,.24); }
.artwrap { right:max(8px, calc((100% - 1360px) / 2)); top:50%; width:min(760px, 50vw);
  transform:translate3d(calc(var(--px, 0) * -18px), calc(-50% + var(--y, 0) * .2px + var(--py, 0) * -12px), 0); }
.art { display:block; width:100%; height:auto; overflow:visible; }
.art path, .art rect, .art circle { fill:none; }
.core { stroke:var(--line); stroke-width:1.1; }
.halo { stroke:var(--line); stroke-width:7; opacity:.11; }
.halo text { display:none; }
.b-edge, .m-edge { stroke:var(--paper); stroke-width:1.35; }
.b-hidden, .m-hidden { stroke-dasharray:4 7; opacity:.45; }
.b-stud, .b-joist, .m-stud, .m-joist, .b-plate, .m-plate { opacity:.55; }
.b-open, .m-open { stroke:var(--paper); opacity:.8; }
.b-slab { stroke:var(--line-dim); }
.b-grid { stroke-dasharray:3 9; opacity:.5; }
.b-bubble { stroke:var(--line-dim); }
.b-level { stroke:var(--line-dim); stroke-dasharray:2 6; }
.m-strap { stroke:var(--line-dim); }
.m-cable { stroke:var(--line-dim); }
.m-hook { stroke:var(--paper); }
.m-leader { stroke:var(--line-dim); }
.m-node { fill:var(--green) !important; stroke:none; }
.art text { font:500 12px var(--mono); letter-spacing:.14em; fill:var(--line); stroke:none; }
.t-bubble { font-size:12px; fill:var(--paper) !important; }
.t-level, .t-dim { fill:var(--line-dim) !important; }
.t-set { fill:#3FD69A !important; font-weight:600; opacity:calc((var(--p, 1) - .5) * 10); }
.t-setting { opacity:calc(1 - (var(--p, 1) - .45) * 10); }
.n-dim, .n-tick { stroke:var(--line-dim); }
.n-title rect, .n-title path { stroke:var(--line-dim); }
.n-title text { font-size:11px; fill:var(--line-dim); }
.L-module { transform:translateY(calc((1 - min(var(--p, 1), .55) / .55) * -150px)); }
.L-notes { transform:translate(calc(var(--px, 0) * -8px), calc(var(--y, 0) * -.06px + var(--py, 0) * -6px)); }

.hero-copy { position:relative; z-index:2; width:min(1160px, calc(100% - 48px)); margin:0 auto; padding:120px 0 96px;
  transform:translate3d(0, calc(var(--y, 0) * .32px), 0); opacity:calc(1 - var(--p, 0) * 1.7); }
.hero .kicker { color:rgba(220,232,255,.72); }
.hero h1 { margin:0; max-width:11ch; font:800 clamp(52px, 7.6vw, 112px)/.96 var(--sans); letter-spacing:-.045em; }
.hero .lede { max-width:34ch; margin:28px 0 0; font-size:clamp(18px, 1.6vw, 21px); line-height:1.55; color:#BCC9DB; }
.actions { display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-top:40px; }
.btn { display:inline-flex; align-items:center; justify-content:center; height:52px; padding:0 26px; border-radius:8px;
  background:var(--blue); color:#fff; font:700 16px/1 var(--sans); letter-spacing:-.005em; text-decoration:none;
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset, 0 10px 30px -12px rgba(26,95,208,.7); transition:background .2s, transform .2s var(--ease); }
.btn:hover { background:var(--blue-hi); transform:translateY(-1px); }
.more { font-weight:600; text-decoration:none; opacity:.85; }
.more:hover { opacity:1; text-decoration:underline; text-underline-offset:4px; }
.cue { position:absolute; left:max(24px, calc((100% - 1160px) / 2)); bottom:40px; z-index:2; display:flex; align-items:center; gap:12px;
  font:500 11px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:rgba(220,232,255,.55); opacity:calc(1 - var(--p, 0) * 3); }
.cue span { display:block; width:1px; height:36px; background:linear-gradient(var(--line), transparent); transform-origin:top; animation:cue 2.2s var(--ease) infinite; }
@keyframes cue { 0% { transform:scaleY(0); } 50% { transform:scaleY(1); } 100% { transform:scaleY(1); opacity:0; } }

/* the linework draws itself in (skipped for reduced motion) */
@media (prefers-reduced-motion:no-preference) {
  .art .core path:not(.b-hidden):not(.m-hidden):not(.b-grid):not(.b-level) { stroke-dasharray:1 1; stroke-dashoffset:1; animation:draw 2.6s cubic-bezier(.55,0,.2,1) forwards; }
  .art .halo { animation:glowin 3.2s ease .8s both; }
  .art .core .b-stud, .art .core .b-plate, .art .core .b-joist { animation-delay:.5s; }
  .art .core .b-open { animation-delay:.9s; }
  .L-module .core path { animation-delay:1.1s !important; }
  .art text:not(.t-set):not(.t-setting), .b-bubble, .n-title, .b-hidden, .m-hidden, .b-grid, .b-level { animation:fadein 1.2s ease 1.6s both; }
  .hero-copy > * { animation:rise 1s var(--ease) both; }
  .hero-copy > :nth-child(2) { animation-delay:.12s; }
  .hero-copy > :nth-child(3) { animation-delay:.24s; }
  .hero-copy > :nth-child(4) { animation-delay:.36s; }
}
@keyframes draw { to { stroke-dashoffset:0; } }
@keyframes glowin { from { opacity:0; } }
@keyframes fadein { from { opacity:0; } }
@keyframes rise { from { opacity:0; transform:translateY(18px); } }

/* how we work */
.work { padding:140px 0 110px; }
.work h2, .cta h2 { margin:0 0 56px; max-width:16ch; font:800 clamp(34px, 4.6vw, 58px)/1.04 var(--sans); letter-spacing:-.035em; }
.pillars { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:0; border-top:1px solid var(--border); }
.pillars li { padding:34px 34px 10px 0; border-right:1px solid var(--border); }
.pillars li + li { padding-left:34px; }
.pillars li:last-child { border-right:0; }
.num { display:block; margin-bottom:26px; font:500 13px/1 var(--mono); letter-spacing:.12em; color:var(--blue); }
.pillars h3 { margin:0 0 12px; font:700 24px/1.2 var(--sans); letter-spacing:-.02em; }
.pillars p { margin:0; color:var(--muted); }

/* values: the six, drifting with the scroll */
.values { padding:30px 0 120px; overflow:hidden; }
.band { overflow:hidden; white-space:nowrap; }
.line { display:inline-block; padding:6px 0; font:800 clamp(56px, 9vw, 132px)/1.05 var(--sans); letter-spacing:-.045em; will-change:transform; }
.line i { display:inline-block; width:.13em; height:.13em; margin:0 .42em; border-radius:50%; background:var(--green); vertical-align:.3em; }
.line.one { transform:translate3d(calc(-6% + var(--p1, 0) * -22%), 0, 0); }
.line.two { font-variant-ligatures:none; color:transparent; -webkit-text-stroke:1.5px rgba(14,28,43,.28); transform:translate3d(calc(-40% + var(--p2, 0) * 22%), 0, 0); }
.line.two i { background:rgba(18,160,106,.5); }
.pledge { margin:80px 0 0; padding:0 0 0 28px; border-left:3px solid var(--green); max-width:880px; }
.pledge p { margin:0; font:700 clamp(28px, 3.4vw, 44px)/1.2 var(--sans); letter-spacing:-.03em; }
.pledge footer { margin-top:18px; font:500 12px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }

/* call to action */
.cta { padding:0 0 48px; }
.card { position:relative; overflow:hidden; padding:72px 64px 64px; border-radius:14px; background:var(--panel); border:1px solid var(--border); }
.card .corner { position:absolute; right:22px; top:22px; width:200px; fill:none; stroke:rgba(26,95,208,.28); stroke-width:1.2; }
.card .corner circle { fill:var(--green); stroke:none; }
.card h2 { margin-bottom:18px; }
.card .lede { max-width:42ch; margin:0 0 34px; font-size:20px; color:var(--muted); }
.fine { margin:16px 0 0; font:500 12px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }

/* the build: a full-bleed photo at the bottom, fading in from the page, drifting slower than the scroll */
.yard { position:relative; height:clamp(320px, 64vh, 700px); overflow:hidden; background:var(--night); }
.yard::before, .yard::after { content:""; position:absolute; left:0; right:0; z-index:1; pointer-events:none; }
.yard::before { top:0; height:30%; background:linear-gradient(#FFFFFF, rgba(255,255,255,0)); }
.yard::after { bottom:0; height:16%; background:linear-gradient(rgba(255,255,255,0), #FFFFFF); }
.yard picture { display:block; }
.yard-img { position:absolute; left:0; top:-14%; width:100%; height:128%; object-fit:cover; object-position:50% 46%;
  will-change:transform; transform:translate3d(0, calc((var(--yp, .5) - .5) * -18%), 0); }
@media (prefers-reduced-motion:reduce) { .yard-img { transform:none; top:0; height:100%; } }

.foot { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; width:min(1160px, calc(100% - 48px)); margin:0 auto;
  padding:28px 0 40px; border-top:1px solid var(--border); font-size:14px; color:var(--muted); }
.foot a { text-decoration:none; }
.foot a:hover { text-decoration:underline; }

/* reveal on scroll (only elements that start below the fold get hidden, so nothing flashes) */
.reveal.pending { opacity:0; transform:translateY(26px); }
.reveal { transition:opacity .9s var(--ease), transform .9s var(--ease); }
.pillars li:nth-child(2) { transition-delay:.1s; }
.pillars li:nth-child(3) { transition-delay:.2s; }

@media (max-width:900px) {
  .nav a[href="#work"] { display:none; }
  .artwrap { width:110vw; right:-30vw; top:62%; opacity:.45; }
  .hero-copy { padding-top:110px; }
  .pillars { grid-template-columns:1fr; }
  .pillars li, .pillars li + li { padding:28px 0; border-right:0; border-bottom:1px solid var(--border); }
  .card { padding:44px 26px 34px; }
  .card .corner { width:120px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .grid, .artwrap, .hero-copy, .L-module, .L-notes, .line { transform:none !important; }
  .artwrap { transform:translateY(-50%) !important; }
  .hero-copy { opacity:1 !important; }
  .reveal.pending { opacity:1; transform:none; }
  .cue span { animation:none; }
}