/* ============================================================
   NARA INTERIORS
   Restrained architectural-practice system: one grotesk, small
   type, near-white ground, photography carries the page.
   Retains the .reveal fix that stopped the Work grid rendering
   blank when JavaScript failed.
   ============================================================ */

:root{
  --bg:#F2EFE7;          /* warm stone, matched to the Nara portfolio ground */
  --ink:#28211D;         /* brand ink, sampled from the Nara wordmark */
  --muted:#6E6559;       /* warm charcoal — 4.98:1 on the stone ground (AA) */
  --hair:rgba(40,33,29,.15);
  --ease:cubic-bezier(.4,0,.2,1);
  /* Editorial face. Set this to "Schibsted Grotesk", sans-serif to remove
     Fraunces from the whole site in one line. */
  --font-display:Fraunces,Georgia,serif;

  --gutter:clamp(20px,4vw,88px);
  --measure:60ch;

  --fs-nav:13px;
  --fs-meta:12px;
  --fs-body:15px;
  --fs-name:15px;
  --fs-label:12px;
  --fs-title:clamp(22px,2.4vw,32px);
  --fs-display:clamp(28px,4.2vw,54px);
  --fs-statement:clamp(24px,3vw,38px);

  --s-1:clamp(10px,1.2vw,18px);
  --s-2:clamp(20px,2.4vw,36px);
  --s-3:clamp(36px,5vw,72px);
  --s-4:clamp(64px,9vw,140px);
  --s-5:clamp(96px,14vw,210px);
  --header-h:62px;
}
@media (max-width:640px){
  :root{
    --s-3:clamp(26px,6vw,38px);
    --s-4:clamp(44px,11vw,64px);
    --s-5:clamp(56px,14vw,80px);
    --header-h:56px;
  }
}

*,*::before,*::after{box-sizing:border-box}
/* Stone grain. Deliberately at the edge of perception — remove this whole
   block to drop it entirely. */
body::before{content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:url("../images/nara-stone-texture.jpg"); background-size:450px auto;
  mix-blend-mode:soft-light; opacity:.8}
body > *{position:relative; z-index:1}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Schibsted Grotesk",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  font-size:var(--fs-body); line-height:1.58; font-weight:400;
  letter-spacing:.002em; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{margin:0; font-weight:400; font-size:inherit; line-height:inherit}
p{margin:0}
ul{margin:0; padding:0; list-style:none}

.wrap{padding-inline:var(--gutter)}
.text{max-width:var(--measure)}
.title{font-family:var(--font-display); font-size:var(--fs-title); line-height:1.18; letter-spacing:-.008em; font-weight:300}
.display{font-family:var(--font-display); font-weight:300; font-size:var(--fs-display); line-height:1.06; letter-spacing:-.018em}
.statement{font-family:var(--font-display); font-weight:300; font-size:var(--fs-statement); line-height:1.18; letter-spacing:-.012em; max-width:20ch}
.statement-wide{max-width:26ch}
.label{font-size:var(--fs-label); letter-spacing:.09em; text-transform:uppercase; color:var(--muted)}
.meta{font-size:var(--fs-meta); color:var(--muted); letter-spacing:.01em}
.body{font-size:var(--fs-body); line-height:1.6}
.body p + p{margin-top:1.1em}
.dim{color:var(--muted)}
.link{display:inline-block; font-size:var(--fs-meta); letter-spacing:.01em; color:var(--muted); padding-block:5px; transition:color .3s var(--ease)}
.link:hover{color:var(--ink)}

