:root{--ink:#18201d;--muted:#59635f;--paper:#f4f2ec;--white:#fff;--line:#c9ccc6;--brand:#1d5b48;--brand-deep:#143e32;--warm:#d9d0bf;--danger:#a02d24;--max:1180px;--pad:clamp(20px,4vw,56px)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{min-height:100vh;margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.65 Manrope,Arial,sans-serif;-webkit-font-smoothing:antialiased;display:flex;flex-direction:column}
body>main{flex:1}
body::selection{background:var(--brand);color:#fff}
a{color:inherit;text-underline-offset:.24em}
img{display:block;max-width:100%;object-fit:cover}
button,input,select,textarea{font:inherit}
button,a,input,select,textarea{outline-offset:4px}
:focus-visible{outline:3px solid var(--sb-focus,#dd7f34)}
h1,h2,h3,p{margin-top:0}
h1,h2{font-family:Newsreader,Georgia,serif;font-weight:600;letter-spacing:-.025em;text-wrap:balance}
h1{font-size:clamp(2.65rem,5.8vw,5.6rem);line-height:.98}
h2{font-size:clamp(2.15rem,4vw,4.3rem);line-height:1.03}
h3{font-size:1.08rem;line-height:1.35}
p{max-width:72ch}
.site-header{position:relative;z-index:30;background:var(--paper);border-bottom:1px solid var(--line)}
.announcement{min-height:38px;padding:8px var(--pad);display:flex;justify-content:center;gap:24px;align-items:center;background:var(--ink);color:#fff;font-size:.78rem;letter-spacing:.01em;text-align:center}
.announcement a{font-weight:700;text-decoration-color:var(--sb-on-dark,#75a995)}
.nav-shell{width:min(var(--max),calc(100% - 2*var(--pad)));min-height:74px;margin:auto;display:grid;grid-template-columns:minmax(190px,1fr) auto auto;gap:28px;align-items:center}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:700;min-width:0}.brand>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brand img{width:auto;height:40px}.brand-mark{width:42px;height:42px;display:grid;place-items:center;background:var(--brand);color:#fff;font-weight:700;letter-spacing:-.05em}
#primaryNav{display:flex;gap:26px;align-items:center}#primaryNav a,.languages a{font-size:.87rem;text-decoration:none;font-weight:600}#primaryNav a:hover,.languages a:hover{color:var(--brand)}
.languages{display:flex;gap:7px;align-items:center}.menu-toggle{display:none;border:0;background:none;color:var(--ink);font-weight:700}
.hero{display:grid;grid-template-columns:minmax(340px,42%) minmax(0,58%);min-height:min(720px,calc(100vh - 112px));border-bottom:1px solid var(--line);background:#e7e3da}
.hero-copy{padding:clamp(44px,7vw,92px) var(--pad);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;background:var(--paper)}
.hero-name{margin-bottom:32px;font-size:.74rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--brand)}
.hero h1{max-width:9.3ch;margin-bottom:24px;font-size:clamp(3rem,5.6vw,5.4rem)}.hero-copy>p:not(.hero-name){margin-bottom:30px;max-width:51ch;color:var(--muted)}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}.button{display:inline-flex;min-height:48px;align-items:center;justify-content:center;padding:12px 19px;border:1px solid var(--ink);text-decoration:none;font-size:.88rem;font-weight:700;cursor:pointer;transition:background .18s ease,color .18s ease,transform .18s ease}.button:hover{transform:translateY(-1px)}.button.primary{background:var(--brand);border-color:var(--brand);color:#fff}.button.primary:hover{background:var(--brand-deep)}.button.secondary{background:transparent}.button.secondary:hover{background:var(--ink);color:#fff}
.hero-media{position:relative;margin:0;min-height:420px;overflow:hidden}.hero-media img{width:100%;height:100%;object-position:center 52%;filter:none!important;mix-blend-mode:normal!important}.hero-media::before,.hero-media::after{content:none!important}.hero-media figcaption{position:absolute;right:16px;bottom:14px;padding:5px 8px;background:#fff;color:var(--ink);font-size:.7rem;font-weight:700}
.section{width:min(var(--max),calc(100% - 2*var(--pad)));margin:auto;padding:clamp(72px,9vw,124px) 0;border-bottom:1px solid var(--line)}
.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:48px}.section-heading h2{max-width:12ch;margin-bottom:0}.section-heading p{max-width:44ch;margin-bottom:0;color:var(--muted)}
.story{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(40px,9vw,120px)}.story h2{max-width:11ch;margin:0}.story>div:last-child{padding-top:18px}.story p{color:var(--muted);font-size:1.06rem}
.text-link{display:inline-block;margin-top:14px;font-weight:700;text-decoration-thickness:1px}
.project-grid{display:grid;grid-template-columns:1.35fr .82fr;gap:1px;background:var(--line);border:1px solid var(--line)}.project-card{background:var(--paper)}.project-card:first-child{grid-row:span 2}.project-media{display:block;aspect-ratio:16/9;overflow:hidden}.project-card:first-child .project-media{aspect-ratio:16/10}.project-media img{width:100%;height:100%;transition:transform .35s cubic-bezier(.16,1,.3,1)}.project-media:hover img{transform:scale(1.025)}.project-card-copy{padding:24px}.project-card-copy h3{font-family:Newsreader,Georgia,serif;font-size:1.65rem;margin-bottom:9px}.project-card-copy>p:not(.project-label){color:var(--muted);font-size:.91rem}.project-label{margin-bottom:8px;color:var(--brand);font-size:.69rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase}.project-meta{display:flex;justify-content:space-between;gap:16px;padding-top:16px;border-top:1px solid var(--line);color:var(--muted);font-size:.73rem}
.principles{display:grid;grid-template-columns:1fr 1.1fr .9fr;border-top:1px solid var(--line)}.principles article{padding:26px 34px 0 0;border-right:1px solid var(--line)}.principles article+article{padding-left:34px}.principles article:last-child{border-right:0}.principles p{color:var(--muted)}
.process{display:grid;grid-template-columns:.75fr 1.25fr;gap:clamp(40px,9vw,120px)}.process .section-heading{margin:0;display:block}.process ol{list-style:none;margin:0;padding:0}.process li{display:grid;grid-template-columns:42px 1fr;gap:24px;padding:22px 0;border-top:1px solid var(--line)}.process li:last-child{border-bottom:1px solid var(--line)}.process li>span{font-variant-numeric:tabular-nums;font-weight:700;color:var(--brand)}.process h3{margin-bottom:5px}.process p{margin:0;color:var(--muted)}
.studio{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(38px,7vw,88px);align-items:center}.studio figure{margin:0}.studio figure img{width:100%;aspect-ratio:4/3}.studio h2{max-width:9ch}.studio p{color:var(--muted)}
.visit{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,9vw,120px)}.visit h2{max-width:10ch}.visit dl{margin:0}.visit dl>div{display:grid;grid-template-columns:130px 1fr;gap:18px;padding:17px 0;border-top:1px solid var(--line)}.visit dl>div:last-child{border-bottom:1px solid var(--line)}.visit dt{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}.visit dd{margin:0}.visit .sb-location-map--embedded{grid-column:1/-1;width:100%;margin:48px 0 0}.visit .sb-location-map__inner{width:100%}
.quote{text-align:center}.quote blockquote{max-width:26ch;margin:0 auto 20px;font:500 clamp(2rem,4.2vw,4.2rem)/1.09 Newsreader,Georgia,serif;letter-spacing:-.025em}.quote>p{margin:auto;color:var(--muted);font-size:.78rem}
.closing{display:grid;grid-template-columns:1fr 1fr;background:var(--ink);color:#fff}.closing>div{padding:clamp(50px,7vw,96px) var(--pad);display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.closing h2{max-width:10ch}.closing p{color:#d5dad7}.closing img{width:100%;height:100%;max-height:620px;filter:none;mix-blend-mode:normal}.closing::before,.closing::after{content:none!important}
.site-footer{background:#111815;color:#fff;padding:clamp(48px,6vw,78px) var(--pad);display:grid;grid-template-columns:1.4fr .6fr 1fr;gap:44px}.site-footer h2{font:600 .76rem/1.2 Manrope,sans-serif;text-transform:uppercase;letter-spacing:.08em;color:#95a39e}.site-footer a{display:block;margin-bottom:8px;text-decoration:none}.footer-brand{font:600 1.55rem/1 Newsreader,Georgia,serif}.site-footer p{color:#b9c2be}.footer-note{grid-column:1/-1;padding-top:28px;border-top:1px solid #38433f;font-size:.72rem}
.inner-main{width:min(var(--max),calc(100% - 2*var(--pad)));margin:auto;padding-bottom:clamp(72px,9vw,120px)}.page-intro{display:grid;grid-template-columns:1.2fr .8fr;gap:60px;padding:clamp(66px,8vw,112px) 0;border-bottom:1px solid var(--line)}.page-intro h1{max-width:11ch;margin:0}.page-intro p{align-self:end;color:var(--muted);font-size:1.04rem}
.catalogue{padding-top:44px}.catalogue-tools{display:grid;grid-template-columns:1fr 280px;gap:20px;margin-bottom:34px}.catalogue-tools label,.project-form label{display:grid;gap:8px;font-size:.77rem;font-weight:700}.catalogue-tools input,.catalogue-tools select,.project-form input,.project-form select,.project-form textarea{width:100%;border:1px solid #9ca39f;background:#fff;color:var(--ink);padding:13px 14px;border-radius:0}.catalogue .project-grid{grid-template-columns:repeat(2,1fr)}.catalogue .project-card:first-child{grid-row:auto}.pagination{display:flex;justify-content:center;gap:8px;margin-top:34px}.pagination button{min-width:42px;height:42px;border:1px solid var(--line);background:transparent}.pagination button[aria-current="page"]{background:var(--ink);color:#fff}.catalogue-status{text-align:center;margin:14px auto 0;color:var(--muted);font-size:.82rem}.empty-state{grid-column:1/-1;padding:54px;background:#fff;text-align:center}.empty-state p{margin:auto;color:var(--muted)}
.project-detail{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(40px,7vw,88px);padding:clamp(64px,8vw,110px) 0}.project-detail figure{margin:0}.project-detail figure img{width:100%;aspect-ratio:4/3}.project-detail h1{font-size:clamp(2.6rem,5vw,5rem);max-width:10ch}.project-detail>div>p:not(.project-label,.legal-note){color:var(--muted);font-size:1.04rem}.project-detail dl>div{display:grid;grid-template-columns:130px 1fr;gap:16px;padding:12px 0;border-top:1px solid var(--line)}.project-detail dt{color:var(--muted);font-size:.78rem}.project-detail dd{margin:0}.legal-note{max-width:62ch;color:var(--muted);font-size:.76rem}.project-detail .button{margin-top:18px}
.about-lead{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(40px,7vw,90px);padding:clamp(64px,8vw,110px) 0;border-bottom:1px solid var(--line);align-items:center}.about-lead h1{max-width:9ch}.about-lead p{color:var(--muted)}.about-lead figure,.about-site figure{margin:0}.about-lead img,.about-site img{width:100%;aspect-ratio:4/3}.about-values{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);margin:70px 0}.about-values article{padding:clamp(34px,5vw,64px);background:#fff}.about-values h2{font-size:clamp(2rem,3.4vw,3.5rem)}.about-values p{color:var(--muted)}.about-site{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,90px);align-items:center}.about-site h2{max-width:10ch}.about-site p{color:var(--muted)}
.contact-lead{display:grid;grid-template-columns:1fr 1fr;gap:clamp(50px,9vw,130px);padding:clamp(64px,8vw,110px) 0}.contact-lead h1{max-width:10ch}.contact-lead>div>p{color:var(--muted);font-size:1.04rem}.contact-lead dl{margin:0}.contact-lead dl>div{padding:18px 0;border-top:1px solid var(--line)}.contact-lead dt{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}.contact-lead dd{margin:6px 0 0}.contact-lead .sb-location-map--embedded{grid-column:1/-1;width:100%;margin:24px 0 0}.contact-lead .sb-location-map__inner{width:100%}
.request-main{max-width:1060px}.project-form{margin:50px auto 0;padding:clamp(28px,5vw,58px);background:#fff;border:1px solid var(--line)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.project-form .full{grid-column:1/-1}.project-form .check{display:flex;grid-column:1/-1;align-items:flex-start;gap:12px;font-size:.9rem;font-weight:500}.project-form .check input{width:20px;height:20px;margin-top:2px}.project-form textarea{resize:vertical;min-height:150px}.project-form button[disabled]{opacity:.55;cursor:wait}.form-status{margin:16px 0 0;min-height:1.6em;font-weight:600}.form-status.error{color:var(--danger)}.form-status.success{color:var(--brand)}
@media(max-width:900px){.nav-shell{grid-template-columns:1fr auto auto}.menu-toggle{display:block}#primaryNav{position:absolute;top:112px;left:0;right:0;padding:20px var(--pad);display:none;flex-direction:column;align-items:flex-start;background:var(--paper);border-bottom:1px solid var(--line)}#primaryNav.open{display:flex}.hero{grid-template-columns:1fr 1.18fr;min-height:620px}.hero-copy{padding:38px 30px}.hero h1{font-size:clamp(2.6rem,6vw,4.4rem)}.section-heading,.story,.process,.visit,.page-intro,.project-detail,.about-lead,.about-site,.contact-lead{grid-template-columns:1fr}.project-grid{grid-template-columns:1fr 1fr}.project-card:first-child{grid-row:auto;grid-column:1/-1}.studio{grid-template-columns:1fr}.principles{grid-template-columns:1fr}.principles article,.principles article+article{padding:26px 0;border-right:0;border-bottom:1px solid var(--line)}.site-footer{grid-template-columns:1fr 1fr}.site-footer>div:first-child{grid-column:1/-1}.page-intro{gap:24px}.project-detail{gap:32px}.contact-lead .sb-location-map--embedded{grid-column:auto}.catalogue .project-grid{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.announcement{justify-content:space-between;padding:7px 14px;font-size:.68rem}.announcement span{max-width:68%}.nav-shell{width:calc(100% - 28px);min-height:62px;gap:12px}.brand-mark{width:36px;height:36px}.brand>span:last-child{max-width:120px}.languages{font-size:.8rem}#primaryNav{top:100px}.hero{grid-template-columns:1fr;grid-template-rows:minmax(245px,42vh) auto;min-height:0}.hero-media{grid-row:1;min-height:245px}.hero-media img{object-position:center 55%}.hero-copy{grid-row:2;padding:28px 20px 34px}.hero-name{display:none}.hero h1{max-width:12ch;font-size:clamp(2.35rem,10.5vw,3.25rem);margin-bottom:13px}.hero-copy>p:not(.hero-name){font-size:.9rem;line-height:1.5;margin-bottom:18px}.hero-actions{width:100%}.hero-actions .button{flex:1;min-width:150px}.section{width:calc(100% - 28px);padding:62px 0}.section-heading{display:block;margin-bottom:30px}.section-heading h2{margin-bottom:16px}.story{gap:16px}.story>div:last-child{padding-top:0}.project-grid,.catalogue .project-grid{grid-template-columns:1fr}.project-card:first-child{grid-column:auto}.project-card-copy{padding:20px}.process{gap:20px}.studio{gap:28px}.studio>div{order:-1}.visit{gap:24px}.visit dl>div{grid-template-columns:1fr;gap:4px}.closing{grid-template-columns:1fr}.closing img{height:300px}.site-footer{grid-template-columns:1fr;gap:30px}.site-footer>div:first-child,.footer-note{grid-column:auto}.inner-main{width:calc(100% - 28px)}.page-intro{padding:54px 0}.page-intro h1{font-size:clamp(2.5rem,12vw,3.7rem)}.catalogue-tools{grid-template-columns:1fr}.project-detail,.about-lead,.contact-lead{padding:54px 0}.project-detail h1{font-size:clamp(2.5rem,11vw,3.8rem)}.about-values{grid-template-columns:1fr;margin:48px 0}.form-grid{grid-template-columns:1fr}.project-form .full,.project-form .check{grid-column:auto}.project-form{margin-top:32px;padding:22px 16px}}
@media(max-width:420px){.announcement a{white-space:nowrap}.brand>span:last-child{display:none}.hero-actions{display:grid;grid-template-columns:1fr 1fr}.hero-actions .button{min-width:0;padding:10px 8px;font-size:.76rem}.hero{grid-template-rows:230px auto}.hero-media{min-height:230px}.hero-copy{padding-top:24px}.project-meta{display:grid;gap:4px}.site-footer{padding-left:20px;padding-right:20px}body.atelier-terrains>.bbfaq-bubble{position:static;left:auto;bottom:auto;align-self:flex-start;flex:0 0 54px;margin:20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.project-media img,.button{transition:none}}
/* Hero on the photograph (2026-09-22). The photograph runs edge to edge and
   the words sit on it in their own solid block, on every screen: never beside
   it, above it or under it. */
.hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);width:100%;max-width:none;min-height:clamp(560px,84vh,860px);padding:clamp(28px,4vw,56px) max(var(--pad,20px),calc((100vw - 1180px)/2));overflow:hidden;isolation:isolate;border:0;background:var(--sb-deep,#1c2220)}
.hero-media{position:absolute;inset:0;grid-row:auto;grid-column:auto;margin:0;width:auto;height:auto;min-height:0;z-index:0;overflow:hidden}
.hero-media img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.hero .hero-copy{position:relative;z-index:1;grid-row:auto;grid-column:auto;width:auto;max-width:min(600px,100%);margin:0;display:block;min-height:0}
.hero .hero-copy h1{color:inherit;text-wrap:balance}
.hero .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin:0}
.hero .hero-actions .button{flex:0 1 auto;min-width:0}
/* A heading keeps its line directly under it, never parked at the far right. */
.section-heading{display:block}
.section-heading h2{max-width:22ch}
.section-heading p{max-width:60ch;margin-top:14px}

.hero{padding-bottom:0}
.hero .hero-copy{align-self:end;justify-self:start;max-width:min(580px,100%);padding:clamp(28px,3.2vw,48px) clamp(26px,3.2vw,48px) clamp(30px,3.4vw,50px);background:var(--paper);color:var(--ink)}
.hero h1{max-width:11ch;margin:0 0 18px;font-size:clamp(2.7rem,4.6vw,4.5rem);line-height:1.02}
.hero .hero-copy>p{max-width:42ch;margin:0 0 26px;color:var(--muted)}
.hero-media img{object-position:62% 55%}
/* The customer's colours */
.announcement{background:var(--sb-deep,var(--ink))}
.site-footer{background:var(--sb-deep,#111815)}
.site-footer h2{color:rgba(255,255,255,.72)}
@media (max-width:720px){
.hero{padding:14px 14px 0}
.hero h1{font-size:clamp(2.3rem,10.5vw,3.2rem)}
.hero-media img{object-position:58% 50%}
}

@media (max-width:720px){
.hero{min-height:clamp(560px,88svh,780px)}
.hero .hero-copy{justify-self:stretch;max-width:none;padding:22px 20px 24px}
.hero .hero-copy h1{max-width:none;margin-bottom:12px}
.hero .hero-copy>p{font-size:15.5px;line-height:1.45;margin-bottom:16px}
.hero .hero-actions{display:grid;grid-template-columns:1fr;gap:8px}
.hero .hero-actions .button{width:100%;min-height:48px}
}

/* Hero treatment (2026-09-22): light haze. No card: a haze of the page's paper colour comes in from the left of the photograph and the words sit on it in dark ink. One of the four Architecture heroes, each its own (Tumi: "a mixture"). */
.hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,rgba(244,242,236,.97) 0%,rgba(244,242,236,.93) 36%,rgba(244,242,236,.66) 52%,rgba(244,242,236,0) 70%)}
.hero .hero-copy{align-self:center;background:none;padding:0}
.hero .hero-copy>p{color:var(--ink)}
@media (max-width:720px){
.hero::after{background:linear-gradient(0deg,rgba(244,242,236,.98) 0%,rgba(244,242,236,.93) 52%,rgba(244,242,236,.6) 72%,rgba(244,242,236,0) 92%)}
.hero .hero-copy{align-self:end;padding:0 4px 8px}
}

/* Phones (2026-09-24): form fields read at 16px, so an iPhone does not
   zoom into the field a customer taps. :not(#_) lifts the rule over the
   design's own field rules without !important. */
@media (max-width: 960px) {
  input:not([type=checkbox],[type=radio],[type=file],[type=submit],[type=button],[type=reset],[type=image],[type=range],[type=color],[type=hidden]):not(#_),
  select:not(#_),
  textarea:not(#_) { font-size: 16px; }
}

/* >>> standard 2026-09-25 */
/* The finished sites' standard (goal 2026-09-25), on the architecture
   designs beside Mango Line Studio: sections 40 to 68px a side (40px on a
   phone), headings spread across their side of a band, the menu on one row
   on a laptop however many pages it lists, no lines drawn between
   sections, the engines in the design's own look, photos keeping their
   frame inside both editors. */
:root body .section{padding-top:clamp(40px,5vw,68px);padding-bottom:clamp(40px,5vw,68px)}
:root body .section.eng-sec{padding-top:clamp(36px,4vw,56px);padding-bottom:clamp(36px,4vw,56px)}
:root body [data-section="map"]{margin-bottom:clamp(40px,5vw,68px)}
:root body .inner-main{padding-top:clamp(40px,5vw,68px);padding-bottom:clamp(40px,5vw,68px)}
:root body .page-intro{padding-bottom:clamp(28px,3vw,40px)}
:root body .eng-page-intro+.eng-sec{padding-top:clamp(28px,3vw,40px)}
@media(max-width:640px){
  :root body .section,:root body .section.eng-sec{padding-top:40px;padding-bottom:40px}
  :root body [data-section="map"]{margin-bottom:40px}
  :root body .inner-main{padding-top:40px;padding-bottom:40px}
}
/* no lines drawn between sections: the room between them separates them */
:root body .section{border-bottom:0}
:root body :is(.visit,.quote){border-top:0}
/* headings spread across their side of the band */
:root body :is(h1,h2,.story h2,.visit h2,.studio h2,.closing h2,.section-heading h2,.eng-head h2,.page-intro h1,.about-lead h1,.about-site h2,.contact-lead h1,.process h2){max-width:none}
:root body .eng-head>div{max-width:none;flex:1 1 520px}
:root body .eng-head .eng-lead{max-width:62ch}
:root body :is(.story,.visit,.studio,.closing,.about-site,.process) h2{font-size:clamp(2rem,3.4vw,3.4rem)}
:root body :is(.contact-lead,.about-lead,.project-detail) h1,:root body .page-intro h1{font-size:clamp(2.3rem,3.8vw,3.8rem)}
:root body .quote blockquote{max-width:30ch}
@media(min-width:901px){
  :root body .story{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px)}
  :root body .visit{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px)}
  :root body :is(.closing,.about-site){grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  :root body .studio{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  :root body .contact-lead{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
  :root body .process{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
/* the map sits right under the visit words, as wide as the band */
:root body .visit{row-gap:clamp(28px,4vw,44px)}
:root body .visit>.sb-location-map--embedded{grid-column:1/-1;width:100%;max-width:none;margin:0}
/* the menu on one row on a laptop, however many pages it lists */
@media(min-width:901px){
  :root body .nav-shell{grid-template-columns:minmax(0,auto) minmax(0,1fr) auto;gap:clamp(14px,2vw,28px)}
  :root body #primaryNav{flex-wrap:nowrap;justify-content:flex-end;gap:clamp(10px,1.3vw,24px);min-width:0}
  :root body #primaryNav>a{flex-shrink:0;white-space:nowrap}
  :root body #primaryNav:has(>a:nth-child(8)){gap:clamp(8px,.95vw,16px);font-size:.8rem}
  :root body #primaryNav:has(>a:nth-child(11)){gap:clamp(7px,.8vw,14px);font-size:.76rem}
  :root body .brand{min-width:0}
}
/* the engines in the design's own look */
:root body .eng-wrap{width:100%;max-width:var(--max);margin-inline:auto}
:root body .inner-main .eng-sec{padding-left:0;padding-right:0}
:root body .eng-card{border:1px solid var(--line);border-radius:0;background:var(--white,#fff)}
:root body .eng-card .button{margin-top:auto}
:root body .eng-review,:root body :is(.eng-request__form,.eng-aside,.eng-success){border:1px solid var(--line);border-radius:0;background:var(--white,#fff)}
:root body .eng-off .eng-wrap{display:grid;justify-items:center;gap:18px;text-align:center}
/* the basket's Add button, square like the design's own buttons */
:root body .project-card>.sb-shop-add{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;min-height:42px;margin:0 clamp(22px,3vw,28px) clamp(22px,3vw,28px);padding:0 16px;border:1px solid var(--ink);border-radius:0;background:transparent;color:var(--ink)}
:root body .project-card:has(>.sb-shop-add) .project-card-copy{padding-bottom:16px}
/* In the editors each photo sits in a wrapper while it can be replaced: the wrapper fills the photo's box. */
:root body :is(.project-media,.studio figure,.closing,.project-detail figure,.about-lead figure,.about-site figure,.eng-card__photo)>[data-paurtal-img-wrap]{display:block!important;width:100%;height:100%}
/* the whole business name, never cut: it wraps onto a second line (a size
   smaller on a phone), in every language */
:root body .brand>span:last-child{display:block;white-space:normal;overflow:visible;text-overflow:clip;max-width:20ch;line-height:1.15}
@media(max-width:900px){:root body .brand>span:last-child{max-width:none;font-size:.9rem}}
@media(max-width:640px){:root body .brand>span:last-child{font-size:.84rem}}
/* Atelier Terrains: the hero's haze turns dark (the words in white on it,
   from their side: the left on a laptop, the foot on a phone), the sections
   run the design's width without lines under them. */
.hero::after{background:linear-gradient(90deg,rgba(14,22,19,.9) 0%,rgba(14,22,19,.78) 34%,rgba(14,22,19,.42) 56%,rgba(14,22,19,0) 76%)}
:root body .hero .hero-copy,:root body .hero .hero-copy h1,:root body .hero .hero-copy>p{color:#fff}
:root body .hero .hero-copy>p{color:#e8ece9}
:root body .hero .button.secondary{border-color:#fff;color:#fff;background:transparent}
:root body .hero .button.secondary:hover{background:#fff;color:var(--ink)}
@media(max-width:720px){
  .hero::after{background:linear-gradient(0deg,rgba(14,22,19,.94) 0%,rgba(14,22,19,.84) 48%,rgba(14,22,19,.45) 72%,rgba(14,22,19,0) 90%)}
}
/* The services' cards (2026-09-25): the tall first card on the home page
   has its photo fill the card (a 16:10 photo left an empty stretch under
   it beside the two cards on its right); one or two cards lie without an
   empty cell; a last card alone on its row takes the whole row. */
@media(min-width:901px){
  :root body .popular .project-grid>.project-card:first-child{display:flex;flex-direction:column}
  :root body .popular .project-grid>.project-card:first-child>.project-media{flex:1 1 auto;aspect-ratio:auto;min-height:clamp(260px,26vw,420px)}
  :root body .popular .project-grid:has(>.project-card:nth-child(2):last-child){grid-template-columns:1fr 1fr}
  :root body .popular .project-grid:has(>.project-card:nth-child(2):last-child)>.project-card{grid-row:auto}
  :root body .popular .project-grid:has(>.project-card:nth-child(2):last-child)>.project-card>.project-media{flex:0 0 auto;aspect-ratio:16/9;min-height:0}
  :root body .popular .project-grid>.project-card:only-child{grid-column:1/-1;grid-row:auto;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
}
@media(min-width:721px) and (max-width:900px){
  :root body .popular .project-grid>.project-card:nth-child(even):last-child{grid-column:1/-1}
}
@media(min-width:721px){
  :root body .catalogue .project-grid>.project-card:last-child:nth-child(odd){grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  :root body .catalogue .project-grid>.project-card:last-child:nth-child(odd)>.project-media{aspect-ratio:auto;height:100%;min-height:240px}
}
/* on the services page the first card is one of the row: its photo the
   same shape as the next one, so their words line up */
:root body .catalogue .project-card:first-child .project-media{aspect-ratio:16/9}
/* <<< standard 2026-09-25 */
/* Contact page (2026-09-26): the map sits under the contact words, as wide
   as the band, a section's room below them (it sat 170 to 220px down). */
:root body .contact-lead{row-gap:clamp(28px,4vw,44px)}
:root body .contact-lead>.sb-location-map--embedded{grid-column:1/-1;width:100%;max-width:none;margin:0}
/* Booking page (2026-09-26): the three services on one row beside the
   contact card, as on the other designs (the third sat alone under two). */
@media(min-width:901px){:root body .eng-book{grid-template-columns:minmax(0,2.2fr) minmax(250px,.9fr)}}
/* Photos keep their 4:3 frame (2026-09-26): the height written on each
   photo drew it 900px tall whatever its column's width (the studio band,
   the project page, the about page). */
:root body :is(.studio figure,.project-detail figure,.about-lead figure,.about-site figure) img{height:auto}
/* Card photos keep their shape (2026-09-26, Tumi: a card's photo is never
   stretched to the card's height): the tall first card's photo is square,
   a last card alone on its row keeps a 16:10 photo beside its words. */
@media(min-width:901px){
  :root body .popular .project-grid>.project-card:first-child>.project-media:not(#_){flex:0 0 auto;aspect-ratio:1/1;min-height:0}
}
@media(min-width:721px){
  :root body .catalogue .project-grid>.project-card:last-child:nth-child(odd)>.project-media:not(#_){aspect-ratio:16/10;height:auto;min-height:0;align-self:start}
}
/* Hero on a wide screen (2026-09-26, Tumi: "most hero images are cropped"):
   the hero grows with the screen's width, so no more than about 40% of the
   photo's height is cut away, and the photo keeps its upper part (the roof) in
   the frame. */
@media(min-width:1280px){
  :root body .hero{min-height:clamp(560px,max(84vh,38vw),940px)}
  :root body .hero .hero-media img{object-position:62% 35%}
}