/* bentleycucine — design system
   Light only (deliberate: stone, daylight, white). Weights 400/500/600, text >= 12px,
   8pt spacing grid, body measure <= 70ch, square corners, one interactive accent (anthracite). */

:root{
  /* colour: 60% canvas / 30% panel / 10% accent */
  --canvas:   #ffffff;
  --panel:    #f4f2ec;
  --sand:     #cbbfa0;
  --ink:      #201d18;   /* anthracite: text + the single interactive accent */
  --ink-2:    #4f4a3d;
  --ink-3:    #6b6451;   /* meta text, >= 5:1 on canvas and panel */
  --hair:     rgba(32,29,24,.14);

  /* type */
  --font-display: "Futura","Century Gothic","Avenir Next","Segoe UI",system-ui,sans-serif;
  --font-body: system-ui,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --w-regular:400; --w-medium:500; --w-semibold:600;
  --text-meta:.75rem; --text-sm:.875rem; --text-body:1rem;
  --text-h4:1.2rem; --text-h3:1.44rem;
  --text-h2:clamp(1.728rem,3.2vw,2.488rem);
  --text-h1:clamp(2.074rem,5vw,3.583rem);
  --lh-tight:1.2; --lh-body:1.55;

  /* spacing (8pt, 4pt micro) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-6:24px; --s-8:32px;
  --s-12:48px; --s-16:64px; --s-24:96px; --s-32:128px;
  --gutter:clamp(24px,4vw,64px);
  --prose:68ch;
  --header-h:72px;

  --ease:cubic-bezier(.2,.7,.3,1);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--canvas);color:var(--ink);
  font-family:var(--font-body);font-size:var(--text-body);font-weight:var(--w-regular);
  line-height:var(--lh-body);-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--w-medium);line-height:var(--lh-tight);margin:0;text-wrap:balance}
h1{font-size:var(--text-h1);letter-spacing:-.01em}
h2{font-size:var(--text-h2);letter-spacing:-.01em}
h3{font-size:var(--text-h3)}
h4{font-size:var(--text-h4)}
p{margin:0}
a{color:inherit}
.prose{max-width:var(--prose)}
.prose p+p{margin-top:var(--s-4)}
.lead{font-size:1.1rem;color:var(--ink-2);max-width:var(--prose)}
.meta{font-size:var(--text-meta);line-height:1.4;color:var(--ink-3)}

/* focus: visible on light and on photos */
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 5px #fff}
.skip{position:absolute;left:var(--s-4);top:-80px;background:var(--ink);color:#fff;padding:var(--s-3) var(--s-4);z-index:100;text-decoration:none}
.skip:focus{top:var(--s-4)}

.wrap{padding-inline:var(--gutter);max-width:1440px;margin-inline:auto}
.eyebrow{
  display:flex;align-items:center;gap:var(--s-3);
  font-size:var(--text-meta);font-weight:var(--w-medium);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);
}
.eyebrow::before{content:"";width:24px;height:1px;background:var(--ink-3)}

/* buttons: square, no icons, verb-first labels */
.btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 var(--s-8);
  background:var(--ink);color:#fff;border:1px solid var(--ink);border-radius:0;
  font:var(--w-medium) var(--text-sm)/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
  cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease);
}
.btn:hover{background:#fff;color:var(--ink)}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:#fff}
.link{
  font-size:var(--text-sm);font-weight:var(--w-medium);letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:var(--s-1);
}
.link:hover{border-color:var(--sand)}

/* header */
.site-header{
  position:sticky;top:0;z-index:50;height:var(--header-h);background:var(--canvas);border-bottom:1px solid var(--hair);
}
.site-header .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--s-6)}
.wordmark{font-family:var(--font-display);font-size:1.2rem;font-weight:var(--w-medium);letter-spacing:.02em;text-transform:lowercase;text-decoration:none}
.nav{display:flex;align-items:center;gap:var(--s-8)}
.nav a{
  font-size:var(--text-sm);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--ink-2);
  padding-block:var(--s-2);border-bottom:1px solid transparent;transition:color .2s,border-color .2s;
}
.nav a:hover{color:var(--ink);border-color:var(--sand)}
.nav a[aria-current="page"]{color:var(--ink);border-color:var(--ink)}
.nav .btn{min-height:40px;padding:0 var(--s-6);color:#fff;border-color:var(--ink)}
.nav .btn:hover{color:var(--ink)}
.menu-btn{display:none;min-height:44px;padding:0 var(--s-4);background:none;border:1px solid var(--ink);border-radius:0;
  font:var(--w-medium) var(--text-sm)/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);cursor:pointer}