/* ---------- header ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:60; height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between;
  padding-inline:var(--gutter); background:transparent;
  transition:background .45s var(--ease), color .45s var(--ease);
}
.site-header{background:transparent}
.site-header.solid{background:var(--bg)}
body.hero-top .site-header:not(.solid){color:#F4F0E8}
body.hero-top .site-header:not(.solid) .wordmark img{filter:brightness(0) invert(1)}
.wordmark{display:flex; align-items:center; line-height:0; min-height:44px}
.site-footer .wordmark,.hero-id .wordmark{min-height:0; display:block}
.wordmark img{width:88px; height:auto; display:block}
.site-footer .wordmark img{width:96px}
.site-nav{display:flex; gap:clamp(18px,2.2vw,34px)}
.site-nav a{font-size:var(--fs-nav); letter-spacing:.02em; color:inherit; opacity:.62; padding-block:.5rem; transition:opacity .3s var(--ease)}
.site-nav a:hover,.site-nav a[aria-current="page"]{opacity:1}

.nav-toggle{display:none; width:34px; height:34px; margin-right:-8px; padding:12px 5px; background:none; border:0; cursor:pointer}
.nav-toggle span{display:block; height:1px; background:currentColor; transition:transform .35s var(--ease),opacity .2s}
.nav-toggle span + span{margin-top:5px}
.mobile-nav{
  position:fixed; inset:0; z-index:55; background:var(--bg); color:var(--ink);
  display:flex; flex-direction:column; justify-content:center; gap:2px;
  padding-inline:var(--gutter); opacity:0; visibility:hidden;
  transition:opacity .4s var(--ease), visibility .4s;
}
.mobile-nav a{font-size:20px; letter-spacing:.01em; padding:.42em 0}
body.nav-open .mobile-nav{opacity:1; visibility:visible}
body.nav-open{overflow:hidden}
body.nav-open .site-header{color:var(--ink); background:transparent}
body.nav-open .nav-toggle{position:relative; z-index:56}
body.nav-open .nav-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.nav-open .nav-toggle span:nth-child(2){opacity:0}
body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
body.nav-open .wordmark{position:relative; z-index:56}
@media (max-width:820px){ .site-nav{display:none} .nav-toggle{display:block} }

main{padding-top:var(--header-h)}
main.flush{padding-top:0}

/* ---------- images: natural ratio, no crop, no decoration ---------- */
.media{position:relative; overflow:hidden; background:rgba(40,33,29,.055)}
.media img{width:100%; height:100%; object-fit:cover; display:block; transition:opacity .5s var(--ease)}
a:hover .media img{opacity:.86}

/* ---------- reveal: visible by default; JS only adds a faint fade ---------- */
.reveal{opacity:1}
html.js .reveal{opacity:0; transition:opacity .7s var(--ease)}
html.js .reveal.in{opacity:1}
@media (prefers-reduced-motion:reduce){
  html.js .reveal{opacity:1 !important; transition:none}
  .media img{transition:none}
}

/* ---------- homepage hero ----------
   The photograph is left completely clean: no scrim, no overlaid type.
   The identification sits below it on the page ground, where it always reads. */
.hero{position:relative; width:100vw; max-width:100%; height:100vh; min-height:100svh;
      margin:0; padding:0; overflow:hidden; background:var(--bg)}
@supports (height:100svh){ .hero{height:100svh} }
.hero > img{position:absolute; inset:0; width:100%; height:100%;
      object-fit:cover; object-position:center; display:block; margin:0; padding:0; max-width:none}
/* restrained scrims so the wordmark and statement read on any hero image */
.hero::before{content:""; position:absolute; inset:0 0 auto 0; height:26%; z-index:1;
  background:linear-gradient(180deg,rgba(24,20,16,.42) 0%,rgba(24,20,16,0) 100%)}
.hero::after{content:""; position:absolute; inset:auto 0 0 0; height:52%; z-index:1;
  background:linear-gradient(180deg,rgba(24,20,16,0) 0%,rgba(24,20,16,.66) 100%)}
