:root{
  /* ===== MASTER LAYOUT CONTROLS ===== */
  --ink:#050083;
  --paper:#fff;
  --header-bg:var(--paper);
  --header-ink:var(--ink);
  --transition-speed:420ms;
  --slate:#59677d;
  --peach:#fedbd4;
  --blue:#b9e7f2;
  --mint:#56d1c3;
  --grey:#ecf2f5;
  --gap:32px;
  --wrap:1000px;              /* Client-grid, intro and footer max width */
  --edge:40px;                /* Browser-edge margin for wide sections */
  --playground-shell:calc(100vw - (var(--edge) * 2));
  --playground-cards-max:1100px; /* Keeps carousel card spread from drifting too wide */
  --tile-depth:1.06;          /* Tile height = column width × this value */
  --client-icon-ratio:.483;   /* 256px icon / 530px design tile height */
  --play-graphic-ratio:105%; /* 600px graphic / 650px design card width */
  --logo-w:68px;              /* SVG source is 104×50, shown at half-size by default */
  --logo-h:68px;
  --serif-tracking:0.01em;   /* Increase if DM Serif feels too tight */
  --serif-leading:1.2em;     /* Main DM Serif line-height control */
  --label-size:13px;
  --title-size:28px;
  --client-tile-radius:10px;
  --playground-shell-radius:20px;
  --playground-card-radius:10px;
  --intro-title-size:36px;	/* Intro text title size */
  --intro-subtitle-size:36px;	/* Baskerville italic subtitle size */
  --intro-subtitle-tracking:0.005em;
	
  /* ===== VERTICAL ALIGNMENT + SECTION SPACING CONTROLS ===== */
  --nav-lift:-20px;                 /* Negative values lift desktop nav text upward */
  --nav-width-reduction:175px;        /* Narrows nav from the left while keeping Get in touch right-aligned */
  --space-grid-to-client-list:60px;  /* Bottom of client tiles to Full client list */
  --space-client-list-to-quote:80px; /* Full client list to quote component */
  --space-quote-to-playground:100px;  /* Quote component to Playground component */
  --space-intro-to-grid:80px;
  --space-header-to-intro:28px;		/* Space above the main page header */


  /* ===== FULL CLIENT LIST CONTROLS ===== */
  --client-list-rule-padding-y:20px;       /* Padding above/below 'Full client list' between rules */
  --client-list-open-padding-top:50px;     /* Padding between top rule and opened client names */
  --client-list-open-padding-bottom:50px;  /* Padding between opened client names and bottom rule */
  --client-list-row-gap:10px;              /* Vertical rhythm between opened client-name rows */
  --client-list-plus-size:18px;            /* Drawn plus/minus overall size */
  --client-list-plus-stroke:1px;           /* Drawn plus/minus stroke weight */
  --client-list-open-max-height:450px;       /* Open drawer height. Increase if content clips. */
  --client-list-open-speed:.38s;            /* Open/close easing speed */

  /* ===== PLAYGROUND TUNING CONTROLS ===== */
  --playground-shell-padding-top:46px;
  --playground-shell-padding-right:40px;
  --playground-shell-padding-bottom:34px;
  --playground-shell-padding-left:40px;
  --playground-title-to-cards:34px;
  --playground-card-gap:24px;
  --playground-card-max-height:500px;
  --playground-card-radius:10px;
  --playground-arrow-size:34px;
  --playground-arrow-offset:0px;
  --playground-dots-gap:16px;
  --playground-dots-margin-top:22px;
  --playground-arrow-inset:40px;
  --playground-card-edge-space:60px;
  --playground-slide-speed:180ms;
}
html,body{
  overflow-x:hidden;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--paper);overflow-y:scroll;scrollbar-gutter:stable}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,Arial,sans-serif;font-size:12px;font-weight:400;letter-spacing:0}
