/* ==========================================================================
   AV Acoustics — inner pages
   A calm template for the 87 pages under the home page: a readable measure
   for technical writing, a breadcrumb that mirrors the URL, and siblings
   listed at the foot so every branch is reachable. Loaded after site.css,
   which supplies the shell (header, overlay menu, footer, type, palette).
   ========================================================================== */

.page{position:relative;z-index:2;background:var(--paper);
  /* the reading column, and the width media may use */
  --reading:68ch; --wide:1180px;}

/* --------------------------------- head --------------------------------- */
.page-head{
  padding:calc(var(--head-h) + clamp(14px,2.4vh,36px)) var(--pad) clamp(26px,4vh,52px);
  border-bottom:1px solid var(--rule);
}
/* The ASA mark under the logo, as on the home page: the head starts at the
   logo's lower edge (its artwork ends 98/116 of the way down the image), and
   the mark sits there with the same gap above and below it. Same size as on
   the home page, so it stays smaller than the logo. */
.page-head:has(> .page-assoc){padding-top:calc(var(--head-pad) + var(--logo-h) * 98 / 116 + var(--asa-gap));}
.page-assoc{margin-bottom:var(--asa-gap);grid-column:1 / -1;justify-self:start;}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:clamp(12px,2vh,24px);}
.crumbs a,.crumbs span{font-family:var(--sans);font-weight:400;font-size:clamp(15px,calc(1*var(--fu)),26px);color:var(--grey);}
.crumbs a:hover{color:var(--red);}
.crumbs i{font-style:normal;color:var(--steel);}
.crumbs [aria-current]{color:var(--steel);}

.page-eyebrow{
  display:block;margin-bottom:clamp(10px,1.4vh,18px);
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(18px,calc(1.4*var(--fu)),36px);color:var(--grey);
}
.page-eyebrow em{font-style:italic;color:var(--red);}
/* the title runs the width of the page, as the reference sets its headings */
.page-title{
  margin:0;
  font-family:var(--sans);font-weight:300;letter-spacing:0;text-wrap:balance;
  font-size:clamp(38px,calc(6.4*var(--fu)),164px);line-height:1.04;
}
/* a case study's subtitle, between its title and introduction */
.page-sub{
  margin:clamp(10px,1.6vh,20px) 0 0;max-width:40ch;
  font-family:var(--serif);font-style:italic;font-weight:400;color:var(--grey);
  font-size:clamp(20px,calc(1.7*var(--fu)),44px);line-height:1.3;text-wrap:balance;
}
.page-lede{
  margin-top:clamp(14px,2.2vh,26px);max-width:52ch;
  font-weight:400;font-size:clamp(18px,calc(1.5*var(--fu)),38px);line-height:1.5;color:var(--grey);text-wrap:pretty;
}

/* ------------------------- the page's lead picture ------------------------ *
   A title and three lines of lede left the right-hand half of the opening
   screen empty. Where a page has a photograph, it sits beside the title
   instead of further down: the text keeps its reading measure on the left
   and the picture closes the head on the right, bottom edges aligned.
   ------------------------------------------------------------------------- */
.page-hero{margin:clamp(24px,4vh,40px) 0 0;}
.page-hero img{
  width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--rule);
}
/* "whole" — show the entire photograph, never a crop of it, at every width.
   The height is capped so a tall portrait does not push the page's own
   content off the opening screen. */
.page-hero--whole img{
  aspect-ratio:auto;height:auto;object-fit:contain;background:none;
  /* Tall enough to read the room in, still short enough that the page's own
     content is not pushed off the opening screen. */
  max-height:clamp(380px,60vh,700px);
}
.page-hero figcaption{
  margin-top:12px;font-size:clamp(14px,calc(.92*var(--fu)),24px);color:var(--steel);line-height:1.45;
}
@media(min-width:1000px){
  /* The picture takes its height from the text beside it rather than from a
     fixed ratio: bottom-aligning a tall image pushed the title down the page
     and opened a band of empty paper under the breadcrumb. */
  .page-head--img{
    display:grid;align-items:stretch;
    grid-template-columns:minmax(0,1fr) minmax(0,40%);
    column-gap:clamp(32px,5vw,110px);
  }
  .page-head--img .crumbs{grid-column:1 / -1;}
  .page-head--img .page-head-text{grid-column:1;align-self:center;}
  .page-head--img .page-hero{grid-column:2;margin:0;display:flex;flex-direction:column;}
  /* flex-basis 0 so the photograph's own proportions do not set the row
     height — it stretches to whatever the title and lede beside it need. */
  .page-head--img .page-hero img{
    flex:1 1 0;height:0;aspect-ratio:auto;
    min-height:clamp(240px,32vh,480px);
  }
  /* A picture marked "whole" is never cut: it keeps its own proportions and
     the column narrows instead, so a tall photograph does not turn the head
     into a page of its own. */
  .page-head--img:has(.page-hero--whole){grid-template-columns:minmax(0,1fr) minmax(0,34%);}
  .page-head--img .page-hero--whole img{
    flex:0 0 auto;height:auto;min-height:0;object-fit:contain;
  }
  /* the lede no longer has the full width to run into, so it may use its
     own column rather than a 52ch measure inside a narrower track */
  .page-head--img .page-lede{max-width:46ch;}
}
@media(min-width:1500px){
  .page-head--img{grid-template-columns:minmax(0,1fr) minmax(0,44%);}
}

