/* ==========================================================================
   About Us and Contact Us

   Built on the same tokens as the homepage, so every palette carries over;
   the photographs use purpose-built TGL campaign artwork.
   ========================================================================== */

@keyframes pg-in-l{from{opacity:0;transform:translateX(-70px)}to{opacity:1;transform:none}}
@keyframes pg-in-r{from{opacity:0;transform:translateX(70px)}to{opacity:1;transform:none}}
@keyframes pg-zoom{from{transform:scale(1.08)}to{transform:scale(1)}}
@keyframes pg-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ------------------------------------------------------------ about hero */
.pg-hero{position:relative;overflow:hidden;padding:clamp(56px,8vw,112px) 0 clamp(64px,8vw,120px)}
.pg-hero-head{text-align:center;margin-bottom:clamp(36px,5vw,64px)}
/* The reference's short rule above the eyebrow. */
.pg-hero-head .eyebrow{display:inline-flex;flex-direction:column;align-items:center;gap:14px}
.pg-hero-head .eyebrow::before{content:'';width:40px;height:2px;background:var(--yellow)}
.pg-hero h1{max-width:13ch;margin:0 auto;font-size:clamp(42px,6.2vw,76px);line-height:1.02;letter-spacing:-.015em}
.pg-hero h1 em{font-style:normal;color:var(--yellow)}

/* The picture runs the width of the shell, and the card overlaps its lower
   edge rather than sitting across the middle of it. */
.pg-hero-stage{position:relative}
.pg-hero-photo{position:relative;margin:0;overflow:hidden;border-radius:6px;
  /* The shape of the photograph itself, so the whole of it shows and neither
     the wing nor the skyline is cropped off the ends. */
  aspect-ratio:21/8;animation:pg-in-l 1.1s var(--ease) both}
.pg-hero-photo::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 42%,rgba(7,6,26,.55) 100%)}
.pg-hero-photo picture{display:block;width:100%;height:100%}
.pg-hero-photo .pg-art{display:block;width:100%;height:100%;object-fit:cover;
  animation:pg-zoom 2.6s var(--ease) both}
.pg-hero-card{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;gap:clamp(24px,3vw,48px);width:min(1080px,calc(100% - 72px));
  margin:clamp(-88px,-7vw,-56px) auto 0;padding:clamp(26px,3vw,38px) clamp(26px,3.2vw,44px);
  background:var(--card);border:1px solid var(--line);border-top:3px solid var(--yellow);
  box-shadow:0 34px 70px rgba(6,4,20,.42);animation:pg-in-r 1.1s var(--ease) .15s both}
.pg-hero-card p{margin:0;font-family:var(--f-head);font-weight:500;
  font-size:clamp(16px,1.35vw,19px);line-height:1.6;color:var(--ink)}
.pg-hero-card .btn{flex:0 0 auto;white-space:nowrap}
.pg-hero-mark{position:absolute;top:16px;right:18px;width:42px;height:42px;opacity:.1;
  background:url("../img/logo-white.png") center/contain no-repeat;pointer-events:none}
[data-palette="nightfall"] .pg-hero-mark{opacity:.14}

/* ------------------------------------------------ split: story and FAQs */
.pg-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center}
.pg-split-copy .hb{max-width:none;margin-bottom:22px}
.pg-prose p{margin-bottom:14px;font-size:16px;line-height:1.78}
.pg-stats{gap:52px;margin-top:30px}
.pg-stats .stat-n{font-size:clamp(40px,4.4vw,52px)}

.pg-split-vis{position:relative;display:grid;place-items:center;min-height:clamp(340px,42vw,580px)}
.pg-photo{position:relative;z-index:2;width:min(480px,84%);aspect-ratio:1;margin:0;overflow:hidden;
  box-shadow:0 34px 70px rgba(6,4,20,.45)}
.pg-photo .pg-art{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.pg-split-vis:hover .pg-photo .pg-art{transform:scale(1.06)}
.pg-split-rev .pg-split-vis{order:-1}

/* ------------------------------------------------ mission, vision, values */
.mvv-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.mvv-card{position:relative;overflow:hidden;padding:clamp(28px,3vw,42px);text-align:center;
  background:var(--card);border:1px solid var(--line);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s}
.mvv-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--yellow);
  transform:scaleX(0);transition:transform .45s var(--ease)}
.mvv-card:hover{transform:translateY(-8px);border-color:rgba(var(--yellow-rgb),.5);box-shadow:0 30px 60px rgba(6,4,20,.35)}
.mvv-card:hover::before{transform:scaleX(1)}
.mvv-num{position:absolute;top:12px;right:18px;font-family:var(--f-head);font-weight:800;font-size:58px;line-height:1;
  color:rgba(var(--navy-rgb),.06)}
