@font-face{font-family:POLGA;src:url('assets/Polga.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Tungsten Round';src:url('assets/TungstenRounded-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
:root{--navy:#20194f;--pink:#eb2186;--white:#fff;--muted:rgba(255,255,255,.66);--gutter:clamp(16px,4vw,48px);--display:POLGA,'Arial Narrow',Impact,sans-serif;--support:'Tungsten Round','Arial Narrow',Arial,sans-serif}
*{box-sizing:border-box}
html{height:100%}
body{margin:0;min-height:100%;display:flex;flex-direction:column;background:var(--navy);color:var(--white);font-family:var(--support);-webkit-font-smoothing:antialiased;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
a{color:inherit}
.site-header{display:flex;justify-content:center;padding:clamp(24px,4vw,48px) var(--gutter) 0}
.brand{display:block;width:clamp(130px,20vw,260px)}
.brand img{display:block;width:100%;height:auto}

/* HERO — sizes come from the container width (cqw), so text always fits.
   Desktop: each line stays on one line and the button sits on line two.
   Polga line-height 1 puts the baseline .251em above the line box bottom, so the
   button's bottom edge is lifted by that amount to sit exactly on the baseline. */
.hero{container-type:inline-size;width:min(100%,1800px);margin:0 auto;padding:clamp(32px,6vw,80px) var(--gutter) clamp(32px,5vw,72px)}
.hero h1,.hero h2{margin:0;font-family:POLGA,'Arial Narrow',Impact,sans-serif;font-weight:400;font-size:12.5cqw;line-height:1;letter-spacing:-.04em;text-wrap:balance}
.hero h2{color:var(--pink)}
.line-two{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(16px,3cqw,28px);margin-top:.1em;font-size:12.5cqw}
.cta{flex:0 0 auto;display:inline-flex;align-items:baseline;gap:.5em;padding:.9em 1.1em;border:1px solid var(--pink);border-radius:3px;text-decoration:none;text-transform:uppercase;font:700 clamp(15px,3.6cqw,20px)/1 var(--support);letter-spacing:.1em;white-space:nowrap;transition:background .2s,color .2s,transform .2s}
.cta span{font-size:1.5em;line-height:1}
.cta:hover,.cta:focus-visible{color:var(--navy);background:var(--pink);transform:translate(1px,-1px)}
@media(min-width:1024px){
  .hero h1,.hero h2{font-size:min(220px,calc(100cqw / 14.4));white-space:nowrap}
  .line-two{flex-direction:row;align-items:flex-end;gap:.25em;font-size:min(220px,calc(100cqw / 14.4))}
  .cta{font-size:calc(1em * .17);margin-bottom:1.476em}
  .cta:hover,.cta:focus-visible{transform:translate(1px,-1px)}
}

/* WORK — horizontal carousel. Desktop: 6 across with arrows. Tablet/phone: swipe, no arrows, fixed card size (--card). */
.work{--gap:clamp(8px,1.2vw,16px);--card:250px;--edge:#161141;width:min(100%,1800px);margin:0 auto;padding:clamp(24px,4vw,56px) var(--gutter) clamp(48px,8vw,120px);border-top:1px solid rgba(255,255,255,.2)}
.work-head{display:none;align-items:center;justify-content:space-between;margin-bottom:20px}
.work-head button{width:34px;height:34px;padding:0;border:1px solid var(--pink);border-radius:3px;background:transparent;color:var(--white);font:700 16px/1 Arial,sans-serif;cursor:pointer;transition:background .2s,color .2s,opacity .2s}
.work-head button:hover:not(:disabled),.work-head button:focus-visible{background:var(--pink);color:var(--navy)}
.work-head button:disabled{opacity:.3;cursor:default}
.work-track{position:relative;container-type:inline-size;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain;padding:6px 0}
.work-track::-webkit-scrollbar{display:none}
.work-strip{display:flex;gap:var(--gap);width:max-content;will-change:transform}
.slide{position:relative;container-type:inline-size;flex:0 0 var(--card);margin:0;scroll-snap-align:start;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent;transition:transform .3s}
.slide img{display:block;width:100%;height:auto;aspect-ratio:962/1253}
/* dark-blue stroke drawn over the image edge; turns pink when selected */
.slide::after{content:"";position:absolute;inset:0;border:1.6cqw solid var(--edge);border-radius:6.65%/5.1%;pointer-events:none;transition:border-color .25s}
.slide.selected::after,.slide:focus-visible::after,.slide[data-href]:hover::after{border-color:var(--pink)}
.badge{position:absolute;z-index:1;left:7%;bottom:5.5%;padding:.6em .95em;border-radius:3px;background:var(--pink);color:var(--white);font:700 6.4cqw/1 var(--support);letter-spacing:.1em;text-transform:uppercase;pointer-events:none}
@media(hover:hover){.slide:hover{transform:translateY(-4px)}}
/* Desktop with a mouse/trackpad: arrows move the strip with a GPU transform (buttery glide).
   Touch devices and tablets keep native swipe scrolling. */
@media(min-width:1024px) and (hover:hover) and (pointer:fine){
  .work-head{display:flex}
  .work-track{overflow:hidden;scroll-snap-type:none}
  .work-strip{transition:transform 1.1s cubic-bezier(.45,.05,.2,1)}
  .slide{flex-basis:calc((100cqw - 5 * var(--gap)) / 6)}
}

/* Phone: one slide centered, a quarter of the neighbouring slide showing on each side (full-bleed) */
@media(max-width:599px){
  .work{--card:calc((100cqw - 2 * var(--gap)) / 1.5);padding-left:0;padding-right:0}
  .work-strip{padding-inline:calc((100cqw - var(--card)) / 2)}
  .slide{scroll-snap-align:center}
}

.site-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px 22px;padding:18px var(--gutter);border-top:1px solid rgba(255,255,255,.2);color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-size:clamp(10px,1.1vw,12px)}
.site-footer a{text-decoration:none}
.site-footer a:hover{color:var(--pink)}
.social-links{display:flex;gap:18px}

@media(max-width:600px){.site-footer{flex-direction:column;align-items:center;text-align:center}}