/* -------------------------------- body ---------------------------------- */
/* one column of prose at a readable measure, with room for wider figures */
/* Each section is a heading on the left and its text on the right, so the
   page is filled across its width rather than run down one side. Photographs
   and tables span both columns. Everything starts at the page gutter — the
   same edge as the logo above and the footer below. */
.page-body{padding:clamp(30px,4.5vh,62px) var(--pad) clamp(36px,6vh,72px);}
/* minmax(0,1fr), not the default auto: a slider's track is a horizontal
   scroller whose contents are far wider than the screen, and an auto column
   sizes itself to that full width — which is what made the whole page scroll
   sideways on a phone. */
.blk{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(14px,2.4vh,22px);padding-block:clamp(16px,3vh,34px);}
.blk:first-child{padding-top:0;}
.blk + .blk{border-top:1px solid var(--rule);}
.blk-body > * + *{margin-top:clamp(14px,2vh,20px);}
.blk-wide{margin-top:clamp(28px,4.5vh,52px);}

@media(min-width:1000px){
  .blk{
    grid-template-columns:minmax(0,27%) minmax(0,1fr);
    column-gap:clamp(32px,5vw,128px);row-gap:0;
  }
  .blk-head{grid-column:1;position:sticky;top:calc(var(--head-h) + 24px);align-self:start;padding-bottom:clamp(16px,2.5vh,28px);}
  /* A slider, gallery or table spans both columns, so a heading still stuck
     to the top of the screen would sit on top of it. In those sections the
     heading stays with its text instead. */
  .blk:has(> .blk-wide) .blk-head{position:static;}
  .blk-body{grid-column:2;}
  .blk-wide{grid-column:1 / -1;}
  /* a section with no heading keeps its text in the same column as the rest */
  .blk-head:empty + .blk-body{grid-column:2;}
}
.blk-body > p,.blk-body > ul,.blk-body > ol,
.blk-body > .page-note,.blk-body > .glossary{max-width:var(--reading);}
.page-body h2{
  font-family:var(--sans);font-weight:300;font-size:clamp(26px,calc(2.4*var(--fu)),61px);line-height:1.2;
  text-wrap:balance;
}
.blk-head h2::before{
  content:"";display:block;width:clamp(34px,calc(2.6*var(--fu)),66px);height:2px;background:var(--red);
  margin-bottom:clamp(12px,1.6vh,18px);
}
.page-body h3{
  font-family:var(--sans);font-weight:500;font-size:clamp(19px,calc(1.5*var(--fu)),38px);line-height:1.3;
  margin-top:clamp(10px,2vh,20px);
}
.page-body p{font-weight:400;font-size:clamp(16.5px,calc(1.05*var(--fu)),27px);line-height:1.7;color:var(--grey);text-wrap:pretty;}
/* highlighted words carry the logo's red; it is the one accent on the page */
.page-body strong{font-weight:500;color:var(--red);font-size:1.02em;}
.page-body a{color:var(--red);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--red) 40%,transparent);}
.page-body a:hover{text-decoration-color:var(--red);}

.page-body ul,.page-body ol{margin:0;padding:0;list-style:none;display:grid;gap:10px;}
.page-body li{
  position:relative;padding-left:26px;font-weight:400;font-size:clamp(16px,calc(1*var(--fu)),26px);line-height:1.6;color:var(--grey);
}
.page-body li::before{
  content:"";position:absolute;left:4px;top:.62em;width:8px;height:1px;background:var(--red);
}
.page-body ol{counter-reset:step;}
.page-body ol li::before{
  content:counter(step,decimal-leading-zero);counter-increment:step;
  left:0;top:0;width:auto;height:auto;background:none;
  font-family:var(--mono,var(--sans));font-size:clamp(12px,calc(.8*var(--fu)),19px);color:var(--red);
}

/* a plain specification table — the one place figures line up */
.spec{width:100%;border-collapse:collapse;font-size:clamp(15px,calc(.95*var(--fu)),24px);}
.spec th,.spec td{text-align:left;padding:clamp(11px,calc(.8*var(--fu)),18px) clamp(14px,calc(1*var(--fu)),24px) clamp(11px,calc(.8*var(--fu)),18px) 0;border-bottom:1px solid var(--rule);vertical-align:top;}
.spec th{font-weight:500;width:40%;}
.spec td{color:var(--grey);font-variant-numeric:tabular-nums;}
.tablewrap{overflow-x:auto;max-width:100%;}

/* figures may run wider than the text column */
.page-figure{margin:clamp(10px,2vh,20px) 0;max-width:min(100%,max(560px,calc(62*var(--fu))));width:100%;}
.page-figure img{width:100%;height:auto;display:block;}
/* figures side by side: two to a row on a wide screen, stacked on a phone */
.page-figures{display:grid;grid-template-columns:1fr;gap:clamp(18px,3vw,48px);align-items:start;
  max-width:min(100%,max(560px,calc(62*var(--fu))));margin:clamp(10px,2vh,20px) 0;}