.hero-id{position:absolute; left:var(--gutter); right:var(--gutter);
  bottom:clamp(28px,5vw,64px); z-index:2; color:#F4F0E8}
.hero-id .display{font-size:clamp(17px,1.9vw,25px); line-height:1.3; letter-spacing:-.004em; max-width:21ch; text-shadow:0 1px 26px rgba(24,20,16,.6)}
.hero-id .hero-meta{margin-top:.85rem; font-size:var(--fs-meta); letter-spacing:.14em;
  text-transform:uppercase; color:rgba(244,240,232,.94); text-shadow:0 1px 22px rgba(24,20,16,.65)}
.hero-id .wordmark{margin-bottom:clamp(16px,2.2vw,28px)}
.hero-id .wordmark img{width:clamp(132px,14vw,224px); filter:brightness(0) invert(1); opacity:.96}


/* ---------- page head ---------- */
.page-head{padding-block:var(--s-4) var(--s-3)}
.page-head .title{margin-top:var(--s-1); max-width:22ch}
.page-head .body{margin-top:var(--s-2); color:var(--muted)}

/* ---------- work archive ---------- */
.section{padding-block:var(--s-4)}
.section-top{padding-block:var(--s-4) var(--s-2)}
.section-head{display:flex; align-items:baseline; justify-content:space-between; gap:var(--s-2); margin-bottom:var(--s-2)}

/* Editorial index: a repeating four-step rhythm of large and smaller cells,
   so the archive never reads as a catalogue of equal thumbnails. The spans are
   assigned by nth-child, not hard-coded per project, so removing a project
   re-flows the rhythm instead of leaving a hole. */
.index{display:grid; grid-template-columns:repeat(12,1fr); gap:var(--s-4) var(--s-2); align-items:start}
.index > *{grid-column:1 / -1}
@media (min-width:821px){
  .index > *:nth-child(4n+1){grid-column:1 / 8}
  .index > *:nth-child(4n+2){grid-column:9 / 13; margin-top:var(--s-5)}
  .index > *:nth-child(4n+3){grid-column:1 / 6; margin-top:var(--s-3)}
  .index > *:nth-child(4n+4){grid-column:7 / 13}
}
@media (max-width:820px){ .index{grid-template-columns:1fr; gap:var(--s-3)} }
.project{display:block}
.project .caption{padding-top:12px; display:flex; flex-direction:column; gap:2px}
.project .name{font-family:"Schibsted Grotesk",sans-serif; font-size:var(--fs-name); font-weight:400; letter-spacing:.018em}
.project .place{font-size:var(--fs-meta); color:var(--muted)}

/* ---------- uniform 2x2 grid (homepage Selected Work Studies) ---------- */
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-3) var(--s-2)}
.grid-2 .media{aspect-ratio:4/5 !important; height:auto}
/* The Son Vida cover carries a large area of plain plaster above the sofa, so at
   grid scale its top half reads empty. To crop that out, swap the ratio above to
   1/1 and uncomment the two rules below — the four covers stay identical. */
/* .grid-2 .project:nth-child(1) .media img{object-position:center 72%} */
/* .grid-2 .project:nth-child(2) .media img{object-position:center 40%} */
.grid-2 .media img{width:100%; height:100%; object-fit:cover; object-position:center}
@media (max-width:820px){ .grid-2{grid-template-columns:1fr; gap:var(--s-3)} }

/* ---------- current projects: image-led, square boxes, no cards ---------- */
.current-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-4) var(--s-2); align-items:start}
@media (max-width:820px){ .current-grid{grid-template-columns:1fr; gap:var(--s-3)} }
.current-grid .media{aspect-ratio:1/1 !important}
.current-grid .media img{width:100%; height:100%; object-fit:cover}
/* the technical drawing is contained, not cropped, and prints straight onto the ground */
.media.plan{background:transparent}
.media.plan img{object-fit:contain !important; padding:5%}
.current-item .caption{display:block; padding-top:12px}
.current-item .n{font-family:"Schibsted Grotesk",sans-serif; font-size:clamp(16px,1.45vw,18px); line-height:1.25; letter-spacing:.012em; display:block; margin-top:2px}
.current-item .p,.current-item .t{display:block; font-size:var(--fs-meta); color:var(--muted); margin-top:3px}
.current-item .d{display:block; font-size:var(--fs-meta); color:var(--muted); line-height:1.65; margin-top:10px; max-width:44ch}

