/* Shared site footer (design/footer/footer.html), used on every page. Chosen 24 Sep 2026 by a 3-designer / 3-judge panel.
   Every selector is scoped under .ftr with ftr- class names so site.css and home.css cannot reach it. */
/* Site footer (final). One footer for every page. Every selector is scoped under .ftr. */

/* ---------- reset: neutralise the shell's global element rules inside the footer ---------- */
.ftr{--ftr-row:32px;display:block;margin:0;background:#fff;color:var(--ink);font-family:var(--body);font-size:14.5px;line-height:1.45;font-weight:400;letter-spacing:normal;text-align:left}
.ftr *,.ftr *::before,.ftr *::after{box-sizing:border-box}
.ftr h2,.ftr p,.ftr ul,.ftr li,.ftr address,.ftr nav{margin:0;padding:0;max-width:none}
.ftr ul{list-style:none}
.ftr h2{text-wrap:wrap;letter-spacing:normal}
.ftr address{font-style:normal}
.ftr a{color:inherit;text-decoration:none;text-underline-offset:3px;text-decoration-thickness:1px}
.ftr a:hover{color:var(--accent-ink);text-decoration:underline}
.ftr a:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:2px}
.ftr svg{display:block;max-width:none;flex:none}
.ftr .ftr-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* same content width as the header (.wrap.xl) */
.ftr .ftr-in{max-width:1360px;margin:0 auto;padding-inline:var(--gutter)}

/* ---------- 1. contact strip: mirrors the header's top row ---------- */
.ftr .ftr-strip{background:var(--panel);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.ftr .ftr-strip-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px 40px;padding-block:28px}
.ftr .ftr-id{flex:none;min-width:0;max-width:100%}
.ftr .ftr-brand{display:flex;align-items:center;gap:12px;min-width:0;color:var(--ink)}
.ftr .ftr-brand:hover{color:var(--ink);text-decoration:none}
.ftr .ftr-mark{width:44px;height:54px}
.ftr .ftr-word{display:block;min-width:0;font-family:var(--display);font-weight:700;font-size:26px;line-height:.95;letter-spacing:.01em;text-transform:uppercase;white-space:nowrap}
.ftr .ftr-word small{display:block;margin-top:5px;font-family:var(--mono);font-weight:400;font-size:10px;line-height:1.2;letter-spacing:.12em;color:var(--ink-2)}
.ftr .ftr-slogan{display:none;margin-top:14px;padding-top:11px;border-top:1px solid var(--rule-2);font-family:var(--mono);font-size:10.5px;line-height:16px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2)}

.ftr .ftr-contact{margin-left:auto;min-width:0}
.ftr .ftr-contacts{display:flex;flex-wrap:wrap;justify-content:flex-end;row-gap:12px}
.ftr .ftr-ct{display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0;padding:2px 0 2px 20px;margin-left:20px;border-left:1px solid var(--rule-2)}
.ftr .ftr-lbl{display:block;font-family:var(--mono);font-size:10.5px;font-weight:400;line-height:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.ftr .ftr-val{display:inline-flex;align-items:center;gap:6px;min-height:28px;font-size:15px;font-weight:600;line-height:20px;color:var(--ink);white-space:nowrap}
.ftr a.ftr-val:hover{color:var(--accent-ink)}
.ftr .ftr-ct-tel .ftr-val{font-family:var(--display);font-weight:700;font-size:22px;line-height:24px;letter-spacing:.01em}
.ftr .ftr-ct-hrs .ftr-val{font-weight:400;color:var(--ink-2)}
.ftr .ftr-ext{width:11px;height:11px;color:var(--ink-2)}
.ftr a.ftr-val:hover .ftr-ext{color:currentColor}

/* ---------- 2. link groups ---------- */
/* one row unit (--ftr-row) drives list rows, catalogue tiles and office spacing,
   so Legal and the Shenzhen office start exactly on a list row of the columns beside them */
.ftr .ftr-main{padding-block:48px 56px}
.ftr .ftr-grid{--ftr-cg:32px;display:grid;grid-template-columns:repeat(5,auto);grid-template-rows:auto 1fr;grid-template-areas:"mh tr co cat of" "mh tr co lg of";column-gap:var(--ftr-cg);row-gap:calc(2 * var(--ftr-row) - 32px);align-items:start}
.ftr .ftr-grp{--ftr-hx:var(--ftr-cg);min-width:0}
.ftr .ftr-g-mh{grid-area:mh}
.ftr .ftr-g-tr{grid-area:tr}
.ftr .ftr-g-co{grid-area:co}
.ftr .ftr-g-cat{grid-area:cat}
.ftr .ftr-g-lg{grid-area:lg;--ftr-hx:0px}
.ftr .ftr-g-of{grid-area:of;--ftr-hx:0px;display:grid;align-content:start}

/* heading: the header menu's display face on a hairline with an orange tick. The hairline runs on
   through the column gap, so each row of headings reads as one continuous rule */
.ftr .ftr-h{position:relative;margin:0 calc(-1 * var(--ftr-hx)) 10px 0;padding:0 0 11px;border-bottom:1px solid var(--rule);font-family:var(--display);font-weight:700;font-size:17px;line-height:18px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink)}
.ftr .ftr-h::after{content:"";position:absolute;left:0;bottom:-1px;width:28px;height:2px;background:var(--accent)}

