/* Inter Tight, self-hosted (variable font, weights 400 to 800) */
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/inter-tight-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/inter-tight-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
*{box-sizing:border-box}
:root{--paper:#E4E2DE;--paper2:#EEECE8;--card:#F5F4F1;--ink:#1B1B1B;--ch:#202020;--or:#E4512E;--or2:#F2693F;--rd:#992B1D;--bl:#6E96A7;--blD:#3E6E83;--bl2:#9DBCC9;--mute:#5F5C58;--line:rgba(27,27,27,.14);--gut:max(clamp(20px,5vw,72px),calc((100vw - 1280px)/2))}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Inter Tight",Inter,system-ui,sans-serif;font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.35;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.48 0 0 0 0 0.45 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
h1,h2,h3,h4{font-weight:700;margin:0;letter-spacing:-.045em;line-height:.95}
p{margin:0}
a{color:inherit}
img{display:block;max-width:100%}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:10px 14px;z-index:100}
.skip:focus{left:8px}
#shards{position:absolute;left:0;top:0;width:100%;height:100vh;z-index:0;pointer-events:none}
main,.top,.foot{position:relative;z-index:2}
.n{color:var(--or);font-weight:600;letter-spacing:-.01em}

/* header */
.top{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:22px;padding:16px var(--gut);background:rgba(228,226,222,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.brand svg{width:36px;height:36px;flex:none}
.brand b{font-weight:700;font-size:19px;letter-spacing:-.035em;line-height:1;white-space:nowrap}
.brand small{display:block;font-size:11px;line-height:1.15;color:var(--mute);padding-left:12px;border-left:1px solid var(--ink);margin-left:2px}
.brand .lk{display:flex;align-items:center;gap:12px}
.nav{display:flex;gap:30px;margin-left:auto}
.nav a{text-decoration:none;font-size:15px;font-weight:500;position:relative;padding:6px 0;color:var(--ink)}
.nav a::before{content:"";position:absolute;left:-14px;top:50%;width:7px;height:7px;margin-top:-3.5px;background:var(--or);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);transform:scale(0);transition:transform .3s}
.nav a:hover::before,.nav a[aria-current="page"]::before{transform:scale(1)}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:inherit;font-weight:600;font-size:15px;text-decoration:none;padding:14px 22px;border:1.5px solid var(--ink);color:var(--ink);background:transparent;cursor:pointer;position:relative;overflow:hidden;transition:color .35s}
.btn::before{content:"";position:absolute;inset:0;background:var(--ink);transform:translateY(101%);transition:transform .35s cubic-bezier(.7,0,.3,1);z-index:-1}
.btn:hover{color:var(--paper)}
.btn:hover::before{transform:none}
.btn.or{background:var(--orB);border-color:var(--orB);color:#fff}
.btn.or::before{background:var(--ink)}
.btn::after{content:"→";transition:transform .3s}
.btn:hover::after{transform:translateX(4px)}
.top .btn{padding:11px 18px;font-size:14px;white-space:nowrap}
.mbtn{display:none;width:44px;height:44px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);align-items:center;justify-content:center;cursor:pointer}
@media (max-width:920px){
 .nav{position:absolute;left:12px;right:12px;top:76px;flex-direction:column;gap:0;background:var(--card);padding:6px 22px;box-shadow:0 30px 60px rgba(0,0,0,.18);display:none}
 .nav.open{display:flex}.nav a{padding:15px 0;border-bottom:1px solid var(--line);font-size:18px}.nav a:last-child{border:0}
 .mbtn{display:inline-flex}.top .btn{margin-left:auto}.brand small{display:none}
}
@media (max-width:420px){.top .btn{padding:10px 12px;font-size:13px}.top .btn::after{display:none}}