.wrap{width:min(var(--wrap),calc(100vw - 80px));margin-inline:auto}
main,footer{background:var(--paper)}
.site-header{background:transparent}
main{padding-top:92px}
.site-header{position:fixed;top:0;left:50%;transform:translateX(-50%);z-index:50;width:min(var(--wrap),calc(100vw - 80px));height:92px;display:grid;grid-template-columns:calc((min(var(--wrap),calc(100vw - 80px)) - (2 * var(--gap))) / 3) 1fr;gap:var(--gap);align-items:end;padding-bottom:18px;color:var(--header-ink);transition:color var(--transition-speed) ease}
.site-header::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  bottom:0;
  transform:translateX(-50%);
  width:100vw;
  background:var(--header-bg);
  z-index:0;
  transition:background-color var(--transition-speed) ease;
}

.site-header::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:100vw;
  height:1px;
  background:var(--header-ink);
  z-index:1;
  transition:background-color var(--transition-speed) ease;
}
.site-header>*{position:relative;z-index:2}
.logo{display:block;width:var(--logo-w);height:var(--logo-h);line-height:0;text-decoration:none;color:var(--header-ink)}
.logo img{display:block;width:100%;height:100%;object-fit:contain}
.desktop-nav{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:0;
  font-weight:400;
  font-size:13px;
  width:calc(min(var(--wrap),calc(100vw - 80px)) / 2);
  justify-self:end;
  transform:translateY(var(--nav-lift));
}
.desktop-nav a,.mobile-drawer a{color:var(--header-ink);text-decoration:none;white-space:nowrap;transition:color var(--transition-speed) ease}footer a{color:var(--ink);text-decoration:none;white-space:nowrap}.desktop-nav a{
  display:block;
}
/* ==========================================================
   TEXT LINK BEHAVIOUR
   Keeps text links using the page colour across all states.
   Hover underlines only non-inline-underlined links.
   ========================================================== */

main p a,
.site-footer a,
.desktop-nav a,
.mobile-drawer a{
  color:inherit;
}

main p a:link,
main p a:visited,
main p a:active,
.site-footer a:link,
.site-footer a:visited,
.site-footer a:active,
.desktop-nav a:link,
.desktop-nav a:visited,
.desktop-nav a:active,
.mobile-drawer a:link,
.mobile-drawer a:visited,
.mobile-drawer a:active{
  color:inherit;
}