/* ---------- project page ---------- */
.project-head{padding-block:var(--s-4) var(--s-3)}
.project-head .title{max-width:20ch}
.project-head .meta-lines{margin-top:10px; font-size:var(--fs-meta); color:var(--muted); line-height:1.75}
.project-head .body{margin-top:var(--s-2); color:var(--muted)}
.project-facts{margin-top:var(--s-2); font-size:var(--fs-meta); color:var(--muted); line-height:1.9}
.project-facts span{display:inline-block; min-width:84px; color:var(--muted); opacity:.72}

.sequence{display:flex; flex-direction:column; gap:var(--s-3)}
.seq-full{width:100%}
.seq-pair{display:grid; grid-template-columns:1fr 1fr; gap:var(--s-2)}
.seq-narrow{width:min(58%,860px)}
.seq-narrow.right{margin-left:auto}
@media (max-width:820px){
  .seq-pair{grid-template-columns:1fr; gap:var(--s-3)}
  .seq-narrow{width:100%}
}

.next{display:flex; align-items:baseline; justify-content:space-between; gap:var(--s-2);
      padding-block:var(--s-3); margin-top:var(--s-4); border-top:1px solid var(--hair)}
.next .name{font-family:"Schibsted Grotesk",sans-serif; font-size:var(--fs-name); letter-spacing:.018em}

/* ---------- simple lists (services, studio facts) ---------- */
.list{display:grid; gap:var(--s-2)}
.list-row{display:grid; grid-template-columns:minmax(0,24ch) minmax(0,var(--measure)); gap:var(--s-2)}
.list-row .n{font-family:"Schibsted Grotesk",sans-serif; font-size:var(--fs-name); letter-spacing:.012em}
.list-row > .n:only-child{grid-column:1 / -1}
.list-row .d{font-size:var(--fs-body); color:var(--muted); line-height:1.6}
@media (max-width:820px){ .list-row{grid-template-columns:1fr; gap:6px} }

/* current projects — a quiet studio update, no cards, no headings */
.register{display:grid}
.register-row{display:grid; grid-template-columns:3.5ch minmax(0,29ch) minmax(0,54ch);
              gap:var(--s-2); align-items:start; padding-block:var(--s-2)}
.register-row .num{font-size:var(--fs-meta); color:var(--muted)}
.register-row .n{display:block; font-family:"Schibsted Grotesk",sans-serif;
                 font-size:var(--fs-name); letter-spacing:.018em}
.register-row .p,.register-row .t{display:block; font-size:var(--fs-meta); color:var(--muted); margin-top:3px}
.register-row .d{font-size:var(--fs-body); color:var(--muted); line-height:1.6}
@media (max-width:820px){
  .register-row{grid-template-columns:1fr; gap:8px; padding-block:var(--s-2)}
  .register-row .num{margin-bottom:-4px}
}

.pairs{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-3) var(--s-2); align-items:start}
@media (max-width:820px){ .pairs{grid-template-columns:1fr} }

/* ---------- footer ---------- */
.site-footer{padding-block:var(--s-4) var(--s-2); border-top:1px solid var(--hair); margin-top:var(--s-4)}
.footer-grid{display:grid; grid-template-columns:1.7fr repeat(4,1fr); gap:var(--s-3) var(--s-2)}
.footer-brand{grid-column:span 1}
@media (max-width:1100px){ .footer-grid{grid-template-columns:1fr 1fr 1fr} .footer-brand{grid-column:1 / -1} }
@media (max-width:820px){ .footer-grid{grid-template-columns:1fr 1fr} }
@media (max-width:460px){ .footer-grid{grid-template-columns:1fr} }
.footer-grid h4{font-size:var(--fs-meta); color:var(--muted); margin-bottom:10px; letter-spacing:.02em}
.footer-grid a,.footer-grid p{display:block; font-size:var(--fs-meta); color:var(--ink); padding-block:3px; opacity:.82; transition:opacity .3s var(--ease)}
@media (max-width:820px){
  .footer-grid a{padding-block:9px}
  .closing .lines a{padding-block:8px; display:inline-block}
  .closing .lines .social a{padding-block:8px}
  .crumbs a{padding-block:6px; display:inline-block}
  .link{padding-block:8px; display:inline-block}
  .list-row .d a{padding-block:6px; display:inline-block}
  .footer-bottom a{padding-block:8px; display:inline-block}
}
.footer-grid a:hover{opacity:1}
.footer-bottom a{display:inline-block; padding-block:5px}
.footer-bottom{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px;
               margin-top:var(--s-3); font-size:var(--fs-meta); color:var(--muted)}

