/* windcom.gr: fixed side rail, dot-grid hero, numbered projects. Tokens first, dark by default. */
:root{
  --bg:#000000; --fg:#f2f2f2; --muted:#8f8f8f; --line:#242424; --panel:#0c0c0c; --accent:#2fb8ac; --ghost:#1c1c1c; --device:#2b2b2b;
  --sans:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  --mono:ui-monospace,'SF Mono',Consolas,'Liberation Mono',monospace;
  --rail:148px; --bar:76px;
  color-scheme:dark;
}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){--bg:#f3f3f1;--fg:#151515;--muted:#666;--line:#d8d8d4;--panel:#e9e9e5;--accent:#0b7f75;--ghost:#e6e6e2;--device:#c9c9c4;color-scheme:light}}
:root[data-theme="light"]{--bg:#f3f3f1;--fg:#151515;--muted:#666;--line:#d8d8d4;--panel:#e9e9e5;--accent:#0b7f75;--ghost:#e6e6e2;--device:#c9c9c4;color-scheme:light}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:0}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-weight:400;font-size:16px;line-height:1.7;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.skip{position:absolute;left:12px;top:-60px;background:var(--fg);color:var(--bg);padding:10px 16px;border-radius:6px;z-index:100;font-weight:500}
.skip:focus{top:12px}

/* side rail */
.rail{position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:32px 0;background:var(--bg)}
.mark{position:relative;width:70px;color:var(--fg);display:block;align-self:flex-start;margin-left:39px}
.mark svg{display:block;width:100%;height:auto;transition:opacity .15s}
/* hover: the solid logo hides and an outline of it draws itself */
.mark .draw{position:absolute;left:0;top:0;opacity:0}
.mark .draw path{fill:transparent;stroke:currentColor;stroke-width:.9;stroke-dasharray:1;stroke-dashoffset:1}
.mark:hover .fill,.mark:focus-visible .fill,.mark.ring-on .fill{opacity:0}
.mark:hover .draw,.mark:focus-visible .draw{opacity:1}
.mark:hover .draw path,.mark:focus-visible .draw path{animation:logo-draw 1.1s cubic-bezier(.6,0,.2,1) forwards}
.mark:hover .draw path:nth-child(2),.mark:focus-visible .draw path:nth-child(2){animation-delay:.12s}
@keyframes logo-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.rail nav{display:flex;flex-direction:column;gap:36px}
.rail nav a{writing-mode:vertical-rl;transform:rotate(180deg);font-size:13px;font-weight:500;letter-spacing:.14em;color:var(--muted);transition:color .2s}
.rail nav a:hover,.rail nav a.on{color:var(--fg)}
.rail nav a.on::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-bottom:10px}
.rail-end{display:flex;flex-direction:column;align-items:center;gap:16px}
.soc{display:flex;flex-direction:column;gap:12px}
.soc a{width:30px;height:30px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-size:11px;color:var(--muted);transition:color .2s,border-color .2s}
.soc a:hover{color:var(--fg);border-color:var(--fg)}
.theme{position:fixed;right:28px;top:28px;z-index:30;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--bg);color:var(--fg);cursor:pointer;display:grid;place-items:center;padding:0}
.theme svg{width:18px;height:18px}
.theme:hover{border-color:var(--fg)}

main{margin-left:var(--rail)}
.pad{padding-inline:clamp(32px,11vw,240px)}

/* hero */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;overflow:hidden}
#dots{position:absolute;inset:0;width:100%;height:100%;-webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 14%,#000 60%);mask-image:linear-gradient(90deg,transparent 0,transparent 14%,#000 60%)}
.hero-in{position:relative;z-index:2;width:100%;pointer-events:none}
.hero-in a{pointer-events:auto}
.eyebrow{font-size:13px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin-bottom:22px}
.hero h1{font-size:clamp(42px,8vw,104px);font-weight:500;letter-spacing:-.035em;line-height:1.04;display:flex;flex-direction:column}
.hero h1 .row{display:flex;align-items:center;gap:clamp(16px,3vw,40px)}
.hero h1 .rule{flex:1;height:1px;background:var(--line);max-width:30vw;margin-top:.25em}
.plus{color:var(--muted);font-weight:400;margin-right:.15em}
.word{display:inline-block;transition:opacity .35s,transform .35s}
.word.out{opacity:0;transform:translateY(.25em)}
.sub{max-width:30em;margin-top:30px;color:var(--muted);font-size:clamp(15px,1.3vw,18px)}

/* projects */
.projects{position:relative;padding-block:clamp(72px,10vw,140px);overflow:clip}
.ghost-word{position:absolute;left:0;right:clamp(32px,11vw,240px);top:clamp(40px,6vw,90px);text-align:right;font-size:clamp(64px,13vw,200px);font-weight:600;letter-spacing:-.04em;color:var(--ghost);line-height:1;pointer-events:none;user-select:none}
.sec-head{position:relative;margin-bottom:clamp(48px,8vw,110px)}
.sec-head h2,.det h2.t{font-size:clamp(28px,3.4vw,44px);font-weight:500;letter-spacing:-.02em;line-height:1.2}
.proj{position:relative;display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(24px,6vw,96px);align-items:center;padding-block:clamp(36px,6vw,80px);border-top:1px solid var(--line)}
.proj.flip{grid-template-columns:1fr 1.25fr}
.proj.flip .stage{order:2}
.stage{display:grid;place-items:center;min-width:0}
/* the big number sits inside the text column, behind the text: right edge on desktop, left edge on flipped rows */
.big-n{position:absolute;right:0;top:-.12em;font-size:clamp(120px,16vw,240px);font-weight:600;letter-spacing:-.05em;color:var(--ghost);line-height:1;z-index:-1;user-select:none}
.info{position:relative;z-index:1;min-width:0}
.info .n{font-family:var(--mono);font-size:12px;color:var(--accent);letter-spacing:.08em}
.info h3{font-size:clamp(26px,3vw,40px);font-weight:500;letter-spacing:-.02em;line-height:1.15;margin:10px 0 14px}
.info p{color:var(--muted);max-width:28em;margin-bottom:18px}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.tags span{font-family:var(--mono);font-size:11px;border:1px solid var(--line);padding:3px 10px;border-radius:99px;color:var(--muted)}
.link{display:inline-flex;gap:10px;align-items:center;font-weight:500;font-size:13px;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid var(--accent);padding-bottom:4px;transition:gap .2s}
.link:hover{gap:16px}
.note{position:relative;margin-top:clamp(24px,4vw,48px);font-family:var(--mono);font-size:12px;color:var(--muted)}