.ftr .ftr-list{display:grid}
.ftr .ftr-a{display:flex;align-items:center;min-height:var(--ftr-row);padding-block:4px;line-height:20px;color:var(--ink)}
.ftr .ftr-a:hover{color:var(--accent-ink)}

/* catalogues: small document tiles (orange bars echo the logo) */
.ftr .ftr-docs{gap:8px}
.ftr .ftr-doc{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"i t" "i g";column-gap:12px;row-gap:3px;align-content:center;min-height:calc(2 * var(--ftr-row) - 8px);padding:7px 14px 7px 12px;background:var(--panel);border:1px solid var(--panel);border-radius:4px;font-weight:500;color:var(--ink);transition:background-color .15s,border-color .15s}
.ftr .ftr-doc-i{grid-area:i;align-self:center;width:22px;height:28px;color:var(--ink)}
.ftr .ftr-doc-t{grid-area:t;align-self:end;line-height:20px}
.ftr .ftr-tag{grid-area:g;justify-self:start;align-self:start;padding:2px 5px 1px;background:#fff;border:1px solid var(--rule-2);border-radius:2px;font-family:var(--mono);font-size:10px;font-weight:500;line-height:12px;letter-spacing:.08em;color:var(--ink-2)}
.ftr .ftr-doc:hover{background:#fff;border-color:var(--ink);color:var(--ink);text-decoration:none}
.ftr .ftr-doc:hover .ftr-doc-t{color:var(--accent-ink);text-decoration:underline}
.ftr .ftr-doc:hover .ftr-tag{border-color:var(--accent-ink);color:var(--accent-ink)}

/* offices: information, not links, so a quieter ink and tighter lines; each office starts on a list row */
.ftr .ftr-adr{font-size:14px;line-height:24px;color:var(--ink-2)}
.ftr .ftr-adr-h{display:block;padding-top:calc((var(--ftr-row) - 24px) / 2);font-family:var(--mono);font-size:10.5px;font-weight:500;line-height:24px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.ftr .ftr-al{display:block}
.ftr .ftr-adr+.ftr-adr{margin-top:calc(3.5 * var(--ftr-row) - 84px)}

/* ---------- 3. bottom line ---------- */
.ftr .ftr-base{background:var(--panel);border-top:1px solid var(--rule)}
.ftr .ftr-copy{padding-block:18px 20px;font-size:13px;line-height:24px;color:var(--ink-2);text-wrap:balance}
.ftr .ftr-copy a{padding-block:4px;white-space:nowrap;color:var(--ink);text-decoration:underline;text-decoration-color:var(--rule-2);text-underline-offset:3px}
.ftr .ftr-copy a:hover{color:var(--accent-ink);text-decoration-color:currentColor}

/* ---------- responsive ---------- */
/* touch screens get 40px rows at every width */
@media (pointer:coarse){
  .ftr{--ftr-row:40px}
  .ftr .ftr-copy a{padding-block:12px}
}
/* 980 to 1279: slogan under the logo, 2 x 2 contacts, four link columns, offices on their own row */
@media (max-width:1279px){
  .ftr .ftr-slogan{display:block}
  .ftr .ftr-contacts{display:grid;grid-template-columns:auto auto;row-gap:16px}
  .ftr .ftr-grid{grid-template-columns:repeat(4,auto);grid-template-rows:auto 1fr auto;grid-template-areas:"mh tr co cat" "mh tr co lg" "of of of of"}
  .ftr .ftr-g-cat{--ftr-hx:0px}
  .ftr .ftr-g-of{grid-template-columns:subgrid;margin-top:16px}
  .ftr .ftr-g-of .ftr-h{grid-column:1/-1}
  .ftr .ftr-g-of .ftr-adr{grid-row:2;grid-column:1/3}
  .ftr .ftr-g-of .ftr-adr+.ftr-adr{grid-column:3/5;margin-top:0}
}
/* tablets: 40px rows, 44px contact targets */
@media (max-width:1023px){
  .ftr{--ftr-row:40px}
  .ftr .ftr-val{min-height:44px;margin-block:-8px}
  .ftr .ftr-copy{line-height:28px}
  .ftr .ftr-copy a{padding-block:12px}
  /* hairlines between rows (drawn with a shadow, so rows stay exactly one unit tall) */
  .ftr .ftr-list:not(.ftr-docs) li+li{box-shadow:inset 0 1px 0 var(--panel-2)}
}
/* 680 to 979: brand above a 2 x 2 contact grid; catalogues first, then three link columns */
@media (max-width:979px){
  .ftr .ftr-strip-row{flex-direction:column;align-items:stretch;gap:24px;padding-block:24px 26px}
  .ftr .ftr-id{align-self:flex-start}
  .ftr .ftr-contact{margin-left:0}
  .ftr .ftr-contacts{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 0}
  .ftr .ftr-ct{margin-left:0}
  .ftr .ftr-main{padding-block:40px 48px}
  .ftr .ftr-grid{--ftr-cg:28px;grid-template-columns:repeat(3,auto);grid-template-rows:none;grid-template-areas:"cat cat cat" "mh tr co" "lg of of";row-gap:40px}
  .ftr .ftr-g-co{--ftr-hx:0px}
  .ftr .ftr-g-lg{--ftr-hx:var(--ftr-cg)}
  .ftr .ftr-docs{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px var(--ftr-cg)}
  .ftr .ftr-doc{min-height:64px}
  .ftr .ftr-g-of{grid-template-columns:none;margin-top:0}
  .ftr .ftr-g-of .ftr-adr,.ftr .ftr-g-of .ftr-adr+.ftr-adr{grid-row:auto;grid-column:auto}
  .ftr .ftr-g-of .ftr-adr+.ftr-adr{margin-top:20px}
}
/* 520 to 679: two columns of groups */
@media (max-width:679px){
  .ftr .ftr-main{padding-block:32px 40px}
  .ftr .ftr-grid{--ftr-cg:24px;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"cat cat" "mh tr" "co lg" "of of";row-gap:36px}
  .ftr .ftr-g-mh,.ftr .ftr-g-co{--ftr-hx:var(--ftr-cg)}
  .ftr .ftr-g-tr,.ftr .ftr-g-lg{--ftr-hx:0px}
  .ftr .ftr-h{margin-bottom:6px}
  .ftr .ftr-copy{padding-block:14px 18px}
}
@media (min-width:600px) and (max-width:679px){
  .ftr .ftr-g-of{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--ftr-cg)}
  .ftr .ftr-g-of .ftr-h{grid-column:1/-1}
  .ftr .ftr-g-of .ftr-adr{grid-row:2}
  .ftr .ftr-g-of .ftr-adr+.ftr-adr{margin-top:0}
}
/* phones: contact rows as label | value, the phone number as the hero */
@media (max-width:619px){
  .ftr .ftr-strip-row{gap:20px;padding-block:22px 4px}
  .ftr .ftr-word{font-size:23px}
  .ftr .ftr-mark{width:40px;height:49px}
  .ftr .ftr-contacts{grid-template-columns:minmax(0,1fr);gap:0}
  .ftr .ftr-ct{display:grid;grid-template-columns:60px minmax(0,1fr);align-items:center;column-gap:12px;padding:0;border-left:0;border-top:1px solid var(--rule)}
  .ftr .ftr-val{min-height:48px;margin-block:0;font-size:15.5px;white-space:normal;overflow-wrap:anywhere}
  .ftr .ftr-ct-tel .ftr-val{min-height:58px;font-size:29px;line-height:30px}
}
@media (max-width:599px){
  .ftr .ftr-docs{grid-template-columns:minmax(0,1fr);gap:8px}
}
/* phones: one column of groups; range lists stay single column so no name wraps */
@media (max-width:519px){
  .ftr .ftr-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"cat" "mh" "tr" "co" "lg" "of";row-gap:32px}
  .ftr .ftr-grp,.ftr .ftr-g-mh,.ftr .ftr-g-co{--ftr-hx:0px}
  .ftr .ftr-g-co .ftr-list,.ftr .ftr-g-lg .ftr-list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
  .ftr .ftr-g-co .ftr-list li:nth-child(2),.ftr .ftr-g-lg .ftr-list li:nth-child(2){box-shadow:none}
}
/* narrow phones: labels above values, short lists single column, the wordmark may wrap */
@media (max-width:374px){
  .ftr .ftr-ct{grid-template-columns:minmax(0,1fr);padding-top:10px}
  .ftr .ftr-val{min-height:40px}
  .ftr .ftr-ct-tel .ftr-val{min-height:48px}
}
@media (max-width:359px){
  .ftr .ftr-word,.ftr .ftr-word small{white-space:normal}
  .ftr .ftr-g-co .ftr-list,.ftr .ftr-g-lg .ftr-list{grid-template-columns:minmax(0,1fr)}
  .ftr .ftr-g-co .ftr-list li:nth-child(2),.ftr .ftr-g-lg .ftr-list li:nth-child(2){box-shadow:inset 0 1px 0 var(--panel-2)}
}