[data-palette="nightfall"] .mvv-num{color:rgba(255,255,255,.05)}
.mvv-ic{display:inline-grid;place-items:center;width:66px;height:66px;margin-bottom:20px;
  background:var(--yellow-soft);color:var(--navy);transition:background .3s,color .3s,transform .5s var(--ease)}
[data-palette="nightfall"] .mvv-ic{background:rgba(var(--yellow-rgb),.14);color:var(--yellow)}
.mvv-card:hover .mvv-ic{background:var(--yellow);transform:rotate(-6deg) scale(1.05)}
[data-palette="nightfall"] .mvv-card:hover .mvv-ic{color:#fff}
.mvv-card h3{margin-bottom:12px;font-size:22px}
.mvv-card p{font-size:15.5px;line-height:1.72}

.vals{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;
  margin-top:clamp(40px,5vw,64px);padding:clamp(22px,3vw,36px);border:1px solid var(--line);
  background:linear-gradient(135deg,rgba(var(--yellow-rgb),.07),transparent 62%)}
.vals-tabs{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.vals-tab{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);background:transparent;
  color:var(--ink);font-family:var(--f-head);font-weight:700;font-size:16px;text-align:left;cursor:pointer;
  transition:border-color .25s,background .25s,transform .35s var(--ease)}
.vals-ic{flex:0 0 auto;display:grid;place-items:center;width:40px;height:40px;background:var(--yellow-soft);color:var(--navy);
  transition:background .25s,color .25s}
[data-palette="nightfall"] .vals-ic{background:rgba(var(--yellow-rgb),.14);color:var(--yellow)}
.vals-tab:hover,.vals-tab.on{border-color:var(--yellow);background:rgba(var(--yellow-rgb),.08)}
.vals-tab:hover{transform:translateY(-2px)}
.vals-tab.on .vals-ic{background:var(--yellow)}
/* The open tab's disc is solid yellow, so the glyph on it is navy. */
[data-palette="nightfall"] .vals-tab.on .vals-ic{color:var(--navy)}
.vals-panel{font-size:16px;line-height:1.78;animation:pg-rise .45s var(--ease)}

/* ---------------------------------------- people, technology, advantage */
.pl-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:end;margin-bottom:34px}
.pl-head .hb{margin-bottom:0}
.pl-lead{font-size:17px;line-height:1.72}
.pl-tabs{position:relative;display:grid;grid-template-columns:repeat(3,1fr);margin-bottom:36px;border-bottom:1px solid var(--line)}
.pl-tab{display:flex;align-items:center;gap:12px;padding:18px 6px 20px;border:0;background:none;color:var(--text);
  font-family:var(--f-head);font-weight:700;font-size:clamp(16px,1.8vw,22px);text-align:left;cursor:pointer;transition:color .3s}
.pl-no{font-family:var(--f-alt);font-size:12px;letter-spacing:.14em}
.pl-ic{flex:0 0 auto;display:grid;place-items:center;width:46px;height:46px;border:1px solid var(--line);color:var(--yellow);
  transition:background .3s,border-color .3s,color .3s,transform .45s var(--ease)}
.pl-tab:hover,.pl-tab.on{color:var(--ink)}
.pl-tab:hover .pl-ic{transform:rotate(-6deg)}
.pl-tab.on .pl-ic{background:var(--yellow);border-color:var(--yellow);color:var(--navy)}
[data-palette="nightfall"] .pl-tab.on .pl-ic{color:var(--navy)}
.pl-ink{position:absolute;left:0;bottom:-1px;width:calc(100% / 3);height:3px;background:var(--yellow);
  transition:transform .55s var(--ease)}

.pl-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,4vw,60px);align-items:center}
.pl-img{position:relative;aspect-ratio:4/3;margin:0;overflow:hidden}
.pl-img::after{content:'';position:absolute;right:0;bottom:0;width:92px;height:92px;background:var(--yellow);
  clip-path:polygon(100% 0,100% 100%,0 100%)}
.pl-img img{display:block;width:100%;height:100%;object-fit:cover}
.pl-panel.on .pl-img img{animation:pg-zoom 1.2s var(--ease)}
.pl-panel.on .pl-copy{animation:pg-rise .5s var(--ease)}
.pl-copy h3{margin-bottom:12px;font-size:clamp(24px,2.5vw,32px)}
.pl-copy > p{margin-bottom:22px;font-size:16px;line-height:1.75}
.pl-points{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 24px}
.pl-points li{padding-top:14px;border-top:1px solid var(--line);animation:pg-rise .5s var(--ease) both;
  animation-delay:calc(var(--k) * 60ms)}
.pl-points b{display:block;margin-bottom:3px;font-family:var(--f-head);font-weight:700;font-size:15.5px;color:var(--ink)}
.pl-points span{font-size:14px;line-height:1.55}