/* devices (drawn in CSS) */
.ui b{display:block;height:7px;border-radius:2px;background:var(--line)}
.ui b.d{background:var(--fg);opacity:.85;width:42%;height:9px}
.ui b.a{background:var(--accent)}
.ui .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.ui .cards u{display:block;height:clamp(24px,4vw,44px);border:1px solid var(--line);border-radius:3px}
.ui .cards u:first-child{background:var(--accent);border-color:var(--accent)}
.ui .bars{display:flex;align-items:flex-end;gap:5px;height:clamp(36px,6vw,70px)}
.ui .bars i{flex:1;background:var(--line);border-radius:2px 2px 0 0}
.ui .bars i:nth-child(3n){background:var(--accent)}
.peek{position:relative;width:100%;max-width:640px;aspect-ratio:16/10;border-radius:14px;overflow:hidden;background:#fff;cursor:ns-resize}
.peek img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0%;transition:object-position .5s ease-out}
.concept{position:relative;width:100%;max-width:640px;aspect-ratio:16/10;border-radius:14px;background:var(--panel);border:1px solid var(--line);overflow:hidden;display:grid;grid-template-columns:24% 1fr}
.concept.phones{grid-template-columns:1fr 1fr;place-items:center;padding:6%}
.cside{border-right:1px solid var(--line);padding:14px;display:grid;gap:8px;align-content:start}
.cmain{padding:18px;display:grid;gap:10px;align-content:start}
.cp{width:min(100%,150px);aspect-ratio:9/16;border:1px solid var(--line);border-radius:18px;background:var(--bg);padding:14px 10px;display:grid;gap:8px;align-content:start}
.cp.b{transform:translateY(8%)}
.cp .pill{width:34%;height:5px;border-radius:3px;background:var(--line);justify-self:center;margin-bottom:6px}
.ctag{position:absolute;right:12px;bottom:10px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* details */
.det{border-top:1px solid var(--line);padding-top:clamp(72px,10vw,140px);padding-bottom:clamp(48px,6vw,80px)}
.det-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(32px,7vw,110px)}
.det-grid h2{margin-bottom:20px}
.det-grid p{color:var(--muted);margin-bottom:16px;max-width:34em}
.skills{display:grid;grid-template-columns:1fr 1fr;gap:0 32px;align-self:start;margin:0;padding:0;list-style:none}
.skills li:nth-child(-n+2){border-top:1px solid var(--line)}   /* top line per column, so it has the same gap as the lines below */
.skills li{padding:14px 0;border-bottom:1px solid var(--line);font-size:15px;display:flex;justify-content:space-between;gap:12px}
.skills em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--muted);text-align:right}

