@font-face{font-family:BarlowSC;src:url(fonts/BarlowSemiCondensed-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:BarlowSC;src:url(fonts/BarlowSemiCondensed-SemiBold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:DDIN;src:url(fonts/D-DIN.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:DDIN;src:url(fonts/D-DIN-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:96px}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:root{--ink:#000;--soft:#222;--gold:#bf9404;--gutter:clamp(16px,4vw,64px);--cell:clamp(22px,3.2vw,56px);--din:"DIN Alternate",DDIN,sans-serif}
body{background:#fff;color:var(--ink);font:400 19px/1.6 DDIN,sans-serif}
.menu-open{overflow:hidden}
:focus-visible{outline:3px solid #000;outline-offset:3px}
.skip{position:absolute;left:16px;top:-80px;z-index:50;background:#000;color:#fff;padding:12px 18px;font:700 15px/1 var(--din);text-decoration:none}
.skip:focus{top:16px}
svg.lines{position:absolute;inset:0;pointer-events:none;overflow:visible}
svg.lines path{fill:none;stroke:#000;stroke-width:3;stroke-linecap:round}
svg.lines path.reveal{transition:stroke-dashoffset 1.4s ease-out}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;background:#000;color:#fff;border:0;font:700 14px/1 var(--din);text-transform:uppercase;letter-spacing:.14em;text-decoration:none;cursor:pointer;white-space:nowrap}
.btn{transition:background-color .35s ease,color .35s ease}
.btn:hover{background:var(--gold);color:#000}
a.btn[href*="book"],.g-bookit form .btn{transition:background-color .35s ease,color .35s ease}
a.btn[href*="book"]:hover,.g-bookit form .btn:hover{background:var(--gold);color:#000}
.btn .short{display:none}
.link{font-weight:700;text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:3px;text-underline-offset:6px}
.link:hover{text-decoration-color:#000}
h2{font:700 clamp(30px,3.4vw,56px)/1.1 var(--din);letter-spacing:-.005em}
h3{font:700 clamp(18px,1.4vw,21px)/1.25 var(--din);text-transform:uppercase;letter-spacing:.06em}
.soft{color:var(--soft)}

/* the page is one big hand-drawn grid */
.page{position:relative;padding-bottom:clamp(32px,4vw,56px)}
.grow{position:relative}
.cell{padding:var(--cell)}
.split{display:grid}

/* header row */
.g-header{display:flex;align-items:stretch;height:104px}
.g-header > *{display:flex;align-items:center;padding-inline:clamp(18px,2.4vw,36px)}
.home img{width:60px;height:60px}
.navcell{text-decoration:none;font:700 14px/1 var(--din);text-transform:uppercase;letter-spacing:.14em}
.navcell:hover,.navcell[aria-current]{text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:3px;text-underline-offset:7px}
.spacer{flex:1}
.bookcell{padding-inline:clamp(14px,2vw,28px)}
.burgercell{display:none}
.burger{display:grid;place-items:center;width:52px;height:52px;background:none;border:0;cursor:pointer}
.burger svg{width:32px;height:32px}
.burger path{fill:none;stroke:#000;stroke-width:2.6;stroke-linecap:round}

.g-hero{height:calc(100svh - 104px - 124px);min-height:460px;display:grid;place-items:center}
.g-hero img{width:min(640px,56vw)}
.strip{overflow:hidden;padding-block:38px}
.track{display:flex;align-items:center;gap:96px;width:max-content;animation:scroll 50s linear infinite}
.track img{flex:none;width:auto;filter:brightness(0)}
.l-space{height:22px}.l-medio{height:32px}.l-ellas{height:44px}.l-tramp{height:26px}.l-mind{height:60px}
@keyframes scroll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.track{animation:none}html{scroll-behavior:auto}}

.logos + .g-intro,.g-title + .grow{margin-top:56px}
.g-intro p{font-size:clamp(23px,2.5vw,40px);line-height:1.3;max-width:36em}
.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-nums b{display:block;font:700 clamp(56px,5.4vw,96px)/1 var(--din)}
.g-nums p{margin-top:14px}
.g-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 48px;flex-wrap:wrap;padding-bottom:clamp(20px,2vw,32px)}
.g-head p{max-width:30em}
.g-ws a{text-decoration:none}
.g-ws img{width:100%;aspect-ratio:1/1;object-fit:cover;transition:filter .3s}
.g-ws a:hover img{filter:brightness(.92)}
.g-ws h3{margin-top:18px}
.g-ws a:hover h3{text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:3px;text-underline-offset:6px}
.g-steps h3,.g-for h3{margin-bottom:12px}
.g-for .cell{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.g-for .cell p{flex:1}
.g-gallery{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-gallery .cell{padding:clamp(12px,1.4vw,20px)}
.g-gallery img{width:100%;aspect-ratio:4/5;object-fit:cover}
.g-quote{text-align:center;padding-block:clamp(64px,8vw,120px)}
.g-quote blockquote{font:700 clamp(26px,2.8vw,46px)/1.25 var(--din);max-width:24em;margin-inline:auto}
.g-quote cite,.g-quotes cite{display:block;margin-top:20px;font-style:normal;color:var(--soft)}
.g-quotes blockquote{font:700 clamp(19px,1.5vw,23px)/1.4 var(--din)}
.g-story{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.g-story .photo{padding:clamp(12px,1.4vw,20px)}
.g-story .photo img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 25%}
.g-story .cell:last-child{display:flex;flex-direction:column;justify-content:center;gap:20px}
.g-story p{max-width:34em}
.g-book{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.g-book .cell:first-child{display:flex;flex-direction:column;gap:20px}

/* booking form */
form{display:grid;gap:18px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:18px}
label{display:block;font:700 16px/1.3 var(--din);margin-bottom:8px}
input,select,textarea{display:block;width:100%;min-height:52px;padding:12px 14px;border:2px solid #000;border-radius:0;background:#fff;font-size:18px}
textarea{min-height:120px;resize:vertical}
select{appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M2 2 C6 5 8 8 10 10 C12 7 15 5 18 2' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") right 16px center/18px no-repeat;padding-right:48px}
.wide{grid-column:1/-1}
.hp{position:absolute;left:-9999px}
form .btn{justify-self:start}

/* footer rows */
.g-foot{grid-template-columns:minmax(0,1.2fr) repeat(3,max-content) minmax(0,1.6fr)}
.g-foot .cell{padding-block:clamp(32px,3.4vw,52px)}
.g-foot .brand img{width:88px;height:88px;margin-bottom:18px}
.g-foot ul{list-style:none;display:grid;gap:12px}
.g-foot ul a{white-space:nowrap;font:700 14px/1.2 var(--din);text-transform:uppercase;letter-spacing:.12em;text-decoration:none}
.g-foot ul a:hover{text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:3px;text-underline-offset:6px}
.news p{margin-bottom:16px}
.news form{grid-template-columns:minmax(0,1fr) auto;gap:0}
.news input{border-right:0}
.news .btn{min-height:52px;padding-inline:22px;font-size:14px}
.g-legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:20px var(--cell);font-size:15px;color:var(--soft)}
.g-legal a{color:var(--ink)}

/* fixed bar that appears once the grid header scrolls away */
.mini{position:fixed;z-index:20;top:0;left:0;right:0;height:76px;display:flex;align-items:center;gap:clamp(20px,3vw,44px);padding:0 calc(var(--gutter) + 14px);background:#fff;transform:translateY(-110%);transition:transform .3s}
.mini.on{transform:none}
.mini .rule{position:absolute;left:0;right:0;bottom:-8px;height:16px}
.mini .home img{width:48px;height:48px}
.mini nav{display:flex;gap:clamp(20px,2.4vw,36px)}
.mini .bk{margin-left:auto}
.mini .burger{display:none}
@media (prefers-reduced-motion:reduce){.mini{transition:none}}

/* full-screen menu, drawn on the same grid */
.menu{position:fixed;inset:0;z-index:40;background:rgba(255,255,255,.88);overflow-y:auto}
.menu[hidden]{display:none}
.m-sheet{position:relative;background:#fff;margin-bottom:24px}
.m-sheet > .rule{position:absolute;left:0;right:0;bottom:-8px;height:16px}
.m-head{display:flex;align-items:center;justify-content:space-between;height:76px;padding:0 var(--gutter) 0 calc(var(--gutter) + 12px)}
.m-head .home img{width:48px;height:48px}
.m-body{display:flex;flex-direction:column;gap:24px;padding:12px calc(var(--gutter) + 12px) 32px}
.m-body ul{list-style:none;display:grid}
.m-link{display:flex;align-items:center;gap:16px;min-height:56px;text-decoration:none}
.m-label{display:block;font:700 17px/1.2 var(--din);text-transform:uppercase;letter-spacing:.14em}
.m-link:hover .m-label,.m-link[aria-current] .m-label{text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:3px;text-underline-offset:7px}
.m-small{display:flex;flex-wrap:wrap;gap:12px 28px}
.m-small a{font:700 13px/1.2 var(--din);text-transform:uppercase;letter-spacing:.14em;text-decoration:none;color:var(--soft)}

@media (max-width:1100px){
  .g-foot{grid-template-columns:repeat(3,minmax(0,1fr))}
  .g-foot .brand,.g-foot .news{grid-column:1/-1}
  .g-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  html{scroll-padding-top:84px}
  .g-header{height:76px}
  .g-header > *{padding-inline:12px}
  .g-header .bookcell{padding-right:12px}.g-header .burgercell{padding-inline:0}
  .home img{width:48px;height:48px}
  .navcell{display:none!important}
  .burgercell{display:flex}
  .mini nav{display:none}.mini .burger{display:grid}.mini .bk{margin-left:auto}
  .mini{padding-inline:calc(var(--gutter) + 12px) var(--gutter);gap:12px}
  .g-hero{height:calc(100svh - 76px - 136px);min-height:340px}
  .g-hero img{width:min(560px,78vw)}
  .three,.g-story,.g-book{grid-template-columns:minmax(0,1fr)}
  .g-ws{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  body{font-size:17px}
  .btn .long{display:none}.btn .short{display:inline}
  .bookcell .btn,.mini .bk{min-height:44px;padding-inline:18px}
  .g-hero{height:calc(100svh - 76px - 102px)}
  .strip{padding-block:28px}
  .track{gap:56px}
  .l-space{height:17px}.l-medio{height:25px}.l-ellas{height:34px}.l-tramp{height:20px}.l-mind{height:46px}
  .g-ws{grid-template-columns:minmax(0,1fr)}
  .g-ws img{aspect-ratio:4/3}
  .fields{grid-template-columns:1fr}
  form .btn{justify-self:stretch}
  .g-foot{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-foot .links-c{grid-column:1/-1}
  .g-foot .links-c ul{grid-auto-flow:column;justify-content:start;gap:28px}
}
a[href^="mailto"]{white-space:nowrap}
.g-prices .price b{font-size:clamp(36px,3.4vw,58px);margin:14px 0 12px}
.next{list-style:none;counter-reset:n;display:grid;gap:18px}
.next li{counter-increment:n;position:relative;padding-left:40px;color:var(--soft)}
.next li::before{content:counter(n);position:absolute;left:0;top:-2px;font:700 24px/1.3 var(--din);color:var(--ink)}
.next li b{display:block}
.next li b{color:var(--ink);font-family:var(--din)}
.help{display:inline-grid;place-items:center;width:24px;height:24px;margin-left:6px;border:2px solid #000;border-radius:50%;font:700 14px/1 var(--din);text-decoration:none;vertical-align:1px}
.help:hover{background:#000;color:#fff}

/* multi-page additions */
.g-hero img{width:min(700px,58vw)}
.g-title{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:20px 48px;align-items:end;padding-block:clamp(96px,12vw,200px) clamp(64px,7vw,120px)}
.g-title h1,.g-book2 h1{font:700 clamp(40px,5vw,84px)/1 var(--din);letter-spacing:-.01em}
.g-title p{font-size:clamp(20px,1.7vw,26px);line-height:1.4;max-width:30em}
.btn[aria-current]{background:var(--gold);color:#000}
.g-teaser a{display:block;text-decoration:none}
.g-teaser img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:filter .3s}
.g-teaser a:hover img{filter:brightness(.92)}
.g-teaser h3{margin:18px 0 6px}
.g-teaser a:hover h3{text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:3px;text-underline-offset:6px}
.g-cta{display:flex;justify-content:space-between;align-items:center;gap:24px 48px;flex-wrap:wrap;padding-block:clamp(48px,6vw,96px)}
.g-cta p{margin-top:12px}
.g-ws .more{display:inline-block;margin-top:12px;font:700 16px/1.3 var(--din);text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:3px;text-underline-offset:6px}
.g-ws img{margin-bottom:0}
.price b{display:block;font:700 clamp(48px,4.6vw,80px)/1 var(--din);margin-bottom:10px}
.g-two{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.g-two.flip{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.g-two .text{display:flex;flex-direction:column;justify-content:center;gap:18px}
.g-two .text p{max-width:34em}
.g-two .photo{padding:var(--cell)} /* photo edges line up with the text margins */
.g-two .photo img{width:100%;height:100%;min-height:360px;object-fit:cover}
.g-pics{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-pics .cell{padding:clamp(12px,1.4vw,20px)}
.g-pics button{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.g-pics img{width:100%;aspect-ratio:1/1;object-fit:cover;transition:filter .3s}
.g-pics button:hover img{filter:brightness(.9)}
.lb{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;border:0;padding:0;background:#fff}
.lb::backdrop{background:#fff}
.lb[open]{display:grid;grid-template-columns:72px minmax(0,1fr) 72px;grid-template-rows:72px minmax(0,1fr) 72px;place-items:center}
.lb img{grid-area:2/2;max-width:100%;max-height:100%;object-fit:contain}
.lb .burger{width:56px;height:56px}
.lb .x{grid-area:1/3}.lb .prev{grid-area:2/1}.lb .next{grid-area:2/3}
.g-book2{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.g-book2 .cell:first-child{display:flex;flex-direction:column;gap:24px}
.g-legal{gap:8px 28px}
.g-legal .r{display:flex;gap:28px;flex-wrap:wrap}
@media (max-width:900px){
  .g-title,.g-two,.g-two.flip,.g-book2{grid-template-columns:minmax(0,1fr)}
  .g-two .photo img{min-height:0;aspect-ratio:4/5;height:auto}
  .g-two .photo{order:-1}
  .g-hero img{width:min(560px,80vw)}
  .g-pics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lb[open]{grid-template-columns:52px minmax(0,1fr) 52px}
}
@media (max-width:600px){
  .g-cta .btn{width:100%;white-space:normal;text-align:center;line-height:1.35;padding-block:12px} /* long labels wrap inside the card */
  .g-pics .cell{padding:12px} /* room for the wobble, so row lines never touch a photo */
}
/* phone: tall title card, and stacked cards all one size with room to breathe */
@media (max-width:900px){
  .g-title{min-height:calc(100svh - 76px - 120px);align-content:center}
  .g-nums,.g-steps,.g-ws,.g-teaser,.g-prices{grid-auto-rows:1fr}
  :is(.g-nums,.g-quotes,.g-steps,.g-ws,.g-teaser,.g-prices,.g-two) > .cell{padding-block:40px}
  .sub-pics > :last-child:nth-child(odd){grid-column:1/-1} /* an odd last photo fills the row */
  .g-steps[data-split]{grid-auto-rows:auto} /* text boxes on the booking page: each as tall as its text, no blank space */
  .g-two .photo{padding:var(--cell)} /* a gap under the photo, so the line below never touches it */
}

/* Page openers: same anatomy as the home hero, a big centred statement over a moving strip */
.g-title{--band:clamp(130px,24svh,260px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(20px,2.2vw,32px);text-align:center;min-height:calc(100svh - 104px - var(--band));padding-block:32px}
.g-title h1{font-size:min(11.6vw,150px);line-height:.98;letter-spacing:-.02em}
.g-title p{max-width:32em}
.g-band{overflow:hidden;margin-inline:calc(var(--gutter) * -1);height:clamp(130px,24svh,260px)}
.g-band + .grow{margin-top:56px}
.reel{display:flex;gap:12px;width:max-content;height:100%;animation:scroll 90s linear infinite}
.reel img{flex:none;height:100%;width:auto;aspect-ratio:4/3;object-fit:cover}
@media (prefers-reduced-motion:reduce){.reel{animation:none}}
@media (max-width:900px){
  .g-title{min-height:calc(100svh - 76px - var(--band))}
  .g-title h1{font-size:16vw}
}

/* Page titles sit at the same height on every page, however long the intro is */
.g-title{justify-content:flex-start;padding-top:max(32px,calc((100svh - 104px - clamp(130px,24svh,260px)) * .22))}
@media (max-width:900px){.g-title{padding-top:max(32px,calc((100svh - 76px - clamp(130px,24svh,260px)) * .18))}}
/* Workshop cards: photo, then three groups, each lined up across the columns */
.g-ws{grid-auto-rows:auto}
.g-ws .cell{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:18px;align-content:start}
.g-ws .pic{display:block}
.g-ws .pic img{display:block}
.g-ws .pic:hover img{filter:brightness(.92)}
.g-ws h3{margin:0}
.g-ws h3 a:hover{text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:3px;text-underline-offset:6px}
.g-ws .best{margin-top:4px}
.g-ws .foot{display:grid;gap:12px;align-self:start}
.g-ws .time{color:var(--soft)}
.g-ws .acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
.g-ws .acts .btn{margin-left:auto}
@media (max-width:1100px){.g-ws .acts{flex-wrap:nowrap;gap:12px}.g-ws .acts .btn{padding-inline:20px}}
.g-ws .more{display:inline;margin:0;font:700 1em/1.6 DDIN,sans-serif}
/* Workshop sub pages: a short description, then photos */
.g-sub{margin-top:40px;display:grid;gap:12px}
.back{justify-self:start;margin-bottom:clamp(16px,2vw,28px);font:700 clamp(19px,1.5vw,22px)/1.4 var(--din);text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:3px;text-underline-offset:6px}
.back:hover{text-decoration-color:#000}
.sub-top{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,4vw,64px);align-items:center;margin-bottom:clamp(20px,2.4vw,36px)}
.sub-text{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.sub-text h1{font:700 clamp(40px,5vw,84px)/1 var(--din);letter-spacing:-.01em}
.sub-text .btn{max-width:100%;white-space:normal;text-align:center;line-height:1.3;padding-block:10px}
.sub-text .best{font-weight:700}
.zoom{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.zoom img{transition:filter .3s}
.zoom:hover img{filter:brightness(.9)}
.sub-hero,.sub-pics img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.sub-pics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:900px){.sub-top{grid-template-columns:minmax(0,1fr)}.sub-pics{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Workshops: past programmes, using the site's own heading, card and body sizes */
.g-past{display:grid;gap:clamp(28px,3.4vw,48px)}
.past-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,3.4vw,48px) clamp(32px,5vw,80px)}
.past{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(18px,2vw,28px);align-items:start}
.thumb,.past img{display:block;width:100%}
.past img{aspect-ratio:4/3;object-fit:cover}
.past h3{margin-bottom:8px}
.past .links{display:grid;justify-items:start;gap:8px;margin-top:14px}
.past .links a{font-weight:700;text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:3px;text-underline-offset:6px}
.past .links a:hover{text-decoration-color:#000}
@media (max-width:900px){.past-items{grid-template-columns:minmax(0,1fr)}}
.sub-text .link{font-weight:700}
.acts-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px}
.acts-row .more{font-weight:700;text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:3px;text-underline-offset:6px}
.g-sub-intro{gap:18px}
.g-sub-intro h1{font:700 clamp(40px,5vw,84px)/1 var(--din);letter-spacing:-.01em}
.g-sub-intro .lede{font-size:clamp(20px,1.7vw,26px);line-height:1.4;max-width:36em}
/* Shop: a boarded-up window */
.g-title.g-shop{min-height:0;padding-bottom:clamp(24px,3vw,48px)}
.shut{position:relative;width:min(100%,640px);margin:clamp(12px,2vw,28px) 0 0}
.shut img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.shut svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.shut .frame{fill:none;stroke:#000;stroke-width:5;stroke-linejoin:round}
.shut .board{fill:#fff;stroke:#000;stroke-width:4;stroke-linejoin:round}
.shut .nail{fill:var(--gold)}
.shut text{font:700 46px var(--din);fill:#000}
.g-ws.g-eg .cell{grid-row:span 3}
.g-ws .cell,#private,#programmes{scroll-margin-top:96px}
/* Stacked sections without dividers: rows fit their text, with one even gap */
@media (max-width:900px){
  .g-steps:not([data-split]){grid-auto-rows:auto;row-gap:clamp(28px,6vw,40px);padding-block:8px clamp(36px,8vw,48px)}
  .g-steps:not([data-split]) > .cell{padding-block:0}
}
/* Phones and tablets: page openers have the same space above the title as below the intro */
@media (max-width:900px){
  .g-title:not(.g-shop){min-height:0;padding-block:clamp(48px,9vw,72px)}
  .g-title.g-shop{padding-top:clamp(48px,9vw,72px)}
}
/* Book: the form is the page */
.g-bookit{margin-top:40px}
.g-bookit form .btn{min-width:206.6px} /* same width as the Book a workshop button */
.g-bookit textarea{min-height:88px}
.g-bookit [aria-invalid="true"]{box-shadow:inset 0 0 0 1px #000}
.field-error{margin-top:8px;font:700 15px/1.3 var(--din);color:#000}
.form-status{font-size:17px;line-height:1.5}
.g-bookit form .btn:disabled,.g-bookit form .btn:disabled:hover{background:#2b2b2b;color:#fff;cursor:progress}
.g-bookit .lede{font-size:clamp(20px,1.7vw,26px);line-height:1.4}
.g-bookit .price b{font-size:clamp(36px,3.4vw,58px);margin:0 0 12px}
/* Workshops: "Why it works", one headline over three photo-and-reason rows, no lines inside */
.g-reasons{display:flex;flex-direction:column;gap:clamp(28px,3.4vw,48px)}
.g-reasons h2{margin-bottom:clamp(4px,.8vw,12px)}
.reason{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);align-items:center}
.reason img{width:100%;aspect-ratio:4/3;object-fit:cover}
.reason h3{margin-bottom:12px}
.reason p{max-width:34em}
@media (max-width:600px){
  .reason{grid-template-columns:minmax(0,1fr);gap:18px}
}

.g-intro p + p{margin-top:.6em}
/* Home: the five workshops, mostly photo, each row lined up across the columns */
.g-five{--inner:clamp(12px,1.4vw,20px);grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-rows:auto;padding-inline:calc(var(--cell) - var(--inner))}
.g-five .cell{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;padding:var(--inner)}
.g-five .cell a{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:8px}
.g-five img{aspect-ratio:4/5;margin-bottom:6px}
.g-five h3{margin:0}
@media (max-width:1100px){.g-five{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.g-five{grid-template-columns:repeat(2,minmax(0,1fr))}.g-five .cell:first-child{grid-column:1/-1}.g-five .cell:first-child img{aspect-ratio:4/3}}
/* Tap targets: at least 24px high for standalone links */
.g-foot ul{gap:4px}
.g-foot ul a,.g-legal a,.m-small a{display:inline-block;padding-block:4px}
.g-ws h3 a,.past .links a{display:inline-block;padding-block:2px}
p > a.link:only-child{display:inline-block;padding-block:4px}
.nobr{white-space:nowrap} /* a link keeps its punctuation on the same line */
img{height:auto}
.reel img,.g-two .photo img{height:100%}
@media (max-width:600px){.g-foot ul a{white-space:normal}.g-foot .links-c ul{display:flex;flex-wrap:wrap;gap:4px 28px}}
.g-legal{align-items:center}
.g-legal .credit{white-space:nowrap}
@media (max-width:600px){.g-legal .credit{display:block}}
/* FAQs: one question size, one answer size */
.g-faq{display:grid;gap:clamp(28px,3.4vw,48px)}
.g-faq h1{font:700 clamp(40px,5vw,84px)/1 var(--din);letter-spacing:-.01em}
.faq-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,3.4vw,48px) clamp(32px,5vw,80px)}
.faq-list h2{font:700 clamp(18px,1.4vw,21px)/1.25 var(--din);text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px}
@media (max-width:760px){.faq-list{grid-template-columns:minmax(0,1fr)}}
/* Programme pages */
.sub-links{display:flex;flex-wrap:wrap;gap:8px 24px}
.sub-film{margin-top:clamp(16px,2vw,28px)}
.sub-video{display:block;width:100%;height:auto;background:#000;margin-bottom:clamp(16px,2vw,28px)}
.g-duo{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){.g-duo{grid-template-columns:minmax(0,1fr)}}
/* Client logos: seven logos, wide enough that none shows twice, fading out at both edges */
.logos{margin-inline:calc(var(--gutter) * -1)}
.strip{-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.track{gap:clamp(64px,10vw,260px);animation-duration:70s}
.l-allia{height:34px}.l-seuk{height:64px}
@media (max-width:900px){.l-allia{height:26px}.l-seuk{height:50px}}
/* Agathe's feedback, Nov 2026 */
/* calmer type on laptop screens */
body{font-size:18px}
h2{font-size:clamp(28px,2.7vw,46px)}
.g-intro p{font-size:clamp(21px,1.85vw,30px)}
.g-nums b{font-size:clamp(48px,4.4vw,76px)}
.g-quote blockquote{font-size:clamp(24px,2.3vw,38px)}
/* home hero: smaller logo with the tagline under it */
.g-hero{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(20px,2.4vw,36px);text-align:center}
.g-hero img{width:min(440px,38vw)}
.tagline{font:700 clamp(19px,1.6vw,26px)/1.35 var(--din);max-width:24em}
@media (max-width:900px){.g-hero img{width:min(400px,70vw)}}
/* header Book button: black on white, framed in gold */
.bk,.mini .bk{background:#fff;color:#000;box-shadow:inset 0 0 0 3px var(--gold)}
/* moving photo strips get room above the next row's line */
.g-band + .grow{margin-top:0}
.g-band{margin-bottom:clamp(48px,5vw,80px)}
/* workshop cards: Best for, description and length each read differently */
.g-ws .best,.sub-text .best,.g-five .soft{font:italic 700 1em/1.4 var(--din);color:var(--ink)}
.g-ws .cell > .soft{color:#555}
.g-ws .time,.sub-text .best + .soft{font:700 1em/1.4 var(--din);color:var(--ink)}
/* Tailored workshops: one full row after the six workshops, photo lined up with the first column */
.g-ws{--cols:3}
.g-ws .wide-card{grid-column:1/-1;grid-row:auto;grid-template-rows:none;grid-template-columns:calc((100% + 2 * var(--cell)) / var(--cols) - 2 * var(--cell)) minmax(0,1fr);column-gap:calc(2 * var(--cell));align-items:center}
.g-ws .wide-card .pic{grid-row:1/span 3}
.g-ws .wide-card .pic img{aspect-ratio:4/3}
.g-ws .wide-card > :not(.pic){grid-column:2}
@media (max-width:900px){.g-ws{--cols:2}}
@media (max-width:600px){.g-ws .wide-card{grid-template-columns:minmax(0,1fr)}.g-ws .wide-card > *{grid-column:1!important;grid-row:auto!important}}
/* home: six workshops */
.g-five{grid-template-columns:repeat(6,minmax(0,1fr))}
@media (max-width:1100px){.g-five{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.g-five{grid-template-columns:repeat(2,minmax(0,1fr))}.g-five .cell:first-child{grid-column:auto}.g-five .cell:first-child img{aspect-ratio:4/5}}
/* closing banner: two cells, the headline and button, then a cell filled edge to edge with Agathe's wonky grid */
.g-cta2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;gap:0;padding:0}
.g-cta2 > .cell{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:clamp(20px,2.4vw,32px);padding-block:clamp(48px,6vw,96px)}
.cta-grid{position:relative;overflow:hidden}
.cta-grid svg.lines path{stroke-width:3}
@media (max-width:900px){.g-cta2{grid-template-columns:minmax(0,1fr)}.cta-grid{display:none}}
.tagline{max-width:none}.tagline span{display:block}
@media (max-width:600px){.tagline span{display:inline}}
/* home: "Pick your poison" leads to the workshop list */
.head-link{display:inline-flex;align-items:center;gap:.35em;text-decoration:none}
.head-link .arrow{flex:none;width:1.2em;height:.62em;overflow:visible;transition:transform .3s ease}
.head-link .arrow path{fill:none;stroke:currentColor;stroke-width:4.2;stroke-linecap:round;stroke-linejoin:round}
.head-link:hover .t,.head-link:focus-visible .t{text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:3px;text-underline-offset:8px}
.head-link:hover .arrow{transform:translateX(8px)}
@media (prefers-reduced-motion:reduce){.head-link .arrow{transition:none}}
/* Pick your poison: same air below the descriptions as above the heading */
.g-five{padding-bottom:calc(var(--cell) - var(--inner) + 4px)}
/* footer link columns never narrower than their longest link */
@media (max-width:1100px){.g-foot{grid-template-columns:repeat(3,minmax(max-content,1fr))}}
@media (max-width:600px){.g-foot{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* tablets: the three link cards and the three stats stay side by side */
@media (min-width:700px) and (max-width:900px){.g-teaser.three,.g-nums{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* FAQs: one left-aligned column of questions that open and close */
.g-faq{max-width:none}
.faq-acc{display:grid;max-width:880px}
.faq-acc details{padding-block:4px}
.faq-acc summary{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:72px;padding-block:14px;cursor:pointer;list-style:none}
.faq-acc summary::-webkit-details-marker{display:none}
.faq-acc summary h2{font:700 clamp(20px,1.6vw,24px)/1.3 var(--din);letter-spacing:0;text-transform:none}
.faq-acc summary:hover h2,.faq-acc summary:focus-visible h2{text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:3px;text-underline-offset:6px}
.faq-acc .pm{flex:none;width:28px;height:28px;overflow:visible}
.faq-acc .pm path{fill:none;stroke:#000;stroke-width:2.8;stroke-linecap:round;transition:opacity .25s ease}
.faq-acc details[open] .pm .v{opacity:0}
.faq-acc .ans{padding:2px 52px 24px 0}
.faq-acc .ans p{max-width:40em;color:var(--ink)}
.faq-acc .rule{display:block;position:relative;height:16px}
@media (prefers-reduced-motion:reduce){.faq-acc .pm path{transition:none}}
.faq-acc .rule svg.lines path{stroke-width:2.2}
.faq-acc .pm path{stroke-width:3.4}
.faq-acc .more-link{margin-top:12px}
/* Agathe's second round, Nov 2026 */
/* header Book button: white on gold on hover */
a.btn.bk:hover{background:var(--gold);color:#fff}
/* home intro: the social enterprise badge beside the text, the good it does marked in gold */
.g-intro{display:flex;align-items:center;gap:clamp(32px,5vw,96px)}
.g-intro .txt{flex:1;min-width:0}
.g-intro .seuk{flex:none;width:clamp(120px,11vw,180px);height:auto}
.g-intro mark{color:inherit;background:linear-gradient(transparent 56%,rgba(191,148,4,.5) 56%,rgba(191,148,4,.5) 94%,transparent 94%);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-inline:.06em}
@media (max-width:700px){.g-intro{flex-direction:column;align-items:flex-start;gap:28px}.g-intro .seuk{width:104px}}
/* Agathe's grid behind white cards with a hand-drawn frame: closing banners and the home numbers */
.on-grid{position:relative;overflow:hidden;padding:clamp(56px,6vw,104px) clamp(28px,6vw,112px)}
.on-grid .card{position:relative;z-index:1;background:#fff}
.on-grid .card > svg.lines path{stroke-width:4.2px}
.g-cta.on-grid{display:block}
.g-cta.on-grid .card{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(20px,2.4vw,32px);width:max-content;max-width:100%;padding:clamp(32px,4vw,64px)}
.g-cta.on-grid .call{margin-top:-4px}
.g-nums .cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4.4vw,72px)}
.g-nums .card{padding:clamp(28px,3vw,48px)}
@media (max-width:700px){
  .on-grid{padding:48px 36px}
  .g-cta.on-grid .card{width:100%}
}
@media (max-width:900px){.g-nums .cards{grid-template-columns:minmax(0,1fr);gap:36px}} /* stat cards stack until there is room for three */
/* privacy notice: one readable column */
.g-privacy .legal{max-width:46em}
.g-privacy .legal h2{font:700 clamp(22px,1.8vw,28px)/1.25 var(--din);margin:1.8em 0 .5em}
.g-privacy .legal h3{margin:1.4em 0 .4em}
.g-privacy .legal p + p,.g-privacy .legal ul + p,.g-privacy .legal p + ul{margin-top:.8em}
.g-privacy .legal ul{padding-left:1.2em}
.g-privacy .legal li + li{margin-top:.3em}
/* Agathe's second round, later notes */
/* main text: Barlow Semi Condensed, the DIN-style tagline look at a regular weight, less round than D-DIN */
body{font-family:BarlowSC,DDIN,sans-serif}
/* a light, even grade so the phone photos sit together and don't fall flat */
:root{--grade:contrast(1.08) saturate(1.1)}
img:is([src*="img/photos/"],[src*="img/gallery/"],[src*="img/strip/"],[src*="img/workshops/"],[src*="img/programmes/"]){filter:var(--grade)}
.g-ws a:hover img,.g-teaser a:hover img,.g-ws .pic:hover img{filter:var(--grade) brightness(.92)}
.g-pics button:hover img,.zoom:hover img{filter:var(--grade) brightness(.9)}
/* Final cosmetic pass (QA in Safari and Chrome, 360 to 1920px) */
/* no single word or stray punctuation alone on a last line */
p,li,h1,h2,h3,blockquote,figcaption,summary{text-wrap:pretty}
/* gold underlines run unbroken under descenders, like a pen line */
a{text-decoration-skip-ink:none}
/* the help button doesn't make its label taller, so selects side by side line up */
.help{margin-block:-4px}
/* a standalone link keeps its bigger tap area without loosening the line spacing */
p > a.link:only-child{margin-block:-4px}
/* lightbox: the close button's focus ring sits inside the screen */
.lb button:focus-visible{outline-offset:-6px}
/* home teaser: titles take two lines' room, so the Best for lines line up */
.g-five h3{min-height:2.5em}
/* the film poster gets the same light grade as the photos */
video[poster*="img/programmes/"]{filter:var(--grade)}
/* How does it work: headings share a row, so the text starts level */
@media (min-width:901px){.g-steps:not([data-split]){grid-template-rows:auto auto}.g-steps:not([data-split]) > .cell{display:grid;grid-row:span 2;grid-template-rows:subgrid;align-content:start}.g-steps:not([data-split]) h3{align-self:end}}
@media (max-width:900px){.g-eg{grid-auto-rows:auto}}
/* small phones: the closing card's button stays on one line, and the footer lists never wrap */
@media (max-width:420px){
  .on-grid{padding:44px 26px}
  .g-cta.on-grid .card{padding:28px 24px}
  .g-cta .btn{padding-inline:16px;letter-spacing:.1em}
}
@media (max-width:600px){
  .g-foot{grid-template-columns:minmax(0,1fr)}
  .g-foot ul a{white-space:nowrap}
  .g-foot .links-c ul{gap:4px 22px}
}
@media (max-width:400px){.g-foot ul a{font-size:13px;letter-spacing:.1em}}