@media (max-width:1040px){
  .menu-btn{display:inline-flex;align-items:center}
  .nav{
    position:fixed;inset:var(--header-h) 0 0 0;background:var(--canvas);flex-direction:column;align-items:flex-start;justify-content:flex-start;
    gap:0;padding:var(--s-8) var(--gutter);overflow-y:auto;transform:translateY(-8px);opacity:0;visibility:hidden;
    transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;
  }
  .nav.is-open{opacity:1;visibility:visible;transform:none}
  .nav a{font-size:1.2rem;width:100%;padding-block:var(--s-4);border-bottom:1px solid var(--hair);letter-spacing:.04em}
  .nav .btn{margin-top:var(--s-6);width:100%;min-height:56px;font-size:var(--text-sm)}
}

/* hero: first thing seen, full width */
.hero{position:relative;width:100%;aspect-ratio:21/10;max-height:calc(100vh - var(--header-h));overflow:hidden;background:var(--panel)}
@media (max-width:700px){.hero{aspect-ratio:4/5;max-height:none}}
.hero__layer{position:absolute;inset:-3%;transition:transform .6s var(--ease);will-change:transform}
.hero__layer img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.1s ease;
  animation:drift 26s ease-in-out infinite alternate;
}
.hero__layer img.is-active{opacity:1}
@keyframes drift{from{transform:scale(1)}to{transform:scale(1.07) translate(-1%,-1%)}}

.hero-copy{padding:var(--s-12) 0 var(--s-16)}
.hero-copy .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--s-12);align-items:end}
@media (max-width:900px){.hero-copy .wrap{grid-template-columns:1fr;gap:var(--s-6)}}
.tabs{display:flex;gap:var(--s-6);margin-bottom:var(--s-6)}
.tabs button{
  all:unset;cursor:pointer;font-size:var(--text-sm);font-weight:var(--w-medium);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);padding-block:var(--s-2);border-bottom:1px solid transparent;transition:color .25s,border-color .25s;
}
.tabs button[aria-pressed="true"]{color:var(--ink);border-color:var(--ink)}
.tabs button:hover{color:var(--ink)}
.tabs button:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.hero-copy h1{max-width:14ch}
.hero-copy__side p{color:var(--ink-2);max-width:48ch}
.hero-copy__actions{display:flex;flex-wrap:wrap;gap:var(--s-4);margin-top:var(--s-6)}
.fade{transition:opacity .3s ease}

/* sections */
.section{padding-block:var(--s-24)}
@media (max-width:700px){.section{padding-block:var(--s-16)}}
.section--panel{background:var(--panel);border-block:1px solid var(--hair)}
.section__head{display:grid;gap:var(--s-4);margin-bottom:var(--s-12)}
.section__head--row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--s-6)}

.statement{padding-block:var(--s-16);border-block:1px solid var(--hair);background:var(--panel)}
.statement .wrap{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--s-6)}
.statement p{font-family:var(--font-display);font-size:clamp(1.44rem,2.6vw,2.074rem);line-height:var(--lh-tight);max-width:28ch}

/* figures: frameless, caption below */
.fig{margin:0}
.fig__img{position:relative;overflow:hidden;background:var(--panel)}
.fig__img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.fig:hover .fig__img img{transform:scale(1.02)}
.fig figcaption{margin-top:var(--s-3);display:flex;justify-content:space-between;gap:var(--s-4);font-size:var(--text-meta);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.fig figcaption b{font-weight:var(--w-regular);text-transform:none;letter-spacing:.01em;color:var(--ink-2);font-size:var(--text-sm)}

.tiles{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-8)}
@media (max-width:760px){.tiles{grid-template-columns:1fr}}
.tile{display:block;text-decoration:none}
.tile .fig__img{aspect-ratio:4/3}
.tile h3{margin-top:var(--s-4)}
.tile p{margin-top:var(--s-2);color:var(--ink-2);max-width:44ch}
.tile .link{display:inline-block;margin-top:var(--s-4)}

.ref-lead .fig__img{aspect-ratio:21/9}
@media (max-width:700px){.ref-lead .fig__img{aspect-ratio:4/3}}
.ref-pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-8);margin-top:var(--s-8)}
@media (max-width:700px){.ref-pair{grid-template-columns:1fr}}
.ref-pair .fig__img{aspect-ratio:4/3}