main p a:not([style*="text-decoration"]):hover,
.site-footer a:not([style*="text-decoration"]):hover,
.desktop-nav a:hover,
.mobile-drawer a:hover{
  text-decoration:underline;
  text-underline-offset:0.18em;
}
.burger,.mobile-drawer{display:none}
.intro{padding:var(--space-header-to-intro) 0 var(--space-intro-to-grid)}.intro h1,.quote blockquote,.playground h2,.tile strong,.play-card strong{font-family:'DM Serif Text',Georgia,serif;font-weight:400;letter-spacing:var(--serif-tracking)}.intro h1{font-size:var(--intro-title-size);line-height:var(--serif-leading);margin:0}.intro em{font-family:"baskerville-display-pt",Baskerville,Georgia,serif;font-weight:400;font-style:italic;font-size:var(--intro-subtitle-size);letter-spacing:var(--intro-subtitle-tracking)}
.client-grid{--grid-width:min(var(--wrap),calc(100vw - 80px));--col:calc((var(--grid-width) - (2 * var(--gap))) / 3);--tile-h:calc(var(--col) * var(--tile-depth));--client-icon-size:calc(var(--tile-h) * var(--client-icon-ratio));display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:var(--tile-h);gap:var(--gap)}
.tile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:20px 24px;border-radius:var(--client-tile-radius);overflow:hidden;text-decoration:none;color:var(--ink);min-width:0}.tile.wide{grid-column:span 2}.tile-spotify{background:#030081;color:white}.tile-nissan,.tile-distillery{background:var(--peach)}.tile-electrolux{background:var(--blue)}.tile-grohe{background:var(--grey)}.tile-nap{background:#637085;color:white}.tile-lloyds{background:var(--mint)}
.icons{position:absolute;inset:20px 24px 36px;display:flex;align-items:center;justify-content:center;gap:54px;color:currentColor}.client-icon{width:var(--client-icon-size);height:var(--client-icon-size);object-fit:contain;display:block}.tile-nap .client-icon{filter:brightness(0) invert(1)}
.tile small,.play-card small{font-family:Inter,Arial,sans-serif;font-size:var(--label-size);line-height:1.15;opacity:.82;font-weight:400}.tile strong,.play-card strong{font-size:var(--title-size);line-height:1.02;font-weight:400}
.client-list{margin-top:var(--space-grid-to-client-list)}
.accordion{
  all:unset;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
  border-top:0;
  border-bottom:1px solid var(--ink);
  padding:var(--client-list-rule-padding-y) 0;
  font-family:Inter,Arial,sans-serif;
  font-weight:400;
}
.accordion span{position:relative;display:block;width:var(--client-list-plus-size);height:var(--client-list-plus-size);font-size:0;line-height:0;flex:0 0 var(--client-list-plus-size)}
.accordion span::before,.accordion span::after{content:"";position:absolute;left:0;top:50%;width:100%;height:var(--client-list-plus-stroke);background:var(--ink);transform:translateY(-50%)}
.accordion span::after{transform:translateY(-50%) rotate(90deg)}
.accordion[aria-expanded="true"] span::after,.client-list.is-open .accordion span::after{opacity:0}
.panel{
  max-height:0;
  overflow:hidden;
  border-bottom:0 solid var(--ink);
  transition:
    max-height var(--client-list-open-speed) ease,
    border-bottom-width .12s ease;
}

.panel.open{
  max-height:var(--client-list-open-max-height);
  border-bottom:1px solid var(--ink);
}

.panel>ul{
  overflow:hidden;
  margin:0;
  padding-top:0;
  padding-bottom:0;
  padding-left:0;
  padding-right:0;
  opacity:0;
  list-style:none;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  column-gap:var(--gap);
  row-gap:var(--client-list-row-gap);
  font-family:'DM Serif Text',Georgia,serif;
  font-size:var(--title-size);
  line-height:1.02;
  font-weight:400;
  letter-spacing:var(--serif-tracking);
  transition:
    padding-top var(--client-list-open-speed) ease,
    padding-bottom var(--client-list-open-speed) ease,
    opacity .18s ease;
}

.panel.open>ul{
  padding-top:var(--client-list-open-padding-top);
  padding-bottom:var(--client-list-open-padding-bottom);
  opacity:1;
}

.panel li{padding:0;border-bottom:0}
.client-list .accordion[disabled]{
  cursor:default;
  pointer-events:none;
}

.client-list .panel.open{
  max-height:none;
  height:auto;
  overflow:visible;
  border-bottom:1px solid var(--ink);
}

.client-list .panel.open > ul{
  padding-top:var(--client-list-open-padding-top);
  padding-bottom:var(--client-list-open-padding-bottom);
  opacity:1;
}
.quote{--quote-col:calc((min(var(--wrap),calc(100vw - 80px)) - (2 * var(--gap))) / 3);--quote-icon-size:calc(var(--quote-col) * var(--tile-depth) * var(--client-icon-ratio));display:flex;align-items:center;justify-content:center;gap:48px;margin-top:var(--space-client-list-to-quote);padding:0 0}.little-person{width:var(--quote-icon-size);height:var(--quote-icon-size);object-fit:contain;display:block}.quote blockquote{font-size:calc(var(--quote-icon-size) / 3.25);height:var(--quote-icon-size);display:flex;flex-direction:column;justify-content:center;line-height:1.02;margin:0;letter-spacing:var(--serif-tracking)}
.playground{
  width:var(--playground-shell);
  margin:var(--space-quote-to-playground) auto 78px;
  background:var(--slate);
  border-radius:var(--playground-shell-radius);
  padding:var(--playground-shell-padding-top) var(--playground-shell-padding-right) var(--playground-shell-padding-bottom) var(--playground-shell-padding-left);
  color:white;
  overflow:hidden;
  position:relative;
}
.playground h2{text-align:center;font-size:52px;line-height:1.05;margin:0 0 var(--playground-title-to-cards)}
.carousel-viewport{
  width:min(var(--playground-cards-max),calc(100% - (var(--playground-card-edge-space) * 2)));
  margin-inline:auto;
  padding:0;
  overflow:hidden;
}
.carousel-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - (var(--playground-card-gap) * 2))/3);gap:var(--playground-card-gap);transition:transform var(--playground-slide-speed) ease,opacity var(--playground-slide-speed) ease}.carousel-track.is-fading{opacity:.18}.play-card{aspect-ratio:1000/1535;max-height:var(--playground-card-max-height);border-radius:var(--playground-card-radius);padding:24px;display:flex;flex-direction:column;justify-content:flex-end;color:var(--ink);position:relative}.play-card.peach{background:var(--peach)}.play-card.paper{background:#fff}.play-card.blue{background:var(--blue)}.play-card.mint{background:#caefe8}.play-graphic{
  position:absolute;
  top:24px;
  left:50%;
  transform:translateX(-50%);
  width:var(--play-graphic-ratio);
  height:auto;
  max-height:calc(100% - 50px);
  object-fit:contain;
  display:block;
}
.car-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:3;
  border:0;
  border-radius:50%;
  width:var(--playground-arrow-size);
  height:var(--playground-arrow-size);
  background:rgba(255,255,255,.75);
  color:var(--ink);
  font-size:28px;
  line-height:1;
  cursor:pointer;
}
.homepage-final-quote{
  padding-bottom:100px;
}
.prev{left:var(--playground-arrow-inset)}
.next{right:var(--playground-arrow-inset)}
.dots{display:flex;justify-content:center;align-items:center;gap:var(--playground-dots-gap);margin-top:var(--playground-dots-margin-top)}.dots button{width:10px;height:10px;min-width:10px;min-height:10px;padding:0;aspect-ratio:1/1;display:block;border-radius:50%;border:0;background:#b9e7f2;opacity:.45;line-height:0}.dots button.active{opacity:1}
.site-footer{
  display:block;
  border-top:0;
  padding:0 0 120px;
  text-align:center;
  font-weight:300;
  font-size:13px;
  line-height:1.5;
}
.site-footer::before{
  content:"";
  display:block;
  height:1px;
  background:var(--ink);
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  margin-bottom:28px;
}

.site-footer p{
  margin:0;
}

.site-footer p + p{
  margin-top:18px;
}

.site-footer a{
  display:inline;
  color:var(--ink);
  text-decoration:none;
  white-space:nowrap;
}

.site-footer .footer-desktop-break{
  display:block;
}
#flood{
  position:fixed;
  inset:0;
  z-index:9999;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  background:var(--page-transition-color,var(--case,var(--ink)));
  transition:
    opacity var(--transition-speed) ease,
    visibility 0s linear var(--transition-speed);
}

