/* ==================================================================
   AMPROTEQ · v2.css — round 6 (Oct 2026): photoreal scroll sequences,
   new pages (about, commercial, delivery, sectors, solutions, FAQ,
   insights, legal), consented enquiry paths, shared footer.
================================================================== */
.skiplink{position:fixed; left:12px; top:-60px; z-index:300; background:var(--ink); color:#03080F; padding:10px 16px; border-radius:6px; font-family:var(--fd); font-weight:600; font-size:14px; transition:top .3s}
.skiplink:focus{top:12px}
.vh{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* ---------- menu: ten items fit a laptop screen ---------- */
#menu .ml a{font-size:clamp(26px,3.6vw,46px); line-height:1.12}
#menu .ml a[aria-current] em{color:var(--cyan)}
@media(max-height:760px) and (min-width:1101px){#menu .ml{display:grid; grid-template-columns:1fr 1fr; column-gap:40px}}
@media(max-width:1360px) and (min-width:1101px){.navlinks{gap:24px}.navlinks a{font-size:13px}}

/* ---------- photoreal scroll sequence (cover) ---------- */
.hero.seq{display:block; min-height:0; height:330vh; padding:0; overflow:visible; align-items:initial}
.hero.seq .seq-pin{position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; isolation:isolate; display:flex; align-items:center}
.seq-media{position:absolute; inset:0; z-index:0; background:#0b1422}
.seq-media img,.seq-media video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--fx,50%) 50%}
.seq-media video{opacity:0; transition:opacity .6s ease}
.seq-media video.on{opacity:1}
.seq-media::after{content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top,var(--bg) 0%,rgba(5,7,12,.55) 16%,rgba(5,7,12,0) 42%),linear-gradient(100deg,rgba(5,7,12,.86) 0%,rgba(5,7,12,.55) 34%,rgba(5,7,12,.08) 62%,rgba(5,7,12,0) 100%);
  transition:opacity .6s}
.hero.seq.late .seq-media::after{opacity:.55}
.hero.seq .wrap{position:relative; z-index:3}
.hero.seq .open-copy{will-change:opacity,transform; padding-top:var(--navh)}
.hero.seq .open-copy .h1{max-width:12ch}
.hero.seq .open-copy .hero-sub{max-width:46ch}
.seq-end{position:absolute; left:var(--gut); bottom:clamp(40px,8vh,90px); z-index:4; max-width:440px; opacity:0; transform:translateY(24px); pointer-events:none}
.seq-end h2{font-size:clamp(28px,3.4vw,48px); letter-spacing:-.024em; line-height:1.04}
.seq-end p{margin-top:16px; font-size:15px; color:var(--ink2); line-height:1.7}
.seq-end .btn-row{margin-top:24px}
.seq-tag{position:absolute; right:var(--gut); bottom:22px; z-index:4; font-family:var(--fm); font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:rgba(238,243,250,.42)}
/* numbered hotspots on the open unit (positions are fractions of the 16:9 frame, mapped through object-fit:cover) */
.hs{position:absolute; left:0; top:0; z-index:4; opacity:0; pointer-events:none; transition:opacity .45s var(--e)}
.hs.on{opacity:1; pointer-events:auto}
.hs b{position:absolute; left:-13px; top:-13px; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-family:var(--fm); font-size:10px; font-weight:500; color:#03080F; background:var(--ink); box-shadow:0 0 0 6px rgba(238,243,250,.16),0 6px 20px rgba(0,0,0,.5)}
.hs span{position:absolute; left:22px; top:-14px; white-space:nowrap; font-family:var(--fm); font-size:10.5px; letter-spacing:.06em; color:var(--ink); background:rgba(5,7,12,.82); border:1px solid var(--line2); border-radius:4px; padding:6px 10px; backdrop-filter:blur(8px)}
.hs.flip span{left:auto; right:22px}
@media(max-width:900px){.hero.seq{height:270vh}.hs span{display:none}.hero.seq .open-copy .h1{max-width:none}.seq-end{right:var(--gut); max-width:none}.seq-media::after{background:linear-gradient(to top,var(--bg) 0%,rgba(5,7,12,.7) 30%,rgba(5,7,12,.35) 60%,rgba(5,7,12,.55) 100%)}}
.hslist{display:none}
@media(max-width:900px){.hslist{display:grid; gap:6px; margin-top:16px; padding:0; list-style:none; font-family:var(--fm); font-size:10.5px; color:var(--ink2)}.hslist li{display:flex; gap:10px}.hslist li b{color:var(--cyan); font-weight:500}}

/* ---------- the 20 ft platform orbit ---------- */
.turn.seqturn .turn-stage .fr{background:#05070c}
.turn.seqturn video,.turn.seqturn .turn-fb{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.turn.seqturn video{opacity:0; transition:opacity .6s}
.turn.seqturn video.on{opacity:1}

/* ---------- photoreal story plates (Systems) ---------- */
.story-plates{position:absolute; inset:0; z-index:0; background:#05070c}
.story-plates img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:62% 50%; opacity:0; transform:scale(1.06); transition:opacity .9s var(--e), transform 1.6s var(--e); will-change:opacity,transform}
.story-plates img.on{opacity:1; transform:scale(1)}
.story-plates::after{content:''; position:absolute; inset:0; background:linear-gradient(100deg,rgba(5,7,12,.9) 0%,rgba(5,7,12,.6) 34%,rgba(5,7,12,.06) 64%,rgba(5,7,12,0) 100%),linear-gradient(to top,rgba(5,7,12,.7),rgba(5,7,12,0) 30%)}
@media(max-width:900px){.story-plates img{object-position:70% 50%}.story-plates::after{background:linear-gradient(to top,rgba(5,7,12,.92) 0%,rgba(5,7,12,.6) 46%,rgba(5,7,12,.2) 100%)}}

/* ---------- visualisation tag on generated imagery ---------- */
.vis{position:relative}
.vis::after{content:'Visualisation'; position:absolute; right:10px; bottom:9px; z-index:3; font-family:var(--fm); font-size:8.5px; letter-spacing:.2em; text-transform:uppercase; color:rgba(238,243,250,.75); background:rgba(5,7,12,.55); padding:4px 7px; border-radius:3px; pointer-events:none}

/* ---------- range cards with photographs ---------- */
.hp-art.photo{padding:0; overflow:hidden; align-items:stretch}
.hp-art.photo::after{display:none}
.hp-art.photo img{width:100%; height:100%; max-height:none; object-fit:cover; border-radius:0}
.card .stage.photo{padding:0; overflow:hidden}
.card .stage.photo img{width:100%; height:100%; object-fit:cover}

/* ---------- page hero (inner pages) ---------- */
.hero.page{min-height:min(74svh,760px); align-items:flex-end; padding:calc(var(--navh) + 80px) 0 clamp(54px,7vw,96px)}
.hero.page .hero-ph::after{background:linear-gradient(to top,var(--bg) 0%,rgba(5,7,12,.7) 30%,rgba(5,7,12,.25) 70%,rgba(5,7,12,.45) 100%),linear-gradient(100deg,rgba(5,7,12,.85) 0%,rgba(5,7,12,.4) 50%,rgba(5,7,12,0) 100%)}
.hero.page .h1{font-size:clamp(36px,5.4vw,78px); max-width:16ch}
.hero.plain{min-height:0; padding:calc(var(--navh) + 70px) 0 clamp(34px,4vw,56px)}
.crumbs{display:flex; gap:10px; flex-wrap:wrap; font-family:var(--fm); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); margin-bottom:22px}
.crumbs a{color:var(--mut)} .crumbs a:hover{color:var(--cyan)} .crumbs i{font-style:normal; color:var(--faint)}

/* ---------- content blocks for the new pages ---------- */
.cols2{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(30px,5vw,80px); align-items:start}
.lst{list-style:none; padding:0; margin:0; display:grid; gap:0; border-top:1px solid var(--line)}
.lst li{padding:16px 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:34px 1fr; gap:14px; font-size:15px; color:var(--ink2); line-height:1.65}
.lst li em{font-style:normal; font-family:var(--fm); font-size:10.5px; color:var(--cyan); padding-top:4px}
.lst li b{color:var(--ink); font-weight:500; font-family:var(--fd); font-size:16.5px; display:block; margin-bottom:3px}
.note{border:1px solid var(--line); border-left:2px solid var(--cyan); border-radius:6px; padding:16px 20px; background:rgba(60,204,252,.035); font-size:14px; color:var(--ink2); line-height:1.7}
.srcs{margin-top:16px; font-size:12.5px; color:var(--dim); line-height:1.7}
.srcs a{color:var(--mut); text-decoration:underline; text-decoration-color:var(--line2); text-underline-offset:3px}
.srcs a:hover{color:var(--cyan)}
.chip-row{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px}
.tile-links{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:10px; overflow:hidden}
.tile-links a{background:var(--bg2); padding:clamp(20px,2.2vw,30px); display:flex; flex-direction:column; gap:10px; min-height:190px; transition:background .4s}
.tile-links a:hover{background:var(--bg3)}
.tile-links a .t{font-family:var(--fd); font-size:20px; font-weight:500; color:var(--ink); letter-spacing:-.01em}
.tile-links a .d{font-size:14px; color:var(--mut); line-height:1.6}
.tile-links a .go{margin-top:auto; font-family:var(--fm); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--cyan)}
.tile-links a.img{position:relative; padding:0; min-height:280px; overflow:hidden; justify-content:flex-end}
.tile-links a.img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--e)}
.tile-links a.img:hover img{transform:scale(1.04)}
.tile-links a.img::before{content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(to top,rgba(5,7,12,.94) 0%,rgba(5,7,12,.5) 50%,rgba(5,7,12,.05) 100%)}
.tile-links a.img .in{position:relative; z-index:2; padding:clamp(20px,2.2vw,28px); display:flex; flex-direction:column; gap:8px}
@media(max-width:1100px){.tile-links{grid-template-columns:repeat(2,minmax(0,1fr))}.cols2{grid-template-columns:1fr}}
@media(max-width:700px){.tile-links{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; padding:20px 44px 20px 0; position:relative; font-family:var(--fd); font-weight:500; font-size:clamp(16.5px,1.3vw,19px); color:var(--ink); letter-spacing:-.005em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:''; position:absolute; right:6px; top:50%; width:10px; height:10px; border-right:1.5px solid var(--mut); border-bottom:1.5px solid var(--mut); transform:translateY(-70%) rotate(45deg); transition:transform .4s var(--e)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details>div{padding:0 0 22px; font-size:15px; color:var(--mut); line-height:1.75; max-width:78ch}
.faq details>div a{color:var(--cyan)}

/* ---------- legal pages ---------- */
.legal{max-width:78ch}
.legal h2{font-size:clamp(21px,1.9vw,27px); margin:48px 0 14px; letter-spacing:-.012em}
.legal h3{font-size:17px; margin:28px 0 10px}
.legal p,.legal li{font-size:15px; color:var(--ink2); line-height:1.78}
.legal p+p{margin-top:12px}
.legal ul{padding-left:20px; margin:10px 0}
.legal li{margin:6px 0}
.legal a{color:var(--cyan)}
.legal .tbl{margin-top:14px}
.legal .tbl table{min-width:0}
.updated{font-family:var(--fm); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); margin-top:18px}

/* ---------- enquiry paths + consent ---------- */
.paths{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:10px; overflow:hidden}
.paths a{background:var(--bg2); padding:22px 22px 20px; display:flex; flex-direction:column; gap:8px; transition:background .4s}
.paths a:hover,.paths a.on{background:var(--bg3)}
.paths a.on{box-shadow:inset 0 2px 0 var(--cyan)}
.paths em{font-style:normal; font-family:var(--fm); font-size:10px; letter-spacing:.18em; color:var(--cyan)}
.paths b{font-family:var(--fd); font-weight:500; font-size:18px; color:var(--ink)}
.paths span{font-size:13.5px; color:var(--mut); line-height:1.6}
@media(max-width:1100px){.paths{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.paths{grid-template-columns:1fr}}
.fld.file{border:1px dashed var(--line2); border-radius:8px; padding:16px 15px 14px; background:rgba(255,255,255,.015)}
.fld.file label{position:static; display:block; margin-bottom:10px}
.fld.file input{border:0; padding:0; background:none; font-size:13.5px; color:var(--ink2)}
.fld.file small{display:block; margin-top:8px; font-size:12.5px; color:var(--dim)}
.consent{display:grid; grid-template-columns:20px 1fr; gap:12px; align-items:start; font-size:13.4px; color:var(--mut); line-height:1.65}
.consent input{width:18px; height:18px; margin:2px 0 0; accent-color:var(--cyan)}
.consent a{color:var(--cyan)}
.collect{font-size:12.6px; color:var(--dim); line-height:1.7}
.collect a{color:var(--mut); text-decoration:underline; text-underline-offset:3px}
.ferr{font-size:13px; color:var(--red); min-height:1em}
.form [aria-invalid="true"]{border-color:rgba(255,107,107,.6)!important}
.form.sending button[type=submit]{opacity:.6; pointer-events:none}

/* ---------- footer: five columns + legal links ---------- */
.fgrid.f5{grid-template-columns:1.5fr repeat(4,1fr)}
.fb p.fad{font-size:12.8px; color:var(--dim); margin-top:14px}
.fb p.fad a{color:var(--mut)} .fb p.fad a:hover{color:var(--cyan)}
.flegal{display:flex; gap:22px}
.flegal a{color:var(--faint)} .flegal a:hover{color:var(--cyan)}
@media(max-width:1100px){.fgrid.f5{grid-template-columns:1fr 1fr}.fgrid.f5 .fb{grid-column:1/-1}}
@media(max-width:700px){.fgrid.f5{grid-template-columns:1fr 1fr}}

/* ---------- small fixes ---------- */
.strip-c small{display:block; margin-top:4px; font-family:var(--fm); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint)}
.strip-c small a{color:var(--dim); text-decoration:underline; text-underline-offset:2px}
.chart-data{margin-top:12px}
.chart-data summary{cursor:pointer; font-family:var(--fm); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); padding:10px 0}
.chart-data .tbl table{min-width:0}
@media (prefers-reduced-motion: reduce){.story-plates img{transition:none}.seq-media video{display:none}}

