/* ───────────────────────────────────────────────
   CS Electrical Services · sections
   Hero · What we do · Room by room · Jobs · Reviews · Contact
   ─────────────────────────────────────────────── */

/* Scroll reveal (only when JS is running) */
.js [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js [data-reveal].is-in{opacity:1;transform:none}

/* Ambient light: a blurred copy of the photo glows behind it (set from JS) */
.glow{position:relative}
.glow::before{
  content:"";position:absolute;inset:6% -12% -6%;z-index:-1;pointer-events:none;
  background:var(--img) center/cover no-repeat;
  filter:blur(34px) saturate(1.6) brightness(1.1);opacity:0;transition:opacity 1.4s ease;
}
.rooms .glow::before,.hero.is-on .glow::before{opacity:.42}

/* ═════════ Hero ═════════ */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:max(760px,100svh);
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:1fr auto;column-gap:var(--gutter);
  padding:calc(var(--header-h) + clamp(28px,6vh,64px)) var(--edge) 0;
  background:
    radial-gradient(55% 60% at 82% 82%,rgba(255,168,64,.11),transparent 70%),
    radial-gradient(40% 40% at 8% 10%,rgba(243,210,56,.05),transparent 70%),
    var(--ink);
  --H:clamp(400px,76svh,780px);
}
.hero__copy{
  grid-column:1/span 6;grid-row:1;
  display:flex;flex-direction:column;justify-content:space-between;gap:44px;
  padding-bottom:clamp(44px,8vh,92px);
}
.eyebrow{font:500 .74rem/1.7 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}

.hero__title{
  font:650 clamp(2.1rem,.9rem + 3.1vw,4rem)/1.04 var(--f-display);
  font-stretch:114%;letter-spacing:-.03em;
}
.hero__title .line{display:block}
.stop{color:var(--yellow)}

.hero__foot{max-width:560px}
.hero__lead{font-size:1.14rem;line-height:1.55;color:#d9d3c5;max-width:44ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* The three light bars */
.hero__bars{
  grid-column:7/-1;grid-row:1;align-self:end;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:clamp(8px,1vw,14px);
}
.bar{position:relative;margin:0;height:var(--bh)}
.bar--a{--bh:calc(var(--H)*.86);--on:.35s}
.bar--b{--bh:var(--H);--on:.7s}
.bar--c{--bh:calc(var(--H)*.7);--on:1.05s}
.bar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bar--a img{object-position:50% 34%}
.bar--b img{object-position:68% 56%}
.bar--c img{object-position:50% 50%}
.bar::after{ /* hairline edge, and a shade at the foot so the caption always reads */
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
  background:linear-gradient(to top,rgba(8,7,6,.7),rgba(8,7,6,0) 38%);
}
.bar figcaption{
  position:absolute;left:12px;bottom:14px;z-index:2;
  writing-mode:vertical-rl;transform:rotate(180deg);
  font:500 .6rem/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:#fff;
  text-shadow:0 1px 10px rgba(0,0,0,.85);
}

.hero__base{
  grid-column:1/-1;grid-row:2;
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 28px;
  padding:18px 0 20px;border-top:1px solid var(--rule);
  font:500 .7rem/1.4 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
}
.hero__base a{text-decoration:none;color:var(--text);text-transform:none;letter-spacing:.06em}
.hero__base a:hover{color:var(--yellow)}

/* Switch-on: lines and bars come on in turn, like a row of fittings */
.js .hero:not(.is-on) .line{opacity:.13}
.js .hero:not(.is-on) .bar img{filter:brightness(.08) saturate(.4)}
.hero.is-on .line{animation:line-on 1.1s ease both;animation-delay:var(--l,0s)}
.hero.is-on .line:nth-child(1){--l:.1s}
.hero.is-on .line:nth-child(2){--l:.45s}
.hero.is-on .line:nth-child(3){--l:.8s}
.hero.is-on .bar img{animation:strip-on 1.7s ease both;animation-delay:var(--on)}
@keyframes line-on{
  0%{opacity:.13;text-shadow:none}
  9%{opacity:.95}
  15%{opacity:.25}
  24%{opacity:1;text-shadow:0 0 34px rgba(243,210,56,.4)}
  100%{opacity:1;text-shadow:none}
}
@keyframes strip-on{
  0%{filter:brightness(.08) saturate(.4)}
  8%{filter:brightness(.85) saturate(1)}
  13%{filter:brightness(.15) saturate(.5)}
  21%{filter:brightness(1) saturate(1)}
  27%{filter:brightness(.35) saturate(.7)}
  40%,100%{filter:brightness(1) saturate(1)}
}

/* ═════════ What we do ═════════ */
.intro{background:var(--paper);color:var(--paper-ink);padding-block:clamp(72px,11vw,168px)}
.intro .label{color:var(--dim-paper)}
.intro__grid{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:clamp(36px,5vw,72px);
}
.intro .label{grid-column:1/-1}
.intro__title{
  grid-column:1/span 10;
  font:640 clamp(2rem,.9rem + 3.5vw,4.2rem)/1.03 var(--f-display);font-stretch:112%;letter-spacing:-.03em;text-wrap:balance;
}
mark{
  background:linear-gradient(transparent 60%,var(--yellow) 60% 90%,transparent 90%);
  color:inherit;padding:0 .06em;margin:0 -.06em;
}
.intro__figure{grid-column:1/span 6}
.intro__figure img{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:50% 88%}
.intro__figure figcaption{
  margin-top:12px;font:500 .7rem/1.6 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim-paper);
}
.intro__figure figcaption span{color:var(--paper-ink)}
.intro__body{grid-column:8/-1;align-self:end}
.intro__body>p{font-size:1.08rem;line-height:1.62}
.services{margin-top:30px;border-top:1px solid var(--rule-paper)}
.services li{
  display:flex;align-items:center;gap:.9em;padding:.9em 0;border-bottom:1px solid var(--rule-paper);
  font:500 .98rem/1.3 var(--f-display);
}
.services li::before,.spec li::before{
  content:"";flex:none;width:9px;height:14px;background:var(--yellow);
  clip-path:polygon(64% 0,6% 58%,44% 58%,30% 100%,96% 38%,56% 38%);
}
.services li::before{background:var(--paper-ink)}

