@font-face{font-family:Barlow;src:url(fonts/barlow-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Barlow;src:url(fonts/barlow-600.woff2) format("woff2");font-weight:600 900;font-display:swap}
:root{--paper:#f3f5ef;--surface:#fbfcf8;--ink:#173d35;--muted:#52645e;--blue:#173d35;--blue-dark:#102f29;--yellow:#a8bb32;--line:#c9d2c9;--danger:#9b2f24;--success:#236847;--radius:14px;--max:1280px;--sans:Barlow,Arial,sans-serif;--serif:Barlow,Arial,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.55 var(--sans);overflow-x:hidden}
::selection{background:var(--yellow);color:#102f29}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:.09em}
img{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit}
button,a,input,select,textarea{outline-offset:4px}
:focus-visible{outline:3px solid var(--yellow)}
.skip-link{position:fixed;left:12px;top:12px;z-index:1000;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;background:var(--ink);color:#fff}
.skip-link:focus{width:auto;height:auto;margin:0;padding:10px 15px;overflow:visible;clip-path:none}
.site-header{position:relative;z-index:30;background:var(--surface);border-bottom:1px solid var(--line)}
.announcement{min-height:36px;background:var(--blue-dark);color:#f7faef;display:flex;align-items:center;justify-content:center;gap:22px;padding:7px 24px;font-size:13px;line-height:1.2;text-align:center}
.announcement a{color:#fff;font-weight:800;white-space:nowrap;text-decoration-color:var(--yellow)}
.nav-row{min-height:72px;width:min(var(--max),calc(100% - 48px));margin:auto;display:flex;align-items:center;justify-content:space-between;gap:30px}
.brand{display:inline-flex;align-items:center;gap:12px;min-width:0;text-decoration:none}
.brand img{max-width:168px;max-height:46px;object-fit:contain}
.brand strong{font-size:18px;letter-spacing:.01em;text-transform:uppercase;white-space:nowrap}
.brand-mark{display:grid;place-items:center;width:40px;height:40px;background:var(--yellow);color:#102f29;font-weight:900;letter-spacing:.06em;border-radius:12px}
nav{display:flex;align-items:center;gap:25px;font-size:14px;font-weight:700}
nav>a{text-decoration:none;padding:8px 0;border-bottom:2px solid transparent}
nav>a:hover,nav>a[aria-current=page]{border-color:var(--yellow)}
.language{display:flex;align-items:center;gap:7px;margin-left:4px}
.language a{text-decoration:none;color:var(--muted)}
.language a[aria-current=true]{color:var(--ink);font-weight:900}
.language i{font-style:normal;color:var(--line)}
.menu-toggle{display:none;border:0;background:transparent;color:var(--ink);padding:10px;align-items:center;gap:4px;flex-direction:column;cursor:pointer}
.menu-toggle span{display:block;width:24px;height:2px;background:currentColor}
.menu-toggle b{font-size:11px;margin-top:2px}
main{display:block}
.section{width:min(var(--max),calc(100% - 48px));margin-inline:auto;padding-block:clamp(64px,7vw,104px)}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{font-family:var(--sans);font-weight:800;letter-spacing:-.04em;text-wrap:balance}
h1{font-size:clamp(48px,5.4vw,76px);line-height:.96;margin-bottom:22px}
h2{font-size:clamp(34px,4vw,54px);line-height:1;margin-bottom:22px}
h3{font-size:22px;line-height:1.1;margin-bottom:11px}
p{max-width:68ch}
.btn{min-height:48px;display:inline-flex;align-items:center;justify-content:center;padding:12px 20px;border:1px solid var(--ink);border-radius:12px;text-decoration:none;text-align:center;font-weight:800;transition:transform .16s ease,background .16s ease,color .16s ease}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--yellow);border-color:var(--yellow);color:#102f29}
.btn-primary:hover{text-decoration:underline}
.btn-secondary{background:transparent;color:inherit}
.btn-secondary:hover{background:var(--ink);color:#fff}
.text-link{font-weight:800;text-decoration-thickness:2px}
.preview-label,.hero-signal,.service-type{font-size:11px;font-weight:900;line-height:1.2;letter-spacing:.15em;text-transform:uppercase}

/* One semantic hero, deliberately image-first. The photograph is strictly full
   width and never receives a tint, scrim, blend mode or overlay. */
.hero{width:100%;display:grid;grid-template-areas:"media" "copy";grid-template-rows:clamp(430px,52vw,680px) auto;background:var(--surface);color:var(--ink)}
.hero-copy{grid-area:copy;width:min(var(--max),calc(100% - 48px));margin:auto;padding:clamp(28px,3.2vw,44px) 0;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(290px,.92fr);column-gap:clamp(34px,6vw,86px);align-items:center}
.hero-signal{grid-column:1;color:var(--yellow);margin-bottom:13px}
.hero h1{grid-column:1;max-width:12ch;margin-bottom:0;color:var(--ink);font-size:clamp(45px,5vw,70px)}
.hero-copy>p:not(.hero-signal){grid-column:2;font-size:18px;color:var(--muted);margin:0 0 18px;align-self:end}
.hero-actions{grid-column:2;display:flex;gap:10px;flex-wrap:wrap}
.hero .btn-secondary{border-color:var(--ink);color:var(--ink)}
.hero .btn-secondary:hover{background:var(--ink);color:#fff}
.hero-media{grid-area:media;margin:0;width:100%;height:100%;overflow:hidden;background:#d8ddda}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 48%;filter:none;opacity:1;mix-blend-mode:normal}

.story{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,7vw,96px);align-items:center}
.story p{color:var(--muted);font-size:18px;margin-bottom:26px}
.story figure{margin:0;overflow:hidden;border-radius:var(--radius)}
.story img{width:100%;aspect-ratio:3/2;object-fit:cover}
.solutions{border-top:1px solid var(--line)}
.section-heading{display:grid;grid-template-columns:1fr .72fr;gap:40px;align-items:end;margin-bottom:40px}
.section-heading h2,.section-heading p{margin-bottom:0}
.section-heading p{color:var(--muted)}
.service-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:16px;margin-bottom:28px}
.service-card{min-width:0;padding:30px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.service-card[hidden]{display:none}
.service-type{display:block;color:var(--yellow);margin-bottom:26px}
.service-card h3{font-size:30px}
.service-card p{color:var(--muted);min-height:5em}
.service-card a{font-weight:800}
.empty-state{grid-column:1/-1;padding:40px;background:var(--surface)}
.craft{display:grid;grid-template-columns:minmax(250px,.7fr) minmax(0,1.3fr);gap:clamp(40px,8vw,120px);background:#dfe8dc;color:var(--ink);width:100%;max-width:none;padding-inline:max(24px,calc((100vw - var(--max))/2))}
.craft h2{color:var(--ink);max-width:14ch;font-size:clamp(34px,3.7vw,52px)}
.method-list{border-top:1px solid rgba(23,61,53,.28);border-top:1px solid color-mix(in srgb,var(--ink) 28%,transparent)}
.method-list article{display:grid;grid-template-columns:minmax(140px,.42fr) minmax(0,1fr);gap:24px;padding:22px 0;border-bottom:1px solid rgba(23,61,53,.22);border-bottom:1px solid color-mix(in srgb,var(--ink) 22%,transparent)}
.method-list h3,.method-list p{margin:0}
.method-list p{color:#405b54}
.process h2{max-width:17ch;margin-bottom:46px;font-size:clamp(34px,3.7vw,52px)}
.process ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.process li{display:flex;gap:18px;padding:26px 26px 26px 0;border-bottom:1px solid var(--line)}
.process li+li{padding-left:26px;border-left:1px solid var(--line)}
.process li>b{flex:0 0 36px;height:36px;display:grid;place-items:center;background:var(--yellow);color:#102f29;border-radius:10px}
.process li p{color:var(--muted);margin-bottom:0}
.showcase{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(310px,.55fr);background:var(--surface);border-block:1px solid var(--line)}
.showcase figure{margin:0;min-height:510px;overflow:hidden;border-radius:0 var(--radius) var(--radius) 0}
.showcase img{width:100%;height:100%;object-fit:cover}
.showcase>div{align-self:center;padding:clamp(38px,5vw,76px)}
.showcase h2{font-size:clamp(34px,3.7vw,50px)}
.showcase p{color:var(--muted)}
.visit{display:grid;grid-template-columns:1fr .7fr;gap:46px;align-items:end}
.visit h2{max-width:16ch;font-size:clamp(34px,3.7vw,52px)}
.visit p{color:var(--muted);margin-bottom:8px}
.visit-actions{display:flex;align-items:flex-end;justify-content:flex-end;gap:20px;flex-wrap:wrap}
.visit-actions a{font-weight:800}
.quote-block{padding:clamp(58px,8vw,110px) max(24px,calc((100vw - 980px)/2));text-align:left;background:var(--surface);border-block:1px solid var(--line)}
.quote-block .preview-label{color:var(--yellow);margin-bottom:24px}
.quote-block blockquote{font-size:clamp(34px,4.4vw,58px);font-weight:800;line-height:1;letter-spacing:-.04em;margin:0 0 22px;max-width:24ch}
.quote-block>p:last-child{color:var(--muted)}
.closing{width:min(var(--max),calc(100% - 48px));margin:auto;padding:clamp(58px,7vw,94px) 0;display:flex;justify-content:space-between;align-items:center;gap:38px}
.closing h2{max-width:16ch;margin-bottom:10px;font-size:clamp(34px,3.7vw,52px)}
.closing p{color:var(--muted);margin-bottom:0}
.site-footer{background:var(--ink);color:#fff;padding:56px max(24px,calc((100vw - var(--max))/2)) 24px;display:grid;grid-template-columns:1.2fr .6fr .7fr;gap:44px}
.faq-slot{display:none}
.footer-brand strong{font-size:26px;text-transform:uppercase;letter-spacing:.02em}
.footer-brand p{color:#c8cfcc;max-width:32ch;margin-top:12px}
.footer-links,.footer-contact{display:flex;flex-direction:column;gap:8px}
.footer-links a,.footer-contact a{text-decoration:none;color:#fff}
.footer-contact p{color:#c8cfcc;margin:0}
.footer-bottom{grid-column:1/-1;border-top:1px solid #4b565b;margin-top:18px;padding-top:20px;display:flex;justify-content:space-between;gap:20px;color:#aeb8b5;font-size:13px}
.page-intro,.project-hero{width:min(var(--max),calc(100% - 48px));margin:auto;padding:clamp(52px,6vw,86px) 0;display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(40px,6vw,82px);align-items:center}
.page-intro h1,.project-hero h1{font-size:clamp(46px,5vw,70px)}
.page-intro p,.project-hero p{font-size:18px;color:var(--muted)}
.page-intro figure,.project-hero figure{margin:0;overflow:hidden}
.page-intro img,.project-hero img{width:100%;aspect-ratio:3/2;object-fit:cover}
.catalogue{padding:26px 0 clamp(38px,4vw,54px)}
.catalogue+.closing,.about-principles+.closing,.image-pair+.closing{padding-top:clamp(32px,3vw,46px);padding-bottom:clamp(50px,5vw,68px)}
.service-switch{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.service-switch button{border:1px solid var(--ink);background:transparent;padding:10px 15px;font-weight:800;cursor:pointer}
.service-switch button.active{background:var(--ink);color:#fff}
.project-hero{align-items:end}
.project-hero .preview-label{color:var(--yellow);margin-bottom:16px}
.project-notes{display:grid;grid-template-columns:.7fr 1.3fr;gap:clamp(40px,5vw,66px);border-top:1px solid var(--line);padding-block:clamp(46px,5vw,68px)}
.note-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.note-grid article{padding:24px 20px 24px 0;border-bottom:1px solid var(--line)}
.note-grid article+article{border-left:1px solid var(--line);padding-left:20px}
.note-grid p{color:var(--muted);margin-bottom:0}
.image-pair{padding:clamp(16px,2vw,26px) 0 clamp(44px,5vw,66px);display:grid;grid-template-columns:1fr 1fr;gap:16px}
.image-pair figure{margin:0;overflow:hidden}
.image-pair img{width:100%;aspect-ratio:3/2;object-fit:cover}
.about-principles{padding-block:clamp(46px,5vw,68px)}
.about-principles>h2{max-width:18ch;margin-bottom:30px}
.about-principles .method-list{color:var(--ink);border-color:var(--line)}
.about-principles .method-list article{border-color:var(--line)}
.about-principles .method-list p{color:var(--muted)}
.contact-layout{width:min(var(--max),calc(100% - 48px));margin:auto;padding:clamp(54px,7vw,96px) 0;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(46px,7vw,96px);align-items:start}
.contact-layout h1{font-size:clamp(46px,5vw,70px)}
.contact-layout>div>p{color:var(--muted)}
.contact-layout figure{margin:0;overflow:hidden}
.contact-layout img{width:100%;aspect-ratio:3/2;object-fit:cover}
.contact-list{margin:34px 0;border-top:1px solid var(--line)}
.contact-list>a,.contact-list>div{display:grid;grid-template-columns:116px 1fr;gap:18px;padding:15px 0;border-bottom:1px solid var(--line);text-decoration:none}
.contact-list span{color:var(--muted)}
.contact-list b{font-weight:600;overflow-wrap:anywhere}
.contact-actions{display:flex;gap:10px;flex-wrap:wrap}
.request-layout{width:min(var(--max),calc(100% - 48px));margin:auto;padding:clamp(50px,6vw,82px) 0;display:grid;grid-template-columns:minmax(300px,.75fr) minmax(0,1.25fr);gap:clamp(44px,6vw,84px);align-items:start}
.request-copy{position:static}
.request-copy h1{font-size:clamp(44px,4.8vw,66px)}
.request-copy>p{color:var(--muted);font-size:18px}
.request-copy figure{margin:30px 0 20px;overflow:hidden}
.request-copy img{width:100%;aspect-ratio:3/2;object-fit:cover}
.honesty-note{border-top:3px solid var(--yellow);padding-top:15px}
.honesty-note p{color:var(--muted);margin-bottom:0}
.request-panel{background:var(--surface);border:1px solid var(--line);padding:clamp(22px,4vw,44px)}
.form-heading{display:flex;justify-content:space-between;gap:18px;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:17px;margin-bottom:22px}
.form-heading h2{font-size:23px;letter-spacing:-.01em;margin:0}
.form-heading span{font-size:13px;color:var(--muted)}
.request-panel form{display:grid;gap:17px}
.request-panel label{display:grid;gap:7px;font-size:14px;font-weight:700}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}
input,select,textarea{width:100%;min-height:47px;border:1px solid #71837d;background:#fff;color:var(--ink);border-radius:10px;padding:10px 12px}
textarea{resize:vertical;line-height:1.5}
input::placeholder,textarea::placeholder{color:#66716f;opacity:1}
input:focus,select:focus,textarea:focus{border-color:var(--yellow);outline:3px solid color-mix(in srgb,var(--yellow) 22%,transparent)}
.consent{grid-template-columns:auto 1fr!important;align-items:start;font-weight:400!important}
.consent input{width:20px;min-height:20px;margin-top:3px;accent-color:var(--yellow)}
.form-status{min-height:26px;margin:0;color:var(--muted)}
.form-status.error{color:var(--danger)}
.form-status.success{color:var(--success)}
.request-success{padding:30px 0}
.request-success h2{font-size:38px}
.request-success p{color:var(--muted)}
@media(max-width:920px){
  .nav-row{width:min(100% - 32px,var(--max));min-height:66px}.menu-toggle{display:flex}nav{position:absolute;top:100%;left:0;right:0;background:var(--surface);border-bottom:1px solid var(--line);padding:17px 22px;display:none;flex-direction:column;align-items:stretch;gap:4px}nav.open{display:flex}nav>a{padding:10px 0}.language{padding-top:11px;margin:5px 0 0;border-top:1px solid var(--line)}
  .hero{grid-template-areas:"media" "copy";grid-template-rows:clamp(300px,48vw,430px) auto}.hero-copy{grid-template-columns:1fr;padding:28px 0 24px}.hero-signal,.hero h1,.hero-copy>p:not(.hero-signal),.hero-actions{grid-column:1}.hero h1{font-size:clamp(44px,8vw,64px);max-width:15ch;margin-bottom:14px}.hero-copy>p:not(.hero-signal){font-size:17px;margin-bottom:17px}.hero-actions{display:flex}.hero-media img{object-position:center 48%}
  .story,.section-heading,.craft,.visit,.page-intro,.project-hero,.project-notes,.contact-layout,.request-layout{grid-template-columns:1fr}.story{gap:34px}.craft{gap:18px}.section-heading{align-items:start}.process ol{grid-template-columns:1fr}.process li+li{padding-left:0;border-left:0}.showcase{grid-template-columns:1fr}.showcase figure{min-height:360px}.visit-actions{justify-content:flex-start}.note-grid{grid-template-columns:1fr}.note-grid article+article{border-left:0;padding-left:0}.request-copy{position:static}.contact-layout,.request-layout{gap:38px}
}
@media(max-width:600px){
  body{font-size:16px}.announcement{padding:7px 12px;gap:8px;justify-content:space-between;text-align:left;font-size:12px}.announcement span{max-width:230px}.nav-row,.section,.closing,.page-intro,.project-hero,.contact-layout,.request-layout,.hero-copy{width:min(100% - 28px,var(--max))}.brand strong{max-width:156px;overflow:hidden;text-overflow:ellipsis}.brand-mark{width:36px;height:36px}.hero{grid-template-areas:"media" "copy";grid-template-rows:270px auto}.hero-copy{padding:19px 0 20px}.hero-signal{font-size:10px;margin-bottom:7px}.hero h1{font-size:clamp(35px,9.6vw,43px);line-height:.96;margin-bottom:8px}.hero-copy>p:not(.hero-signal){font-size:14px;line-height:1.32;margin-bottom:10px;max-width:43ch}.hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.hero-actions .btn{min-height:42px;padding:8px 9px;font-size:13px}.hero-media{min-height:270px}.hero-media img{object-position:50% 48%}
  .section{padding-block:56px}h2{font-size:clamp(34px,10vw,46px)}.catalogue{padding-top:22px;padding-bottom:38px}.project-notes,.about-principles{padding-block:42px}.image-pair{padding-block:10px 40px}.service-grid{grid-template-columns:1fr}.service-card p{min-height:0}.method-list article{grid-template-columns:1fr;gap:6px}.showcase figure{min-height:270px}.showcase>div{padding:30px 20px}.quote-block{padding-inline:18px}.closing{align-items:flex-start;flex-direction:column}.site-footer{grid-template-columns:1fr;gap:23px;padding-inline:18px}.faq-slot{display:flex;justify-content:flex-end}.faq-slot .bbfaq-bubble{position:static;width:48px;height:48px;margin:0;box-shadow:0 0 0 2px #fff,0 8px 18px rgba(0,0,0,.28)}.footer-bottom{flex-direction:column}.image-pair{grid-template-columns:1fr}.contact-list>a,.contact-list>div{grid-template-columns:1fr;gap:2px}.form-row{grid-template-columns:1fr}.request-panel{padding:20px 15px}.form-heading{align-items:flex-start;flex-direction:column;gap:4px}.project-hero,.page-intro{padding-top:40px}.project-hero h1,.page-intro h1,.contact-layout h1,.request-copy h1{font-size:clamp(40px,12vw,54px)}
}
@media(max-width:360px){.brand strong{max-width:124px}.hero{grid-template-rows:240px auto}.hero-actions{grid-template-columns:1fr 1fr}.service-card{padding:23px}.site-footer{padding-inline:14px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.btn:hover{transform: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);grid-template-areas:none;width:100%;min-height:clamp(560px,84vh,860px);padding:clamp(28px,4vw,56px) max(24px,calc((100vw - var(--max))/2));overflow:hidden;isolation:isolate;background:var(--blue-dark)}
.hero-media{position:absolute;inset:0;grid-area:auto;margin:0;width:auto;height:auto;min-height:0;max-height:none;z-index:0;overflow:hidden;background:var(--blue-dark)}
.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-area:auto;width:auto;margin:0;display:block;max-width:min(620px,100%)}
.hero .hero-copy>*{grid-column:auto}
.hero .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin:0}
/* The customer's colours: dark surfaces and text on the accent. */
.announcement,.site-footer{background:var(--blue-dark)}
::selection,.brand-mark,.btn-primary,.btn-primary:hover,.process li>b{color:var(--accent-ink,#fff)}
.language i{color:var(--muted)}
/* 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;padding-top:0}

.service-type{color:var(--accent-text,var(--yellow))}
.hero .hero-copy{align-self:end;justify-self:stretch;max-width:none;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(28px,5vw,80px);align-items:center;padding:clamp(24px,2.8vw,38px) clamp(24px,3.2vw,48px);background:var(--blue);color:var(--hero-ink,#fff);border-radius:var(--radius)}
.hero h1{grid-column:1;max-width:18ch;margin:0 0 10px;font-size:clamp(40px,4.4vw,66px);line-height:1;color:var(--hero-ink,#fff)}
.hero .hero-copy>p{grid-column:1;max-width:54ch;margin:0;font-size:18px;line-height:1.5;color:var(--hero-muted,#e8eff2)}
.hero .hero-actions{grid-column:2;grid-row:1/span 2;align-self:center;justify-content:flex-end}
.hero .btn-secondary{border-color:var(--hero-ink,#fff);color:var(--hero-ink,#fff)}
.hero .btn-secondary:hover{background:var(--hero-ink,#fff);color:var(--blue)}
.hero-media img{object-position:center 40%}
.craft{background:var(--tint,#dfe8dc)}
.method-list p{color:var(--tint-ink,#405b54)}
@media (max-width:900px){
.hero .hero-copy{grid-template-columns:1fr;padding:22px 20px 24px}
.hero .hero-actions{grid-column:1;grid-row:auto;margin-top:18px;justify-content:flex-start}
}
@media (max-width:720px){
.hero{padding:14px}
.hero h1{font-size:clamp(34px,9.8vw,46px);margin-bottom:8px}
.hero .hero-copy>p{font-size:15.5px;line-height:1.45}
.hero-media img{object-position:21% center}
}

@media (min-width:921px){
.showcase{grid-template-columns:minmax(0,1.3fr) minmax(380px,.7fr)}
.showcase>div{padding:clamp(32px,4vw,64px)}
.showcase h2{font-size:clamp(32px,3vw,44px)}
}

@media (max-width:720px){
.hero{min-height:clamp(560px,88svh,780px)}
.hero .hero-copy{justify-self:stretch;max-width:none}
.hero .hero-actions{display:grid;grid-template-columns:1fr;gap:8px}
.hero .hero-actions .btn{width:100%;min-height:48px}
}

/* Hero treatment (2026-09-22): colour rising. No band: the design's deep colour rises from the foot of the photograph and the words sit straight on it, the line on the left and the actions on the right. One of the four Solar heroes, each its own (Tumi: "a mixture"). */
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:64%;z-index:0;pointer-events:none;background:linear-gradient(0deg,rgba(14,52,38,.95) 0%,rgba(14,52,38,.8) 40%,rgba(14,52,38,0) 100%);background:linear-gradient(0deg,color-mix(in srgb,var(--blue-dark) 95%,transparent) 0%,color-mix(in srgb,var(--blue-dark) 80%,transparent) 40%,transparent 100%)}
.hero .hero-copy{background:none;border-radius:0;padding:0 0 clamp(6px,1.4vw,18px);color:#fff}
.hero h1,.hero .hero-copy>p{color:#fff}
.hero .btn-secondary{border-color:#fff;color:#fff}
.hero .btn-secondary:hover{background:#fff;color:var(--blue-dark)}
@media (max-width:720px){
.hero::after{height:80%}
.hero .hero-copy{padding:0}
}

/* 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 Solar designs
   beside Sunworks Projects: the engines' bands and pages in the design's
   measure and colours, sections 40 to 68px a side (40px on a phone),
   headings spread over their band, the menu on one row on a laptop, the
   footer's links in two even columns, photos keeping their frame inside
   both editors. */
:root{--ground:var(--white,var(--surface));--surface-2:var(--paper);--ink-soft:var(--muted);--radius-sm:var(--radius);--radius-btn:var(--radius);--primary:var(--blue);--on-primary:var(--hero-ink,#fff);--font-display:var(--serif);--font-body:var(--sans);--band:clamp(40px,5vw,68px)}
:root body .section{padding-block:var(--band)}
:root body :is(.craft,.closing,.page-intro,.project-hero,.contact-layout,.request-layout,.project-notes,.about-principles){padding-block:var(--band)}
:root body .quote-block{padding-block:var(--band)}
:root body .image-pair{padding-block:0 var(--band)}
:root body h2{font-size:clamp(32px,3.4vw,50px);line-height:1.04}
:root body :is(.section h2,.craft h2,.process h2,.visit h2,.closing h2,.showcase h2,.section-heading h2,.about-principles>h2,.eng-head h2,.eng-page-intro h1,.hero h1){max-width:none}
:root body .quote-block blockquote{max-width:34ch}
/* the menu on one row on a laptop, however many pages it lists */
@media(min-width:921px){
  :root body .nav-row{gap:clamp(14px,2vw,32px)}
  :root body #site-menu{flex-wrap:nowrap;gap:clamp(10px,1.3vw,25px);min-width:0}
  :root body #site-menu>a{flex-shrink:0;white-space:nowrap}
  :root body #site-menu:has(>a:nth-child(8)){gap:clamp(8px,1vw,18px);font-size:13px}
  :root body #site-menu:has(>a:nth-child(11)){gap:clamp(7px,.8vw,14px);font-size:12.5px}
  :root body .brand{flex-shrink:1;min-width:0}
}
/* the engines' bands and pages in the design's measure */
:root body .sw-band{padding-block:var(--band)}
:root body .eng-wrap{width:min(var(--max),calc(100% - 48px));margin-inline:auto}
:root body .eng-sec .eng-head{margin-bottom:clamp(20px,3vw,32px)}
:root body .eng-sec .eng-head>div{max-width:none;flex:1 1 520px}
:root body .eng-sec .eng-head .eng-lead{max-width:62ch;margin:10px 0 0;color:var(--muted)}
:root body .eng-sec .eng-link{color:var(--ink);text-decoration-thickness:2px}
:root body .eng-sec .eng-card{background:var(--white,var(--surface));border:1px solid var(--line);border-radius:var(--radius)}
:root body .eng-sec .eng-card__body h3{font-family:var(--serif);font-size:clamp(20px,1.6vw,24px);letter-spacing:-.01em}
:root body .eng-sec .eng-card__body .btn{min-height:44px;padding:10px 18px}
:root body .eng-sec.eng-figures-band{background:var(--white,var(--surface))}
:root body .eng-sec .eng-figure{border-left-color:var(--yellow)}
:root body .eng-sec .eng-review{background:var(--paper);border:1px solid var(--line)}
:root body .eng-sec :is(.eng-request__form,.eng-aside,.eng-success){background:var(--white,var(--surface));border:1px solid var(--line);border-radius:var(--radius)}
:root body :is(.eng-photo,.eng-card__photo)>[data-paurtal-img-wrap]{display:block!important;width:100%;height:100%}
:root body .sw-page-intro{padding-block:var(--band) 0}
:root body .sw-page-intro h1{font-size:clamp(40px,4.4vw,64px);margin-bottom:14px}
:root body .sw-page-intro p{font-size:18px;color:var(--muted);max-width:62ch;margin-bottom:0}
:root body .sw-page-intro+.eng-sec{padding-top:clamp(28px,3vw,40px)}
:root body .eng-off .eng-wrap{display:grid;justify-items:center;gap:18px;text-align:center}
/* the footer: its links in two even columns */
:root body .site-footer{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,.8fr);gap:clamp(28px,4vw,56px);padding-top:clamp(40px,5vw,60px)}
:root body .footer-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 28px;align-content:start}
:root body footer.site-footer>div.footer-links:has(>a:nth-of-type(n)){grid-auto-flow:row;grid-template-rows:none}
:root body :is(.footer-contact a,.contact-list strong){overflow-wrap:anywhere}
/* the basket's Add button on a priced service */
:root body .service-card>.sb-shop-add{align-self:flex-start;margin-top:14px;border-radius:var(--radius);color:var(--ink)}
/* In the editors each photo sits in a wrapper while it can be replaced: the wrapper fills the photo's frame. */
:root body :is(.story,.page-intro,.project-hero,.image-pair,.contact-layout,.request-copy) figure>[data-paurtal-img-wrap]{display:block!important;width:100%}
:root body .showcase figure>[data-paurtal-img-wrap]{display:block!important;width:100%;height:100%;min-height:inherit}
:root body .showcase figure>[data-paurtal-img-wrap]>img{min-height:inherit}
@media(max-width:920px){:root body .site-footer{grid-template-columns:1fr 1fr}:root body .footer-brand{grid-column:1/-1}}
@media(max-width:600px){:root{--band:40px}:root body .section{padding-block:var(--band)}:root body .site-footer{grid-template-columns:1fr}:root body .eng-wrap{width:min(100% - 28px,var(--max))}}
/* two-column bands give the heading an equal side, so it spreads */
@media(min-width:921px){
  :root body .story{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  :root body .craft{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
  :root body .showcase h2{font-size:clamp(28px,2.6vw,40px)}
}
/* the whole business name, never cut: it wraps onto a second line (a size
   smaller on a phone), in every language */
:root body .brand strong{display:block;white-space:normal;overflow:visible;text-overflow:clip;max-width:22ch;line-height:1.15}
@media(min-width:921px){:root body .brand strong{font-size:16px}}
@media(max-width:920px){:root body .brand{min-width:0;flex:1 1 auto}:root body .brand strong{max-width:none;font-size:15px}}
@media(min-width:921px){:root body .showcase{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
/* <<< standard 2026-09-25 */
/* 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 people's heads) 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:50% 30%}
}

/* Photo places on the service cards (Tumi 2026-10-19): the owner's photo on
   top, else the design's own photograph; the words under it. */
:root body .service-card{display:flex;flex-direction:column;padding:0;overflow:hidden}
.sw-card__photo{margin:0;height:clamp(190px,19vw,270px);overflow:hidden;background:var(--paper)}
.sw-card__photo img{display:block;width:100%;height:100%;object-fit:cover}
.sw-card__photo>[data-paurtal-img-wrap]{display:block!important;width:100%;height:100%}
.sw-card__body{display:flex;flex:1;flex-direction:column;padding:24px 26px 26px}
.sw-card__body>a{margin-top:auto;align-self:flex-start}
:root body .service-card>.sb-shop-add{margin:0 26px 26px}
@media(max-width:560px){.sw-card__body{padding:20px}:root body .service-card>.sb-shop-add{margin:0 20px 20px}}
/* >>> header, logo and width 2026-11-03 */
/* Tumi 2026-11-03: the logo is the business's own picture and has to read (72px high on a laptop, 64px on a tablet,
   56px on a phone, kept in proportion, left in its place); the whole menu shows from 768px up (the menu button is
   for phones only); every band with its own colour or photograph runs edge to edge. */
:root body .nav-row{padding-block:6px}
@media(max-width:1023px){:root body .brand img{height:64px}}
@media(max-width:767px){:root body .brand img{height:56px}}
/* 768px to 1100px: the menu on one row beside the logo, its words and gaps a little smaller. A long menu (8 pages or
   more) takes a row of its own under the logo, still whole. */
@media(min-width:768px) and (max-width:1100px){
  :root body .nav-row{flex-wrap:wrap;column-gap:clamp(10px,1.6vw,20px);row-gap:0;min-height:0}
  :root body .brand{flex:0 1 auto;margin-right:auto}
  :root body .menu-toggle{display:none}
  :root body #site-menu{position:static;flex:0 1 auto;flex-direction:row;flex-wrap:nowrap;justify-content:flex-end;align-items:center;gap:clamp(8px,1.2vw,16px);padding:0;border:0;background:none;font-size:13px}
  :root body #site-menu>a{flex:none;white-space:nowrap;padding:8px 0}
  :root body .nav-row:has(#site-menu>a:nth-child(8)) #site-menu{order:3;flex:1 1 100%;justify-content:center;border-top:1px solid var(--line)}
  :root body .nav-row:has(#site-menu>a:nth-child(8)) #site-menu>a{padding:11px 0 9px}
  :root body .nav-row:has(#site-menu>a:nth-child(11)) #site-menu{gap:7px;font-size:12px}
}
/* 1101px to 1279px: a very long menu (10 pages or more) takes its own row too. */
@media(min-width:1101px) and (max-width:1279px){
  :root body .nav-row:has(#site-menu>a:nth-child(10)){flex-wrap:wrap;column-gap:20px;row-gap:0;min-height:0}
  :root body .nav-row:has(#site-menu>a:nth-child(10)) .brand{flex:0 1 auto;margin-right:auto}
  :root body .nav-row:has(#site-menu>a:nth-child(10)) #site-menu{order:3;flex:1 1 100%;justify-content:center;flex-wrap:nowrap;border-top:1px solid var(--line)}
  :root body .nav-row:has(#site-menu>a:nth-child(10)) #site-menu>a{padding:11px 0 9px}
}
/* On a phone the bands that have a colour of their own keep the whole screen width; only their words keep a margin. */
@media(max-width:767px){
  :root body .craft{width:100%;max-width:none}
}
/* <<< header, logo and width 2026-11-03 */
/* >>> header 2026-11-04 */
/* The logo 72px high on a laptop (64 on a tablet, 56 on a phone; its own cap was 46px) and the whole menu from
   768px up: this design folds it up to 920px. */
:root body .brand img{height:72px;width:auto;max-height:none;max-width:220px;object-fit:contain}
@media(max-width:1023px){:root body .brand img{height:64px}}
@media(max-width:767px){:root body .brand img{height:56px;max-width:180px}}
@media(min-width:768px) and (max-width:920px){
  :root body .menu-toggle{display:none}
  :root body #site-menu{display:flex}
}
/* <<< header 2026-11-04 */