.page-figures .page-figure{margin:0;max-width:none;}
@media(min-width:700px){.page-figures{grid-template-columns:1fr 1fr;}}
.page-figure figcaption{margin-top:12px;font-size:clamp(14px,calc(.92*var(--fu)),24px);color:var(--steel);}
/* Columns rather than a grid, so every photograph keeps its own shape
   instead of being cropped to one ratio. */
.page-gallery{columns:3;column-gap:clamp(10px,calc(1*var(--fu)),24px);width:100%;margin:clamp(10px,2vh,20px) 0;}
@media(min-width:1700px){.page-gallery{columns:4;}}
.page-gallery img{display:block;width:100%;height:auto;margin:0 0 clamp(10px,calc(1*var(--fu)),24px);break-inside:avoid;}
@media(max-width:1000px){.page-gallery{columns:2;}}
@media(max-width:480px){.page-gallery{columns:2;column-gap:10px;}.page-gallery img{margin-bottom:10px;}}

/* pull quote for a claim worth slowing down on */
.page-note{
  border-left:3px solid var(--red);padding:4px 0 4px 20px;
  font-family:var(--serif);font-style:italic;font-size:clamp(19px,calc(1.6*var(--fu)),41px);line-height:1.45;
}

/* ------------------------------- siblings -------------------------------- */
/* Section navigation, directly under the page head: what else is in this part
   of the site, before the reader starts on the page itself. */
.page-more{padding:clamp(26px,4vh,46px) var(--pad);border-bottom:1px solid var(--rule);}
.page-more h2{
  font-weight:400;font-size:clamp(14px,calc(.9*var(--fu)),23px);letter-spacing:.06em;text-transform:uppercase;
  color:var(--steel);margin-bottom:clamp(14px,2vh,20px);
}
/* auto-fit, so a row of three or four fills the width instead of leaving an
   empty cell at the end */
/* Rules are drawn on the cards themselves, not as a coloured background
   showing through 1px gaps: when the last row is short — seven cards in a
   row of five — the unused end showed as a grey slab. */
.more-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,clamp(230px,calc(17*var(--fu)),400px)),1fr));gap:0;
  border-top:1px solid var(--rule);border-left:1px solid var(--rule);}
.more-list a{
  display:flex;flex-direction:column;gap:5px;background:var(--paper);
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:clamp(16px,calc(1.2*var(--fu)),28px) clamp(18px,calc(1.35*var(--fu)),32px);
  transition:background .3s ease,color .3s ease;
}
.more-list a:hover{background:var(--surface-2,rgba(138,141,143,.10));}
.more-list b{font-weight:400;font-size:clamp(16px,calc(1*var(--fu)),26px);line-height:1.3;}
.more-list span{font-size:clamp(14px,calc(.9*var(--fu)),23px);color:var(--steel);line-height:1.4;}

/* -------------------------------- enquiry -------------------------------- */
.page-cta{
  padding:clamp(46px,8vh,100px) var(--pad);border-top:2px solid var(--black);
  display:flex;justify-content:space-between;align-items:flex-end;gap:clamp(24px,5vw,128px);flex-wrap:wrap;
}

.page-cta h2{font-family:var(--sans);font-weight:300;font-size:clamp(26px,calc(3.2*var(--fu)),82px);line-height:1.1;max-width:16ch;}
.page-cta p{margin-top:14px;max-width:42ch;font-size:clamp(16px,calc(1.05*var(--fu)),27px);line-height:1.55;color:var(--grey);}

@media(max-width:760px){
  .page-body{grid-template-columns:minmax(0,1fr);}
  .page-title{max-width:none;}
}

/* ------------------------- menu for the whole site ------------------------ *
   The home page's overlay lists five anchors; a site of 88 pages needs every
   section in it, so this variant lays them in two columns and sets the type a
   step smaller — the rows still share the height between header and contacts.
   ------------------------------------------------------------------------- */
.overlay--full .ov-nav{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  align-content:center;column-gap:clamp(24px,5vw,128px);border-top:0;
}
.overlay--full .ov-nav a{flex:none;border-top:1px solid var(--rule-dk);border-bottom:0;}
.overlay--full .ov-nav span{font-size:clamp(20px,min(3.2vh,4.4vw),46px);}
.overlay--full .ov-nav i{font-size:13px;}
@media(max-width:720px){
  .overlay--full .ov-nav{grid-template-columns:1fr;}
  .overlay--full .ov-nav span{font-size:clamp(18px,2.4vh,24px);}
}

/* --------------------------- glossary and logos -------------------------- */
.glossary{display:grid;gap:0;margin:0;}
.dl-row{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:14px 0;border-bottom:1px solid var(--rule);}
.glossary dt{font-weight:500;font-size:clamp(16px,calc(1*var(--fu)),26px);}
/* a client's subtitle, under its name */
.glossary .dt-sub{display:block;margin-top:2px;font-family:var(--serif);font-style:italic;font-weight:400;
  color:var(--grey);font-size:clamp(14.5px,calc(.9*var(--fu)),22px);line-height:1.35;}
