/* JSV Services South. One stylesheet for every page. */
/* Founders Grotesk is the licensed brand face. Hanken Grotesk stands in for this prototype.
   When the woff files are added, declare @font-face for "Founders Grotesk" and the stack below picks it up first. */
:root{
  color-scheme: only light;
  --greige:#D3D0C4;
  --paper:#F0EEE6;
  --charcoal:#23241F;
  --mid:#8C8A7C;
  --rule:rgba(35,36,31,.22);
  --rule-strong:rgba(35,36,31,.55);
  --rule-inv:rgba(240,238,230,.22);
  /* rule system: one hairline, one frame. .inv flips them to paper. */
  --hair:rgba(35,36,31,.35);
  --frame:var(--charcoal);
  --font:"Founders Grotesk","Hanken Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  --gutter:clamp(40px,9vw,176px);
  --col:calc((100vw - 2*var(--gutter)) / 12);
  --ease:cubic-bezier(.2,.7,.2,1);
}
@media (prefers-color-scheme: dark){:root{color-scheme:only light}}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font);background:var(--greige);color:var(--charcoal);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}
:focus-visible{outline:2px solid var(--charcoal);outline-offset:4px}
.inv :focus-visible{outline-color:var(--paper)}
.skip{position:absolute;left:-999px;top:0;background:var(--charcoal);color:var(--paper);padding:12px 16px;z-index:100}
.skip:focus{left:var(--gutter)}

/* type scale - 4 main sizes */
.display{font-weight:600;letter-spacing:-.025em;line-height:.88;font-size:clamp(40px,7.6vw,124px)}
.h2{font-weight:600;letter-spacing:-.02em;line-height:.98;font-size:clamp(30px,4.6vw,72px)}
.h3{font-weight:600;letter-spacing:-.015em;line-height:1.08;font-size:clamp(24px,3.2vw,48px)}
.lead{font-weight:400;letter-spacing:-.012em;line-height:1.28;font-size:clamp(18px,2vw,24px)}
.body{font-size:clamp(16px,1.15vw,18px);line-height:1.55;max-width:34em}
.label{font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;line-height:1}
.small{font-size:14px;line-height:1.5}
.muted{color:var(--mid)}

/* links */
.ul{position:relative;display:inline-block;padding-bottom:4px}
.ul::after{content:"";position:absolute;left:0;bottom:1px;height:1px;width:100%;background:currentColor;transform-origin:left;transform:scaleX(.3);opacity:.8;transition:transform .8s var(--ease),opacity .5s var(--ease)}
.ul:hover::after,.ul:focus-visible::after,.ul[aria-current="page"]::after{transform:scaleX(1);opacity:1}
.cta{display:inline-block;border:1px solid var(--charcoal);padding:16px 28px;font-size:14px;font-weight:500;letter-spacing:.025em;text-transform:uppercase;transition:background .35s var(--ease),color .35s var(--ease);position:relative}
.cta:hover,.cta:focus-visible{background:var(--charcoal);color:var(--paper)}
.inv .cta{border-color:var(--paper)}
.inv .cta:hover,.inv .cta:focus-visible{background:var(--paper);color:var(--charcoal)}

/* layout */
.wrap{padding-left:var(--gutter);padding-right:var(--gutter)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(16px,1.6vw,32px)}
.rule{height:1px;background:var(--hair)}
section{position:relative}
.sec{padding-top:clamp(100px,14vw,200px);padding-bottom:clamp(100px,14vw,200px)}
/* color rhythm: alternating backgrounds through sections */
.ctx{background:var(--greige);position:relative}
.feat{background:var(--paper)}
.her{background:var(--charcoal)} /* inverted section, already has charcoal */
.capab{background:var(--greige)}
.proc{background:var(--paper)}
.sel{background:var(--greige)}
.about{background:var(--paper)}
.index{font-size:13px;letter-spacing:.06em;color:var(--mid);font-variant-numeric:tabular-nums}