/* ═════════ Room by room ═════════ */
.rooms{position:relative;isolation:isolate;background:var(--ink);padding-block:clamp(72px,10vw,150px)}
.sec-head{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:20px;
  align-items:end;margin-bottom:clamp(28px,4vw,56px);
}
.sec-head .label{grid-column:1/-1}
.sec-head h2{grid-column:1/span 7}
.sec-head__sub{grid-column:9/-1;color:var(--dim);font-size:1rem}

.sheet{
  position:relative;border:1px solid var(--rule-strong);
  background:
    radial-gradient(rgba(243,237,224,.07) 1px,transparent 1.2px) 0 0/22px 22px,
    #0f0e0c;
}
.sheet__bar{
  display:flex;justify-content:space-between;gap:16px;padding:13px 18px;border-bottom:1px solid var(--rule);
  font:500 .64rem/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
}
.sheet__key{display:flex;align-items:center;gap:.6em}
.k{display:inline-block;margin-left:.9em}
.k--lamp{width:7px;height:7px;border-radius:50%;background:var(--yellow);box-shadow:0 0 8px var(--yellow)}
.k--cable{width:18px;height:0;border-top:1.5px dashed var(--yellow)}
.sheet__svg{display:block;width:100%;height:auto;color:rgba(243,237,224,.17)}
.sheet__title{
  position:absolute;right:0;bottom:0;display:flex;background:#0f0e0c;
  border-top:1px solid var(--rule-strong);border-left:1px solid var(--rule-strong);
}
.sheet__title div{padding:9px 16px 10px;border-left:1px solid var(--rule)}
.sheet__title div:first-child{border-left:0}
.sheet__title dt{font:500 .52rem/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.sheet__title dd{margin-top:5px;font:500 .68rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text)}

/* drawing */
.d-line,.d-line *{vector-effect:non-scaling-stroke}
.d-line{fill:none;stroke:rgba(243,237,224,.5);stroke-width:1.3;stroke-linejoin:round;stroke-linecap:round}
.d-shell{stroke:rgba(243,237,224,.78);stroke-width:1.8}
.d-heavy{stroke-width:2.2}
.d-thin{stroke-width:.8;opacity:.55}
.d-dim{opacity:.4}
.d-note{font:500 10.5px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;fill:var(--dim);stroke:none}