/* ---------- editorial furniture ---------- */
.rail{display:flex; align-items:center; justify-content:center; gap:1rem;
      padding-block:clamp(14px,1.6vw,22px); border-block:1px solid var(--hair);
      font-size:var(--fs-meta); letter-spacing:.22em; text-transform:uppercase;
      color:var(--muted); text-align:center}
.bleed{width:100%; margin:0; padding:0}
.bleed img{width:100%; height:100%; object-fit:cover; display:block}
.bleed-tall{aspect-ratio:21/9}
@media (max-width:820px){ .bleed-tall{aspect-ratio:4/3} }
.editorial{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s-3) var(--s-4); align-items:center}
.editorial.narrow-left{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
@media (max-width:860px){ .editorial,.editorial.narrow-left{grid-template-columns:1fr; gap:var(--s-2)} }
.numbered{display:grid}
.numbered-row{display:grid; grid-template-columns:4ch minmax(0,1fr); gap:var(--s-2);
              align-items:baseline; padding-block:var(--s-2); border-bottom:1px solid var(--hair)}
.numbered-row:first-child{border-top:1px solid var(--hair)}
.numbered-row .num{font-size:var(--fs-meta); color:var(--muted)}
.numbered-row .n{font-size:clamp(15px,1.5vw,19px)}
.closing{padding-block:var(--s-5) var(--s-5)}
.closing .sign-off{font-family:var(--font-display); font-weight:300;
  font-size:clamp(20px,2.1vw,28px); line-height:1.3; letter-spacing:-.008em; max-width:18ch}
.closing .lines{margin-top:var(--s-3); display:grid; gap:.35rem; font-size:var(--fs-body)}
.closing .lines .social{margin-top:.35rem; font-size:var(--fs-meta); color:var(--muted)}
.closing .lines .social a{display:inline-block; padding-block:5px}
.closing .lines > a{display:inline-block; padding-block:5px; width:fit-content}
.closing .lines a:hover{opacity:.62}

/* ---------- misc ---------- */
.crumbs{font-size:var(--fs-meta); color:var(--muted); padding-top:var(--s-2)}
.crumbs a{border-bottom:1px solid transparent; transition:border-color .3s var(--ease)}
.crumbs a:hover{border-bottom-color:var(--muted)}
.crumbs span[aria-current]{color:var(--ink)}
.visually-hidden{position:absolute!important; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0}
.skip{position:absolute; left:-9999px}
.skip:focus{left:var(--gutter); top:8px; z-index:100; background:var(--ink); color:var(--bg); padding:8px 14px; font-size:var(--fs-meta)}
:focus-visible{outline:1px solid var(--ink); outline-offset:3px}

/* Fraunces is reserved for the editorial statements. Names and technical
   information stay in the grotesk so the site never reads as a fashion title. */
.statement.plain{font-family:"Schibsted Grotesk",sans-serif; font-weight:400;
  font-size:clamp(19px,2vw,26px); letter-spacing:-.004em}

/* ============================================================
   ADDITIONS — language switch, consent, enquiry form, process,
   FAQ, client list, testimonials, legal pages, CTAs.
   Everything below reuses the existing tokens; no new colours,
   no new typefaces, no change to any rule above this line.
   ============================================================ */

.visually-hidden{position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0}

/* ---------- language switch ---------- */
.lang-switch{display:inline-flex; align-items:center; gap:6px; margin-left:var(--s-2);
  font-size:var(--fs-meta); letter-spacing:.06em}
.lang-switch a,.lang-switch .lang-on{padding:2px 1px; opacity:.55; transition:opacity .3s var(--ease)}
.lang-switch a:hover{opacity:1}
.lang-switch .lang-on{opacity:1}
.lang-switch .lang-sep{opacity:.3}
.lang-switch-mobile{margin-left:0; margin-top:var(--s-2); font-size:14px}
.lang-switch-mobile a,.lang-switch-mobile .lang-on{padding:10px 6px}
.footer-bottom .lang-switch{margin-left:0}

/* ---------- calls to action ---------- */
.cta-band{padding-block:var(--s-3); border-top:1px solid var(--hair); margin-top:var(--s-3)}
.cta-line{font-family:var(--font-display); font-weight:300;
  font-size:var(--fs-title); line-height:1.2; max-width:24ch}
.cta-links{margin-top:var(--s-2); font-size:var(--fs-meta)}
.closing .lines .link{display:block; margin-bottom:6px}

/* ---------- how we work ---------- */
.stages{display:grid; gap:1px; background:var(--hair); border-block:1px solid var(--hair);
  margin-top:var(--s-2)}
.stage{display:grid; grid-template-columns:56px 1fr; gap:var(--s-2);
  padding:var(--s-2) 0; background:var(--bg); align-items:start}
.stage .num{font-size:var(--fs-meta); color:var(--muted); padding-top:2px}
.stage .n{font-size:var(--fs-name); font-weight:400; letter-spacing:.01em}
.stage .d{font-size:var(--fs-body); color:var(--muted); margin-top:6px; max-width:62ch;
  line-height:1.6}
@media (min-width:860px){
  .stage{grid-template-columns:56px 22ch 1fr; align-items:baseline}
  .stage > div{display:contents}
  .stage .d{margin-top:0}
}

/* ---------- who we work with ---------- */
.client-list{list-style:none; margin-top:var(--s-2); display:grid; gap:1px;
  background:var(--hair); border-block:1px solid var(--hair)}
.client-list li{background:var(--bg); padding:14px 0; font-size:var(--fs-body)}

/* ---------- FAQ ---------- */
.faq{margin-top:var(--s-2); border-top:1px solid var(--hair)}
.faq-item{border-bottom:1px solid var(--hair)}
.faq-item summary{list-style:none; cursor:pointer; padding:18px 32px 18px 0;
  position:relative; font-size:var(--fs-body); line-height:1.4}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:""; position:absolute; right:6px; top:50%; width:9px;
  height:9px; margin-top:-6px; border-right:1px solid currentColor;
  border-bottom:1px solid currentColor; transform:rotate(45deg);
  transition:transform .3s var(--ease); opacity:.5}
