
@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 banners (gbn): large-format proofs, eyelets, hems */
.gbn-hero{padding-block:clamp(48px,7vw,88px) clamp(56px,7vw,96px)}
.gbn-sheet{position:relative;background:#fff;border-radius:4px;box-shadow:0 1px 0 var(--line),0 40px 80px -50px rgba(7,31,96,.45);padding:clamp(24px,4vw,56px);display:grid;gap:clamp(22px,3vw,34px)}
.gbn-sheet .gtr-bar{position:absolute;left:clamp(24px,4vw,56px);right:clamp(24px,4vw,56px);bottom:0;height:10px}
.gbn-sheet h1{max-width:20ch}
.gbn-two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,56px)}
.gbn-two > *{min-width:0}
/* banner frame with eyelets and hem stitching */
.gbn-banner{position:relative;display:block;padding:14px;background:#fff;border-radius:3px;box-shadow:0 24px 50px -30px rgba(7,31,96,.55);transition:transform .5s var(--ease)}
.gbn-banner::before{content:"";position:absolute;inset:5px;border:1.5px dashed rgba(7,31,96,.28);border-radius:2px;pointer-events:none}
.gbn-banner::after{content:"";position:absolute;inset:0;pointer-events:none;background:
 radial-gradient(circle,#fff 0 3px,#9aa3b5 3.5px 6px,transparent 6.5px) 0 0/14px 14px no-repeat,
 radial-gradient(circle,#fff 0 3px,#9aa3b5 3.5px 6px,transparent 6.5px) 100% 0/14px 14px no-repeat,
 radial-gradient(circle,#fff 0 3px,#9aa3b5 3.5px 6px,transparent 6.5px) 0 100%/14px 14px no-repeat,
 radial-gradient(circle,#fff 0 3px,#9aa3b5 3.5px 6px,transparent 6.5px) 100% 100%/14px 14px no-repeat,
 radial-gradient(circle,#fff 0 3px,#9aa3b5 3.5px 6px,transparent 6.5px) 50% 0/14px 14px no-repeat,
 radial-gradient(circle,#fff 0 3px,#9aa3b5 3.5px 6px,transparent 6.5px) 50% 100%/14px 14px no-repeat}
.gbn-banner img{display:block;width:100%;object-fit:cover;border-radius:2px}
.gbn-banner:hover{transform:rotate(-.6deg) translateY(-4px)}
.gbn-hero .gbn-banner img{aspect-ratio:21/9}
/* materials */
.gbn-mats{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,32px)}
.gbn-mat{background:#fff;border:1px solid var(--line);border-radius:6px;padding:clamp(20px,2.6vw,30px);display:grid;gap:16px;align-content:start;transition:transform .4s var(--ease),box-shadow .4s}
.gbn-mat:hover{transform:translateY(-6px);box-shadow:0 30px 60px -40px rgba(7,31,96,.6)}
.gbn-mat .gbn-banner img{aspect-ratio:4/3}
.gbn-mat .tag{display:flex;align-items:center;gap:10px}
.gbn-mat .tag i{width:34px;height:34px;border-radius:4px;background:var(--mt);box-shadow:inset 0 0 0 3px #fff,0 0 0 1px var(--line)}
.gbn-mat:nth-child(1){--mt:var(--c)}.gbn-mat:nth-child(2){--mt:var(--m)}
.gbn-mesh .gbn-banner span{position:relative;display:block}
.gbn-mesh .gbn-banner span::after{content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(255,255,255,.55) 0 1.4px,transparent 1.8px) 0 0/7px 7px;opacity:0;transition:opacity .5s}
.gbn-mesh:hover .gbn-banner span::after{opacity:1}
.gbn-mat .gtr-btn{justify-self:start}
/* why: proof checklist */
.gbn-check{display:grid;gap:10px;counter-reset:ck}
.gbn-check li{counter-increment:ck;position:relative;padding:14px 16px 14px 58px;background:#fff;border-radius:4px;transition:transform .35s var(--ease),box-shadow .35s}
.gbn-check li::before{content:counter(ck,decimal-leading-zero);position:absolute;left:14px;top:12px;font:400 20px/1 var(--display);color:var(--navy)!important}
.gbn-check li::after{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--sw,var(--c))}
.gbn-check li:nth-child(2){--sw:var(--m)}.gbn-check li:nth-child(3){--sw:var(--y)}.gbn-check li:nth-child(4){--sw:var(--k)}
.gbn-check li:hover{transform:translateX(6px);box-shadow:6px 6px 0 var(--navy)}
.gbn-whygrid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,72px);align-items:start}
.gbn-whygrid > *{min-width:0}
.gbn-stackpics{display:grid;gap:30px;padding:20px}
.gbn-stackpics .gtr-crop img{aspect-ratio:4/3}
/* where: hanging tags */
.gbn-where{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gbn-where li{position:relative;padding:34px 20px 22px;background:#fff;border-radius:4px;border:1px solid var(--line);transition:transform .45s cubic-bezier(.3,1.4,.5,1),box-shadow .4s;transform-origin:50% 0}
.gbn-where li::before{content:"";position:absolute;left:50%;top:10px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px #9aa3b5}
.gbn-where li::after{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--sw,var(--c))}
.gbn-where li:nth-child(6n+2){--sw:var(--m)}.gbn-where li:nth-child(6n+3){--sw:var(--y)}.gbn-where li:nth-child(6n+4){--sw:var(--k)}.gbn-where li:nth-child(6n+5){--sw:var(--navy)}.gbn-where li:nth-child(6n+6){--sw:var(--gold)}
.gbn-where li:hover{transform:rotate(-2deg);box-shadow:0 24px 40px -28px rgba(7,31,96,.55)}
.gbn-wide{margin-top:clamp(44px,6vw,72px)}
.gbn-wide .gbn-banner img{aspect-ratio:21/9}
/* offers in press */
.gbn-offers{display:grid;gap:8px}
.gbn-offers li{position:relative;padding:10px 0 10px 34px;border-bottom:1px solid rgba(255,255,255,.14)}
.gbn-offers li::before{content:"";position:absolute;left:0;top:15px;width:18px;height:18px;border-radius:50%;background:var(--sw,var(--c));transition:transform .35s var(--ease)}
.gbn-offers li:nth-child(2){--sw:var(--m)}.gbn-offers li:nth-child(3){--sw:var(--y)}.gbn-offers li:nth-child(4){--sw:#fff}.gbn-offers li:nth-child(5){--sw:var(--gold)}
.gbn-offers li:hover::before{transform:scale(1.3)}
/* who: proof cards */
.gbn-who{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.gbn-who li{position:relative;padding:18px 20px 18px 22px;background:#fff;border-radius:4px;border:1px solid var(--line);transition:border-color .3s,transform .35s var(--ease)}
.gbn-who li::before{content:"";position:absolute;inset:-8px;pointer-events:none;background:linear-gradient(var(--cm),var(--cm)) 0 12px/9px 1.5px no-repeat,linear-gradient(var(--cm),var(--cm)) 12px 0/1.5px 9px no-repeat,linear-gradient(var(--cm),var(--cm)) 100% 12px/9px 1.5px no-repeat,linear-gradient(var(--cm),var(--cm)) calc(100% - 12px) 0/1.5px 9px no-repeat,linear-gradient(var(--cm),var(--cm)) 0 calc(100% - 12px)/9px 1.5px no-repeat,linear-gradient(var(--cm),var(--cm)) 12px 100%/1.5px 9px no-repeat,linear-gradient(var(--cm),var(--cm)) 100% calc(100% - 12px)/9px 1.5px no-repeat,linear-gradient(var(--cm),var(--cm)) calc(100% - 12px) 100%/1.5px 9px no-repeat;opacity:0;transition:opacity .35s,inset .35s var(--ease)}
.gbn-who li:hover{border-color:var(--navy);transform:translateY(-3px)}
.gbn-who li:hover::before{opacity:1;inset:-4px}
.gbn-who li:last-child{grid-column:1/-1}
/* other products tiles */
.gbn-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:28px}
.gbn-tile{display:grid;gap:16px;align-content:start;justify-items:start;padding:18px;background:#fff;border:1px solid var(--line);border-radius:6px;transition:transform .4s var(--ease),box-shadow .4s}
.gbn-tile .gtr-crop{width:100%;margin:8px 0 4px}
.gbn-tile .gtr-crop img{aspect-ratio:4/3}
.gbn-tile:hover{transform:translateY(-6px);box-shadow:0 30px 50px -34px rgba(7,31,96,.6)}
.gbn-tiles .gtr-crop::before{inset:-12px}
.gbn-expert{display:block;padding:22px}
.gbn-expert img{border-radius:6px}
@media (max-width:900px){.gbn-two,.gbn-mats,.gbn-whygrid,.gbn-tiles{grid-template-columns:1fr}.gbn-where{grid-template-columns:1fr 1fr}.gbn-hero .gbn-banner img{aspect-ratio:16/10}}
@media (max-width:620px){.gbn-where,.gbn-who{grid-template-columns:1fr}.gbn-who li:last-child{grid-column:auto}.gbn-wide .gbn-banner img{aspect-ratio:4/3}}

.gtr .gtr-press .gbn-offers li{color:rgba(255,255,255,.9)!important}
.gtr .gtr-press h3{color:#fff!important}