.room{cursor:pointer;outline:none}
.room__fill{fill:rgba(243,210,56,0);transition:fill .5s}
.room:hover .room__fill{fill:rgba(243,237,224,.05)}
.room.is-active .room__fill{fill:rgba(243,210,56,.085)}
.room:focus-visible .room__fill{stroke:var(--yellow);stroke-width:1.5}
.room__hit{fill:transparent;stroke:none}
.room__label{font:500 11px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;fill:var(--dim);pointer-events:none;transition:fill .3s}
.room:hover .room__label{fill:var(--text)}
.room.is-active .room__label{fill:var(--yellow)}

.lamp{fill:rgba(243,237,224,.5);transition:fill .45s}
.lamp.strip{fill:none;stroke:rgba(243,237,224,.5);stroke-width:4;stroke-linecap:round;transition:stroke .45s}
.is-active .lamp{fill:var(--yellow)}
.is-active .lamp.strip{fill:none;stroke:var(--yellow)}
.halo{fill:url(#lampglow);opacity:0;pointer-events:none;transition:opacity .7s}
.is-active .halo{opacity:1}
.cone{fill:var(--yellow);opacity:0;pointer-events:none;transition:opacity .7s}
.is-active .cone{opacity:.1}
.flame{fill:var(--yellow);opacity:.2;transition:opacity .6s}
.is-active .flame{opacity:.95}
.mirror{fill:none;stroke:rgba(243,237,224,.32);stroke-width:3;transition:stroke .5s,filter .5s}
.is-active .mirror{stroke:var(--yellow);filter:drop-shadow(0 0 6px rgba(243,210,56,.7))}
.screen{fill:rgba(243,237,224,.05);transition:fill .6s}
.is-active .screen{fill:rgba(243,210,56,.2)}
.ledstrip{fill:none;stroke:rgba(243,237,224,.3);stroke-width:3;stroke-linecap:round;transition:stroke .5s,filter .5s}
.is-active .ledstrip{stroke:var(--yellow);filter:drop-shadow(0 0 5px rgba(243,210,56,.85))}
.hl{transition:stroke .4s,fill .4s}
.is-active .hl{stroke:var(--yellow);fill:rgba(243,210,56,.2)}

/* “Whole house”: the shell, every light and the cable runs come up together */
.sheet[data-active="whole"] .d-shell{stroke:var(--yellow)}
.sheet[data-active="whole"] .lamp{fill:var(--yellow)}
.sheet[data-active="whole"] .lamp.strip{fill:none;stroke:var(--yellow)}
.sheet[data-active="whole"] .halo{opacity:.55}
.sheet[data-active="whole"] .room__label{fill:var(--text)}

.supply{fill:none;stroke:rgba(243,237,224,.28);stroke-width:1.2;stroke-dasharray:3 5;vector-effect:non-scaling-stroke;transition:stroke .5s}
.supply-label{opacity:.55}
.sheet[data-active="outbuilding"] .supply{stroke:var(--yellow);animation:flow 1s linear infinite}
.sheet[data-active="outbuilding"] .supply-label{fill:var(--yellow);opacity:1}
.cables path{fill:none;stroke:var(--yellow);stroke-width:1.5;stroke-dasharray:5 6;vector-effect:non-scaling-stroke;opacity:0;transition:opacity .6s}
.sheet[data-active="whole"] .cables path{opacity:.95;animation:flow 1.3s linear infinite}
@keyframes flow{to{stroke-dashoffset:-22}}

/* room chooser + panels */
.rooms__ui{margin-top:clamp(28px,4vw,48px)}
.rooms{overflow-x:clip}
.rooms__index{position:relative;display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(30px,4.5vw,64px)}
.rooms__index button{
  padding:.9em 1.15em;background:transparent;border:1px solid var(--rule-strong);color:var(--dim);
  font:500 .72rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;
  transition:color .25s,border-color .25s,background .25s;
}
.rooms__index button:hover{color:var(--text);border-color:var(--text)}
.rooms__index button[aria-selected="true"]{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}

.room-panel{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:start;min-height:440px}
.room-panel[hidden]{display:none}
.room-panel.is-entering{animation:panel-in .7s var(--ease) both}
@keyframes panel-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.no-js .room-panel[hidden]{display:grid}

.room-panel__text{grid-column:1/span 5;padding-top:4px}
.tag{margin-bottom:18px;font:500 .72rem/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--yellow)}
.room-panel h3{
  margin-bottom:16px;font:620 clamp(1.55rem,1rem + 1.7vw,2.4rem)/1.1 var(--f-display);
  font-stretch:110%;letter-spacing:-.022em;text-wrap:balance;
}
.room-panel__text>p:not(.tag){color:var(--dim);max-width:46ch}
.spec{margin-top:28px;border-top:1px solid var(--rule)}
.spec li{display:flex;align-items:flex-start;gap:.9em;padding:.85em 0;border-bottom:1px solid var(--rule);font-size:.97rem;line-height:1.4}
.spec li::before{margin-top:.2em}

.room-panel__photos{
  grid-column:7/-1;display:grid;grid-template-columns:1.55fr 1fr;gap:var(--gutter);align-items:start;
}
.ph{margin:0;position:relative}
.ph img{width:100%;aspect-ratio:var(--ar,4/5);object-fit:cover}
.ph--a{grid-row:1/span 2}
.ph--b{margin-top:clamp(36px,6vw,88px)}
.room-panel__photos:has(.ph:only-child){grid-template-columns:minmax(0,500px);justify-content:end}
.ph--a:only-child{grid-column:1}
.room-panel__photos--three .ph--b{margin-top:clamp(36px,6vw,88px)}
.room-panel__photos--three .ph--c{margin-top:0;grid-column:2}

/* ═════════ Recent jobs ═════════ */
.jobs{background:var(--paper);color:var(--paper-ink);padding-block:clamp(72px,10vw,150px) clamp(56px,7vw,100px)}
.jobs .label{color:var(--dim-paper)}
.jobs__head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:clamp(28px,4vw,52px)}
.jobs__head h2{margin-top:18px}
.jobs__ctrl{display:flex;gap:8px}
.arrow{
  width:54px;height:54px;display:grid;place-items:center;background:transparent;color:var(--paper-ink);
  border:1px solid var(--paper-ink);font-size:1.25rem;transition:background .25s,color .25s;
}
.arrow:hover{background:var(--paper-ink);color:var(--paper)}