.faq-item[open] summary::after{transform:rotate(-135deg); margin-top:-2px}
.faq-item summary:focus-visible{outline:1px solid var(--ink); outline-offset:2px}
.faq-a{padding:0 0 20px; max-width:66ch}
.faq-a p{font-size:var(--fs-body); color:var(--muted); line-height:1.65}

/* ---------- testimonials ---------- */
.quotes{margin-top:var(--s-2); display:grid; gap:var(--s-3)}
@media (min-width:860px){ .quotes{grid-template-columns:1fr 1fr} }
.quote p{font-family:var(--font-display); font-weight:300; font-size:var(--fs-title);
  line-height:1.35; max-width:30ch}
.quote footer{margin-top:var(--s-2); font-size:var(--fs-meta); color:var(--muted)}
.quote .who{display:block}
.quote .what{display:block; opacity:.75; margin-top:2px}

/* ---------- location links ---------- */
.loc-links{margin-top:var(--s-2); display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-2)}

/* ---------- footer additions ---------- */
.foot-h{font-size:var(--fs-meta); color:var(--muted); margin-bottom:10px;
  letter-spacing:.02em; font-weight:400}
.foot-link{display:block; font-size:var(--fs-meta); color:var(--ink); padding-block:3px;
  opacity:.82; background:none; border:0; padding-inline:0; cursor:pointer;
  font:inherit; font-size:var(--fs-meta); text-align:left;
  transition:opacity .3s var(--ease)}