.glossary dd{margin:0;font-weight:400;font-size:clamp(15.5px,calc(.95*var(--fu)),24px);line-height:1.6;color:var(--grey);}
@media(min-width:720px){.dl-row{grid-template-columns:minmax(0,24ch) minmax(0,68ch);gap:clamp(24px,4vw,102px);}}

/* The rules are drawn on the cells themselves, not as a coloured background
   showing through 1px gaps: on a wide screen the last row is rarely full, and
   a background left the unused end of it as a grey slab. */
.logo-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,clamp(150px,calc(11*var(--fu)),230px)),1fr));
  gap:0;border-top:1px solid var(--rule);border-left:1px solid var(--rule);width:100%;
}
.logo-grid img{
  background:#fff;padding:clamp(18px,calc(1.3*var(--fu)),30px);width:100%;
  height:clamp(110px,calc(7.6*var(--fu)),170px);object-fit:contain;
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
}

/* home page: links out of the work section, and a five-column footer */
.work-more{margin-top:clamp(18px,3vh,30px);display:flex;gap:18px;flex-wrap:wrap;}
.work-more .ln{color:#fff;}

/* ------------------------------- site map -------------------------------- */
.map-cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,clamp(230px,calc(17*var(--fu)),340px)),1fr));gap:clamp(30px,calc(2.2*var(--fu)),52px) clamp(36px,calc(2.6*var(--fu)),62px);max-width:min(100%,calc(68*var(--fu)));width:100%;}
.map-cols h3{font-family:var(--sans);font-weight:500;font-size:clamp(16px,calc(1*var(--fu)),26px);margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid var(--rule);}
.map-list{list-style:none;margin:0;padding:0;display:grid;gap:6px;}
.map-list li{padding:0;font-size:clamp(14.5px,calc(.9*var(--fu)),23px);line-height:1.45;}
.map-list li::before{display:none;}
.map-list a{color:var(--grey);text-decoration:none;}
.map-list a:hover{color:var(--red);}

/* ------------------------- touch targets on phones ------------------------ *
   Link lists (breadcrumbs, footers, the site map) are set tight for reading
   on a desktop. On a touch screen each one needs a finger-sized target, so
   they get vertical padding rather than a larger type size. Links inside
   running prose are left alone — they belong to the sentence.
   ------------------------------------------------------------------------- */
@media(max-width:760px){
  .crumbs a,.crumbs [aria-current]{display:inline-block;padding:5px 0;}
  .foot-cols p a,.ov-foot p a{display:inline-block;padding:7px 0;}
  .map-list li{padding:0;}
  .map-list a{display:block;padding:9px 0;}
  .page-body li{padding-top:2px;padding-bottom:2px;}
  .nav-toggle{padding:12px 0 12px 16px;}
}
@media(max-width:760px){
  .ln{display:inline-block;padding:8px 0 10px;}
  .caps-list b a{display:inline-block;padding:4px 0;}
}

/* --------------------------------- slider -------------------------------- *
   A filmstrip of project photographs. Every slide is the same height and its
   own natural width, so no picture is cropped to fit a frame. It scrolls with
   a swipe, the arrows, or the keyboard, and snaps to each slide.
   ------------------------------------------------------------------------- */
.slider{width:100%;min-width:0;max-width:100%;margin:clamp(10px,2vh,20px) 0;}
.slider-track{
  min-width:0;max-width:100%;display:flex;gap:clamp(10px,1.4vw,36px);
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  scrollbar-width:none;padding-bottom:4px;
}
.slider-track::-webkit-scrollbar{display:none;}
.slide{flex:none;margin:0;scroll-snap-align:start;}
.slide img{display:block;height:clamp(230px,46vh,760px);width:auto;background:var(--rule);}

/* On a phone a fixed height would force wide photographs to crop, so slides
   are sized by width there and each keeps its own height. */