.jobs__track{
  display:flex;gap:var(--gutter);overflow-x:auto;cursor:grab;
  padding-inline:var(--edge);scroll-padding-inline:var(--edge);
  scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;
}
.jobs__track::-webkit-scrollbar{display:none}
.jobs__track.is-drag{cursor:grabbing;scroll-snap-type:none;user-select:none}
.job{position:relative;flex:0 0 clamp(250px,25vw,340px);scroll-snap-align:start;display:flex;flex-direction:column}
.job figure{aspect-ratio:4/5;overflow:hidden;background:#d8d1c1}
.job img{width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none;transition:transform 1s var(--ease)}
.job:hover img{transform:scale(1.035)}
.job__tag{
  position:absolute;top:16px;left:-8px;padding:.55em 1.2em .55em .85em;
  background:var(--yellow);color:var(--ink);
  font:500 .66rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;
  clip-path:polygon(0 0,calc(100% - 9px) 0,100% 50%,calc(100% - 9px) 100%,0 100%);
}
.job h3{margin-top:18px;font:620 1.18rem/1.2 var(--f-display);font-stretch:108%;letter-spacing:-.012em}
.job p{margin-top:8px;color:var(--dim-paper);font-size:.94rem;line-height:1.5}
.jobs__bar{position:relative;margin-top:clamp(28px,3vw,44px);height:1px;background:var(--rule-paper)}
.jobs__bar span{position:absolute;top:-1px;left:var(--x,0%);width:var(--w,30%);height:3px;background:var(--paper-ink);transition:left .15s linear}

/* ═════════ Reviews ═════════ */
.words{position:relative;isolation:isolate;background:var(--carbon);border-top:1px solid var(--rule);padding-block:clamp(72px,10vw,150px)}
.words__grid{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:clamp(26px,3.4vw,44px);
  align-items:start;
}
.words__label{grid-column:1/-1}
.quote--lead{grid-column:1/span 7;grid-row:2;padding-left:clamp(20px,2.6vw,38px);border-left:2px solid var(--yellow)}
.quote--lead blockquote p{
  font:300 italic clamp(1.9rem,.9rem + 3.1vw,3.7rem)/1.1 var(--f-serif);letter-spacing:-.018em;text-wrap:balance;
}
.quote figcaption{margin-top:22px;font:400 .7rem/1.7 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.quote figcaption b{color:var(--text);font-weight:500}
.words__list{grid-column:9/-1;grid-row:2/span 2}
.words__list .quote{padding-block:24px;border-top:1px solid var(--rule)}
.words__list .quote:first-child{border-top:0;padding-top:4px}
.words__list blockquote p{font:400 1.08rem/1.5 var(--f-serif)}
.words__list figcaption{margin-top:12px}
.words__photo{grid-column:1/span 6;grid-row:3;align-self:start}
.words__photo img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 90%}
.words__photo figcaption{margin-top:12px;font:500 .68rem/1.6 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.words__note{margin-top:8px;padding-top:24px;border-top:1px solid var(--rule);color:var(--dim);font-size:.9rem}
.words__note a{color:var(--yellow);text-underline-offset:3px}

/* ═════════ Contact ═════════ */
.contact{background:var(--yellow);color:var(--ink);padding-block:clamp(72px,10vw,150px)}
.contact .label{color:rgba(12,11,10,.7)}
.contact .label::before{background:var(--ink)}
.contact__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:56px;align-items:start}
.contact__lead{grid-column:1/span 6}
.contact h2{
  margin-top:22px;font:700 clamp(2.2rem,1rem + 3.4vw,4.2rem)/.98 var(--f-display);font-stretch:118%;letter-spacing:-.04em;
}
.contact__intro{margin-top:22px;max-width:32ch;font-size:1.18rem;line-height:1.45;color:rgba(12,11,10,.82)}
.contact__phone{
  display:block;width:fit-content;margin-top:clamp(30px,4vw,52px);padding-bottom:.08em;
  font:700 clamp(2rem,1rem + 3.3vw,3.7rem)/1.05 var(--f-display);font-stretch:116%;letter-spacing:-.035em;
  text-decoration:none;border-bottom:3px solid var(--ink);
}
.contact__mail{display:block;width:fit-content;margin-top:16px;font:500 1.08rem/1.3 var(--f-display);text-underline-offset:4px}
.contact__links{margin-top:26px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.contact__links a{
  text-decoration:none;border-bottom:1px solid rgba(12,11,10,.35);padding-bottom:2px;
  font:500 .72rem/1.4 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;transition:border-color .2s;
}
.contact__links a:hover{border-color:var(--ink)}

/* The enquiry is a faceplate: square, screwed down at the corners */
.enquiry{
  grid-column:7/-1;position:relative;background:var(--ink);color:var(--text);
  padding:clamp(34px,4vw,60px) clamp(26px,3.6vw,56px);
  background-image:
    radial-gradient(circle,#4a463e 0 2.5px,#2a2722 3px 4.5px,transparent 5px),
    radial-gradient(circle,#4a463e 0 2.5px,#2a2722 3px 4.5px,transparent 5px),
    radial-gradient(circle,#4a463e 0 2.5px,#2a2722 3px 4.5px,transparent 5px),
    radial-gradient(circle,#4a463e 0 2.5px,#2a2722 3px 4.5px,transparent 5px);
  background-size:10px 10px;background-repeat:no-repeat;
  background-position:14px 14px,calc(100% - 14px) 14px,14px calc(100% - 14px),calc(100% - 14px) calc(100% - 14px);
}
.enquiry .label{color:var(--dim)}
.enquiry .label::before{background:var(--yellow)}
.enquiry__sentence{margin-top:22px;font:300 clamp(1.25rem,.9rem + 1.05vw,1.8rem)/1.95 var(--f-serif);letter-spacing:-.005em}
.fld{display:inline-block}
.fld input,.fld select{
  font:400 1em/1.25 var(--f-serif);color:var(--yellow);background:transparent;border:0;border-radius:0;
  border-bottom:1.5px solid rgba(243,210,56,.55);padding:0 .12em;max-width:100%;appearance:none;-webkit-appearance:none;
  field-sizing:content;min-width:4.5em;
  transition:border-color .2s,box-shadow .2s;
}
.fld input::placeholder{color:rgba(243,210,56,.38);font-style:italic}
.fld input:focus,.fld select:focus{outline:none;border-bottom-color:var(--yellow);box-shadow:0 1.5px 0 var(--yellow)}
.fld--select select{
  padding-right:1.1em;cursor:pointer;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23f3d238' stroke-width='1.5'/%3E%3C/svg%3E") right .2em center no-repeat;
}
.fld select option{color:#171510;background:#f3ede0;font-family:var(--f-display)}
.fld.is-invalid input,.fld.is-invalid select{border-bottom-color:#ff7d5c}
.enquiry__more{display:block;margin-top:34px}
.enquiry textarea{
  display:block;width:100%;margin-top:14px;padding:.95em 1.05em;border-radius:0;resize:vertical;
  background:rgba(243,237,224,.05);border:1px solid var(--rule-strong);color:var(--text);font:400 1rem/1.55 var(--f-display);
}
.enquiry textarea::placeholder{color:var(--dim)}
.enquiry textarea:focus{outline:none;border-color:var(--yellow)}
.enquiry__row{display:flex;align-items:center;flex-wrap:wrap;gap:16px 26px;margin-top:30px}
.enquiry__note{font:400 .84rem/1.45 var(--f-display);color:var(--dim);max-width:32ch}
.enquiry__note.is-error{color:#ff9a80}

/* ═════════ Tablet & phone ═════════ */
@media (max-width:1100px){
  .hero__copy{grid-column:1/span 7}
  .hero__bars{grid-column:8/-1}
  .intro__title{grid-column:1/-1}
  .intro__figure{grid-column:1/span 8}
  .intro__body{grid-column:9/-1}
  .sec-head h2{grid-column:1/span 8}
  .sec-head__sub{grid-column:1/-1}
  .room-panel__text{grid-column:1/span 6}
  .room-panel__photos{grid-column:7/-1}
  .quote--lead{grid-column:1/span 12}
  .words__photo{grid-column:1/span 8;grid-row:3}
  .words__list{grid-column:1/-1;grid-row:4}
  .contact__lead{grid-column:1/span 6}
  .enquiry{grid-column:7/-1}
}

@media (max-width:900px){
  .hero{display:flex;flex-direction:column;min-height:0;padding-bottom:0;--H:clamp(260px,82vw,440px)}
  .hero__copy{display:contents}
  .eyebrow{order:1}
  .hero__title{order:2;margin-top:22px;font-size:clamp(1.8rem,8.2vw,3.4rem)}
  .hero__bars{order:3;margin-top:32px;align-self:stretch}
  .hero__foot{order:4;margin-top:34px;max-width:none}
  .hero__base{order:5;margin-top:36px;font-size:.64rem}
  .bar figcaption{font-size:.54rem;left:9px;bottom:10px}

  .intro__figure,.intro__body{grid-column:1/-1}
  .intro__figure img{aspect-ratio:16/9}

  .sec-head h2{grid-column:1/-1}
  .room-panel{display:block;min-height:0}
  .room-panel__photos{margin-top:34px}
  .ph--b,.room-panel__photos--three .ph--b{margin-top:28px}

  .jobs__ctrl{display:none}
  .job{flex-basis:min(74vw,320px)}

  .contact__lead,.enquiry{grid-column:1/-1}
  .words__photo{grid-column:1/-1}
}

@media (max-width:700px){
  .sheet__title,.sheet__bar .sheet__key{display:none}
  .d-line{stroke-width:1}
  .sheet__bar{padding:11px 14px}

  /* chooser scrolls sideways instead of wrapping */
  .rooms__index{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(var(--pad)*-1);padding-inline:var(--pad);scrollbar-width:none;scroll-snap-type:x proximity}
  .rooms__index::-webkit-scrollbar{display:none}
  .rooms__index button{flex:none;scroll-snap-align:start}
  .room-panel__photos{grid-template-columns:1fr 1fr}
  .ph--a{grid-row:auto}
  .ph--a:only-child{max-width:none;grid-column:1/-1}
  .room-panel__photos--three .ph--a{grid-column:1/-1}
  .room-panel__photos--three .ph--b,.room-panel__photos--three .ph--c{grid-column:auto;margin-top:0}

  .contact__phone{font-size:clamp(1.9rem,9vw,2.6rem)}
  .enquiry{padding:34px 22px}
}