.foot-link:hover{opacity:1}
.footer-bottom .copyright{max-width:70ch; line-height:1.5}
@media (max-width:820px){ .foot-link{padding-block:9px} }

/* ---------- legal pages ---------- */
.legal-notice{font-size:var(--fs-meta); color:var(--muted); border:1px solid var(--hair);
  padding:14px 16px; max-width:72ch; line-height:1.6}
.legal{margin-top:var(--s-3); max-width:76ch}
.legal-sec{margin-bottom:var(--s-3)}
.legal-sec h2{font-family:var(--font-display); font-weight:300; font-size:var(--fs-title);
  line-height:1.25; margin-bottom:var(--s-1)}
.legal-sec p{font-size:var(--fs-body); line-height:1.7; margin-bottom:.9em; color:var(--ink)}
.legal-sec ul{margin:0 0 1em 1.1em; list-style:disc}
.legal-sec li{font-size:var(--fs-body); line-height:1.7; margin-bottom:.5em}
.legal-sec a{text-decoration:underline; text-underline-offset:3px}
.table-wrap{overflow-x:auto; margin:var(--s-2) 0; -webkit-overflow-scrolling:touch}
.legal-table{border-collapse:collapse; width:100%; min-width:620px; font-size:var(--fs-meta)}
.legal-table th,.legal-table td{border:1px solid var(--hair); padding:10px 12px;
  text-align:left; vertical-align:top; line-height:1.5}
.legal-table th{font-weight:500; color:var(--muted)}

/* ---------- cookie consent ---------- */
.cc{position:fixed; inset:auto 0 0 0; z-index:70; padding:var(--gutter);
  padding-block:var(--s-2); pointer-events:none}
.cc-panel{pointer-events:auto; margin-inline:auto; max-width:760px; background:var(--bg);
  border:1px solid var(--hair); padding:var(--s-2);
  box-shadow:0 18px 50px -28px rgba(40,33,29,.45)}
.cc-title{font-size:var(--fs-name); font-weight:400; letter-spacing:.01em}
.cc-body{font-size:var(--fs-meta); color:var(--muted); line-height:1.65;
  margin-top:8px; max-width:70ch}
.cc-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:var(--s-2)}
/* All three choices are the same button. Rejecting is not made harder or
   quieter than accepting — same size, same weight, same colour. */
.cc-btn{font:inherit; font-size:var(--fs-meta); letter-spacing:.02em; cursor:pointer;
  background:none; color:var(--ink); border:1px solid var(--ink);
  padding:11px 16px; min-height:44px; flex:1 1 auto; min-width:150px;
  transition:background .3s var(--ease), color .3s var(--ease)}
.cc-btn:hover{background:var(--ink); color:var(--bg)}
.cc-cat{border-top:1px solid var(--hair); padding-block:14px}
.cc-cat-head{display:flex; align-items:center; justify-content:space-between; gap:12px}
.cc-cat-name{font-size:var(--fs-body)}
.cc-always{font-size:var(--fs-meta); color:var(--muted)}
.cc-cat-desc{font-size:var(--fs-meta); color:var(--muted); line-height:1.6; margin-top:6px;
  max-width:70ch}
.cc-switch{display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  min-height:44px}
.cc-switch input{width:18px; height:18px; accent-color:var(--ink); cursor:pointer}
@media (max-width:520px){ .cc-btn{flex:1 1 100%} }

/* ---------- enquiry form ---------- */
.enquiry{margin-top:var(--s-3); max-width:900px}
.field-grid{display:grid; gap:var(--s-2)}
@media (min-width:720px){ .field-grid{grid-template-columns:1fr 1fr} }
.field{display:flex; flex-direction:column; border:0; padding:0; margin:0; min-width:0}
.field-wide{grid-column:1 / -1; margin-top:var(--s-2)}
.field label,.field legend{font-size:var(--fs-meta); color:var(--muted);
  letter-spacing:.02em; margin-bottom:7px; padding:0}
.field .req,.field .opt{font-size:11px; letter-spacing:.04em; opacity:.7}
.field .hint{font-size:var(--fs-meta); color:var(--muted); opacity:.85; margin-bottom:7px;
  line-height:1.5; max-width:52ch}