.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-16);align-items:start}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:var(--s-8)}}
.facts{list-style:none;margin:var(--s-6) 0 0;padding:0;border-top:1px solid var(--hair)}
.facts li{padding:var(--s-4) 0;border-bottom:1px solid var(--hair);color:var(--ink-2)}
.facts li b{display:block;font-weight:var(--w-medium);color:var(--ink)}

.cta-band{padding-block:var(--s-24);text-align:left}
.cta-band .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-8)}
.cta-band h2{max-width:20ch}

/* footer */
.site-footer{border-top:1px solid var(--hair);padding-block:var(--s-16) var(--s-8)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--s-12)}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr;gap:var(--s-8)}}
.site-footer h2{font-family:var(--font-body);font-size:var(--text-meta);font-weight:var(--w-medium);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-bottom:var(--s-4)}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-2)}
.site-footer a{text-decoration:none;color:var(--ink-2)}
.site-footer a:hover{color:var(--ink);text-decoration:underline}
.footer-base{margin-top:var(--s-12);padding-top:var(--s-6);border-top:1px solid var(--hair);display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s-4)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.001ms!important}
  .hero__layer{transform:none!important}
}

/* ---------- subpages ---------- */
.footer-claim{margin-top:var(--s-4);color:var(--ink-2);max-width:36ch}
.page-hero{padding:var(--s-16) 0 var(--s-12)}
.page-hero .wrap{display:grid;gap:var(--s-4)}
.page-hero h1{max-width:16ch}
.page-hero .lead{margin-top:var(--s-2)}
.page-img{width:100%;aspect-ratio:21/10;overflow:hidden;background:var(--panel)}
@media (max-width:700px){.page-img{aspect-ratio:4/3}}
.page-img img{width:100%;height:100%;object-fit:cover}

.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-6)}
@media (max-width:900px){.gallery{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.gallery{grid-template-columns:1fr}}
.gallery .fig__img{aspect-ratio:4/3}
.gallery .fig--tall .fig__img{aspect-ratio:3/4}
.gallery .fig--wide{grid-column:1/-1}
.gallery .fig--wide .fig__img{aspect-ratio:21/9}
@media (max-width:700px){.gallery .fig--wide .fig__img{aspect-ratio:4/3}}
.group+.group{margin-top:var(--s-24)}
.group__head{display:grid;gap:var(--s-3);margin-bottom:var(--s-8);max-width:var(--prose)}
.group__head p{color:var(--ink-2)}

.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-8)}
@media (max-width:760px){.steps{grid-template-columns:1fr}}
.steps li{border-top:1px solid var(--ink);padding-top:var(--s-4)}
.steps li h3{font-size:var(--text-h4)}
.steps li p{margin-top:var(--s-2);color:var(--ink-2)}

/* legal / prose pages */
.legal{padding-block:var(--s-12) var(--s-24)}
.legal .prose h2{font-size:var(--text-h3);margin-top:var(--s-12)}
.legal .prose h3{font-size:var(--text-h4);margin-top:var(--s-8)}
.legal .prose p,.legal .prose ul{margin-top:var(--s-4);color:var(--ink-2)}
.legal .prose ul{padding-left:1.2em}
.legal .prose a{color:var(--ink)}
.notice{background:var(--panel);border:1px solid var(--hair);padding:var(--s-4) var(--s-6);color:var(--ink-2);font-size:var(--text-sm)}

/* contact */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:var(--s-16);align-items:start}
@media (max-width:900px){.contact{grid-template-columns:1fr;gap:var(--s-12)}}
.contact-info ul{list-style:none;margin:var(--s-6) 0 0;padding:0;display:grid;gap:var(--s-4)}
.contact-info li b{display:block;font-weight:var(--w-medium)}
.contact-info a{text-decoration:none;border-bottom:1px solid var(--sand)}
.contact-info a:hover{border-color:var(--ink)}

