/* bottletreecontracting.com, concept A "industrial poster" (Oct 2026).
   Sibling of the bottletreetech.com.au poster: one family (Archivo, variable width), type as the artwork, but on the
   Contracting palette: ink navy, hi-vis orange and hazard tape, over photographs of the plant at first light.
   Everything here is the finished still page; motion lives in js/site.js and is skipped for reduced motion. */

@font-face{font-family:"Archivo";src:url(/fonts/ArchivoVar.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}

:root{
  --navy:#17293A;    /* ink-green, the brand ground */
  --deep:#0E1B27;    /* night navy */
  --steel:#2C4A5E;
  --hi:#F08A24;      /* hi-vis orange */
  --hi-text:#F6A85E; /* orange for small text on navy (7.2:1) */
  --chalk:#F1F4F6;
  --ink:#14181B;
  --mute:#C4D2DD;    /* soft ink on navy (9:1) */
  --slate:#4F5D69;   /* soft ink on chalk (6.6:1) */
  --font:"Archivo","Helvetica Neue",Arial,sans-serif;
  --pad:clamp(16px,2.6vw,44px);
  --sec:clamp(88px,10vw,170px);
  --ease:cubic-bezier(.22,1,.36,1);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--navy);color:#fff;font:400 17px/1.55 var(--font);font-variation-settings:"wdth" 100;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--hi);outline-offset:3px;border-radius:2px}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
.wrap{padding-left:max(var(--pad),env(safe-area-inset-left,0px));padding-right:max(var(--pad),env(safe-area-inset-right,0px))}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--hi);color:var(--ink);padding:10px 16px;border-radius:999px;font-weight:700}
.skip:focus{top:12px}

/* display type: width is the instrument */
.big{--w:125;font-family:var(--font);font-weight:900;font-variation-settings:"wdth" var(--w,125);line-height:.84;letter-spacing:-.03em;text-transform:uppercase;white-space:nowrap}
.fitbox{display:grid;justify-items:start;justify-self:stretch;width:100%;min-width:0}
.fitbox > .big{width:max-content;max-width:none;display:block}
.dim{color:var(--mute)}
.hv{color:var(--hi)}
.lead{font:600 clamp(18px,1.55vw,23px)/1.4 var(--font);font-variation-settings:"wdth" 104;letter-spacing:-.005em;max-width:42ch}

.btn{display:inline-flex;align-items:center;gap:.6em;min-height:54px;padding:0 1.5em;border:0;border-radius:4px;background:#fff;color:var(--ink);font:800 17px/1 var(--font);font-variation-settings:"wdth" 110;text-decoration:none;white-space:nowrap;cursor:pointer;transition:transform .4s var(--ease),background-color .25s}
.btn.hi{background:var(--hi);color:var(--ink)}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn i,.go i,.qb i{display:inline-block;width:.5em;height:.5em;border-top:3px solid currentColor;border-right:3px solid currentColor;transform:rotate(45deg);transition:transform .35s var(--ease)}
.btn:hover i,.go:hover i{transform:translateX(4px) rotate(45deg)}
.go{display:inline-flex;align-items:center;gap:.55em;font:800 16px/1.2 var(--font);font-variation-settings:"wdth" 108;text-decoration:none;border-bottom:3px solid var(--hi);padding-bottom:4px}
.go i{border-width:2.5px}

/* hazard tape */
.tape{position:relative;height:clamp(20px,2.2vw,34px);overflow:hidden}
.tape span{position:absolute;inset:0 -220px;background:repeating-linear-gradient(135deg,var(--hi) 0 30px,var(--ink) 30px 60px)}
.tape.slim{height:clamp(14px,1.4vw,22px);margin-block:clamp(40px,5vw,72px)}

/* ---------------- header ---------------- */
.brand{display:flex;align-items:center;gap:10px;font:500 17px/1 var(--font);font-variation-settings:"wdth" 108;text-decoration:none;white-space:nowrap;text-transform:uppercase;letter-spacing:.08em}
.brand b{font-weight:800}
.brand img{width:38px;height:38px}
.top{position:absolute;inset:0 0 auto;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:18px}
.top nav,.bar nav{display:flex;align-items:center;gap:clamp(14px,2vw,30px);font:700 15px/1 var(--font);font-variation-settings:"wdth" 106}
.top nav a:not(.btn),.bar nav a:not(.btn){text-decoration:none;padding-block:8px}
.top nav a:not(.btn):hover,.bar nav a:not(.btn):hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px;text-decoration-color:var(--hi)}
.top .btn,.bar .btn{min-height:44px;font-size:15px;background:var(--hi);color:var(--ink)}
.bar{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:10px;background:var(--deep);transform:translateY(-102%);transition:transform .45s var(--ease)}
.bar.show{transform:none}