/* --------------------------------------------------------------- journey */
.jr{position:relative}
.jr-track{position:relative;padding-top:60px}
/* The rail runs between the first and last stop, so both ends sit on a dot. */
.jr-rail{position:absolute;top:87px;left:calc(100% / (var(--n) * 2));right:calc(100% / (var(--n) * 2));height:3px;
  border-radius:2px;background:var(--line)}
.jr-fill{display:block;width:0;height:100%;border-radius:2px;background:var(--yellow);transition:width .9s var(--ease)}
.jr-veh{position:absolute;top:18px;left:calc(100% / (var(--n) * 2));z-index:2;width:112px;pointer-events:none;
  transform:translateX(-50%);transition:left .9s var(--ease)}
.jr-veh .veh{display:block;width:100%;height:auto;filter:drop-shadow(0 12px 16px rgba(0,0,0,.45))}
.jr-veh.rev{transform:translateX(-50%) scaleX(-1)}
.jr-stops{display:grid;grid-template-columns:repeat(var(--n),1fr);margin:0;padding:0;list-style:none}
.jr-stop{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;padding:18px 4px 0;border:0;background:none;
  color:var(--text);font-family:var(--f-head);font-weight:700;font-size:18px;cursor:pointer}
.jr-dot{width:18px;height:18px;border:3px solid var(--line);border-radius:50%;background:var(--off);
  transition:border-color .3s,background .3s,transform .45s var(--ease),box-shadow .3s}
.jr-stop.past .jr-dot{border-color:var(--yellow)}
.jr-stop:hover .jr-dot{transform:scale(1.15);border-color:var(--yellow)}
.jr-stop.on .jr-dot{background:var(--yellow);border-color:var(--yellow);transform:scale(1.3);
  box-shadow:0 0 0 9px rgba(var(--yellow-rgb),.16)}
.jr-yr{transition:color .3s}
.jr-stop:hover .jr-yr,.jr-stop.on .jr-yr{color:var(--ink)}
.jr-panels{min-height:170px;max-width:780px;margin:34px auto 0;text-align:center}
.jr-panel{animation:pg-rise .55s var(--ease)}
.jr-big{display:block;margin-bottom:10px;font-family:var(--f-head);font-weight:800;font-size:clamp(58px,8.5vw,112px);line-height:1;
  color:transparent;-webkit-text-stroke:1.5px rgba(var(--yellow-rgb),.7)}
.jr-panel p{font-family:var(--f-head);font-weight:500;font-size:clamp(19px,2.1vw,26px);line-height:1.45;color:var(--ink)}

/* -------------------------------------------------------------- benefits */
.bf{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(36px,6vw,90px);align-items:start}
.bf-intro{position:sticky;top:120px}
.bf-counter{display:flex;align-items:baseline;gap:10px;margin-top:10px;font-family:var(--f-head);font-weight:800}
.bf-now{display:inline-block;font-size:clamp(84px,10.5vw,148px);line-height:.9;color:var(--yellow)}
.bf-now.flip{animation:pg-rise .45s var(--ease)}
.bf-of{font-size:22px;color:var(--text)}