#flood.on{
  opacity:1;
  visibility:visible;
  transition:
    opacity var(--transition-speed) ease,
    visibility 0s linear 0s;
}.case-page{min-height:100vh;background:var(--case);color:var(--case-ink,var(--ink));--header-bg:var(--case);--header-ink:var(--case-ink,var(--ink))}.case-hero{padding-top:140px;min-height:70vh}.case-hero h1{font-family:'DM Serif Text';font-size:88px;font-weight:400;line-height:1.05;margin:0}.case-hero p{font-size:16px;max-width:520px;line-height:1.35}.back-link{display:inline-block;margin-top:50px;color:var(--case-ink,var(--ink))}
.mobile-break{display:none}

@media(max-width:760px){
  :root{
    --gap:24px;
    --edge:20px;
    --logo-w:70px;
    --logo-h:35px;
    --mobile-header-height:92px;
    --title-size:32px;
    --intro-title-size:34px;
    --intro-subtitle-size:34px;
    --space-header-to-intro:42px;
    --space-intro-to-grid:46px;
    --space-grid-to-client-list:56px;
    --space-client-list-to-quote:72px;
    --space-quote-to-playground:72px;
    --client-list-open-max-height:1320px;
    --client-list-open-padding-top:42px;
    --client-list-open-padding-bottom:70px;
    --client-list-row-gap:8px;
    --playground-shell-padding-top:38px;
    --playground-shell-padding-right:20px;
    --playground-shell-padding-bottom:38px;
    --playground-shell-padding-left:20px;
    --playground-card-gap:20px;
  }

  .wrap{width:90vw}
  main{padding-top:var(--mobile-header-height)}

  .site-header{
    width:100%;
    height:var(--mobile-header-height);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 5vw;
    z-index:80;
  }
  .site-header::before,.site-header::after{width:100%}
  .site-header::before{z-index:81}
  .site-header::after{z-index:84}

  .logo{position:relative;z-index:86}
  .desktop-nav{display:none}

  .burger{
    display:flex;
    position:absolute;
    left:5vw;
    z-index:87;
    width:34px;
    height:28px;
    flex-direction:column;
    justify-content:space-around;
    background:none;
    border:0;
    padding:0;
  }
  .burger span{height:2px;background:var(--header-ink);border-radius:10px}

  .mobile-drawer{
    display:flex;
    position:fixed;
    top:var(--mobile-header-height);
    left:0;
    right:0;
    min-height:52vh;
    background:var(--header-bg);
    border-bottom:1px solid var(--header-ink);
    padding:44px 5vw 56px;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:34px;
    transform:translateY(calc(-100% - var(--mobile-header-height)));
    transition:transform .32s ease, background-color var(--transition-speed) ease, border-color var(--transition-speed) ease;
    z-index:79;
    font-weight:400;
  }
  .mobile-drawer.open{transform:translateY(0)}
  .mobile-drawer a{font-size:30px;line-height:1.2;text-align:center;color:var(--header-ink)}

  .intro{padding:var(--space-header-to-intro) 0 var(--space-intro-to-grid)}
  .mobile-break{display:block}

  .client-grid{
    --grid-width:90vw;
    --col:var(--grid-width);
    --tile-h:calc(var(--col) * var(--tile-depth));
    grid-template-columns:1fr;
    grid-auto-rows:var(--tile-h);
  }
  .tile,.tile.wide{grid-column:auto;width:100%;height:auto;min-height:0;max-height:none}
  .icons{gap:0}
  .tile.wide .icons .client-icon:not(.mobile-keep){display:none}

  .client-list{margin-top:var(--space-grid-to-client-list)}
  .panel>ul{
  grid-template-columns:1fr;
  font-size:34px;
  line-height: 1.1em;
}

  .quote{
  --quote-icon-size:150px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:30px;
  margin-top:var(--space-client-list-to-quote);
  padding:0 0 70px;
  text-align:center;
}
  .little-person{width:var(--quote-icon-size);height:var(--quote-icon-size)}
  .quote blockquote{
    width:85vw;
    max-width:85vw;
    height:auto;
    display:block;
    font-size:clamp(32px,10.5vw,48px);
    line-height:1.04;
    margin:0 auto;
  }

  .playground{
    width:calc(100vw - 40px);
    padding:var(--playground-shell-padding-top) var(--playground-shell-padding-right) var(--playground-shell-padding-bottom) var(--playground-shell-padding-left);
    margin-top:var(--space-quote-to-playground);
    margin-bottom:54px;
  }
  .playground h2{font-size:38px}
  .carousel-viewport{width:100%;padding:0 28px;overflow:hidden}
  .carousel-track{grid-auto-columns:100%;gap:var(--playground-card-gap)}
  .play-card{max-height:none}

  .site-footer{grid-template-columns:1fr;gap:24px;padding-bottom:70px}

.site-footer .footer-desktop-break{
  display:inline;
}

.site-footer .footer-desktop-break::before{
  content:" ";
}
  .case-hero{padding-top:110px}
  .case-hero h1{font-size:60px}
}

@media (prefers-reduced-motion: reduce){#flood,.site-header,.site-header::before,.site-header::after,.desktop-nav a{transition:none!important}}