/* ---------------- 1. hero ---------------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;overflow:hidden;background:var(--deep)}
.hero-media{position:absolute;inset:0}
.hero-media img,.hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.hero-vid{opacity:0;transition:opacity 1.2s ease}
.hero-vid.on{opacity:1}
.shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,27,39,.82) 0%,rgba(14,27,39,.55) 38%,rgba(14,27,39,.12) 60%,rgba(14,27,39,.82) 100%)}
.hero-in{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;justify-content:space-between;padding-top:clamp(96px,11vh,130px);padding-bottom:clamp(24px,3vw,44px)}
.hero h1 .big{text-shadow:0 2px 30px rgba(14,27,39,.25)}
.hero-foot{display:flex;justify-content:space-between;align-items:end;gap:20px 40px;flex-wrap:wrap;margin-top:auto}
.hero-foot p{max-width:46ch;font:600 clamp(17px,1.4vw,21px)/1.4 var(--font);font-variation-settings:"wdth" 102}
.hero-acts{display:flex;align-items:center;gap:22px 28px;flex-wrap:wrap}
.where{margin-top:18px;font:700 14px/1.3 var(--font);font-variation-settings:"wdth" 112;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.hero .tape{position:relative;z-index:3}

/* ---------------- 2. who we are ---------------- */
.who{padding-block:var(--sec) 0}
.say{font:800 clamp(34px,5.4vw,92px)/1 var(--font);font-variation-settings:"wdth" 112;letter-spacing:-.03em;max-width:15ch}
.say em{font-style:normal;color:var(--hi)}
.who-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px clamp(32px,6vw,110px);margin-top:clamp(32px,4vw,64px);align-items:start}
.who-grid > p:last-child{color:var(--mute);font-size:clamp(17px,1.2vw,19px);max-width:52ch}
.marq{margin-top:clamp(64px,8vw,130px);border-block:2px solid rgba(255,255,255,.14);overflow:hidden;margin-inline:calc(-1 * max(var(--pad),env(safe-area-inset-left,0px)))}
.mtrack{display:flex;align-items:center;gap:clamp(18px,2.4vw,40px);width:max-content;padding-block:clamp(14px,1.6vw,24px);font:900 clamp(34px,5vw,84px)/1 var(--font);font-variation-settings:"wdth" 118;text-transform:uppercase;letter-spacing:-.02em}
.mtrack span:nth-child(4n+1){color:var(--hi)}
.mtrack b{width:.5em;height:.5em;background:repeating-linear-gradient(135deg,var(--hi) 0 6px,var(--ink) 6px 12px);border-radius:2px;flex:0 0 auto}

