/* Muse Material Studio — single-page site
   Desktop values measured 1:1 from the 1440×7500 PDF render. */

/* Afacad (SIL OFL) — self-hosted variable font, wght 400–700 */
@font-face{font-family:"Afacad";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("../fonts/afacad-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Afacad";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("../fonts/afacad-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Afacad";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("../fonts/afacad-math.woff2") format("woff2");
  unicode-range:U+2190,U+2192,U+2194-21AE,U+21B0-21E5,U+2200-22FF}
@font-face{font-family:"Afacad";font-style:italic;font-weight:400 700;font-display:swap;
  src:url("../fonts/afacad-italic-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Afacad";font-style:italic;font-weight:400 700;font-display:swap;
  src:url("../fonts/afacad-italic-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Afacad";font-style:italic;font-weight:400 700;font-display:swap;
  src:url("../fonts/afacad-italic-math.woff2") format("woff2");
  unicode-range:U+2190,U+2192,U+2194-21AE,U+21B0-21E5,U+2200-22FF}

:root{
  color-scheme:only light;
  --blush:#F4DCD2;
  --warm-white:#F8F4EF;
  --taupe:#CFC3BA;
  --paper:#FBF9F8;
  --ink:#333333;
  --rule:rgba(51,51,51,.38);
  --container:1193px;
  --font-sans:"Afacad","Avenir Next",Avenir,"Segoe UI",sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:#F8F4EF;color:#333333;-webkit-tap-highlight-color:transparent}
body{
  font-family:var(--font-sans);
  color:var(--ink);
  background:var(--warm-white);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{display:block;max-width:100%;height:auto}
a{color:var(--ink);text-decoration:none}
a:hover{opacity:.65}
a,button{transition:opacity .25s ease}
.arrow{display:inline-block;transition:transform .25s ease}
a:hover .arrow,button:hover .arrow{transform:translateX(4px)}
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:none;text-decoration:underline;text-underline-offset:4px
}
ul{list-style:none}
em{font-style:italic}
[hidden]{display:none!important}

.container{width:min(var(--container),82.85vw);margin-inline:auto}
.chevron{display:block;color:var(--ink)}

/* ---------- Sticky navigation ---------- */
.site-nav{position:fixed;top:0;left:0;right:0;z-index:20;
  background:rgba(244,220,210,.92);border-bottom:1px solid rgba(51,51,51,.15);
  transform:translateY(-100%);visibility:hidden;
  transition:transform .3s ease,visibility .3s ease}
.site-nav--visible{transform:none;visibility:visible}
.site-nav__inner{width:min(var(--container),82.85vw);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;height:58px}
.site-nav__brand{display:block;font-size:0}
.site-nav__brand img{display:block;width:210px;height:auto}
.site-nav__links{display:flex;align-items:center;gap:38px}
.site-nav__links a{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}
.site-nav__links .arrow{margin-left:5px}
#studio,#selected-work,#ways-to-work-together,#project-enquiry{scroll-margin-top:84px}

/* ---------- Hero ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:420px;overflow:hidden}
.hero__image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.hero__brand{position:absolute;left:8.68%;top:20.45%;width:82.85%;font-size:0}
.hero__brand img{width:100%;height:auto}
.hero__foot{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;padding-bottom:12px}
.hero__descriptor{
  font-size:13px;font-weight:600;font-style:italic;text-transform:uppercase;
  letter-spacing:.015em;margin-bottom:17px;text-align:center;
}
.hero__cue{display:flex;flex-direction:column;align-items:center;gap:12px;
  font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.02em}
@keyframes cue-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
.hero__cue .chevron,.gallery__more:not([disabled]) .chevron{animation:cue-bob 1.8s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.hero__cue .chevron,.gallery__more .chevron{animation:none}}

/* ---------- Studio intro ---------- */
.studio{background:var(--blush)}
.studio__inner{padding-top:105px;padding-bottom:152px;text-align:right}
.studio__heading{font-size:22px;line-height:27px;font-weight:600;letter-spacing:.01em}
.studio__lede{font-size:30px;line-height:39px;font-weight:400;max-width:860px;margin-left:auto;margin-top:40px}
.studio__heading + .studio__lede{margin-top:52px}
.credentials{margin-top:65px;display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:70px;text-align:right}
.credentials h3{font-size:16px;line-height:20px;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.credentials__role{font-size:15px;line-height:19px;font-weight:500;margin-top:12px}
.credentials__detail{font-size:13px;line-height:17px;font-weight:400;margin-top:6px}

/* ---------- CLOUD7 study ---------- */
.cloud7{position:relative;background:var(--warm-white)}
.cloud7::before{content:"";position:absolute;top:0;right:0;width:8.54%;height:124px;background:var(--warm-white)}
.cloud7__yellow{position:absolute;top:-78px;left:27.71%;width:53.99%;height:auto;z-index:2}
.cloud7__head{padding-top:237px}
.cloud7__head{width:min(var(--container),82.85vw);margin-inline:auto}
.cloud7__logo{width:347px;height:auto;margin-left:43px}
.cloud7__category{font-size:14px;font-weight:600;margin:38px 0 0 43px}
.cloud7__study{font-size:14px;margin:16px 0 0 43px}

.study-caption{font-size:12px;font-weight:500;letter-spacing:.01em}

.study-plaid{position:relative;aspect-ratio:1440/500;margin-top:85px}
.study-plaid__board{position:absolute;left:0;top:0;width:50.139%;height:100%;background:var(--taupe)}
.study-caption--plaid{position:absolute;left:calc((100% - min(var(--container),82.85vw))/2 + 43px);top:5.6%;z-index:3}
.study-plaid__garment{position:absolute;left:10.11%;top:42.2%;width:43.35%;height:auto}
.study-plaid__dog{position:absolute;left:32.55%;top:5.6%;width:61.36%;height:auto;z-index:2}
.study-plaid__photo{position:absolute;top:0;width:23.194%;height:100%;object-fit:cover}
.study-plaid__photo--1{left:50.139%}
.study-plaid__photo--2{left:74.097%}

.study-knit{position:relative;aspect-ratio:1440/628}
.study-caption--knit{position:absolute;left:calc((100% - min(var(--container),82.85vw))/2 + 43px);top:calc(8.76% - 12px)}
.study-knit__garment{position:absolute;left:6.25%;top:47.13%;width:19.51%;height:auto}
.study-knit__photo{position:absolute;left:32.43%;top:14.17%;width:23.13%;height:79.46%;object-fit:cover}
.study-knit__dog{position:absolute;left:60.14%;top:4.46%;width:33.96%;height:auto}

/* ---------- Principles ---------- */
.principles{background:var(--blush)}
.principles .container{padding-top:80px;padding-bottom:70px}
.principles__heading{font-size:40px;line-height:44px;font-weight:600;text-align:right}
.principles__grid{margin-top:76px;display:grid;grid-template-columns:1fr 1fr;column-gap:180px;row-gap:90px}
.principles__cell{text-align:right}
.principles__cell h3{font-size:16px;font-weight:600}
.principles__cell p{font-size:16px;line-height:23px;margin-top:25px;max-width:436px;margin-left:auto}

/* ---------- Gallery ---------- */
.gallery{background:var(--taupe);padding-top:94px;padding-bottom:35px}
.gallery__grid{display:grid}
.gallery__grid img{width:100%;object-fit:cover}
.gallery__grid--r1 img:nth-of-type(1){aspect-ratio:240/300}
.gallery__grid--r1 img:nth-of-type(2){aspect-ratio:450/300}
.gallery__grid--r1 img:nth-of-type(3){aspect-ratio:240/300}
.gallery__grid--r1 img:nth-of-type(4){aspect-ratio:225/300}
.gallery__grid--r2 img:nth-of-type(1){aspect-ratio:407/305}
.gallery__grid--r2 img:nth-of-type(2){aspect-ratio:245/305}
.gallery__grid--r2 img:nth-of-type(3){aspect-ratio:534/305}
.gallery__grid--r3 img:nth-of-type(1){aspect-ratio:244/305}
.gallery__grid--r3 img:nth-of-type(2){aspect-ratio:203/305}
.gallery__grid--r3 img:nth-of-type(3){aspect-ratio:250/305}
.gallery__grid--r3 img:nth-of-type(4){aspect-ratio:203/305}
.gallery__grid--r3 img:nth-of-type(5){aspect-ratio:228/305}
@media (min-width:769px){
  .gallery__grid--r1{grid-template-columns:240fr 15fr 450fr 12fr 240fr 11fr 225fr}
  .gallery__grid--r1 img:nth-of-type(1){grid-column:1}
  .gallery__grid--r1 img:nth-of-type(2){grid-column:3}
  .gallery__grid--r1 img:nth-of-type(3){grid-column:5}
  .gallery__grid--r1 img:nth-of-type(4){grid-column:7}
  .gallery__grid--r2{margin-top:10px;grid-template-columns:407fr 4fr 245fr 3fr 534fr}
  .gallery__grid--r2 img:nth-of-type(1){grid-column:1}
  .gallery__grid--r2 img:nth-of-type(2){grid-column:3}
  .gallery__grid--r2 img:nth-of-type(3){grid-column:5}
  .gallery__grid--r3{margin-top:15px;grid-template-columns:244fr 17fr 203fr 15fr 250fr 15fr 203fr 18fr 228fr}
  .gallery__grid--r3 img:nth-of-type(1){grid-column:1}
  .gallery__grid--r3 img:nth-of-type(2){grid-column:3}
  .gallery__grid--r3 img:nth-of-type(3){grid-column:5}
  .gallery__grid--r3 img:nth-of-type(4){grid-column:7}
  .gallery__grid--r3 img:nth-of-type(5){grid-column:9}
}
.gallery__grid--extra{margin-top:15px;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.gallery__grid--extra img{width:100%;aspect-ratio:4/5;object-fit:cover}
.gallery__more{margin:14px auto 0;display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:20px 48px 0;background:none;border:0;color:var(--ink);font-family:inherit;cursor:pointer}
.gallery__more[disabled]{cursor:default}
.gallery__more:not([disabled]):hover{opacity:.65}
.gallery__more-label{font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.18em}

.gallery__mosaic img{cursor:zoom-in}
.gallery-lightbox[hidden]{display:none}
.gallery-lightbox{position:fixed;inset:0;z-index:1000;display:grid;grid-template-columns:minmax(52px,1fr) minmax(0,1100px) minmax(52px,1fr);align-items:center;background:rgba(248,244,239,.97);padding:32px 24px}
.gallery-lightbox__figure{grid-column:2;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;max-height:calc(100vh - 64px)}
.gallery-lightbox__image{display:block;max-width:100%;max-height:calc(100vh - 90px);width:auto;height:auto;object-fit:contain}
.gallery-lightbox__caption{margin-top:12px;font-size:13px;line-height:17px;color:#333;text-align:center}
.gallery-lightbox__close,.gallery-lightbox__nav{border:0;background:transparent;color:#333;font-family:inherit;cursor:pointer;padding:16px;line-height:1}
.gallery-lightbox__close{position:absolute;z-index:3;top:18px;right:22px;font-size:34px;font-weight:300}
.gallery-lightbox__nav{font-size:25px;align-self:center}
.gallery-lightbox__nav--prev{grid-column:1;justify-self:center}
.gallery-lightbox__nav--next{grid-column:3;justify-self:center}
.gallery-lightbox__close:hover,.gallery-lightbox__nav:hover{opacity:.55}
.gallery-lightbox__close:focus-visible,.gallery-lightbox__nav:focus-visible{outline:none;opacity:.55;text-decoration:none}
body.gallery-lightbox-open{overflow:hidden}

/* ---------- Services ---------- */
.services{background:var(--paper)}
.services > .container{padding-top:89px}
.services__heading{font-size:40px;line-height:42px;font-weight:600;text-align:right}
.services__grid{margin-top:90px;padding-left:32px;display:grid;grid-template-columns:repeat(4,1fr);column-gap:59px;min-height:541px;align-content:start}
.offer{display:flex;flex-direction:column;align-items:flex-start}
.offer__number{font-size:12px;font-weight:500;letter-spacing:.08em}
.offer__title{font-size:22px;line-height:25px;font-weight:600;text-transform:uppercase;letter-spacing:.01em;margin-top:68px}
.offer__pricing{margin-top:66px}
.offer__price{font-size:27px;line-height:28px;font-weight:600}
.offer__sub{font-size:13px;margin-top:5px}
.offer__includes{font-size:15px;font-weight:600;margin-top:6px}
.offer__body{margin-top:42px;max-width:203px}
.offer__body p{font-size:17px;line-height:22px}
.offer__body p + p{margin-top:22px}
.offer__cta{display:none;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.05em}

.cta-strip{display:flex;flex-wrap:wrap;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);
  --m:min(var(--container),82.85vw);--inset:32px;--gap:59px;
  --pitch:calc((var(--m) - var(--inset) - 3*var(--gap))/4 + var(--gap));
  --pitch2:calc((var(--m) - var(--inset) - var(--gap))/2 + var(--gap))}
.cta-strip__link{flex:0 0 25%;position:relative;height:124px;
  font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;
  transition:background-color .25s ease,opacity .25s ease}
.cta-strip__label{position:absolute;top:0;height:100%;display:flex;align-items:center;white-space:nowrap;z-index:1}
.cta-strip__link:nth-child(1) .cta-strip__label{left:calc((400% - var(--m))/2 + var(--inset))}
.cta-strip__link:nth-child(2) .cta-strip__label{left:calc((400% - var(--m))/2 + var(--inset) + var(--pitch) - 100%)}
.cta-strip__link:nth-child(3) .cta-strip__label{left:calc((400% - var(--m))/2 + var(--inset) + 2*var(--pitch) - 200%)}
.cta-strip__link:nth-child(4) .cta-strip__label{left:calc((400% - var(--m))/2 + var(--inset) + 3*var(--pitch) - 300%)}
.cta-strip__link .arrow{margin-left:6px}
.cta-strip__link:hover,.cta-strip__link:focus-visible{background:var(--blush);opacity:1;outline:none}

@media (min-width:1025px){
  /* Centre the visible 203px service content as one desktop table while preserving
     the existing equal tracks and gaps. The same shift is shared by the CTA labels. */
  .services{
    --svc-inset:32px;
    --svc-gap:59px;
    --svc-track:calc((min(var(--container),82.85vw) - var(--svc-inset) - 3*var(--svc-gap))/4);
    --svc-pitch:calc(var(--svc-track) + var(--svc-gap));
    --svc-shift:max(0px,calc((var(--svc-track) - 203px)/2));
    --svc-x1:calc((100% - min(var(--container),82.85vw))/2 + var(--svc-inset)/2 + var(--svc-shift));
    --svc-x2:calc(var(--svc-x1) + var(--svc-pitch));
    --svc-x3:calc(var(--svc-x1) + 2*var(--svc-pitch));
    --svc-x4:calc(var(--svc-x1) + 3*var(--svc-pitch));
  }
  .services__grid{
    padding-inline:calc(var(--svc-inset)/2);
    transform:translateX(var(--svc-shift));
  }

  /* The middle hover regions use the same pitch as the centred service columns.
     The first and fourth regions absorb the equal outer margins and reach the
     viewport edges. CTA labels remain pinned to the service-column left axes. */
  .cta-strip{
    position:relative;
    display:grid;
    --svc-cta-outer:calc(50% - var(--svc-pitch));
    grid-template-columns:
      minmax(0,var(--svc-cta-outer))
      minmax(0,var(--svc-pitch))
      minmax(0,var(--svc-pitch))
      minmax(0,var(--svc-cta-outer));
  }
  .cta-strip__link{
    display:block;
    position:static;
    flex:none;
    height:96px;
    min-width:0;
    overflow:visible;
    background-image:none;
  }
  .cta-strip__link:nth-child(1) .cta-strip__label{left:var(--svc-x1)}
  .cta-strip__link:nth-child(2) .cta-strip__label{left:var(--svc-x2)}
  .cta-strip__link:nth-child(3) .cta-strip__label{left:var(--svc-x3)}
  .cta-strip__link:nth-child(4) .cta-strip__label{left:var(--svc-x4)}
}

/* ---------- Enquiry ---------- */
.enquiry{background:var(--warm-white)}
.enquiry__inner{padding-top:45px;padding-bottom:62px}
.enquiry__heading{font-size:40px;line-height:48px;font-weight:600;text-align:right}
.enquiry__sub{font-size:18px;line-height:24px;font-weight:500;text-align:right;margin-top:28px}
.form-status{margin:36px 0 0 107px;padding:16px 20px;border:0;font-size:15px;line-height:22px;font-weight:500}
.form-status a{text-decoration:underline}
.form-status--sent{background:var(--blush)}
.enquiry-form{margin-top:69px;margin-left:107px;max-width:987px}
.enquiry-form__grid{display:grid;grid-template-columns:300px 300px;justify-content:space-between;row-gap:48px}
.field{position:relative;display:flex;flex-direction:column}
.field label{font-size:16px;line-height:22px;font-weight:600}
.field input,.field select,.field textarea{
  font-family:inherit;font-size:17px;font-weight:500;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--rule);border-radius:0;
  appearance:none;-webkit-appearance:none;color-scheme:only light;
  margin-top:16px;padding:8px 2px 12px;width:100%;
}
.field :is(input,select,textarea):focus,
.field :is(input,select,textarea):focus-visible{outline:none;box-shadow:none;border-bottom-color:var(--ink)}
input::-webkit-contacts-auto-fill-button,
input::-webkit-credentials-auto-fill-button{visibility:hidden;position:absolute;right:0;pointer-events:none}
.field select{appearance:none;-webkit-appearance:none;padding-left:8px;padding-right:30px;cursor:pointer}
.field select option{background:#F8F4EF;color:#333333}
.field__chevron{position:absolute;right:4px;bottom:18px;pointer-events:none}
.field--message{grid-column:1 / -1}
.field textarea{resize:none;min-height:84px;line-height:24px}
.hp-field{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.enquiry-form__submit{
  margin-top:27px;display:inline-block;cursor:pointer;background:none;border:0;
  border-bottom:1px solid var(--ink);padding:0 0 13px;color:var(--ink);
  font-family:inherit;font-size:17px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;
}
.enquiry-form__submit .arrow{margin-left:6px}
.enquiry-form__note{font-size:13px;margin-top:22px}

/* ---------- Footer ---------- */
.footer{background:var(--blush)}
.footer__inner{padding-top:72px;padding-bottom:22px}
.footer__grid{display:grid;grid-template-columns:587px 331px 1fr;margin-left:62px}
.footer__brand img{width:496px;height:auto}
.footer__col{padding-top:0}
.footer__label{font-size:13px;font-weight:600}
.footer__col ul{margin-top:25px}
.footer__col li + li{margin-top:18px}
.footer__col a,.footer__plain{font-size:14px;font-weight:400;line-height:19px}
.footer__copyright{font-size:12px}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width:1160px){
  .services__grid{column-gap:34px;padding-left:20px}
  .cta-strip{--inset:20px;--gap:34px;--cta-pad:32px}
  .enquiry-form{margin-left:0;max-width:none}
  .form-status{margin-left:0}
  .footer__grid{grid-template-columns:1fr auto auto;column-gap:48px;margin-left:0}
  .footer__brand img{width:min(496px,40vw)}
}

@media (min-width:1025px) and (max-width:1160px){
  .services{--svc-inset:20px;--svc-gap:34px}
  .services__grid{padding-inline:calc(var(--svc-inset)/2)}
}

@media (max-width:1024px){
  .studio__lede{font-size:24px;line-height:34px;max-width:640px}
  .credentials{gap:32px}
  .principles__heading{font-size:34px;line-height:40px}
  .principles__grid{margin-top:80px;row-gap:90px}
  .services__heading,.enquiry__heading{font-size:34px;line-height:40px}
  .services__grid{grid-template-columns:1fr 1fr;row-gap:70px;min-height:0;margin-bottom:80px}
  .cta-strip__link{flex:0 0 50%;height:92px}
  .cta-strip__link:nth-child(1) .cta-strip__label,
  .cta-strip__link:nth-child(3) .cta-strip__label{left:calc((200% - var(--m))/2 + var(--inset))}
  .cta-strip__link:nth-child(2) .cta-strip__label,
  .cta-strip__link:nth-child(4) .cta-strip__label{left:calc((200% - var(--m))/2 + var(--inset) + var(--pitch2) - 100%)}
  .enquiry-form__grid{grid-template-columns:1fr 1fr;column-gap:64px}
  .cloud7__head{padding-top:200px}
  .cloud7__logo,.cloud7__category,.cloud7__study{margin-left:0}
  .study-caption--plaid,.study-caption--knit{left:calc((100% - min(var(--container),82.85vw))/2)}
}

@media (max-width:1024px) and (min-width:769px){
  .gallery__grid--extra{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
}
@media (max-width:768px){
  .container{width:calc(100% - 48px)}
  .form-status{scroll-margin-top:76px}
  .cloud7__head{width:calc(100% - 48px)}
  .site-nav__faq{display:none!important}

  .hero{height:auto;min-height:0;aspect-ratio:4/3}
  .hero__image{object-position:center center}
  .hero__brand{left:6%;top:13%;width:88%}
  .hero__descriptor{padding-inline:24px;font-size:12px;line-height:19px}

  .studio__inner{padding-top:70px;padding-bottom:90px}
  .studio__lede{font-size:20px;line-height:31px;margin-top:30px;max-width:none}
  .studio__heading + .studio__lede{margin-top:38px}
  .credentials{grid-template-columns:1fr;gap:34px;margin-top:56px}

  .cloud7::before{height:70px;width:12%}
  .cloud7__yellow{position:static;width:min(560px,94%);margin:0 auto;transform:translateY(-30px)}
  .cloud7__head{padding-top:10px}
  .cloud7__logo{width:min(300px,64vw)}
  .cloud7__category{margin-top:30px}
  .cloud7__study{margin-top:12px}

  .study-plaid{margin-top:56px;aspect-ratio:auto;position:relative;display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .study-caption--plaid{left:24px;top:12px;max-width:calc(100% - 48px);white-space:normal;line-height:16px}
  .study-plaid__board{position:relative;grid-column:1 / -1;width:100%;aspect-ratio:722/520}
  .study-plaid__photo{position:static;width:100%;height:auto;aspect-ratio:334/500}
  .study-knit{aspect-ratio:auto;position:static;display:flex;flex-direction:column;align-items:center;margin-top:56px;padding-bottom:64px}
  .study-caption--knit{position:static;align-self:flex-start;margin-left:24px;margin-bottom:34px;max-width:calc(100% - 48px);white-space:normal;line-height:16px}
  .study-knit__garment{position:static;order:1;width:min(320px,60%)}
  .study-knit__dog{position:static;order:2;width:min(420px,78%);margin-top:30px}
  .study-knit__photo{position:static;order:3;width:min(360px,70%);height:auto;aspect-ratio:334/500;margin-top:30px}

  .principles .container{padding-top:64px;padding-bottom:72px}
  .principles__heading{font-size:28px;line-height:34px}
  .principles__grid{grid-template-columns:1fr;margin-top:56px;row-gap:56px}

  .gallery{padding-top:56px}
  .gallery__grid{display:contents}
  .gallery__grid--r2,.gallery__grid--r3{margin-top:0}
  .gallery__mosaic{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .gallery__grid--r1 img:nth-of-type(2){grid-column:1/-1;order:1}
  .gallery__grid--r1 img:nth-of-type(1){order:2}
  .gallery__grid--r1 img:nth-of-type(3){order:3}
  .gallery__grid--r1 img:nth-of-type(4){order:4}
  .gallery__grid--r3 img:nth-of-type(5){order:5}
  .gallery__grid--r3 img:nth-of-type(2){order:6}
  .gallery__grid--r3 img:nth-of-type(4){order:7}
  .gallery__grid--r2 img:nth-of-type(1){grid-column:1/-1;order:8}
  .gallery__grid--r2 img:nth-of-type(2){order:9}
  .gallery__grid--r3 img:nth-of-type(3){order:10}
  .gallery__grid--r2 img:nth-of-type(3){grid-column:1/-1;order:11}
  .gallery__grid--r3 img:nth-of-type(1){grid-column:1/-1;order:12}
  .gallery__grid--extra img{order:13}
.gallery__grid--extra{display:grid!important;grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:0}
.gallery__grid--extra img{order:initial!important;aspect-ratio:4/5}
.gallery-lightbox{grid-template-columns:44px minmax(0,1fr) 44px;padding:20px 8px}
.gallery-lightbox__figure{max-height:calc(100vh - 40px)}
.gallery-lightbox__image{max-height:calc(100vh - 70px)}
.gallery-lightbox__close{top:8px;right:8px;font-size:30px;padding:12px}
.gallery-lightbox__nav{position:relative;z-index:2;padding:8px;font-size:22px}
.gallery-lightbox__figure{position:relative;z-index:1}
  .site-nav__inner{width:calc(100% - 48px);height:52px}
  .site-nav__links{gap:22px}
  #studio,#selected-work,#ways-to-work-together,#project-enquiry{scroll-margin-top:76px}

  .services > .container{padding-top:64px}
  .services__heading{font-size:30px;line-height:36px}
  .services__grid{grid-template-columns:1fr;row-gap:64px;margin-top:56px;margin-bottom:64px;padding-left:0}
  .offer__title{margin-top:28px}
  .offer__pricing{margin-top:30px}
  .offer__body{margin-top:24px}
  .offer__cta{display:inline-block;margin-top:26px;border-bottom:1px solid var(--ink);padding-bottom:9px}
  .cta-strip{display:none}

  .enquiry__inner{padding-top:40px;padding-bottom:64px}
  .enquiry__heading{font-size:30px;line-height:38px}
  .enquiry__sub{font-size:15px;line-height:24px;margin-top:20px}
  .enquiry-form{margin-top:56px}
  .enquiry-form__grid{grid-template-columns:1fr;row-gap:48px}

  .footer__inner{padding-top:64px}
  .footer__grid{grid-template-columns:1fr;row-gap:44px}
  .footer__brand img{width:min(352px,82vw)}
  .footer__col{padding-top:0}
}

@media (max-width:640px){
  .site-nav__links a:not(.site-nav__cta){display:none}
  .site-nav__brand img{width:170px}
}

@media (max-width:430px){
  .hero__brand{top:10%}
  .studio__lede{font-size:19px;line-height:29px}
  .offer__title{font-size:20px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  a,button,.arrow,.site-nav,.cta-strip__link{transition:none}
  a:hover .arrow,button:hover .arrow{transform:none}
}


/* ---------- v17 refinements ---------- */
.gallery__more{margin-top:18px}
.gallery__grid--extra[hidden]{display:none!important}
.gallery-lightbox{grid-template-columns:minmax(44px,1fr) auto minmax(44px,1fr);padding:40px 24px}
.gallery-lightbox__figure{max-width:92vw;max-height:calc(100vh - 80px)}
.gallery-lightbox__image{max-width:92vw;max-height:88vh;width:auto;height:auto;flex:0 0 auto}


@media (max-width:768px){
  .hero{min-height:440px}
  .hero__brand{left:7%;top:9%;width:86%}
  .hero__foot{padding:0 18px 18px}
  .hero__descriptor{max-width:340px;padding:8px 10px;font-size:11px;line-height:15px;background:rgba(248,244,239,.38);backdrop-filter:blur(1px);margin-bottom:14px}
  .hero__cue{font-size:11px;letter-spacing:.06em;gap:10px}

  .study-plaid{margin-top:56px;aspect-ratio:auto;position:relative;display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
  .study-caption--plaid{position:static;grid-column:1 / -1;max-width:none;margin:0 0 12px 0;line-height:17px}
  .study-plaid__board{position:relative;grid-column:1 / -1;width:100%;aspect-ratio:722/520}
  .study-plaid__photo--1,.study-plaid__photo--2{order:initial}
  .study-caption--knit{margin-left:0;line-height:17px}

  .gallery{padding-top:56px;padding-bottom:35px}
  .gallery__mosaic{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
  .gallery__grid--extra[hidden]{display:none!important}
  .gallery__grid--extra{grid-column:1 / -1;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px}
  .gallery__more{margin-top:20px}
  .gallery-lightbox{grid-template-columns:44px minmax(0,1fr) 44px;padding:20px 8px}
  .gallery-lightbox__figure{max-width:calc(100vw - 24px);max-height:calc(100vh - 40px)}
  .gallery-lightbox__image{max-width:calc(100vw - 24px);max-height:calc(100vh - 72px)}

  .services > .container{padding-top:64px;padding-bottom:18px}
  .services__grid{grid-template-columns:1fr;row-gap:72px;margin-top:56px;margin-bottom:88px;padding-left:0}
  .offer__body{max-width:none}
  .offer__cta{display:inline-block;margin-top:26px;border-bottom:1px solid var(--ink);padding-bottom:12px;margin-bottom:12px}

  .enquiry__inner{padding-top:48px}
}

@media (max-width:430px){
  .hero__descriptor{max-width:300px;font-size:10.5px;line-height:14px}
}


/* ---------- v19 mobile layout fixes ---------- */
@media (max-width:768px){
  /* Keep the hero image clean; put readable descriptor/cue in a dedicated band below it. */
  .hero{
    height:auto;
    min-height:0;
    aspect-ratio:auto;
    padding-top:75vw;
    overflow:hidden;
    background:var(--warm-white);
  }
  .hero picture{
    position:absolute;
    top:0;left:0;right:0;
    height:75vw;
    display:block;
  }
  .hero__image{
    position:absolute;
    inset:0;
    width:100%;height:100%;
    object-fit:cover;
    object-position:center center;
  }
  .hero__brand{
    left:7%;
    top:7vw;
    width:86%;
  }
  .hero__foot{
    position:static;
    left:auto;right:auto;bottom:auto;
    padding:16px 24px 18px;
    background:var(--warm-white);
  }
  .hero__descriptor{
    max-width:100%;
    margin:0 0 12px;
    padding:0;
    background:none;
    backdrop-filter:none;
    font-size:11.5px;
    line-height:15px;
    white-space:normal;
    text-align:center;
  }
  .hero__cue{
    font-size:11px;
    letter-spacing:.06em;
    gap:9px;
  }

  /* The extra gallery is one grid item. Keep it after the 12 main images when revealed. */
  .gallery__grid--extra{
    order:13;
    grid-column:1 / -1;
    margin-top:10px;
  }
}

@media (max-width:430px){
  .hero__brand{top:6.5vw}
  .hero__descriptor{font-size:11px;line-height:14.5px}
}


/* ---------- v20 final Cloud7 + mobile polish ---------- */
/* Restore the taupe field across the entire first CLOUD7 study row so the
   gutters and right-hand tail remain the same colour as the product board. */
.study-plaid{background:var(--taupe)}

/* Lower the illustrated dog slightly while keeping every paw contained
   inside the study row. The small scale adjustment creates the needed room. */
.study-plaid__dog{top:7.2%;width:58%}

@media (max-width:768px){
  /* Mobile hero: descriptor stays directly on the photograph; the extra
     Selected Work cue is unnecessary at this viewport size. */
  .hero{
    height:auto;
    min-height:0;
    aspect-ratio:4/3;
    padding-top:0;
    overflow:hidden;
    background:var(--warm-white);
  }
  .hero picture{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
  }
  .hero__image{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
  }
  .hero__foot{
    position:absolute;
    left:0;
    right:0;
    bottom:20px;
    padding:0 24px;
    background:transparent;
    display:flex;
    align-items:center;
  }
  .hero__descriptor{
    max-width:100%;
    margin:0;
    padding:0;
    background:none;
    backdrop-filter:none;
    font-size:11.5px;
    line-height:15px;
    white-space:normal;
    text-align:center;
  }
  .hero__cue{display:none}

  /* Keep the taupe study field continuous on mobile, including the grid
     gaps between the illustration board and campaign photographs. */
  .study-plaid{background:var(--taupe)}
  .study-plaid__dog{top:7.2%;width:58%}

  /* Both process captions need a proper mobile inset from the viewport edge. */
  .study-caption--plaid{
    box-sizing:border-box;
    width:100%;
    padding-left:24px;
    padding-right:24px;
    margin-bottom:12px;
  }
  .study-caption--knit{
    box-sizing:border-box;
    width:100%;
    align-self:stretch;
    margin-left:0;
    padding-left:24px;
    padding-right:24px;
  }

  /* Finish the services section without the oversized blank interval before
     the enquiry block. Keep a deliberate cushion below the final CTA rule. */
  .services > .container{padding-bottom:0}
  .services__grid{margin-bottom:0}
  .offer:last-child .offer__cta{margin-bottom:28px}
  .enquiry__inner{padding-top:30px}
}

@media (max-width:430px){
  .hero__descriptor{font-size:11px;line-height:14.5px}
}


/* ---------- v21 final Cloud7 paw-overlap fix ---------- */
/* Desktop: keep the taupe field across the full plaid study row,
   but let the illustrated dog's paws break past the lower edge into
   the ivory space below, as in the approved Figma layout. */
.study-plaid{
  background:var(--taupe);
  overflow:visible;
  margin-bottom:38px;
}
.study-plaid__board{overflow:visible}
.study-plaid__dog{
  top:5.8%;
  width:61.36%;
  transform:translateY(48px);
}

@media (max-width:768px){
  /* Mobile: keep the descriptor on-image, remove the extra cue, and
     preserve a clean taupe board with a small ivory buffer below it so
     the lowered paws do not collide with the two campaign images. */
  .study-plaid{
    background:none;
    overflow:visible;
    margin-bottom:0;
    gap:10px;
    row-gap:0;
  }
  .study-plaid__board{
    background:var(--taupe);
    overflow:visible;
    margin-bottom:28px;
  }
  .study-plaid__dog{
    top:5.8%;
    width:61.36%;
    transform:translateY(34px);
  }
  .study-plaid__photo--1,
  .study-plaid__photo--2{margin-top:0}
}


/* ---------- v22 final mobile rhythm + Cloud7 edge polish ---------- */
/* Desktop: raise the illustrated plaid dog from v21 so the paws only
   break the taupe boundary slightly, rather than tracking the edge. */
.study-plaid__dog{
  transform:translateY(20px);
}

@media (max-width:768px){
  /* Mobile hero is purely visual: image + Muse wordmark only. */
  .hero__foot{display:none!important}

  /* Pull the opening blush statement closer to the hero. */
  .studio__inner{padding-top:52px}

  /* Keep a deliberate edge break on the first CLOUD7 board without
     allowing the paws to collide with the campaign photographs below. */
  .study-plaid__board{margin-bottom:46px}
  .study-plaid__dog{
    transform:translateY(16px);
  }

  /* Supporting process captions stay comfortably inset and on one line. */
  .study-caption--plaid,
  .study-caption--knit{
    box-sizing:border-box;
    width:100%;
    padding-left:24px;
    padding-right:24px;
    font-size:10px;
    line-height:14px;
    letter-spacing:0;
    white-space:nowrap;
  }
  .study-caption--plaid{margin-bottom:12px}
  .study-caption--knit{margin-left:0}

  /* Match the contact-section entrance to the 72px spacing rhythm used
     between mobile service offers. */
  .offer:last-child .offer__cta{margin-bottom:0}
  .enquiry__inner{padding-top:72px}
}


/* ---------- v23 final refinement pass ---------- */
/* Desktop: the plaid illustration should break the taupe edge slightly,
   without landing precisely on the boundary. */
.study-plaid__dog{transform:translateY(10px)}
.study-plaid__buffer{display:none}
.principles__heading span{display:inline}

@media (max-width:768px){
  /* Keep the mobile hero purely visual; bring the blush statement closer. */
  .studio__inner{padding-top:34px}
  .studio__lede{
    font-size:17px;
    line-height:27px;
    text-align:right;
  }
  .studio__heading + .studio__lede{margin-top:34px}
  .studio__line{display:block}

  /* CLOUD7: taupe belongs only to the product/illustration board.
     The paws may cross its edge, followed by a protected ivory breathing row
     before the campaign photographs begin. */
  .study-plaid{background:none;row-gap:0}
  .study-plaid__board{background:var(--taupe);margin-bottom:0}
  .study-plaid__dog{transform:translateY(10px)}
  .study-plaid__buffer{
    display:block;
    grid-column:1 / -1;
    height:42px;
    background:var(--warm-white);
  }

  /* Give both process notes a more deliberate inset from the viewport edge. */
  .study-caption--plaid,
  .study-caption--knit{
    padding-left:24px;
    padding-right:24px;
    white-space:normal;
  }

  /* Keep the principles title as two deliberate right-aligned lines. */
  .principles__heading span{display:block}

  /* One spacing unit between every offer, and the same unit before enquiry. */
  .services__grid{row-gap:56px;margin-bottom:0}
  .offer__cta{margin-bottom:0}
  .offer:last-child .offer__cta{margin-bottom:0}
  .enquiry__inner{padding-top:56px}
}

/* v24 — gallery video proof */
.gallery__grid--extra > .gallery__video{
  display:block;
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  cursor:zoom-in;
  background:var(--warm-white);
}
.gallery-lightbox__video[hidden]{display:none}
.gallery-lightbox__video{
  display:block;
  max-width:100%;
  max-height:calc(100vh - 90px);
  width:auto;
  height:auto;
  object-fit:contain;
}
@media (max-width:768px){
  .gallery__grid--extra > .gallery__video{
    order:initial!important;
    aspect-ratio:4/5;
  }
  .gallery-lightbox__video{
    max-width:calc(100vw - 24px);
    max-height:calc(100vh - 72px);
  }
}

/* ---------- v25 almost-final refinements ---------- */
/* The inline video lives inside a fixed gallery tile so its native 9:16
   dimensions can never stretch a gallery row. The lightbox still uses the
   video's natural vertical format. */
.gallery__grid--extra > .gallery__video-tile{
  position:relative;
  width:100%;
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--warm-white);
}
.gallery__video-tile > .gallery__video{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  cursor:zoom-in;
  background:var(--warm-white);
}
.gallery__mosaic .gallery__video:focus-visible{
  outline:none;
  box-shadow:none;
  opacity:.82;
}

.gallery__mosaic img:focus-visible{
  outline:none;
  box-shadow:none;
  opacity:.82;
}

@media (max-width:768px){
  /* Plaid illustration: lower only the dog. The approved 42px ivory buffer
     remains exactly the same height. */
  .study-plaid__dog{transform:translateY(22px)}

  /* Slightly shorten the large pause after the second CLOUD7 study. */
  .study-knit{padding-bottom:36px}

  /* Keep the extra gallery's video tile identical in footprint to its image peers. */
  .gallery__grid--extra > .gallery__video-tile{
    order:initial!important;
    aspect-ratio:4/5;
  }

  /* A modest vertical tightening around Load More, without changing its visual language. */
  .gallery__more{margin-top:16px}

  /* Keep the same overall 56px rhythm from the final CTA rule to the enquiry
     heading, but split it across the colour boundary so the underline no longer
     sits directly on the edge of the next section. */
  .services > .container{padding-bottom:28px}
  .enquiry__inner{padding-top:28px}
}


/* ---------- v26 final locked refinements ---------- */
/* Desktop: give the hero cue a little more room above the image edge, redistribute
   the CLOUD7-to-principles transition without changing its total rhythm, and trim
   only the trailing taupe space below Load More. */
@media (min-width:769px){
  .hero__foot{padding-bottom:28px}
  .study-knit{margin-bottom:20px}
  .principles .container{padding-top:60px}
}

@media (max-width:768px){
  /* Keep the principles statement as two deliberate lines on mobile. */
  .principles__heading span{white-space:nowrap}

  /* Fine-tune the plaid illustration between the earlier too-high and too-low positions;
     the approved 42px ivory buffer itself remains untouched. */
  .study-plaid__dog{transform:translateY(18px)}

  /* Keep the total CLOUD7-to-principles breathing room at 100px, but split it evenly
     across the ivory/blush colour boundary. */
  .study-knit{padding-bottom:50px}
  .principles .container{padding-top:50px}

  /* Match the visible gap after the final service CTA to the 56px gap between offers.
     The enquiry keeps only a small independent entrance pad after the colour change. */
  .services > .container{padding-bottom:56px}
  .enquiry__inner{padding-top:12px}
}


/* ---------- v27 final alignment refinements ---------- */
/* Pricing alignment helper is inactive outside desktop/tablet. */
.offer__includes--spacer{display:none}

/* Desktop/tablet gallery: the row-1 → row-2 gap is the master value.
   Every later horizontal row gap uses the same 10px rhythm. */
@media (min-width:769px){
  .gallery__grid--r2,
  .gallery__grid--r3,
  .gallery__grid--extra{margin-top:10px}

  /* Creative Sprint is the vertical benchmark for the service content.
     The other pricing stacks receive an invisible line with the same metrics as
     "5 images + 1 video", so their body copy begins on the exact same baseline.
     The separate CTA strip is intentionally untouched. */
  .offer__includes--spacer{display:block;visibility:hidden}
}

/* Keep the desktop intro heading visually unchanged after adding explicit
   mobile line wrappers. */
.studio__heading-line{display:inline}

@media (max-width:768px){
  /* Mobile hero: one wordmark only, centred in the milky-water field.
     It remains almost as wide as the approved top placement, only slightly smaller. */
  .hero__brand{
    left:9%;
    top:87%;
    width:82%;
    transform:translateY(-50%);
  }

  /* Force the approved two-line, right-aligned opening statement. */
  .studio__heading{
    text-align:right;
  }
  .studio__heading-line{
    display:block;
  }
  .studio__heading-line:last-child{
    white-space:nowrap;
  }

  /* Mobile gallery: every horizontal row-to-row gap follows the same
     10px benchmark. The nested Load More grid gets no extra margin because
     the parent grid already supplies the row gap. */
  .gallery__mosaic{
    row-gap:10px;
    column-gap:10px;
  }
  .gallery__grid--extra{margin-top:0}
}



/* ---------- Preserved final gallery/hero lock ----------
   Gallery tail is a true 35px below the arrow on desktop and mobile.
   Mobile hero wordmark retains its approved lower position. */


/* ---------- Final footer signature ---------- */
.footer__bottom{
  margin-top:80px;
  margin-left:62px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:40px;
}
.footer__copyright{margin:0;font-size:12px}
.footer__credits{
  margin:0;
  font-size:12px;
  line-height:17px;
  text-align:right;
}
.footer__credits span{display:block}
@media (min-width:1161px){
  .footer__grid{
    grid-template-columns:minmax(0,1fr) 331px max-content;
    margin-inline:31px;
  }
  .footer__bottom{
    margin-inline:31px;
  }
  .footer__credits span{
    white-space:nowrap;
  }
}
@media (max-width:1160px){
  .footer__bottom{margin-left:0}
}
@media (max-width:768px){
  .footer__bottom{
    margin-top:44px;
    flex-direction:column;
    align-items:stretch;
    gap:14px;
  }
  /* On mobile the signature is a simple left-aligned stack above copyright. */
  .footer__credits{
    order:1;
    align-self:stretch;
    max-width:none;
    width:100%;
    text-align:left;
  }
  .footer__copyright{
    order:2;
    align-self:flex-start;
  }
}