/* technologies: honeycomb of hexagon outlines, each holding a solid one-colour icon (no text) */
.det-right{align-self:start}
.det-note{margin:clamp(20px,2.5vw,28px) 0 0;color:var(--muted);max-width:34em}
.tech{margin-top:clamp(28px,3.5vw,44px)}
.tech{container-type:inline-size}
.honey{--hw:clamp(32px,calc((100cqw - 40px) / 6.2),68px);display:flex;flex-direction:column;align-items:center}
.hex-row{display:flex;justify-content:center;gap:6px}
.hex-row + .hex-row{margin-top:calc(var(--hw) * -0.29 + 3px)}
/* rows of 5 and 6: the longer row is centred under the shorter one, so the cells interlock */
.hex{position:relative;width:var(--hw);height:calc(var(--hw) * 1.1547);color:var(--muted);transition:color .25s,transform .25s}
.hex .hx{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hex .hx polygon{fill:transparent;stroke:var(--line);stroke-width:1.2;vector-effect:non-scaling-stroke;transition:stroke .25s,fill .25s}
.hex .ico{position:absolute;left:50%;top:50%;width:40%;height:40%;transform:translate(-50%,-50%);fill:currentColor;stroke:none;overflow:visible}
.hex:hover{color:var(--fg);transform:translateY(-3px)}
.hex:hover .hx polygon{stroke:var(--fg)}
@media (prefers-reduced-motion:reduce){.hex,.hex .hx polygon{transition:none}.hex:hover{transform:none}}
/* honeycomb info: a leader line is drawn from the hovered cell to a small window describing the technology */
.tech-stage{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:clamp(24px,5vw,72px);align-items:center}
.tech-stage{min-height:140px}
.tech-stage .hex-pop{position:absolute;right:0;top:0;margin-top:0;grid-column:2;grid-row:1}   /* floats beside the honeycomb, so the section is only as tall as the honeycomb */
.tech-stage .honey{grid-column:1;grid-row:1;justify-self:start}
.hex-pop{width:330px;height:220px;overflow:hidden;border:1px solid var(--line);border-radius:14px;padding:20px 22px;background:var(--bg);opacity:0;transform:translateX(10px);pointer-events:none;transition:opacity .25s,transform .35s cubic-bezier(.6,0,.2,1);position:relative;z-index:2}
.hex-pop.on{opacity:1;transform:none}
.hex-pop h4{margin:0 0 6px;font-size:18px;font-weight:500;letter-spacing:-.01em}
.hex-pop p{margin:0 0 14px;color:var(--muted);font-size:15px;line-height:1.55}
.hex-pop ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.hex-pop li{font-family:var(--mono);font-size:11px;border:1px solid var(--line);border-radius:99px;padding:2px 10px;color:var(--muted)}
/* the info window is a small console: title bar with dots, mono text typed after a "$" prompt */
.hex-pop{padding:0;display:flex;flex-direction:column;height:220px}
.hp-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--line);flex:none}
.hp-bar i{width:8px;height:8px;border-radius:50%;background:var(--line)}
.hp-title{margin-left:8px;font-family:var(--mono);font-size:11px;color:var(--muted);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.hp-body{margin:0;padding:14px 16px;flex:1;overflow:hidden;font-family:var(--mono);font-size:12px;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--fg)}
.hp-p{color:var(--accent)}
.hp-c{color:var(--fg)}
.hp-o{color:var(--muted)}
.hp-caret{display:inline-block;width:.55em;height:1.05em;background:var(--accent);vertical-align:-.15em;animation:hp-blink 1s steps(2,jump-none) infinite}
@keyframes hp-blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.hp-caret{animation:none}}.hex-line{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}
.hex-line path{fill:none;stroke-linejoin:round;stroke-linecap:round}
.hex-line .base{stroke:var(--fg);stroke-width:1.2;opacity:0;transition:opacity .2s}
.hex-line.on .base{opacity:.22}
.hex-line .charge{stroke:var(--accent);stroke-width:1.7;opacity:0;filter:drop-shadow(0 0 3px var(--accent))}
.hex-line.on .charge{opacity:1}
.hex-line .dot{fill:var(--accent);opacity:0;transition:opacity .2s}
.hex-line.on .dot{opacity:1}
.hex-line .head{fill:#fff;opacity:0;filter:drop-shadow(0 0 4px var(--accent)) drop-shadow(0 0 9px var(--accent))}
.hex-line.charging .head{opacity:1}
.hex-line .pad{fill:var(--bg);stroke:var(--fg);stroke-width:1.2;opacity:0;transition:opacity .15s,fill .25s,stroke .25s}
.hex-line.on .pad{opacity:.85}
.hex-line.charged .pad{fill:var(--accent);stroke:var(--accent);opacity:1;animation:pad-charge .6s ease-out}
@keyframes pad-charge{0%{r:4.5}40%{r:10}100%{r:4.5}}
@media (prefers-reduced-motion:reduce){.hex-line.charged .pad{animation:none}}.hex:focus-visible{outline:none}
.hex:focus-visible .hx polygon{stroke:var(--accent)}
@media (max-width:900px){
  .tech-stage{grid-template-columns:1fr;gap:64px}
  .tech-stage{min-height:0}
  .tech-stage .hex-pop{position:relative;right:auto;top:auto;margin-top:0;grid-column:1;grid-row:2}
  .tech-stage .honey{grid-column:1;grid-row:1;justify-self:center}
  .hex-pop{width:100%;height:230px;transform:translateY(8px)}
}
@media (prefers-reduced-motion:reduce){.hex-pop{transition:none}}
/* facts under the hero text */
.facts{display:flex;gap:clamp(18px,3vw,44px);flex-wrap:wrap;margin-top:38px;padding-top:20px;border-top:1px solid var(--line);max-width:680px}
.facts div{font-size:14px;color:var(--muted);max-width:14em}
.facts b{display:block;font-weight:500;color:var(--fg);font-size:15px}

/* process */
.how{border-top:1px solid var(--line);padding-block:clamp(56px,8vw,100px)}
.how h2.t{font-size:clamp(28px,3.4vw,44px);font-weight:500;letter-spacing:-.02em;line-height:1.2}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,3vw,40px);margin-top:36px}
.step{border-top:1px solid var(--fg);padding-top:14px}
.step .n{font-family:var(--mono);font-size:12px;color:var(--accent)}
.step h3{font-size:20px;font-weight:500;margin:6px 0 4px}
.step p{font-size:15px;color:var(--muted)}