/* ---------------- 3. services ---------------- */
.services{padding-top:var(--sec);background:var(--navy)}
.svc-head{margin-bottom:clamp(40px,5vw,80px)}
.svc-pin{overflow:hidden}
.svc-track{display:flex;gap:clamp(16px,2vw,32px);padding-inline:max(var(--pad),env(safe-area-inset-left,0px));padding-bottom:var(--sec);width:max-content}
.svc{position:relative;flex:0 0 auto;width:clamp(300px,30vw,520px);display:grid;grid-template-rows:auto 1fr;gap:20px}
.svc:first-child,.svc:last-child{width:clamp(320px,46vw,820px)}
.svc img{width:100%;height:clamp(300px,52vh,560px);object-fit:cover;border-radius:4px}
.svc .crop-plant{object-position:30% 60%}
.svc-txt{display:grid;gap:12px;align-content:start;justify-items:start;max-width:44ch}
.svc-txt .n,.caps .n{font:900 15px/1 var(--font);font-variation-settings:"wdth" 118;color:var(--hi);letter-spacing:.06em}
.svc-txt h3{font:900 clamp(26px,2.4vw,40px)/.95 var(--font);font-variation-settings:"wdth" 116;text-transform:uppercase;letter-spacing:-.02em}
.svc-txt p{color:var(--mute)}
.dev-card .mini-dev{position:relative;height:clamp(300px,52vh,560px);display:grid;place-items:center;background:var(--steel);border-radius:4px;padding:8% 12% 14% 6%}
.dev-card .mini-dev .monitor{width:100%}
.dev-card .mini-dev .phone{position:absolute;width:22%;right:7%;bottom:10%}

/* devices, built in CSS */
.monitor{position:relative;width:100%;filter:drop-shadow(0 40px 40px rgba(8,16,24,.5))}
.mbez{position:relative;border-radius:1.4% / 2.2%;background:#0A0B0D;padding:1.4% 1.4% 2.4%;box-shadow:inset 0 0 0 2px #2A2D33}
.monitor .scr{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:.4%;background:#111}
.monitor.uw .scr{aspect-ratio:2400/1005}
.monitor.uw .mbez{border-radius:.9% / 2.6%;padding:.9% .9% 1.7%}
.scr video,.scr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.monitor .scr::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,0) 40%);pointer-events:none}
.neck{width:12%;height:clamp(22px,3.4vw,58px);margin:0 auto;background:linear-gradient(90deg,#9EA3AB,#C9CDD3 45%,#9EA3AB)}
.monitor.uw .neck{width:8%;height:clamp(18px,2.4vw,40px)}
.mfoot{width:34%;height:clamp(7px,.8vw,13px);margin:0 auto;border-radius:6px 6px 3px 3px;background:#B9BDC4;box-shadow:inset 0 2px 0 #D9DCE1}
.monitor.uw .mfoot{width:22%}
.phone{position:relative;filter:drop-shadow(0 30px 30px rgba(8,16,24,.5))}
.phone .body{position:relative;border-radius:15% / 7%;background:#0A0B0D;padding:4.2%;box-shadow:inset 0 0 0 2px #2F3238}
.phone .scr{position:relative;aspect-ratio:390/836;overflow:hidden;border-radius:11% / 5.2%;background:#0A0B0D}
.phone .scr video,.phone .scr img{top:7%;height:93%}
.phone .scr::after{content:"";position:absolute;top:1.6%;left:50%;width:28%;height:3.6%;border-radius:999px;background:#000;transform:translateX(-50%);z-index:2}

/* ---------------- 4. training ---------------- */
.training{background:var(--chalk);color:var(--ink);padding-block:var(--sec)}
.training .dim{color:#7A8794}
.sec-h{margin-bottom:clamp(40px,5vw,80px)}
.tr-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,90px);align-items:center}
.tr-pic{overflow:hidden;border-radius:4px}
.tr-pic img{width:100%;aspect-ratio:4/5;object-fit:cover}
.tr-txt{display:grid;gap:clamp(22px,2.4vw,34px);justify-items:start}
.ticks{display:grid;gap:12px;max-width:52ch}
.ticks li{position:relative;padding-left:34px;font-weight:500}
.ticks li::before{content:"";position:absolute;left:0;top:.35em;width:18px;height:10px;border-left:4px solid var(--hi);border-bottom:4px solid var(--hi);transform:rotate(-45deg)}
.courses{margin-top:clamp(64px,8vw,120px)}
.c-head{display:flex;justify-content:space-between;align-items:end;gap:16px 32px;flex-wrap:wrap;padding-bottom:18px;border-bottom:4px solid var(--ink)}
.c-head h3{font:900 clamp(26px,2.6vw,44px)/1 var(--font);font-variation-settings:"wdth" 116;text-transform:uppercase;letter-spacing:-.02em}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{min-height:44px;padding:0 18px;border:2px solid var(--ink);border-radius:999px;background:transparent;color:var(--ink);font:800 15px/1 var(--font);font-variation-settings:"wdth" 108;cursor:pointer;transition:background-color .2s,color .2s}
.chip[aria-pressed="true"]{background:var(--ink);color:#fff}
.chip:hover{background:rgba(20,24,27,.08)}
.chip[aria-pressed="true"]:hover{background:var(--ink)}
.clist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,4vw,64px)}
.clist li{display:grid;grid-template-columns:minmax(0,9.5em) minmax(0,1fr) auto;gap:16px;align-items:baseline;padding:16px 0;border-bottom:1px solid #C9D2DA}
.clist code{font:800 15px/1 var(--font);font-variation-settings:"wdth" 92;letter-spacing:.02em;color:var(--steel)}
.clist span{font:800 clamp(19px,1.5vw,24px)/1.1 var(--font);font-variation-settings:"wdth" 110}
.clist .ctx{font:700 12px/1 var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--slate)}
.note{margin-top:20px;color:var(--slate)}

/* ---------------- 5. drone ---------------- */
.drone{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--deep)}
.dr-media{position:absolute;inset:0}
.dr-media img{width:100%;height:100%;object-fit:cover;object-position:30% 40%}
.dr-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,27,39,0) 30%,rgba(14,27,39,.9) 72%),linear-gradient(0deg,rgba(14,27,39,.85) 0%,rgba(14,27,39,0) 45%)}
.dr-in{position:relative;z-index:2;width:100%;display:grid;justify-items:end;gap:clamp(22px,2.4vw,34px);padding-block:var(--sec) clamp(48px,6vw,96px);text-align:right}
.dr-in .fitbox{justify-items:end;justify-self:end;width:min(100%,58vw)}
.dr-in .lead{max-width:36ch}
.caps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,32px);width:min(100%,1100px);text-align:left}
.caps li{display:grid;gap:8px;align-content:start;padding-top:16px;border-top:4px solid var(--hi)}
.caps h3{font:900 clamp(20px,1.7vw,28px)/1 var(--font);font-variation-settings:"wdth" 114;text-transform:uppercase}
.caps p{color:var(--mute);font-size:16px}