.form{display:grid;gap:var(--s-6);background:var(--panel);border:1px solid var(--hair);padding:clamp(var(--s-6),4vw,var(--s-12))}
.field{display:grid;gap:var(--s-2)}
.field label{font-size:var(--text-sm);font-weight:var(--w-medium);letter-spacing:.02em}
.field label .opt{font-weight:var(--w-regular);color:var(--ink-3)}
.field input,.field select,.field textarea{
  width:100%;min-height:48px;padding:var(--s-3) var(--s-4);font:inherit;color:var(--ink);background:#fff;
  border:1px solid var(--hair);border-radius:0;transition:border-color .2s;
}
.field textarea{min-height:160px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--ink);outline-offset:0;border-color:var(--ink)}
.field [aria-invalid="true"]{border-color:#9a3b1f}
.field .hint{font-size:var(--text-meta);line-height:1.4;color:var(--ink-3)}
.field .error{font-size:var(--text-sm);color:#9a3b1f}
.field .error[hidden]{display:none}
.field--check{grid-template-columns:auto 1fr;align-items:start;column-gap:var(--s-3)}
.field--check input{width:24px;height:24px;min-height:0;margin:2px 0 0;accent-color:var(--ink)}
.field--check label{font-weight:var(--w-regular);font-size:var(--text-sm);color:var(--ink-2)}
.field--check .error{grid-column:1/-1}
.form .btn{justify-self:start}
.form-status{font-size:var(--text-sm);color:var(--ink-2)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* hit targets >= 44px (viewports) without changing the visual rhythm */
.nav a{display:inline-flex;align-items:center;min-height:44px;padding-block:0}
.tabs button{display:inline-flex;align-items:center;min-height:44px;padding-block:0}
.link{display:inline-flex;align-items:center;min-height:44px;padding-bottom:0;border-bottom:none;box-shadow:inset 0 -1px 0 var(--ink)}
.link:hover{box-shadow:inset 0 -1px 0 var(--sand)}
.site-footer ul{gap:0}
.site-footer ul a{display:inline-flex;align-items:center;min-height:44px}
.site-footer ul li{min-height:44px;display:flex;align-items:center}
.contact-info ul{gap:var(--s-2)}
.contact-info a{display:inline-flex;align-items:center;min-height:44px;border-bottom:none;box-shadow:inset 0 -1px 0 var(--sand)}
.contact-info a:hover{box-shadow:inset 0 -1px 0 var(--ink)}
.legal .prose a,.hero-copy .meta a,.page-hero .lead a,.field--check label a{display:inline-block;padding-block:var(--s-3);margin-block:calc(-1 * var(--s-3))}
.field--check{min-height:44px;align-items:center}
.field--check input{margin:0}
.field--check label{padding-block:var(--s-2)}
.wordmark{display:inline-flex;align-items:center;min-height:44px}
.nav .btn{min-height:44px}
.footer-base a{display:inline-flex;align-items:center;min-height:44px;padding-inline:var(--s-1)}
.footer-base span{display:inline-flex;align-items:center;flex-wrap:wrap;gap:var(--s-1)}

/* logo */
.wordmark img{height:18px;width:auto;display:block}
@media (max-width:480px){.wordmark img{height:15px}}
.site-footer .wordmark img{height:16px}
/* hero: keep the stone, not the ceiling, in the frame */
.hero__layer img{object-position:50% 64%}
/* even galleries: one ratio, two columns, first image wide */
.gallery--even{grid-template-columns:1fr 1fr;gap:var(--s-8)}
@media (max-width:600px){.gallery--even{grid-template-columns:1fr}}
.gallery--even .fig__img{aspect-ratio:3/2}
.gallery--even .fig--wide{grid-column:1/-1}
.gallery--even .fig--wide .fig__img{aspect-ratio:2/1}
@media (max-width:700px){.gallery--even .fig--wide .fig__img{aspect-ratio:3/2}}
/* architects page */
.spec{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-8)}
@media (max-width:760px){.spec{grid-template-columns:1fr}}
.spec__item{border-top:1px solid var(--ink);padding-top:var(--s-4)}
.spec__item h3{font-size:var(--text-h4)}
.spec__item p{margin-top:var(--s-2);color:var(--ink-2);max-width:40ch}
.spec__item .meta{margin-top:var(--s-3)}
.faq{border-top:1px solid var(--hair);max-width:var(--prose)}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:var(--s-4);align-items:center;min-height:56px;padding:var(--s-3) 0;font-weight:var(--w-medium)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-display);font-size:1.4rem;line-height:1;color:var(--ink-3);flex:none;width:24px;text-align:center}
.faq details[open] summary::after{content:"–"}
.faq summary:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.faq .faq__body{padding:0 0 var(--s-6);color:var(--ink-2);max-width:60ch}
.contact-strip{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-8);align-items:center}
@media (max-width:760px){.contact-strip{grid-template-columns:1fr}}
.contact-strip .big{font-family:var(--font-display);font-size:var(--text-h3);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.nav .lang-switch{font-size:var(--text-meta);letter-spacing:.14em;color:var(--ink-3);border-bottom:none;padding-inline:var(--s-2)}
.nav .lang-switch:hover{color:var(--ink)}
@media (max-width:1040px){.nav .lang-switch{font-size:var(--text-sm);border-bottom:none;margin-top:var(--s-4)}}