.field input,.field select,.field textarea{font:inherit; font-size:var(--fs-body);
  color:var(--ink); background:transparent; border:0; border-bottom:1px solid var(--hair);
  border-radius:0; padding:10px 0; min-height:44px; width:100%;
  transition:border-color .3s var(--ease)}
.field textarea{resize:vertical; line-height:1.6}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;
  border-bottom-color:var(--ink)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:1px solid var(--ink); outline-offset:3px}
.field select{appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 11px) calc(50% + 1px),calc(100% - 6px) calc(50% + 1px);
  background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:26px}
.field input[type=file]{border-bottom:0; padding-left:0; font-size:var(--fs-meta);
  color:var(--muted)}
.field input[type=file]::file-selector-button{font:inherit; font-size:var(--fs-meta);
  background:none; border:1px solid var(--hair); color:var(--ink); padding:9px 13px;
  margin-right:12px; cursor:pointer; min-height:40px}
.field[data-invalid] input,.field[data-invalid] select,.field[data-invalid] textarea{
  border-bottom-color:#8C3A2B}
.field .err{font-size:var(--fs-meta); color:#8C3A2B; margin-top:7px; line-height:1.5}
.form-error{font-size:var(--fs-body); color:#8C3A2B; border:1px solid #8C3A2B;
  padding:12px 14px; margin-bottom:var(--s-2)}
.checks{display:grid; gap:2px; margin-top:4px}
@media (min-width:720px){ .checks{grid-template-columns:1fr 1fr} }
.check{display:flex; align-items:flex-start; gap:11px; cursor:pointer; padding:9px 0;
  min-height:44px; font-size:var(--fs-body); color:var(--ink); margin-bottom:0}
.check input{width:17px; height:17px; margin-top:2px; flex:0 0 auto;
  accent-color:var(--ink); cursor:pointer; min-height:0}
.check span{line-height:1.5}
.check-privacy{align-items:flex-start; max-width:70ch}
.check-privacy a{text-decoration:underline; text-underline-offset:3px}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.submit-row{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2);
  margin-top:var(--s-3); border-top:1px solid var(--hair); padding-top:var(--s-2)}
.btn{font:inherit; font-size:var(--fs-meta); letter-spacing:.06em; text-transform:uppercase;
  cursor:pointer; background:var(--ink); color:var(--bg); border:1px solid var(--ink);
  padding:14px 26px; min-height:48px; transition:opacity .3s var(--ease)}
.btn:hover{opacity:.85}
.btn[aria-busy="true"]{opacity:.6; cursor:progress}
.privacy-note{font-size:var(--fs-meta); color:var(--muted); line-height:1.6;
  max-width:46ch; flex:1 1 260px}

/* ---------- image protection ---------- */
/* Applies to portfolio imagery only, via data-protect. Text, links, buttons and
   form fields elsewhere keep normal selection and the normal context menu. */
img[data-protect]{-webkit-user-drag:none; -webkit-touch-callout:none;
  user-select:none; -webkit-user-select:none; pointer-events:none}

/* ---------- enquiry confirmation / failure panels ---------- */
.form-sent,.form-failed{border:1px solid var(--hair); padding:var(--s-2);
  margin-bottom:var(--s-2); max-width:60ch}
.form-sent{border-color:var(--ink)}
.form-failed{border-color:#8C3A2B}
.form-sent:focus-visible,.form-failed:focus-visible{outline:1px solid var(--ink);
  outline-offset:3px}
.sent-title{font-family:var(--font-display); font-weight:300;
  font-size:var(--fs-title); line-height:1.25}
.sent-body{font-size:var(--fs-body); margin-top:10px}
.sent-note{font-size:var(--fs-meta); color:var(--muted); line-height:1.65; margin-top:10px}
.btn-quiet{background:none; color:var(--ink); border:1px solid var(--ink);
  display:inline-block; text-decoration:none}
.btn-quiet:hover{background:var(--ink); color:var(--bg)}