/* ---------------- 6. software ---------------- */
.software{background:var(--deep);padding-block:var(--sec)}
.sw-head{display:grid;gap:clamp(22px,2.4vw,34px)}
.sw-head .lead{max-width:56ch;font-weight:500;color:var(--mute)}
.sw-head .lead a{color:#fff;text-decoration-color:var(--hi);text-decoration-thickness:2px;text-underline-offset:4px}
.apps{display:grid;gap:clamp(80px,10vw,160px)}
.app{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:clamp(32px,4vw,72px);align-items:center}
.app.rev{grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr)}
.app.rev .app-txt{order:-1}
.app-dev{position:relative;perspective:2000px;padding-bottom:clamp(30px,4vw,60px)}
.app-dev .rig{position:relative;transform-style:preserve-3d;transform:rotateX(5deg) rotateY(-11deg)}
.app.rev .app-dev .rig{transform:rotateX(5deg) rotateY(11deg)}
.app-dev .phone{position:absolute;width:23%;right:-3%;bottom:-10%}
.app.rev .app-dev .phone{width:15%;right:auto;left:2%;bottom:-18%}
.app-txt{display:grid;gap:16px;justify-items:start}
.st{display:inline-block;padding:7px 13px;border-radius:2px;background:var(--hi);color:var(--ink);font:800 13px/1.2 var(--font);font-variation-settings:"wdth" 112;letter-spacing:.05em;text-transform:uppercase}
.aname{font:900 clamp(32px,3.4vw,58px)/.92 var(--font);font-variation-settings:"wdth" 118;text-transform:uppercase;letter-spacing:-.025em}
.app-txt > p{color:var(--mute)}
.feats{display:flex;flex-wrap:wrap;gap:8px}
.feats li{padding:7px 12px;border:1.5px solid rgba(255,255,255,.22);border-radius:999px;font:700 14px/1.2 var(--font);font-variation-settings:"wdth" 104}
.links{display:flex;flex-wrap:wrap;gap:14px 28px}
.steps{margin-top:clamp(96px,11vw,180px)}
.steps-h{font:900 clamp(28px,3.4vw,58px)/.98 var(--font);font-variation-settings:"wdth" 114;text-transform:uppercase;letter-spacing:-.025em;max-width:20ch}
.line{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,2.6vw,44px);margin-top:clamp(40px,5vw,72px)}
.line::before{content:"";position:absolute;left:0;right:0;top:22px;height:4px;background:rgba(255,255,255,.16)}
.line::after{content:"";position:absolute;left:0;top:22px;height:4px;width:100%;background:var(--hi);transform-origin:left;transform:scaleX(var(--p,1))}
.line li{position:relative;display:grid;gap:12px;align-content:start}
.line .dot{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--hi);color:var(--ink);font:900 20px/1 var(--font)}
.line h4{font:900 clamp(20px,1.6vw,26px)/1 var(--font);font-variation-settings:"wdth" 114;text-transform:uppercase;margin-top:6px}
.line p{color:var(--mute);font-size:16px}
.sheet-cta{display:flex;justify-content:space-between;align-items:center;gap:24px 48px;flex-wrap:wrap;margin-top:clamp(64px,7vw,110px);padding:clamp(28px,3.4vw,56px);background:var(--hi);color:var(--ink);border-radius:4px}
.sheet-cta h3{font:900 clamp(26px,2.8vw,46px)/.95 var(--font);font-variation-settings:"wdth" 116;text-transform:uppercase;letter-spacing:-.02em;max-width:17ch}
.sheet-cta p{margin-top:12px;max-width:52ch;font-weight:500}
.sheet-cta .btn{background:var(--ink);color:#fff}

/* ---------------- 7. plant ---------------- */
.plant{background:var(--chalk);color:var(--ink);padding-block:var(--sec);overflow:clip}
.plant .hv{color:#B85F0C}
.pl-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,5vw,90px);align-items:center}
.pl-txt{display:grid;gap:clamp(20px,2.2vw,30px);justify-items:start}
.pl-txt > p:not(.lead){color:var(--slate);max-width:52ch}
.pl-txt .btn{background:var(--ink);color:#fff}
.pl-pics{position:relative;padding-bottom:22%}
.pl-pics img{border-radius:4px;object-fit:cover}
.pl-pics .p1{width:82%;aspect-ratio:4/5}
.pl-pics .p2{position:absolute;right:0;bottom:0;width:48%;aspect-ratio:4/5;border:8px solid var(--chalk)}

/* ---------------- 8. initiatives ---------------- */
.work{padding-block:var(--sec)}
.work .lead{margin-top:clamp(22px,2.4vw,34px);font-weight:500;color:var(--mute);max-width:56ch}
.inits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,32px);margin-top:clamp(48px,6vw,96px);counter-reset:i}
.inits li{display:grid;gap:12px;align-content:start;padding-top:18px;border-top:4px solid var(--hi);counter-increment:i}
.inits li::before{content:"0" counter(i);font:900 15px/1 var(--font);font-variation-settings:"wdth" 118;color:var(--hi);letter-spacing:.06em}
.inits h3{font:900 clamp(20px,1.7vw,28px)/1 var(--font);font-variation-settings:"wdth" 112;text-transform:uppercase}
.inits p{color:var(--mute);font-size:16px}