.bf-list{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.bf-item{border-bottom:1px solid var(--line)}
.bf-head{display:grid;grid-template-columns:40px 52px 1fr 26px;align-items:center;gap:14px;width:100%;padding:22px 0;
  border:0;background:none;color:var(--ink);font-family:var(--f-head);text-align:left;cursor:pointer}
.bf-n{font-family:var(--f-alt);font-size:13px;letter-spacing:.12em;color:var(--text)}
.bf-ic{display:grid;place-items:center;width:52px;height:52px;background:var(--yellow-soft);color:var(--navy);
  transition:background .3s,color .3s,transform .5s var(--ease)}
[data-palette="nightfall"] .bf-ic{background:rgba(var(--yellow-rgb),.14);color:var(--yellow)}
.bf-t{font-weight:700;font-size:clamp(18px,2vw,24px);transition:color .3s,transform .45s var(--ease)}
.bf-pm{position:relative;width:26px;height:26px}
.bf-pm::before,.bf-pm::after{content:'';position:absolute;top:50%;left:50%;width:14px;height:2px;background:currentColor;
  transform:translate(-50%,-50%);transition:transform .4s var(--ease)}
.bf-pm::after{transform:translate(-50%,-50%) rotate(90deg)}
.bf-item.on .bf-pm::after{transform:translate(-50%,-50%) rotate(0)}
.bf-item.on .bf-ic{background:var(--yellow);transform:rotate(-6deg)}
[data-palette="nightfall"] .bf-item.on .bf-ic{color:var(--navy)}
.bf-item.on .bf-t{color:var(--yellow);transform:translateX(4px)}
.bf-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.bf-item.on .bf-body{grid-template-rows:1fr}
.bf-body > ul{overflow:hidden;margin:0;padding:0 0 0 106px;list-style:none}
.bf-body li{position:relative;padding:0 0 12px 28px;font-size:15.5px;line-height:1.6}
.bf-body li:last-child{padding-bottom:22px}
.bf-body li::before{content:'';position:absolute;top:4px;left:0;width:16px;height:16px;border-radius:50%;background:var(--yellow);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 13 4 4L19 7' stroke='black' stroke-width='3' fill='none'/%3E%3C/svg%3E") center/12px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 13 4 4L19 7' stroke='black' stroke-width='3' fill='none'/%3E%3C/svg%3E") center/12px no-repeat}

/* --------------------------------------------------------------- network */
.nw-top{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px;align-items:end;margin-bottom:34px}
.nw-top .hb{margin-bottom:0}
[data-palette="nightfall"] .nw-stats{border-top-color:var(--band-line)}
/* The palette paints stat labels white, which is right on the dark sections
   but left these invisible: this band stays light in every palette, so the
   labels here take the band's own body colour. */
.pg-network .nw-stats .stat-l{color:var(--text)}
/* Figures in a column this narrow wrapped and stranded the last, so they read
   as rows. One grid for the whole block, not a flex line per row: that way
   the figures share a column and the labels share the next, and both agree
   across rows. The figures are set to the right of their column so the plus
   signs stack whatever the number's width, and the two cells of a row meet so
   the hairline runs unbroken under both. */
.nw-stats{display:grid;grid-template-columns:max-content minmax(0,1fr);
  align-items:baseline;padding-top:0;border-top:0;gap:0}
.nw-stats .stat{display:contents}
.nw-stats .stat-n,.nw-stats .stat-l{padding:13px 0;border-top:1px solid var(--band-line)}
.nw-stats .stat-n{font-size:clamp(28px,3vw,36px);line-height:1.05;text-align:right}
.nw-stats .stat-l{text-align:left;padding-left:22px;margin-top:0}
.nw-group{margin-top:26px}
.nw-label{margin-bottom:12px;font-family:var(--f-alt);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--text)}
.nw-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:0;padding:0;list-style:none}
.nw-tile{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto;gap:4px 14px;align-items:center;
  padding:16px 18px;overflow:hidden;border:1px solid var(--band-line);background:rgba(255,255,255,.06);outline:none;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s}
[data-palette="nightfall"] .nw-tile{background:#fff}
.nw-tile::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:3px;background:var(--yellow);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .45s var(--ease)}
.nw-flag{grid-row:1 / -1;width:46px;height:34px;overflow:hidden;border-radius:3px;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.nw-flag img{display:block;width:100%;height:100%;object-fit:cover}
.nw-name,.nw-detail,.nw-ad{grid-column:2}
.nw-name{font-family:var(--f-head);font-weight:700;font-size:16px;color:var(--ink)}
.nw-detail{font-size:13px;line-height:1.45;color:var(--text)}
.nw-ad{font-style:normal;font-size:12.5px;line-height:1.5;color:var(--text)}
.nw-tile:hover,.nw-tile:focus-visible{transform:translateY(-5px);border-color:var(--yellow);box-shadow:0 20px 40px rgba(22,19,62,.16)}
.nw-tile:hover::after,.nw-tile:focus-visible::after{transform:scaleX(1)}
.nw-tile:hover .nw-flag img{animation:nw-wave 1.2s ease-in-out}
@keyframes nw-wave{25%{transform:skewY(-5deg) scale(1.08)}50%{transform:skewY(4deg) scale(1.08)}75%{transform:skewY(-2deg) scale(1.04)}}

/* ------------------------------------------------------------------- FAQ */
.faq{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-h{margin:0;font-size:inherit}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:18px;width:100%;padding:20px 0;border:0;background:none;
  color:var(--ink);font-family:var(--f-head);font-weight:500;font-size:clamp(17px,1.7vw,20px);line-height:1.35;text-align:left;
  cursor:pointer;transition:color .25s}
.faq-q:hover,.faq-q[aria-expanded="true"]{color:var(--yellow)}
.faq-pm{position:relative;flex:0 0 auto;width:32px;height:32px;border:1px solid var(--line);border-radius:50%;color:var(--ink);
  transition:background .3s,border-color .3s,transform .5s var(--ease)}
.faq-pm::before,.faq-pm::after{content:'';position:absolute;top:50%;left:50%;width:12px;height:2px;background:currentColor;
  transform:translate(-50%,-50%);transition:transform .4s var(--ease)}
.faq-pm::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq-q[aria-expanded="true"] .faq-pm{background:var(--yellow);border-color:var(--yellow);transform:rotate(180deg)}
[data-palette="nightfall"] .faq-q[aria-expanded="true"] .faq-pm{color:#fff}
.faq-q[aria-expanded="true"] .faq-pm::after{transform:translate(-50%,-50%) rotate(0)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a > div{overflow:hidden}
.faq-a p{padding:0 52px 22px 0;font-size:15.5px;line-height:1.78}

/* ------------------------------------------------------------ call to action */
.cta-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}

/* ========================================================== contact hero */
/* It read as stretched: a third of the height was padding and gaps. */
.ct-hero{position:relative;isolation:isolate;overflow:hidden;padding:clamp(40px,5vw,76px) 0 clamp(44px,5vw,72px)}
.ct-hero-bg{position:absolute;inset:0;z-index:-1}
.ct-hero-bg img{display:block;width:100%;height:100%;object-fit:cover;animation:pg-zoom 3s var(--ease) both}
.ct-hero-bg::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,8,32,.3) 0%,rgba(10,8,32,.62) 58%,rgba(10,8,32,.96) 100%),
    linear-gradient(90deg,rgba(10,8,32,.8) 0%,rgba(10,8,32,.12) 72%)}