@media(max-width:700px){
  .slide{width:86vw;}
  .slide img{width:100%;height:auto;}
}
.slide figcaption{margin-top:12px;display:flex;flex-direction:column;gap:3px;}
.slide figcaption b{font-weight:400;font-size:clamp(15px,calc(1.1*var(--fu)),28px);}
.slide figcaption span{font-size:clamp(13.5px,calc(.85*var(--fu)),22px);color:var(--steel);}
.slider-bar{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  margin-top:clamp(14px,2vh,22px);padding-top:14px;border-top:1px solid var(--rule);
}
.slider-count{font-family:var(--serif);font-style:italic;font-size:clamp(16px,calc(1*var(--fu)),26px);color:var(--grey);}
.slider-count span{font-style:italic;}
.slider-btns{display:flex;gap:10px;}
.slider-btn{
  width:clamp(46px,calc(3.2*var(--fu)),72px);height:clamp(46px,calc(3.2*var(--fu)),72px);border:1px solid var(--steel);border-radius:999px;
  display:flex;align-items:center;justify-content:center;font-size:clamp(17px,calc(1.15*var(--fu)),26px);color:var(--black);
  transition:background .3s ease,color .3s ease,border-color .3s ease,opacity .3s ease;
}
.slider-btn:hover{background:var(--black);border-color:var(--black);color:#fff;}
.slider-btn[disabled]{opacity:.32;pointer-events:none;}
@media(prefers-reduced-motion:reduce){.slider-track{scroll-behavior:auto;}}
.slider-track{cursor:grab;}
.slider-track.is-dragging{cursor:grabbing;scroll-snap-type:none;user-select:none;}
.slider-track.is-dragging img{pointer-events:none;}

/* the quick line of contact detail in a page head */
.page-head-note{
  margin-top:clamp(18px,2.6vh,30px);
  font-size:clamp(16px,calc(1.05*var(--fu)),27px);line-height:1.7;color:var(--grey);
}
.page-head-note a{color:var(--black);text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:color-mix(in srgb,var(--red) 55%,transparent);}
.page-head-note a:hover{color:var(--red);}

/* --------------------------------- enquiry form --------------------------- *
   Two columns on a desk, one on a phone. Labels sit above their fields so the
   form reads down the page in one line of sight; every control has a real
   label rather than a placeholder standing in for one.
   ------------------------------------------------------------------------- */
.enq{margin:clamp(6px,1.5vh,16px) 0 0;}
/* the spam trap: out of the layout entirely, never shown to a person */
.enq-bot{display:none;}
.enq-grid{display:grid;grid-template-columns:1fr;gap:clamp(16px,2.4vh,26px);}
@media(min-width:760px){
  .enq-grid{grid-template-columns:1fr 1fr;column-gap:clamp(20px,2.6vw,48px);}
  .enq-field--wide{grid-column:1 / -1;}
}
.enq-field{display:grid;gap:8px;margin:0;}
.enq-field label{
  font-family:var(--sans);font-weight:400;color:var(--black);
  font-size:clamp(14px,calc(.92*var(--fu)),23px);line-height:1.3;
}
.enq-field label span{color:var(--red);}
.enq-field input,.enq-field select,.enq-field textarea{
  font-family:var(--sans);font-weight:400;color:var(--black);
  font-size:clamp(16px,calc(1*var(--fu)),24px);line-height:1.4;
  padding:clamp(11px,1.3vh,16px) clamp(12px,1vw,18px);
  background:#fff;border:1px solid var(--rule);border-radius:0;
  width:100%;max-width:100%;
  transition:border-color .25s ease,box-shadow .25s ease;
}
/* 16px minimum on the control itself, or iOS zooms the page on focus */
.enq-field textarea{resize:vertical;min-height:clamp(120px,18vh,220px);}
.enq-field input:focus,.enq-field select:focus,.enq-field textarea:focus{
  outline:none;border-color:var(--red);box-shadow:0 0 0 2px color-mix(in srgb,var(--red) 22%,transparent);
}
.enq-field input::placeholder,.enq-field textarea::placeholder{color:var(--steel);}
.enq-field input:user-invalid,.enq-field textarea:user-invalid{border-color:var(--red);}

.enq-foot{
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(16px,2vw,32px);
  margin-top:clamp(20px,3vh,34px);
}
.enq-send{
  font-family:var(--sans);font-weight:500;letter-spacing:0;
  font-size:clamp(16px,calc(1.05*var(--fu)),26px);
  padding:clamp(13px,1.5vh,20px) clamp(28px,2.4vw,48px);
  background:var(--red);color:#fff;border:0;border-radius:999px;cursor:pointer;
  transition:background .3s ease,transform .3s var(--ease,ease);
}
.enq-send:hover{background:var(--black);}
.enq-send:active{transform:translateY(1px);}
.enq-note{
  flex:1 1 22ch;margin:0;color:var(--grey);
  font-size:clamp(14px,calc(.92*var(--fu)),23px);line-height:1.5;
}
.enq-note span{color:var(--red);}
/* the answer to a sent enquiry, in place of the form */
.enq-status{margin:14px 0 0;font-size:clamp(15px,calc(.95*var(--fu)),22px);}
.enq-status--error{color:var(--red);}
.enq-done{padding:clamp(22px,3.4vh,40px) 0;outline:none;}
.enq-done h3{margin:0 0 8px;font-weight:400;font-size:clamp(22px,calc(1.7*var(--fu)),40px);line-height:1.25;}
.enq-done p{margin:0;color:var(--grey);font-size:clamp(16px,calc(1*var(--fu)),24px);}

/* ----------------------------------- map ---------------------------------- *
   The office on Google Maps, plus the two links that matter on a phone:
   directions (opens the Maps app and starts navigation) and the plain pin.
   ------------------------------------------------------------------------- */
.map{
  width:100%;margin:clamp(10px,2vh,20px) 0 0;
  aspect-ratio:16/9;max-height:clamp(280px,52vh,560px);
  border:1px solid var(--rule);background:color-mix(in srgb,var(--steel) 12%,transparent);
}
@media(max-width:700px){.map{aspect-ratio:4/3;}}
.map iframe{width:100%;height:100%;border:0;display:block;}
.map-links{
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(12px,1.6vw,26px);
  margin-top:clamp(14px,2vh,22px);
}
.map-go,.map-alt{
  font-family:var(--sans);font-weight:500;
  font-size:clamp(15px,calc(.98*var(--fu)),24px);
  padding:clamp(10px,1.2vh,16px) clamp(20px,1.8vw,34px);border-radius:999px;
  text-decoration:none;transition:background .3s ease,color .3s ease,border-color .3s ease;
}
.page-body .map-go{background:var(--red);color:#fff;text-decoration:none;}
.page-body .map-go:hover{background:var(--black);color:#fff;}
.page-body .map-alt{border:1px solid var(--steel);color:var(--black);text-decoration:none;}
.page-body .map-alt:hover{border-color:var(--black);background:var(--black);color:#fff;}

/* ------------------------- professional affiliation ----------------------- *
   Given the weight of a statement rather than a side note: a full-width band
   on the site's black ground with the red rule above it, so it separates
   from the paper sections either side of it and reads at a glance.
   ------------------------------------------------------------------------- */
.affil{
  /* The band spans the page. Directly under the head it already has the full
     width; inside the body it has to climb back out of the text gutters. */
  margin:0;
  padding:clamp(30px,4.5vh,64px) var(--pad);
  background:var(--black);color:#fff;
  border-top:4px solid var(--red);
  display:grid;gap:clamp(24px,3vw,56px);align-items:center;
}
@media(min-width:820px){
  .affil{grid-template-columns:minmax(240px,30%) minmax(0,1fr);}
}
.affil-mark{
  display:flex;align-items:center;justify-content:center;
  background:#fff;padding:clamp(22px,2.4vw,38px);
}
.affil-mark img{width:100%;max-width:clamp(220px,22vw,360px);height:auto;display:block;}
.affil-copy{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(10px,1.4vh,18px);}
.affil-tag{
  font-family:var(--serif);font-style:italic;color:#fff;
  font-size:clamp(16px,calc(1.1*var(--fu)),28px);
}
.affil-copy b{
  font-family:var(--sans);font-weight:300;line-height:1.15;text-wrap:balance;color:#fff;
  font-size:clamp(26px,calc(2.6*var(--fu)),64px);
}
.affil-copy p{
  margin:0;color:var(--on-dark);line-height:1.6;max-width:56ch;
  font-size:clamp(16px,calc(1.05*var(--fu)),27px);
}
.affil-copy .ln,.page-body .affil-copy .ln{
  color:#fff;text-decoration:none;border-bottom:1px solid var(--red);padding-bottom:2px;
}
.affil-copy .ln:hover,.page-body .affil-copy .ln:hover{color:var(--red);}

/* used as a block inside the running text rather than under the head */
.page-body .affil{
  margin:clamp(30px,5vh,60px) calc(-1 * var(--pad)) clamp(10px,2vh,20px);
}

/* ------------------------- before / after project grid -------------------- *
   A row of project cards. The frame holds its size and the photograph grows
   inside it on hover, so the grid never reflows — and the movement is off
   for anyone who has asked for reduced motion.
   ------------------------------------------------------------------------- */
.bagrid{
  display:grid;gap:clamp(12px,1.4vw,26px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,clamp(220px,calc(17*var(--fu)),330px)),1fr));
  margin:clamp(10px,2vh,20px) 0 0;
}
.bacard{margin:0;}
.bacard-img{
  display:block;overflow:hidden;aspect-ratio:4/3;
  background:color-mix(in srgb,var(--steel) 18%,transparent);
}
.bacard-img img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s var(--ease);
}
.bacard:hover .bacard-img img,
.bacard:focus-within .bacard-img img{transform:scale(1.09);}
.bacard figcaption{display:flex;flex-direction:column;gap:3px;margin-top:10px;}
.bacard figcaption b{
  font-weight:400;line-height:1.3;
  font-size:clamp(15px,calc(1*var(--fu)),24px);
}
.bacard figcaption span{
  color:var(--steel);line-height:1.4;
  font-size:clamp(13.5px,calc(.85*var(--fu)),21px);
}
@media(prefers-reduced-motion:reduce){
  .bacard-img img{transition:none;}
  .bacard:hover .bacard-img img,
  .bacard:focus-within .bacard-img img{transform:none;}
}

/* --------------------------- before beside after -------------------------- *
   One pair of headings, then every project in two columns beneath them:
   left is the room as found, right is the same room at handover. The two
   halves stay side by side at every width — the comparison is the point.
   Each picture is a button; clicking it opens the full-size view.
   ------------------------------------------------------------------------- */
.ba{display:grid;gap:clamp(20px,3vh,38px);margin:clamp(10px,2vh,20px) 0 0;}
.ba-heads{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.2vw,22px);
  padding-bottom:clamp(8px,1.2vh,14px);border-bottom:1px solid var(--rule);
}
.ba-heads h3{
  margin:0;font-family:var(--sans);font-weight:400;letter-spacing:0;
  font-size:clamp(19px,calc(1.5*var(--fu)),38px);
}
.ba-heads h3::before{
  content:"";display:block;width:clamp(26px,calc(2*var(--fu)),48px);height:2px;
  background:var(--red);margin-bottom:clamp(8px,1.2vh,14px);
}
.ba-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.2vw,22px);}
.bacard-img--tall{aspect-ratio:3/4;}

