/* Methods Design & Engineering: shared styles for every page artboard.
   White page, black type, orange accent. Each section is a "spread":
   a title column on the left, a hairline, and the content on the right. */

.pg{font-family:"Outfit","Century Gothic","Avenir Next",Avenir,"Segoe UI",sans-serif;font-size:16px;font-weight:300;line-height:1.65;color:#000;background:#fff;-webkit-font-smoothing:antialiased}
.pg *,.pg *::before,.pg *::after{box-sizing:border-box}
.pg img{display:block;max-width:100%;height:auto}
.pg p{margin:0 0 1em}
.pg strong{font-weight:500}
.pg a{color:inherit}

/* header */
.hd{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 32px;padding:20px 56px}
.hd img{width:auto;height:40px}
.nv{display:flex;flex-wrap:wrap;gap:0 36px}
.nv a{display:block;padding:15px 0;font-size:12px;font-weight:400;letter-spacing:.09em;text-transform:uppercase;text-decoration:none}
.nv a:hover{text-decoration:underline;text-decoration-color:#ed5d21;text-underline-offset:8px}
.nv a.on{font-weight:500}
.nv a.on::before{content:"";display:inline-block;position:relative;top:-1px;width:6px;height:6px;margin-right:8px;background:#ed5d21;vertical-align:middle}

/* spread: title column | hairline | content */
.sp{display:grid;grid-template-columns:minmax(0,38fr) minmax(0,62fr);min-height:640px;padding:40px 56px 48px}
/* no page margin (sectioned pages then show one scrollbar, not two), and pages
   that scroll normally use the same header height as the sectioned pages,
   so the title and the hairline sit in exactly the same place */
html,body{margin:0}
@media (min-width:1241px){.pg:not(.scr)>.hd{height:88px;padding-top:0;padding-bottom:0}}
@media (min-width:861px) and (max-width:1240px){.pg:not(.scr)>.hd{padding-top:14px;padding-bottom:2px}}
.rl{display:flex;flex-direction:column;justify-content:space-between;gap:32px;padding-right:56px}
.bd{min-width:0;padding-left:56px;border-left:1px solid #000}
/* a title column that stays in view while the content beside it scrolls */
.rl.stk{position:sticky;top:32px;align-self:start}
.bd>*{max-width:92%}
.bd>*:last-child{margin-bottom:0}
.bd>.fg,.bd>.cds,.bd>.lgs,.bd>.tbw,.bd>.fig,.bd>.rws,.bd>.pgr,.bd>.cols{max-width:none}
.tt{margin:0;font-size:clamp(36px,3.8vw,76px);font-weight:200;line-height:1;letter-spacing:-.012em;text-transform:uppercase;overflow-wrap:break-word}
.nt{max-width:26em;margin:24px 0 0;font-size:15px;line-height:1.5;color:#000}
.nt strong{color:#000;font-weight:400}

/* small index at the foot of the title column */
.ix{margin:0;padding:0;list-style:none}
.ix a,.ix button{display:inline-block;padding:3px 0;border:0;background:none;cursor:pointer;font:inherit;font-size:11px;font-weight:400;letter-spacing:.09em;text-transform:uppercase;text-decoration:none;color:#000}
.ix a:hover,.ix button:hover{color:#000}
.ix .on{color:#000;font-weight:600}

/* text */
.ld{max-width:none;margin:0 0 24px;font-size:clamp(21px,1.75vw,28px);font-weight:300;line-height:1.38;letter-spacing:-.008em}
.sb{margin:44px 0 14px;font-size:12px;font-weight:500;line-height:1.4;letter-spacing:.09em;text-transform:uppercase}
.bd>.sb:first-child{margin-top:0}
/* larger sub-headings, e.g. Our mission / Our vision: large heading, normal body text below */
.sb.sh{margin:32px 0 10px;font-size:clamp(21px,1.75vw,28px);font-weight:400;line-height:1.25;letter-spacing:0;text-transform:none}
.ls{margin:0 0 24px;padding:0;list-style:none}
.ls li{position:relative;margin-bottom:8px;padding-left:18px}
.ls li::before{content:"";position:absolute;left:0;top:.68em;width:5px;height:5px;background:#ed5d21}
.ls strong{font-weight:400}
.wd{margin:0 0 24px;padding:0;list-style:none}
.wd li{padding:9px 0;border-top:1px solid #000;font-size:clamp(21px,1.75vw,28px);line-height:1.3}
.wd li:last-child{border-bottom:1px solid #000}
/* a word list right after an intro sentence: space above, lighter and larger
   type, and an orange square on each item, so the list doesn't read as more
   of the sentence */
.ld+.wd{margin-top:40px}
.ld+.wd:not(.wd2) li{position:relative;padding:12px 0 12px 28px;font-size:clamp(24px,2vw,32px);font-weight:200}
.ld+.wd:not(.wd2) li::before{content:"";position:absolute;left:0;top:calc(12px + .62em);width:8px;height:8px;background:#ed5d21;transform:translateY(-50%)}
.wd2{columns:2;column-gap:56px}
.wd2 li{break-inside:avoid;font-size:18px}
/* two-column lists: every item has a line above and below; neighbours share one line, so each column ends with its own line */
.wd2 li,.wd2 li:last-child{margin-bottom:-1px;border-bottom:1px solid #000}
/* sectors list: line icons, and a closing line under the last row of each column */
.sec li{display:flex;align-items:center;gap:14px;padding:13px 0}
.sec svg{flex:none;width:26px;height:26px;fill:none;stroke:#ed5d21;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.mr{display:inline-block;margin-top:8px;padding:14px 0 5px;border-bottom:1px solid #ed5d21;font-size:12px;font-weight:400;letter-spacing:.09em;text-transform:uppercase;text-decoration:none}
.mr:hover{box-shadow:0 1px 0 #ed5d21}
.cds+.mr,.rws+.mr{margin-top:32px}

/* pictures */
.fg{margin:0 0 40px}
.fg img{width:100%;background:#f3f3f3}
.fg figcaption{margin-top:10px;font-size:12px;line-height:1.4;letter-spacing:.02em;color:#000}
.fg.pt img{width:100%}
.bd>p+.fg,.bd>ul+.fg{margin-top:40px}

/* picture viewer (project pages): a picture opens on black, fitted to the
   screen; click or ctrl+scroll zooms (never below the fitted size), scrolling
   pans, the X or Esc closes */
.zm{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.zm:focus-visible{outline:2px solid #ed5d21;outline-offset:4px}
.lb{position:fixed;inset:0;z-index:100;background:#000}
.lb:focus{outline:none}
.lb-v{position:absolute;inset:0;display:grid;overflow:auto;overscroll-behavior:contain}
.lb-s{margin:auto}
.pg .lb-s img{width:100%;height:100%;max-width:none;cursor:zoom-in;user-select:none;-webkit-user-drag:none}
.pg .lb-s img.out{cursor:zoom-out}
.lb-x{position:absolute;top:16px;right:16px;z-index:1;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;background:#000;color:#fff;cursor:pointer}
.lb-x svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.lb-x:hover,.lb-x:focus-visible{color:#ed5d21;outline:none}

/* columns */
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 56px;margin-bottom:40px}
.cols.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cols .sb{margin-top:0;padding-top:16px;border-top:1px solid #000}

/* large light numerals */
.fig{display:flex;flex-wrap:wrap;margin:0 0 40px;border-top:1px solid #000;border-bottom:1px solid #000}
.fig div{display:flex;flex:1 1 144px;flex-direction:column-reverse;justify-content:flex-end;padding:22px 24px 21px 0}
.fig dd{margin:0;font-size:clamp(40px,4vw,64px);font-weight:200;line-height:1;letter-spacing:-.02em}
.fig dt{margin-top:9px;font-size:12px;line-height:1.35;color:#000}
.fn{margin-top:-28px;font-size:12px;color:#000}

/* label and value rows */
.fx{margin:0;font-size:13px;line-height:1.5}
.fx div{display:grid;grid-template-columns:112px minmax(0,1fr);gap:16px;padding:9px 0;border-top:1px solid #000}
.fx dt{padding-top:2px;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:#000}
.fx dd{margin:0}
.fx.ct{font-size:18px}
.fx.ct div{grid-template-columns:144px minmax(0,1fr);padding:18px 0}
.fx.ct div:last-child{border-bottom:1px solid #000}
.fx.ct dt{padding-top:8px}
.fx.ct a{text-decoration:none}
.fx.ct a:hover{text-decoration:underline;text-decoration-color:#ed5d21}
.fx.ct .sm{font-size:13px;text-decoration:underline;text-decoration-color:#ed5d21;text-underline-offset:3px}

/* linked rows (services) */
.rws{margin:0;padding:0;list-style:none;border-bottom:1px solid #000}
.rws a{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:4px 56px;padding:21px 0;border-top:1px solid #000;text-decoration:none}
.rws b{font-size:clamp(19px,1.5vw,23px);font-weight:300;line-height:1.3}
.rws span{padding-top:3px;font-size:15px;line-height:1.5;color:#000}
.rws a:hover b{text-decoration:underline;text-decoration-color:#ed5d21;text-decoration-thickness:1px;text-underline-offset:5px}
/* orange arrow at the end of each row, so the rows read as links */
.rws a{position:relative;padding-right:56px}
.rws a::after{content:"";position:absolute;top:50%;right:9px;width:12px;height:12px;border-top:1.5px solid #ed5d21;border-right:1.5px solid #ed5d21;transform:translateY(-50%) rotate(45deg);transition:right .2s}
.rws a:hover::after{right:3px}
/* service icons: orange line icons before each service name */
.rws b{display:flex;align-items:center;gap:16px}
.rws .si{flex:none;width:34px;height:34px;fill:none;stroke:#ed5d21;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}

/* project cards */
.cds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 40px}
.cd{display:block;text-decoration:none}
.cd img{width:100%;aspect-ratio:4/3;object-fit:cover;background:#f3f3f3}
.cd b{display:block;margin-top:14px;font-size:17px;font-weight:400;line-height:1.3}
.cd span{display:block;margin-top:3px;font-size:12px;letter-spacing:.02em;color:#000}
.cd:hover b{text-decoration:underline;text-decoration-color:#ed5d21;text-decoration-thickness:1px;text-underline-offset:4px}

/* logo walls */
.lgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:40px 32px;margin:0 0 40px;padding:0;list-style:none}
.lgs li{display:flex;align-items:center;justify-content:center;height:72px}
.lgs img{filter:grayscale(1)}
.lgs.al{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px}
.lgs.al li{flex-direction:column;align-items:flex-start;justify-content:space-between;height:184px;padding:24px 0 20px;border-top:1px solid #000}
.lgs.al span{font-size:13px;color:#000}
/* alliance logos share one height, set on the left, so their names line up */
.lgs.al img{width:auto!important;max-width:100%;height:56px;object-fit:contain;object-position:left center}
.lgs.al span{line-height:1.35}
/* alliance logos link to their websites (opening in a new tab) */
.lgs li>a{display:flex;flex-direction:inherit;align-items:inherit;justify-content:inherit;width:100%;height:100%;text-decoration:none}
.lgs li>a:hover span{color:#ed5d21;text-decoration:underline;text-underline-offset:3px}
.lgs li>a:hover img{opacity:.8}
.lgs li>a:focus-visible{outline:2px solid #ed5d21;outline-offset:4px}
/* logo cells: a line above and below each logo; rows share one line, like the sector lists */
.lgs{row-gap:0}
.lgs li{margin-bottom:-1px;border-top:1px solid #000;border-bottom:1px solid #000}
.lgs:not(.al) li{height:96px}
/* client logos with their names underneath, linked like the alliances */
.lgs.cl li{height:128px;flex-direction:column}
.lgs.cl li>a,.lgs.cl li>div{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) 32px;justify-content:stretch;justify-items:start;align-items:center;row-gap:6px;width:100%;height:100%;padding:12px 0 8px;text-decoration:none}
.lgs.cl span{align-self:start}
.lgs.cl span{justify-self:stretch;font-size:12px;line-height:1.3;text-align:left;color:#000}

/* tables */
.tbw{margin-bottom:40px;overflow-x:auto}
.tb{width:100%;border-collapse:collapse;border-top:1px solid #000;border-bottom:1px solid #000;font-size:14px;line-height:1.45}
.tb th,.tb td{padding:12px 20px 12px 0;border-top:1px solid #000;font-weight:300;text-align:left;vertical-align:middle}
.tb thead th{border-top:0;font-size:11px;font-weight:400;letter-spacing:.09em;text-transform:uppercase;color:#000;white-space:nowrap}
.tb tbody th{font-weight:400}
.tb tbody tr:last-child>*{border-bottom:1px solid #000}
.tb small{display:block;font-size:12px;font-weight:300;color:#000}
.tb a{text-decoration:none}
.tb a:hover{text-decoration:underline;text-decoration-color:#ed5d21}
.tb .nm{font-size:24px;font-weight:200;line-height:1;white-space:nowrap}
/* savings tables: only the percentage columns are centred */
.tb.c td.nm,.tb th.nc{text-align:center}
/* table row icons (Services, Standards and tools) */
.ti tbody th>span{display:flex;align-items:center;gap:12px}
.ti tbody th svg{flex:none;width:22px;height:22px;fill:none;stroke:#ed5d21;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}

/* numbered steps */
.sts{margin:0 0 24px;padding:0;list-style:none;counter-reset:s}
.sts li{display:grid;grid-template-columns:52px minmax(0,1fr);padding:16px 0;border-top:1px solid #000;counter-increment:s}
.sts li::before{content:counter(s);font-size:32px;font-weight:200;line-height:1;color:#ed5d21}

/* previous / next */
.pgr{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:56px;padding-top:20px;border-top:1px solid #000}
.pgr a{font-size:18px;line-height:1.3;text-decoration:none}
.pgr a:last-child{text-align:right}
.pgr span{display:block;margin-bottom:5px;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:#000}
.pgr a:hover{text-decoration:underline;text-decoration-color:#ed5d21;text-decoration-thickness:1px}

/* home opener */
.ht{display:flex;flex-direction:column;align-items:flex-start}
.ht button{padding:0;border:0;background:none;cursor:pointer;font:inherit;letter-spacing:inherit;text-transform:inherit;text-align:left}
.ht i{display:inline-block;width:.16em;height:.16em;margin-left:.14em;background:#ed5d21}
.hi{margin:0}
.hi img{width:100%;height:620px;object-fit:cover}
.hi figcaption{display:flex;justify-content:space-between;gap:24px;margin-top:10px;font-size:12px;letter-spacing:.02em}
.hi a{text-decoration:none}
.hi a+a{color:#000}
.hi a:hover{text-decoration:underline;text-decoration-color:#ed5d21}

/* footer: the office (address, contact, social) as three columns on the
   left; the slogan against the right edge; the legal line on its own row */
.ft{display:grid;grid-template-columns:auto auto auto minmax(0,1fr);column-gap:64px;align-items:start;margin-top:48px;padding:28px 56px 20px;border-top:1px solid #000;font-size:13px;line-height:1.5}
.ft p{margin:0}
.ft a{text-decoration:none}
.ft a:hover{text-decoration:underline;text-decoration-color:#ed5d21}
.ft ul{margin:0;padding:0;list-style:none}
/* bottom row: the legal entity (EBE-T) and the copyright */
.ft-lg{display:flex;align-items:center;gap:24px;grid-column:1/-1;margin-top:12px;font-size:11px;line-height:1.5}
.ft-lg img{flex:none;width:auto;height:48px}
.ft-lg>a{display:flex;flex:none}
.ft .ft-lg small{margin-left:auto;font-size:11px;color:#000;white-space:nowrap}

/* accent: lines and text are black, orange marks emphasis, no greys */
.tt::first-letter{color:#ed5d21}
.nv a:hover{color:#ed5d21}
.ix a:hover,.ix button:hover{color:#ed5d21}
.ix .on::before{content:"";display:inline-block;position:relative;top:-1px;width:5px;height:5px;margin-right:7px;background:#ed5d21;vertical-align:middle}
.sb{padding-left:12px;border-left:3px solid #ed5d21}
.cols .sb{padding-left:0;border-left:0}
.mr{border-bottom-width:2px}
.mr:hover{color:#ed5d21;box-shadow:none}
.fig dd{color:#ed5d21}
.tb .nm{color:#ed5d21}
.tb thead th,.fx dt,.pgr span{font-weight:500}
.lgs img{filter:none}
.fg img,.cd img{background:none}
.pgr a:hover,.cd:hover b,.rws a:hover b{color:#ed5d21}
.hi a+a{text-decoration:underline;text-decoration-color:#ed5d21;text-underline-offset:3px}
.mo{color:#ed5d21;font-weight:500}
/* pictures linked to their project: the link wraps the picture without changing its layout */
.lk{display:contents}
.fg figcaption a{text-decoration:none}
.fg figcaption a:hover{color:#ed5d21}
/* paragraphs in the content column are justified, without hyphenation */
.bd p,.rl .nt{text-align:justify;text-justify:inter-word;-webkit-hyphens:none;hyphens:none}

/* animated pages: one screen per section. The header, the vertical line and the
   index at the bottom left stay put; the title and content fade as you scroll. */
.scr{height:100vh;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain}
.trk{position:relative;scroll-snap-align:start}
.stg{position:sticky;top:0;height:100vh;overflow:hidden;background:#fff}
.stp{height:100vh;scroll-snap-align:start}
.stg .hd{position:relative;z-index:3;height:88px;padding-top:0;padding-bottom:0}
.vl{position:absolute;top:128px;bottom:48px;left:calc(56px + (100% - 112px) * .38);width:1px;background:#000}
.sl{position:absolute;top:88px;right:0;bottom:0;left:0;display:grid;grid-template-columns:minmax(0,38fr) minmax(0,62fr);padding:40px 56px 48px;will-change:opacity}
.sl .rl{justify-content:flex-start}
.sl .bd{height:100%;min-height:0;border-left:0;overflow-x:hidden;overflow-y:auto}
.toc{position:absolute;left:56px;bottom:48px;z-index:2}
.toc button{text-align:left}
/* "more below" cue, centred under the content column (between the vertical
   line and the right margin): shows while sections remain, jumps to the next one */
.nx{position:absolute;left:calc((100% + (100% - 112px) * .38) / 2);bottom:10px;transform:translateX(-50%);z-index:2;display:flex;align-items:center;gap:12px;min-height:38px;padding:0;border:0;background:none;cursor:pointer;font:inherit;font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#000;transition:opacity .3s}
.nx i{display:block;flex:none;width:12px;height:12px;margin-top:-7px;border-right:2px solid #ed5d21;border-bottom:2px solid #ed5d21;transform:rotate(45deg);animation:nx 1.6s ease-in-out infinite}
.nx:hover{color:#ed5d21}
@keyframes nx{0%,100%{translate:0 0}50%{translate:0 4px}}
@media (prefers-reduced-motion:reduce){.nx i{animation:none}}
/* "back to top": bottom right, shows once you scroll past the first section */
.tp{position:absolute;right:56px;bottom:10px;z-index:2;display:flex;align-items:center;gap:12px;min-height:38px;padding:0;border:0;background:none;cursor:pointer;font:inherit;font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#000;transition:opacity .3s}
.tp i{display:block;flex:none;width:12px;height:12px;margin-top:7px;border-left:2px solid #ed5d21;border-top:2px solid #ed5d21;transform:rotate(45deg)}
.tp:hover{color:#ed5d21}
/* on pages that scroll normally (projects, contact), "back to top" floats at the bottom right;
   on the website it appears once the page is scrolled down */
.bt{position:sticky;bottom:12px;z-index:5;display:flex;justify-content:flex-end;margin:0;padding:0 44px 12px;pointer-events:none;transition:opacity .3s,visibility .3s}
.bt.off{opacity:0;visibility:hidden}
/* as on the sectioned pages: the footer line comes 48px after the content, and
   Back to top floats in that band, 10px above the line */
.pg .bt{margin:-48px 0 0;padding-bottom:10px}
.bt+.ft{margin-top:0}
@media (max-width:860px){.pg .bt{margin-top:0}}
.bt a{pointer-events:auto;display:inline-flex;align-items:center;gap:12px;min-height:38px;padding:0 12px;background:rgba(255,255,255,.94);font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:#000}
.bt i{display:block;flex:none;width:12px;height:12px;margin-top:7px;border-left:2px solid #ed5d21;border-top:2px solid #ed5d21;transform:rotate(45deg)}
.bt a:hover{color:#ed5d21}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.sl .fg{margin-bottom:28px}
/* section pictures: full column width at their own proportions; when the
   section runs out of height, only the picture gives way (cropped from its
   centre, never below 120px), so the text fits without scrolling the section */
.sl .bd{display:flex;flex-direction:column}
.sl .bd>*{flex-shrink:0}
.sl .bd>.mr{align-self:flex-start}
.sl .bd>.fg{flex-shrink:1;min-height:0;display:flex;flex-direction:column}
.sl .fg img{flex:0 1 auto;min-height:120px;height:auto;object-fit:cover}
.sl .fg figcaption{flex:none}
.sl .bd>p+.fg,.sl .bd>ul+.fg{margin-top:24px}
/* home opener: a slider of key projects that fills the full height the
   screen leaves between the header and the captions, across the whole
   column, each picture cropped to fit; pictures move right to left */
.bd .hi{max-width:none}
.car{overflow:hidden}
.sl .hi .car{height:calc(100vh - 222px);min-height:240px}
.car-t{display:flex;height:100%;transition:transform .9s ease}
.car-t.nj{transition:none}
.hi .car img{flex:0 0 100%;width:100%;height:100%;min-height:0;object-fit:cover}
.hi .car-c a{text-decoration:none}
.car-d{display:flex;flex:none;align-items:center}
.car-c,.car-s{flex:1 1 0;min-width:0}
.car-s{text-align:right}
.car-d button{position:relative;width:20px;height:20px;padding:0;border:0;background:none;cursor:pointer}
.car-d button::before{content:"";position:absolute;top:6px;left:6px;width:8px;height:8px;box-sizing:border-box;border:1px solid #000}
.car-d button.on::before{border-color:#ed5d21;background:#ed5d21}
.hi .sv{text-decoration:underline;text-decoration-color:#ed5d21;text-underline-offset:3px}
@media (prefers-reduced-motion:reduce){.car-t{transition:none}}
/* slider arrows: thick orange chevrons over the picture, left and right */
.car{position:relative}
.car-a{position:absolute;top:50%;z-index:2;width:48px;height:64px;margin-top:-32px;padding:0;border:0;background:none;cursor:pointer;filter:drop-shadow(0 0 3px rgba(0,0,0,.35))}
.car-a::before{content:"";position:absolute;top:50%;left:50%;width:22px;height:22px;border-top:4px solid #ed5d21;border-right:4px solid #ed5d21;transition:transform .2s}
.car-p{left:8px}
.car-n{right:8px}
.car-p::before{transform:translate(-30%,-50%) rotate(-135deg)}
.car-n::before{transform:translate(-70%,-50%) rotate(45deg)}
.car-p:hover::before{transform:translate(-50%,-50%) rotate(-135deg)}
.car-n:hover::before{transform:translate(-50%,-50%) rotate(45deg)}
.sl .tbw{margin-bottom:24px}
.sl .ld{margin-bottom:20px}
.tb.c th,.tb.c td{padding-top:8px;padding-bottom:8px}
.cds.k{gap:28px 40px}
.cds.k img,.cds.k3 img{aspect-ratio:16/10}
.cds.k3{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.scr>.ft{margin-top:0;scroll-snap-align:end}

/* company slogan: Design for Humans. "DESIGN FOR" is set in Tahoma and
   "Humans" in Azkia, as in the printed artwork. "Humans" hangs from the top
   of "FOR", so it never runs into "DESIGN" above it. */
@font-face{font-family:"Azkia";src:url("../fonts/azkia.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
.sg{margin:0;font-family:Tahoma,Verdana,"Segoe UI",sans-serif;font-size:22px;line-height:1;color:#000}
.sg span{display:block}
.sg .sg-d{font-size:2em;font-weight:400;letter-spacing:0;text-transform:uppercase}
.sg .sg-f{display:flex;align-items:flex-start;margin-top:.3em;font-size:1.1em;font-weight:400;letter-spacing:0;text-transform:uppercase;white-space:nowrap}
.sg em{display:block;margin:-.1em 0 0 .25em;font-family:"Azkia","Luxurious Script",cursive;font-size:2.87em;font-style:normal;font-weight:400;line-height:1;letter-spacing:0;text-transform:none}
.rl .sg{margin-top:56px;font-size:16px}
.ft .sg{grid-column:4;grid-row:1;justify-self:end;margin-top:2px;font-size:14px}

/* social media links: icon with the account name beside it */
.soc{display:flex;flex-wrap:wrap;gap:0 28px;margin:12px 0 0;padding:0;list-style:none}
.soc a{display:inline-flex;align-items:center;gap:10px;min-height:44px;text-decoration:none}
.soc svg{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.soc a:hover{color:#ed5d21}
.fx.ct .soc{margin:0;font-size:16px}
.fx.ct .soc a{min-height:0;padding:4px 0}
.ft .soc{flex-direction:column;gap:3px;margin:0}
.ft .soc a{min-height:0;gap:10px}
.ft .soc svg{width:18px;height:18px}

/* medium screens: social moves under the contact details, slogan stays right */
@media (max-width:1000px){
.ft{grid-template-columns:auto auto minmax(0,1fr);column-gap:48px;row-gap:16px}
.ft .ft-ad{grid-column:1;grid-row:1/3}
.ft .ft-ct{grid-column:2;grid-row:1}
.ft .soc{grid-column:2;grid-row:2}
.ft .sg{grid-column:3;grid-row:1/3}
}

/* narrower desktops: tighter menu gaps keep the nine menu items on one line */
@media (max-width:1360px){.nv{gap:0 22px}}

/* medium desktops: the menu wraps under the logo, so the header grows and the sections start below it */
@media (min-width:861px) and (max-width:1240px){
.stg{display:grid;grid-template-rows:auto minmax(0,1fr);grid-template-columns:minmax(0,1fr)}
.stg .hd{height:auto;padding-top:14px;padding-bottom:2px}
.nv{gap:0 14px}
.nv a{font-size:11px;letter-spacing:.05em}
.stg .sl{position:relative;top:auto;right:auto;bottom:auto;left:auto;grid-row:2;grid-column:1;min-height:0}
.stg .vl{position:relative;top:auto;bottom:auto;left:auto;grid-row:2;grid-column:1;margin:40px 0 48px calc(56px + (100% - 112px) * .38)}
}

/* small screens */
@media (max-width:860px){
.bd>*{max-width:none}
.hd{padding:14px 20px}
.hd img{height:32px}
.nv{gap:0 20px}
.sp{display:block;min-height:0;padding:36px 20px}
.rl{display:block;padding-right:0}
.rl.stk{position:static}
.tt{font-size:clamp(34px,9.5vw,52px)}
.ix{display:none}
.ix.fl{display:flex;flex-wrap:wrap;gap:0 20px;margin-top:24px}
.ix.fl button{padding:15px 0;font-size:12px}
.rl .fx{margin-top:28px}
.bd{margin-top:28px;padding:28px 0 0;border-left:0;border-top:1px solid #000}
.hi img{height:auto;aspect-ratio:4/3}
.hi figcaption{display:block}
.hi a{display:block;padding:4px 0}
.rws a{display:block}
.rws span{display:block}
.cols,.cols.c2{display:block}
.cols>*+*{margin-top:32px}
.wd2{columns:1}
.fx.ct div{display:block}
.pgr{grid-template-columns:1fr;gap:20px}
.pgr a:last-child{text-align:left}
.tb{min-width:520px}
.ft{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:24px;row-gap:20px;padding:28px 20px 20px}
.ft .ft-ad,.ft .ft-ct{grid-column:auto;grid-row:auto}
.ft .soc{grid-column:1/-1;grid-row:auto}
.ft .sg{grid-column:1/-1;grid-row:auto;order:1}
.ft-lg{order:2}
.ft .soc{flex-direction:row;gap:0 28px}
.ft .soc a{min-height:44px}
.ft-lg{flex-wrap:wrap;margin-top:8px}
.ft .ft-lg small{flex-basis:100%;margin-left:0}
.scr{height:auto;overflow:visible;scroll-snap-type:none}
.stg{position:static;height:auto;overflow:visible}
.stp,.vl,.toc,.nx,.tp{display:none}
.bt{bottom:8px;padding:0 8px 8px}
.stg .hd{height:auto;padding:14px 20px}
.sl{position:static;display:block;padding:36px 20px;opacity:1!important;visibility:visible!important}
.sl .bd{display:block;height:auto;overflow:visible}
.sl .fg img,.sl .hi img{height:auto;min-height:0}
.sl .hi .car{height:auto;aspect-ratio:4/3;min-height:0}
.sl .hi .car img{height:100%}
.car-d{margin:6px 0}
.car-s{text-align:left}
.cds.k3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
.cds{grid-template-columns:1fr;gap:36px}
.lgs{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}
.lgs.al{grid-template-columns:1fr}
.fig div{flex-basis:88px;padding-right:12px}
.fig dd{font-size:36px}
}
/* logo grids size to their content: one logo band and a name, so a row of
   one-line names is shorter than a row with a two-line name; clients and
   alliances share the same spacing */
.lgs.cl li,.lgs.al li{height:auto!important;justify-content:flex-start;align-items:stretch}
.lgs.cl li>a,.lgs.cl li>div{grid-template-rows:72px auto;height:auto;padding:14px 0 12px}
.lgs.al li{padding:14px 0 12px;justify-content:flex-start}
.lgs.al li>a{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:72px auto;row-gap:6px;align-items:center;justify-items:start;height:auto}
.lgs.al span{align-self:start}
.fg img,.cd img{transition:opacity .15s}
.fg:has(.lk,.zm):hover img,.cd:hover img{opacity:.8}
.fg:has(.lk,.zm):hover figcaption,.fg:has(.lk,.zm):hover figcaption a{color:#ed5d21;text-decoration:underline;text-underline-offset:3px}

/* desktop sections fit shorter windows: grids and pictures shrink with the window height */
@media (min-width:861px){
.sl .bd>.hi{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
.sl .hi .car{flex:1 1 0;height:auto}
.sl .cds.k img{max-height:calc((100vh - 400px) / 2)}
.sl .lgs.cl{grid-template-columns:repeat(4,minmax(0,1fr))}
.sl .lgs.cl li>a,.sl .lgs.cl li>div{grid-template-rows:clamp(26px,calc(31.25vh - 204px),72px) auto}
.sl .lgs.cl img{max-height:clamp(26px,calc(31.25vh - 204px),72px);object-fit:contain;object-position:left center}
.sl .lgs.al li>a{grid-template-rows:clamp(28px,calc(37.5vh - 236px),72px) auto}
.sl .lgs.al img{max-height:clamp(28px,calc(37.5vh - 236px),56px)}
.sl .rws a{padding-top:clamp(12px,calc((100vh - 580px) / 10),21px);padding-bottom:clamp(12px,calc((100vh - 580px) / 10),21px)}
}
/* the slider caption can wrap to two lines on narrower desktops: reserve the space so the picture keeps one height */
@media (min-width:861px) and (max-width:1500px){.sl .hi figcaption{min-height:40px}}

/* phone header: the logo and a Menu button stay at the top of the screen while
   the page scrolls; the button (a checkbox and its label, so it needs no
   script) opens the menu as a list under the header. Hidden on wider screens. */
.mn-t,.mn-b{display:none}
@media (max-width:860px){
/* sectioned pages: lift the header out of its section wrappers so it stays
   on screen down to the end of the footer, as on the other pages */
.scr>.trk,.scr .stg{display:contents}
.hd,.stg .hd{position:sticky;top:0;z-index:20;flex-wrap:wrap;gap:0;height:auto;padding:8px 8px 8px 20px;background:#fff;border-bottom:1px solid #000}
.hd>a:first-child{display:flex}
.hd img{height:30px}
.mn-t{display:block;position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.mn-b{display:flex;align-items:center;gap:12px;min-height:44px;margin-left:auto;padding:0 12px;font-size:12px;font-weight:400;letter-spacing:.09em;text-transform:uppercase;cursor:pointer;user-select:none}
.mn-b i{position:relative;display:block;flex:none;width:20px;height:10px}
.mn-b i::before,.mn-b i::after{content:"";position:absolute;left:0;right:0;height:2px;background:#ed5d21;transition:transform .2s}
.mn-b i::before{top:0}
.mn-b i::after{bottom:0}
.mn-c{display:none}
.mn-t:checked+.mn-b .mn-o{display:none}
.mn-t:checked+.mn-b .mn-c{display:inline}
.mn-t:checked+.mn-b i::before{transform:translateY(4px) rotate(45deg)}
.mn-t:checked+.mn-b i::after{transform:translateY(-4px) rotate(-45deg)}
.mn-t:focus-visible+.mn-b{outline:2px solid #ed5d21;outline-offset:-2px}
.nv{display:none;flex:0 0 calc(100% + 28px);flex-direction:column;gap:0;max-height:calc(100vh - 61px);margin:8px -8px -8px -20px;overflow-y:auto}
.mn-t:checked~.nv{display:flex}
.nv a{display:flex;align-items:center;min-height:48px;padding:0 20px;font-size:13px;border-top:1px solid #000}
.nv a:hover{text-decoration:none}

/* phone footer: address beside the slogan, email and phone beside the social
   links, then the EBE-T logo, centred beside the legal lines, which break at
   the end of each phrase, with the copyright last; each link a row easy to tap */
.ft{grid-template-columns:minmax(0,1fr) auto;column-gap:0;row-gap:0;padding:0 20px 18px;font-size:14px}
.ft .ft-ad{grid-column:1;grid-row:1;padding:18px 0 14px}
.ft .sg{grid-column:2;grid-row:1;order:0;align-self:start;justify-self:end;margin:0;padding-top:20px;font-size:12px}
.ft .ft-ct,.ft .soc{grid-row:2;padding:8px 0;border-top:1px solid #000;font-size:12px}
.ft .ft-ct{grid-column:1}
.ft .soc{grid-column:2;flex-direction:column;gap:0;padding-left:12px}
.ft .ft-ct br{display:none}
.ft .ft-ct a,.ft .soc a{display:flex;align-items:center;min-height:32px}
.ft .soc a{gap:8px}
.ft-lg{order:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 12px;align-items:start;margin:0;padding-top:14px;border-top:1px solid #000;font-size:11px}
.ft-lg>a{grid-column:1;grid-row:1/3;align-self:center}
.ft-lg p{grid-column:2;grid-row:1}
.ft .ft-lg small{grid-column:2;grid-row:2;margin-left:0;font-size:11px;white-space:normal}
.ft-lg .ln{display:block}
.ft-lg p br,.ft-lg .sep{display:none}

/* Home slider: the phone rule that turns caption links into rows must not
   reach the picture links, or every picture squeezes into a thin strip */
.hi .car .lk{display:contents;padding:0}

/* Home slogan: smaller under the Design / Sustainability / BIM title */
.rl .sg{margin-top:32px;font-size:12px}

/* alliances: two per row like the clients; the four columns set on the
   artboards (Home and Alliances) are for desktop only */
.lgs.al{grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:24px!important}
}
/* the narrowest phones (320 px): section titles step down so long words such
   as ENVIRONMENTAL fit on one line */
@media (max-width:359px){.tt{font-size:clamp(30px,9.5vw,34px)}}

/* static site: elements switched off by site.js stay hidden */
[hidden]{display:none!important}