/* ---------------- 9. testimonials ---------------- */
.said{background:var(--hi);color:var(--ink);padding-block:var(--sec)}
.said-h{font:800 clamp(16px,1.3vw,20px)/1 var(--font);font-variation-settings:"wdth" 118;letter-spacing:.08em;text-transform:uppercase}
.quotes{display:grid;margin-top:clamp(28px,3vw,48px)}
.q{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s}
.q.on{opacity:1;visibility:visible}
.q blockquote p{font:800 clamp(26px,3.3vw,56px)/1.08 var(--font);font-variation-settings:"wdth" 104;letter-spacing:-.02em;max-width:30ch}
.q figcaption{display:grid;gap:6px;margin-top:clamp(24px,2.6vw,40px)}
.q figcaption b{font:900 clamp(20px,1.7vw,28px)/1 var(--font);font-variation-settings:"wdth" 116;text-transform:uppercase}
.q figcaption span{font-weight:600}
.q-nav{display:flex;align-items:center;gap:16px;margin-top:clamp(28px,3vw,44px)}
.qb{display:grid;place-items:center;width:52px;height:52px;border:3px solid var(--ink);border-radius:50%;background:transparent;color:var(--ink);cursor:pointer;transition:background-color .2s,color .2s}
.qb:hover{background:var(--ink);color:var(--hi)}
.qb i{transform:rotate(-135deg);margin-left:4px}
.qb.nx i{transform:rotate(45deg);margin-left:-4px}
.qn{font:800 16px/1 var(--font);font-variation-settings:"wdth" 110}

