@font-face{font-family:"Outfit";font-weight:100 900;font-display:swap;src:url(assets/fonts/outfit-latin-wght-normal.woff2) format("woff2")}

:root{
  --gold:#e6a24a;--gold-hi:#f2b968;--gold-dim:rgba(230,162,74,.45);
  --bg:#05090b;--bg2:#071013;--ink:#f3f4f6;--text:#c4c9cf;--muted:#9aa1a9;--hair:rgba(160,170,180,.18);
  /* the layout is drawn on the 1024px mockup grid: 1k = one mockup pixel, never more than 1.4px */
  --k:min(calc((100vw - 16px) / 1024), 1.4px);
  --font:"Outfit",ui-sans-serif,system-ui,"Segoe UI",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(52 * var(--k))}
html,body{background:var(--bg);color:var(--ink)}
body{font-family:var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
ol,ul{list-style:none}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.frame{position:relative;width:calc(1024 * var(--k));margin:0 auto;padding:0 calc(39 * var(--k)) 0 calc(46 * var(--k))}
.eyebrow{font-size:max(calc(11 * var(--k)),11px);font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--gold)}
h2{font-weight:600;color:var(--ink)}
svg{flex:none}

/* buttons */
.btn{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:calc(9 * var(--k));height:max(calc(33 * var(--k)),40px);padding:0 calc(24 * var(--k));border-radius:calc(3 * var(--k));font-size:max(calc(11 * var(--k)),12px);font-weight:600;letter-spacing:.06em;text-transform:uppercase;transition:background .25s,color .25s,transform .25s,box-shadow .25s}
.btn svg,.link-gold svg{width:max(calc(13 * var(--k)),13px);height:max(calc(13 * var(--k)),13px);fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.btn:hover svg,.link-gold:hover svg{transform:translateX(3px)}
.btn-gold{background:linear-gradient(180deg,#f3be6e,#e3a04b);color:#1a1209}
.btn-gold:hover{box-shadow:0 0 0 1px rgba(242,185,104,.5),0 6px 22px rgba(230,162,74,.28);transform:translateY(-1px)}
.btn-line{border:1px solid var(--gold);color:#f1f2f4}
.btn-line:hover{background:rgba(230,162,74,.1);color:var(--gold-hi)}

/* ---------------- header ---------------- */
.site-header{position:sticky;top:0;z-index:20;height:calc(52 * var(--k));min-height:52px;background:rgba(4,9,11,.96);border-bottom:1px solid var(--hair);transition:background .3s,backdrop-filter .3s}
.site-header.scrolled{background:rgba(4,9,11,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.header-in{height:100%;display:flex;align-items:center;padding-left:calc(28 * var(--k));padding-right:calc(28 * var(--k))}
.logo img{width:calc(173 * var(--k));min-width:130px;height:auto}
.nav{position:absolute;left:calc(397 * var(--k));top:0;height:100%;display:flex;align-items:center;gap:calc(26 * var(--k))}
.nav a{position:relative;font-size:max(calc(9.6 * var(--k)),11px);font-weight:500;letter-spacing:.03em;text-transform:uppercase;color:#e9ebee;transition:color .2s}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:calc(-9 * var(--k));height:2px;background:var(--gold);transform:scaleX(0);transition:transform .3s}
.nav a:hover{color:var(--gold-hi)}
.nav a.is-active::after{transform:scaleX(1)}
.btn-cv{margin-left:auto;display:inline-flex;align-items:center;gap:calc(8 * var(--k));height:calc(30 * var(--k));min-height:34px;padding:0 calc(17 * var(--k));border:1px solid var(--gold);border-radius:calc(3 * var(--k));color:var(--gold);font-size:max(calc(9.6 * var(--k)),11px);font-weight:500;letter-spacing:.05em;text-transform:uppercase;transition:background .25s}
.btn-cv svg{width:max(calc(12 * var(--k)),12px);height:max(calc(12 * var(--k)),12px);fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.btn-cv:hover{background:rgba(230,162,74,.12)}
.btn-cv:hover svg{animation:nudge .6s ease}
@keyframes nudge{50%{transform:translateY(2px)}}

/* ---------------- hero ---------------- */
.hero{position:relative;height:calc(390 * var(--k));overflow:hidden;border-bottom:1px solid var(--hair)}
.hero-bg{position:absolute;top:0;left:50%;width:calc(1864 * var(--k));height:100%;transform:translateX(-50%);background:url(assets/img/hero-bg.jpg) center/100% 100% no-repeat}
.hero-in{height:100%}
.hero-copy{position:absolute;left:calc(46 * var(--k));top:calc(48 * var(--k));width:calc(470 * var(--k))}
.name{margin-top:calc(13 * var(--k));font-weight:800;font-size:calc(55 * var(--k));line-height:.82;letter-spacing:.012em;text-transform:uppercase}
.name span{display:block}
.name .gold{color:var(--gold);margin-top:calc(7 * var(--k))}
.hero-sub{margin-top:calc(19 * var(--k));font-size:calc(19.5 * var(--k));line-height:1.28;font-weight:600;color:#f4f5f6;white-space:nowrap}
.hero-text{margin-top:calc(14 * var(--k));width:calc(392 * var(--k));font-size:calc(12.7 * var(--k));line-height:1.46;font-weight:350;color:#d0d4d9}
.hero-btns{margin-top:calc(14 * var(--k));display:flex;gap:calc(12 * var(--k))}
.hero-btns .btn-gold{min-width:calc(162 * var(--k));padding:0 calc(20 * var(--k))}
.hero-btns .btn-line{min-width:calc(133 * var(--k))}
.hero-quote{position:absolute;left:calc(731 * var(--k));top:calc(44 * var(--k));padding:calc(2 * var(--k)) 0 0 calc(27 * var(--k));border-left:1.5px solid var(--gold)}
.hero-quote .qmark{display:block;width:calc(27 * var(--k));height:calc(20 * var(--k));fill:var(--gold)}
.hero-quote blockquote{margin-top:calc(12 * var(--k));font-style:italic;font-weight:300;font-size:calc(15.2 * var(--k));line-height:1.48;color:#eceef1;white-space:nowrap}
.q-rule{display:block;margin-top:calc(12 * var(--k));width:calc(44 * var(--k));height:2px;background:var(--gold)}

/* entrance */
.in-load{opacity:0;transform:translateY(14px);animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(.15s + var(--i) * .12s)}
@keyframes rise{to{opacity:1;transform:none}}
.glint{background:linear-gradient(100deg,var(--gold) 0 40%,#fff3d6 48%,var(--gold) 56% 100%);background-size:250% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent!important;animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards,glint 1.6s ease-in-out 1.3s forwards;animation-delay:calc(.15s + var(--i) * .12s),1.3s}
@keyframes glint{from{background-position:100% 0}to{background-position:-60% 0}}

/* spark + monitor light layer (page coordinates of the mockup's top 442px) */
.fx{position:absolute;z-index:30;top:0;left:50%;width:calc(1024 * var(--k));height:calc(442 * var(--k));transform:translateX(-50%);pointer-events:none;overflow:visible}
.rack-light path{fill:none;stroke:#ffe6b0;stroke-width:1.3;stroke-linecap:round;filter:url(#glow);stroke-dasharray:180 1300;stroke-dashoffset:180;opacity:0;animation:run 7s cubic-bezier(.45,.05,.4,1) infinite;animation-delay:calc(var(--d) + 3.7s)}
@keyframes run{0%{stroke-dashoffset:180;opacity:0}2%{opacity:1}11%{stroke-dashoffset:-1000;opacity:1}12.5%,100%{stroke-dashoffset:-1000;opacity:0}}

/* light running round the letters of the name (built in script.js) */
.name{position:relative}
.name-trace{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.name-trace text{fill:none;stroke:#ffe6b0;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;filter:url(#glow);stroke-dasharray:var(--dash) var(--gap);stroke-dashoffset:var(--dash);opacity:0;animation:letter-run .85s cubic-bezier(.4,0,.5,1) forwards;animation-delay:var(--delay)}
@keyframes letter-run{0%{stroke-dashoffset:var(--dash);opacity:0}8%{opacity:1}88%{opacity:1}100%{stroke-dashoffset:var(--end);opacity:0}}

/* ---------------- strip ---------------- */
.strip{background:var(--bg2);border-bottom:1px solid var(--hair)}
.strip-in{height:calc(88 * var(--k));min-height:84px;display:flex;align-items:center;justify-content:space-between}
.strip-item{display:flex;align-items:center;gap:calc(14 * var(--k));height:calc(46 * var(--k));min-height:42px}
.strip-item + .strip-item{border-left:1px solid var(--hair);padding-left:calc(46 * var(--k))}
.strip-item:not(:last-child){padding-right:calc(28 * var(--k))}
.strip-item p{white-space:nowrap;font-size:max(calc(10.4 * var(--k)),11px);line-height:1.6;font-weight:400;letter-spacing:.02em;text-transform:uppercase;color:#e7e9ec}
.ico{width:calc(46 * var(--k));min-width:36px;height:calc(46 * var(--k));min-height:36px;fill:none;stroke:var(--gold);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.draw *{stroke-dasharray:1;stroke-dashoffset:1}
.in .draw *{animation:draw 1.2s ease forwards}
.in .strip-item:nth-child(2) .draw *{animation-delay:.15s}.in .strip-item:nth-child(3) .draw *{animation-delay:.3s}.in .strip-item:nth-child(4) .draw *{animation-delay:.45s}
@keyframes draw{to{stroke-dashoffset:0}}

/* ---------------- journey ---------------- */
.journey{background:var(--bg2);padding:calc(30 * var(--k)) 0 calc(28 * var(--k));border-bottom:1px solid var(--hair)}
.journey-head{display:grid;grid-template-columns:493fr 446fr;align-items:start}
.journey h2{margin-top:calc(12 * var(--k));font-size:calc(26.5 * var(--k));line-height:1.16;letter-spacing:.005em}
.journey-intro{margin-top:calc(20 * var(--k));font-size:max(calc(12.4 * var(--k)),12.5px);line-height:1.45;font-weight:350;color:var(--text)}
.timeline{display:grid;grid-template-columns:160fr 160fr 166fr 172fr 172fr 150fr;margin-top:calc(30 * var(--k))}
.timeline li{position:relative;padding-right:calc(8 * var(--k))}
.node{display:grid;place-items:center;width:calc(56 * var(--k));height:calc(56 * var(--k));min-width:44px;min-height:44px;border-radius:50%;border:2px solid var(--gold);background:#091316;transition:box-shadow .5s,background .5s}
.node svg{width:58%;height:58%;fill:none;stroke:var(--gold);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.node-mark img{width:46%;height:auto}
.link{position:absolute;left:calc(68 * var(--k));right:calc(12 * var(--k));top:calc(28 * var(--k));height:1.5px;background:rgba(230,162,74,.85);transform-origin:left;transform:scaleX(0)}
.link::after{content:"";position:absolute;right:0;top:-3.5px;width:7px;height:7px;border-top:1.5px solid var(--gold);border-right:1.5px solid var(--gold);transform:rotate(45deg);opacity:0}
.link b{position:absolute;left:0;top:-3px;width:7px;height:7px;border-radius:50%;background:#fff1c4;box-shadow:0 0 6px 2px rgba(255,201,90,.85),0 0 14px 4px rgba(230,162,74,.45);opacity:0}
.timeline h3{margin-top:calc(14 * var(--k));font-size:max(calc(10.8 * var(--k)),11.5px);line-height:1.35;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:#f3f4f6}
.timeline p{margin-top:calc(7 * var(--k));font-size:max(calc(11.3 * var(--k)),12px);line-height:1.42;font-weight:350;color:var(--text)}
.timeline h3,.timeline p{opacity:0;transform:translateY(10px);transition:opacity .7s,transform .7s;transition-delay:calc(var(--n) * .55s + .15s)}
.timeline.in h3,.timeline.in p{opacity:1;transform:none}
.timeline.in .node{animation:light 1.4s ease forwards;animation-delay:calc(var(--n) * .55s)}
@keyframes light{0%{box-shadow:0 0 0 0 rgba(230,162,74,0)}35%{box-shadow:0 0 0 6px rgba(230,162,74,.18),0 0 22px rgba(230,162,74,.55);background:#14181a}100%{box-shadow:0 0 14px rgba(230,162,74,.18)}}
.timeline.in .link{animation:grow .5s ease-in-out forwards;animation-delay:calc(var(--n) * .55s + .1s)}
.timeline.in .link::after{animation:fadein .2s forwards;animation-delay:calc(var(--n) * .55s + .55s)}
.timeline.in .link b{animation:travel .5s ease-in-out forwards;animation-delay:calc(var(--n) * .55s + .1s)}
@keyframes grow{to{transform:scaleX(1)}}
@keyframes fadein{to{opacity:1}}
@keyframes travel{0%{left:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:calc(100% - 7px);opacity:0}}

/* ---------------- iniqnode ---------------- */
.iq{position:relative;height:calc(235 * var(--k));min-height:230px;background:linear-gradient(90deg,#061013,#08171a);border-bottom:1px solid var(--hair);overflow:hidden}
.iq-img{position:absolute;top:0;bottom:0;left:calc(50% - 147 * var(--k));right:0;background:url(assets/img/iniqnode-warehouse.jpg) left center/cover no-repeat;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%);mask-image:linear-gradient(90deg,transparent,#000 14%)}
.iq-in{height:100%}
.iq-copy{position:absolute;left:calc(46 * var(--k));top:calc(15 * var(--k));width:calc(320 * var(--k))}
.iq-name{margin-top:calc(6 * var(--k));font-size:calc(34 * var(--k));line-height:1.1;font-weight:700;letter-spacing:-.01em}
.iq-sub{margin-top:calc(2 * var(--k));font-size:calc(20 * var(--k));font-weight:500;color:#eef0f2}
.iq-text{margin-top:calc(12 * var(--k));font-size:max(calc(12.4 * var(--k)),12.5px);line-height:1.36;font-weight:350;color:var(--text)}
.iq-copy .btn{margin-top:calc(14 * var(--k));min-width:calc(196 * var(--k))}
.flow{position:absolute;left:calc(452 * var(--k));top:calc(116 * var(--k));display:flex;gap:calc(22.6 * var(--k))}
.flow li{position:relative;width:calc(70 * var(--k));height:calc(78 * var(--k));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(9 * var(--k));border:1px solid rgba(230,162,74,.55);border-radius:calc(4 * var(--k));background:rgba(6,10,12,.9);box-shadow:0 6px 18px rgba(0,0,0,.45);opacity:0;transform:translateY(12px);transition:opacity .6s,transform .6s;transition-delay:calc(var(--n) * .12s)}
.flow.in li{opacity:1;transform:none}
.flow li:not(:last-child)::after{content:"";position:absolute;right:calc(-15 * var(--k));top:50%;width:calc(7 * var(--k));height:calc(7 * var(--k));border-top:1.5px solid var(--gold);border-right:1.5px solid var(--gold);transform:translateY(-50%) rotate(45deg);opacity:.75}
.flow svg{width:calc(32 * var(--k));height:calc(32 * var(--k));fill:none;stroke:var(--gold);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.flow .soft{opacity:.7}
.flow .f{fill:var(--gold);stroke:none}
.flow .fd{fill:rgba(230,162,74,.55)}
.flow span{font-size:max(calc(8.6 * var(--k)),9px);font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:#f1f2f4}

/* ---------------- projects ---------------- */
.projects{background:var(--bg2);padding:calc(22 * var(--k)) 0 calc(22 * var(--k));border-bottom:1px solid var(--hair)}
.proj-head{display:flex;align-items:flex-end;justify-content:space-between}
.projects h2{margin-top:calc(10 * var(--k));font-size:calc(27 * var(--k));letter-spacing:.005em}
.link-gold{display:inline-flex;align-items:center;gap:calc(7 * var(--k));margin-bottom:calc(6 * var(--k));color:var(--gold);font-size:max(calc(10.5 * var(--k)),11.5px);font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.cards{margin-top:calc(18 * var(--k));display:grid;grid-template-columns:repeat(3,1fr);gap:calc(17 * var(--k))}
.card{position:relative;display:block;height:calc(168 * var(--k));min-height:180px;border:1px solid var(--hair);border-radius:calc(6 * var(--k));overflow:hidden;background:#0b1316;opacity:0;transform:translateY(16px);transition:opacity .7s,transform .7s,border-color .3s,box-shadow .3s;transition-delay:calc(var(--n) * .12s),calc(var(--n) * .12s),0s,0s}
.cards.in .card{opacity:1;transform:none}
.card img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,9,11,0) 38%,rgba(5,9,11,.78) 70%,rgba(5,9,11,.92))}
.card-text{position:absolute;z-index:1;left:calc(17 * var(--k));right:calc(60 * var(--k));bottom:calc(14 * var(--k))}
.card-text strong{display:block;font-size:max(calc(13.6 * var(--k)),14px);font-weight:600;color:#f4f5f6}
.card-text span{display:block;margin-top:calc(4 * var(--k));font-size:max(calc(11 * var(--k)),12px);line-height:1.5;font-weight:350;color:var(--text)}
.card-go{position:absolute;z-index:1;right:calc(18 * var(--k));bottom:calc(18 * var(--k));display:grid;place-items:center;width:calc(26 * var(--k));height:calc(26 * var(--k));min-width:28px;min-height:28px;border:1.5px solid var(--gold);border-radius:50%;color:var(--gold);transition:background .3s,color .3s}
.card-go svg{width:55%;height:55%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.card:hover{border-color:rgba(230,162,74,.5);box-shadow:0 10px 30px rgba(0,0,0,.45);transform:translateY(-3px)}
.card:hover img{transform:scale(1.05)}
.card:hover .card-go{background:var(--gold);color:#161009}

/* ---------------- key skills / what I bring ---------------- */
.about{background:var(--bg);padding:calc(18 * var(--k)) 0 calc(22 * var(--k))}
.about-in{display:grid;grid-template-columns:446fr 276fr 248fr;align-items:stretch;padding-left:calc(28 * var(--k))}
.key-skills{padding:0 calc(6 * var(--k)) 0 calc(19 * var(--k));border-right:1.5px solid var(--gold)}
.key-skills ul{margin-top:calc(8 * var(--k));display:grid;grid-template-columns:repeat(5,minmax(0,1fr));row-gap:calc(14 * var(--k))}
.key-skills ul li:nth-child(5){grid-column:1}
.key-skills li{display:flex;flex-direction:column;align-items:center;text-align:center;opacity:0;transform:translateY(10px);transition:opacity .5s,transform .5s;transition-delay:calc(.15s + var(--n) * .07s)}
.key-skills svg{width:calc(27 * var(--k));min-width:24px;height:calc(27 * var(--k));min-height:24px;fill:none;stroke:var(--gold);color:var(--gold);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s,filter .3s}
.key-skills li:hover svg{transform:translateY(-2px) scale(1.08);filter:drop-shadow(0 0 6px rgba(230,162,74,.6))}
.key-skills strong{margin-top:calc(7 * var(--k));font-size:max(calc(10.8 * var(--k)),11.5px);font-weight:600;color:#f1f2f4;line-height:1.2}
.key-skills span{margin-top:calc(2 * var(--k));font-size:max(calc(9.4 * var(--k)),10.5px);line-height:1.3;font-weight:350;color:var(--text)}
.bring{padding:0 calc(14 * var(--k)) 0 calc(24 * var(--k));border-right:1.5px solid var(--gold)}
.bring ul{margin-top:calc(6 * var(--k))}
.bring li{display:flex;align-items:flex-start;gap:calc(14 * var(--k));margin-top:calc(5 * var(--k));font-size:max(calc(11 * var(--k)),12px);line-height:1.42;font-weight:350;color:#dfe2e6;opacity:0;transform:translateX(-8px);transition:opacity .5s,transform .5s;transition-delay:calc(.3s + var(--n) * .09s)}
.bring svg{width:calc(15 * var(--k));min-width:14px;height:calc(15 * var(--k));min-height:14px;margin-top:.1em;fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16;stroke-dashoffset:16}
.about-in.in .key-skills li,.about-in.in .bring li{opacity:1;transform:none}
.about-in.in .bring svg{animation:tick .45s ease forwards;animation-delay:calc(.45s + var(--n) * .09s)}
@keyframes tick{to{stroke-dashoffset:0}}
.about-quote{position:relative;padding-left:calc(24 * var(--k))}
.about-quote .qmark{position:absolute;left:calc(22 * var(--k));top:0;width:calc(30 * var(--k));height:calc(23 * var(--k));fill:var(--gold)}
.about-quote blockquote{margin:calc(26 * var(--k)) 0 0 calc(34 * var(--k));font-style:italic;font-weight:300;font-size:max(calc(11.4 * var(--k)),12.5px);line-height:1.52;color:#e0e3e7}
.about-quote figcaption{display:flex;align-items:center;gap:calc(16 * var(--k));margin:calc(16 * var(--k)) 0 0 calc(34 * var(--k));font-size:max(calc(10 * var(--k)),11px);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--gold)}
.about-quote figcaption span{width:calc(40 * var(--k));height:1.5px;background:var(--gold)}

/* ---------------- contact / footer ---------------- */
.contact{background:var(--bg2);border-top:1px solid var(--hair);padding:calc(30 * var(--k)) 0 calc(18 * var(--k))}
.contact-in{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.contact h2{margin-top:calc(10 * var(--k));font-size:calc(24 * var(--k))}
.contact-btns{display:flex;gap:calc(12 * var(--k))}
.tagline{display:flex;align-items:flex-start;margin-top:calc(30 * var(--k))}
.tagline .rule{flex:1;height:1px;margin-top:calc(10 * var(--k));background:rgba(200,206,214,.28)}
.tagline p{position:relative;padding:calc(9 * var(--k)) calc(12 * var(--k)) 0;font-size:max(calc(9.6 * var(--k)),10.5px);letter-spacing:.34em;text-indent:.34em;text-transform:uppercase;color:#9ea4ac;white-space:nowrap}
.tagline p::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(200,206,214,.28)}
.copy{margin-top:calc(14 * var(--k));text-align:center;font-size:12px;color:#6f7780}

/* generic scroll reveal */
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
[data-reveal].in{opacity:1;transform:none}
.timeline[data-reveal],.cards[data-reveal],.flow[data-reveal]{transform:none}

@media (max-width:1150px){.strip-item + .strip-item{padding-left:calc(30 * var(--k))}.strip-item p{white-space:normal}}

/* ---------------- tablet & phone ---------------- */
@media (max-width:860px){
  :root{--k:1px}
  .fx,.name-trace{display:none}
  .frame{width:auto;padding:0 20px}
  .site-header{position:relative;height:auto}
  html{scroll-padding-top:0}
  .header-in{flex-wrap:wrap;gap:10px 16px;padding:12px 20px}
  .nav{position:static;order:3;width:100%;height:auto;gap:18px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
  .nav a{white-space:nowrap}
  .nav a::after{bottom:-5px}
  .hero{height:auto;padding:0 0 36px}
  .hero-bg{position:relative;left:0;transform:none;width:100%;height:300px;background:url(assets/img/hero-bg.jpg) 62% center/auto 100% no-repeat}
  .hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,var(--bg))}
  .hero-copy,.hero-quote,.iq-copy,.flow{position:relative;left:auto;top:auto;width:auto}
  .hero-copy{margin-top:-30px}
  .name{font-size:clamp(38px,11vw,52px)}
  .hero-sub{font-size:18px;white-space:normal}.hero-text{width:auto;font-size:15px}
  .hero-btns{flex-wrap:wrap}.hero-btns .btn{width:auto}
  .hero-quote{margin-top:30px;padding-left:18px}
  .hero-quote blockquote{font-size:16px;white-space:normal}
  .strip-in{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:20px;padding-top:24px;padding-bottom:24px}
  .strip-item{padding:0!important}.strip-item p{white-space:normal}
  .strip-item + .strip-item{border:0;padding:0}
  .journey-head{grid-template-columns:1fr;gap:14px}
  .journey h2{font-size:24px}.journey h2 br{display:none}
  .timeline{grid-template-columns:1fr 1fr;gap:28px 18px}
  .link{display:none}
  .iq{height:auto;padding:30px 0 34px}
  .iq-img{left:0;opacity:.35;-webkit-mask-image:none;mask-image:none}
  .iq-name{font-size:32px}.iq-sub{font-size:19px}
  .iq-copy .btn{width:auto}
  .flow{margin-top:28px;flex-wrap:wrap;gap:22px}
  .flow li{width:84px;height:88px}
  .flow svg{width:30px;height:30px}
  .projects h2{font-size:24px}
  .proj-head{flex-wrap:wrap;gap:12px}
  .cards{grid-template-columns:1fr;gap:16px}
  .card{height:210px}
  .about-in{grid-template-columns:1fr;gap:30px;padding-left:20px}
  .key-skills,.bring{border:0;padding:0}
  .key-skills ul{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:20px}
  .key-skills ul li:nth-child(5){grid-column:auto}
  .about-quote{padding-left:0}.about-quote .qmark{left:0}
  .about-quote blockquote,.about-quote figcaption{margin-left:44px}
  .contact h2{font-size:22px}
  .contact-btns{flex-wrap:wrap}
  .tagline p{white-space:normal;text-align:center}
}
@media (max-width:520px){.timeline{grid-template-columns:1fr}.strip-in{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .fx,.name-trace{display:none}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .in-load,[data-reveal],.timeline h3,.timeline p,.flow li,.card,.key-skills li,.bring li{opacity:1!important;transform:none!important}
  .link{transform:none}.link::after{opacity:1}
  .draw *,.bring svg{stroke-dashoffset:0}
  .glint{color:var(--gold)!important;background:none}
}