/* ------------------------------- hover peek ------------------------------- *
   Hovering a project picture brings it up large, centred, filling most of
   the screen — close enough to read the room without leaving the grid.
   Pointer devices only: there is no hover on a touch screen, where tapping
   opens the full view instead.
   ------------------------------------------------------------------------- */
.peek{
  position:fixed;inset:0;z-index:260;display:none;
  align-items:center;justify-content:center;pointer-events:none;
  /* No backdrop: dimming the whole page to show one picture made the site
     look like it had gone hazy. The picture carries itself on a shadow. */
  opacity:0;transition:opacity .22s ease;
}
.peek.is-open{display:flex;}
.peek.is-shown{opacity:1;}
.peek img{
  max-width:80vw;max-height:90vh;width:auto;height:auto;
  object-fit:contain;display:block;
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 24px 70px rgba(20,20,20,.45), 0 2px 10px rgba(20,20,20,.25);
  transform:scale(.98);transition:transform .25s var(--ease);
}
.peek.is-shown img{transform:none;}
/* the caption needs its own ground now that there is no backdrop behind it */
.peek-cap{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:clamp(8px,1.6vh,20px);width:max-content;max-width:min(90vw,70ch);
  margin:0;padding:clamp(7px,1vh,11px) clamp(14px,1.2vw,22px);
  background:rgba(20,20,20,.9);color:#fff;text-align:center;
  font-family:var(--sans);font-weight:400;
  font-size:clamp(14px,calc(.95*var(--fu)),22px);
}
.peek-cap em{font-family:var(--serif);font-style:italic;color:var(--red);}
@media(prefers-reduced-motion:reduce){
  .peek,.peek img{transition:none;}
}