/* ---------- sector grid as links; the photographic orbit gets a larger frame ---------- */
.ind a{background:var(--bg2); padding:22px 14px; text-align:center; transition:background .4s, color .4s; font-family:var(--fm); font-size:9.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--mut)}
.ind a:hover{background:var(--bg4); color:var(--cyan)}
@media(max-width:820px){.ind a{padding:17px 10px; font-size:9px}}
.turn.seqturn .turn-stage{max-width:1380px}
.turn.seqturn .turn-stage .fr{height:min(60svh,50vw); aspect-ratio:16/9; border-radius:12px; overflow:hidden; border:1px solid var(--line); background:#05070c}
.turn.seqturn .turn-cv,.turn.seqturn .turn-fb{object-fit:cover}
@media(max-width:1024px){.turn.seqturn .turn-stage .fr{height:auto; width:100%}.turn.seqturn .turn-fb{position:relative; width:100%; height:auto}}
a.row:hover{background:var(--bg3)}

/* hotspots: numbered dots on the photograph, names in the legend (labels only on hover/focus, so they never pile up) */
.hs span{opacity:0; transform:translateX(-4px); transition:opacity .3s, transform .3s; pointer-events:none}
.hs:hover span,.hs:focus-within span{opacity:1; transform:none}
.hs b{cursor:default}
.hslist{display:grid; grid-template-columns:1fr 1fr; gap:6px 18px; margin:18px 0 0; padding:0; list-style:none; font-family:var(--fm); font-size:10.5px; letter-spacing:.04em; color:var(--ink2)}
.hslist li{display:flex; gap:10px; align-items:baseline}
.hslist li b{display:inline-grid; place-items:center; width:18px; height:18px; border-radius:50%; background:var(--ink); color:#03080F; font-weight:500; font-size:9px; flex:none}
.hero.seq .scrollcue{left:50%; transform:translateX(-50%)}
@media(max-height:820px){.hero.seq .trust{display:none}}

/* phones: the copy covers most of the frame, so the scrim is darker until the doors open; dots would sit on the copy */
@media(max-width:900px){
  .seq-media::after{background:linear-gradient(to top,var(--bg) 0%,rgba(5,7,12,.86) 34%,rgba(5,7,12,.62) 70%,rgba(5,7,12,.7) 100%)}
  .hero.seq.late .seq-media::after{opacity:.7}
  .hs,.hero.seq .hslist{display:none}
}
.hero.seq .scrollcue{left:auto; right:var(--gut); bottom:48px; transform:none}
@media(max-height:820px){.hero.seq .trust{display:flex}}
@media(max-height:700px){.hero.seq .trust{display:none}}
#toast{visibility:hidden; transition:transform .7s var(--e), visibility 0s linear .7s}
#toast.on{visibility:visible; transition:transform .7s var(--e), visibility 0s}

/* ---------- round 7 · energy-flow maps over the photographs (flow.js) ---------- */
.flowmap{position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden; opacity:0; transition:opacity .9s var(--e)}
.flowmap.on{opacity:1}
.flowmap .fl-svg{position:absolute; left:0; top:0; overflow:visible; transform-origin:0 0}
.flowmap .fl-base{fill:none; stroke:rgba(127,226,254,.16); stroke-width:1; vector-effect:non-scaling-stroke; transition:stroke .6s}
.flowmap .fl.live .fl-base{stroke:rgba(127,226,254,.34)}
.flowmap .fl-run{fill:none; stroke:#9BEBFF; stroke-width:2.2; stroke-linecap:round; vector-effect:non-scaling-stroke; stroke-dasharray:.9 4.1; opacity:0; transition:opacity .6s; animation:flrun 1.6s linear infinite}
.flowmap .fl.live .fl-run{opacity:.95}
.flowmap .fl.rev .fl-run{animation-direction:reverse}
@keyframes flrun{to{stroke-dashoffset:-5}}
.fnode{position:absolute; left:0; top:0; will-change:transform}
.fnode i{position:absolute; left:-4px; top:-4px; width:8px; height:8px; border-radius:50%; background:rgba(5,7,12,.85); border:1.5px solid rgba(238,243,250,.55); transition:border-color .5s, background .5s}
.fnode.live i{border-color:#9BEBFF; background:#0b2a38}
.fnode.pass i{width:6px; height:6px; left:-3px; top:-3px}
.fnode span{position:absolute; left:12px; top:-11px; display:grid; gap:1px; white-space:nowrap; font-family:var(--fm); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:rgba(238,243,250,.86); text-shadow:0 1px 8px rgba(0,0,0,.8)}
.fnode span b{font-weight:500}
.fnode span em{font-style:normal; color:rgba(238,243,250,.5)}
.fnode span u{text-decoration:none; color:#9BEBFF; font-variant-numeric:tabular-nums}
.fnode.pass span u{display:none}
.fnode.flip span{left:auto; right:12px; text-align:right}
.fnode.off{display:none}
.fnode.edge i{display:none}
.fnode.edge span{left:0}
.fhud{position:absolute; z-index:3; display:grid; gap:7px; justify-items:end; text-align:right; font-family:var(--fm); pointer-events:none}
.fhud.tr{right:var(--gut); top:calc(var(--navh) + 28px)}
.fhud .fh-k{font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:rgba(238,243,250,.5)}
.fhud .fh-k span{color:rgba(238,243,250,.86); font-variant-numeric:tabular-nums; margin-left:6px}
.fhud .fh-m{display:flex; gap:9px; align-items:center; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:#9BEBFF}
.fhud .fh-m i{width:7px; height:7px; border-radius:50%; background:#9BEBFF}
.fhud.dis .fh-m{color:var(--ink)}
.fhud.dis .fh-m i{background:var(--ink)}
.fhud .fh-b{font-family:var(--fd); font-size:clamp(30px,3vw,44px); line-height:1; letter-spacing:-.03em; color:var(--ink); font-variant-numeric:tabular-nums}
.fhud .fh-b small{font-size:.38em; color:rgba(238,243,250,.5); margin-left:.2em}
.fhud .fh-s{width:180px; height:4px; background:rgba(255,255,255,.1); border-radius:2px; overflow:hidden}
.fhud .fh-s i{display:block; height:100%; background:linear-gradient(90deg,#1898FC,#7FE2FE); transition:width .3s linear}
@media(max-width:900px){.fnode span{display:none}.fhud.tr{top:auto; bottom:96px; right:var(--gut)}.fhud .fh-b{font-size:26px}.fhud .fh-s{width:120px}}
@media(max-width:600px){.hero.seq .fhud{display:none}}
@media (prefers-reduced-motion: reduce){.flowmap .fl-run{animation:none; stroke-dasharray:none; opacity:.5}}

/* round 7 cover: a living-still loop under the scrubbed door film */
.seq-media video.scrub{transition:none}
.seq-media video.loop{transition:opacity .5s ease}
.seq-media video.loop.on:not(.play){opacity:0}

/* round 7 · Inside the A100: the cell-to-block chain as photographs (Systems) */
.ins-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden}
.ins-grid figure{margin:0; background:#05070c; display:flex; flex-direction:column}
.ins-grid img{display:block; width:100%; aspect-ratio:4/3; object-fit:cover; object-position:64% 55%}
.ins-grid figcaption{display:grid; gap:4px; padding:16px 18px 20px; font-family:var(--fm); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase}
.ins-grid figcaption b{color:var(--cyan); font-weight:500}
.ins-grid figcaption strong{color:var(--ink); font-weight:500}
.ins-grid figcaption span{color:var(--mut); font-variant-numeric:tabular-nums}
.ins-note{margin-top:12px; font-family:var(--fm); font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:rgba(238,243,250,.42)}
@media(max-width:900px){.ins-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* round 7 · the brand at twice the size where the bar has room (owner, 2026-10-14) */
.lockup{gap:16px}
.lockup img{width:40px}
.lockup b{font-size:34px; letter-spacing:.3em}
.lockup s{display:none}
#pre .lk img{width:52px}
#pre .lk b{font-size:50px}
.f5 .lockup img{width:42px}
.f5 .lockup b{font-size:36px}
@media(max-width:1500px) and (min-width:1101px){.lockup img{width:34px}.lockup b{font-size:28px}}
@media(max-width:1100px){.lockup img{width:34px}.lockup b{font-size:28px; letter-spacing:.28em}}
@media(max-width:700px){.lockup img{width:30px}.lockup b{font-size:23px; letter-spacing:.26em}#pre .lk b{font-size:34px}#pre .lk img{width:36px}}
@media(max-width:380px){.lockup b{font-size:20px}}
@media(max-width:600px){.hero.seq .fnode{display:none}}