/* sections */
.sec{position:relative;padding:120px var(--gut)}
.sec.solid{background:var(--paper2)}
.sec.dark{background:var(--ch);color:var(--paper)}
.sec.orng{background:var(--bl);color:#fff}
.wrap{position:relative;max-width:1280px;margin:0 auto}
.kick{display:flex;align-items:baseline;gap:10px;font-size:15px;font-weight:500;margin-bottom:18px;letter-spacing:-.01em}
.kick .n{font-size:15px}
.kick::after{content:"";flex:1;max-width:120px;height:1px;background:currentColor;opacity:.35;align-self:center}
.h2{font-size:clamp(44px,6vw,92px);margin-bottom:22px}
.h2 em{font-style:normal;color:var(--blD)}
.dark .h2 em{color:var(--bl2)}
.orng .h2 em{color:var(--ink)}
.lede{font-size:18px;line-height:1.55;color:#3E3C39;max-width:560px}
.dark .lede{color:#B8B4AE}
.orng .lede{color:#EAF2F5}
.head{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:end;margin-bottom:54px}
.rv{opacity:0;transform:translateY(30px);transition:opacity .9s,transform .9s cubic-bezier(.2,.8,.2,1)}
.rv.shown{opacity:1;transform:none}
.more{display:inline-flex;align-items:center;gap:10px;margin-top:26px;font-weight:600;font-size:16px;text-decoration:none;border-bottom:2px solid var(--bl);padding-bottom:4px}
.more::after{content:"→"}

/* inner page hero */
.phero{position:relative;padding:110px var(--gut) 90px;overflow:hidden;min-height:62vh;display:flex;align-items:flex-end}
.phero h1{font-size:clamp(60px,10vw,168px);letter-spacing:-.06em;line-height:.86}
.phero h1 em{font-style:normal;color:var(--blD)}
.phero .lede{margin-top:28px}
.phero .bign{position:absolute;right:var(--gut);top:90px;font-size:clamp(80px,14vw,220px);font-weight:700;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1.5px var(--ink);opacity:.18;line-height:1}

/* footer */
.foot{background:var(--ch);color:var(--paper);padding:90px var(--gut) 40px;overflow:hidden}


.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px;padding-bottom:30px;border-bottom:1px solid rgba(228,226,222,.2)}
.fgrid h2{font-size:13px;font-weight:600;letter-spacing:-.01em;margin-bottom:14px;color:var(--bl2)}
.fgrid a{display:block;color:#B8B4AE;text-decoration:none;font-size:15px;padding:4px 0}
.fgrid a:hover{color:#fff}
.fgrid p{font-size:15px;line-height:1.55;color:#B8B4AE}
.copy{font-size:12px;color:#7F7B75;margin-top:22px}
@media (max-width:900px){.fgrid{grid-template-columns:1fr 1fr}.sec{padding:84px 20px}.phero{padding:70px 20px 60px;min-height:0}.head{grid-template-columns:1fr;gap:18px}.phero .bign{top:40px}}

/* ===== HOME HERO ===== */
.hero{position:relative;padding:30px var(--gut) 60px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:30px;align-items:center;min-height:calc(100vh - 76px)}
.hcopy{position:relative;z-index:3}
.hcopy h1{font-size:clamp(76px,10.4vw,176px);letter-spacing:-.065em;line-height:.82;margin:14px 0 30px}
.hcopy h1 span{display:block}
.hcopy h1 .o{color:var(--blD)}
.hcopy h1 .ch{display:inline-block;opacity:0;transform:translateY(45%) rotate(3deg);animation:chin .9s cubic-bezier(.2,.9,.2,1) forwards}
@keyframes chin{to{opacity:1;transform:none}}
.role{font-size:20px;line-height:1.45;max-width:500px;color:#3E3C39}
.role b{color:var(--ink);font-weight:700}
.typed{display:flex;align-items:center;gap:10px;margin-top:22px;font-size:16px;font-weight:600;min-height:24px}
.typed::before{content:"";width:10px;height:10px;background:var(--bl);clip-path:polygon(0 0,100% 50%,0 100%)}
.typed i{width:2px;height:18px;background:var(--bl);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.hbtns{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.portrait{position:relative;justify-self:end;width:min(500px,100%);aspect-ratio:1125/1675;transform-style:preserve-3d;transition:transform .3s ease-out;will-change:transform}
.portrait .ph{position:absolute;inset:0;overflow:hidden;background:#EDECEA;z-index:1;box-shadow:0 40px 80px rgba(27,27,27,.18)}
.portrait img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;filter:contrast(1.04) saturate(.95)}
.portrait .cut1{position:absolute;left:-8%;bottom:-4%;width:28%;height:14%;background:var(--or);clip-path:polygon(0 30%,72% 0,100% 62%,40% 100%,8% 86%);z-index:0}
.portrait .cut2{position:absolute;right:-7%;top:10%;width:16%;height:12%;background:var(--ink);clip-path:polygon(18% 0,100% 12%,100% 100%,0 70%);z-index:0}
.portrait .cut3{position:absolute;right:-7%;bottom:20%;width:16%;height:13%;background:var(--bl);clip-path:polygon(0 0,100% 20%,70% 100%);z-index:0}
.logo-on{position:absolute;left:20px;top:20px;z-index:4;display:flex;align-items:center;gap:10px;padding:10px 14px 10px 10px;background:var(--paper2)}
.logo-on svg{width:30px;height:30px}
.logo-on b{font-size:13px;font-weight:700;letter-spacing:-.03em;line-height:1}
.logo-on small{font-size:10.5px;color:var(--mute);line-height:1.15;padding-left:10px;border-left:1px solid var(--ink)}
.stamp{position:absolute;right:-40px;bottom:-36px;z-index:4;width:104px;height:104px;animation:rot 18s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}

/* ticker band */
.band{position:relative;z-index:2;background:var(--bl);color:var(--paper);overflow:hidden;padding:18px 0 14px;transform:rotate(-1.5deg);margin:0 -20px;box-shadow:0 20px 40px rgba(62,110,131,.28)}
.band .row{display:flex;gap:0;width:max-content;font-weight:700;font-size:clamp(46px,7vw,110px);letter-spacing:-.06em;line-height:.95;white-space:nowrap;animation:tick 120s linear infinite}
.band .row.b{animation-direction:reverse;animation-duration:144s;color:var(--ink)}
.band .row span{padding-right:.35em}
.band sup{font-size:.25em;vertical-align:.9em;font-weight:500}
@keyframes tick{to{transform:translateX(-50%)}}

/* who */
.who{display:grid;grid-template-columns:1.15fr 1fr;gap:70px;align-items:start}
.who .big{font-size:clamp(26px,2.6vw,36px);line-height:1.2;letter-spacing:-.03em;font-weight:500}
.who .big em{font-style:normal;color:var(--blD)}
.who .txt p+p{margin-top:18px}
.who .txt p:not(.big){font-size:17px;line-height:1.65;color:#3E3C39}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fact{position:relative;background:var(--card);padding:24px 22px 22px;overflow:hidden}
.fact b{display:block;font-size:clamp(48px,4.6vw,72px);font-weight:700;letter-spacing:-.06em;line-height:.9}
.fact span{display:block;font-size:14.5px;line-height:1.45;color:#3E3C39;margin-top:12px}
.fact::after{content:"";position:absolute;right:-30px;top:-30px;width:80px;height:80px;background:var(--bl);clip-path:polygon(0 0,100% 0,100% 100%);transform:scale(.0);transform-origin:100% 0;transition:transform .5s cubic-bezier(.2,.9,.2,1)}
.fact:hover::after{transform:scale(1)}
.fact:nth-child(2) b{color:var(--blD)}.fact:nth-child(3) b{color:var(--or)}
.fact.dk{background:var(--ink);color:var(--paper)}.fact.dk span{color:#B8B4AE}

/* tiles */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tile{position:relative;display:flex;flex-direction:column;text-decoration:none;color:inherit;background:var(--card);padding:24px;transition:transform .4s cubic-bezier(.2,.9,.2,1);overflow:hidden}
.dark .tile{background:#2A2A2A;color:var(--paper)}
.tile:hover{transform:translateY(-6px)}
.tile .face{position:relative;height:170px;overflow:hidden;margin-bottom:20px}
.tile .face>div{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.tile .front{background:var(--paper)}
.dark .tile .front{background:#E9E6E1}
.tile .inside{background:var(--ink);clip-path:polygon(0 100%,0 100%,0 100%);transition:clip-path .7s cubic-bezier(.7,0,.3,1)}
.tile:hover .inside,.tile:focus-visible .inside,.tile.peek .inside{clip-path:polygon(0 -60%,200% 100%,0 100%)}
.tile .tag{font-size:13px;font-weight:500;color:var(--blD);margin-bottom:10px}
.tile h3{font-size:32px;margin-bottom:12px}
.tile p{font-size:15px;line-height:1.55;color:#3E3C39}
.dark .tile p{color:#B8B4AE}
.tile .go{margin-top:auto;padding-top:22px;font-weight:600;font-size:15px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line)}
.dark .tile .go{border-color:rgba(228,226,222,.15)}
.tile .go::after{content:"→";transition:transform .3s}
.tile:hover .go::after{transform:translateX(6px)}
.tile .num{position:absolute;right:20px;top:18px;font-weight:700;font-size:14px;color:var(--blD);z-index:2}
.flow{stroke-dasharray:6 10;animation:fl 1s linear infinite}
@keyframes fl{to{stroke-dashoffset:-32}}
.pulse{animation:pu 1.6s ease-in-out infinite}
@keyframes pu{50%{opacity:.4}}

/* projects */
.st{padding:5px 10px;font-size:11.5px;font-weight:600;letter-spacing:.02em}
.st.p{background:var(--bl);color:#fff}.st.o{background:var(--paper);color:var(--ink)}.st.d{background:var(--or);color:#fff}.st.u{background:var(--ink);color:var(--paper)}
.pj{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.pcard{position:relative;background:var(--card);padding:30px;overflow:hidden;display:flex;flex-direction:column}
.pcard .ptop{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:500;color:var(--mute)}
.pcard h3{font-size:clamp(28px,2.6vw,38px);margin:20px 0 12px}
.pcard p{font-size:16px;line-height:1.6;color:#3E3C39}
.pcard ul{margin:16px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.pcard li{font-size:15px;line-height:1.5;padding-left:20px;position:relative;color:#3E3C39}
.pcard li::before{content:"";position:absolute;left:0;top:7px;width:9px;height:9px;background:var(--bl);clip-path:polygon(0 0,100% 50%,0 100%)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:22px}
.chips span{font-size:12px;font-weight:600;padding:6px 10px;border:1.5px solid var(--ink)}
.meter{height:6px;background:var(--paper);margin-top:18px;overflow:hidden}
.meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--bl),var(--blD));transition:width 1.6s cubic-bezier(.2,.8,.2,1)}
.shown .meter i{width:var(--w)}
.pcard.feat{grid-column:1/-1;background:var(--ink);color:var(--paper);padding:40px}
.pcard.feat p,.pcard.feat li{color:#B8B4AE}
.pcard.feat .ptop{color:#8C8882}
.pcard.feat .chips span{border-color:var(--paper)}
.pcard.feat .meter{background:#333}
.pcard.feat::after{content:"";position:absolute;right:-60px;bottom:-60px;width:300px;height:300px;background:var(--bl);clip-path:polygon(40% 0,100% 30%,100% 100%,0 80%);opacity:.95}
.pcard.feat>*{position:relative;z-index:1}
.pcard.feat .chips,.pcard.feat ul,.pcard.feat p{max-width:72%}

/* timeline */
.tl{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.tl::before{content:"";position:absolute;left:0;right:0;top:15px;height:2px;background:var(--bl)}
.tl .step{position:relative;padding-top:52px}
.tl .step::before{content:"";position:absolute;left:0;top:0;width:32px;height:32px;background:var(--bl);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.tl .step:last-child::before{background:var(--or)}
.tl .step span{font-size:14px;font-weight:600;color:var(--bl2)}
.tl .step h3{font-size:28px;margin:10px 0 10px}
.tl .step p{font-size:15px;line-height:1.55;color:#B8B4AE}
.skills{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.skill{background:var(--card);padding:26px;position:relative}
.skill h3{font-size:26px;margin-bottom:16px}
.skill ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}
.skill li{font-size:15px;color:#3E3C39;display:flex;gap:10px;line-height:1.35}
.skill li::before{content:"";flex:none;width:8px;height:8px;margin-top:5px;background:var(--bl);clip-path:polygon(0 0,100% 50%,0 100%)}
.principles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.pr{border-top:3px solid var(--ink);padding-top:18px}
.pr b{font-size:15px;color:var(--blD)}
.pr h3{font-size:28px;margin:10px 0 10px}
.pr p{font-size:15.5px;line-height:1.55;color:#3E3C39}

/* process */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.stp{position:relative;background:#2A2A2A;padding:26px;transition:background .5s,color .5s;overflow:hidden}
.stp.on{background:var(--bl);color:#fff}
.stp span{font-size:14px;font-weight:600;color:var(--bl2)}
.stp.on span{color:var(--ink)}
.stp h3{font-size:28px;margin:16px 0 10px;color:var(--paper)}
.stp p{font-size:15px;line-height:1.55;color:#B8B4AE}
.stp.on p{color:#EAF2F5}
.stp b{display:inline-block;margin-top:16px;font-size:13px;font-weight:600;color:var(--paper)}
.svc ul{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-direction:column;gap:8px}
.svc li{font-size:15px;padding-left:20px;position:relative}
.svc li::before{content:"";position:absolute;left:0;top:6px;width:9px;height:9px;background:var(--bl);clip-path:polygon(0 0,100% 50%,0 100%)}
.price{margin-top:20px;padding-top:16px;font-size:14px;font-weight:600;border-top:1px solid var(--line)}

/* contact */
.ct{display:grid;grid-template-columns:1fr 1.1fr;gap:60px;align-items:start}
.ways{display:flex;flex-direction:column;gap:10px;margin-top:28px}
.way{display:flex;align-items:center;gap:16px;background:var(--card);padding:18px 20px;text-decoration:none;color:inherit;transition:transform .3s}
.way:hover{transform:translateX(6px)}
.way i{width:44px;height:44px;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:700;font-size:14px;flex:none}
.way:first-child i{background:var(--blD)}
.way b{display:block;font-weight:700;font-size:18px;letter-spacing:-.02em}
.way span{font-size:14px;color:var(--mute)}
.form{position:relative;background:var(--ink);color:var(--paper);padding:32px;overflow:hidden}
.form::before{content:"";position:absolute;right:-50px;top:-50px;width:180px;height:180px;background:var(--bl);clip-path:polygon(30% 0,100% 0,100% 100%,0 55%)}
.form>*{position:relative}
.form h3{font-size:34px;margin-bottom:8px}
.form .sub{font-size:14px;color:#B8B4AE;margin-bottom:10px}
.form .q{font-size:14px;font-weight:600;color:var(--bl2);margin:24px 0 10px}
.form label{display:block;font-size:13.5px;color:#B8B4AE;margin-top:8px}
.form input,.form textarea{display:block;width:100%;margin-top:6px;font:inherit;font-size:16px;padding:12px 2px;background:transparent;border:0;border-bottom:1.5px solid rgba(228,226,222,.3);color:#fff;outline:none;resize:vertical}
.form input:focus,.form textarea:focus{border-color:var(--bl2)}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg button{font:inherit;font-size:14px;font-weight:500;padding:10px 14px;border:1.5px solid rgba(228,226,222,.35);background:transparent;color:var(--paper);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--bl);border-color:var(--bl)}
.form .send{margin-top:24px;color:#fff}
.form #msg{font-size:14px;color:var(--or2);margin-top:14px;min-height:20px}
.ph{color:#99958E}

@media (max-width:1000px){
 .hero{grid-template-columns:minmax(0,1fr);gap:30px;min-height:0;padding-top:20px}
 .pwrap{order:-1;display:flex;justify-content:center}
 .portrait{justify-self:center;width:min(420px,88%)}
 .who,.ct{grid-template-columns:1fr;gap:36px}
 .tiles,.pj{grid-template-columns:1fr}
 .tl,.skills,.principles,.steps{grid-template-columns:1fr 1fr}
 .tl::before{display:none}
 .pcard.feat .chips,.pcard.feat ul,.pcard.feat p{max-width:none}
 .pcard.feat::after{width:140px;height:140px;right:-40px;bottom:-40px}
}
@media (max-width:560px){.tl,.skills,.principles,.steps,.g2{grid-template-columns:1fr}.hcopy h1{font-size:76px}.stamp{width:80px;height:80px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}.hcopy h1 .ch{opacity:1;transform:none}}

.dark .tile .tag{color:var(--bl2)}
.chips span{border-color:var(--blD);color:var(--blD)}
.pcard.feat .chips span{color:var(--bl2);border-color:var(--bl2)}

@media (max-width:560px){.stamp{right:-16px;bottom:-22px}.brand b{font-size:17px}}

/* ===== HOLOGRAMS (service visuals) ===== */
.tile .face{height:230px;border-radius:0}
.holo{position:absolute;inset:0;overflow:hidden;background:radial-gradient(ellipse 70% 60% at 50% 100%,rgba(110,150,167,.42),transparent 70%),radial-gradient(ellipse at 50% 0,#262626,#161616 70%);perspective:700px;--h:#A9DCEB;--hs:rgba(169,220,235,.55)}
.holo::before{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(169,220,235,.06) 0 1px,transparent 1px 3px);animation:hscan 6s linear infinite}
.holo::after{content:"";position:absolute;left:0;right:0;height:40%;top:-40%;z-index:5;pointer-events:none;background:linear-gradient(transparent,rgba(169,220,235,.12),transparent);animation:hsweep 4.5s ease-in-out infinite}
@keyframes hscan{to{background-position:0 60px}}
@keyframes hsweep{0%{top:-40%}60%,100%{top:110%}}
.holo .grid{position:absolute;left:-20%;right:-20%;bottom:-10%;height:55%;background-image:linear-gradient(var(--hs) 1px,transparent 1px),linear-gradient(90deg,var(--hs) 1px,transparent 1px);background-size:26px 26px;transform:perspective(300px) rotateX(70deg);transform-origin:50% 100%;opacity:.18;-webkit-mask:linear-gradient(transparent,#000 60%);mask:linear-gradient(transparent,#000 60%);animation:gmove 3s linear infinite}
@keyframes gmove{to{background-position:0 26px}}
.holo .base{position:absolute;left:50%;bottom:16px;width:120px;height:26px;margin-left:-60px;border-radius:50%;border:1.5px solid var(--h);box-shadow:0 0 18px var(--h),inset 0 0 14px var(--hs);z-index:2}
.holo .base::before{content:"";position:absolute;inset:5px 22px;border-radius:50%;border:1px solid var(--h);animation:bring 2s ease-out infinite}
@keyframes bring{0%{transform:scale(.4);opacity:1}100%{transform:scale(1.6);opacity:0}}
.holo .beam{position:absolute;left:50%;bottom:28px;width:230px;height:190px;margin-left:-115px;background:linear-gradient(0deg,rgba(169,220,235,.32),rgba(169,220,235,0));clip-path:polygon(40% 100%,60% 100%,100% 0,0 0);z-index:1;animation:flick 3.2s steps(1) infinite}
@keyframes flick{0%,100%{opacity:1}47%{opacity:.75}48%{opacity:1}72%{opacity:.85}73%{opacity:1}}
.holo .stage{position:absolute;left:50%;top:44%;width:0;height:0;transform-style:preserve-3d;z-index:3}
.holo .obj{position:absolute;transform-style:preserve-3d}
.hl{border:1.5px solid var(--h);box-shadow:0 0 12px rgba(169,220,235,.45),inset 0 0 18px rgba(169,220,235,.12);background:rgba(169,220,235,.06)}
.hb{position:absolute;background:var(--h);opacity:.8;border-radius:2px;box-shadow:0 0 8px var(--h)}

/* websites: exploded layers */
.hweb .obj{left:-80px;top:-56px;width:160px;height:104px;animation:wsway 7s ease-in-out infinite}
@keyframes wsway{0%,100%{transform:rotateX(52deg) rotateZ(-30deg)}50%{transform:rotateX(52deg) rotateZ(-14deg)}}
.hweb .pl{position:absolute;inset:0;transition:transform .7s cubic-bezier(.2,.9,.2,1)}
.hweb .pl:nth-child(1){transform:translateZ(0)}
.hweb .pl:nth-child(2){transform:translateZ(18px)}
.hweb .pl:nth-child(3){transform:translateZ(36px)}
.hweb .pl:nth-child(4){transform:translateZ(54px);border-color:var(--or);box-shadow:0 0 14px rgba(228,81,46,.6)}
.tile:hover .hweb .pl:nth-child(2),.tile.peek .hweb .pl:nth-child(2){transform:translateZ(34px)}
.tile:hover .hweb .pl:nth-child(3),.tile.peek .hweb .pl:nth-child(3){transform:translateZ(68px)}
.tile:hover .hweb .pl:nth-child(4),.tile.peek .hweb .pl:nth-child(4){transform:translateZ(102px)}
.hweb .pl .hb{animation:bpulse 2.4s ease-in-out infinite}
@keyframes bpulse{50%{opacity:.35}}
.hweb .lbl{position:absolute;right:14px;top:14px;font-size:11px;font-weight:600;color:var(--h);z-index:6;letter-spacing:.02em}
.hweb .lbl b{display:block;color:#fff;font-size:20px;letter-spacing:-.03em}
.hweb .lbl i{font-style:normal;color:var(--or2)}

/* apps: phone + tablet rotating */
.happ .obj{transform-style:preserve-3d;animation:aspin 9s linear infinite}
@keyframes aspin{from{transform:rotateX(-8deg) rotateY(0)}to{transform:rotateX(-8deg) rotateY(360deg)}}
.happ .tab{position:absolute;left:-74px;top:-50px;width:118px;height:84px;border-radius:6px;transform:translateZ(-26px)}
.happ .phn{position:absolute;left:4px;top:-62px;width:56px;height:104px;border-radius:10px;transform:translateZ(30px)}
.happ .tile2{position:absolute;left:8px;right:8px;height:14px;border-radius:4px;border:1px solid var(--h);opacity:.35;animation:tlit 3s infinite}
.happ .tile2:nth-child(1){top:12px}.happ .tile2:nth-child(2){top:32px;animation-delay:.6s}.happ .tile2:nth-child(3){top:52px;animation-delay:1.2s}.happ .tile2:nth-child(4){top:72px;animation-delay:1.8s;border-color:var(--or2)}
@keyframes tlit{0%,30%{opacity:.35;background:transparent}15%{opacity:1;background:rgba(169,220,235,.3)}}
.happ .bars{position:absolute;left:12px;right:12px;bottom:12px;height:40px;display:flex;align-items:flex-end;gap:6px}
.happ .bars i{flex:1;background:var(--h);box-shadow:0 0 8px var(--h);opacity:.8;animation:bar 2.4s ease-in-out infinite}
.happ .bars i:nth-child(1){height:40%}.happ .bars i:nth-child(2){height:70%;animation-delay:.3s}.happ .bars i:nth-child(3){height:55%;animation-delay:.6s}.happ .bars i:nth-child(4){height:90%;animation-delay:.9s;background:var(--or2);box-shadow:0 0 8px var(--or2)}
@keyframes bar{50%{transform:scaleY(.6)}}
.happ .bars i{transform-origin:bottom}
.notif{position:absolute;left:50%;bottom:52px;z-index:6;white-space:nowrap;font-size:11.5px;font-weight:600;color:#161616;background:var(--h);padding:6px 10px;box-shadow:0 0 16px rgba(169,220,235,.6);opacity:0;transform:translate(-50%,0);animation:nrise 4.5s ease-out infinite}
.notif.n2{animation-delay:2.25s;background:var(--or2);color:#fff;box-shadow:0 0 16px rgba(242,105,63,.6)}
@keyframes nrise{0%{opacity:0;transform:translate(-50%,10px)}12%{opacity:1;transform:translate(-50%,0)}55%{opacity:1}75%,100%{opacity:0;transform:translate(-50%,-120px)}}

/* ai: orb with orbiting messages */
.hai .obj{animation:none}
.hai .ring{position:absolute;left:-58px;top:-58px;width:116px;height:116px;border-radius:50%;border:1.5px solid var(--h);box-shadow:0 0 12px rgba(169,220,235,.4)}
.hai .r1{animation:r1 6s linear infinite}.hai .r2{animation:r2 8s linear infinite}.hai .r3{animation:r3 10s linear infinite;border-color:rgba(169,220,235,.5)}
@keyframes r1{from{transform:rotateX(70deg) rotateZ(0)}to{transform:rotateX(70deg) rotateZ(360deg)}}
@keyframes r2{from{transform:rotateY(70deg) rotateX(20deg) rotateZ(0)}to{transform:rotateY(70deg) rotateX(20deg) rotateZ(360deg)}}
@keyframes r3{from{transform:rotateX(20deg) rotateY(40deg) rotateZ(0)}to{transform:rotateX(20deg) rotateY(40deg) rotateZ(-360deg)}}
.hai .core{position:absolute;left:-16px;top:-16px;width:32px;height:32px;border-radius:50%;background:radial-gradient(circle,#fff,var(--or2) 45%,rgba(242,105,63,0) 72%);animation:core 1.8s ease-in-out infinite}
@keyframes core{50%{transform:scale(1.35)}}
.hai .orbit{position:absolute;left:0;top:0;transform-style:preserve-3d;animation:orb 9s linear infinite}
.hai .orbit.o2{animation-delay:-3s}.hai .orbit.o3{animation-delay:-6s}
@keyframes orb{from{transform:rotateY(0) translateZ(96px) rotateY(0)}to{transform:rotateY(360deg) translateZ(96px) rotateY(-360deg)}}
.hai .msg{position:absolute;left:-46px;top:-12px;width:92px;text-align:center;font-size:10.5px;font-weight:600;color:var(--h);border:1px solid var(--h);background:rgba(22,22,22,.7);padding:5px 4px;box-shadow:0 0 10px rgba(169,220,235,.4)}
.hai .o2 .msg{color:var(--or2);border-color:var(--or2);box-shadow:0 0 10px rgba(242,105,63,.4)}
.hai .wave{position:absolute;left:14px;bottom:14px;display:flex;gap:3px;align-items:center;height:26px;z-index:6}
.hai .wave i{width:3px;height:100%;background:var(--h);border-radius:2px;animation:wv 1s ease-in-out infinite;transform-origin:center}
.hai .wave i:nth-child(2){animation-delay:.1s}.hai .wave i:nth-child(3){animation-delay:.2s}.hai .wave i:nth-child(4){animation-delay:.3s}.hai .wave i:nth-child(5){animation-delay:.4s}.hai .wave i:nth-child(6){animation-delay:.5s}
@keyframes wv{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
.holo .cap{position:absolute;left:14px;top:12px;z-index:6;font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--h);display:flex;align-items:center;gap:7px}
.holo .cap::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--or2);box-shadow:0 0 8px var(--or2);animation:blink 1.4s steps(1) infinite}
@media (prefers-reduced-motion:reduce){.holo *{animation:none!important}}
.hweb .stage{top:58%}
/* stop sideways scrolling on phones */
html,body{overflow-x:hidden;max-width:100%}
@supports (overflow:clip){html,body{overflow-x:clip}}
main{overflow-x:clip;max-width:100vw}
.hero,.band,.phero,.sec,.foot{max-width:100vw}
.hero{overflow-x:clip}
/* section shards */
.shardbox{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.shardbox i{position:absolute;display:block;will-change:transform}
.sec>.wrap,.phero>.wrap,.foot>*{position:relative;z-index:1}
.sec,.phero,.foot{isolation:isolate}

/* header refinements */
.brand b .dot{color:var(--blD)}
.top .btn{border-color:var(--blD);color:var(--blD)}
.top .btn::before{background:var(--blD)}
.top .btn:hover{color:#fff}
.mbtn{display:none;align-items:center;gap:10px;width:auto;height:44px;padding:0 14px 0 12px;border:0;background:var(--ink);color:var(--paper);font:inherit;font-weight:600;font-size:14px;cursor:pointer;clip-path:polygon(0 0,100% 0,100% 70%,88% 100%,0 100%)}
.mbtn .ml{position:relative;width:22px;height:12px}
.mbtn .ml i{position:absolute;left:0;height:2px;background:var(--paper);transition:transform .35s cubic-bezier(.7,0,.3,1),width .35s,top .35s,background .35s}
.mbtn .ml i:nth-child(1){top:0;width:22px}
.mbtn .ml i:nth-child(2){top:10px;width:14px;background:var(--or)}
.mbtn[aria-expanded="true"]{background:var(--blD)}
.mbtn[aria-expanded="true"] .ml i:nth-child(1){top:5px;transform:rotate(45deg)}
.mbtn[aria-expanded="true"] .ml i:nth-child(2){top:5px;width:22px;transform:rotate(-45deg);background:var(--paper)}
@media (max-width:920px){.mbtn{display:inline-flex}}
@media (max-width:420px){.mbtn .mt{display:none}.mbtn{padding:0 12px}}
.kick .n{display:none}

/* see-through cards so the pieces show behind the words */
.tile{background:rgba(245,244,241,.55)}
.dark .tile{background:rgba(38,38,38,.5)}
.pcard,.fact,.skill,.way{background:rgba(245,244,241,.55)}
.fact.dk{background:rgba(27,27,27,.88)}
.pcard.feat{background:rgba(27,27,27,.86)}
.stp{background:rgba(42,42,42,.55)}
.tile,.pcard,.fact,.skill,.way{box-shadow:inset 0 0 0 1px rgba(27,27,27,.08)}
.dark .tile{box-shadow:inset 0 0 0 1px rgba(228,226,222,.1)}
.mbtn{padding:0 13px;width:50px;justify-content:center}

@media (max-width:1000px){.portrait{width:min(420px,78%,calc(44svh / 1.49))!important}.hero{gap:18px}}
@media (max-width:560px){.hcopy h1{font-size:68px;margin:10px 0 18px}}

/* ===== accessibility pass (contrast, focus, sticky offset) ===== */
:root{--blD:#335C6E;--orB:#C23E1E}
html{scroll-padding-top:90px}
.btn.or{background:var(--orB);border-color:var(--orB)}
.st.p{background:var(--blD)}
.st.d{background:var(--orB)}
.sec.orng{color:var(--ink)}
.orng .lede{color:#13232B}
.orng .kick{color:var(--ink)}
.orng .h2 em{color:#fff}
.orng .btn:not(.or){border-color:var(--ink);color:var(--ink)}
.pcard.feat .ptop{color:#ADA9A3}
.copy{color:#A7A39C}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,.tile:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--blD);outline-offset:3px}
.dark a:focus-visible,.dark button:focus-visible,.dark .tile:focus-visible,.foot a:focus-visible,.form button:focus-visible,.form input:focus-visible,.form textarea:focus-visible{outline-color:#9DBCC9}

/* ===== HEADER v2: floating island ===== */
.top{position:sticky;top:12px;margin:12px max(12px,calc(var(--gut) - 24px)) 0;padding:10px 12px 10px 18px;gap:18px;background:rgba(245,244,241,.74);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);border:1px solid rgba(27,27,27,.08);box-shadow:0 10px 30px rgba(27,27,27,.08);clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%);transition:transform .45s cubic-bezier(.7,0,.3,1),padding .3s,box-shadow .3s;z-index:60}
.top.hide{transform:translateY(calc(-100% - 20px))}
.top.compact{padding-top:7px;padding-bottom:7px;box-shadow:0 14px 34px rgba(27,27,27,.12)}
.top .brand svg{transition:transform .5s cubic-bezier(.2,.9,.2,1)}
.top .brand:hover svg{transform:rotate(-8deg) scale(1.08)}
.prog{position:absolute;left:0;bottom:0;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--or),var(--bl))}
.nav{position:relative;gap:6px}
.nav a{padding:9px 14px;border-radius:0;z-index:1;transition:color .3s}
.nav a::before{display:none}
.nav .ind{position:absolute;top:50%;height:36px;margin-top:-18px;left:0;width:0;background:var(--ink);z-index:0;transition:left .45s cubic-bezier(.7,0,.3,1),width .45s cubic-bezier(.7,0,.3,1),opacity .3s;clip-path:polygon(0 0,100% 0,100% 70%,88% 100%,0 100%);opacity:0}
.nav a.on{color:var(--paper)}
.cta{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:600;font-size:14px;color:#fff;background:var(--blD);padding:11px 14px 11px 18px;white-space:nowrap;transition:background .3s}
.cta i{width:18px;height:18px;background:#fff;clip-path:polygon(0 40%,60% 40%,60% 15%,100% 50%,60% 85%,60% 60%,0 60%);transition:transform .3s}
.cta:hover{background:var(--ink)}
.cta:hover i{transform:translateX(4px)}
.top .btn{display:none}
@media (max-width:920px){
 .top{padding:8px 8px 8px 14px}
 .top .nav{display:none!important}
 .cta{display:none}
 .mbtn{margin-left:auto;height:44px;width:50px}
}
/* mobile full-screen menu */
.mnav{position:fixed;inset:0;z-index:55;background:var(--paper);display:flex;flex-direction:column;justify-content:space-between;padding:110px 24px 30px;clip-path:circle(0 at calc(100% - 46px) 46px);visibility:hidden;transition:clip-path .7s cubic-bezier(.7,0,.3,1),visibility 0s .7s;overflow:hidden}
.mnav.open{clip-path:circle(150% at calc(100% - 46px) 46px);visibility:visible;transition:clip-path .7s cubic-bezier(.7,0,.3,1),visibility 0s}
.mnav nav{display:flex;flex-direction:column;gap:4px;position:relative;z-index:1}
.mnav nav a{display:block;text-decoration:none;color:var(--ink);font-weight:700;font-size:clamp(40px,11vw,64px);letter-spacing:-.05em;line-height:1.05;overflow:hidden}
.mnav nav a span{display:inline-block;transform:translateY(110%);transition:transform .6s cubic-bezier(.2,.9,.2,1) var(--d),color .3s}
.mnav.open nav a span{transform:none}
.mnav nav a[aria-current="page"] span{color:var(--blD)}
.mnav nav a[aria-current="page"] span::after{content:".";color:var(--or)}
.mnav nav a:active span{color:var(--or)}
.mfoot{position:relative;z-index:1;display:flex;flex-direction:column;gap:18px;opacity:0;transform:translateY(20px);transition:opacity .5s .45s,transform .5s .45s}
.mnav.open .mfoot{opacity:1;transform:none}
.mfoot .btn{justify-content:center}
.mlinks{display:flex;gap:22px}
.mlinks a{font-weight:600;font-size:15px;text-decoration:none;border-bottom:2px solid var(--bl);padding:6px 0}
.mshards i{position:absolute;display:block;transition:transform 1s cubic-bezier(.2,.9,.2,1) .2s;transform:translate(60px,-60px) rotate(30deg) scale(.4)}
.mnav.open .mshards i{transform:none}
.mshards i:nth-child(1){right:-70px;top:58%;width:170px;height:130px;background:var(--or);clip-path:polygon(30% 0,100% 20%,80% 100%,0 70%)}
.mshards i:nth-child(2){right:24px;top:16%;width:70px;height:80px;background:var(--bl);clip-path:polygon(0 10%,100% 0,60% 100%)}
.mshards i:nth-child(3){left:-30px;bottom:20%;width:120px;height:90px;background:var(--ink);clip-path:polygon(0 0,100% 30%,70% 100%,10% 80%)}
.mshards i:nth-child(4){right:-20px;bottom:6%;width:90px;height:80px;background:#9DBCC9;clip-path:polygon(20% 0,100% 40%,0 100%)}
.mshards i:nth-child(5){left:40%;top:8%;width:60px;height:50px;background:var(--or2);clip-path:polygon(0 30%,100% 0,70% 100%)}
.mshards{position:absolute;inset:0;opacity:.85}
body.menu-open{overflow:hidden}
@media (min-width:1041px){.mnav{display:none}}
.mlinks a{min-width:44px;text-align:center}

.tagl{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin:0 0 12px;display:flex;align-items:center;gap:10px}
.tagl::before{content:"";width:9px;height:9px;flex:none;background:var(--or);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
@media (max-width:560px){.tagl{font-size:11.5px;letter-spacing:.08em}}

.mcta{display:none}
@media (max-width:920px){
 .mcta{display:inline-flex;align-items:center;justify-content:center;margin-left:auto;width:44px;height:44px;background:var(--blD);color:#fff;clip-path:polygon(0 0,100% 0,100% 70%,82% 100%,0 100%);transition:background .3s}
 .mcta svg{width:20px;height:20px}
 .mcta:active{background:var(--ink)}
 .mbtn{margin-left:8px}
 .portrait{width:min(420px,74%,calc(41svh / 1.49))!important}
 .hero .kick{margin-bottom:10px}
 .hcopy h1{margin:8px 0 16px}
 .tagl{margin-bottom:8px}
 .typed{margin-top:12px}
}

/* mobile header: flush, solid, nothing peeking through */
@media (max-width:920px){
 .top{top:0;margin:0;padding:10px 12px 10px 16px;background:rgba(238,236,232,.97);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);clip-path:none;border:0;border-bottom:1px solid rgba(27,27,27,.08);box-shadow:0 6px 20px rgba(27,27,27,.06)}
 .top.compact{padding-top:8px;padding-bottom:8px}
 .top .brand svg{width:30px;height:30px}
 .mcta,.mbtn{height:42px;width:46px}
 html{scroll-padding-top:76px}
}


/* menu items stay on one line; between 921px and 1040px the menu folds into the menu button */
.nav a{white-space:nowrap}
@media (min-width:921px) and (max-width:1040px){
 .top .nav{display:none!important}
 .cta{display:none}
 .mcta{display:inline-flex;align-items:center;justify-content:center;margin-left:auto;width:44px;height:44px;background:var(--blD);color:#fff;clip-path:polygon(0 0,100% 0,100% 70%,82% 100%,0 100%);transition:background .3s}
 .mcta svg{width:20px;height:20px}
 .mbtn{display:inline-flex;margin-left:8px;height:44px;width:50px}
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Desktop hero: smaller name and portrait (phones and tablets unchanged) */
@media (min-width:1001px){
 .hcopy h1{font-size:clamp(76px,8.4vw,136px)}
 .portrait{width:min(380px,100%,calc((100svh - 190px) / 1.49))}
}
/* Desktop header: full screen width, content lined up with the page edges (11 Nov 2026) */
@media (min-width:921px){
 .top{top:0;margin:0;padding:12px var(--gut);clip-path:none;border:0;border-bottom:1px solid rgba(27,27,27,.08);box-shadow:none;background:rgba(238,236,232,.86)}
 .top.compact{padding-top:8px;padding-bottom:8px;box-shadow:0 8px 24px rgba(27,27,27,.08)}
}
/* Home closing section: one path for clients, one for recruiters */
.paths{display:grid;gap:34px}
.path h3{font-size:clamp(24px,2.2vw,30px);letter-spacing:-.03em;line-height:1.1;margin-bottom:10px}
.path .lede{margin:0 0 18px}
.path+.path{padding-top:30px;border-top:1px solid rgba(27,27,27,.18)}
/* ===== 11 Nov 2026: calmer type scale and tighter layout on computers (phones unchanged) ===== */
@media (min-width:921px){
 /* logo in the top-left corner, button in the top-right corner */
 .top{padding-left:clamp(16px,2.2vw,36px);padding-right:clamp(16px,2.2vw,36px)}
}
@media (min-width:1001px){
 :root{--gut:max(clamp(20px,4vw,64px),calc((100vw - 1440px) / 2))}
 .wrap{max-width:1440px}
 /* display text: about 35-40% smaller at 1440px */
 .phero h1{font-size:clamp(56px,6.2vw,104px)}
 .phero .bign{font-size:clamp(70px,9vw,150px)}
 .phero{min-height:0;padding-top:90px;padding-bottom:70px}
 .h2{font-size:clamp(36px,3.9vw,60px)}
 
 /* band text is 25% smaller than first designed; the padding grows by the same amount, so the band keeps its height */
 .band .row{font-size:clamp(21px,2.5vw,39px)}
 .band{--bx:calc(.95 * (clamp(24px,2.8vw,44px) - clamp(21px,2.5vw,39px)));padding:calc(12px + var(--bx)) 0 calc(9px + var(--bx))}
 .fact b{font-size:clamp(40px,3.4vw,54px)}
 .pcard h3{font-size:clamp(24px,1.9vw,30px)}
 .tile h3{font-size:27px}
 .tl .step h3,.pr h3,.stp h3{font-size:24px}
 .skill h3{font-size:22px}
 .form h3{font-size:28px}
 .sec{padding-top:96px;padding-bottom:96px}
 /* home hero: no longer forced to fill the whole screen height */
 .hero{min-height:0;padding-top:48px;padding-bottom:72px;gap:clamp(30px,4vw,80px)}
}
/* text band: small orange diamonds between phrases */
.band .row span.sep{color:var(--or);font-size:.38em;padding:0 .9em 0 .55em;align-self:center}
/* Home: hero fills the first screen so the text band sits at the bottom of it (computers only) */
@media (min-width:1001px){
 .hero{min-height:calc(100svh - 66px - (1.9 * clamp(24px,2.8vw,44px)) - 14px - 1vw)}
}
@media (min-width:1001px){
 .portrait{width:min(350px,100%,calc((100svh - 290px) / 1.49));margin-right:clamp(24px,3.6vw,66px)}
 .hcopy{margin-left:clamp(16px,2.2vw,40px)}
 .hero{padding-bottom:44px}
}
/* Text band: reach past both screen edges, tilt up to the right, flatter (1°) (11 Nov 2026) */
.band{width:calc(100vw + 120px);max-width:none;margin:0 0 0 -60px;transform:rotate(-1deg)}
/* keep the wide band from making the page wider than the screen */
main{overflow-x:hidden}
@supports (overflow:clip){main{overflow-x:clip}}
/* Logo: gold V on a dark tile with the site's cut corner (matches the favicon) */
.brand svg,.top .brand svg{box-sizing:border-box;width:40px;height:40px;padding:6px 6px 4px;background:var(--ch);clip-path:polygon(0 0,100% 0,100% 76%,76% 100%,0 100%)}
@media (max-width:920px){.top .brand svg{width:34px;height:34px;padding:5px 5px 3px}}

/* About skills intro: may run to the right edge of the cards, so it stays on one line on wider screens */
.lede.wide{max-width:none}

/* Footer: call to action first, logo next to the copyright line */
.fgrid a.fcta{display:inline-flex;align-items:center;gap:10px;margin-top:4px;padding:13px 28px 13px 22px;background:var(--orB);color:#fff;font-size:19px;font-weight:700;letter-spacing:-.01em;clip-path:polygon(0 0,100% 0,100% 70%,88% 100%,0 100%);transition:filter .3s}
.fgrid a.fcta span{transition:transform .3s}
.fgrid a.fcta:hover{color:#fff;filter:brightness(.88)}
.fgrid a.fcta:hover span{transform:translateX(4px)}
.fbot{display:flex;align-items:center;gap:12px;margin-top:22px}
.fbot .copy{margin-top:0}
.fmark{display:inline-flex;line-height:0}
.fmark svg{width:28px;height:28px}
.foot{padding-top:64px}

/* Accessibility (WCAG 2.2.2): pause / play all animations from the header */
.motion{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;padding:0;border:1.5px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;transition:background .3s,color .3s}
.motion svg{width:18px;height:18px}
.motion:hover{background:var(--ink);color:var(--paper)}
.motion .i-play,html.still .motion .i-pause{display:none}
html.still .motion .i-play{display:block}
@media (max-width:920px){.motion{margin-left:auto}.top .mcta{margin-left:0}}
html.still *,html.still *::before,html.still *::after{animation:none!important}
html.still .rv{opacity:1;transform:none}
html.still .hcopy h1 .ch{opacity:1;transform:none}

/* Home "Who I am" on a dark background */
.dark .who .txt p:not(.big){color:#B8B4AE}
.dark .who .txt p.kick{color:var(--paper)}
.dark .who .big em{color:var(--bl2)}
.dark .fact{background:#2A2A2A;box-shadow:inset 0 0 0 1px rgba(228,226,222,.1)}
.dark .fact span{color:#B8B4AE}
.dark .fact:nth-child(2) b{color:var(--bl2)}
.dark .fact:nth-child(3) b{color:var(--or2)}
.dark .fact.dk{background:var(--blD)}
.dark .fact.dk span{color:var(--paper)}

/* Page titles grouped like the home title: two stacked lines, same spacing and size */
.phero h1{letter-spacing:-.065em;line-height:.98} /* room for descenders (g, p) above the second line */
.phero h1 em{display:block}
.phero>.wrap{width:100%} /* full-width box: title block starts at the page edge, not centred */
@media (min-width:1001px){.phero h1{font-size:clamp(56px,6.2vw,104px)}}
/* About: timeline on a light background (its default colours are for dark) */
.sec:not(.dark) .tl .step span{color:var(--blD)}
.sec:not(.dark) .tl .step p{color:var(--mute)}
/* About: skills cards on a dark background */
.dark .skill{background:#2A2A2A;box-shadow:inset 0 0 0 1px rgba(228,226,222,.1)}
.dark .skill li{color:#B8B4AE}
.dark .skill li::before{background:var(--bl2)}
/* About intro: wide enough that "based in the United Kingdom." ends the first line */
.lede.intro{max-width:610px}
/* Inner pages: the title block fills the first screen, so the next section does not show below it.
   65px is the smallest header height; on bigger headers the title block runs a few pixels below the fold. */
.phero{min-height:calc(100svh - 65px);align-items:center}
/* Fine line between a dark last section and the dark footer (same line as above the copyright) */
main:has(>.sec.dark:last-child)+.foot::before{content:"";position:absolute;top:0;left:var(--gut);right:var(--gut);height:1px;background:rgba(228,226,222,.2)}
/* Home (computers): the whole text band fits on the first screen.
   On shorter screens the name gets smaller, so the hero is not taller than the space above the band. */
@media (min-width:1001px){
 .hero{min-height:calc(100svh - 66px - (1.9 * clamp(24px,2.8vw,44px)) - 24px - 1vw)}
 .hcopy h1{font-size:max(72px,min(8.4vw,136px,calc((100svh - 462px - 2.88 * clamp(24px,2.8vw,44px)) / 1.64)))}
}
/* Inner pages: "On this page" links under the intro, so people see what is below and know to scroll */
.jump{display:flex;flex-wrap:wrap;align-items:center;gap:6px 26px;margin-top:40px;padding-top:18px;border-top:1px solid rgba(27,27,27,.16);max-width:640px}
.jump::before{content:"On this page";width:100%;margin-bottom:4px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.jump a{display:inline-flex;align-items:center;gap:8px;min-height:32px;font-size:17px;font-weight:700;letter-spacing:-.02em;color:var(--ink);text-decoration:none;border-bottom:2px solid transparent;transition:border-color .3s,color .3s}
.jump a span{color:var(--orB);display:inline-block;transition:transform .3s}
.jump a:hover{border-bottom-color:var(--blD)}
.jump a:hover span{transform:translateY(3px)}
.phero .hbtns+.jump{margin-top:30px}
@media (max-width:560px){.jump{gap:4px 20px}.jump a{font-size:16px}}
/* "On this page" targets: the header hides when the page scrolls down, so land the section exactly at the top of the screen.
   (Cancels the header space kept by scroll-padding-top; sections have enough top padding that the header never covers the title.) */
/* the header stays visible, so a section linked from "On this page" lands just under it */
.sec[id]{scroll-margin-top:-21px}
@media (max-width:920px){.sec[id]{scroll-margin-top:-11px}}
/* Personal-profile version: three footer columns, two home project cards, full-width second project card */
@media (min-width:901px){.fgrid{grid-template-columns:1.4fr 1fr 1fr}}
@media (min-width:1001px){.tiles.two{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Projects: two dark cards side by side */
.pcard.feat.half{grid-column:auto;padding:34px}
.pcard.feat.half .chips,.pcard.feat.half ul,.pcard.feat.half p{max-width:none}
.pcard.feat.half::after{width:150px;height:150px;right:-40px;bottom:-40px}
/* "Four rules" on a dark background */
.dark .pr{border-top-color:var(--paper)}
.dark .pr b{color:var(--bl2)}
.dark .pr p{color:#B8B4AE}
/* Skills as one short sentence per card */
.skill p{font-size:16px;line-height:1.55;color:#3E3C39}
.dark .skill p{color:#B8B4AE}
/* Skills: five cards in one row on wide screens, three then two on medium screens */
@media (min-width:1201px){.skills.five{grid-template-columns:repeat(5,minmax(0,1fr))}.skills.five .skill{padding:22px}.skills.five .skill h3{font-size:21px}.skills.five .skill p{font-size:15px}}
@media (min-width:901px) and (max-width:1200px){.skills.five{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Projects: short title block on one line, so the project cards fit on the first screen */
.phero.short{min-height:0;padding-top:72px;padding-bottom:48px}
.phero.short h1 em{display:inline}
.phero.short+.sec{padding-top:32px;padding-bottom:32px;display:flex;flex-direction:column;justify-content:center}
.phero.short .lede{margin-top:24px;max-width:none}
/* The footer starts below the first screen: main fills the screen and the last section grows to fill it */
main{display:flex;flex-direction:column;min-height:calc(100svh - 65px)}
main>.sec:last-child{flex:1 0 auto}
/* Scroll cue (added by site.js): grey word and a long line with a moving dot, fixed at the bottom left */
.scue{position:fixed;left:calc(var(--gut) / 2 - 8px);bottom:22px;z-index:40;display:flex;flex-direction:column;align-items:center;gap:12px;pointer-events:none;transition:opacity .4s}
.scue b{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);writing-mode:vertical-rl;transform:rotate(180deg);line-height:1}
.scue i{position:relative;display:block;width:2px;height:72px;background:rgba(27,27,27,.22);overflow:hidden}
.scue i::after{content:"";position:absolute;left:0;top:0;width:100%;height:36%;background:var(--or);transform:translateY(90%)}
@media (prefers-reduced-motion:no-preference){.scue i::after{animation:scue 1.8s cubic-bezier(.6,0,.3,1) infinite}}
@keyframes scue{0%{transform:translateY(-100%)}100%{transform:translateY(280%)}}
html.still .scue i::after{transform:translateY(90%)}
/* on a dark first screen */
.scue.on-dark b{color:#B8B4AE}
.scue.on-dark i{background:rgba(228,226,222,.3)}
.scue.on-dark i::after{background:var(--or2)}
/* home: sit just above the tilted band */
body:has(.band) .scue{bottom:calc(2.4 * clamp(24px,2.8vw,44px) + 30px)}
html.scrolled .scue{opacity:0}
body.menu-open .scue{display:none}
/* the cue lives in the page margin; on narrow screens there is no margin for it */
@media (max-width:900px){.scue{display:none}}
/* About: the fact cards sit in the vertical middle of the story column */
.who .side{align-self:center}
.who .txt .jump{margin-top:34px}

/* About (computers): the story is tightened so the "On this page" links fit on the first screen */
@media (min-width:1001px){
 #story .who .txt p{font-size:16px;line-height:1.55}
 #story .who .txt p+p{margin-top:13px}
 #story .who .txt .jump{margin-top:20px;padding-top:14px;gap:4px 24px}
 #story .jump::before{width:auto;margin:0 6px 0 0}
}
/* About: slightly shorter title block and a one-line intro, so the links under the story fit on the first screen */
@media (min-width:1001px){
 .phero.short:has(+#story){padding-top:46px;padding-bottom:32px}
 .phero.short:has(+#story) .lede{max-width:none}
 #story{padding-top:26px;padding-bottom:26px}
}
/* About: the title block and the story fill the first screen together, so the dark section below never shows on it.
   On taller screens the story text gets larger and more spacious. */
.first{display:flex;flex-direction:column;min-height:calc(100svh - 65px)}
.first>.sec{flex:1 0 auto}
@media (min-width:1001px){
 #story .who .txt p{font-size:clamp(1rem,1.75svh,1.1875rem);line-height:1.58}
 #story .who .txt p+p{margin-top:clamp(13px,1.9svh,24px)}
 #story .who .txt .jump{margin-top:clamp(20px,2.8svh,40px)}
}
/* About fact cards: UK in orange, C-suite in blue; on computers the cards are centred on the story text, not on the text plus the links row */
#story .fact:nth-child(2) b{color:var(--or)}
#story .fact:nth-child(3) b{color:var(--blD)}
@media (min-width:1001px){#story .side{padding-bottom:64px}}
/* Project card: quiet score row (small soft-green dot, number, label), under a thin line */
.scores{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 26px;margin:16px 0 18px;padding-top:14px;border-top:1px solid rgba(228,226,222,.14)}
.score{display:inline-flex;align-items:baseline;gap:8px}
.score::before{content:"";align-self:center;width:7px;height:7px;border-radius:50%;background:#7FB89F}
.score b{font-size:19px;font-weight:700;letter-spacing:-.02em;color:var(--paper)}
.score i{font-style:normal;font-size:14px;color:#B8B4AE}
.scores small{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#ADA9A3;width:100%;margin-bottom:2px}
/* Tag rows: a forced line break between two tags */
.chips .brk{flex-basis:100%;height:0}
/* A button row after a block of cards */
.hbtns.after{margin-top:34px}
/* Outline button in orange; on hover it fills with blue and the text turns white (orange text on blue would be unreadable) */
.btn.ob{border-color:#B5391A;color:#B5391A}
.btn.ob::before{background:var(--blD)}
.btn.ob:hover{color:#fff;border-color:var(--blD)}
/* Footer: Privacy and Back to top together at the right end of the bottom line */
.fbot .fmeta{margin:0 0 0 auto;display:flex;gap:26px;font-size:13px}
.fbot .fmeta a{color:#B8B4AE;text-decoration:none;border-bottom:1px solid rgba(228,226,222,.3);padding-bottom:2px;transition:color .3s,border-color .3s}
.fbot .fmeta a:hover{color:var(--paper);border-bottom-color:var(--or2)}
/* Footer as a sign-off: a big closing line with the button, then one rail of numbered links, then the credit line */
.fhead{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:24px 40px;padding-bottom:34px}
.foot .kick{color:var(--paper);margin-bottom:14px}
.foot h2.fbig{font-size:clamp(34px,4vw,64px);font-weight:700;letter-spacing:-.065em;line-height:.95;margin:0;color:var(--paper)}
.fbig em{font-style:normal;color:var(--bl2)}
.fbig i{font-style:normal;color:var(--or2)}
.fbtn{display:inline-flex;align-items:center;gap:12px;margin-bottom:4px;padding:15px 34px 15px 24px;background:var(--orB);color:#fff;font-size:18px;font-weight:700;letter-spacing:-.01em;text-decoration:none;clip-path:polygon(0 0,100% 0,100% 66%,90% 100%,0 100%);transition:filter .3s}
.fbtn span{transition:transform .3s}
.fbtn:hover{filter:brightness(.88)}
.fbtn:hover span{transform:translateX(6px)}
.frail{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 48px;padding:8px 0;border-top:1px solid rgba(228,226,222,.2);border-bottom:1px solid rgba(228,226,222,.2)}
.frail ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 38px}
.frail a{display:inline-flex;align-items:baseline;gap:9px;min-height:44px;padding:10px 0;color:var(--paper);text-decoration:none;font-size:15px;font-weight:600;letter-spacing:-.02em;transition:color .3s}
.frail a span{font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--bl2);transition:color .3s,transform .3s}
.frail a:hover{color:#fff}
.frail a:hover span{color:var(--or2);transform:translateY(-2px)}
.frail a[aria-current]{color:var(--bl2)}
@media (max-width:560px){.fbtn{width:100%;justify-content:space-between}.frail ul{gap:0 26px}}
/* Long-form text (Privacy): readable line length, clear headings */
.prose{max-width:68ch}
.prose h2{font-size:clamp(22px,2vw,28px);margin:38px 0 12px}
.prose p,.prose li{font-size:1.0625rem;line-height:1.65;color:#3E3C39}
.prose p+p{margin-top:12px}
.prose ul{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:8px}
.prose ul+p{margin-top:14px}
.prose a{color:var(--blD);text-decoration:underline;text-underline-offset:3px}
.prose .upd{font-size:.875rem;color:var(--mute)}
/* The content under a short title block starts at the page's left edge */
.phero.short+.sec>.wrap{width:100%}
/* Project card: link to the live site */
.plink{display:inline-flex;align-items:baseline;gap:8px;align-self:flex-start;margin-top:14px;min-height:32px;font-size:15px;font-weight:600;color:var(--bl2);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
.plink:hover{color:var(--paper)}
.plink span{transition:transform .3s}
.plink:hover span{transform:translate(2px,-2px)}
/* Contact form: the send button is the orange action, visible on the dark form */
.form .btn.send{background:var(--orB);border-color:var(--orB);color:#fff}
/* Contact (computers): compact title block and form, so the whole form fits on the first screen */
@media (min-width:1001px){
 .phero.short:has(+#links){padding-top:28px;padding-bottom:20px}
 .phero.short:has(+#links) h1{font-size:clamp(48px,5vw,84px)}
 .phero.short:has(+#links) .lede{margin-top:16px}
 #links{padding-top:18px;padding-bottom:18px}
 #links .h2{margin-bottom:0}
 #links .ways{margin-top:22px}
 .form{padding:20px 28px}
 .form h3{font-size:24px;margin-bottom:4px}
 .form .sub{margin-bottom:0}
 .form .q{margin:13px 0 7px}
 .form label{margin-top:2px}
 .form input,.form textarea{padding:8px 2px}
 .g2.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
 .form .send{margin-top:16px;padding:12px 20px}
 .form #msg{margin-top:6px;min-height:0}
}
/* Footer rail on phones: two rows of three equal columns, so the second row lines up under the first */
@media (max-width:700px){
 .frail{display:block}
 .frail ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 12px}
 .frail a{font-size:14px;gap:6px}
}
/* Tag rows on phones: no forced line break, slightly smaller tags, so six tags fit on two lines */
@media (max-width:700px){
 .chips .brk{display:none}
 .chips{gap:5px}
 .chips span{font-size:10.5px;padding:5px 6px;letter-spacing:0}
 .pcard.feat.half{padding:24px 20px}
}
/* Text band: a slightly deeper blue, so both the light row (3.45:1) and the dark row (3.86:1) pass contrast for large text */
.band{background:#547D8F}
/* the <picture> wrapper around the photo takes no box of its own */
.portrait picture{display:contents}
/* Contact: a plain line about location under the two contact links */
.where{margin-top:18px;font-size:15px;line-height:1.5;color:var(--mute)}
/* About: the blue part of the title always starts on the second line. On computers the title block is
   smaller and tighter, so the "On this page" links stay on the first screen. */
.phero.short:has(+#story) h1 em{display:block}
.phero.short:has(+#story) h1 em span{white-space:nowrap} /* "by habit." stays together */
@media (min-width:1001px){
 .phero.short:has(+#story){padding-top:34px;padding-bottom:22px}
 .phero.short:has(+#story) h1{font-size:clamp(48px,5.2vw,88px)}
 .phero.short:has(+#story) .lede{margin-top:16px}
 #story{padding-top:18px;padding-bottom:18px}
}
/* About (computers): story lines slightly closer together, so the "On this page" links sit higher */
@media (min-width:1001px){
 #story .who .txt p{line-height:1.5}
 #story .who .txt p+p{margin-top:clamp(11px,1.6svh,20px)}
 #story{justify-content:flex-start;padding-top:clamp(26px,3.4svh,44px)} /* the story starts at the top of its area, not in the middle */
}
/* About (computers): on short screens the title is smaller and the gaps are tighter, so the "On this page" links sit clearly above the bottom edge */
@media (min-width:1001px){
 .phero.short:has(+#story){padding-top:24px;padding-bottom:18px}
 .phero.short:has(+#story) h1{font-size:clamp(60px,min(7vw,10.8svh),116px)}
 #story{padding-top:clamp(18px,2.2svh,36px)}
 #story .who .txt p+p{margin-top:clamp(9px,1.25svh,18px)}
 #story .who .txt .jump{margin-top:clamp(14px,1.8svh,32px)}
}
/* All inner pages (computers): the page title has the same size as the About me title */
@media (min-width:1001px){
 .phero.short h1,.phero.short:has(+#links) h1{font-size:clamp(60px,min(7vw,10.8svh),116px)}
}
/* Projects, Privacy and Contact (computers): the title block has the same height and the same inner spacing as on About me.
   123px = spacing, label and intro line; 1.96 x the title size = the two title lines of About me. */
@media (min-width:1001px){
 .phero.short:not(:has(+#story)){padding-top:24px;padding-bottom:18px;align-items:flex-start;min-height:calc(123px + 1.96 * clamp(60px,min(7vw,10.8svh),116px))}
 .phero.short:not(:has(+#story)) .lede{margin-top:16px}
}
/* Projects (computers): the two dark cards are more compact, with less empty space inside */
@media (min-width:1001px){
 .pcard.feat.half{padding:24px 28px 22px}
 .pcard.feat.half h3{margin:12px 0 8px}
 .pcard.feat.half p{line-height:1.5}
 .pcard.feat.half ul{margin-top:10px;gap:5px}
 .pcard.feat.half .plink{margin-top:8px}
 .pcard.feat.half .scores{margin:10px 0 12px;padding-top:10px}
 .pcard.feat.half .chips{margin-top:auto;padding-top:14px;gap:6px}
 .pcard.feat.half .chips span{padding:5px 10px}
 .pcard.feat.half .meter{margin-top:12px}
}
/* Contact (computers): the title block now matches the other pages, so the form is tighter to stay on the first screen */
@media (min-width:1001px){
 #links{padding-top:12px;padding-bottom:12px}
 .form{padding:16px 28px 14px}
 .form .q{margin:10px 0 6px}
 .form .send{margin-top:14px}
 .form #msg:empty{min-height:0;margin-top:0} /* the status line takes space only when it has a message */
}
/* About (computers): slightly smaller gaps in the story, to make room for the larger title */
@media (min-width:1001px){
 #story{padding-top:clamp(12px,1.6svh,28px)}
 #story .who .txt p+p{margin-top:clamp(8px,1.1svh,16px)}
 #story .who .txt .jump{margin-top:clamp(10px,1.4svh,26px)}
}
/* About (computers): on screens taller than 800px the story gets more air: more space above it, between
   the paragraphs and above the links row. At 800px and below it stays compact, so the links stay on the first screen. */
@media (min-width:1001px){
 #story{padding-top:clamp(12px,calc(12px + (100svh - 800px) * .09),36px)}
 #story .who .txt p+p{margin-top:clamp(8px,calc(9px + (100svh - 800px) * .06),20px)}
 #story .who .txt .jump{margin-top:clamp(10px,calc(11px + (100svh - 800px) * .07),28px)}
}
/* Projects: the first two cards ("lead") fill the rest of the first screen on computers, centred in it.
   The other cards ("more") start just below the first screen, and show when the reader scrolls. */
.pj.more{margin-top:16px}
@media (min-width:1001px){
 .pj.lead{min-height:calc(100svh - 65px - (123px + 1.96 * clamp(60px,min(7vw,10.8svh),116px)) - 64px);align-content:center}
 .pj.more{margin-top:48px} /* 32px to the bottom edge of the first screen, then 16px */
}