/* header */
.hdr{position:sticky;top:0;z-index:50;background:var(--greige);transition:background .4s,backdrop-filter .4s}
.hdr-in{display:flex;align-items:center;justify-content:space-between;transition:height .4s var(--ease)}
.hdr-in{height:96px}
.hdr.small{background:rgba(211,208,196,.9);backdrop-filter:blur(12px)}
.hdr.small .hdr-in{height:72px}
/* live lockup: Primary logo */
.lockup{display:flex;align-items:center;height:56px;transition:height .4s var(--ease);flex:none}
.lockup img{height:100%;width:auto;display:block}
.hdr.small .lockup{height:48px}
.nav{display:flex;align-items:center;gap:clamp(20px,2.4vw,40px)}
.nav a{font-size:15px;letter-spacing:.005em}
.nav .disc{margin-left:clamp(8px,1vw,20px);border:1px solid var(--frame);padding:11px 18px;font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;line-height:1;transition:background .35s var(--ease),color .35s var(--ease)}
.nav .disc:hover,.nav .disc:focus-visible{background:var(--charcoal);color:var(--paper)}
/* menu toggle: works without JS via checkbox */
#mt{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.mob-right{display:none;align-items:center;gap:26px}
/* mobile controls: handset at the cap height of the JSV letters; menu is three stepped lines, centred on the same line */
.mcall{display:flex;align-items:center;height:46px;color:var(--charcoal)}
.mcall svg{height:33px;width:auto;fill:currentColor;transition:height .4s var(--ease)}
.mmenu{position:relative;display:flex;align-items:center;justify-content:flex-end;width:30px;height:46px;cursor:pointer;color:var(--charcoal)}
.mmenu .q{position:relative;width:30px;height:17px}
.mmenu .q i{position:absolute;right:0;height:1px;background:currentColor;transform-origin:center;transition:width .45s var(--ease),transform .55s var(--ease),opacity .3s,top .55s var(--ease),bottom .55s var(--ease)}
.mmenu .q i:nth-child(1){top:0;width:30px}
.mmenu .q i:nth-child(2){top:8px;width:24px}
.mmenu .q i:nth-child(3){bottom:0;width:18px}
html:has(#mt:checked) .mmenu .q i{width:30px}
html:has(#mt:checked) .mmenu .q i:nth-child(1){top:8px;transform:rotate(45deg)}
html:has(#mt:checked) .mmenu .q i:nth-child(2){opacity:0}
html:has(#mt:checked) .mmenu .q i:nth-child(3){bottom:8px;transform:rotate(-45deg)}
#mt:checked ~ .mnav{display:block}
.mnav{display:none}
@media (max-width:900px){
  .nav{display:none}.mob-right{display:flex}
  .hdr-in{height:72px}.hdr.small .hdr-in{height:64px}
  .lockup{height:46px}.lockup .mk{padding:0 10px}.lockup .mk svg{height:18px}.lockup .tg{font-size:8px;letter-spacing:.12em;padding:0 9px}
  .mob-right{margin-left:10px;gap:10px}
  .lockup{height:46px}.hdr.small .lockup{height:40px}.hdr.small .mcall svg{height:29px}
  @media (max-width:360px){.lockup .tg{display:none}.lockup .mk{border-right:0}}
  .mnav{display:block;position:fixed;left:0;right:0;top:72px;bottom:0;background:var(--greige);z-index:49;padding:12px var(--gutter) 24px;overflow:auto;opacity:0;pointer-events:none;transition:opacity .45s;clip-path:inset(0 0 100% 0);}
  html:has(#mt:checked){overflow:hidden}
  .hdr.small ~ .mnav{top:64px}
  html:has(#mt:checked) .mnav{opacity:1;pointer-events:auto;clip-path:inset(0 0 0 0);transition:opacity .3s,clip-path .9s var(--ease)}
  /* the panel is the logo frame at page scale */
  .mframe{border:1px solid var(--charcoal);min-height:calc(100% - 0px);display:flex;flex-direction:column}
  .mframe .cell{padding:26px 22px 18px;flex:1}
  .mframe .strip{border-top:1px solid var(--charcoal);padding:18px 22px 20px;display:flex;flex-direction:column;gap:18px}
  .mframe .lead-in{display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mid);margin-bottom:22px}
  .mnav ul li{border-bottom:1px solid var(--hair)}
  .mnav ul a{display:flex;justify-content:space-between;align-items:baseline;font-size:34px;font-weight:500;letter-spacing:-.025em;line-height:1;padding:17px 0}
  .mnav ul a small{font-size:11px;letter-spacing:.1em;color:var(--mid);font-weight:400}
  .mnav .cta{align-self:flex-start;padding:15px 22px;font-size:15px}
  .mnav .soc{display:flex;gap:10px;align-items:center}
  .mnav .soc a{width:44px;height:44px;border:1px solid var(--charcoal);display:grid;place-items:center;transition:background .3s,color .3s}
  .mnav .soc a:hover{background:var(--charcoal);color:var(--paper)}
  .mnav .soc svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.2}
  .mnav .soc .tx{font-size:15px;font-weight:600;letter-spacing:-.02em;line-height:1}
  .mnav .strip .co{font-size:12px;color:var(--mid);line-height:1.5}
  /* cascade: every animated item hidden until open, then staggered */
  .mnav .c{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .8s var(--ease)}
  html:has(#mt:checked) .mnav .c{opacity:1;transform:none}
  html:has(#mt:checked) .mnav .c1{transition-delay:.25s}
  html:has(#mt:checked) .mnav .c2{transition-delay:.38s}
  html:has(#mt:checked) .mnav .c3{transition-delay:.51s}
  html:has(#mt:checked) .mnav .c4{transition-delay:.64s}
  html:has(#mt:checked) .mnav .c5{transition-delay:.77s}
  html:has(#mt:checked) .mnav .c6{transition-delay:.90s}
  html:has(#mt:checked) .mnav .c7{transition-delay:1.05s}
  html:has(#mt:checked) .mnav .c8{transition-delay:1.2s}
  html:has(#mt:checked) .mnav .c9{transition-delay:1.32s}
}

/* hero */
.hero-img{position:relative;height:clamp(300px,50vh,600px);overflow:hidden;background:var(--mid)}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:center 55%;animation:heroIn 2.2s var(--ease) both}
@keyframes heroIn{from{opacity:0;transform:scale(1.03)}to{opacity:1;transform:none}}
.hero-block{padding-top:clamp(40px,4.5vw,72px);padding-bottom:clamp(48px,6vw,96px)}
.hero-block .grid{row-gap:clamp(28px,3vw,48px)}
.hero-label{grid-column:1/4;display:flex;flex-direction:column;gap:14px}
.hero-h1{grid-column:1/12;line-height:.80;margin-left:-.03em}
.hero-sub{grid-column:1/6}
.hero-cta{grid-column:8/13;display:flex;align-items:center;justify-content:flex-start;gap:28px;flex-wrap:wrap}
@media (max-width:900px){
  .hero-img{height:70vh}.hero-img img{object-position:center}
  .hero-label,.hero-h1,.hero-sub,.hero-cta{grid-column:1/-1}
  .hero-cta{justify-content:flex-start}
}

/* positioning */
.pos .grid{row-gap:clamp(28px,3vw,48px);padding-top:clamp(32px,3vw,48px);padding-bottom:clamp(32px,3vw,48px)}
.pos .idx{grid-column:1/3}
.pos .lead{grid-column:4/12;padding-right:clamp(24px,2vw,40px);border-right:1px solid var(--hair)}
.pos .links{grid-column:4/12;margin-top:clamp(20px,2vw,32px);display:flex;flex-wrap:wrap;gap:14px 28px;font-size:15px;padding-left:clamp(24px,2vw,40px);border-left:1px solid var(--hair)}
@media (max-width:900px){.pos .idx,.pos .lead,.pos .links{grid-column:1/-1}}

/* context rows */
.ctx-row{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,3fr);align-items:center;column-gap:clamp(16px,1.6vw,32px);padding:clamp(26px,3vw,48px) 0;position:relative}
.ctx-row:not(:first-child){border-top:1px solid var(--hair)}


.ctx-row .t{font-size:clamp(28px,3.4vw,60px);font-weight:600;letter-spacing:-.025em;line-height:1;align-self:stretch;display:flex;align-items:center;justify-content:flex-end;text-align:right;padding-right:clamp(20px,2vw,32px);border-right:1px solid var(--hair);transition:transform .5s var(--ease)}
.ctx-row .d{max-width:30em;color:var(--charcoal);padding-left:clamp(20px,2vw,32px);padding-right:clamp(16px,1.5vw,28px);display:flex;flex-direction:column;justify-content:center}
.ctx-row .d p{max-width:32em}
.ctx-row .p{width:100%;aspect-ratio:3/2;overflow:hidden;background:var(--mid)}
.ctx-row .p img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.001);transition:transform 1.4s var(--ease)}
.ctx-row:hover .p img,.ctx-row:focus-within .p img{transform:scale(1.05)}
.ctx-row:hover .t{transform:translateX(-6px)}
.ctx-row a.cover{position:absolute;inset:0}
@media (max-width:900px){
  .ctx-row{grid-template-columns:1fr;row-gap:18px;padding:28px 0}
  .ctx-row .p{aspect-ratio:3/2}
  .ctx-row .t{order:1;justify-content:flex-start;text-align:left;padding-right:0;border-right:0;align-self:auto}.ctx-row .p{order:2}.ctx-row .d{order:3;padding-left:0}
}

/* featured project */
.feat-head{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(16px,1.6vw,32px);align-items:baseline;margin-bottom:clamp(32px,4vw,64px)}
.feat-head .idx{grid-column:1/3}
.feat-head h2{grid-column:3/11}
.feat-grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(16px,1.6vw,32px);row-gap:32px;align-items:end}
.feat-img{grid-column:1/8;aspect-ratio:5/4;overflow:hidden;background:var(--mid)}
.feat-img img{width:100%;height:100%;object-fit:cover}
.feat-data{grid-column:9/13;display:flex;flex-direction:column;gap:28px}
.feat-data dl{display:grid;grid-template-columns:1fr;border-top:1px solid var(--hair)}
.feat-data dl div{padding:14px 0;border-bottom:1px solid var(--hair);display:grid;grid-template-columns:5em 1fr;gap:16px;align-items:baseline}
.feat-data dt{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mid);font-weight:500}
.feat-data dd{font-size:clamp(16px,1.2vw,19px);line-height:1.35}
@media (max-width:900px){
  .feat-head .idx,.feat-head h2,.feat-img,.feat-data{grid-column:1/-1}
  .feat-img{aspect-ratio:4/3}
}

/* heritage */
.inv{background:var(--charcoal);color:var(--paper);--hair:rgba(240,238,230,.35);--frame:var(--paper);--mid:rgba(240,238,230,.7)}
.her .grid{row-gap:clamp(20px,2vw,32px)}
.her .idx{grid-column:1/3}
.her blockquote{grid-column:3/12;font-size:clamp(28px,4.4vw,70px);font-weight:500;letter-spacing:-.025em;line-height:1.04;text-wrap:balance;border:2px solid var(--frame);padding:clamp(32px,3.5vw,56px)}
.her .att{grid-column:3/7;border-top:1px solid var(--hair);padding-top:18px}
.her .att p{line-height:1.45}
.her .att .small{margin-top:12px;color:var(--mid)}
.her .ctx{grid-column:7/12;border-top:1px solid var(--hair);padding-top:18px;background:none}
.her .ctx p{margin-bottom:14px;max-width:30em;line-height:1.55;font-size:clamp(15px,1.1vw,17px)}
@media (max-width:900px){
  .her .idx,.her blockquote,.her .att,.her .ctx{grid-column:1/-1}
}

/* process */
.proc .grid{row-gap:clamp(28px,3vw,48px);padding-top:clamp(32px,3vw,48px)}
.proc .idx{grid-column:1/3}
.proc .intro{grid-column:3/8;margin-bottom:8px;padding-right:clamp(24px,2vw,40px);border-right:1px solid var(--hair)}
.proc ol{grid-column:1/13;display:grid;grid-template-columns:repeat(4,1fr);column-gap:clamp(16px,1.6vw,32px);margin-top:clamp(28px,3vw,48px);list-style:none;border-bottom:2px solid var(--frame);padding-bottom:clamp(28px,2.5vw,40px)}
.proc li{border-top:1px solid var(--hair);border-right:1px solid var(--hair);padding:18px 18px 18px 0;transition:border-color .4s var(--ease)}
.proc li:hover{border-color:var(--frame)}
.proc li:last-child{padding-right:0}
.proc li .n{font-size:13px;color:var(--mid);letter-spacing:.06em;margin-bottom:18px}
.proc li .t{font-size:clamp(24px,2.6vw,40px);font-weight:500;letter-spacing:-.02em;line-height:1;margin-bottom:14px}
.proc li p{font-size:15px;max-width:22em}
@media (max-width:900px){.proc .idx,.proc .intro{grid-column:1/-1}.proc ol{grid-template-columns:1fr 1fr;row-gap:36px}.proc li:nth-child(2n){padding-right:0}}
@media (max-width:520px){.proc li{padding-right:0}}
@media (max-width:520px){.proc ol{grid-template-columns:1fr}}

/* selected work */
.work-head{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(16px,1.6vw,32px);align-items:baseline;margin-bottom:clamp(32px,4vw,64px);padding-bottom:clamp(28px,2.5vw,40px);border-bottom:1px solid var(--hair)}
.work-head .idx{grid-column:1/3}
.work-head h2{grid-column:3/11}
.work-head .all{grid-column:11/13;justify-self:end}
.work-row{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(16px,1.6vw,32px);align-items:stretch;margin-bottom:clamp(16px,1.6vw,32px)}
.work-row:last-child{margin-bottom:0}
.work article{position:relative;border:1px solid var(--hair);display:flex;flex-direction:column;transition:border-color .4s var(--ease)}
.work article:hover,.work article:focus-within{border-color:var(--frame)}
.work .p{overflow:hidden;background:var(--mid);width:100%;flex:1;min-height:0}
.work .p img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}
.work article:hover .p img,.work article:focus-within .p img{transform:scale(1.03)}
.work .m{display:grid;grid-template-columns:1fr auto;gap:6px 24px;padding:clamp(14px,1.4vw,22px);border-top:1px solid var(--hair)}
.work .m .t{font-size:clamp(15px,1.2vw,18px);font-weight:500;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.work .m .s{font-size:13px;color:var(--mid);text-align:right;white-space:nowrap}
.work .m .sc{grid-column:1/-1;font-size:13px;color:var(--mid);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.work a.cover{position:absolute;inset:0}
/* one card per row sets the height; the others fill it */
.w1{grid-column:1/9}.w1 .p{aspect-ratio:3/2;flex:none}
.w2{grid-column:9/13}
.w3{grid-column:1/5}.w3 .p{aspect-ratio:4/5;flex:none}
.w4{grid-column:5/9}
.w5{grid-column:9/13}
.w6{grid-column:1/13}.w6 .p{aspect-ratio:21/9;flex:none}
@media (max-width:900px){
  .work-head .idx,.work-head h2{grid-column:1/-1}
  .work-head .all{grid-column:1/-1;justify-self:start}
  .work-row{grid-template-columns:1fr;row-gap:32px;margin-bottom:32px}
  .work article{grid-column:1/-1}
  .work .p{flex:none}
  .w1 .p,.w6 .p{aspect-ratio:3/2}
  .w2 .p,.w3 .p,.w4 .p,.w5 .p{aspect-ratio:4/5}
}

/* about */
.about .grid{row-gap:clamp(28px,3vw,48px);align-items:start;padding-top:clamp(32px,3vw,48px)}
.about .idx{grid-column:1/3}
.about .txt{grid-column:3/8;padding-right:clamp(24px,2vw,40px);border-right:1px solid var(--hair)}
.about .txt .h2{margin-bottom:28px}
.about .txt p{margin-bottom:16px;max-width:30em}
.about .pic{grid-column:9/13;aspect-ratio:4/5;overflow:hidden;background:var(--mid)}
.about .pic img{width:100%;height:100%;object-fit:cover}
.about .facts{grid-column:3/8;display:grid;grid-template-columns:1fr 1fr 1fr;margin-top:16px;border-bottom:1px solid var(--hair)}
.about .facts div{border-top:1px solid var(--hair);border-right:1px solid var(--hair);padding:14px 16px}
.about .facts div:nth-child(3n){border-right:none}
.about .facts dt{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mid);margin-bottom:8px}
.about .facts dd{font-size:16px;line-height:1.35}
@media (max-width:900px){
  .about .idx,.about .txt,.about .pic,.about .facts{grid-column:1/-1}
  .about .pic{aspect-ratio:4/3;margin-left:calc(-1*var(--gutter));margin-right:calc(-1*var(--gutter))}
  .about .facts{grid-template-columns:1fr 1fr}
}

/* area */
.area{border-top:1px solid var(--hair)}
.area .grid{row-gap:clamp(28px,3vw,48px)}
.area .idx{grid-column:1/3}
.area .txt{grid-column:3/8}
.area .txt .h3{margin-bottom:20px}
.area .txt p{max-width:30em;margin-bottom:14px}
.area ul{grid-column:9/13;columns:2;column-gap:32px;font-size:15px}
.area li{padding:7px 0;border-bottom:1px solid var(--hair);break-inside:avoid}
@media (max-width:900px){.area .idx,.area .txt,.area ul{grid-column:1/-1}}

/* enquiry */
.enq{padding-top:clamp(80px,12vw,200px);padding-bottom:clamp(60px,8vw,120px);border-top:2px solid var(--frame);background-color:var(--charcoal);background-image:url('images/marble-bathroom-bath-brass.jpg');background-size:cover;background-position:right center;position:relative;overflow:hidden}.enq::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(35,36,31,.97) 0%,rgba(35,36,31,.92) 45%,rgba(35,36,31,.55) 100%);z-index:1;pointer-events:none}.enq .grid{position:relative;z-index:2}
.enq .grid{row-gap:36px;align-items:center;padding-top:clamp(32px,3vw,48px);display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(16px,1.6vw,32px)}
.enq .h2{grid-column:1/7;font-size:clamp(36px,5.2vw,80px);line-height:.98}
.enq .sub{grid-column:1/7;padding-top:clamp(24px,2vw,40px)}
.enq .sub p{max-width:26em;margin-bottom:28px}
.enq .contact{grid-column:8/13;display:grid;gap:12px;font-size:clamp(16px,1.3vw,20px);padding-left:clamp(28px,3vw,48px);border-left:1px solid var(--hair)}
.enq .contact span{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(240,238,230,.7);margin-bottom:6px}
.enq .contact div{padding-top:14px}
@media (max-width:900px){.enq .h2,.enq .sub,.enq .contact{grid-column:1/-1}}

/* footer */
.ftr{padding-top:clamp(30px,3.75vw,54px);padding-bottom:36px;border-top:2px solid var(--frame)}
.ftr .top{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(16px,1.6vw,32px);row-gap:36px;padding-top:clamp(20px,2.25vw,36px);align-items:start}
.ftr .brand{grid-column:1/5}
.ftr .brand img{width:min(300px,100%);height:auto;display:block;margin-top:4px}
.ftr nav{grid-column:6/9}
.ftr nav a{display:block;font-size:14px;line-height:1.6;margin-bottom:6px}
.ftr .co{grid-column:9/13;font-size:14px;line-height:1.6;color:rgba(240,238,230,.75)}
.ftr .legal{margin-top:clamp(36px,4vw,64px);padding-top:20px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12px;color:rgba(240,238,230,.55);letter-spacing:.02em}
@media (max-width:900px){.ftr .brand,.ftr nav,.ftr .co{grid-column:1/-1}}


/* intro lines */
.intro-line{font-size:15px;color:var(--mid);letter-spacing:.06em;font-weight:400;margin-bottom:28px}

/* image frames: the logo frame carried across every picture */
.hero-img picture{width:100%;height:100%;display:block}

/* ---------- inner pages ---------- */
/* page hero: label, headline, standfirst, action. Image sits above on sector pages */
.page-hero{padding-top:clamp(40px,4.5vw,72px);padding-bottom:clamp(48px,6vw,96px)}
.page-hero .grid{row-gap:clamp(24px,2.6vw,40px)}
.page-hero .hero-label{grid-column:1/4}
.page-hero .h1{grid-column:1/11;font-weight:600;letter-spacing:-.025em;line-height:.92;font-size:clamp(36px,5.6vw,88px);margin-left:-.03em}
.page-hero .lead{grid-column:1/7}
.page-hero .act{grid-column:8/13;display:flex;align-items:center;gap:28px;flex-wrap:wrap}
@media (max-width:900px){.page-hero .hero-label,.page-hero .h1,.page-hero .lead,.page-hero .act{grid-column:1/-1}}

/* statement: numbered heading with body beside it */
.stmt .grid{row-gap:clamp(24px,2.6vw,40px)}
.stmt .idx{grid-column:1/3}
.stmt .h3{grid-column:3/8;padding-right:clamp(24px,2vw,40px);border-right:1px solid var(--hair)}
.stmt .body{grid-column:8/12;max-width:32em}
.stmt .body p{margin-bottom:16px}
.stmt .body p:last-child{margin-bottom:0}
.stmt .body .cta{margin-top:12px}
@media (max-width:900px){.stmt .idx,.stmt .h3,.stmt .body{grid-column:1/-1}.stmt .h3{border-right:0;padding-right:0}}

/* capability rows: number, title, description */
.caps .head{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(16px,1.6vw,32px);row-gap:20px;margin-bottom:clamp(32px,4vw,64px)}
.caps .head .idx{grid-column:1/3}
.caps .head .h3{grid-column:3/9}
.caps .head p{grid-column:3/9;max-width:32em}
.caps ol{list-style:none;border-top:2px solid var(--frame);border-bottom:2px solid var(--frame)}
.caps li{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(16px,1.6vw,32px);padding:clamp(22px,2.4vw,36px) 0;border-top:1px solid var(--hair);align-items:baseline}
.caps li:first-child{border-top:0}
.caps li .n{grid-column:1/3;font-size:13px;color:var(--mid);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.caps li .t{grid-column:3/7;font-size:clamp(22px,2.4vw,36px);font-weight:500;letter-spacing:-.02em;line-height:1.05;padding-right:clamp(16px,2vw,32px)}
.caps li p{grid-column:7/12;max-width:30em;font-size:clamp(15px,1.1vw,17px);line-height:1.55}
@media (max-width:900px){.caps .head .idx,.caps .head .h3,.caps .head p{grid-column:1/-1}.caps li{row-gap:10px}.caps li .n,.caps li .t,.caps li p{grid-column:1/-1}.caps li .t{padding-right:0}}

/* split: text beside a portrait image */
.split .grid{row-gap:clamp(28px,3vw,48px);align-items:start}
.split .idx{grid-column:1/3}
.split .txt{grid-column:3/8;padding-right:clamp(24px,2vw,40px);border-right:1px solid var(--hair)}
.split .txt .h3{margin-bottom:24px}
.split .txt p{margin-bottom:16px;max-width:30em}
.split .txt p:last-child{margin-bottom:0}
.split .pic{grid-column:9/13;aspect-ratio:4/5;overflow:hidden;background:var(--mid)}
.split .pic img{width:100%;height:100%;object-fit:cover}
.split.flip .txt{grid-column:6/11;border-right:0;border-left:1px solid var(--hair);padding-right:0;padding-left:clamp(24px,2vw,40px)}
.split.flip .pic{grid-column:1/5;grid-row:1}
.split.flip .idx{grid-column:1/3;grid-row:2}
@media (max-width:900px){
  .split .idx,.split .txt,.split .pic,.split.flip .txt,.split.flip .pic,.split.flip .idx{grid-column:1/-1;grid-row:auto}
  .split .txt,.split.flip .txt{border:0;padding:0}
  .split .pic{aspect-ratio:4/3;margin-left:calc(-1*var(--gutter));margin-right:calc(-1*var(--gutter))}
}

/* sector projects: three portraits, or the homepage row pattern */
.sel-head{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(16px,1.6vw,32px);align-items:baseline;row-gap:16px;margin-bottom:clamp(32px,4vw,64px);padding-bottom:clamp(28px,2.5vw,40px);border-bottom:1px solid var(--hair)}
.sel-head .idx{grid-column:1/3}
.sel-head .h2{grid-column:3/9}
.sel-head p{grid-column:3/9;max-width:32em}
.sel-head .all{grid-column:10/13;justify-self:end}
@media (max-width:900px){.sel-head .idx,.sel-head .h2,.sel-head p{grid-column:1/-1}.sel-head .all{grid-column:1/-1;justify-self:start}}

/* cross sell */
.xsell{border-top:1px solid var(--hair)}
.xsell .grid{row-gap:clamp(24px,2.6vw,40px)}
.xsell .idx{grid-column:1/3}
.xsell .h3{grid-column:3/8}
.xsell p{grid-column:3/8;max-width:30em}
.xsell .links{grid-column:9/13;display:flex;flex-direction:column;gap:0;border-top:1px solid var(--hair)}
.xsell .links a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--hair);font-size:15px;font-weight:500}
.xsell .links a::after{content:"";width:22px;height:1px;background:currentColor;flex:none;transition:width .5s var(--ease)}
.xsell .links a:hover::after,.xsell .links a:focus-visible::after{width:40px}
@media (max-width:900px){.xsell .idx,.xsell .h3,.xsell p,.xsell .links{grid-column:1/-1}}


/* project pages */
.proj-data{padding-top:0}
.proj-data .grid{row-gap:24px;align-items:start}
.proj-data dl{grid-column:1/13;display:grid;grid-template-columns:repeat(5,1fr);border-top:2px solid var(--frame);border-bottom:1px solid var(--hair)}
.proj-data dl div{padding:18px clamp(16px,1.6vw,32px) 18px 0;border-right:1px solid var(--hair)}
.proj-data dl div+div{padding-left:clamp(16px,1.6vw,32px)}
.proj-data dl div:last-child{border-right:0}
.proj-data dt{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mid);font-weight:500;margin-bottom:8px}
.proj-data dd{font-size:clamp(15px,1.1vw,17px);line-height:1.4}
@media (max-width:900px){.proj-data dl{grid-template-columns:1fr 1fr}.proj-data dl div{border-right:0;border-bottom:1px solid var(--hair)}.proj-data dl div+div{padding-left:0}.proj-data dl div:nth-child(odd){border-right:1px solid var(--hair);padding-right:16px}.proj-data dl div:nth-child(even){padding-left:16px}.proj-data dl div:last-child{border-bottom:0}}
.proj-lead{aspect-ratio:16/9;overflow:hidden;background:var(--mid);margin-left:calc(-1*var(--gutter));margin-right:calc(-1*var(--gutter))}
.proj-lead img{width:100%;height:100%;object-fit:cover}
.proj-body .grid{row-gap:clamp(40px,5vw,80px)}
.proj-body .blk{grid-column:1/13;display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(16px,1.6vw,32px);row-gap:16px}
.proj-body .blk .idx{grid-column:1/3}
.proj-body .blk .h3{grid-column:3/8;padding-right:clamp(24px,2vw,40px);border-right:1px solid var(--hair)}
.proj-body .blk .body{grid-column:8/12;max-width:32em}
.proj-body .blk .body p{margin-bottom:16px}
.proj-body .blk .body p:last-child{margin-bottom:0}
@media (max-width:900px){.proj-body .blk .idx,.proj-body .blk .h3,.proj-body .blk .body{grid-column:1/-1}.proj-body .blk .h3{border:0;padding:0}}
.gal{padding-top:0}
.gal .work-row{margin-bottom:clamp(16px,1.6vw,32px)}
.gal .work-row:last-child{margin-bottom:0}
.gal figure{position:relative;overflow:hidden;background:var(--mid);border:1px solid var(--hair);display:flex}
.gal figure img{width:100%;height:100%;object-fit:cover}
.gal .g1{grid-column:1/9;aspect-ratio:3/2}.gal .g2{grid-column:9/13}
.gal .g3{grid-column:1/5;aspect-ratio:4/5}.gal .g4{grid-column:5/9}.gal .g5{grid-column:9/13}
.gal .g6{grid-column:1/7;aspect-ratio:3/2}.gal .g7{grid-column:7/13}
@media (max-width:900px){.gal .work-row{row-gap:24px}.gal figure{grid-column:1/-1 !important;aspect-ratio:4/3}}
.proj-next{border-top:1px solid var(--hair)}
.proj-next .grid{align-items:end;row-gap:24px}
.proj-next .lbl{grid-column:1/3}
.proj-next .h2{grid-column:3/10}
.proj-next .all{grid-column:10/13;justify-self:end}
.proj-next a.cover{position:absolute;inset:0}
@media (max-width:900px){.proj-next .lbl,.proj-next .h2,.proj-next .all{grid-column:1/-1;justify-self:start}}

/* projects index */
.plist{padding-top:0}
.plist .work-row{margin-bottom:clamp(16px,1.6vw,32px)}
.plist .work-row:last-child{margin-bottom:0}

/* questions */
.qs .grid{row-gap:clamp(28px,3vw,48px)}
.qs .idx{grid-column:1/3}
.qs .h3{grid-column:3/9;margin-bottom:8px}
.qs dl{grid-column:3/12;border-top:1px solid var(--hair)}
.qs dl div{display:grid;grid-template-columns:5fr 7fr;column-gap:clamp(16px,1.6vw,32px);padding:clamp(20px,2vw,32px) 0;border-bottom:1px solid var(--hair)}
.qs dt{font-size:clamp(17px,1.4vw,22px);font-weight:500;letter-spacing:-.015em;line-height:1.25;padding-right:clamp(16px,2vw,32px)}
.qs dd{margin:0;max-width:32em;font-size:clamp(15px,1.1vw,17px);line-height:1.55}
@media (max-width:900px){.qs .idx,.qs .h3,.qs dl{grid-column:1/-1}.qs dl div{grid-template-columns:1fr;row-gap:10px}.qs dt{padding-right:0}}

/* contact page */
.c-sectors{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:0}
.c-sectors .grid{column-gap:0}
.c-sectors .s{grid-column:span 4;padding:clamp(28px,3vw,48px) clamp(20px,2.4vw,40px) clamp(28px,3vw,48px) 0;border-right:1px solid var(--hair);display:flex;flex-direction:column;gap:14px}
.c-sectors .s+.s{padding-left:clamp(20px,2.4vw,40px)}
.c-sectors .s:last-child{border-right:0;padding-right:0}
.c-sectors .s .t{font-size:clamp(22px,2.4vw,36px);font-weight:500;letter-spacing:-.02em;line-height:1.05}
.c-sectors .s p{font-size:15px;max-width:26em;flex:1}
@media (max-width:900px){.c-sectors .s{grid-column:1/-1;border-right:0;padding:24px 0;border-bottom:1px solid var(--hair)}.c-sectors .s+.s{padding-left:0}.c-sectors .s:last-child{border-bottom:0}}
.c-form .grid{row-gap:clamp(28px,3vw,48px)}
.c-form .idx{grid-column:1/3}
.c-form .h2{grid-column:3/11}
.c-form form,.c-form .sent{grid-column:3/11;max-width:none}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px 24px}
.form-row .form-group{margin-bottom:0}
.form-full{grid-column:1/-1}
.form-note{font-size:13px;color:var(--mid);margin-top:8px;max-width:34em}
@media (max-width:900px){.c-form .idx,.c-form .h2,.c-form form,.c-form .sent{grid-column:1/-1}.form-row{grid-template-columns:1fr}}

/* questions */
.q-a{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(16px,1.6vw,32px);row-gap:28px}
.q-a dt{grid-column:1/4;font-weight:500;font-size:15px}
.q-a dd{grid-column:4/12;margin:0}
.q-a dd p{margin-bottom:14px}
@media (max-width:900px){.q-a dt,.q-a dd{grid-column:1/-1}}

/* inner page grids: any 12 column placement collapses on mobile */
@media (max-width:900px){.grid>[style*="grid-column"]{grid-column:1/-1 !important}.grid>div:empty:not(.rule),.grid>p:empty{display:none}}

/* enquiry form */
form input,form textarea,form select{font:inherit;padding:12px;border:1px solid var(--rule-strong);background:var(--paper);color:var(--charcoal);width:100%;border-radius:0;-webkit-appearance:none;appearance:none}
form select{background-image:linear-gradient(45deg,transparent 50%,var(--charcoal) 50%),linear-gradient(135deg,var(--charcoal) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}
form input[type="file"]{padding:10px 12px;background:transparent;border-style:dashed}
form input[type="checkbox"]{width:18px;height:18px;padding:0;margin-top:2px;flex:none;border:1px solid var(--charcoal);background:var(--paper);display:grid;place-items:center}
form input[type="checkbox"]:checked::before{content:"";width:10px;height:10px;background:var(--charcoal)}
form input:focus,form textarea:focus,form select:focus{outline:2px solid var(--charcoal);outline-offset:2px}
form label{display:block;font-size:14px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--mid);margin-bottom:8px}
.req::after{content:" *";color:var(--charcoal)}
.form-group{margin-bottom:20px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form-full{grid-column:1/-1}
.consent{display:flex;align-items:flex-start;gap:12px;font-size:14px;font-weight:400;text-transform:none;letter-spacing:normal;color:var(--charcoal)}
.sent{border:1px solid var(--charcoal);padding:clamp(24px,3vw,40px);max-width:36em}
.sent .h3{margin-bottom:14px}
.sent p{margin-bottom:10px}
button.cta:disabled{opacity:.6;cursor:default}

/* projects list */
.projects-container{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(28px,3vw,48px);row-gap:28px;align-items:start}
.projects-preview{display:flex;flex-direction:column;gap:20px}
.projects-preview-img{aspect-ratio:1/1;overflow:hidden;background:var(--mid);display:flex;align-items:center;justify-content:center}
.projects-preview-img img{width:100%;height:100%;object-fit:cover}
.projects-preview-link{align-self:flex-start}
@media (max-width:900px){
  .projects-container{grid-template-columns:1fr;gap:36px}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition:none !important;animation:none !important}
  html{scroll-behavior:auto}
  .hero-img img{animation:none}
}