
@import url('https://fonts.googleapis.com/css2?family=Tilt+Warp&family=Figtree:wght@400;500;600;700&display=swap');
.gtr{
  --navy:#071F60;--navy-deep:#041444;--gold:#FFC300;--sun:#FFC82B;--sky:#6EC5EF;
  --c:#00A3E0;--m:#E6007E;--y:#FFE600;--k:#1A1A1A;
  --paper:#F6F7F9;--sheet:#FFFFFF;--ink:#0B1A3F;--muted:#4A5A80;--line:rgba(7,31,96,.12);--cm:rgba(7,31,96,.55);
  --display:"Tilt Warp","Arial Black",system-ui,sans-serif;
  --body:"Figtree",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
}
.gtr *,.gtr *::before,.gtr *::after{box-sizing:border-box}
.gtr picture{display:contents}
:where(.gtr) picture>img{height:auto}
.gtr{color:var(--ink)!important;font-family:var(--body);font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:clip;background:var(--paper)}
.gtr-wrap{max-width:1200px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.gtr h1,.gtr h2,.gtr h3,.gtr h4{font-family:var(--display);font-weight:400;line-height:1.08;text-wrap:balance;margin:0;text-transform:none;color:var(--navy)!important}
.gtr h1{font-size:clamp(42px,6vw,80px);letter-spacing:-.02em}
.gtr h2{font-size:clamp(30px,4vw,50px);letter-spacing:-.01em}
.gtr h3{font-size:clamp(23px,2.4vw,30px)}
.gtr-base h3{font-size:21px}
.gtr h2 strong,.gtr h3 strong{font-weight:400}
.gtr p{margin:0;font-family:var(--body);font-size:17px}
.gtr a{color:var(--navy)!important;text-decoration:none;font-weight:700;background:linear-gradient(var(--c),var(--c)) 0 100%/100% 2px no-repeat;transition:background-size .3s var(--ease),color .2s}
.gtr a:hover{background-size:100% 100%;color:#fff!important}
.gtr a:focus-visible{outline:3px solid var(--m);outline-offset:3px;border-radius:4px}
.gtr ul{margin:0;padding:0;list-style:none}
.gtr li{font-family:var(--body);font-size:17px}
.gtr-band{padding-block:clamp(64px,9vw,112px)}
.gtr-stack{display:grid;gap:18px;align-content:start}

/* crop-marked frames */
.gtr-crop{position:relative;display:block}
.gtr-crop::before{content:"";position:absolute;inset:-22px;pointer-events:none;background:linear-gradient(var(--cm),var(--cm)) 0 18px/12px 1.5px no-repeat,linear-gradient(var(--cm),var(--cm)) 18px 0/1.5px 12px no-repeat,linear-gradient(var(--cm),var(--cm)) 100% 18px/12px 1.5px no-repeat,linear-gradient(var(--cm),var(--cm)) calc(100% - 18px) 0/1.5px 12px no-repeat,linear-gradient(var(--cm),var(--cm)) 0 calc(100% - 18px)/12px 1.5px no-repeat,linear-gradient(var(--cm),var(--cm)) 18px 100%/1.5px 12px no-repeat,linear-gradient(var(--cm),var(--cm)) 100% calc(100% - 18px)/12px 1.5px no-repeat,linear-gradient(var(--cm),var(--cm)) calc(100% - 18px) 100%/1.5px 12px no-repeat;transition:inset .45s var(--ease)}
.gtr-crop:hover::before{inset:-12px}
.gtr-crop img{display:block;width:100%;height:100%;object-fit:cover}
.gtr-reg{position:absolute;width:26px;height:26px;pointer-events:none;color:var(--cm)!important;transition:transform .6s var(--ease)}
.gtr-crop:hover .gtr-reg{transform:rotate(90deg)}

/* CMYK colour bar */
.gtr-bar{display:flex;height:14px;gap:3px}
.gtr-bar i{flex:1;transition:flex-grow .4s var(--ease)}
.gtr-bar i:hover{flex-grow:3}
.gtr-bar i:nth-child(1){background:var(--c)}.gtr-bar i:nth-child(2){background:var(--m)}.gtr-bar i:nth-child(3){background:var(--y)}.gtr-bar i:nth-child(4){background:var(--k)}
.gtr-bar i:nth-child(5){background:color-mix(in srgb,var(--c) 50%,#fff)}.gtr-bar i:nth-child(6){background:color-mix(in srgb,var(--m) 50%,#fff)}.gtr-bar i:nth-child(7){background:color-mix(in srgb,var(--y) 50%,#fff)}.gtr-bar i:nth-child(8){background:color-mix(in srgb,var(--k) 50%,#fff)}
.gtr-bar i:nth-child(9){background:var(--navy)}.gtr-bar i:nth-child(10){background:var(--gold)}

/* buttons */
.gtr-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.gtr-btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:10px;padding:16px 26px;border-radius:6px;font-family:var(--display);font-weight:400;font-size:17px;line-height:1;border:2px solid var(--navy);color:var(--navy)!important;background:#fff!important;isolation:isolate;transition:transform .3s var(--ease),box-shadow .3s,color .3s}
.gtr-btn::after{content:"";position:absolute;left:0;bottom:0;height:4px;width:100%;z-index:-1;background:linear-gradient(90deg,var(--c) 0 25%,var(--m) 25% 50%,var(--y) 50% 75%,var(--k) 75%);transform:scaleX(0);transform-origin:0 50%;transition:transform .4s var(--ease)}
.gtr-btn:hover{transform:translateY(-3px);box-shadow:6px 6px 0 var(--navy)}
.gtr-btn:hover::after{transform:none}
.gtr-btn.solid{background:var(--navy)!important;color:#fff!important}
.gtr-btn.gold{background:var(--gold)!important;border-color:var(--gold);color:var(--navy)!important}
.gtr-btn.gold:hover{box-shadow:6px 6px 0 var(--navy)}
.gtr-btn svg{width:18px;height:18px;transition:transform .3s var(--ease)}
.gtr-btn:hover svg{transform:translateX(4px)}

/* HERO: proof sheet */
.gtr-hero{padding-block:clamp(56px,7vw,96px)}
.gtr-sheet{position:relative;background:var(--sheet);border-radius:4px;box-shadow:0 1px 0 var(--line),0 40px 80px -50px rgba(7,31,96,.45);padding:clamp(28px,4vw,56px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.gtr-sheet > *{min-width:0}
.gtr-sheet .gtr-bar{position:absolute;left:clamp(28px,4vw,56px);right:clamp(28px,4vw,56px);bottom:0;height:10px}
.gtr-hero-copy{display:grid;gap:18px}
.gtr-hero .gtr-crop{aspect-ratio:4/5}

/* intro two-column */
.gtr-split{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,72px);align-items:start}
.gtr-split > *{min-width:0}
.gtr-split .gtr-crop{position:sticky;top:40px}
.gtr-spec{display:grid;border-top:2px solid var(--navy)}
.gtr-spec li{position:relative;padding:14px 8px 14px 44px;border-bottom:1px solid var(--line);transition:background .3s,padding-left .35s var(--ease)}
.gtr-spec li::before{content:"";position:absolute;left:8px;top:17px;width:20px;height:20px;border-radius:50%;background:var(--sw,var(--c));transition:transform .35s var(--ease)}
.gtr-spec li:nth-child(2){--sw:var(--m)}.gtr-spec li:nth-child(3){--sw:var(--y)}.gtr-spec li:nth-child(4){--sw:var(--k)}.gtr-spec li:nth-child(5){--sw:var(--navy)}
.gtr-spec li:hover{background:#fff;padding-left:52px}
.gtr-spec li:hover::before{transform:scale(1.2)}

/* WHERE: swatch chips */
.gtr-sun{background:var(--sun)}
.gtr-chips{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:8px}
.gtr-chips li{background:#fff;border-radius:6px;overflow:hidden;display:grid;grid-template-rows:96px auto;box-shadow:0 20px 40px -30px rgba(7,31,96,.6);transition:transform .4s var(--ease),box-shadow .4s}
.gtr-chips li::before{content:"";background:var(--sw,var(--c));transition:transform .5s var(--ease);transform-origin:50% 0}
.gtr-chips li > span{padding:16px 16px 20px;font-size:16px;line-height:1.55}
.gtr-chips li strong{display:block;font-family:var(--display);font-weight:400;font-size:19px;line-height:1.15;color:var(--navy)!important;margin-bottom:6px}
.gtr-chips li:nth-child(2){--sw:var(--m)}.gtr-chips li:nth-child(3){--sw:var(--y)}.gtr-chips li:nth-child(4){--sw:var(--k)}.gtr-chips li:nth-child(5){--sw:var(--navy)}
.gtr-chips li:hover{transform:translateY(-8px) rotate(-1deg);box-shadow:0 30px 50px -28px rgba(7,31,96,.7)}
.gtr-chips li:hover::before{transform:scaleY(1.12)}
.gtr-pair{max-width:980px;display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,64px);margin-top:clamp(48px,6vw,72px);padding:22px}
.gtr-pair .gtr-crop{aspect-ratio:4/3}
.gtr-sun .gtr-crop{--cm:rgba(7,31,96,.7)}
.gtr-sun a{background-image:linear-gradient(var(--navy),var(--navy))}

/* BASES: product cards */
.gtr-bases{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:28px}
.gtr-base{background:#fff;border:1px solid var(--line);border-radius:6px;padding:22px;display:grid;gap:14px;align-content:start;transition:transform .4s var(--ease),box-shadow .4s,border-color .3s}
.gtr-base .gtr-crop{aspect-ratio:1/1;margin:14px 14px 6px;--cm:rgba(7,31,96,.35)}
.gtr-base .gtr-crop img{object-fit:contain;background:#fff;transition:transform .6s var(--ease)}
.gtr-base:hover{transform:translateY(-6px);box-shadow:0 30px 50px -34px rgba(7,31,96,.6);border-color:transparent}
.gtr-base:hover .gtr-crop img{transform:scale(1.06)}
.gtr-base .gtr-btn{justify-self:start;margin-top:4px}

/* DESIGN & PRINTING: press room */
.gtr-press{background:var(--navy);color:#fff!important;position:relative}
.gtr-press .gtr-bar{position:absolute;left:0;right:0;top:0;height:10px;gap:0}
.gtr-press h2,.gtr-press h3{color:#fff!important}
.gtr-press h2::after{content:"";display:block;width:56px;height:5px;margin-top:16px;background:var(--gold)}
.gtr-press p{color:rgba(255,255,255,.88)!important}
.gtr-press a{color:#fff!important;background-image:linear-gradient(var(--gold),var(--gold))}
.gtr-press a:hover{color:var(--navy)!important}
.gtr-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px)}
.gtr-cols > *{min-width:0}
.gtr-plate{border:1px solid rgba(255,255,255,.18);border-radius:6px;padding:clamp(24px,3vw,36px);display:grid;gap:16px;align-content:start;transition:border-color .3s,background .3s}
.gtr-plate:hover{border-color:var(--gold);background:rgba(255,255,255,.04)}

/* ABOUT */
.gtr-about{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px)}
.gtr-about > *{min-width:0}
.gtr-about .gtr-stack:last-child{border-left:4px solid var(--gold);padding-left:clamp(20px,3vw,36px)}
.gtr-banner{margin-top:clamp(48px,6vw,72px);padding:22px}
.gtr-banner .gtr-crop img{border-radius:4px}

@media (max-width:1000px){.gtr-chips{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){.gtr-sheet,.gtr-split,.gtr-cols,.gtr-about,.gtr-bases{grid-template-columns:1fr}.gtr-split .gtr-crop{position:relative;top:auto}.gtr-hero .gtr-crop{aspect-ratio:4/3}}
@media (max-width:620px){.gtr-chips,.gtr-pair{grid-template-columns:1fr}.gtr-btn{width:100%;justify-content:center}.gtr-crop::before{inset:-12px}}
@media (prefers-reduced-motion:reduce){.gtr *,.gtr *::before,.gtr *::after{transition:none!important}}

.gtr p,.gtr li{color:inherit!important}
.gtr-press p{color:rgba(255,255,255,.88)!important}
.gtr-press h2,.gtr-press h3{color:#fff!important}
.gtr h1,.gtr h2,.gtr h3{margin:0!important}

/* exhibition stands (gex): floor plans, booth grid, registration marks */
.gex-grid{background-color:#fff;background-image:linear-gradient(rgba(7,31,96,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(7,31,96,.06) 1px,transparent 1px),linear-gradient(rgba(7,31,96,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(7,31,96,.12) 1px,transparent 1px);background-size:24px 24px,24px 24px,120px 120px,120px 120px}
.gex-hero{padding-block:clamp(48px,7vw,88px) clamp(56px,7vw,88px);border-bottom:1px solid var(--line)}
.gex-hero .gtr-wrap{display:grid;gap:clamp(24px,3vw,36px)}
.gex-hero h1{font-size:clamp(46px,7vw,96px);line-height:.95}
.gex-dim{display:flex;align-items:center;gap:12px;color:var(--muted)!important;font:600 13px/1 var(--body);letter-spacing:.1em}
.gex-dim::before,.gex-dim::after{content:"";height:1px;flex:1;background:var(--navy);opacity:.4}
.gex-dim span{width:10px;height:10px;border:1.5px solid var(--navy);transform:rotate(45deg)}
.gex-shot{position:relative;padding:22px}
.gex-shot .gtr-crop img{aspect-ratio:21/9}
.gex-copy{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,56px)}
.gex-copy > *{min-width:0}
.gex-copy p:first-child{font-family:var(--display);font-size:clamp(21px,2.2vw,28px);line-height:1.25;color:var(--navy)!important}
.gex-shop{text-align:center;padding-top:clamp(56px,7vw,88px)}
/* why: modules on a floor plan */
.gex-plan{display:grid;grid-template-columns:repeat(3,1fr);border:2px solid var(--navy);background:#fff;margin-top:28px;counter-reset:bay}
.gex-bay{counter-increment:bay;position:relative;padding:clamp(22px,2.6vw,32px);border-right:1px dashed rgba(7,31,96,.35);border-bottom:1px dashed rgba(7,31,96,.35);display:grid;gap:10px;align-content:start;transition:background .35s}
.gex-bay::before{content:counter(bay,upper-alpha) "1";font:600 12px/1 var(--body);letter-spacing:.12em;color:var(--muted)!important;display:block}
.gex-bay::after{content:"";position:absolute;right:12px;top:12px;width:22px;height:22px;border:1.5px solid var(--sw,var(--c));border-radius:50%;background:linear-gradient(var(--sw,var(--c)),var(--sw,var(--c))) 50%/1.5px 100% no-repeat,linear-gradient(var(--sw,var(--c)),var(--sw,var(--c))) 50%/100% 1.5px no-repeat;transition:transform .6s var(--ease)}
.gex-bay:nth-child(2){--sw:var(--m)}.gex-bay:nth-child(3){--sw:#C9A400}.gex-bay:nth-child(4){--sw:var(--k)}.gex-bay:nth-child(5){--sw:var(--navy)}.gex-bay:nth-child(6){--sw:var(--gold)}
.gex-bay:hover{background:color-mix(in srgb,var(--sw,var(--c)) 9%,#fff)}
.gex-bay:hover::after{transform:rotate(90deg)}
.gex-bay h3{font-size:clamp(20px,2vw,25px)}
.gex-bay.note{background:var(--navy);color:#fff!important}
.gex-bay.note::before{color:rgba(255,255,255,.6)!important}
.gex-bay.note p{color:rgba(255,255,255,.9)!important}
.gex-bay.note a{color:#fff!important;background-image:linear-gradient(var(--gold),var(--gold))}
.gex-bay.note a:hover{color:var(--navy)!important}
/* configurations */
.gex-cfg{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,48px);align-items:start}
.gex-cfg > *{min-width:0}
.gex-shapes{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.gex-shapes li{display:grid;gap:12px;padding:18px;background:#fff;border:1px solid var(--line);border-radius:6px;transition:transform .4s var(--ease),box-shadow .4s}
.gex-shapes li::before{content:"";display:block;height:58px;width:var(--w);border:0 solid var(--navy);border-left-width:5px;border-top-width:5px;background:repeating-linear-gradient(135deg,rgba(0,163,224,.16) 0 6px,transparent 6px 12px);transition:background-color .4s}
.gex-shapes li:nth-child(1){--w:50%}.gex-shapes li:nth-child(2){--w:50%}.gex-shapes li:nth-child(3){--w:100%}.gex-shapes li:nth-child(4){--w:100%}
.gex-shapes li:nth-child(2)::before,.gex-shapes li:nth-child(4)::before{border-right-width:5px}
.gex-shapes li:hover{transform:translateY(-5px);box-shadow:6px 6px 0 var(--navy)}
.gex-tech{font-size:16px!important;line-height:2!important;padding:clamp(22px,3vw,32px);border:1px solid rgba(255,255,255,.18);border-radius:6px;background:rgba(255,255,255,.04)}
/* related */
.gex-related .gtr-base .gtr-crop img{object-fit:cover}
.gex-related .gtr-base .gtr-crop{aspect-ratio:4/3}
.gex-related .gtr-btn{justify-self:start}
.gex-expert{display:block;padding:22px}
.gex-expert img{border-radius:6px}
@media (max-width:900px){.gex-copy,.gex-cfg{grid-template-columns:1fr}.gex-plan{grid-template-columns:1fr 1fr}.gex-shot .gtr-crop img{aspect-ratio:16/10}}
@media (max-width:620px){.gex-plan,.gex-shapes{grid-template-columns:1fr}.gex-shot .gtr-crop img{aspect-ratio:4/3}}

.gtr .gex-bay.note p{color:rgba(255,255,255,.9)!important}
.gtr .gex-bay.note h3{color:var(--gold)!important}
.gtr .gex-bay.note a{color:#fff!important}.gtr .gex-bay.note a:hover{color:var(--navy)!important}
.gtr .gtr-press .gex-tech{color:rgba(255,255,255,.92)!important}
.gtr .gex-copy p:first-child{color:var(--navy)!important}
.gtr .gtr-press .gex-shapes a{color:var(--navy)!important;background-image:linear-gradient(var(--gold),var(--gold))}
.gtr .gtr-press .gex-shapes a:hover{color:var(--navy)!important}