/* ---------------- 10. area ---------------- */
.area{position:relative;min-height:92svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--deep)}
.ar-media{position:absolute;inset:0}
.ar-media img{width:100%;height:100%;object-fit:cover}
.ar-media::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(14,27,39,.82) 0%,rgba(14,27,39,0) 55%)}
.ar-in{position:relative;z-index:2;width:100%;padding-block:var(--sec) clamp(40px,5vw,80px)}

/* ---------------- 11. contact ---------------- */
.contact{background:var(--navy);padding-block:var(--sec)}
.ct-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,90px);margin-top:clamp(40px,5vw,80px);align-items:start}
.ct-say{display:grid;gap:18px}
.mail-l{margin-top:clamp(20px,3vw,40px);font:800 13px/1 var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--hi-text)}
.mail{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.mail a{font:900 clamp(20px,2.2vw,36px)/1.1 var(--font);font-variation-settings:"wdth" 96;text-decoration:none;overflow-wrap:anywhere}
.mail a:hover{color:var(--hi)}
.copy{min-height:40px;padding:0 14px;border:2px solid rgba(255,255,255,.3);border-radius:999px;background:transparent;color:#fff;font:800 14px/1 var(--font);cursor:pointer}
.copy:hover{border-color:var(--hi)}
.qform{display:grid;gap:18px;padding:clamp(22px,3vw,44px);background:var(--deep);border-radius:4px;border-top:6px solid var(--hi)}
.qform h3{font:900 clamp(24px,2.2vw,34px)/1 var(--font);font-variation-settings:"wdth" 116;text-transform:uppercase}
.fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.f{display:grid;gap:7px}
.f label,.picks legend{font:700 14px/1.2 var(--font);color:var(--mute)}
.f input,.f textarea{width:100%;min-height:50px;padding:12px 14px;border:1.5px solid rgba(255,255,255,.18);border-radius:4px;background:rgba(255,255,255,.05);color:#fff;font:500 16px/1.4 var(--font)}
.f textarea{min-height:120px;resize:vertical}
.f input:focus,.f textarea:focus{outline:2px solid var(--hi);outline-offset:0;border-color:var(--hi)}
.picks{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.picks legend{margin-bottom:10px;padding:0}
.picks label{cursor:pointer}
.picks input{position:absolute;opacity:0;width:1px;height:1px}
.picks span{display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border:1.5px solid rgba(255,255,255,.28);border-radius:999px;font:700 15px/1 var(--font);transition:background-color .2s,color .2s,border-color .2s}
.picks input:checked + span{background:var(--hi);border-color:var(--hi);color:var(--ink)}
.picks input:focus-visible + span{outline:3px solid var(--hi);outline-offset:3px}
.err{color:#FFB4A8;font-weight:700}
.ok{color:var(--mute)}
.qform .btn{justify-self:start}

/* ---------------- footer ---------------- */
.foot{background:var(--deep);padding-block:clamp(64px,7vw,110px) 32px;overflow:hidden}
.foot-word .big{color:var(--hi)}
.foot-row{display:flex;justify-content:space-between;align-items:center;gap:16px 32px;flex-wrap:wrap;margin-top:clamp(28px,3vw,48px);font-weight:600}
.foot-row nav{display:flex;flex-wrap:wrap;gap:10px 26px}
.foot-row nav a{text-decoration:none}
.foot-row nav a:hover{text-decoration:underline;text-decoration-color:var(--hi);text-underline-offset:5px}
.legal{margin-top:18px;color:var(--mute);font-size:14px;max-width:80ch}
.toast{position:fixed;left:50%;bottom:24px;z-index:80;transform:translateX(-50%);padding:12px 18px;border-radius:999px;background:#fff;color:var(--ink);font-weight:700}

/* entrances start hidden only when motion runs */
@media (prefers-reduced-motion:no-preference){ .js [data-in]{opacity:0} }

/* ---------------- tablets and phones ---------------- */
@media (max-width:999px){
  .who-grid,.tr-grid,.pl-grid,.ct-grid{grid-template-columns:minmax(0,1fr)}
  .app,.app.rev{grid-template-columns:minmax(0,1fr)}
  .app.rev .app-txt{order:0}
  .app-dev .phone{right:1%}
  .app-dev{max-width:760px}
  .caps,.inits{grid-template-columns:repeat(2,minmax(0,1fr))}
  .line{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:36px}
  .line::before,.line::after{display:none}
  .clist{grid-template-columns:minmax(0,1fr)}
  .tr-pic{max-width:520px}
}
@media (max-width:899px){
  .top nav a:not(.btn){display:none}
  .svc-pin{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .svc-pin::-webkit-scrollbar{display:none}
  .svc,.svc:first-child,.svc:last-child{width:min(82vw,420px);scroll-snap-align:start}
  .svc img,.dev-card .mini-dev{height:min(70vw,380px)}
  .dr-in{justify-items:start;text-align:left}
  .dr-in .fitbox{justify-items:start}
  .dr-media::after{background:linear-gradient(0deg,rgba(14,27,39,.95) 0%,rgba(14,27,39,.7) 55%,rgba(14,27,39,.15) 100%)}
}
@media (max-width:640px){
  .brand span{display:none}
  .bar nav a:not(.btn){display:none}
  .fields{grid-template-columns:minmax(0,1fr)}
  .caps,.inits,.line{grid-template-columns:minmax(0,1fr)}
  .clist li{grid-template-columns:minmax(0,1fr) auto;row-gap:6px}
  .clist code{grid-column:1/-1}
  .hero-foot{flex-direction:column;align-items:flex-start}
  .app-dev .phone{width:26%;right:-2%}
  .app.rev .app-dev .phone{width:18%}
  .pl-pics .p2{border-width:5px}
}
@media (max-width:640px){
  /* On phones the poster lines wrap at a fixed large size instead of being fitted one by one. */
  .fitbox:not(.foot-word){font-size:clamp(38px,11.5vw,56px)}
  .fitbox:not(.foot-word) > .big{white-space:normal;width:auto;line-height:.9}
  .hero .fitbox{font-size:clamp(46px,14.4vw,64px)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .hero-vid{display:none}
}