/* contact */
.contact{border-top:1px solid var(--line);padding-block:clamp(80px,12vw,170px)}
.contact h2{font-size:clamp(38px,7.4vw,104px);font-weight:500;letter-spacing:-.035em;line-height:1.04;margin-bottom:40px}
.contact h2 span{color:var(--accent)}
.c-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:start}
.mail{display:inline-block;font-size:clamp(18px,2.2vw,28px);font-weight:500;border-bottom:1px solid var(--accent);padding-bottom:4px;word-break:break-all}
.c-text p{color:var(--muted);margin-top:20px;max-width:26em}
form{display:grid;gap:18px}
.f label{display:block;font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.f input,.f textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);color:var(--fg);font:inherit;font-size:17px;padding:10px 0;border-radius:0;transition:border-color .2s}
.f input:focus,.f textarea:focus{outline:0;border-color:var(--accent)}
.f textarea{min-height:130px;resize:vertical}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.btn{justify-self:start;background:var(--fg);color:var(--bg);padding:14px 30px;border-radius:99px;font:inherit;font-weight:500;font-size:13px;letter-spacing:.1em;text-transform:uppercase;border:0;cursor:pointer}
.btn:hover{opacity:.85}
.btn[disabled]{opacity:.5;cursor:wait}
.status{min-height:1.6em;font-size:15px}
.status.ok{color:var(--accent)}
.status.err{color:#d9534f}
footer{padding-block:28px;border-top:1px solid var(--line);color:var(--muted);font-size:13px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* custom cursor: a dot that sits on the pointer and a larger ring that trails it (fine pointers only) */
.cur-ring{position:fixed;left:0;top:0;width:38px;height:38px;margin:-19px 0 0 -19px;pointer-events:none;z-index:9999;mix-blend-mode:difference;opacity:0;transition:opacity .2s,width .25s,height .25s,margin .25s}
.cur-ring.big{width:64px;height:64px;margin:-32px 0 0 -32px}
/* social links: on hover the letters spin away and the real brand mark spins in, in its own colour */
.soc a{position:relative}
.soc a .ltr,.soc a .ico{transition:transform .45s cubic-bezier(.6,0,.2,1),opacity .25s}
.soc a .ico{position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;opacity:0;transform:rotate(90deg) scale(.3);overflow:visible}
.soc a:hover .ltr,.soc a:focus-visible .ltr{opacity:0;transform:rotate(-90deg) scale(.3)}
.soc a:hover .ico,.soc a:focus-visible .ico{opacity:1;transform:none}
.soc .s-in{--brand:#3d95ea}
.soc .s-fb{--brand:#1877f2}
.soc .s-ig{--brand:#e1306c}
.soc a .ico{color:var(--brand)}
:root[data-theme="light"] .soc .s-in{--brand:#0a66c2}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .soc .s-in{--brand:#0a66c2}}
@media (prefers-reduced-motion:reduce){.soc a .ltr,.soc a .ico{transition:none}}

/* theme button: the cursor circle snaps around it and the icon turns into the theme you will get
   (moon becomes a sun with rays, sun becomes a moon). Dark is the default look. */
html.cc .theme:hover,html.cc .soc a:hover{border-color:transparent}   /* the cursor ring takes the place of the button's own circle */
.theme svg{overflow:visible}
.theme .moon,.theme .sun{transform-origin:12px 12px;transition:transform .5s cubic-bezier(.6,0,.2,1),opacity .3s}
.theme .sun{opacity:0;transform:rotate(-90deg) scale(.3)}
.theme:hover .moon,.theme:focus-visible .moon{opacity:0;transform:rotate(70deg) scale(.3)}
.theme:hover .sun,.theme:focus-visible .sun{opacity:1;transform:none}
:root[data-theme="light"] .theme .moon{opacity:0;transform:rotate(-70deg) scale(.3)}
:root[data-theme="light"] .theme .sun{opacity:1;transform:none}
:root[data-theme="light"] .theme:hover .moon,:root[data-theme="light"] .theme:focus-visible .moon{opacity:1;transform:none}
:root[data-theme="light"] .theme:hover .sun,:root[data-theme="light"] .theme:focus-visible .sun{opacity:0;transform:rotate(90deg) scale(.3)}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]) .theme .moon{opacity:0;transform:rotate(-70deg) scale(.3)}
  :root:not([data-theme="dark"]) .theme .sun{opacity:1;transform:none}
  :root:not([data-theme="dark"]) .theme:hover .moon,:root:not([data-theme="dark"]) .theme:focus-visible .moon{opacity:1;transform:none}
  :root:not([data-theme="dark"]) .theme:hover .sun,:root:not([data-theme="dark"]) .theme:focus-visible .sun{opacity:0;transform:rotate(90deg) scale(.3)}
}
@media (prefers-reduced-motion:reduce){.theme .moon,.theme .sun{transition:none}}

/* honeycomb items: the circle turns into a hexagon that sits exactly on the cell */
.cur-ring .hc{position:absolute;left:50%;top:50%;width:38px;height:38px;opacity:0;overflow:visible;transform:translate(-50%,-50%);transition:opacity .12s,width .4s cubic-bezier(.6,0,.2,1),height .4s cubic-bezier(.6,0,.2,1)}
.cur-ring .hc path{fill:none;stroke:#fff;stroke-width:1.4;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.cur-ring.hexmode .hc,.cur-ring.hexout .hc{opacity:1}
.cur-ring.letter.hexmode .cap{opacity:0}
.cur-ring.letter.hexmode .rc,.cur-ring.hexout .rc{opacity:0}.hex.hot .hx polygon{stroke:transparent}   /* the cursor hexagon replaces the cell's own outline, so there is one line, not two */
/* menu links: the circle stretches into a capsule that wraps the link, and the link text lights up */
.cur-ring .rc{transition:opacity .12s}
.cur-ring .cap{position:absolute;left:50%;top:50%;width:38px;height:38px;transform:translate(-50%,-50%);border:1.5px solid #fff;border-radius:999px;opacity:0;transition:width .38s cubic-bezier(.6,0,.2,1),height .38s cubic-bezier(.6,0,.2,1),opacity .12s}
.cur-ring.letter .cap{opacity:1}
.cur-ring.letter .rc{opacity:0}
.rail nav a.hot{color:var(--fg)}
/* over the headline words the circle grows (120px) and the text inside it is rainbow coloured:
   a rainbow-filled copy of the headline is clipped to a circle that follows the ring */
.cur-ring.over{width:120px;height:120px;margin:-60px 0 0 -60px}
.cur-ring.over .rc circle{stroke-width:.5}
.h1-hi{position:absolute;margin:0;pointer-events:none;clip-path:circle(0px at 0 0);z-index:3;
  color:transparent;-webkit-text-fill-color:transparent;
  background:linear-gradient(100deg,#ff3b30,#ff9500,#ffd400,#34c759,#00c7be,#0a84ff,#bf5af2,#ff3b30) 0 0/260px 100% repeat-x;
  -webkit-background-clip:text;background-clip:text;animation:rainbow 4s linear infinite}
.h1-hi .rule{background:transparent}
@keyframes rainbow{to{background-position:260px 0}}
@media (prefers-reduced-motion:reduce){.h1-hi{animation:none}}
.cur-ring svg{position:absolute;display:block;overflow:visible}
.cur-ring .rc{left:0;top:0;width:100%;height:100%}
.cur-ring .rc circle{fill:none;stroke:#fff;stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:50% 50%}
.cur-ring .lg{left:50%;top:50%;opacity:0}
.cur-ring .lg path{fill:none;stroke:#fff;stroke-width:.9;stroke-dasharray:1;stroke-dashoffset:1}
/* circle -> logo: the circle line unwinds while the same line draws the logo outline */
.cur-ring.logo .rc circle{animation:rc-open .55s cubic-bezier(.6,0,.2,1) forwards}
.cur-ring.logo .lg{opacity:1}
.cur-ring.logo .lg path{animation:logo-draw 1s cubic-bezier(.6,0,.2,1) .2s both}
.cur-ring.logo .lg path:nth-child(2){animation-delay:.32s}
/* logo -> circle: the outline retracts and the circle line draws itself closed again */
.cur-ring.back .lg{opacity:1}
.cur-ring.back .lg path{animation:logo-undraw .55s cubic-bezier(.6,0,.2,1) forwards}
.cur-ring.back .rc circle{animation:rc-close .6s cubic-bezier(.6,0,.2,1) .25s both}
@keyframes rc-open{from{stroke-dashoffset:0}to{stroke-dashoffset:1}}
@keyframes rc-close{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes logo-undraw{from{stroke-dashoffset:0}to{stroke-dashoffset:1}}
html.cc .mark .draw{display:none}
html.cc.cur-on .cur-ring{opacity:1}
html.cc,html.cc a,html.cc button,html.cc .peek,html.cc .theme{cursor:none}
html.cc input,html.cc textarea{cursor:text}
html.cc.cur-text .cur-ring{opacity:0}

/* theme switch: circular reveal (View Transitions) */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-old(root){z-index:1}
::view-transition-new(root){z-index:2}

/* 404 */
.nf{min-height:100vh;display:grid;place-content:center;gap:16px;text-align:center;padding:24px}
.nf h1{font-size:clamp(64px,14vw,160px);font-weight:500;letter-spacing:-.04em;line-height:1}
.nf a{border-bottom:1px solid var(--accent);justify-self:center}

@media (max-width:900px){
  :root{--rail:0px}
  .rail{right:0;bottom:auto;width:auto;height:var(--bar);flex-direction:row;padding:0 16px;border-bottom:1px solid var(--line)}
  .mark{width:46px;align-self:center;margin-left:6px}
  .rail nav{flex-direction:row;gap:18px;margin-right:56px}
  .steps{grid-template-columns:1fr 1fr}
  .rail nav a{writing-mode:horizontal-tb;transform:none;font-size:12px;letter-spacing:.08em}
  .rail nav a.on::before{display:none}
  .rail-end{position:absolute;right:60px;top:0;height:var(--bar);flex-direction:row;justify-content:center}
  .soc{display:none}
  .theme{top:19px;right:12px;width:38px;height:38px}
  main{padding-top:var(--bar)}
  .hero{min-height:calc(100svh - var(--bar))}
  #dots{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 55%);mask-image:linear-gradient(180deg,transparent 0,#000 55%)}
  .proj,.proj.flip,.det-grid,.c-grid{grid-template-columns:1fr}
  /* phones: number to the right of the text, text keeps clear of it */
  .big-n{font-size:clamp(72px,20vw,130px);z-index:0}
  .info{padding-right:clamp(84px,25vw,160px)}
  .proj.flip .stage{order:0}
}
@media (max-width:420px){.rail nav{gap:12px}.rail nav a{font-size:11px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.word,.link{transition:none}.peek img{transition:none}.mark:hover .draw path,.mark:focus-visible .draw path{animation:none;stroke-dashoffset:0}}

/* full-screen sections: hero, each project, details, process and contact take one screen each,
   and scrolling moves one screen at a time (JS handles the wheel and keys; snapping helps touch) */
html{scroll-snap-type:y proximity}
.hero,.proj,.det,.how,.contact{scroll-snap-align:start}
.hero{min-height:100vh;min-height:100svh}
.projects{padding-block:0}
.projects .sec-head{position:absolute;right:clamp(32px,11vw,240px);top:clamp(24px,6vh,60px);margin:0;z-index:2;text-align:right}
.proj{min-height:100vh;min-height:100svh;align-content:center;border-top:0;padding-block:clamp(88px,15vh,140px) clamp(32px,6vh,64px)}
.det,.how,.contact{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-block:clamp(72px,10vh,120px)}
.det{border-top:0}
.how,.contact{border-top:0}
.contact h2{font-size:clamp(34px,min(7vw,11vh),88px);margin-bottom:clamp(18px,3.5vh,34px)}
.contact .f textarea{min-height:84px}
.projects .note{margin:0;padding-bottom:20px;position:absolute;left:clamp(32px,11vw,240px);bottom:8px}

/* details: the left text block sits 30px higher (the table stays where it is) */
.det-grid > div:first-child{position:relative;top:-30px}

/* contact: a little less padding so the whole form fits short screens */
.contact{padding-block:clamp(44px,6vh,90px)}

/* projects: the title sits at the vertical middle of the big WORK word behind it */
.projects{--gt:clamp(40px,6vw,90px);--gf:clamp(64px,13vw,200px)}
.projects .sec-head{top:calc(var(--gt) + var(--gf) * .88 + 14px);transform:none;margin-right:50px}   /* directly below the WORK word (its baseline is at .88 of its font size) */   /* 15px lower and 35px further left than the WORK word's centre/edge */

/* outline run: a bright dash circles the outline of every letter (the filled word stays as it is) */
svg.ol{position:absolute;overflow:visible;pointer-events:none;z-index:3}
svg.ol text{fill:none;stroke:var(--accent);stroke-width:var(--sw,1.5);stroke-linejoin:round;stroke-linecap:round;
  stroke-dasharray:var(--dash) var(--gap);animation:ol-run 7s linear infinite;filter:drop-shadow(0 0 3px var(--accent))}
@keyframes ol-run{to{stroke-dashoffset:calc((var(--dash) + var(--gap)) * -1)}}

/* the first project starts below the Projects title that now sits under WORK */
.projects .proj{padding-top:calc(var(--gt) + var(--gf) * .88 + 84px)}

/* WORK and Projects stay put while the three project pages go by (a zero-height sticky holder at the top of the section) */
.proj-title{position:sticky;top:0;height:0;z-index:0;margin-inline:calc(clamp(32px,11vw,240px) * -1)}

/* WORK and Projects sit 60px further right than the content's right edge (never closer than 8px to the window) */
.projects .ghost-word,.projects .sec-head{right:max(8px,calc(clamp(32px,11vw,240px) - 60px))}

/* process: six stages on one circuit trace; a charge runs along it when the section appears and lights each pad */
.how{justify-content:center}
.how .how-head{max-width:46em;margin-bottom:clamp(18px,4vh,40px)}
.how .how-intro{color:var(--muted);margin:12px 0 0;max-width:42em;font-size:clamp(15px,1.2vw,17px)}
.flow{position:relative}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(26px,5vh,52px) clamp(22px,3.4vw,56px)}
.step{position:relative;border:0;padding:20px 0 0 22px;opacity:.3;transform:translateY(10px);transition:opacity .6s,transform .6s}
.step.lit{opacity:1;transform:none}
.step .node{position:absolute;left:0;top:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--bg);border:1.5px solid var(--line);transition:background .35s,border-color .35s,box-shadow .35s;z-index:1}
.step.lit .node{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 22%,transparent)}
.step .n{font-family:var(--mono);font-size:12px;color:var(--accent)}
.step h3{font-size:clamp(19px,1.7vw,24px);font-weight:500;letter-spacing:-.01em;margin:2px 0 6px}
.step p{font-size:clamp(14px,1.1vw,15.5px);line-height:1.6;color:var(--muted);margin:0 0 12px}
.step .meta{display:flex;gap:6px;flex-wrap:wrap}
.step .meta span{font-family:var(--mono);font-size:11px;border:1px solid var(--line);border-radius:99px;padding:2px 10px;color:var(--muted);transition:color .25s,border-color .25s}
.step:hover .meta span{color:var(--fg);border-color:var(--fg)}
.step:hover .node{transform:scale(1.25)}
.promises{list-style:none;margin:clamp(22px,4.5vh,44px) 0 0;padding:clamp(14px,2.4vh,22px) 0 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:10px clamp(18px,3vw,40px)}
.promises li{font-size:14px;color:var(--fg);display:flex;align-items:center;gap:10px}
.promises li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent)}
@media (max-width:900px){
  .steps{grid-template-columns:1fr}
  .step{padding-bottom:6px}
}
@media (prefers-reduced-motion:reduce){.step{transition:none;opacity:1;transform:none}}
.how{padding-block:clamp(36px,5.5vh,68px)}

/* process on short screens: keep all six stages and the promises on one screen */
@media (max-height:830px) and (min-width:901px){
  .how .how-intro{display:none}
  .how .how-head{margin-bottom:16px}
  .steps{row-gap:20px}
  .step{padding-top:16px}
  .step p{font-size:13.5px;line-height:1.5;margin-bottom:9px}
  .step h3{font-size:19px}
  .promises{margin-top:16px;padding-top:12px}
}

/* promises: over one of them the cursor circle turns into a line that underlines it */
.cur-ring.letter.underline .cap{border-width:0 0 1.5px 0;border-radius:0;height:0}
.promises li{transition:color .25s}
.promises li::before{transition:transform .25s}
.promises li.hot::before{transform:scale(1.5)}

/* process stage hover: outline drawn from the dot round the stage and back; the cursor ring hides, the dot stays */
html.cc.cur-on .cur-ring.stage{opacity:0}
.step .box{position:absolute;left:0;top:0;width:1px;height:1px;overflow:visible;pointer-events:none}
.step .box path{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset .7s cubic-bezier(.5,0,.2,1)}
.step.hot .box path,.step:hover .box path{stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){.step .box path{transition:none}}
/* contact redesign: text and next steps on the left, the form as one card on the right */
.contact .c-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,7vw,120px);align-items:center}
.contact h2{margin-bottom:clamp(14px,2.4vh,24px)}
.c-lead{color:var(--muted);font-size:clamp(15px,1.2vw,17px);max-width:26em;margin:0 0 clamp(18px,3.2vh,32px)}
.contact .mail{display:inline-flex;align-items:center;gap:12px;border:0;padding:0;font-size:clamp(20px,2.4vw,32px);position:relative}
.contact .mail span{background:linear-gradient(var(--accent),var(--accent)) 0 100%/100% 1.5px no-repeat;padding-bottom:6px;transition:background-size .35s}
.contact .mail:hover span{background-size:0 1.5px;background-position:100% 100%}
.contact .mail svg{width:.9em;height:.9em;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s}
.contact .mail:hover svg{transform:translate(4px,-4px)}
.c-next{list-style:none;margin:clamp(22px,4.5vh,48px) 0 0;padding:0;display:grid;gap:0;max-width:30em}
.c-next li{display:flex;gap:16px;align-items:baseline;padding:12px 0;border-top:1px solid var(--line);font-size:14.5px;color:var(--muted);transition:color .25s}
.c-next li:last-child{border-bottom:1px solid var(--line)}
.c-next li:hover{color:var(--fg)}
.c-next li span{font-family:var(--mono);font-size:12px;color:var(--accent)}
.c-card{border:1px solid var(--line);border-radius:22px;padding:clamp(22px,3.2vw,40px);gap:clamp(14px,2.4vh,22px);background:color-mix(in srgb,var(--fg) 3%,transparent);transition:border-color .3s}
.c-card:focus-within{border-color:color-mix(in srgb,var(--accent) 70%,var(--line))}
.c-card .f{position:relative}
.c-card .f label{position:absolute;left:0;top:14px;margin:0;font-size:16px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--muted);pointer-events:none;transition:transform .2s,font-size .2s,color .2s;transform-origin:left top}
.c-card .f input,.c-card .f textarea{padding:22px 0 8px}
.c-card .f textarea{min-height:96px}
.c-card .f input:focus+label,.c-card .f textarea:focus+label,.c-card .f input:not(:placeholder-shown)+label,.c-card .f textarea:not(:placeholder-shown)+label{transform:translateY(-14px);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.c-card .btn{display:inline-flex;align-items:center;gap:12px;justify-self:stretch;justify-content:center;padding:16px 30px}
.c-card .btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.c-card .btn:hover svg{transform:translateX(5px)}
.c-card .status{margin:0;min-height:1.4em}
@media (max-width:900px){.contact .c-grid{grid-template-columns:1fr;align-items:start}}

.contact .c-text h2{font-size:clamp(32px,min(4.6vw,9vh),72px)}

/* the Projects title sits on top of the WORK word (WORK's capitals start at about .15 of its font size) */
.projects .sec-head{top:calc(var(--gt) + var(--gf) * .15 - clamp(28px,3.4vw,44px) * 1.2 - 12px)}
.projects .proj{padding-top:calc(var(--gt) + var(--gf) * .88 + 44px)}

/* the Projects title lies on top of the WORK word, at the vertical middle of its capitals */
.projects .sec-head{top:calc(var(--gt) + var(--gf) * .52 - clamp(28px,3.4vw,44px) * .6)}

/* Projects title: 25px lower and 40px further left */
.projects .sec-head{top:calc(var(--gt) + var(--gf) * .52 - clamp(28px,3.4vw,44px) * .6 + 25px);margin-right:90px}

/* Projects title: another 5px lower, 80% opacity */
.projects .sec-head{top:calc(var(--gt) + var(--gf) * .52 - clamp(28px,3.4vw,44px) * .6 + 30px);opacity:.8}

/* the ghost word behind a project is its name (it used to be the number) */
.big-n{font-size:clamp(40px,5vw,84px);letter-spacing:-.04em;text-align:right;max-width:100%;top:-.5em;line-height:1.02}
@media (max-width:900px){.big-n{font-size:clamp(34px,9vw,56px);top:-.4em}}

/* the project name stays on one line and fills the width of the text column */
.proj .info{container-type:inline-size}
.big-n{font-size:10.5cqw;white-space:nowrap;top:-.62em}
@media (max-width:900px){.big-n{font-size:10.5cqw;top:-.55em}}

/* much bigger: it runs on one line and reaches behind the picture to the left */
.big-n{font-size:18cqw;top:-.55em}
@media (max-width:900px){.big-n{font-size:16cqw;top:-.5em}}

/* the project name sits at the bottom of the screen (50px up), right-aligned, as big as fits on one line */
.proj{container-type:inline-size}
.proj .info{container-type:normal;position:static}
.big-n{top:auto;bottom:50px;right:0;font-size:9.5cqw;line-height:1;text-align:right}
@media (max-width:900px){.big-n{font-size:9.5cqw;top:auto;bottom:50px}}

.big-n,.big-n{font-size:12.5cqw}
@media (max-width:900px){.big-n{font-size:12.5cqw}}

/* project picture: grey at rest, the colour spreads from the pointer on hover */
.peek img{filter:grayscale(1) brightness(.85)}
.peek img.color{filter:none;clip-path:circle(0 at var(--x,50%) var(--y,50%));transform:scale(1.05);
  transition:clip-path .7s cubic-bezier(.5,0,.2,1),transform .9s cubic-bezier(.2,.7,.2,1),object-position .5s ease-out;pointer-events:none}
.peek:hover img.color,.peek:focus-within img.color{clip-path:circle(150% at var(--x,50%) var(--y,50%));transform:none}
@media (hover:none){.peek img.color{clip-path:none;transform:none;display:none}.peek img{filter:none}}
@media (prefers-reduced-motion:reduce){.peek img.color{transition:none}}

/* project picture, second version: square corners, and the colour sweeps in with a slanted edge from left to right */
.peek{border-radius:0}
.peek img.color{clip-path:polygon(0 0,0 0,-25% 100%,0 100%);transform:none;
  transition:clip-path .75s cubic-bezier(.6,0,.2,1),object-position .5s ease-out}
.peek:hover img.color,.peek:focus-within img.color{clip-path:polygon(0 0,125% 0,100% 100%,0 100%);transform:none}

/* the colour comes in when the pointer is on the picture or on the text column of the project */
.proj:has(.stage:hover,.info:hover,:focus-visible) .peek img.color{clip-path:polygon(0 0,125% 0,100% 100%,0 100%)}

/* each project is centred vertically on the screen */
.projects .proj{padding-block:80px;align-content:center}

/* project name: a little bigger, left-aligned with the content */
.big-n{left:0;right:auto;text-align:left;font-size:13.5cqw}
@media (max-width:900px){.big-n{font-size:13.5cqw}}

/* project name: centred, 200px higher (250px above the bottom) */
.big-n{left:0;right:0;text-align:center;bottom:250px}
@media (max-width:900px){.big-n{bottom:250px}}

/* project name: 15px lower */
.big-n{bottom:235px}
@media (max-width:900px){.big-n{bottom:235px}}

/* the project name takes the place of the old WORK word: same corner, same right edge, same outline run */
.projects .proj .big-n{position:absolute;left:auto;bottom:auto;text-align:right;white-space:nowrap;font-size:9cqw;line-height:1;
  top:calc(var(--gt) + (var(--gf) - 9cqw) * .88);
  right:calc(max(8px, clamp(32px,11vw,240px) - 60px) - clamp(32px,11vw,240px))}
@media (max-width:900px){.projects .proj .big-n{font-size:9cqw;top:calc(var(--gt) + (var(--gf) - 9cqw) * .88);bottom:auto}}

/* the Project label sits right above the project name, on the same right edge */
.projects .sec-head{margin-right:0;opacity:.8;top:calc(var(--gt) + (var(--gf) - 9cqw) * .88 - 44px)}

/* one shared size for the project name, so the Project label can be placed relative to it */
.projects{--nf:clamp(28px,5.6vw,92px)}
.projects .proj .big-n{font-size:var(--nf);top:calc(var(--gt) + (var(--gf) - var(--nf)) * .88)}
.projects .sec-head{top:calc(var(--gt) + (var(--gf) - var(--nf)) * .88 - 44px)}
@media (max-width:900px){.projects .proj .big-n{font-size:var(--nf);top:calc(var(--gt) + (var(--gf) - var(--nf)) * .88)}}

/* all projects on one tall page: they follow each other and the visitor scrolls through them */
.projects{padding-block:64px 80px;scroll-snap-align:start}
.projects .proj{min-height:0;scroll-snap-align:none;align-content:start;padding-block:calc(var(--nf) + 64px) 56px;border-top:1px solid var(--line)}
.projects .proj-title + .proj{border-top:0}
.projects .proj-title{position:relative;top:auto}
.projects .sec-head{top:14px}
.projects .proj .big-n{top:30px}
@media (max-width:900px){.projects .proj .big-n{top:30px}}

/* no project names any more: the word "Project" is the big dark word in the background, as WORK used to be */
.projects{padding-top:calc(var(--gf) * .8 + 20px)}
.projects .sec-head{top:calc(var(--gt) * .3);right:max(8px,calc(clamp(32px,11vw,240px) - 60px));z-index:0;opacity:1;margin:0}
.projects .sec-head h2{font-size:var(--gf);font-weight:600;letter-spacing:-.04em;line-height:1;color:color-mix(in srgb,var(--ghost) 60%,var(--bg));user-select:none;pointer-events:none}
.projects .proj{padding-block:56px}
.projects .proj-title + .proj{padding-top:0}

/* the Project word is gone (its outline-run effect is kept in the project notes); the first project follows the section top directly */
.projects{padding-top:48px}
.projects .proj{padding-block:56px}
.projects .proj:first-of-type{padding-top:0}

/* Baracocoa card: warm paper with the brand name, grey at rest, the colour sweeps in like on the WEPP picture */
.brand-card{position:relative;width:100%;max-width:640px;aspect-ratio:16/10;overflow:hidden;background:#d9d9d9}
.brand-card .bc{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;text-align:center;background:#efe6dc;color:#1c1612}
.brand-card .bc b{font-size:clamp(26px,4.6vw,66px);font-weight:800;letter-spacing:.05em;line-height:1}
.brand-card .bc span{margin-top:14px;font-size:clamp(10px,1.25vw,17px);letter-spacing:.2em;text-transform:uppercase;color:#6a4a36}
.brand-card .bc:not(.color){filter:grayscale(1) brightness(.85)}
.brand-card .bc.color{background:#e6d3bd;color:#3a2012;clip-path:polygon(0 0,0 0,-25% 100%,0 100%);transition:clip-path .75s cubic-bezier(.6,0,.2,1)}
.proj:has(.stage:hover,.info:hover,:focus-visible) .brand-card .bc.color{clip-path:polygon(0 0,125% 0,100% 100%,0 100%)}
@media (hover:none){.brand-card .bc.color{display:none}.brand-card .bc:not(.color){filter:none}}
@media (prefers-reduced-motion:reduce){.brand-card .bc.color{transition:none}}

/* Baracocoa logo (black line art): grey paper at rest, warm paper with the logo "printed" on it when the colour sweeps in */
.brand-card .bc{background:#f2f2f2}
.brand-card .bc img{width:80%;height:auto;display:block}
.brand-card .bc.color{background:#ead7c0}
.brand-card .bc.color img{mix-blend-mode:multiply}

/* the Baracocoa logo fills the whole frame */
.brand-card .bc img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.brand-card .bc:not(.color){background:#fff;filter:grayscale(1) brightness(.88)}

/* text-only brand card (the "coming soon" teaser): grey at rest, warm paper on hover */
.brand-card .bc b,.brand-card .bc span{display:block}
.brand-card .bc b{font-size:clamp(26px,4.2vw,60px)}

/* the text-only teaser card turns pink with white text on hover */
.brand-card .bc.color:has(b){background:#ff005a;color:#fff}
.brand-card .bc.color:has(b) span{color:#fff}

/* contact heading: the cursor circle unwinds like a string, the string folds into an outlined light bulb, which switches on */
html.cc.cur-on.lamp-on .cur-ring{opacity:0}
.lamp,.lamp-string{position:fixed;pointer-events:none}
.lamp{left:0;top:0;z-index:9998;opacity:0;transition:opacity .15s}
.lamp.show{opacity:1}
.lamp svg{position:relative;display:block;width:100%;height:100%;overflow:visible}
.lamp-line,.lamp-detail{fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s}
.lamp-detail{stroke-dasharray:1;stroke-dashoffset:1}
.lamp.show .lamp-detail{stroke-dashoffset:0;transition:stroke-dashoffset .35s ease-out,stroke .3s}
.lamp-fill{fill:#ffd45c;opacity:0;transition:opacity .25s}
.lamp-halo{position:absolute;left:50%;top:38%;width:340%;aspect-ratio:1;transform:translate(-50%,-50%) scale(.3);border-radius:50%;
  background:radial-gradient(circle,rgba(255,200,70,.5) 0%,rgba(255,170,40,.18) 38%,rgba(255,170,40,0) 68%);opacity:0;
  transition:opacity .4s,transform .5s cubic-bezier(.2,.8,.2,1)}
.lamp.on .lamp-fill{opacity:.95}
.lamp.on .lamp-line,.lamp.on .lamp-detail{stroke:#fff3c4}
.lamp.on svg{filter:drop-shadow(0 0 5px #ffd45c) drop-shadow(0 0 16px rgba(255,190,60,.85))}
.lamp.on .lamp-halo{opacity:1;transform:translate(-50%,-50%) scale(1)}
.lamp-string{left:0;top:0;width:100vw;height:100vh;z-index:9999;overflow:visible;mix-blend-mode:difference;opacity:0}
.lamp-string.on{opacity:1}
.lamp-string path{fill:none;stroke:#fff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:reduce){.lamp,.lamp-line,.lamp-detail,.lamp-fill,.lamp-halo{transition:none}}
/* contact: one column - headline and intro on top, the form card below */
.contact .c-grid{grid-template-columns:minmax(0,1fr);gap:clamp(18px,3.5vh,34px);align-items:start;max-width:720px}
.contact .c-text h2{font-size:clamp(34px,min(6vw,9vh),84px)}
.c-lead{margin-bottom:0;max-width:none}
.c-card{padding:clamp(18px,2.6vw,32px);gap:clamp(10px,1.8vh,18px)}
.c-card .f textarea{min-height:76px}

/* the intro sentence sits on one line, centred over the form card */
.c-lead{text-align:center;max-width:none}
@media (min-width:600px){.c-lead{white-space:nowrap}}

/* contact: everything centred */
.contact .c-grid{margin-inline:auto;width:100%}
.contact .c-text{text-align:center}
.contact .c-text h2{text-align:center}

/* contact: the headline stays on the left, the sentence is centred across the full width of the form card */
.contact .c-text,.contact .c-text h2{text-align:left}
.contact .c-text .c-lead{max-width:none;width:100%;text-align:center;margin-inline:0}

/* logo: ring with two-tone blades. The second half of the blades takes the accent colour. */
.mark .fill path.b{fill:var(--accent)}
.mark .fill path.r{fill:none;stroke:currentColor;stroke-width:2.2}
.mark .draw path.b{stroke:var(--accent)}

/* KTS: white logo at rest (no grey); the hover layer is a dark version of the logo and is revealed by the same sweep as the other pictures */
.peek[data-dark] img:not(.color){filter:none}

/* KTS: the frame itself is dark, so the sweep leaves no light fringe at the edges (the white comes from the picture) */
.peek[data-dark]{background:#0a0e0e}

/* the dark layer is a hair larger than the frame, so no edge pixel of the white picture shows around it */
.peek[data-dark] img.color{inset:-2px;width:calc(100% + 4px);height:calc(100% + 4px);max-width:none}