/* Layout: navy hero band carrying the stacked signature, then one calm column on white with cream panels */
:root{
  --bg:#FFFFFF; --panel:#F3E6D7; --ink:#0E1F2B; --muted:#4A5862; --champ:#D9C9B4; --navy:#0E1F2B; --line:#E4D8CA; --onnavy:#D9C9B4;
  --display:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif; --body:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#0E1F2B; --panel:#152B3A; --ink:#F3E6D7; --muted:#B9B0A5; --champ:#D9C9B4; --navy:#0A1820; --line:#24394A; --onnavy:#D9C9B4; color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0E1F2B; --panel:#152B3A; --ink:#F3E6D7; --muted:#B9B0A5; --champ:#D9C9B4; --navy:#0A1820; --line:#24394A; --onnavy:#D9C9B4; color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-weight:300;font-size:15px;line-height:1.8;margin:0}
.wrap{max-width:1000px;margin:0 auto;padding-inline:clamp(16px,5vw,40px)}
header.site{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-block:22px}
.home{display:flex;align-items:center;text-decoration:none;color:var(--ink)}
.home img{width:420px;height:auto;display:block}
.home .txt{font-size:13px;font-weight:400;letter-spacing:.3em;text-transform:uppercase}
.logo-dark{display:none!important}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .logo-light{display:none!important}:root:not([data-theme="light"]) .logo-dark{display:block!important}}
:root[data-theme="dark"] .logo-light{display:none!important}:root[data-theme="dark"] .logo-dark{display:block!important}
.home .txt{display:none}
@media (max-width:900px){.home img{display:none!important}.home .txt{display:inline}}
.right{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.lang{display:flex;border:1px solid var(--line)}
.lang button{background:transparent;color:var(--muted);padding:6px 10px;font-size:11px;letter-spacing:.14em;justify-self:auto}
.lang button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
nav{display:flex;gap:28px}
nav a{color:var(--muted);text-decoration:none;font-size:12px;letter-spacing:.2em;text-transform:uppercase;padding-block:6px;border-bottom:1px solid transparent}
nav a[aria-current="page"],nav a:hover{color:var(--ink);border-bottom-color:var(--champ)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--champ);outline-offset:3px}
.hero{background:var(--navy);color:var(--onnavy);text-align:center;padding-block:clamp(56px,9vw,110px)}
.hero img{width:min(560px,100%);height:auto;display:block;margin:0 auto}
.hero p{margin:36px auto 0;max-width:42ch;font-size:15px;letter-spacing:.06em;color:var(--onnavy)}
.hero .loc{font-size:11px;letter-spacing:.28em;text-transform:uppercase;margin-top:18px;opacity:.85}
section{padding-block:64px}
.label{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);margin:0 0 14px;display:flex;align-items:center;gap:14px}
.label::before{content:"";width:40px;height:1px;background:var(--champ)}
h2{font-family:var(--display);font-weight:400;font-size:clamp(19px,2.4vw,24px);letter-spacing:.28em;text-transform:uppercase;line-height:1.5;margin:0 0 32px;text-wrap:balance}

.brands{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.brand{background:var(--panel);display:flex;flex-direction:column;min-width:0;padding:0;gap:0}
.pic{position:relative;overflow:hidden;aspect-ratio:4/5;max-width:100%;background:var(--panel)}
.pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;opacity:0;transition:opacity 1.2s ease}
.pic img.on{opacity:1}
.ph{display:flex;align-items:center;justify-content:center;text-align:center}
.ph span{font-size:16px;letter-spacing:.3em;text-transform:uppercase}
.ph.sm{background:#D9C9B4;color:#0E1F2B}.ph.loya{background:#0E1F2B;color:#D9C9B4}
.txt{padding:28px 28px 32px;display:flex;flex-direction:column;gap:10px;flex:1;min-width:0}
.txt h3{font-family:var(--display);font-weight:400;font-size:17px;letter-spacing:.24em;text-transform:uppercase;margin:0;line-height:1.5}
.brand .role{font-size:11px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--ink);margin:0;padding:16px 28px;text-align:center;border-bottom:1px solid var(--line)}
.txt p{margin:0;color:var(--muted)}
.txt .ext{color:var(--muted);font-size:13px;text-decoration:none;border-bottom:1px solid var(--line);align-self:flex-start}
.txt a.more{margin-top:auto;padding-top:12px;color:var(--ink);font-weight:500;font-size:14px;letter-spacing:.06em;text-decoration:none;border-bottom:1px solid var(--champ);align-self:flex-start;padding-bottom:2px}
@media (max-width:700px){.brands{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.pic img{transition:none}}
.rule{height:1px;background:var(--line)}
.addr{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px;margin:0}
.addr dt{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.addr dd{margin:8px 0 0;font-size:16px;font-weight:400;line-height:1.7}
.todo{background:color-mix(in srgb,var(--champ) 45%,transparent);padding:0 4px}
.about{max-width:62ch;display:grid;gap:18px}
.about p{margin:0}
.about p:first-child{font-size:19px;font-weight:300;line-height:1.7;color:var(--ink)}
.intro{max-width:56ch;margin:-12px 0 32px;color:var(--muted)}
form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 24px;background:var(--panel);padding:clamp(22px,4vw,40px)}
.f{display:flex;flex-direction:column;gap:6px;min-width:0}
.f.full{grid-column:1/-1}
label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
input,select,textarea{font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);padding:12px 14px;border-radius:0;width:100%}
textarea{min-height:140px;resize:vertical}
button{font:inherit;font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;background:var(--ink);color:var(--bg);border:0;padding:16px 34px;cursor:pointer;justify-self:start}
button:hover{opacity:.88}
.thanks{grid-column:1/-1;margin:0}
footer{border-top:1px solid var(--line);padding-block:32px 48px;color:var(--muted);font-size:13px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;letter-spacing:.04em}
@media (max-width:560px){form{grid-template-columns:1fr} nav{gap:18px} header.site{justify-content:center}}
/* Mobile layout: centred header, full photos, comfortable spacing */
.home img{max-width:100%}
@media (max-width:700px){
 header.site{flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:14px;padding-block:20px 18px}
 .home{justify-content:center}
 .right{flex-direction:column;justify-content:center;align-items:center;gap:14px;width:100%}
 nav{justify-content:center;gap:20px;flex-wrap:wrap}
 nav a{font-size:11px;letter-spacing:.16em}
 .hero{padding-block:48px}
 .hero img{width:min(320px,86%)}
 .hero p{margin-top:28px;padding-inline:8px}
 section{padding-block:48px}
 .brands{gap:28px}
 .pic{aspect-ratio:4/5;width:100%}
 .brand .role{padding:14px 20px;letter-spacing:.2em}
 .txt{padding:24px 22px 28px;align-items:center;text-align:center}
 .txt .ext,.txt a.more{align-self:center}
 h2{letter-spacing:.2em}
 button[type=submit]{justify-self:stretch}
 footer{justify-content:center;text-align:center}
 main .label{justify-content:center}
 main h2{text-align:center}
 .addr{text-align:center;grid-template-columns:1fr}
 .intro{text-align:center;margin-inline:auto}
}
/* Mobile header: no logo images (the hero already shows the logo); on the home page hide the name too */
@media (max-width:900px){
 html:root header.site a.home img.logo-light,
 html:root header.site a.home img.logo-dark{display:none!important}
 html:root header.site a.home .txt{display:inline}
}
@media (max-width:700px){
 body:has(.hero) header.site a.home{display:none}
 body:has(.hero) header.site{padding-block:18px 16px}
}