/* nothing published yet */
.ba-empty{
  grid-column:1 / -1;margin:0;padding:clamp(22px,4vh,44px) 0;
  color:var(--steel);font-size:clamp(15px,calc(1*var(--fu)),24px);
}

/* The carousel's container: a plain block, so the track can run the full
   width of the page. It was a grid, which pinned the whole carousel inside
   one 360px column and showed a single card. */
.lp-board{width:100%;}

/* --------------------------- live projects ring --------------------------- *
   Arched panels standing in a circle, as on the reference site: each card is
   turned by its share of 360 degrees and pushed out to the radius, close
   enough that the panels overlap into a drum. The one facing you is lit and
   full size; the rest fall away. The project's name, number and note sit
   under the ring and change as it turns.
   Reduced motion gets a plain readable stack instead.
   --------------------------------------------------------------------------- */
.lp-board{width:100%;}

.ring{position:relative;padding:clamp(8px,1.6vh,20px) 0 0;outline:none;}
.ring:focus-visible{outline:2px solid var(--red);outline-offset:6px;}
/* one ring per project, each with its own name underneath */
.ring + .ring{margin-top:clamp(40px,8vh,110px);padding-top:clamp(28px,5vh,70px);
  border-top:1px solid var(--rule,rgba(138,141,143,.4));}
/* one photograph: no drum to stand in, so it stands alone in the middle */
.ring.is-single .ring-stage{cursor:default;}

.ring-view{
  perspective:1500px;
  perspective-origin:50% 46%;
  /* a panel swinging round can reach past the edge of a wide screen for a
     frame or two; clip sideways only, so the shadows below still show */
  overflow-x:clip;
  padding-block:clamp(10px,2vh,26px);
}
.ring-stage{
  position:relative;
  user-select:none;
  /* grows with the screen like the rest of the type, so the drum is not a
     postage stamp on a 27in monitor */
  height:clamp(330px,calc(27 * var(--fu)),700px);
  margin-inline:auto;
  transform-style:preserve-3d;
  touch-action:pan-y;
  cursor:grab;
}
.ring.is-dragging .ring-stage{cursor:grabbing;}
.ring-stage img{-webkit-user-drag:none;user-select:none;}

.ring-card{
  position:absolute;top:50%;left:50%;
  width:clamp(190px,calc(19 * var(--fu)),480px);
  margin-left:calc(clamp(190px,calc(19 * var(--fu)),480px) / -2);
  transform:translateY(-50%) rotateY(var(--angle)) translateZ(var(--radius));
  transform-style:preserve-3d;
  --front:0;
  opacity:calc(.25 + .75 * var(--front));
  pointer-events:none;
  transition:opacity .4s ease;
}
.ring-card[aria-hidden="false"]{pointer-events:auto;}
@media(min-width:900px){
  .ring-card{width:clamp(250px,calc(19 * var(--fu)),480px);
             margin-left:calc(clamp(250px,calc(19 * var(--fu)),480px) / -2);}
}

