
@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}

/* printed and branded marquees (gbm): colour-matched panels, proofs on a structure */
.gbm-hero{padding-block:clamp(48px,7vw,88px) clamp(48px,6vw,80px)}
.gbm-hero h1{max-width:16ch}
.gbm-proof{position:relative;margin-top:clamp(24px,3vw,36px);padding:22px}
.gbm-proof .gtr-crop img{aspect-ratio:21/9}
.gbm-fan{position:absolute;right:clamp(30px,5vw,70px);bottom:-26px;display:flex;z-index:2}
.gbm-fan i{width:clamp(44px,5vw,64px);height:clamp(70px,8vw,100px);border-radius:4px 4px 2px 2px;background:#fff;box-shadow:0 14px 30px -14px rgba(7,31,96,.6);margin-left:-18px;transform-origin:50% 100%;transition:transform .55s cubic-bezier(.3,1.4,.5,1);position:relative;overflow:hidden}
.gbm-fan i::before{content:"";position:absolute;inset:5px 5px 22px;border-radius:2px;background:var(--sw)}
.gbm-fan i:nth-child(1){--sw:var(--navy);transform:rotate(-14deg)}.gbm-fan i:nth-child(2){--sw:var(--gold);transform:rotate(-7deg)}.gbm-fan i:nth-child(3){--sw:var(--m)}.gbm-fan i:nth-child(4){--sw:var(--c);transform:rotate(7deg)}.gbm-fan i:nth-child(5){--sw:var(--k);transform:rotate(14deg)}
.gbm-proof:hover .gbm-fan i:nth-child(1){transform:rotate(-30deg)}.gbm-proof:hover .gbm-fan i:nth-child(2){transform:rotate(-15deg)}.gbm-proof:hover .gbm-fan i:nth-child(4){transform:rotate(15deg)}.gbm-proof:hover .gbm-fan i:nth-child(5){transform:rotate(30deg)}
.gbm-lead{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(24px,4vw,56px);align-items:end;margin-top:clamp(36px,5vw,56px)}
.gbm-lead > *{min-width:0}
.gbm-lead p{font-size:clamp(17px,1.4vw,19px)}
.gbm-lead .gtr-ctas{flex-direction:column;align-items:stretch}
.gbm-lead .gtr-btn{justify-content:space-between}
/* built split */
.gbm-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.gbm-split > *{min-width:0}
.gbm-split .gtr-crop{padding:0}
.gbm-split .gtr-crop img{aspect-ratio:4/3}
.gbm-split .gtr-btn{justify-self:start}
.gbm-keder{height:12px;border-radius:12px;background:repeating-linear-gradient(90deg,var(--navy) 0 26px,#B8C3DA 26px 30px);opacity:.85;transition:background-position 1s var(--ease);max-width:260px}
.gbm-split:hover .gbm-keder{background-position:60px 0}
/* footprints */
.gbm-foot{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:end}
.gbm-foot li{display:grid;gap:12px;align-content:end;padding:18px;background:#fff;border:1px solid var(--line);border-radius:6px;transition:transform .4s var(--ease),box-shadow .4s}
.gbm-foot li::before{content:"";display:block;width:var(--w);aspect-ratio:var(--ar);border:2px solid var(--navy);border-radius:2px;background:repeating-linear-gradient(90deg,transparent 0 calc(100%/var(--bays) - 2px),rgba(7,31,96,.35) calc(100%/var(--bays) - 2px) calc(100%/var(--bays))),var(--tint);transition:background-color .4s}
.gbm-foot li:nth-child(1){--w:50%;--ar:6/4;--bays:3;--tint:color-mix(in srgb,var(--c) 22%,#fff)}
.gbm-foot li:nth-child(2){--w:66%;--ar:8/4;--bays:4;--tint:color-mix(in srgb,var(--m) 18%,#fff)}
.gbm-foot li:nth-child(3){--w:66%;--ar:8/6;--bays:4;--tint:color-mix(in srgb,var(--y) 35%,#fff)}
.gbm-foot li:nth-child(4){--w:100%;--ar:12/6;--bays:6;--tint:color-mix(in srgb,var(--gold) 30%,#fff)}
.gbm-foot li:hover{transform:translateY(-6px);box-shadow:6px 6px 0 var(--navy)}
.gbm-uses{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,40px);align-items:start;margin-top:clamp(36px,5vw,56px);padding:clamp(22px,3vw,32px);background:#fff;border-radius:6px;border-left:8px solid var(--m)}
.gbm-uses > *{min-width:0}
.gbm-uses p:last-child{line-height:2.1;font-weight:600;color:var(--navy)!important}
/* branding on sun */
.gbm-brand{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.gbm-brand > *{min-width:0}
.gbm-brand .gtr-crop img{aspect-ratio:16/9}
.gbm-brand .gtr-btn{justify-self:start}
.gbm-panels{display:flex;gap:6px}
.gbm-panels i{flex:1;height:44px;border-radius:2px;background:var(--sw);transition:flex-grow .4s var(--ease),transform .4s var(--ease)}
.gbm-panels i:hover{flex-grow:2.4;transform:translateY(-4px)}
.gbm-panels i:nth-child(1){--sw:var(--navy)}.gbm-panels i:nth-child(2){--sw:#fff}.gbm-panels i:nth-child(3){--sw:var(--m)}.gbm-panels i:nth-child(4){--sw:var(--c)}.gbm-panels i:nth-child(5){--sw:var(--k)}.gbm-panels i:nth-child(6){--sw:var(--gold);outline:2px solid var(--navy)}
/* why: spec plate */
.gbm-spec{font-size:18px!important;line-height:2!important;padding:clamp(22px,3vw,34px);border:1px solid rgba(255,255,255,.18);border-radius:6px;background:rgba(255,255,255,.04);transition:border-color .3s}
.gbm-spec:hover{border-color:var(--gold)}
.gbm-black{padding-block:clamp(40px,6vw,72px)}
.gbm-black .gtr-crop{padding:0;max-width:1000px;margin:0 auto}
.gbm-black .gtr-crop img{object-fit:contain}
.gbm-ready{display:grid;gap:22px}
.gbm-ready .card{padding:clamp(24px,3.5vw,40px);background:#fff;border-radius:6px;border-top:8px solid var(--navy);display:grid;gap:14px;box-shadow:0 30px 60px -50px rgba(7,31,96,.5)}
.gbm-ready .gtr-crop{padding:0}
.gtr a[href^="tel:"]{white-space:nowrap}
@media (max-width:900px){.gbm-lead,.gbm-split,.gbm-brand,.gbm-uses{grid-template-columns:1fr}.gbm-foot{grid-template-columns:1fr 1fr}.gbm-proof .gtr-crop img{aspect-ratio:16/10}}
@media (max-width:620px){.gbm-foot{grid-template-columns:1fr}.gbm-fan{right:20px;bottom:-20px}.gbm-proof .gtr-crop img{aspect-ratio:4/3}}

.gtr .gtr-press .gbm-spec{color:rgba(255,255,255,.92)!important}
.gtr .gbm-uses p:last-child{color:var(--navy)!important}