.ct-hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,580px);gap:clamp(26px,3.4vw,48px);align-items:start}
.ct-hero-copy{padding-top:clamp(6px,2vw,22px);color:#fff}
.ct-hero-copy .eyebrow{display:inline-flex;align-items:center;gap:12px;color:var(--yellow)}
.ct-hero-copy .eyebrow::before{content:'';width:40px;height:2px;background:var(--yellow)}
.ct-hero h1{margin:14px 0;font-size:clamp(46px,6.4vw,78px);line-height:1;color:#fff}
.ct-hero h1 em{font-style:normal;color:var(--yellow)}
.ct-lead{margin-bottom:18px;font-size:clamp(18px,1.9vw,23px);color:rgba(255,255,255,.8)}
.ct-notice{display:flex;align-items:flex-start;gap:12px;max-width:46ch;margin-bottom:20px;padding:12px 15px;
  border-left:3px solid var(--yellow);background:rgba(255,255,255,.07);color:rgba(255,255,255,.88);font-size:14.5px;line-height:1.55}
.ct-notice svg{flex:0 0 auto;margin-top:1px;color:var(--yellow)}
.ct-now{display:grid;gap:8px;max-width:440px;margin:0;padding:0;list-style:none}
.ct-now li{display:grid;grid-template-columns:30px 1fr auto auto;align-items:center;gap:12px;padding:9px 14px;
  border:1px solid rgba(255,255,255,.13);background:rgba(10,8,32,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.ct-now-city{font-size:14px;color:rgba(255,255,255,.82)}
.ct-now .tb-time{font-size:14px}

/* The form card: white, as in the reference, sitting on the photograph.
   Named apart from .ct-card, which the office panels in the floating tools use. */
.ct-formcard{position:relative;padding:clamp(24px,3vw,40px);background:#fff;color:#5A5870;box-shadow:0 40px 90px rgba(6,4,20,.55)}
.ct-formcard::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--yellow)}
.ctf h2{margin-bottom:8px;font-size:clamp(28px,3vw,40px);color:var(--navy)}
.ctf-intro{margin-bottom:16px;font-size:15.5px;line-height:1.6;color:#5A5870}
.ctf-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ctf-f{display:flex;flex-direction:column;gap:5px;min-width:0;margin-bottom:10px}
.ctf-f > span,.ctf-heard legend{font-family:var(--f-body);font-weight:500;font-size:13.5px;color:var(--navy)}
.ctf-f i,.ctf-heard i{font-style:normal;color:#6B6882}
.ctf-f em{margin-left:4px;font-style:normal;font-size:12px;font-weight:400;color:#6B6882}
.ctf input,.ctf select,.ctf textarea{width:100%;min-height:44px;padding:10px 14px;border:1px solid #D9D8E3;border-radius:0;
  background-color:#fff;color:var(--navy);font:inherit;font-size:15px;font-weight:400;transition:border-color .2s,box-shadow .2s}
.ctf textarea{min-height:96px;resize:vertical}
.ctf select{appearance:none;-webkit-appearance:none;padding-right:38px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2316133E' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center}
.ctf input::placeholder,.ctf textarea::placeholder{color:#A9A7B8}
.ctf input:focus,.ctf select:focus,.ctf textarea:focus{outline:0;border-color:var(--navy);box-shadow:0 0 0 3px rgba(var(--yellow-rgb),.4)}
.ctf .is-bad{border-color:#C8412F;box-shadow:0 0 0 3px rgba(200,65,47,.14)}
.ctf-heard{min-width:0;margin:0 0 14px;padding:0;border:0}
.ctf-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.ctf-chip{position:relative}
.ctf-chip span{display:inline-block;padding:9px 14px;border:1px solid #D9D8E3;color:var(--navy);font-size:14px;cursor:pointer;
  transition:border-color .2s,background .2s,color .2s}
.ctf-chip:hover span{border-color:var(--navy)}
.ctf-chip input:checked + span{border-color:var(--navy);background:var(--navy);color:#fff}
.ctf-chip input:focus-visible + span{outline:2px solid var(--yellow);outline-offset:2px}
.ctf-heard.is-bad .ctf-chip span{border-color:#C8412F}
.ctf-other{display:block;margin-top:10px}
.ctf-err{margin:0 0 14px;padding:10px 14px;border-left:3px solid #C8412F;background:#FCEFED;color:#8E2B1E;font-size:14px}
.ctf-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:6px}
.ctf-note{max-width:30ch;font-size:12.5px;line-height:1.5;color:#6B6882}
.ctf .btn-n{padding:15px 30px}
.ctf .btn[disabled]{opacity:.6;cursor:progress}
.ctf-done{padding:30px 10px;text-align:center;animation:pg-rise .45s var(--ease)}
.ctf-tick{display:inline-grid;place-items:center;width:66px;height:66px;margin-bottom:14px;border-radius:50%;background:var(--yellow);color:var(--navy)}
.ctf-done h2{margin-bottom:8px;font-size:28px;color:var(--navy);outline:0}
.ctf-done p{line-height:1.6;color:#5A5870}
.ctf-done .ctf-ref{margin:12px 0 18px;font-family:var(--f-alt);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--navy)}
.ctf-done .btn-o{border-color:#D9D8E3;color:var(--navy)}

/* ------------------------------------------------------------ contact strip */
.ct-strip{background:var(--yellow);color:var(--navy)}
.ct-strip-in{display:grid;grid-template-columns:repeat(3,1fr)}
.ct-ch{position:relative;display:flex;align-items:center;gap:16px;padding:34px 24px;border:0;background:none;color:var(--navy);
  font:inherit;text-align:left;cursor:pointer;transition:background .3s}
.ct-ch + .ct-ch::before{content:'';position:absolute;top:26%;bottom:26%;left:0;width:1px;background:rgba(var(--navy-rgb),.28)}
.ct-ch-ic{flex:0 0 auto;display:grid;place-items:center;width:58px;height:58px;border:1.5px solid rgba(var(--navy-rgb),.4);
  transition:background .3s,color .3s,border-color .3s,transform .5s var(--ease)}
.ct-ch-t{display:flex;flex-direction:column;gap:3px;min-width:0}
.ct-ch-t b{font-family:var(--f-head);font-weight:700;font-size:18px}
.ct-ch-t span{font-size:14px;line-height:1.45;color:rgba(var(--navy-rgb),.78)}
.ct-ch-go{margin-left:auto;opacity:.5;transition:transform .35s var(--ease),opacity .3s}
.ct-ch:hover{background:rgba(255,255,255,.2)}
.ct-ch:hover .ct-ch-ic{background:var(--navy);border-color:var(--navy);color:#fff;transform:rotate(-6deg)}
.ct-ch:hover .ct-ch-go{opacity:1;transform:translateX(6px)}
[data-palette="crimson"] .ct-strip,[data-palette="crimson"] .ct-ch{color:#fff}

/* --------------------------------------------------------- offices + map */
.co{display:grid;grid-template-columns:minmax(0,370px) minmax(0,1fr);gap:22px;align-items:stretch}
.co-list{display:grid;align-content:start;gap:10px}
.co-tab{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:18px;
  border:1px solid var(--line);background:var(--card);color:var(--ink);font:inherit;text-align:left;cursor:pointer;
  transition:border-color .3s,background .3s,transform .45s var(--ease)}
.co-tab::before{content:'';position:absolute;top:-1px;bottom:-1px;left:-1px;width:3px;background:var(--yellow);
  transform:scaleY(0);transition:transform .45s var(--ease)}
.co-tab:hover{transform:translateX(5px);border-color:rgba(var(--yellow-rgb),.4)}
.co-tab.on{border-color:rgba(var(--yellow-rgb),.65);background:rgba(var(--yellow-rgb),.07)}
.co-tab.on::before{transform:scaleY(1)}
.co-flag{display:block;width:38px;height:28px;border-radius:3px;object-fit:cover;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.co-t b{display:block;font-family:var(--f-head);font-size:17px}
.co-t span{font-size:13px;color:var(--text)}
.co-meta{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.co-meta .tb-time{font-size:15px}
.co-stage{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);min-height:430px;border:1px solid var(--line)}
.co-map{position:relative;min-height:320px;overflow:hidden;background:var(--off)}
.co-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;transition:opacity .45s}
.co-map.is-loading iframe{opacity:.25}
.co-map-pulse{position:absolute;top:50%;left:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;
  pointer-events:none;opacity:0}
.co-map.is-loading .co-map-pulse{opacity:1;background:var(--yellow);animation:oc-pulse 1.2s ease-out infinite}
.co-card{padding:24px 22px;background:var(--tw-pop,#1B1748);animation:pg-rise .45s var(--ease)}
.co-card .oc-h strong{font-size:21px}

/* -------------------------------------------------------- TGL worldwide */
/* A row of flexible cards rather than a grid: there are seven offices, so
   the last row holds three, and on a grid those three hang to the left of a
   gap. Laid out this way they sit centred under the row above. */
.ww-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.ww-card{flex:0 1 calc((100% - 48px) / 4);display:flex;flex-direction:column;padding:24px;border:1px solid var(--line);background:var(--card);
  transition:transform .45s var(--ease),border-color .3s,box-shadow .45s var(--ease)}
.ww-card:hover{transform:translateY(-6px);border-color:rgba(var(--yellow-rgb),.5);box-shadow:0 26px 50px rgba(6,4,20,.35)}
.ww-flag{width:44px;height:33px;margin-bottom:16px;border-radius:3px;object-fit:cover;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.ww-card h3{margin-bottom:8px;font-size:18px}
.ww-card address{flex:1;margin-bottom:14px;font-style:normal;font-size:14px;line-height:1.6}
.ww-acts{display:grid;gap:6px;padding-top:12px;border-top:1px solid var(--line)}
.ww-acts a{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink);overflow-wrap:anywhere}
.ww-acts svg{flex:0 0 auto;color:var(--yellow)}
.ww-acts a:hover span{color:var(--yellow)}

/* ------------------------------------------------------------ responsive */
@media (max-width:1080px){
  .nw-grid{grid-template-columns:repeat(2,1fr)}
  .ww-card{flex-basis:calc((100% - 16px) / 2)}
  .co{grid-template-columns:1fr}
  .co-list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .co-tab{grid-template-columns:auto 1fr}
  .co-meta{grid-column:1 / -1;flex-direction:row;align-items:center;justify-content:space-between}
}
@media (max-width:900px){
  .pg-hero-photo{aspect-ratio:16/10}
  .pg-hero-card{grid-template-columns:1fr;justify-items:start;width:calc(100% - 32px);margin-top:-48px}
  .pg-split,.pl-head,.pl-panel,.bf,.nw-top,.ct-hero-in,.vals{grid-template-columns:1fr}
  .pg-split-rev .pg-split-vis{order:1}
  .bf-intro{position:static}
  .bf-counter{display:none}
  .mvv-cards{grid-template-columns:1fr}
  .ct-strip-in{grid-template-columns:1fr}
  .ct-ch + .ct-ch::before{top:0;bottom:auto;left:24px;right:24px;width:auto;height:1px}
  .co-stage{grid-template-columns:1fr}
  .co-map{min-height:280px}
}
@media (max-width:640px){
  .ctf-row{grid-template-columns:1fr;gap:0}
  .pl-ic{display:none}
  .pl-tab{flex-direction:column;align-items:flex-start;gap:4px;font-size:15px}
  .pl-points,.nw-grid,.co-list{grid-template-columns:1fr}
  .ww-card{flex-basis:100%}
  .jr-veh{display:none}
  .jr-yr{font-size:13px}
  .jr-panels{min-height:210px}
  .bf-head{grid-template-columns:30px 44px 1fr 22px;gap:10px}
  .bf-ic{width:44px;height:44px}
  .bf-body > ul{padding-left:0}
  .ct-now li{grid-template-columns:30px 1fr auto;min-height:76px}
  .ct-now li .st{grid-column:2 / -1}
}

@media (prefers-reduced-motion:reduce){
  .pg-hero-photo,.pg-hero-photo img,.pg-hero-card,.ct-hero-bg img,.pl-panel.on .pl-img img,.pl-panel.on .pl-copy,
  .pl-points li,.jr-panel,.vals-panel,.bf-now.flip,.nw-tile:hover .nw-flag img,.co-card,.ctf-done{animation:none!important}
  .jr-fill,.jr-veh,.pl-ink,.faq-a,.bf-body{transition:none}
}

/* ------------------------------------------------- the film on a picture */
/* The picture is left as it is: the button sits on the middle of it, and the
   film opens over the page rather than replacing the picture in place. */
.pl-play{
  position:absolute;inset:0;display:grid;place-items:center;
  border:0;background:none;padding:0;cursor:pointer;
}
.pl-play-d{
  position:relative;
  display:grid;place-items:center;width:74px;height:74px;border-radius:50%;
  background:rgba(var(--navy-rgb),.62);color:#fff;
  box-shadow:0 10px 36px rgba(6,4,20,.42);
  transition:transform .35s var(--ease),background .3s,color .3s;
}
.pl-play-d svg{margin-left:3px}        /* the triangle sits optically centred */
.pl-play:hover .pl-play-d,
.pl-play:focus-visible .pl-play-d{background:var(--yellow);color:var(--navy);transform:scale(1.08)}
.pl-play:focus-visible{outline:2px solid var(--yellow);outline-offset:-4px}
/* A ring that leaves the button on hover, so it reads as a film and not a badge. */
.pl-play-d::after{
  content:'';position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--yellow);opacity:0;transform:scale(.9);
}
.pl-play:hover .pl-play-d::after{animation:pl-ring 1.4s var(--ease) infinite}
@keyframes pl-ring{0%{opacity:.55;transform:scale(.92)}100%{opacity:0;transform:scale(1.5)}}

@media (max-width:620px){
  .pl-play-d{width:60px;height:60px}
}
@media (prefers-reduced-motion:reduce){
  .pl-play:hover .pl-play-d::after{animation:none}
}

/* The player takes the picture's place: same frame, same size, same position.
   The frame keeps its shape, so the panel does not move when a film starts. */
.pl-film{position:absolute;inset:0;z-index:2;background:#000}
.pl-film iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.pl-img.is-playing .pl-play{display:none}
.pl-img.is-playing::after{display:none}   /* the yellow corner would sit over the controls */


/* ------------------------------------------------------- Get a Quote page */
/* One job, so one column: the heading, the form, and a way to phone instead.
   The panel keeps roughly the width it has in the hero rather than running
   the whole shell, because a form stretched that wide puts two words on a
   line of its own and reads worse for the extra room. */
.qp{padding:clamp(3.6rem,7vw,6.5rem) 0 clamp(4rem,8vw,7rem)}
.qp-head{max-width:68ch;margin-bottom:clamp(30px,4vw,46px)}
.qp-head p + p{margin-top:15px}
.qp-form{max-width:780px;margin:0 auto}

/* ---- the panel, scaled for a page rather than a column ---- */
/* The gutter every row inside the panel measures from. */
.qp-form .qf{--qf-gut:38px}
.qp-form .qf-rail{padding-left:var(--qf-gut);padding-right:var(--qf-gut);gap:7px}
.qp-form .qf-rail i{height:4px}
.qp-form .qf-step{padding:17px var(--qf-gut) 0;font-size:12px}
.qp-form .qf-body{padding:22px var(--qf-gut) 10px}
.qp-form .qf-err{margin-left:var(--qf-gut);margin-right:var(--qf-gut);font-size:14px}
.qp-form .qf-foot{padding:14px var(--qf-gut) 34px;gap:12px}
.qp-form .qf-foot .btn{padding-top:15px;padding-bottom:15px;font-size:15px}

/* Fields: a size up on the type and noticeably more room to type in. */
.qp-form .fld{margin-bottom:16px}
.qp-form .fld label{font-size:11.5px;margin-bottom:7px}
.qp-form .fld input,
.qp-form .fld select,
.qp-form .fld textarea{padding:15px 16px;font-size:15.5px}
.qp-form .fld textarea{min-height:104px}
.qp-form .duo{gap:16px}

/* The service tiles follow, or step two would look like a different form. */
.qp-form .svc-pick{gap:11px}
.qp-form .svc-pick label{padding:15px 16px;font-size:15px}

/* And the panel it turns into once the request is away. */
.qp-form .qf-done{padding:46px var(--qf-gut) 50px}
.qp-form .qf-done h3{font-size:25px}
.qp-form .qf-done p{font-size:15px}
.qp-form .qf-tick{width:64px;height:64px}

/* The panel's own title block is left out here, so the rail would otherwise
   start hard against the top edge. */
.qp-form .qf-rail{padding-top:26px}
/* Standing on its own rather than in the hero's column, so it takes the
   width the page gives it. */
.qp-form .qf{width:100%;max-width:none;justify-self:auto}

.qp-call{margin:28px auto 0;text-align:center;font-size:15px;color:var(--text)}
/* The yellow goes behind the number and grows to cover it on hover, which is
   the same move the links in the footer make. */
.qp-call a{color:var(--ink);font-weight:600;text-decoration:none;
  box-shadow:inset 0 -2px 0 var(--yellow);transition:box-shadow .25s ease}
.qp-call a:hover,.qp-call a:focus-visible{box-shadow:inset 0 -1.05em 0 var(--yellow)}

@media(max-width:620px){
  .qp-form{max-width:none}
  /* A long paragraph centred on a narrow screen is ragged down both edges and
     the eye loses the start of each line. The heading stays centred; the
     reading text does not. */
  .qp-head p:not(.eyebrow){text-align:left}
}