/* Maven Pro, served from this site. The brand font is non-negotiable, so it does not depend on a third party being reachable. */ @font-face{font-family:"Maven Pro";src:url("../fonts/MavenPro-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"Maven Pro";src:url("../fonts/MavenPro-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:"Maven Pro";src:url("../fonts/MavenPro-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:"Maven Pro";src:url("../fonts/MavenPro-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap} /* =========================================================== NOVA MINES · v5 White ground. Navy used deliberately. Images left clear: text gets its own panel instead of a scrim over the picture. Spacing scale: 8 16 24 32 48 64 96 128 160 =========================================================== */ :root{ --white:#FFFFFF; --soft:#F4F6F7; --navy:#03446D; --deep:#062A44; --deep2:#08324F; --ink:#0B1F2E; /* headings on white 16:1 */ --body:#3E5262; /* body copy on white 8.5:1 */ --muted:#5C6E7A; /* meta on white 5.3:1 */ --line:#E2E8EC; --yellow:#FFCE00; /* never text on white: rules, marks, fills, text on navy */ --onDark:rgba(255,255,255,.86); --onDark2:rgba(255,255,255,.62); --lineD:rgba(255,255,255,.18); --f:"Maven Pro",ui-sans-serif,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif; --max:1560px; --pad:40px; --top:36px; /* gold strip above the header */ --hdr:88px; --hdrS:66px; --off:calc(var(--hdr) + var(--top)); --gap:4px; --e:cubic-bezier(.19,.72,.28,1); --e2:cubic-bezier(.65,0,.35,1); --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px; --s8:128px; --s9:160px; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{background:var(--white);color:var(--body);font-family:var(--f);font-size:17px;line-height:1.62; -webkit-font-smoothing:antialiased;overflow-x:hidden} img,video{display:block;max-width:100%} a{color:inherit;text-decoration:none} .wrap{padding:0 var(--pad);max-width:var(--max);margin:0 auto} .full{padding:0} /* ---------------- type scale ---------------- */ h1,h2,h3,h4{color:var(--ink);font-weight:400;letter-spacing:-0.0352em;line-height:1.04} h1{font-size:clamp(44px,6.4vw,104px);line-height:.96;letter-spacing:-0.044em} h2{font-size:clamp(30px,3.9vw,58px)} h3{font-size:clamp(20px,1.65vw,25px);letter-spacing:-0.0242em;line-height:1.22} h4{font-size:18px;letter-spacing:-0.0165em;font-weight:500} p{max-width:62ch} .lead{font-size:clamp(20px,1.85vw,27px);line-height:1.34;color:var(--ink);letter-spacing:-0.0242em;max-width:30ch} .kick{font-size:13px;color:var(--navy);font-weight:500;display:flex;align-items:center;gap:11px;margin-bottom:var(--s3)} .kick::before{content:"";width:24px;height:2px;background:var(--yellow);flex:none} .meta{font-size:13px;color:var(--muted)} .sec{padding:var(--s8) 0} .sec.sm{padding:var(--s7) 0} .sec.t0{padding-top:0}.sec.b0{padding-bottom:0} .soft{background:var(--soft)} /* on navy */ .dark{background:var(--deep);color:var(--onDark)} .dark h1,.dark h2,.dark h3,.dark h4,.dark .lead{color:#fff} .dark .kick{color:var(--yellow)} .dark .meta{color:rgba(255,255,255,.55)} .dark p{color:var(--onDark)} /* ---------------- yellow circle cursor ---------------- */ .cur{position:fixed;top:0;left:0;width:16px;height:16px;border-radius:50%;background:var(--yellow); pointer-events:none;z-index:9999;transition:width .32s var(--e),height .32s var(--e),opacity .3s} .curR{position:fixed;top:0;left:0;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--yellow); pointer-events:none;z-index:9998;transition:width .38s var(--e),height .38s var(--e),opacity .3s,border-color .3s} body.cOn .cur{width:8px;height:8px} body.cOn .curR{width:74px;height:74px;background:rgba(255,206,0,.12)} @media(hover:none),(pointer:coarse){.cur,.curR{display:none}} /* ---------------- header ---------------- */ .hdr{position:fixed;top:var(--top);left:0;right:0;height:var(--hdr);z-index:400;background:var(--white); border-bottom:1px solid var(--line); transition:height .45s var(--e),background .45s var(--e),border-color .45s var(--e),transform .5s var(--e)} .hdr.small{height:var(--hdrS)} .hdr.hide{transform:translateY(calc(-100% - var(--top)))} .hdr .wrap{height:100%;display:flex;align-items:center;gap:var(--s5)} .brand{height:48px;flex:none;position:relative;transition:height .45s var(--e)} .hdr.small .brand{height:36px} .brand img{height:100%;width:auto;transition:opacity .35s} .brand .wht{position:absolute;inset:0;opacity:0} .nav{display:flex;height:100%;margin-left:auto} .nav>.item{height:100%;display:flex;align-items:center;position:static} .nav .top{font-size:15.5px;color:var(--ink);padding:0 18px;height:100%;display:inline-flex;align-items:center;gap:8px; position:relative;transition:color .25s} .nav .top::after{content:"";position:absolute;left:18px;right:18px;bottom:0;height:2px;background:var(--yellow); transform:scaleX(0);transform-origin:left;transition:transform .4s var(--e)} .nav .top:hover,.nav .top.on{color:var(--navy)} .nav .top.on::after,.item:hover .top::after{transform:scaleX(1)} .item.has .top .car{width:5px;height:5px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor; transform:rotate(45deg) translateY(-2px);opacity:.55;transition:transform .35s var(--e);display:block} .item.has:hover .top .car{transform:rotate(225deg) translateY(2px)} .burg{display:none;width:44px;height:44px;border:1px solid var(--line);background:none;cursor:pointer; place-items:center;flex:none;margin-left:auto} .burg s{display:block;width:17px;height:1.6px;background:var(--ink);position:relative} .burg s::before,.burg s::after{content:"";position:absolute;left:0;width:17px;height:1.6px;background:var(--ink); transition:.35s var(--e)} .burg s::before{top:-5.5px}.burg s::after{top:5.5px} .burg.on s{background:transparent} .burg.on s::before{top:0;transform:rotate(45deg)} .burg.on s::after{top:0;transform:rotate(-45deg)} .prog{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--yellow);z-index:5} /* header over a dark hero */ .hdr.inv{background:transparent;border-bottom-color:rgba(255,255,255,.16)} .hdr.inv .brand .col{opacity:0} .hdr.inv .brand .wht{opacity:1} .hdr.inv .nav .top{color:#fff} .hdr.inv .burg s,.hdr.inv .burg s::before,.hdr.inv .burg s::after{background:#fff} .hdr.inv .burg{border-color:rgba(255,255,255,.3)} /* ---------------- mega menu: description | list | preview ---------------- */ .mega{position:absolute;top:100%;left:0;right:0;background:var(--white);border-top:1px solid var(--line); opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s var(--e),visibility .3s; border-bottom:1px solid var(--line)} .item.has:hover .mega{opacity:1;visibility:visible;pointer-events:auto} .mega .in{display:grid;grid-template-columns:1fr 1.05fr 1.15fr;gap:clamp(40px,4.5vw,80px); padding:var(--s6) 0;max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad); align-items:start} /* left: title, description, button, with a divider */ .mega .desc{border-right:1px solid var(--line);padding-right:clamp(30px,3.5vw,64px);min-height:230px} .mega .desc .btnY{margin-top:var(--s2)} .mega .desc h4{font-size:26px;font-weight:500;color:var(--navy);letter-spacing:-0.0242em;margin-bottom:var(--s3)} .mega .megaBtn{display:inline-flex;align-items:center;gap:12px;margin-top:var(--s4); border:1px solid var(--navy);border-radius:100px;padding:13px 26px; color:var(--navy);font-size:15px;font-weight:500;transition:.35s var(--e)} .mega .megaBtn svg{transition:transform .35s var(--e)} .mega .megaBtn:hover{background:var(--navy);color:#fff} .mega .megaBtn:hover svg{transform:translateX(4px)} /* centre: one clean list, chevron right, nothing scattered */ .mega .list{display:flex;flex-direction:column} .mega .list a{display:flex;align-items:center;justify-content:space-between;gap:24px; padding:14px 0;font-size:16.5px;color:var(--ink);position:relative; opacity:0;transform:translateY(8px); transition:color .25s,opacity .45s var(--e),transform .45s var(--e)} .mega .list a::after{content:"";width:7px;height:7px;flex:none; border-right:1.6px solid var(--muted);border-top:1.6px solid var(--muted); transform:rotate(45deg);transition:transform .3s var(--e),border-color .3s} .mega .list a:hover{color:var(--navy)} .mega .list a:hover::after{border-color:var(--navy);transform:rotate(45deg) translate(3px,-3px)} .item.has:hover .mega .list a{opacity:1;transform:none} .mega .list a:nth-child(2){transition-delay:.04s} .mega .list a:nth-child(3){transition-delay:.08s} .mega .list a:nth-child(4){transition-delay:.12s} .mega .list a:nth-child(5){transition-delay:.16s} .mega .list a:nth-child(6){transition-delay:.2s} .mega .list a:nth-child(7){transition-delay:.24s} /* right: the preview, unchanged behaviour */ .mega .prev{position:relative;overflow:hidden;min-height:262px;background:var(--soft)} .mega .prev .sh{position:absolute;inset:0;opacity:0;transition:opacity .5s var(--e)} .mega .prev .sh.on{opacity:1} .mega .prev .sh img{width:100%;height:100%;object-fit:cover} /* ---------------- search: icon at the right, full-width panel ---------------- */ .srch{width:42px;height:42px;flex:none;margin-left:var(--s3);background:none;border:0;cursor:pointer; display:grid;place-items:center;border-radius:50%;color:var(--ink);transition:.3s var(--e)} .srch svg{width:19px;height:19px} .srch:hover{background:var(--soft);color:var(--navy)} .hdr.inv .srch{color:#fff} .hdr.inv .srch:hover{background:rgba(255,255,255,.14);color:#fff} .srch.on{background:var(--navy);color:#fff} .sPanel{position:fixed;left:0;right:0;top:0;z-index:395;background:var(--white); border-bottom:1px solid var(--line);padding:calc(var(--off) + 30px) 0 var(--s6); transform:translateY(-100%);box-shadow:0 24px 60px rgba(6,42,68,.1); /* hidden once it has slid away, so its controls leave the tab order */ visibility:hidden;transition:transform .5s var(--e),visibility 0s linear .5s} .sPanel.on{transform:none;visibility:visible;transition:transform .5s var(--e),visibility 0s} .sBar{display:flex;align-items:center;gap:18px;border-bottom:2px solid var(--ink);padding-bottom:14px} .sBar .sIcon{width:22px;height:22px;flex:none;color:var(--muted)} .sBar input{flex:1;border:0;background:none;font-family:var(--f);font-size:clamp(22px,2.6vw,34px); color:var(--ink);letter-spacing:-0.0264em;padding:6px 0} .sBar input:focus{outline:none} .sBar input::placeholder{color:var(--muted)} .sBar input::-webkit-search-cancel-button{display:none} .sClose{background:none;border:0;cursor:pointer;font-family:var(--f);font-size:14px;color:var(--muted); padding:8px 4px;transition:color .25s;flex:none} .sClose:hover{color:var(--navy)} .sHint{font-size:13.5px;color:var(--muted);margin-top:14px} .sOut{margin-top:var(--s4);max-height:46vh;overflow-y:auto} .sOut a{display:block;padding:16px 0;border-bottom:1px solid var(--line);transition:padding-left .35s var(--e)} .sOut a:hover{padding-left:12px} .sOut b{display:block;font-weight:400;font-size:19px;color:var(--ink);letter-spacing:-0.0198em} .sOut span{display:block;font-size:14.5px;color:var(--body);margin-top:4px;max-width:70ch} .sOut a:hover b{color:var(--navy)} .sNone{font-size:16px;color:var(--body);padding:20px 0} .sBack{position:fixed;inset:0;background:rgba(6,42,68,.42);z-index:394;opacity:0;visibility:hidden; transition:.4s var(--e)} .sBack.on{opacity:1;visibility:visible} @media(max-width:900px){ .sOut{max-height:56vh} .sClose{display:none} } /* mobile drawer */ .mob{position:fixed;inset:0;background:var(--white);z-index:390;transform:translateY(-100%); padding:calc(var(--off) + 32px) 0 60px;overflow-y:auto; /* hidden once it has slid away, so its links leave the tab order */ visibility:hidden;transition:transform .6s var(--e),visibility 0s linear .6s} .mob.on{transform:none;visibility:visible;transition:transform .6s var(--e),visibility 0s} .mob a{display:block;color:var(--ink);font-size:26px;padding:15px 0;border-bottom:1px solid var(--line); letter-spacing:-0.033em} .mob a.sub{font-size:16px;color:var(--body);padding:11px 0 11px 22px;border:0} body.lock{overflow:hidden} /* ---------------- HERO variants ---------------- */ /* A: full-bleed film */ .heroA{position:relative;margin-top:var(--top);height:calc(100vh - var(--top));min-height:640px;overflow:hidden;display:flex;align-items:flex-end} .heroA .bg{position:absolute;inset:0} .heroA .bg video,.heroA .bg img{width:100%;height:100%;object-fit:cover} .heroA::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(6,42,68,.5) 0%,rgba(6,42,68,0) 34%,rgba(6,42,68,0) 46%,rgba(6,42,68,.8) 100%)} .heroA .wrap{position:relative;z-index:3;width:100%;padding-bottom:var(--s7)} .heroA h1,.heroA .kick{color:#fff} .heroA .kick{color:var(--yellow)} /* deliberately smaller than the global h1: this sits over film and needs air, not scale */ .heroA h1{font-size:clamp(34px,4vw,62px);line-height:1.02;letter-spacing:-0.033em;max-width:17ch} .heroA p{color:rgba(255,255,255,.9);font-size:19px;max-width:50ch;margin-top:var(--s3)} /* B: split, white panel + clear image (no scrim on the picture) */ .heroB{display:grid;grid-template-columns:1fr 1.15fr;min-height:clamp(520px,74vh,760px); margin-top:var(--off);border-bottom:1px solid var(--line)} .heroB .tx{padding:var(--s7) var(--s6) var(--s7) 0;display:flex;flex-direction:column;justify-content:center} .heroB .tx .in{max-width:640px;margin-left:auto;padding-left:var(--pad)} .heroB h1{font-size:clamp(38px,4.6vw,74px)} .heroB p{margin-top:var(--s3);font-size:18px} .heroB .im{position:relative;overflow:hidden} .heroB .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} /* C: navy band, image strip beneath */ .heroC{margin-top:var(--off);background:var(--deep);color:var(--onDark);padding:var(--s7) 0 var(--s6)} .heroC h1{color:#fff;font-size:clamp(38px,4.8vw,78px)} .heroC .kick{color:var(--yellow)} .heroC p{color:var(--onDark);font-size:18px;margin-top:var(--s3);max-width:56ch} .heroC .strip{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin-top:var(--s6)} .heroC .strip .t{height:clamp(180px,22vw,300px);overflow:hidden} .heroC .strip img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--e)} .heroC .strip .t:hover img{transform:scale(1.05)} /* D: tall picture with a floating white card */ .heroD{position:relative;margin-top:var(--off)} .heroD .im{height:clamp(440px,60vh,660px);overflow:hidden} .heroD .im img{width:100%;height:100%;object-fit:cover} .heroD .card{background:var(--white);max-width:900px;margin:-110px auto 0;position:relative;z-index:3; padding:var(--s6) var(--s6) var(--s5);border-top:3px solid var(--yellow)} .heroD .card p{margin-top:var(--s3);font-size:18px} /* ---------------- crumb ---------------- */ .crumb{font-size:13px;color:var(--muted);padding:var(--s3) 0;border-bottom:1px solid var(--line)} .crumb a:hover{color:var(--navy)} .dark .crumb{color:rgba(255,255,255,.5);border-color:var(--lineD)} /* ============================================================ Statement + collage. One coordinated unit: the navy block carries the claim in three columns, and the seven-image collage sits flush against its bottom edge as its footing. Same 4px gutter language throughout. ============================================================ */ .sec.stmt{padding:clamp(90px,10vw,160px) 0 clamp(52px,5.5vw,88px)} .stmt-top{display:grid;grid-template-columns:1.2fr .95fr .62fr;gap:clamp(36px,4.5vw,80px);align-items:start} .stmt-top h2{font-size:clamp(30px,3.6vw,56px);max-width:22ch} .stmt-top .lead{max-width:26ch} .stmt-im{position:relative;overflow:hidden;aspect-ratio:1/1;border-radius:50%} @supports not (aspect-ratio:1/1){ /* older Safari: hold the square with padding, or the circle has no height */ .stmt-im{height:0;padding-top:100%} } .stmt-im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform} /* three columns of claim, divided by hairlines, each drawing a yellow rule */ .stmt-grid{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(56px,6vw,96px); border-top:1px solid var(--line)} .sitem{display:block;position:relative;padding:var(--s5) var(--s5) 0 0; border-right:1px solid var(--line);transition:padding-left .45s var(--e)} .sitem:last-child{border-right:0} .sitem+.sitem{padding-left:var(--s5)} .sitem .n{display:block;font-size:13px;color:var(--yellow);font-weight:500;margin-bottom:var(--s3)} .sitem h3{color:var(--ink);margin-bottom:12px;transition:color .3s} .sitem p{color:var(--body);font-size:15.5px;max-width:36ch} .sitem i{position:absolute;left:0;top:-1px;height:2px;width:100%;background:var(--yellow); transform:scaleX(0);transform-origin:left;transition:transform 1s var(--e2)} .sitem+.sitem i{left:var(--s5);width:calc(100% - var(--s5))} .stmt-grid.in .sitem i{transform:scaleX(.2)} .stmt-grid.in .sitem:nth-child(2) i{transition-delay:.12s} .stmt-grid.in .sitem:nth-child(3) i{transition-delay:.24s} .sitem:hover i{transform:scaleX(1);transition-duration:.6s} .sitem:hover h3{color:var(--navy)} /* yellow is 1.5:1 on white, never text here */ .sitem:hover{padding-left:calc(var(--s5) + 12px)} .sitem:first-child:hover{padding-left:12px} /* the collage is the statement's footing: flush, no white gap */ .stmt + .mos{margin-top:0} @media(max-width:1000px){ .stmt-top{grid-template-columns:1fr 1fr} .stmt-im{grid-column:1/-1;aspect-ratio:1/1;max-width:420px; margin:var(--s3) auto 0} @supports not (aspect-ratio:1/1){ .stmt-im{height:0;padding-top:100%} } .stmt-grid{grid-template-columns:1fr} .sitem,.sitem+.sitem{border-right:0;border-bottom:1px solid var(--line);padding:var(--s4) 0} .sitem:last-child{border-bottom:0} .sitem+.sitem i{left:0;width:100%} .sitem:hover,.sitem:first-child:hover{padding-left:12px} } @media(max-width:700px){ .stmt-top{grid-template-columns:1fr;gap:var(--s4)} } /* ---------------- statement / two column ---------------- */ .two{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(40px,6vw,120px);align-items:start} .two h2{max-width:15ch} .two .col>p+p{margin-top:var(--s3)} .two .col .lead{margin-bottom:var(--s3)} /* ---------------- mosaic ---------------- */ /* collage runs flush: no gutters. The dark ground stops any sub-pixel seam between grid tracks reading as a white line. */ .mos{display:grid;gap:0;grid-auto-flow:dense;grid-template-columns:repeat(4,1fr); grid-auto-rows:clamp(150px,16vw,240px);background:var(--deep)} .mos .t{position:relative;overflow:hidden;background:var(--deep);display:block} .mos .t img{width:100%;height:100%;object-fit:cover;transform:scale(1.005); transition:transform 1.5s var(--e)} .mos .t:hover img{transform:scale(1.06)} .mos .w2{grid-column:span 2}.mos .h2{grid-row:span 2} /* image stays clear: caption band only appears on hover, bottom third only */ .mos .t::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%; background:linear-gradient(180deg,transparent,rgba(6,42,68,.88));opacity:0;transition:opacity .45s var(--e)} .mos .lab{position:absolute;left:22px;bottom:18px;font-size:13.5px;color:#fff;z-index:2; opacity:0;transform:translateY(10px);transition:.45s var(--e)} .mos .t:hover::after{opacity:1} .mos .t:hover .lab{opacity:1;transform:none} /* ---------------- feature: solid panel beside a clear picture ---------------- */ .feat{display:grid;grid-template-columns:1fr 1.15fr;min-height:clamp(430px,58vh,640px)} .feat .im img{object-position:50% 42%} .feat.flip .im{order:2} .feat .im{position:relative;overflow:hidden} .feat .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .feat .pan{background:var(--deep);color:var(--onDark);display:flex;align-items:center; padding:var(--s7) clamp(32px,4.2vw,72px)} .feat .pan.lt{background:var(--soft);color:var(--body)} .feat .pan .in{max-width:560px} .feat .pan h2{color:#fff} .feat .pan.lt h2{color:var(--ink)} .feat .pan .kick{color:var(--yellow)} .feat .pan.lt .kick{color:var(--navy)} .feat .pan p{margin-top:var(--s3)} .feat .pan.lt p{color:var(--body)} .facts{margin-top:var(--s5);border-top:1px solid var(--lineD)} .facts div{display:grid;grid-template-columns:190px 1fr;gap:var(--s3);padding:13px 0; border-bottom:1px solid rgba(255,255,255,.1);font-size:15px} .facts dt{color:rgba(255,255,255,.55)} .facts dd{color:#fff} .pan.lt .facts{border-top-color:var(--line)} .pan.lt .facts div{border-bottom-color:var(--line)} .pan.lt .facts dt{color:var(--muted)} .pan.lt .facts dd{color:var(--ink)} /* ---------------- four tall panels ---------------- */ .pans{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)} .pan4{position:relative;height:clamp(520px,70vh,760px);overflow:hidden;display:flex;align-items:flex-end} .pan4 img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--e)} .pan4::after{content:"";position:absolute;left:0;right:0;bottom:0;height:62%; background:linear-gradient(180deg,transparent,rgba(6,42,68,.9));transition:height .5s var(--e)} .pan4:hover img{transform:scale(1.07)} .pan4:hover::after{height:82%} .pan4 .tx{position:relative;z-index:3;padding:var(--s4) 28px var(--s5)} .pan4 .n{font-size:13px;color:var(--yellow);margin-bottom:12px} .pan4 h3{color:#fff;margin-bottom:10px} .pan4 p{font-size:15px;color:rgba(255,255,255,.85);max-height:0;opacity:0;overflow:hidden; transition:max-height .6s var(--e),opacity .5s var(--e)} .pan4:hover p{max-height:200px;opacity:1} /* ---------------- statement band ---------------- */ .band{background:var(--deep);position:relative;overflow:hidden;padding:clamp(80px,10vw,150px) 0} .band .im{position:absolute;inset:0;opacity:.3} .band .im img{width:100%;height:100%;object-fit:cover} .band .wrap{position:relative;z-index:3} .band p{font-size:clamp(28px,4vw,60px);line-height:1.08;letter-spacing:-0.0396em;color:#fff;max-width:20ch} .band .meta{color:var(--yellow);margin-top:var(--s4)} /* ---------------- trio ---------------- */ .trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.2vw,36px)} .tri{display:block} .tri .im{height:clamp(300px,32vw,440px);overflow:hidden;margin-bottom:var(--s3);position:relative} .tri .im img{width:100%;height:100%;object-fit:cover;transition:transform 1.5s var(--e)} .tri:hover .im img{transform:scale(1.06)} .tri h3{margin:10px 0} .tri p{font-size:15.5px} .more{display:inline-flex;align-items:center;gap:11px;margin-top:var(--s3);font-size:14.5px;color:var(--navy); border-bottom:1px solid var(--line);padding-bottom:6px;transition:.35s var(--e)} .tri:hover .more{border-bottom-color:var(--yellow);gap:16px} .dark .more{color:#fff;border-bottom-color:var(--lineD)} /* ---------------- gallery ---------------- */ .gal{display:flex;gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none; padding-bottom:2px;cursor:grab} .gal.drag{cursor:grabbing} .gal::-webkit-scrollbar{display:none} .gal .g{flex:none;width:clamp(260px,25vw,420px);height:clamp(330px,44vh,540px);position:relative; overflow:hidden;scroll-snap-align:start;background:var(--soft)} .gal .g img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--e)} .gal .g:hover img{transform:scale(1.05)} .gal .g span{position:absolute;left:22px;bottom:18px;font-size:13px;color:#fff;z-index:2} .gal .g::after{content:"";position:absolute;left:0;right:0;bottom:0;height:38%; background:linear-gradient(180deg,transparent,rgba(6,42,68,.85))} /* ---------------- index rows ---------------- */ .rows{border-top:1px solid var(--line)} .rows>*{display:grid;grid-template-columns:64px 4fr 6fr;gap:var(--s5);padding:var(--s4) 0; border-bottom:1px solid var(--line);align-items:start;transition:padding .45s var(--e)} .rows a:hover{padding-left:14px} .rows em{font-style:normal;font-size:13px;color:var(--yellow);padding-top:6px;font-weight:500} .rows h3{color:var(--ink)} .rows a:hover h3{color:var(--navy)} .rows p{font-size:15.5px} .dark .rows,.dark .rows>*{border-color:var(--lineD)} .dark .rows h3{color:#fff} .dark .rows a:hover h3{color:var(--yellow)} .dark .rows p{color:var(--onDark2)} /* ---------------- pairs ---------------- */ .pairs{border-top:1px solid var(--line)} .pairs div{display:grid;grid-template-columns:1fr 2.2fr;gap:var(--s5);padding:var(--s3) 0; border-bottom:1px solid var(--line);font-size:16px} .pairs dt{color:var(--muted)} .pairs dd{color:var(--ink)} .dark .pairs,.dark .pairs div{border-color:var(--lineD)} .dark .pairs dt{color:rgba(255,255,255,.55)} .dark .pairs dd{color:#fff} /* contact details: the values are links, and one row carries the icons */ .pairs dd a{border-bottom:1px solid transparent;transition:border-color .3s,color .3s} .pairs dd a:hover{color:var(--yellow);border-bottom-color:var(--yellow)} .pairs dd .fSoc{margin-top:-6px} /* ---------------- accordion ---------------- */ .acc{border-top:1px solid var(--line)} .acc details{border-bottom:1px solid var(--line)} .acc summary{list-style:none;cursor:pointer;padding:var(--s3) 0;display:grid; grid-template-columns:64px 1fr 24px;gap:var(--s5);align-items:baseline} .acc summary::-webkit-details-marker{display:none} .acc summary em{font-style:normal;font-size:13px;color:var(--yellow);font-weight:500} .acc summary h4{font-size:clamp(18px,1.5vw,22px);font-weight:400} .acc summary i{width:12px;height:1.5px;background:var(--ink);position:relative;justify-self:end;top:-6px} .acc summary i::after{content:"";position:absolute;inset:0;background:var(--ink);transform:rotate(90deg); transition:transform .35s var(--e)} .acc details[open] summary i::after{transform:rotate(0)} .acc .body{padding:0 24px var(--s4) calc(64px + var(--s5))} .acc .body p{font-size:16px} .dark .acc,.dark .acc details{border-color:var(--lineD)} .dark .acc summary i,.dark .acc summary i::after{background:#fff} /* ---------------- MAP ---------------- */ .map{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,90px);align-items:center} .map .plot{position:relative;background:var(--soft);padding:var(--s5)} .dark .map .plot{background:var(--deep2)} .map svg{width:100%;height:auto;display:block;overflow:visible} .map .land{fill:#DDE5EA;stroke:#C3D0D8;stroke-width:2;transition:fill .6s var(--e)} .dark .map .land{fill:rgba(255,255,255,.1);stroke:rgba(255,255,255,.25)} .map .west{fill:var(--navy);opacity:0;transition:opacity 1s var(--e) .3s} .map.in .west{opacity:.9} .map .dot{fill:var(--navy)} .dark .map .dot{fill:#fff} .map .lbl{font-size:15px;fill:var(--muted);font-family:var(--f)} .dark .map .lbl{fill:rgba(255,255,255,.6)} .map .pin{fill:var(--yellow)} .map .ping{fill:none;stroke:var(--yellow);stroke-width:2;transform-origin:center;transform-box:fill-box} .map.in .ping{animation:ping 2.6s var(--e) infinite} @keyframes ping{ 0%{transform:scale(.5);opacity:.9} 70%{transform:scale(2.6);opacity:0} 100%{transform:scale(2.6);opacity:0} } .map .pinL{font-size:17px;fill:var(--ink);font-family:var(--f);font-weight:500} .dark .map .pinL{fill:#fff} .map .draw{stroke-dasharray:2400;stroke-dashoffset:2400;transition:stroke-dashoffset 2.4s var(--e2)} .map.in .draw{stroke-dashoffset:0} .map .note{font-size:13px;color:var(--muted);margin-top:var(--s3)} /* ---------------- form ---------------- */ .form{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)} .form .fw{grid-column:1/-1} .form label{display:block;font-size:13px;color:var(--muted);margin-bottom:9px} .form input,.form textarea,.form select{width:100%;border:0;border-bottom:1px solid var(--line);background:none; font-family:var(--f);font-size:17px;color:var(--ink);padding:11px 0;transition:border-color .3s} .form textarea{min-height:120px;resize:vertical} .form input:focus,.form textarea:focus,.form select:focus{outline:none;border-bottom-color:var(--yellow)} /* ---------------- buttons ---------------- */ .btn{display:inline-flex;align-items:center;gap:12px;font-size:15px;color:var(--navy); border-bottom:1px solid var(--line);padding-bottom:8px;transition:.35s var(--e)} .btn svg{transition:transform .35s var(--e)} .btn:hover{border-bottom-color:var(--yellow);gap:17px} .btn:hover svg{transform:translateX(4px)} .dark .btn{color:#fff;border-bottom-color:var(--lineD)} /* feature panels are navy but are not .dark, so the link needs the same treatment */ .feat .pan .btn{color:#fff;border-bottom-color:var(--lineD)} .feat .pan .btn:hover{color:var(--yellow);border-bottom-color:var(--yellow)} .feat .pan.lt .btn{color:var(--navy);border-bottom-color:var(--line)} .feat .pan.lt .btn:hover{color:var(--navy);border-bottom-color:var(--yellow)} .dark .btn:hover{color:var(--yellow);border-bottom-color:var(--yellow)} .btn.fill{background:var(--navy);color:#fff;border:0;padding:16px 26px} .btn.fill:hover{background:var(--yellow);color:var(--ink)} .btn.y{background:var(--yellow);color:var(--ink);border:0;padding:16px 26px} .btn.y:hover{background:var(--ink);color:#fff} .head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s5);flex-wrap:wrap; margin-bottom:clamp(36px,4.2vw,64px)} .head h2{max-width:18ch} .head>p{max-width:38ch;font-size:16px} /* ---------------- ANIMATION ---------------- */ .rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--e),transform .9s var(--e)} .rv.in{opacity:1;transform:none} /* image wipe */ .wipe{clip-path:inset(100% 0 0 0);transition:clip-path 1.25s var(--e2)} .wipe.in{clip-path:inset(0 0 0 0)} /* headline, word by word */ .wr{display:inline-block;overflow:hidden;vertical-align:bottom; padding-bottom:.2em;margin-bottom:-.2em} .wr>s{display:inline-block;text-decoration:none;transform:translateY(130%); transition:transform .95s var(--e2)} .in .wr>s,.wr.in>s{transform:none} /* rule that draws itself */ .ln{position:relative} .ln::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--yellow); transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--e2)} .ln.in::after{transform:scaleX(1)} /* counter/stagger helper */ .stg>*{opacity:0;transform:translateY(20px);transition:opacity .8s var(--e),transform .8s var(--e)} .stg.in>*{opacity:1;transform:none} .stg.in>*:nth-child(2){transition-delay:.09s} .stg.in>*:nth-child(3){transition-delay:.18s} .stg.in>*:nth-child(4){transition-delay:.27s} .stg.in>*:nth-child(5){transition-delay:.36s} .stg.in>*:nth-child(6){transition-delay:.45s} .stg.in>*:nth-child(7){transition-delay:.54s} /* ============================================================ FOOTER Navy ground with three soft glows behind it, a ring button for contact, the live market strip, then the columns. No giant word. ============================================================ */ footer{background:var(--deep);color:var(--onDark2);position:relative;overflow:hidden;isolation:isolate} .fGlow{position:absolute;inset:0;z-index:0;pointer-events:none} .fGlow i{position:absolute;border-radius:50%;filter:blur(90px)} .fGlow i:nth-child(1){width:520px;height:520px;left:-140px;top:-180px; background:radial-gradient(circle,rgba(255,206,0,.30),transparent 68%)} .fGlow i:nth-child(2){width:640px;height:640px;right:-190px;top:6%; background:radial-gradient(circle,rgba(3,68,109,.9),transparent 66%)} .fGlow i:nth-child(3){width:460px;height:460px;left:36%;bottom:-230px; background:radial-gradient(circle,rgba(255,206,0,.16),transparent 70%)} footer > *:not(.fGlow){position:relative;z-index:1} .fTop{border-bottom:1px solid var(--lineD)} .fTop .wrap{padding-top:var(--s8);padding-bottom:var(--s8)} .fCta{display:flex;align-items:center;justify-content:space-between;gap:var(--s6);flex-wrap:wrap} .fCta h2{color:#fff;max-width:17ch} .fCta .kick{color:var(--yellow)} /* flex column centres the stack itself; grid only centred each item in its own row and left the pair sitting at the top of the circle */ .fRing{width:clamp(148px,13.5vw,188px);height:clamp(148px,13.5vw,188px);border-radius:50%;flex:none; border:1px solid rgba(255,255,255,.28); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px; padding:22px;text-align:center;line-height:1.25; color:#fff;position:relative;transition:.45s var(--e);isolation:isolate} .fRing span{font-size:16px;line-height:1.28;letter-spacing:-0.0154em;display:block} .fRing svg{width:20px;height:20px;flex:none;display:block;transition:transform .45s var(--e)} .fRing::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--yellow); transform:scale(.25);opacity:0;transition:.5s var(--e);z-index:-1} .fRing:hover{border-color:var(--yellow);color:var(--ink)} .fRing:hover::before{transform:scale(1);opacity:1} .fRing:hover svg{transform:translateX(5px)} .fMid .wrap{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--s5); padding-top:var(--s7);padding-bottom:var(--s6)} .fMid img.lg{height:46px;margin-bottom:var(--s3)} /* the footer mark returns you home */ .fLogo{display:inline-block;transition:opacity .3s var(--e),transform .4s var(--e)} .fLogo:hover{opacity:.82;transform:translateY(-2px)} .fLogo:focus-visible{outline:2px solid var(--yellow);outline-offset:6px} .fMid p{font-size:15px;max-width:32ch;color:var(--onDark2)} .fMid h4{color:#fff;font-size:14px;font-weight:500;margin-bottom:var(--s2); padding-bottom:10px;border-bottom:1px solid var(--lineD)} .fMid li{list-style:none;padding:7px 0;font-size:15px} .fMid li a{position:relative;transition:padding-left .3s var(--e),color .3s} .fMid li a::before{content:"";position:absolute;left:0;top:50%;width:7px;height:1px;background:var(--yellow); transform:scaleX(0);transform-origin:left;transition:transform .3s var(--e)} .fMid li a:hover{color:var(--yellow);padding-left:12px} .fMid li a:hover::before{transform:scaleX(1)} .fSoc{display:flex;gap:10px;align-items:center} .fSoc a{width:36px;height:36px;border-radius:50%;border:1px solid var(--lineD); display:grid;place-items:center;color:rgba(255,255,255,.75);transition:.3s var(--e)} .fSoc a svg{width:16px;height:16px} .fSoc a:hover{background:var(--yellow);border-color:var(--yellow);color:var(--ink);transform:translateY(-2px)} .fCon{display:flex;flex-wrap:wrap;gap:var(--s6);align-items:center; padding-top:var(--s4);padding-bottom:var(--s4);border-top:1px solid var(--lineD)} .fCon .bit{display:flex;flex-direction:column;gap:3px} .fCon .bit span{font-size:12px;color:rgba(255,255,255,.45)} .fCon .bit b{font-weight:400;color:#fff;font-size:15px} .fCon .bit b a:hover{color:var(--yellow)} /* the telephone block carries two numbers, stacked */ .fCon .bit b+b{margin-top:2px} /* the social row closes the contact line, hard right */ .fCon .fSoc{margin-left:auto} .fBot{border-top:1px solid var(--lineD)} .fBot .wrap{display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;align-items:center; padding-top:var(--s3);padding-bottom:var(--s4);font-size:13px;color:rgba(255,255,255,.45)} .fLegal{display:flex;gap:var(--s4);flex-wrap:wrap;margin-left:auto} .fLegal a:hover{color:var(--yellow)} .toTop{display:inline-flex;align-items:center;gap:10px;color:#fff;flex:none} .toTop:hover{color:var(--yellow)} /* ---------------- responsive ---------------- */ @media(max-width:1240px){ .nav{display:none} .burg{display:grid} .mega{display:none} } @media(max-width:1000px){ .pans{grid-template-columns:1fr 1fr} .pan4 p{max-height:200px;opacity:1} .trio{grid-template-columns:1fr} .fMid .wrap{grid-template-columns:1fr 1fr} } @media(max-width:900px){ :root{--pad:20px;--hdr:64px;--hdrS:58px;--s7:64px;--s8:80px;--s9:96px} .brand{height:36px} .two{grid-template-columns:1fr;gap:var(--s4)} .mos{grid-template-columns:1fr 1fr;grid-auto-rows:34vw;gap:0} .mos .t::after,.mos .lab{opacity:1;transform:none} .feat{grid-template-columns:1fr} .feat.flip .im{order:0} .feat .im{height:56vh} .feat .pan{padding:var(--s6) var(--pad)} .heroB{grid-template-columns:1fr} .heroB .tx{padding:var(--s6) var(--pad)} .heroB .tx .in{padding-left:0} .heroB .im{height:52vh} .heroC .strip{grid-template-columns:1fr} .heroC .strip .t{height:44vw} .heroD .card{margin:-60px var(--pad) 0;padding:var(--s5) var(--s4)} .map{grid-template-columns:1fr;gap:var(--s5)} .rows>*{grid-template-columns:44px 1fr;gap:var(--s3)} .rows>*>p{grid-column:2} .pairs div{grid-template-columns:1fr;gap:4px} .acc summary{grid-template-columns:44px 1fr 20px;gap:var(--s3)} .acc .body{padding-left:68px} .form{grid-template-columns:1fr} .facts div{grid-template-columns:1fr;gap:3px} .heroA{height:auto;min-height:0;padding-top:calc(var(--hdr) + 120px)} } @media(max-width:620px){ .pans{grid-template-columns:1fr} .fMid .wrap{grid-template-columns:1fr} .fCon{gap:var(--s4)} .fCon .fSoc{margin-left:0;flex-basis:100%} } @media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} .rv,.stg>*{opacity:1;transform:none} .wipe{clip-path:none} .wr>s{transform:none} } /* ============================================================ Africa locator: continent silhouette, Ghana lit, callout card. Replaces the photo-and-panel concession block on the homepage. ============================================================ */ .loc{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(40px,6vw,110px);align-items:center} .amap{position:relative} .amap svg{width:100%;height:auto;display:block;overflow:visible} .amap .cont{fill:#0C3A5C;stroke:#03203A;stroke-width:1.1;stroke-linejoin:round; vector-effect:non-scaling-stroke} .amap .gha{stroke:#03203A;stroke-width:1.1;stroke-linejoin:round; vector-effect:non-scaling-stroke} .amap .gha{fill:var(--yellow)} .amap .lead{stroke:rgba(255,206,0,.55);stroke-width:2;fill:none} .amap .dot{fill:#fff} .amap .halo{transform-origin:238px 457px;animation:halo 3.4s ease-in-out infinite} @keyframes halo{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:.9;transform:scale(1.06)}} .pinCard{position:absolute;left:33.5%;top:41.5%;background:var(--white); border:1px solid rgba(255,255,255,.16);box-shadow:0 10px 30px rgba(0,0,0,.28); padding:14px 22px 14px 18px;border-radius:10px; display:flex;align-items:center;gap:14px;transition:.35s var(--e)} .pinCard .pTx{display:block} .pinCard b{display:block;color:var(--navy);font-weight:500;font-size:16px; letter-spacing:-0.0154em;white-space:nowrap} .pinCard .pTx span{display:block;color:var(--muted);font-size:14px;margin-top:2px;white-space:nowrap} /* a live marker in front of the name: a solid dot with a ring leaving it */ .pinCard .pLive{position:relative;width:11px;height:11px;border-radius:50%; background:var(--yellow);flex:none} .pinCard .pLive::before,.pinCard .pLive::after{content:"";position:absolute;inset:0; border-radius:50%;border:1.5px solid var(--yellow);animation:nmLive 2.6s var(--e2) infinite} .pinCard .pLive::after{animation-delay:1.3s} @keyframes nmLive{ 0% {transform:scale(1); opacity:.85} 70% {opacity:.08} 100%{transform:scale(3.1); opacity:0} } .pinCard:hover{border-color:var(--yellow);transform:translateY(-2px)} .pinCard:hover .pLive::before,.pinCard:hover .pLive::after{animation-duration:1.7s} @media(prefers-reduced-motion:reduce){ .pinCard .pLive::before,.pinCard .pLive::after{animation:none;opacity:.3} } .loc .kick{color:var(--yellow)} .loc h2{color:#fff;max-width:15ch} .loc h2 em{font-style:normal;color:var(--yellow)} .loc>div>p{color:var(--onDark);margin-top:var(--s3);max-width:46ch} .locRule{height:1px;background:var(--lineD);margin:var(--s5) 0} .locItem{display:grid;grid-template-columns:16px 1fr;gap:16px;align-items:start} .locItem i{width:9px;height:9px;border-radius:50%;background:var(--yellow);margin-top:8px} .locItem p{color:var(--onDark);font-size:17px;line-height:1.55;letter-spacing:-0.011em; max-width:46ch;margin:0} .pill{display:inline-flex;align-items:center;gap:14px;margin-top:var(--s5); border:1px solid rgba(255,255,255,.34);border-radius:100px;padding:16px 30px; color:#fff;font-size:15px;font-weight:500;transition:.35s var(--e)} .pill svg{transition:transform .35s var(--e)} .pill:hover{background:var(--yellow);border-color:var(--yellow);color:var(--ink)} .pill:hover svg{transform:translateX(4px)} @media(max-width:900px){ .loc{grid-template-columns:1fr;gap:var(--s5)} .pinCard{left:30%;top:40%;padding:12px 16px} .pinCard b{font-size:14px}.pinCard .pTx span{font-size:12.5px} } /* statement block, dark variant (kept for reuse on navy pages) */ .sec.dark .stmt-grid{border-top-color:var(--lineD)} .sec.dark .sitem{border-right-color:var(--lineD)} .sec.dark .sitem h3{color:#fff} .sec.dark .sitem p{color:var(--onDark2)} .sec.dark .sitem:hover h3{color:var(--yellow)} @media(max-width:1000px){ .sec.dark .sitem,.sec.dark .sitem+.sitem{border-bottom-color:var(--lineD)} } /* ============================================================ Gold strip, above the header. The space is always reserved, so a failed fetch shows the brand line instead of a gap. ============================================================ */ .gStrip{position:fixed;top:0;left:0;right:0;height:var(--top);z-index:410; background:var(--deep);border-bottom:1px solid rgba(255,255,255,.1); transition:transform .5s var(--e)} .gStrip.hide{transform:translateY(-100%)} .gStrip .wrap{height:100%;display:flex;align-items:center;gap:var(--s4)} .gStrip .gL{display:flex;align-items:center;gap:14px;min-width:0} .gStrip .dot{width:6px;height:6px;border-radius:50%;background:var(--yellow);flex:none; animation:gPulse 2.6s ease-in-out infinite} @keyframes gPulse{0%,100%{opacity:1}50%{opacity:.3}} .gStrip .gK{font-size:12px;color:var(--yellow);flex:none} .gStrip .gV{font-size:13.5px;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap} .gStrip .gV em{font-style:normal;color:rgba(255,255,255,.5);margin-left:7px} .gStrip .gL{margin-left:auto} .gStrip .gK[hidden]{display:none} .gStrip .gSay{font-size:12.5px;color:rgba(255,255,255,.6)} @media(max-width:760px){ :root{--top:32px} .gStrip .gK{display:none} .gStrip .gV{font-size:12.5px} } /* ---------------- cookie notice ---------------- A full width bar that sits on the site grid rather than a floating widget. White, hairline top rule, no drop shadow. */ .ckBar{position:fixed;left:0;right:0;bottom:0;z-index:420;background:var(--white); border-top:1px solid var(--line);transform:translateY(100%);transition:transform .6s var(--e)} .ckBar.on{transform:none} .ckIn{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(24px,3.5vw,56px); align-items:center;padding:var(--s4) 0} .ckMark{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);flex:none; display:grid;place-items:center} .ckMark i{width:9px;height:9px;border-radius:50%;background:var(--yellow);display:block} .ckTx h5{font-size:15px;font-weight:500;color:var(--ink);letter-spacing:-0.0132em;margin-bottom:4px} .ckTx p{color:var(--body);font-size:14.5px;line-height:1.55;margin:0;max-width:74ch} .ckTx a{color:var(--navy);border-bottom:1px solid var(--line)} .ckTx a:hover{border-bottom-color:var(--navy)} .ckBtns{display:flex;gap:12px;flex:none} .ckBtns button{font-family:var(--f);font-size:14.5px;font-weight:500;cursor:pointer; padding:13px 28px;border-radius:100px;transition:.3s var(--e);white-space:nowrap} .ckNo{background:none;border:1px solid var(--line);color:var(--ink)} .ckNo:hover{border-color:var(--ink)} .ckYes{background:var(--navy);border:1px solid var(--navy);color:#fff} .ckYes:hover{background:var(--yellow);border-color:var(--yellow);color:var(--ink)} @media(max-width:860px){ .ckIn{grid-template-columns:1fr;gap:var(--s3)} .ckMark{display:none} .ckBtns button{flex:1} } .ckBtns button{flex:1} } @media(max-width:1000px){ .fMid .wrap{grid-template-columns:1fr 1fr} } @media(max-width:700px){ .fMid .wrap{grid-template-columns:1fr} .fCta{flex-direction:column;align-items:flex-start} .fBot .wrap{flex-direction:column;align-items:flex-start} .fGlow i{filter:blur(60px)} } /* ============================================================ DOCUMENT PAGES · legal and policy No photography. A plain masthead, a sticky contents rail and long-form prose that can be read, printed and cited. ============================================================ */ .docHead{margin-top:var(--off);border-bottom:1px solid var(--line);background:var(--white)} .docHead .wrap{padding-top:var(--s7);padding-bottom:var(--s6)} .docHead .kick{color:var(--navy)} .docHead h1{font-size:clamp(38px,4.4vw,64px);max-width:16ch} .docHead p{margin-top:var(--s3);font-size:18px;max-width:56ch} .docMeta{display:flex;gap:var(--s5);flex-wrap:wrap;margin-top:var(--s5); padding-top:var(--s3);border-top:1px solid var(--line)} .docMeta div{display:flex;flex-direction:column;gap:3px} .docMeta span{font-size:12px;color:var(--muted)} .docMeta b{font-weight:400;font-size:15px;color:var(--ink)} .docNote{background:var(--soft);border-left:2px solid var(--yellow)} .docNote .wrap{padding-top:var(--s4);padding-bottom:var(--s4)} .docNote p{font-size:14.5px;color:var(--body);max-width:88ch;margin:0} .docNote strong{color:var(--ink);font-weight:500} .doc{padding:var(--s7) 0 var(--s8)} .doc .in{display:grid;grid-template-columns:250px 1fr;gap:clamp(40px,6vw,110px);align-items:start} .docToc{position:sticky;top:calc(var(--off) + 28px)} .docToc h5{font-size:12px;color:var(--muted);font-weight:500;margin-bottom:var(--s2); padding-bottom:10px;border-bottom:1px solid var(--line)} .docToc a{display:block;padding:8px 0;font-size:14.5px;color:var(--body); border-left:2px solid transparent;padding-left:12px;margin-left:-12px;transition:.25s} .docToc a:hover,.docToc a.on{color:var(--navy);border-left-color:var(--yellow)} .docBody{max-width:74ch} .docBody section{padding-bottom:var(--s6)} .docBody section + section{border-top:1px solid var(--line);padding-top:var(--s6)} .docBody h2{font-size:clamp(21px,1.9vw,26px);letter-spacing:-0.022em;margin-bottom:var(--s3); display:flex;gap:16px;align-items:baseline} .docBody h2 em{font-style:normal;font-size:13px;color:var(--yellow);font-weight:500;flex:none; transform:translateY(-2px)} .docBody p{font-size:16.5px;line-height:1.72;margin-bottom:var(--s2);color:var(--body)} .docBody p:last-child{margin-bottom:0} .docBody ul{list-style:none;margin:var(--s2) 0} .docBody li{font-size:16.5px;line-height:1.7;padding:9px 0 9px 22px;position:relative;color:var(--body)} .docBody li::before{content:"";position:absolute;left:0;top:19px;width:7px;height:1px;background:var(--yellow)} .docBody strong{color:var(--ink);font-weight:500} .docBody .tbd{background:rgba(255,206,0,.16);padding:1px 6px;color:var(--ink)} @media(max-width:900px){ .doc .in{grid-template-columns:1fr;gap:var(--s4)} .docToc{position:static;border-bottom:1px solid var(--line);padding-bottom:var(--s3)} .docToc a{display:inline-block;padding:6px 14px 6px 0;border-left:0;margin-left:0} } @media print{ .hdr,.gStrip,.mob,.sPanel,.ckBar,footer,.docToc,.cur,.curR{display:none!important} .docHead{margin-top:0} .doc .in{grid-template-columns:1fr} body{font-size:11pt} } /* ============================================================ 404 ============================================================ */ .nf{margin-top:var(--off);min-height:calc(100vh - var(--off));background:var(--deep); display:flex;align-items:center;position:relative;overflow:hidden} .nf .glow{position:absolute;inset:0;pointer-events:none} .nf .glow i{position:absolute;border-radius:50%;filter:blur(100px)} .nf .glow i:nth-child(1){width:560px;height:560px;left:-160px;top:-140px; background:radial-gradient(circle,rgba(255,206,0,.26),transparent 68%)} .nf .glow i:nth-child(2){width:680px;height:680px;right:-200px;bottom:-240px; background:radial-gradient(circle,rgba(3,68,109,.9),transparent 66%)} .nf .wrap{position:relative;z-index:2;padding-top:var(--s7);padding-bottom:var(--s7)} .nf .code{display:flex;align-items:center;gap:20px;margin-bottom:var(--s4)} .nf .code b{font-weight:400;font-size:clamp(72px,11vw,168px);line-height:.9;letter-spacing:-0.055em; color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.4)} .nf .code i{width:clamp(16px,2vw,26px);height:clamp(16px,2vw,26px);border-radius:50%; background:var(--yellow);flex:none;animation:gPulse 2.6s ease-in-out infinite} .nf h1{color:#fff;font-size:clamp(30px,3.8vw,56px);max-width:18ch} .nf p{color:var(--onDark);font-size:18px;max-width:52ch;margin-top:var(--s3)} .nfLinks{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:var(--s6); border-top:1px solid var(--lineD)} .nfLinks a{padding:var(--s4) var(--s3) var(--s4) 0;border-right:1px solid var(--lineD); border-bottom:1px solid var(--lineD);transition:padding-left .35s var(--e)} .nfLinks a:last-child{border-right:0} .nfLinks a:hover{padding-left:12px} .nfLinks b{display:block;color:#fff;font-weight:400;font-size:17px;letter-spacing:-0.0176em} .nfLinks span{display:block;font-size:14px;color:var(--onDark2);margin-top:5px} .nfLinks a:hover b{color:var(--yellow)} @media(max-width:900px){ .nfLinks{grid-template-columns:1fr 1fr} } @media(max-width:560px){ .nfLinks{grid-template-columns:1fr} .nfLinks a{border-right:0} } .fCon .bit.addr b{line-height:1.45;max-width:36ch} /* ---------------- value chain: four separate white stages ---------------- */ .feat .pan.wt{background:var(--white);color:var(--body)} .feat .pan.wt h2{color:var(--ink)} .feat .pan.wt .kick{color:var(--navy)} .feat .pan.wt p{color:var(--body)} .feat .pan.wt .btn{color:var(--navy);border-bottom-color:var(--line)} .feat .pan.wt .btn:hover{color:var(--navy);border-bottom-color:var(--yellow)} .stg4{border-top:1px solid var(--line)} .stg4:first-of-type{border-top:0} .sNum{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums; display:flex;align-items:center;gap:12px;margin-bottom:16px} .sNum::after{content:"";height:1px;width:44px;background:var(--line)} .stgLead{font-size:clamp(18px,1.35vw,21px);line-height:1.52;color:var(--ink); margin-top:var(--s3)!important} .feat .pan.wt .stgLead{color:var(--ink)} /* -------- statement bands: smaller text, photograph clearly visible -------- */ .band{padding:clamp(66px,7.5vw,112px) 0} .band .im{opacity:1} .band::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none; background:linear-gradient(90deg,rgba(6,42,68,.88) 0%,rgba(6,42,68,.72) 34%, rgba(6,42,68,.34) 64%,rgba(6,42,68,.12) 100%)} .band p{font-size:clamp(21px,2.35vw,34px);line-height:1.24;letter-spacing:-0.0198em;max-width:27ch} .band .meta{margin-top:var(--s3);font-size:13px} @media(max-width:820px){ .band::before{background:linear-gradient(180deg,rgba(6,42,68,.62) 0%,rgba(6,42,68,.86) 100%)} .band p{max-width:none} } /* -------- keep faces in frame: never crop through a head -------- */ .feat .im img,.heroB .im img{object-position:50% 32%} .band .im img{object-position:50% 34%} .mos .t img,.gal .g img{object-position:50% 30%} /* -------- global 10% tightening, incl. text with no explicit tracking -------- */ body{letter-spacing:-.011em} .gStrip,.kick,.sNum,.crumb,.meta,.docMeta,.fLegal{letter-spacing:0} /* forced headline breaks collapse on small screens */ @media(max-width:700px){ br.brk{display:none} } /* -------- a stated target, pulled out of the running copy -------- */ .goal{border-left:2px solid var(--yellow);padding:var(--s3) 0 var(--s3) var(--s4); margin:var(--s4) 0 0} .goal b{display:block;font-size:12px;color:var(--yellow);font-weight:400;letter-spacing:0; margin-bottom:10px} .goal p{font-size:clamp(19px,1.6vw,25px);line-height:1.34;color:#fff;margin:0} .sec:not(.dark) .goal p{color:var(--ink)} .sec:not(.dark) .goal b{color:var(--navy)} /* ================= arrows ride in a circle ================= */ /* text links: yellow disc, ink arrow (11.3:1) */ .btn svg,.more svg,.megaBtn svg,.pill svg{ width:30px;height:30px;padding:8.5px;border-radius:50%;box-sizing:border-box;flex:none; background:var(--yellow);color:var(--ink); transition:transform .35s var(--e),background .35s var(--e),color .35s var(--e)} .more svg{width:27px;height:27px;padding:7.5px} .megaBtn svg{width:26px;height:26px;padding:7px} .btn:hover svg,.more:hover svg,.tri:hover .more svg,.megaBtn:hover svg{transform:translateX(3px)} /* the pill fills yellow on hover, so its disc flips to ink */ .pill:hover svg{background:var(--ink);color:var(--yellow);transform:translateX(3px)} /* ================= solid yellow CTA ================= */ .btnY{display:inline-flex;align-items:center;gap:14px;background:var(--yellow);color:var(--ink); border:0;border-radius:2px;padding:9px 11px 9px 26px;font-size:15px;line-height:1; letter-spacing:-.011em;transition:.35s var(--e)} .btnY svg{width:30px;height:30px;padding:8.5px;border-radius:50%;box-sizing:border-box;flex:none; background:var(--ink);color:var(--yellow); transition:transform .35s var(--e)} .btnY:hover{background:#F0C200;color:var(--ink)} .btnY:hover svg{transform:translateX(3px)} .dark .btnY,.feat .pan .btnY,.feat .pan.lt .btnY,.feat .pan.wt .btnY{color:var(--ink)} /* -------- hero concession line: one clickable unit -------- */ .heroA .heroCta{display:inline-flex;align-items:center;gap:16px;color:var(--yellow); letter-spacing:-.02em;transition:gap .35s var(--e)} .heroA .heroCta svg{width:30px;height:30px;padding:8.5px;border-radius:50%;box-sizing:border-box; flex:none;background:var(--yellow);color:var(--ink);transition:transform .35s var(--e)} .heroA .heroCta:hover{gap:24px} .heroA .heroCta:hover svg{transform:translateX(3px)} @media(max-width:600px){ .heroA .heroCta{flex-wrap:wrap;gap:10px} .heroA .heroCta svg{width:26px;height:26px;padding:7px} } /* one button everywhere; the mega panel just gets a slightly tighter scale */ .mega .btnY{margin-top:var(--s4);padding:7px 9px 7px 20px;font-size:14px;gap:12px} .mega .btnY svg{width:26px;height:26px;padding:7px} .loc .btnY{margin-top:var(--s5)} /* ---------------- document library ---------------- */ .docList{border-top:1px solid var(--line)} .docRow{display:grid;grid-template-columns:56px 1fr auto 56px;gap:var(--s3);align-items:center; padding:var(--s4) 0;border-bottom:1px solid var(--line);transition:.35s var(--e)} .docRow:hover{padding-left:14px} .docNo{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums} .docT b{display:block;font-weight:400;font-size:clamp(18px,1.5vw,22px);color:var(--ink); letter-spacing:-0.022em;margin-bottom:7px} .docT em{font-style:normal;font-size:15px;color:var(--body);line-height:1.6;display:block; max-width:62ch} .docTag{font-size:12px;color:var(--muted);border:1px solid var(--line);border-radius:2px; padding:5px 10px;align-self:start;margin-top:4px} .docGo{display:flex;justify-content:flex-end} .docGo svg{width:34px;height:34px;padding:10px;border-radius:50%;box-sizing:border-box; background:var(--yellow);color:var(--ink);transition:transform .35s var(--e)} .docRow:hover .docGo svg{transform:translateX(3px)} @media(max-width:760px){ .docRow{grid-template-columns:auto 1fr;gap:var(--s2) var(--s3)} .docTag{grid-column:2;justify-self:start;margin-top:0} .docGo{grid-column:2;justify-content:flex-start} } .heroA .heroCta::before{display:none} /* ================= additional motion ================= */ /* reading progress, article pages only */ .prg{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:left; background:var(--yellow);z-index:460;transition:transform .1s linear;pointer-events:none} /* images uncover rather than fade */ .feat .im img,.heroB .im img,.tri .im img{ clip-path:inset(0 0 100% 0);transition:clip-path 1.15s var(--e2),transform 1.5s var(--e)} .in .feat .im img,.feat.in .im img,.heroB.in .im img, .tri.in .im img{clip-path:inset(0 0 0 0)} /* numerals count up, so the figure lands rather than appears */ .num{font-variant-numeric:tabular-nums} /* rows draw a hairline as they arrive */ .rows>div{position:relative} .rows>div::after{content:"";position:absolute;left:0;top:0;height:1px;width:100%; background:var(--yellow);transform:scaleX(0);transform-origin:left; transition:transform 1s var(--e2)} .rows.in>div::after{transform:scaleX(1)} .rows.in>div:nth-child(2)::after{transition-delay:.12s} .rows.in>div:nth-child(3)::after{transition-delay:.24s} .rows.in>div:nth-child(4)::after{transition-delay:.36s} .rows.in>div:nth-child(5)::after{transition-delay:.48s} /* document rows lift on approach */ .docRow{transform:translateY(14px);opacity:0; transition:opacity .7s var(--e),transform .7s var(--e),padding-left .35s var(--e)} .docList.in .docRow{opacity:1;transform:none} .docList.in .docRow:nth-child(2){transition-delay:.08s} .docList.in .docRow:nth-child(3){transition-delay:.16s} .docList.in .docRow:nth-child(4){transition-delay:.24s} .docList.in .docRow:nth-child(5){transition-delay:.32s} /* discs in the statement rail breathe on hover */ .sitem .n{transition:transform .45s var(--e)} .sitem:hover .n{transform:translateY(-3px)} /* the yellow arrow disc rotates a touch on card hover */ .tri:hover .more svg{transform:translateX(3px) rotate(-8deg)} /* mega menu items arrive in sequence */ .mega .list a{opacity:0;transform:translateY(8px); transition:opacity .45s var(--e),transform .45s var(--e),color .3s} .item.on .mega .list a,.item:hover .mega .list a{opacity:1;transform:none} .item:hover .mega .list a:nth-child(2){transition-delay:.05s} .item:hover .mega .list a:nth-child(3){transition-delay:.10s} .item:hover .mega .list a:nth-child(4){transition-delay:.15s} .item:hover .mega .list a:nth-child(5){transition-delay:.20s} @media(prefers-reduced-motion:reduce){ .feat .im img,.heroB .im img,.stmt-im img,.tri .im img{clip-path:none!important} .docRow,.mega .list a{opacity:1!important;transform:none!important} .prg{display:none} } /* ---------------- figure band ---------------- */ .figs{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,3vw,54px)} .fig{border-top:1px solid var(--yellow);padding-top:var(--s3)} .fig b{display:block;font-weight:400;font-size:clamp(38px,4.4vw,66px);line-height:1; letter-spacing:-0.044em;color:var(--yellow);margin-bottom:var(--s3)} .fig p{font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.78)} .figNote{margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--lineD); font-size:12.5px;color:rgba(255,255,255,.5)} @media(max-width:900px){.figs{grid-template-columns:repeat(2,1fr)}} @media(max-width:520px){.figs{grid-template-columns:1fr}} /* ============================================================ MOBILE. Layouts that had no small-screen rule of their own. ============================================================ */ @media(max-width:900px){ /* the split hero is the masthead on every interior page */ .heroB{grid-template-columns:1fr;min-height:0} .heroB .tx{padding:var(--s6) var(--pad) var(--s5);order:2} .heroB .tx .in{max-width:none;margin-left:0;padding-left:0} .heroB .im{order:1;height:clamp(240px,42vh,380px)} .heroB h1{font-size:clamp(32px,7.4vw,44px)} .heroB p{font-size:16.5px} /* article: the contents rail sits above the text rather than beside it */ .doc .in{grid-template-columns:1fr;gap:var(--s5)} .docToc{position:static;top:auto;border-bottom:1px solid var(--line); padding-bottom:var(--s3);margin-bottom:var(--s3)} .docToc a{display:inline-block;padding:7px 14px 7px 0;margin-left:0;border-left:0} .docToc a:hover,.docToc a.on{border-left:0;text-decoration:underline; text-underline-offset:5px;text-decoration-color:var(--yellow)} .docHead h1{font-size:clamp(30px,7vw,42px);max-width:none} .docHead p{font-size:16.5px} .docMeta{gap:var(--s4)} .docBody{max-width:none} } @media(max-width:760px){ :root{--pad:20px} /* section heads stack, and the trailing note is no longer squeezed */ .head{display:block} .head>p{max-width:none;margin-top:var(--s3)} .head .btnY{margin-top:var(--s4)} /* cookie notice: three columns will not fit a phone */ .ckIn{grid-template-columns:1fr;gap:var(--s3);padding:var(--s3) 0} .ckMark{display:none} .ckBtns{display:flex;gap:12px} .ckBtns>*{flex:1;justify-content:center;text-align:center} /* footer call to action */ .fCta{display:block} .fCta h2{max-width:none;margin-bottom:var(--s4)} /* figure band: two up, then one */ .figs{grid-template-columns:repeat(2,1fr);gap:var(--s4)} .fig b{font-size:clamp(34px,9vw,44px)} /* buttons should not run off the edge */ .btnY{padding:8px 10px 8px 20px;font-size:14px;gap:12px} .btnY svg{width:26px;height:26px;padding:7px} /* the drag gallery gets a comfortable card size */ .gal .g{width:min(78vw,320px);height:clamp(280px,46vh,360px)} /* stage sections: image above copy, never a thin column */ .feat.stg4{min-height:0} .feat.stg4 .im{height:clamp(230px,40vh,330px)} .stgLead{font-size:17px!important} .sNum{margin-bottom:12px} /* statement band */ .band p{font-size:clamp(20px,5.6vw,26px)} /* document library rows */ .docT b{font-size:17px} .docT em{font-size:14px} } @media(max-width:520px){ .figs{grid-template-columns:1fr} .heroA h1{font-size:clamp(28px,8.4vw,36px)} .heroA p{font-size:16px} .docMeta{flex-direction:column;gap:var(--s3)} } /* touch devices never get a custom cursor */ @media(hover:none),(pointer:coarse){ .cur,.curR{display:none!important} } /* ============================================================ MOBILE HEADER AND DRAWER ============================================================ */ @media(max-width:1240px){ .hdr .wrap{gap:var(--s3)} .srch{margin-left:auto} .burg{margin-left:0} } @media(max-width:760px){ :root{--hdr:64px} .brand{height:32px} .burg,.srch{width:40px;height:40px} } /* the drawer sits under the fixed header, and scrolls on its own */ .mob{padding:calc(var(--off) + var(--s4)) 0 calc(var(--s6) + env(safe-area-inset-bottom)); -webkit-overflow-scrolling:touch;overscroll-behavior:contain} .mob .wrap{display:flex;flex-direction:column} /* a group is a heading plus its children, not a flat list */ .mob .grp{border-bottom:1px solid var(--line);padding:var(--s3) 0} .mob .grp:last-of-type{border-bottom:0} .mob a.top{font-size:clamp(22px,6.4vw,28px);padding:9px 0;border:0;color:var(--ink); letter-spacing:-0.033em;display:flex;align-items:center;justify-content:space-between} .mob a.sub{font-size:15.5px;color:var(--body);padding:9px 0 9px 18px;border:0; position:relative;letter-spacing:-0.011em} .mob a.sub::before{content:"";position:absolute;left:0;top:50%;width:8px;height:1px; background:var(--line)} /* current page, mobile menu */ .mob a.sub.on{color:var(--navy)} .mob a.sub.on::before{width:14px;background:var(--yellow);height:2px} .mob .gHead .top.on{color:var(--navy)} .mob a:active{color:var(--navy)} .mob .mFoot{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line); display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center} .mob .mFoot a{font-size:14px;color:var(--muted);border:0;padding:0} .mob .mCta{margin-top:var(--s4)} /* the homepage hero fills the phone screen, allowing for browser chrome */ @media(max-width:900px){ .heroA{height:calc(100svh - var(--top));min-height:520px} .heroA .wrap{padding-bottom:var(--s6)} } @supports not (height:100svh){ @media(max-width:900px){ .heroA{height:calc(100vh - var(--top))} } } /* remaining small-screen safety: search, 404, footer ring, map card */ @media(max-width:760px){ .sBar input{font-size:20px} .sHint{font-size:12.5px} .sOut{max-height:60vh} .nf .code{flex-wrap:wrap;gap:12px} .fRing{width:132px;height:132px;padding:16px;gap:6px} .fRing b,.fRing span{font-size:13px} .pinCard{left:auto;right:8px;top:auto;bottom:8px;padding:11px 14px} .pinCard b{font-size:13px} .pinCard .pTx span{font-size:11.5px} .docHead .wrap{padding-top:var(--s5);padding-bottom:var(--s5)} .doc{padding:var(--s5) 0 var(--s7)} } /* never let a long word or URL push the page sideways */ body{overflow-x:hidden} p,li,h1,h2,h3,td,dd,.docT em{overflow-wrap:break-word} /* drawer groups collapse, with a chevron that turns */ .mob .gHead{display:flex;align-items:center;justify-content:space-between;gap:12px} .mob .gTog{width:42px;height:42px;flex:none;border:1px solid var(--line);border-radius:50%; background:none;display:grid;place-items:center;color:var(--navy);cursor:pointer; transition:background .3s var(--e),border-color .3s var(--e)} .mob .gTog svg{width:16px;height:16px;transition:transform .4s var(--e)} .mob .gTog[aria-expanded="true"]{background:var(--yellow);border-color:var(--yellow);color:var(--ink)} .mob .gTog[aria-expanded="true"] svg{transform:rotate(180deg)} .mob .gSub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s var(--e)} .mob .gIn{overflow:hidden;min-height:0} .mob .grp.open .gSub{grid-template-rows:1fr} .mob .gSub a{opacity:0;transition:opacity .3s var(--e)} .mob .grp.open .gSub a{opacity:1;transition-delay:.1s} .mob .grp.open .gIn{padding-top:6px;padding-bottom:4px} @supports not (grid-template-rows:0fr){ .mob .gSub{display:block;max-height:0;overflow:hidden;transition:max-height .42s var(--e)} .mob .grp.open .gSub{max-height:460px} .mob .gSub a{opacity:1} } /* ---- mobile: breathing room at the edges and between blocks ---- */ @media(max-width:760px){ :root{--pad:24px} /* nothing that carries text may sit flush to the screen edge */ .feat .pan,.heroB .tx,.band .wrap,.docHead .wrap,.doc .wrap,.sec .wrap,.mob .wrap{ padding-left:var(--pad);padding-right:var(--pad)} .feat .pan .in,.heroB .tx .in{padding-left:0;padding-right:0;max-width:none} /* stop headings and copy running into one another */ .head{margin-bottom:var(--s4)} .two>div+div{margin-top:var(--s3)} .rows>div{padding:var(--s3) 0} .rows h3{margin-bottom:8px} .rows p,.tri p,.sitem p{margin-top:6px} .tri h3{margin:10px 0 6px} .stmt-top>div+div{margin-top:var(--s4)} .docBody section{padding-bottom:var(--s5)} .docBody section+section{padding-top:var(--s5)} .docBody h2{margin-bottom:14px} .figNote{line-height:1.6} .fig+.fig{margin-top:var(--s3)} } /* collapsed groups take no vertical space at all */ .mob .grp{padding:var(--s2) 0} .mob .grp.open{padding-bottom:var(--s3)} /* ---- drawer open: the header cannot stay inverted over a white sheet ---- */ body.lock .hdr.inv{background:var(--white);border-bottom-color:var(--line)} body.lock .hdr.inv .brand .col{opacity:1} body.lock .hdr.inv .brand .wht{opacity:0} body.lock .hdr.inv .burg{border-color:var(--line)} body.lock .hdr.inv .burg s, body.lock .hdr.inv .burg s::before, body.lock .hdr.inv .burg s::after{background:var(--ink)} body.lock .hdr.inv .srch{color:var(--ink)} body.lock .hdr.inv .nav .top{color:var(--ink)} /* ---- an explicit close control inside the drawer ---- */ .mClose{display:flex;justify-content:flex-end;margin-bottom:var(--s3)} .mX{display:inline-flex;align-items:center;gap:10px;background:none;border:1px solid var(--line); border-radius:100px;padding:9px 9px 9px 18px;color:var(--ink);font-family:var(--f); font-size:14px;letter-spacing:-.011em;cursor:pointer;transition:.3s var(--e)} .mX i{width:26px;height:26px;border-radius:50%;background:var(--yellow);display:grid; place-items:center;flex:none} .mX svg{width:13px;height:13px;color:var(--ink);display:block} .mX:active{background:var(--soft)} /* hero film, 12% darker so the type sits on it cleanly */ .heroA .bg video,.heroA .bg img{filter:brightness(.88)} /* ---- hero concession disc, bottom right ---- */ .hDisc{position:absolute;z-index:4;right:clamp(20px,4vw,76px);bottom:clamp(84px,10vh,132px); width:clamp(186px,17vw,296px);aspect-ratio:1;border-radius:50%;background:var(--yellow); color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center; gap:clamp(8px,.8vw,13px);text-align:center;padding:clamp(20px,2vw,32px);line-height:1.25; transition:scale .5s var(--e),box-shadow .5s var(--e)} .hDisc em{font-style:normal;font-size:clamp(9.5px,.72vw,12px);color:#2C4A5E;letter-spacing:0} .hDisc b{font-weight:400;font-size:clamp(16px,1.5vw,25px);letter-spacing:-.026em;color:var(--ink)} .hDisc i{width:clamp(32px,2.4vw,42px);height:clamp(32px,2.4vw,42px);border:1.5px solid var(--ink); border-radius:50%;display:grid;place-items:center;transition:background .4s var(--e)} .hDisc svg{width:clamp(12px,.9vw,15px);height:clamp(12px,.9vw,15px); transition:transform .4s var(--e)} .hDisc:hover{scale:1.035} .hDisc:hover i{background:rgba(11,31,46,.09)} .hDisc:hover svg{transform:translateX(3px)} @media(max-width:900px){ /* on a phone it sits clear of the headline, under the header */ .hDisc{right:var(--pad);bottom:auto;top:calc(var(--off) + 20px); width:clamp(140px,38vw,182px);gap:7px;padding:16px} .hDisc b{font-size:clamp(14px,3.9vw,17px)} .hDisc em{font-size:10px} .hDisc i{width:30px;height:30px} } @media(max-width:380px){ .hDisc{width:128px;padding:13px} .hDisc b{font-size:13px} } /* ================= advanced motion ================= */ /* words rise on a slight stagger rather than all at once */ .wr>s{transition:transform 1.05s var(--e2),opacity .7s var(--e)} [data-split] .wr:nth-child(2)>s{transition-delay:.055s} [data-split] .wr:nth-child(3)>s{transition-delay:.11s} [data-split] .wr:nth-child(4)>s{transition-delay:.165s} [data-split] .wr:nth-child(5)>s{transition-delay:.22s} [data-split] .wr:nth-child(6)>s{transition-delay:.275s} [data-split] .wr:nth-child(n+7)>s{transition-delay:.33s} /* the hero settles in on load: film, then disc, then line */ @keyframes nmRise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}} @keyframes nmPop{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}} @keyframes nmFade{from{opacity:0}to{opacity:1}} .heroA .bg{animation:nmFade 1.4s var(--e) both} .heroA h1{animation:nmRise 1s var(--e) .15s both} .heroA .wrap>p{animation:nmRise .9s var(--e) .38s both} .hDisc{animation:nmPop .85s var(--e2) .55s both} .gStrip{animation:nmFade .9s var(--e) .1s both} /* the disc turns very slowly, so it reads as alive rather than static */ @keyframes nmSpin{to{transform:rotate(360deg)}} .hDisc::before{content:"";position:absolute;inset:-14px;border-radius:50%; border:1px dashed rgba(255,206,0,.32);animation:nmSpin 34s linear infinite; pointer-events:none} .hDisc:hover::before{border-color:rgba(255,206,0,.6)} /* section headings draw a short yellow rule as they arrive */ .sec .head>div::after,.two>div::after{content:"";display:block;height:2px;width:0; background:var(--yellow);margin-top:var(--s3);transition:width .9s var(--e2) .2s} .sec.in .head>div::after,.two.in>div::after,.in .head>div::after{width:56px} /* photographs drift very slightly as they settle */ .tri .im img,.mos .t img{transform:scale(1.04)} .tri.in .im img,.mos.in .t img{transform:scale(1)} .mos .t img{transition:transform 1.6s var(--e),object-position .6s} /* the four value-chain stages arrive in sequence */ .stg4 .pan .in>*{opacity:0;transform:translateY(16px); transition:opacity .7s var(--e),transform .7s var(--e)} .stg4.in .pan .in>*{opacity:1;transform:none} .stg4.in .pan .in>*:nth-child(2){transition-delay:.09s} .stg4.in .pan .in>*:nth-child(3){transition-delay:.18s} .stg4.in .pan .in>*:nth-child(4){transition-delay:.27s} .stg4.in .pan .in>*:nth-child(5){transition-delay:.36s} /* buttons lift a touch, arrows travel */ .btnY{will-change:transform} .btnY:hover{transform:translateY(-2px)} .btnY:active{transform:translateY(0)} /* the gold strip figure ticks over when it updates */ @keyframes nmTick{0%{opacity:.35;transform:translateY(-3px)}100%{opacity:1;transform:none}} .gStrip .gV.upd{animation:nmTick .5s var(--e)} @media(prefers-reduced-motion:reduce){ .heroA .bg,.heroA h1,.heroA .wrap>p,.hDisc,.gStrip{animation:none!important} .hDisc::before{animation:none} .sec .head>div::after,.two>div::after{transition:none;width:56px} .tri .im img,.mos .t img{transform:none!important} .stg4 .pan .in>*{opacity:1!important;transform:none!important} } /* the opening words of a headline can carry the brand yellow when marked */ .heroA h1 .wr.hl>s{color:var(--yellow)} /* the concession label sits on a single line inside the disc */ .hDisc em{font-size:clamp(10.5px,.82vw,13px);letter-spacing:0;line-height:1.3; color:#2C4A5E;white-space:nowrap} @media(max-width:900px){ .hDisc em{font-size:10px} } /* that statement headline reads better at a smaller size once it reflows */ @media(max-width:700px){ .stmt-top h2{font-size:clamp(26px,7vw,34px);max-width:none;line-height:1.14} } /* keyboard users can jump past the header */ .skip{position:absolute;left:-9999px;top:0;z-index:500;background:var(--yellow);color:var(--ink); padding:12px 20px;border-radius:0 0 3px 0;font-size:14px} .skip:focus{left:0} /* ============================================================ CIRCLE PAGE TRANSITION Leaving: the hero disc itself becomes the field. It is promoted to fixed at its exact current rect, then its own width, height, left and top are animated until it covers the viewport. No second circle is drawn, so the growth starts from the disc the reader clicked. Nothing is drawn over the page that opens. ============================================================ */ .hDisc.nmGrow{position:fixed;right:auto;bottom:auto;margin:0;z-index:900; transform:none!important;scale:1!important;animation:none!important; pointer-events:none;overflow:hidden; box-shadow:none; transition:width .78s cubic-bezier(.66,0,.2,1),height .78s cubic-bezier(.66,0,.2,1), left .78s cubic-bezier(.66,0,.2,1),top .78s cubic-bezier(.66,0,.2,1)} .hDisc.nmGrow>*{opacity:0;transition:opacity .22s var(--e)} /* the destination names itself at the point the circle grew from */ .nmLbl{position:fixed;z-index:901;transform:translate(-50%,-50%);pointer-events:none; color:var(--ink);font-family:var(--f);font-size:clamp(18px,2vw,30px);letter-spacing:-.026em; text-align:center;line-height:1.2;white-space:nowrap;opacity:0; animation:nmLabel .78s var(--e) forwards} @keyframes nmLabel{0%{opacity:0}30%{opacity:1}72%{opacity:1}100%{opacity:0}} @media(prefers-reduced-motion:reduce){ .nmLbl{display:none} .hDisc.nmGrow{transition:none} } /* ============================================================ THE STATEMENT PORTRAIT It is a circle, so it opens like one. The photograph irises out from the centre, a light runs once around the rim, and the logomark's ring pulses outward from the frame. Scale is used rather than transform: the parallax script writes an inline transform on this image and would win. ============================================================ */ /* the closed state is applied by script, so the photograph is never hidden by CSS alone: if the observer never fires, the circle simply shows. */ html.nmJS .stmt-im img{ -webkit-clip-path:circle(0% at 50% 50%); clip-path:circle(0% at 50% 50%); scale:1.18; transition:-webkit-clip-path 1.25s var(--e2),clip-path 1.25s var(--e2),scale 1.8s var(--e)} html.nmJS .in .stmt-im img,html.nmJS .stmt-im.in img{ -webkit-clip-path:circle(75% at 50% 50%); clip-path:circle(75% at 50% 50%); scale:1} /* a light travels once around the rim as the iris opens */ .stmt-im::after{content:"";position:absolute;inset:0;border-radius:50%;z-index:2; pointer-events:none;opacity:0; background:conic-gradient(from 0deg,rgba(255,206,0,0) 0 56%, rgba(255,206,0,.95) 76%,rgba(255,206,0,0) 92%); -webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 5px),#000 calc(100% - 4px)); mask:radial-gradient(farthest-side,#0000 calc(100% - 5px),#000 calc(100% - 4px))} .in .stmt-im::after,.stmt-im.in::after{animation:nmRim 1.55s var(--e2) .12s both} @keyframes nmRim{ 0% {opacity:0; transform:rotate(-40deg)} 20% {opacity:1;} 72% {opacity:1;} 100%{opacity:0; transform:rotate(330deg)}} /* the ring of the mark, pulsing outward from the frame */ .in .stmt-im,.stmt-im.in{animation:nmHalo 2s var(--e) .1s both} @keyframes nmHalo{ 0% {box-shadow:0 0 0 0 rgba(255,206,0,.5), 0 0 0 0 rgba(255,206,0,.2)} 55% {box-shadow:0 0 0 20px rgba(255,206,0,0), 0 0 0 8px rgba(255,206,0,.16)} 100%{box-shadow:0 0 0 36px rgba(255,206,0,0), 0 0 0 48px rgba(255,206,0,0)}} /* on hover the light comes round again, slowly */ .stmt-im:hover::after{animation:nmRimSpin 4.2s linear infinite} @keyframes nmRimSpin{from{opacity:.85;transform:rotate(0)}to{opacity:.85;transform:rotate(360deg)}} @media(prefers-reduced-motion:reduce){ html.nmJS .stmt-im img{-webkit-clip-path:none!important;clip-path:none!important; scale:1!important;transition:none} .stmt-im::after{display:none} .in .stmt-im,.stmt-im.in{animation:none} } /* ============================================================ SIDEWAYS ON A PHONE Four tall panels and the three-card rows read as a swipe rather than a long vertical scroll. Each card stops short of the edge so the next one is always visible, which is the only reliable way to say "this moves sideways" without a caption. ============================================================ */ @media(max-width:1000px){ .pans,.trio{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden; scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch; scrollbar-width:none;-ms-overflow-style:none; gap:14px;padding-bottom:4px} .pans::-webkit-scrollbar,.trio::-webkit-scrollbar{display:none} .pans{padding-inline:var(--pad);scroll-padding-inline:var(--pad)} /* the trios sit inside a padded wrap, so pull them out to the screen edge */ .wrap .trio{margin-inline:calc(var(--pad) * -1); padding-inline:var(--pad);scroll-padding-inline:var(--pad)} .wrap .swRail{margin-inline:0} .pan4,.tri{flex:0 0 auto;scroll-snap-align:start;scroll-snap-stop:always} .pan4{width:78%;max-width:420px;height:clamp(400px,60vh,560px)} .tri{width:80%;max-width:400px} .tri .im{height:clamp(220px,52vw,300px)} /* the staggered vertical entrance does not apply to a rail */ .pans.stg>*,.trio.stg>*{opacity:1;transform:none;transition-delay:0s!important} /* the rail: how far along you are, and which way to go */ .swRail{display:flex;align-items:center;gap:14px;margin:18px var(--pad) 0} .swRail .tr{position:relative;flex:1;height:2px;border-radius:2px; background:rgba(11,31,46,.14);overflow:hidden} .swRail .tr i{position:absolute;left:0;top:0;bottom:0;width:30%;border-radius:2px; background:var(--yellow);transform-origin:left center; transition:transform .12s linear,width .2s var(--e)} .swRail b{font-weight:400;font-size:12px;letter-spacing:0;color:var(--body); display:flex;align-items:center;gap:7px;white-space:nowrap; transition:opacity .45s var(--e),transform .45s var(--e)} .swRail.moved b{opacity:0;transform:translateX(8px)} .swRail b svg{width:14px;height:14px;color:var(--navy);animation:nmNudge 1.7s var(--e) infinite} } @keyframes nmNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}} .swRail{display:none} /* where the browser supports it, each card blooms as it swipes in */ @supports (animation-timeline:view()){ @media(max-width:1000px){ .pan4,.tri{animation:nmCardIn linear both; animation-timeline:view(inline);animation-range:entry 5% cover 38%} @keyframes nmCardIn{ from{opacity:.3;scale:.9;filter:saturate(.55)} to {opacity:1;scale:1;filter:none}} } } @media(prefers-reduced-motion:reduce){ .pans,.trio{scroll-snap-type:none} .swRail b svg{animation:none} .pan4,.tri{animation:none!important;scale:1!important;opacity:1!important;filter:none!important} } /* ============================================================ CONTACT The details are the hero. Phone, email, office and socials sit directly under the headline, so nothing is scrolled for. ============================================================ */ .ctc{margin-top:var(--off);padding:clamp(48px,5.5vw,80px) 0 clamp(44px,5vw,72px); border-bottom:1px solid var(--line)} .ctcHead h1{font-size:clamp(34px,4.6vw,66px)} .ctcHead .lead{margin-top:var(--s3);max-width:52ch;font-size:17.5px} .ctcD{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5); margin-top:clamp(38px,4vw,60px);border-top:1px solid var(--line);padding-top:var(--s4)} .ctcD dt{font-size:12.5px;color:var(--muted);margin-bottom:10px} .ctcD dd{color:var(--ink);font-size:16px;line-height:1.55} .ctcD dd a:not(.fSoc a){display:block;width:fit-content; border-bottom:1px solid transparent;transition:color .3s var(--e),border-color .3s var(--e)} .ctcD dd a:not(.fSoc a):hover{color:var(--navy);border-bottom-color:var(--yellow)} .ctcD dd .fSoc{gap:8px} .ctcD dd .fSoc a{width:34px;height:34px;border-color:var(--line);color:var(--navy)} .ctcD dd .fSoc a:hover{background:var(--yellow);border-color:var(--yellow);color:var(--ink)} @media(max-width:900px){ .ctcHead h1{font-size:clamp(30px,7.4vw,42px)} .ctcD{grid-template-columns:1fr 1fr;gap:var(--s4)} } @media(max-width:560px){ .ctcD{grid-template-columns:1fr} } /* the article's picture, held to the text measure rather than run edge to edge */ .docHero{position:relative;max-width:1080px;margin:clamp(30px,3.4vw,52px) auto 0; padding-inline:var(--pad)} .docHero img{display:block;width:100%;height:clamp(240px,32vw,430px); object-fit:cover;object-position:50% 44%} .docHero figcaption{margin-top:12px;font-size:13px;color:var(--muted); padding-left:2px;border-left:2px solid var(--yellow);padding-left:10px} @media(max-width:700px){ .docHero img{height:clamp(200px,52vw,290px)} } /* ============================================================ THE CONCESSION MAP The glow now sends rings outward from the site, the lead line draws itself, and the whole plate answers to the cursor. ============================================================ */ .amap svg{overflow:visible} /* rings leaving the site, one every 1.4s */ .amap .ring{fill:none;stroke:var(--yellow);stroke-width:1.6;opacity:0; transform-box:fill-box;transform-origin:center; animation:nmRing 4.2s cubic-bezier(.22,.61,.36,1) infinite} .amap .ring.r2{animation-delay:1.4s} .amap .ring.r3{animation-delay:2.8s} @keyframes nmRing{ 0% {opacity:0; transform:scale(.28)} 12% {opacity:.75} 70% {opacity:.10} 100%{opacity:0; transform:scale(2.9)} } /* the site marker breathes under the rings */ .amap .pulse{fill:none;stroke:rgba(255,206,0,.85);stroke-width:1.4; transform-box:fill-box;transform-origin:center; animation:nmPulse 3.4s ease-in-out infinite} @keyframes nmPulse{ 0%,100%{transform:scale(.85);opacity:.9} 50% {transform:scale(1.5); opacity:.15} } /* the leader line draws out to the card rather than just appearing */ .amap .lead{stroke-dasharray:80;stroke-dashoffset:80; transition:stroke-dashoffset 1.1s var(--e2) .35s} .amap.in .lead,.in .amap .lead{stroke-dashoffset:0} /* the landmass settles in */ .amap .cont{transition:opacity 1.2s var(--e),transform 1.4s var(--e2); transform-box:fill-box;transform-origin:center} .amap .gha{transition:filter .5s var(--e)} /* the plate answers the cursor: rings quicken, Ghana lifts, the card rises */ .amap:hover .ring{animation-duration:2.6s} .amap:hover .gha{filter:drop-shadow(0 0 14px rgba(255,206,0,.65))} .amap:hover .halo{animation-duration:2.2s} .amap:hover .dot{r:7} .amap .dot{transition:r .35s var(--e)} .amap:hover~.pinCard,.amap:hover .pinCard{transform:translateY(-3px);border-color:var(--yellow)} /* the card and the map are one object, so either one lights the other */ .pinCard{transition:transform .4s var(--e),border-color .4s var(--e),box-shadow .4s var(--e)} .pinCard:hover{box-shadow:0 16px 44px rgba(0,0,0,.34)} @media(prefers-reduced-motion:reduce){ .amap .ring,.amap .pulse,.amap .halo{animation:none;opacity:.35} .amap .lead{stroke-dashoffset:0;transition:none} } /* the live ticker: a tick of colour when the price moves */ .gStrip .gV{transition:color .5s var(--e)} .gStrip .gV.up{color:#7BD389} .gStrip .gV.down{color:#F2A0A0} .gStrip .gV em{font-style:normal;opacity:.55;margin-left:9px;font-size:.92em} /* ============================================================ THE TRANSPARENT MASTHEAD, WHILE A MENU IS OPEN On the homepage the header sits over the film with no ground of its own. Opening a mega panel put a white sheet directly under a transparent bar, so the video showed through the top of it. While a panel is open the bar takes the same white and the marks flip. :has() drives it, and the script sets .solid for browsers without. ============================================================ */ .hdr{transition:background .28s var(--e),border-color .28s var(--e)} .hdr.inv:has(.item.has:hover),.hdr.inv:has(.item.on),.hdr.inv.solid{ background:var(--white);border-bottom-color:var(--line)} .hdr.inv:has(.item.has:hover) .brand .col,.hdr.inv:has(.item.on) .brand .col, .hdr.inv.solid .brand .col{opacity:1} .hdr.inv:has(.item.has:hover) .brand .wht,.hdr.inv:has(.item.on) .brand .wht, .hdr.inv.solid .brand .wht{opacity:0} .hdr.inv:has(.item.has:hover) .nav .top,.hdr.inv:has(.item.on) .nav .top, .hdr.inv.solid .nav .top{color:var(--ink)} .hdr.inv:has(.item.has:hover) .srch,.hdr.inv:has(.item.on) .srch, .hdr.inv.solid .srch{color:var(--ink)} .hdr.inv:has(.item.has:hover) .srch:hover,.hdr.inv:has(.item.on) .srch:hover, .hdr.inv.solid .srch:hover{background:var(--soft);color:var(--ink)} .hdr.inv:has(.item.has:hover) .burg s,.hdr.inv:has(.item.has:hover) .burg s::before, .hdr.inv:has(.item.has:hover) .burg s::after,.hdr.inv.solid .burg s, .hdr.inv.solid .burg s::before,.hdr.inv.solid .burg s::after{background:var(--ink)} .hdr.inv:has(.item.has:hover) .burg,.hdr.inv.solid .burg{border-color:var(--line)} /* the opening statement runs on: the standfirst, then the body that follows it */ .heroB p.nx{font-size:16.5px;margin-top:var(--s3);max-width:52ch} @media(max-width:900px){ .heroB p.nx{font-size:15.5px} } /* ============================================================ FRAMING Every photograph of people carries its own focal point inline, set to the height its faces sit at, so a crop keeps the faces at a natural place in frame rather than pinned to the top edge or sliced through the middle. The values below are the fallback for everything else: machinery, aerials and landscape. ============================================================ */ .mega .prev .sh img{object-position:50% 38%} .tri .im img{object-position:50% 40%} .heroB .im img{object-position:50% 40%} .feat .im img{object-position:50% 34%} .pan4 img{object-position:50% 34%} .heroC .strip img{object-position:50% 34%} .heroD .im img{object-position:50% 34%} .gal .g img{object-position:50% 34%} .mos .t img{object-position:50% 32%} .docHero img{object-position:50% 34%} /* ---------------- contact form feedback ---------------- */ .formNote{margin-top:14px;font-size:15px;line-height:1.5} .formNote.ok{color:var(--navy)} .formNote.err{color:#a3341f} .form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* ---------------- the custom cursor replaces the pointer ---------------- Gated on .nmJS, which the script adds to as it runs, so a script that failed to load can never leave a reader with no cursor at all. Coarse pointers are excluded, so touch is untouched. */ @media (hover:hover) and (pointer:fine){ .nmJS,.nmJS *{cursor:none!important} }