/* the arch */
.ring-shot{
  position:relative;display:block;overflow:hidden;
  aspect-ratio:3/4.2;
  border-radius:50% 50% clamp(6px,.5vw,10px) clamp(6px,.5vw,10px) / 32% 32% clamp(6px,.5vw,10px) clamp(6px,.5vw,10px);
  background:color-mix(in srgb,var(--steel) 20%,transparent);
  box-shadow:0 calc(8px + 30px * var(--front)) calc(20px + 50px * var(--front))
             rgba(20,20,20,calc(.10 + .22 * var(--front)));
  transform:scale(calc(.82 + .18 * var(--front)));
  transition:transform .4s var(--ease),box-shadow .4s ease,filter .4s ease;
  filter:brightness(calc(.6 + .4 * var(--front)));
}
.ring-shot img{width:100%;height:100%;object-fit:cover;display:block;}
.ring-card.is-front .ring-shot{cursor:zoom-in;}
.ring-card:not(.is-front) .ring-shot{cursor:pointer;}
.ring-card.is-front .ring-shot:hover{filter:brightness(1.04);}

/* name, number and note, under the ring */
/* the controls sit with the text, not pinned to the edges of the page */
.ring-info{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:clamp(14px,2.4vw,36px);
  margin:clamp(18px,3vh,36px) auto 0;
  max-width:min(100%,780px);
}
.ring-middle{text-align:center;min-width:0;}
.ring-count{
  margin:0 0 clamp(6px,1vh,12px);
  font-family:var(--serif);font-style:italic;color:var(--red);
  letter-spacing:.14em;
  font-size:clamp(13px,calc(.86*var(--fu)),20px);
}
.ring-name{
  margin:0;font-family:var(--sans);font-weight:300;line-height:1.15;
  font-size:clamp(22px,calc(2.1*var(--fu)),52px);text-wrap:balance;
}
.ring-note{
  margin:clamp(6px,1vh,12px) auto 0;max-width:46ch;color:var(--grey);
  font-size:clamp(14px,calc(.98*var(--fu)),24px);line-height:1.5;
}
.ring-arrow{
  width:clamp(44px,calc(3.2*var(--fu)),64px);height:clamp(44px,calc(3.2*var(--fu)),64px);
  border:1px solid var(--steel);border-radius:999px;background:none;
  color:var(--black);font-size:clamp(16px,calc(1.15*var(--fu)),24px);line-height:1;
  cursor:pointer;flex:none;
  transition:background .3s ease,border-color .3s ease,color .3s ease;
}
.ring-arrow:hover{background:var(--black);border-color:var(--black);color:#fff;}

@media(prefers-reduced-motion:reduce){
  .ring-stage{height:auto;perspective:none;display:grid;gap:clamp(16px,3vh,30px);}
  .ring-card{position:static;margin:0 auto;transform:none;opacity:1;width:min(100%,320px);
    pointer-events:auto;}
  .ring-shot{transform:none;filter:none;}
}

/* ------------------------------- zoom view -------------------------------- */
.zoom{
  position:fixed;inset:0;z-index:300;display:none;
  align-items:center;justify-content:center;
  padding:clamp(16px,4vh,56px);
  background:rgba(20,20,20,.92);
  opacity:0;transition:opacity .28s ease;
}
.zoom.is-open{display:flex;}
.zoom.is-shown{opacity:1;}
.zoom img{
  max-width:92vw;max-height:88vh;width:auto;height:auto;
  object-fit:contain;display:block;border-radius:clamp(8px,.7vw,14px);
  transform:scale(.97);transition:transform .32s var(--ease);
}
.zoom.is-shown img{transform:none;}
.zoom-close{
  position:absolute;top:clamp(12px,2.4vh,28px);right:clamp(12px,2vw,34px);
  width:clamp(44px,calc(3.2*var(--fu)),64px);height:clamp(44px,calc(3.2*var(--fu)),64px);
  border:1px solid rgba(255,255,255,.5);border-radius:999px;background:none;
  color:#fff;font-size:clamp(18px,calc(1.3*var(--fu)),28px);line-height:1;cursor:pointer;
  transition:background .25s ease,border-color .25s ease,color .25s ease;
}
.zoom-close:hover{background:#fff;border-color:#fff;color:var(--black);}
.zoom-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:clamp(44px,calc(3.2*var(--fu)),64px);height:clamp(44px,calc(3.2*var(--fu)),64px);
  border:1px solid rgba(255,255,255,.5);border-radius:999px;background:rgba(20,20,20,.4);
  color:#fff;font-size:clamp(16px,calc(1.15*var(--fu)),24px);line-height:1;cursor:pointer;
  transition:background .25s ease,border-color .25s ease,color .25s ease;
}
.zoom-arrow:hover{background:#fff;border-color:#fff;color:var(--black);}
.zoom-arrow[hidden]{display:none;}
.zoom-prev{left:clamp(10px,2vw,34px);}
.zoom-next{right:clamp(10px,2vw,34px);}
.zoom-count{
  position:absolute;bottom:clamp(12px,2.4vh,28px);left:0;right:0;margin:0;text-align:center;
  color:#fff;font-family:var(--serif);font-style:italic;letter-spacing:.14em;
  font-size:clamp(13px,calc(.86*var(--fu)),20px);
}
@media(prefers-reduced-motion:reduce){ .zoom,.zoom img{transition:none;} }