/* ============================================================
   the Art Deco Home Renovation Ltd
   ------------------------------------------------------------
   Brand colours are sampled directly from the supplied logo:
     gold     #D7B56D
     charcoal #434242
   Gold fails contrast on light grounds (2.08:1), so it is used
   for fills, rules and graphics on light — and for text only on
   dark. --gold-ink is the darkened variant for text on cream.
   ============================================================ */

:root{
  /* brand */
  --gold:        #D7B56D;
  --gold-soft:   #E4CA98;
  --gold-ink:    #806025;   /* 5.1:1 on --cream — safe for text */
  --charcoal:    #434242;

  /* grounds */
  --ink:         #1A1918;
  --ink-2:       #232120;
  --teal:        #123338;   /* drawn from the panelling in the hero photo */
  --teal-2:      #0C2529;
  --cream:       #F5F0E8;
  --paper:       #FBF8F3;
  --white:       #FFFFFF;

  /* text */
  --tx:          #221F1D;
  --tx-2:        #55504A;
  --tx-onDark:   #F2ECE2;
  --tx-onDark-2: #B9B1A5;

  --line:        #DED5C6;
  --line-dark:   rgba(215,181,109,.26);

  /* type */
  --f-disp: "Poiret One", "Josefin Sans", Georgia, serif;
  --f-head: "Josefin Sans", "Inter", system-ui, sans-serif;
  --f-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* rhythm */
  --sp-1: .5rem;  --sp-2: 1rem;   --sp-3: 1.5rem;
  --sp-4: 2rem;   --sp-5: 3rem;   --sp-6: 4rem;
  --sp-7: 6rem;   --sp-8: 8rem;

  --shell: 1240px;
  --r: 2px;                  /* Deco is sharp — near-zero radius throughout */
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset / base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--tx);
  font-family:var(--f-body); font-size:1rem; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
h1,h2,h3{ margin:0; line-height:1.15; font-weight:600; }
p{ margin:0 0 1em; }
a{ color:inherit; }
ul,ol{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; cursor:pointer; }
svg{ fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; border-radius:var(--r); }
.sec--ink :focus-visible,.sec--teal :focus-visible,.hero :focus-visible,.ft :focus-visible{ outline-color:var(--gold-soft); }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:2000;
  background:var(--gold); color:var(--ink); padding:.8rem 1.4rem; font-weight:600;
}
.skip-link:focus{ left:1rem; top:1rem; }

.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:1.5rem; }
.shell--narrow{ max-width:880px; }

/* ---------- type scale ---------- */
.h2{
  font-family:var(--f-disp); font-weight:400;
  font-size:clamp(2rem,1.2rem + 3.4vw,3.6rem); letter-spacing:.01em; line-height:1.08;
}
.h2--mid{ text-align:center; }
.h3{ font-family:var(--f-head); font-size:1.35rem; font-weight:600; letter-spacing:.01em; }

.eyebrow{
  font-family:var(--f-head); font-size:.78rem; font-weight:600;
  letter-spacing:.32em; text-transform:uppercase; color:var(--gold-ink);
  margin:0 0 var(--sp-2);
}
.eyebrow--mid{ text-align:center; }
.eyebrow--onGold{ color:var(--ink); }
.sec--ink .eyebrow,.sec--teal .eyebrow,.hero .eyebrow{ color:var(--gold); }
.dia{ font-style:normal; color:var(--gold); margin-inline:.5em; font-size:.7em; vertical-align:.15em; }

.sh{ margin-bottom:var(--sp-6); }
.sh__lede{
  max-width:62ch; margin:var(--sp-3) auto 0; text-align:center;
  color:var(--tx-2); font-size:1.05rem;
}
.sec--ink .sh__lede,.sec--teal .sh__lede{ color:var(--tx-onDark-2); }
.sh__lede--onGold{ color:#3A3223; }

/* ---------- section grounds ---------- */
.sec{ padding-block:clamp(3.5rem,8vw,7rem); position:relative; }
.sec--ink{ background:var(--ink); color:var(--tx-onDark); }
.sec--teal{ background:var(--teal); color:var(--tx-onDark); }
.sec--gold{ background:var(--gold); color:var(--ink); }
.sec--ink .h2,.sec--teal .h2{ color:var(--cream); }

/* hairline + lozenge divider, a Deco staple */
.sec + .sec:not(.sec--ink):not(.sec--teal):not(.sec--gold)::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(680px,80%); height:1px;
  background:linear-gradient(90deg,transparent,var(--line) 22%,var(--line) 78%,transparent);
}

/* ---------- buttons ---------- */
.btn{
  --btn-bg:var(--gold); --btn-fg:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  min-height:48px; padding:.85rem 1.9rem;
  background:var(--btn-bg); color:var(--btn-fg);
  font-family:var(--f-head); font-weight:600; font-size:.94rem;
  letter-spacing:.09em; text-transform:uppercase; text-decoration:none;
  border:0; border-radius:0; position:relative; isolation:isolate;
  /* chamfered corners — the stepped Deco edge */
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  transition:background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:hover{ background:var(--gold-soft); transform:translateY(-2px); box-shadow:0 8px 22px rgba(0,0,0,.22); }
.btn:active{ transform:translateY(0); }
.btn--lg{ width:100%; min-height:56px; font-size:1rem; }
.btn .ico{ width:18px; height:18px; flex:none; }
/* Any bare <svg> in a button. Without this it takes its intrinsic size —
   300x150 reduced by the viewBox, about 70px square — which blows the button
   up and wraps its label. */
.btn svg{ width:18px; height:18px; flex:none; }
/* A button label is two or three words; it should never wrap. */
.btn{ white-space:nowrap; }

.circ{
  width:48px; height:48px; display:grid; place-items:center;
  background:transparent; border:1px solid var(--line);
  color:var(--tx); border-radius:50%;
  transition:background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.circ svg{ width:20px; height:20px; }
.circ:hover{ background:var(--gold); border-color:var(--gold); color:var(--ink); }
.circ:disabled{ opacity:.32; cursor:not-allowed; }
.circ:disabled:hover{ background:transparent; border-color:var(--line-dark); color:inherit; }
.sec--ink .circ{ border-color:var(--line-dark); color:var(--cream); }
.circ--dark{ border-color:rgba(26,25,24,.4); color:var(--ink); }
.circ--dark:hover{ background:var(--ink); border-color:var(--ink); color:var(--gold); }

/* ============================================================
   HEADER
   ============================================================ */
.hdr{
  position:fixed; inset:0 0 auto; z-index:1000;
  padding-block:.9rem;
  transition:background .3s var(--ease), box-shadow .3s var(--ease), padding .3s var(--ease);
}
.hdr__in{ display:flex; align-items:center; gap:var(--sp-4); }
.hdr.is-stuck{ background:rgba(26,25,24,.94); backdrop-filter:blur(12px); box-shadow:0 1px 0 var(--line-dark); padding-block:.5rem; }
/* The header is cream-on-transparent because it sits over the dark hero.
   Sub-pages have no hero, so it has to start solid or the nav is invisible. */
.hdr--solid{ background:rgba(26,25,24,.94); backdrop-filter:blur(12px); box-shadow:0 1px 0 var(--line-dark); }

.brand{ display:block; flex:none; text-decoration:none; line-height:0; }
.brand__img{ width:auto; height:56px; transition:height .3s var(--ease); }
.brand__img--dark{ display:none; }
.hdr.is-stuck .brand__img{ height:44px; }

.nav{ margin-left:auto; }
.nav__list{ display:flex; gap:var(--sp-4); }
.nav__list a{
  font-family:var(--f-head); font-size:.88rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--cream);
  text-decoration:none; padding:.5rem 0; position:relative; display:block;
}
.nav__list a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .25s var(--ease);
}
.nav__list a:hover::after,.nav__list a.is-here::after{ transform:scaleX(1); }

.hdr__cta{ flex:none; padding:.7rem 1.3rem; min-height:44px; font-size:.85rem; }
.burger{ display:none; width:48px; height:48px; background:none; border:0; padding:10px; }
.burger span{ display:block; height:2px; background:var(--cream); margin:5px 0; transition:transform .25s var(--ease),opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; min-height:min(100svh,860px); display:flex; align-items:center; padding-block:9rem 4rem; overflow:hidden; }
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__media img{ width:100%; height:100%; object-fit:cover; }
.hero__scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg,rgba(12,18,20,.78) 0%,rgba(12,18,20,.34) 32%,rgba(12,18,20,.6) 70%,rgba(12,18,20,.9) 100%),
    linear-gradient(90deg,rgba(12,18,20,.5),transparent 62%);
}
/* The brush mark from the logo, leading the hero. */
.crest{
  position:relative; display:flex; justify-content:center;
  margin-bottom:clamp(.8rem,2vh,1.6rem); line-height:0;
}
.crest__mark{
  position:relative; z-index:1;
  width:clamp(78px,11vw,140px); height:auto;
  filter:drop-shadow(0 0 26px rgba(215,181,109,.45));
}
.hero__in{ position:relative; z-index:3; text-align:center; color:var(--tx-onDark); }

.hero__h1{
  font-family:var(--f-disp); font-weight:400; color:#fff;
  font-size:clamp(2.6rem,1.1rem + 6.4vw,6rem); line-height:1.02; letter-spacing:.005em;
  margin:0 0 var(--sp-3); text-shadow:0 2px 30px rgba(0,0,0,.4);
}
.hero__h1 em{ font-style:normal; color:var(--gold); }
.hero__lede{ max-width:62ch; margin:0 auto var(--sp-4); font-size:clamp(1rem,.95rem + .3vw,1.15rem); color:#E8E2D8; }

.trust{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem 1.6rem;
  margin:0 0 var(--sp-5); font-size:.86rem; color:#D8D1C5;
  font-family:var(--f-head); letter-spacing:.06em;
}
.trust li{ display:flex; align-items:center; gap:.45rem; }
.trust li + li::before{ content:"◆"; color:var(--gold); font-size:.5em; margin-right:1.1rem; }
.trust b{ color:#fff; }
.stars{ color:var(--gold); letter-spacing:.08em; }

/* quick enquiry bar */
.quick{
  display:grid; grid-template-columns:repeat(4,1fr) auto; gap:0;
  background:rgba(250,247,242,.97); backdrop-filter:blur(8px);
  border:1px solid rgba(215,181,109,.5); padding:.5rem;
  text-align:left; max-width:1060px; margin-inline:auto;
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
}
.quick__f{ display:flex; flex-direction:column; padding:.55rem .95rem; border-right:1px solid var(--line); min-width:0; }
.quick__f label{ font-family:var(--f-head); font-size:.78rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-ink); margin-bottom:.15rem; }
.quick__f input,.quick__f select{
  border:0; background:none; font:inherit; font-size:.95rem; color:var(--tx);
  padding:.15rem 0; min-height:28px; width:100%;
}
.quick__f input:focus,.quick__f select:focus{ outline:none; }
.quick__f:focus-within{ background:rgba(215,181,109,.1); }
.quick__go{ margin:0; }

.quick__note{ margin:var(--sp-2) 0 0; font-size:.85rem; color:#CFC7BA; }
.quick__note.is-err{ color:#FFC9B8; }
.quick__note.is-ok{ color:var(--gold-soft); }

/* ============================================================
   LAYOUT HELPERS
   ============================================================ */
.g2{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:center; }
.g2--rev .prose{ order:-1; }

.prose p{ color:var(--tx-2); }
.prose--onDark p{ color:var(--tx-onDark-2); }
.prose .h2{ margin-bottom:var(--sp-3); }
.prose .btn{ margin-top:var(--sp-2); }

.lead-line{
  font-family:var(--f-disp); font-size:clamp(1.15rem,1rem + .7vw,1.5rem);
  line-height:1.45; color:var(--tx) !important; margin-bottom:1rem;
}
.prose--onDark .lead-line{ color:var(--cream) !important; }
.fam-note{
  margin:0 0 var(--sp-3); padding:.9rem 1.1rem;
  border-left:2px solid var(--gold); background:rgba(215,181,109,.11);
  font-size:.92rem;
}

.ticks{ margin:var(--sp-3) 0 var(--sp-4); display:grid; gap:.9rem; }
.ticks li{ position:relative; padding-left:2rem; color:var(--tx-2); }
.ticks li::before{
  content:""; position:absolute; left:0; top:.55em; width:11px; height:11px;
  background:var(--gold); transform:rotate(45deg);
}
.ticks b{ color:var(--tx); }
.ticks--onDark li{ color:var(--tx-onDark-2); }
.ticks--onDark b{ color:var(--cream); }

.pull{
  margin:var(--sp-4) 0; padding:1.4rem 0 1.4rem 1.8rem;
  border-left:2px solid var(--gold);
}
.pull p{ margin:0; font-family:var(--f-disp); font-size:1.35rem; line-height:1.4; color:var(--cream); }

/* framed images — the Deco arch is the signature device */
.fr{ margin:0; position:relative; }
.fr img{ width:100%; }
.fr--arch img{ border-radius:50% 50% 0 0 / 26% 26% 0 0; }
.fr--arch::before{
  content:""; position:absolute; inset:-14px -14px 14px;
  border:1px solid var(--gold); border-radius:50% 50% 0 0 / 24% 24% 0 0;
  pointer-events:none; z-index:1;
}
.fr--tall img{ aspect-ratio:4/5; object-fit:cover; }

.about__media{ position:relative; padding-bottom:5rem; }
.fr--off{
  position:absolute; right:-4%; bottom:0; width:46%;
  border:6px solid var(--paper); box-shadow:0 18px 40px rgba(0,0,0,.18);
}

/* ============================================================
   SERVICES
   ============================================================ */
/* 12 regular cards + 1 full-width card: three columns divides cleanly and
   leaves no dead cells showing the grid's own background through the gaps. */
.svcs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1px; background:var(--line-dark); border:1px solid var(--line-dark); }
@media (min-width:900px){ .svcs{ grid-template-columns:repeat(3,1fr); } }
.svc{ background:var(--ink); padding:2rem 1.7rem; transition:background .25s var(--ease); }
.svc:hover{ background:var(--ink-2); }
.svc__i{ width:30px; height:30px; color:var(--gold); margin-bottom:1.1rem; }
.svc h3{ font-family:var(--f-head); font-size:1.12rem; font-weight:600; color:var(--cream); margin-bottom:.5rem; letter-spacing:.01em; }
.svc p{ margin:0; font-size:.92rem; color:var(--tx-onDark-2); line-height:1.6; }
.svc--lead{ background:linear-gradient(160deg,rgba(215,181,109,.14),rgba(215,181,109,.03)); }
.svc--lead:hover{ background:linear-gradient(160deg,rgba(215,181,109,.2),rgba(215,181,109,.05)); }
.svc--lead h3{ color:var(--gold); }
@media (min-width:900px){ .svc--wide{ grid-column:1/-1; } }

/* services that have example photos become openable */
.svc[data-work]{ cursor:pointer; position:relative; padding-bottom:3.4rem; }
.svc[data-work]:hover{ background:var(--ink-2); }
.svc[data-work]:hover .svc__i{ transform:translateY(-2px); }
.svc__i{ transition:transform .25s var(--ease); }
.svc__go{
  position:absolute; left:1.7rem; bottom:1.6rem;
  display:inline-flex; align-items:center; gap:.45rem;
  font-family:var(--f-head); font-size:.74rem; font-weight:600;
  letter-spacing:.17em; text-transform:uppercase; color:var(--gold);
}
.svc__go svg{ width:15px; height:15px; transition:transform .25s var(--ease); }
.svc[data-work]:hover .svc__go svg{ transform:translateX(4px); }
.svc--lead .svc__go{ color:var(--gold-soft); }

/* ---- service examples panel ---- */
.wk{
  position:fixed; inset:0; z-index:1900;
  background:rgba(10,10,11,.9); backdrop-filter:blur(4px);
  display:flex; align-items:flex-end; justify-content:center;
}
.wk[hidden]{ display:none; }
.wk__panel{
  background:var(--ink); border:1px solid var(--line-dark);
  width:100%; max-width:1040px; max-height:92vh;
  display:flex; flex-direction:column;
  animation:wkUp .28s var(--ease);
}
@keyframes wkUp{ from{ transform:translateY(22px); opacity:0 } to{ transform:none; opacity:1 } }

.wk__head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
  padding:1.4rem 1.3rem 1.1rem; border-bottom:1px solid var(--line-dark); flex:none;
}
.wk__eyebrow{
  margin:0 0 .3rem; font-family:var(--f-head); font-size:.68rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--gold);
}
.wk__title{
  font-family:var(--f-disp); font-weight:400; color:var(--cream);
  font-size:clamp(1.4rem,1.1rem + 1.3vw,2.1rem); line-height:1.15;
}
.wk__x{
  flex:none; width:48px; height:48px; display:grid; place-items:center;
  background:transparent; border:1px solid rgba(215,181,109,.45);
  color:var(--gold); border-radius:50%;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.wk__x svg{ width:22px; height:22px; stroke-width:2; }
.wk__x:hover{ background:var(--gold); color:var(--ink); }

.wk__grid{
  display:grid; grid-template-columns:1fr; gap:.7rem;
  padding:1.1rem 1.3rem; overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.wkshot{
  display:block; padding:0; border:1px solid var(--line-dark);
  background:none; cursor:zoom-in; line-height:0; width:100%;
  transition:border-color .2s var(--ease), transform .2s var(--ease);
}
.wkshot img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.wkshot:hover{ border-color:var(--gold); }

.wk__foot{
  flex:none; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:.8rem; padding:1.1rem 1.3rem; border-top:1px solid var(--line-dark);
}
.wk__foot p{ margin:0; color:var(--tx-onDark-2); font-size:.95rem; }

@media (min-width:600px){
  .wk__grid{ grid-template-columns:1fr 1fr; gap:.8rem; }
}
@media (min-width:900px){
  .wk{ align-items:center; padding:2rem; }
  .wk__panel{ max-height:86vh; }
  .wk__grid{ grid-template-columns:repeat(3,1fr); padding:1.4rem; }
  .wk__head,.wk__foot{ padding-inline:1.4rem; }
  .wkshot:hover{ transform:translateY(-3px); }
}

/* ============================================================
   BEFORE / AFTER
   ============================================================ */
/* Before/after comparison slider. Used by the featured transformations on
   work.html; main.js drives every .cmp on whatever page it finds one.
   Each pair was cropped to a common frame with the shared landmarks placed
   consistently, so dragging reads as one room rather than two unrelated
   pictures. The BEFORE label lives inside the clipped layer, so each label is
   only visible while its own photo is. */
.cmp{ max-width:min(100%,480px); margin-inline:auto; }

/* A room needs a landscape frame; the kitchen pair stays portrait. */
.cmp--wide{ max-width:640px; }
.cmp--wide .cmp__stage{ aspect-ratio:4/3; }
.cmp__stage{
  position:relative; aspect-ratio:3/4; overflow:hidden;
  border:1px solid var(--line); background:var(--ink);
  cursor:ew-resize; touch-action:pan-y;
}
.cmp__layer{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  user-select:none; -webkit-user-select:none; -webkit-user-drag:none;
}
/* Stacking order matters: the reveal layer must sit ABOVE the "After" tag,
   so that dragging fully right hides that tag along with the after photo. */
.cmp__reveal{ position:absolute; inset:0; z-index:3; clip-path:inset(0 calc(100% - var(--pos)) 0 0); }

.cmp__tag{
  position:absolute; top:1rem;
  font-family:var(--f-head); font-size:.78rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; padding:.45rem 1rem;
  pointer-events:none; white-space:nowrap;
}
.cmp__tag--before{ left:1rem; z-index:4; background:rgba(26,25,24,.85); color:var(--cream); }
.cmp__tag--after{ right:1rem; z-index:2; background:var(--gold); color:var(--ink); }

.cmp__handle{
  position:absolute; top:0; bottom:0; left:var(--pos); width:2px;
  background:var(--gold); transform:translateX(-1px); z-index:5; pointer-events:none;
  box-shadow:0 0 14px rgba(0,0,0,.5);
}
.cmp__grip{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:52px; height:52px; border-radius:50%;
  background:var(--gold); color:var(--ink);
  display:grid; place-items:center; box-shadow:0 3px 16px rgba(0,0,0,.45);
}
.cmp__grip svg{ width:24px; height:24px; stroke-width:2; }

.cmp__sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.cmp__range{ width:100%; margin-top:1.1rem; min-height:44px; accent-color:var(--gold-ink); cursor:ew-resize; }
.cmp__hint{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ============================================================
   BENTO / WHY US
   ============================================================ */
.bento{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.2rem; }
@media (min-width:1000px){ .bento{ grid-template-columns:repeat(3,1fr); } }
.card{ background:var(--white); border:1px solid var(--line); padding:2rem 1.8rem; transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.card:hover{ transform:translateY(-4px); box-shadow:0 14px 34px rgba(60,50,30,.12); }
.card__i{ width:30px; height:30px; color:var(--gold-ink); margin-bottom:1rem; }
.card h3{ font-family:var(--f-head); font-size:1.16rem; margin-bottom:.5rem; }
.card p{ margin:0; font-size:.94rem; color:var(--tx-2); }
.card--gold{ background:var(--gold); border-color:var(--gold); }
.card--gold .card__i{ color:var(--ink); }
.card--gold p{ color:#3A3223; }

/* ============================================================
   GALLERY RAIL
   ============================================================ */
.gal .sh{ margin-bottom:var(--sp-5); }
/* The rail sits inside the content column rather than bleeding full width.
   With no inline padding, scrollLeft:0 puts the first card flush with the
   heading above it and the far end stops flush with the last card — so there
   is no empty run past the images at either end. */
.gal__wrap{ padding-inline:1.5rem; }
.rail{
  display:flex; gap:1.1rem; overflow-x:auto;
  /* overflow-y computes to auto once overflow-x scrolls. The cards' reveal
     animation lifts them 22px, which overflows vertically just enough for the
     browser to reserve a 10px scrollbar gutter — and that gutter ate 10px off
     the right end only, so the last card never sat flush with the first. */
  overflow-y:hidden;
  scroll-snap-type:x proximity;
  padding:0 0 1.2rem;
  scroll-padding-inline:0;
  overscroll-behavior-x:contain;
  scrollbar-width:thin; scrollbar-color:var(--gold) transparent;
}
.rail::-webkit-scrollbar{ height:5px; }
.rail::-webkit-scrollbar-thumb{ background:var(--gold); }
.proj{ margin:0; flex:0 0 clamp(230px,26vw,290px); scroll-snap-align:start; position:relative; }
.proj img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.proj figcaption{ padding-top:.9rem; display:grid; gap:.15rem; }
.proj b{ font-family:var(--f-head); font-size:1rem; font-weight:600; color:var(--cream); letter-spacing:.02em; }
.proj span{ font-size:.82rem; color:var(--gold); letter-spacing:.1em; text-transform:uppercase; font-family:var(--f-head); }
.rail__ctl{ display:flex; gap:.8rem; justify-content:flex-end; margin-top:.5rem; }

/* ============================================================
   PROCESS
   ============================================================ */
.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
@media (min-width:1000px){ .steps{ grid-template-columns:repeat(3,1fr); } }
.step{ background:var(--paper); padding:2.2rem 1.9rem; position:relative; transition:background .25s var(--ease); }
.step:hover{ background:var(--white); }
.step__n{
  font-family:var(--f-disp); font-size:2.6rem; line-height:1;
  color:var(--gold); display:block; margin-bottom:.7rem;
}
.step h3{ font-family:var(--f-head); font-size:1.14rem; margin-bottom:.45rem; }
.step p{ margin:0; font-size:.93rem; color:var(--tx-2); }

/* ============================================================
   REVIEWS
   ============================================================ */
/* ---- review collage ----
   CSS columns give a masonry wall with no layout JS. break-inside keeps a
   card from being split across a column boundary. */
.wall{ columns:1; column-gap:1rem; }
.rev{
  break-inside:avoid; -webkit-column-break-inside:avoid;
  background:var(--paper); border:1px solid rgba(26,25,24,.14);
  padding:1.4rem 1.4rem 1.2rem; margin:0 0 1rem;
  box-shadow:0 6px 18px rgba(60,45,15,.13);
}
.rev__stars{ display:block; color:var(--gold-ink); letter-spacing:.2em; font-size:.92rem; margin-bottom:.7rem; }
.rev p{ margin:0 0 1rem; font-size:.95rem; line-height:1.62; color:var(--tx); }
.rev--short p{ font-family:var(--f-disp); font-size:1.5rem; line-height:1.3; }
.rev footer{ display:grid; gap:.15rem; border-top:1px solid var(--line); padding-top:.8rem; }
.rev footer b{ font-family:var(--f-head); font-size:.98rem; letter-spacing:.04em; }
.rev footer span{ font-size:.82rem; color:var(--tx-2); }
.rev__src{
  font-family:var(--f-head); font-size:.78rem !important; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold-ink) !important;
  margin-top:.2rem;
}

.rev__pics{ display:grid; grid-template-columns:repeat(2,1fr); gap:.4rem; margin:0 0 1rem; }
.revshot{
  display:block; padding:0; border:1px solid rgba(26,25,24,.16);
  background:none; cursor:zoom-in; line-height:0; width:100%;
  transition:border-color .2s var(--ease), transform .2s var(--ease);
}
.revshot img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.revshot:hover{ border-color:var(--gold-ink); }

.wall__more{ text-align:center; margin:1.7rem 0 0; }
.btn--ink{ --btn-bg:var(--ink); --btn-fg:var(--gold); }
.btn--ink:hover{ background:var(--ink-2); }
.btn--ink svg{ width:15px; height:15px; }

@media (min-width:640px){ .wall{ columns:2; } }
@media (min-width:1040px){
  .wall{ columns:3; column-gap:1.15rem; }
  .rev{ margin-bottom:1.15rem; }
}

/* ---- full-size viewer ---- */
.lb{
  position:fixed; inset:0; z-index:2000;
  /* Two stacked children now — the figure and, for a set, its labels —
     so the rows are centred as a group rather than each filling the box. */
  display:grid; grid-auto-flow:row; place-items:center; align-content:center;
  gap:clamp(.7rem,2vw,1.1rem);
  padding:clamp(1rem,4vw,3rem); background:rgba(10,10,11,.94);
  backdrop-filter:blur(4px);
}
.lb[hidden]{ display:none; }
.lb__fig{ margin:0; max-width:min(1100px,100%); max-height:100%; display:flex; flex-direction:column; gap:.9rem; }
.lb__fig img{
  max-width:100%; max-height:78vh; width:auto; height:auto;
  margin-inline:auto; border:1px solid var(--gold);
}
.lb__fig figcaption{
  text-align:center; color:var(--gold); font-family:var(--f-head);
  font-size:.8rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
}
.lb__x{
  position:absolute; top:1rem; right:1rem; width:52px; height:52px;
  display:grid; place-items:center; background:transparent;
  border:1px solid rgba(215,181,109,.5); color:var(--gold); border-radius:50%;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.lb__x svg{ width:24px; height:24px; stroke-width:2; }
.lb__x:hover{ background:var(--gold); color:var(--ink); }

/* ============================================================
   AREAS
   ============================================================ */
.areas{ display:grid; grid-template-columns:1fr; gap:clamp(1.5rem,4vw,2.6rem); }
.areas__map{ margin:0; }
#areaMap{
  height:clamp(320px,46vh,460px); border:1px solid var(--line);
  background:var(--paper); z-index:0;   /* keep tiles under the sticky header */
}
/* Muted so the map sits behind the boundary rather than competing with it */
#areaMap .leaflet-tile-pane{ filter:grayscale(.55) sepia(.16) brightness(1.03); }
#areaMap .leaflet-container{ font-family:var(--f-body); background:var(--paper); }
#areaMap .leaflet-control-attribution{ font-size:.68rem; background:rgba(251,248,243,.85); }
#areaMap .leaflet-bar a{ color:var(--tx); }
.areas__map figcaption{
  margin-top:.7rem; font-size:.85rem; color:var(--tx-2);
}
.areas__nojs{ padding:1.2rem; margin:0; color:var(--tx-2); }

.areas__cols{ display:grid; grid-template-columns:1fr; gap:1.8rem; }
.areas__grp h3{
  font-family:var(--f-head); font-size:.78rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold-ink);
  padding-bottom:.6rem; margin-bottom:.9rem; border-bottom:1px solid var(--line);
}
.areas__list{ display:grid; grid-template-columns:repeat(2,1fr); gap:.55rem 1rem; }
.areas__list li{ position:relative; padding-left:1.4rem; font-size:.93rem; color:var(--tx-2); }
.areas__list li::before{ content:""; position:absolute; left:0; top:.55em; width:7px; height:7px; background:var(--gold); transform:rotate(45deg); }

@media (min-width:760px){ .areas__cols{ grid-template-columns:repeat(3,1fr); gap:2rem; } }
@media (min-width:1040px){
  .areas{ grid-template-columns:1fr 1.35fr; align-items:start; }
  .areas__map{ min-height:440px; position:sticky; top:100px; }
  .areas__list{ grid-template-columns:1fr; }
}

/* ============================================================
   CONTACT
   ============================================================ */
.cg{ display:grid; grid-template-columns:340px 1fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:start; }
.cg__aside{ background:var(--ink-2); border:1px solid var(--line-dark); padding:2rem 1.8rem; position:sticky; top:100px; }
.cg__aside .h3{ color:var(--gold); margin-bottom:1.4rem; }
.crow{
  display:flex; gap:1rem; align-items:center; padding:.9rem 0;
  border-bottom:1px solid var(--line-dark); text-decoration:none; color:inherit; min-height:56px;
}
.crow:last-of-type{ border-bottom:0; }
.crow .ico{ width:20px; height:20px; color:var(--gold); flex:none; }
.crow span{ display:grid; gap:.1rem; }
.crow em{ font-style:normal; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--tx-onDark-2); font-family:var(--f-head); }
.crow b{ font-size:1.02rem; color:var(--cream); font-weight:500; }
a.crow:hover b{ color:var(--gold); }
.crating{ margin-top:1.4rem; padding-top:1.4rem; border-top:1px solid var(--line-dark); }
.crating p{ margin:.3rem 0 0; font-size:.9rem; color:var(--tx-onDark-2); }
.crating b{ color:var(--cream); }

/* form */
.form{ background:var(--paper); padding:clamp(1.5rem,3vw,2.6rem); border:1px solid var(--line); color:var(--tx); }
.form__req{ font-size:.85rem; color:var(--tx-2); margin-bottom:1.6rem; }
.req{ color:#A6341C; text-decoration:none; font-weight:700; }
.fs{ border:0; padding:0; margin:0 0 2rem; }
.fs legend{
  font-family:var(--f-head); font-size:.76rem; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold-ink); padding:0 0 .9rem;
  width:100%; border-bottom:1px solid var(--line); margin-bottom:1.3rem;
}
.fgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.2rem; }
.f{ display:flex; flex-direction:column; min-width:0; }
.f label{ font-family:var(--f-head); font-size:.84rem; font-weight:600; letter-spacing:.06em; margin-bottom:.4rem; }
.f input,.f select,.f textarea{
  font:inherit; font-size:1rem; padding:.75rem .9rem; min-height:48px;
  border:1px solid var(--line); background:var(--white); color:var(--tx);
  border-radius:0; width:100%;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.f textarea{ resize:vertical; min-height:120px; }
.f input:focus,.f select:focus,.f textarea:focus{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(215,181,109,.28); outline:none; }
.f__hint{ font-size:.82rem; color:var(--tx-2); margin:.35rem 0 0; }
.f__err{ font-size:.84rem; color:#A6341C; margin:.35rem 0 0; font-weight:500; }
.f.is-bad input,.f.is-bad select,.f.is-bad textarea{ border-color:#A6341C; }

.checks{ display:grid; grid-template-columns:repeat(auto-fit,minmax(165px,1fr)); gap:.5rem; }
.ck{ display:flex; align-items:center; gap:.65rem; padding:.6rem .8rem; min-height:48px; border:1px solid var(--line); background:var(--white); cursor:pointer; font-size:.9rem; transition:border-color .2s,background .2s; }
.ck:hover{ border-color:var(--gold); }
.ck input{ width:19px; height:19px; accent-color:var(--gold-ink); flex:none; }
.ck:has(input:checked){ border-color:var(--gold); background:rgba(215,181,109,.13); }
.ck--consent{ margin-top:1.3rem; align-items:flex-start; }
.ck--consent input{ margin-top:.15rem; }

.form__status{ margin:1rem 0 0; font-size:.92rem; text-align:center; min-height:1.4em; }
.form__status.is-ok{ color:#1E6B3A; font-weight:600; }
.form__status.is-err{ color:#A6341C; font-weight:600; }
/* The hand-off-to-email path: the enquiry has not actually reached us yet, so
   it must not read as a green tick — but there is a way forward, so it is not
   a red failure either. */
.form__status.is-warn{ color:#7A5312; font-weight:600; }

/* ============================================================
   FAQ
   ============================================================ */
.faq{ border-top:1px solid var(--line); }
.faq__i{ border-bottom:1px solid var(--line); }
.faq__i h3{ margin:0; font-size:inherit; font-weight:inherit; }
.faq__q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1.2rem;
  background:none; border:0; padding:1.4rem .4rem; text-align:left;
  font-family:var(--f-head); font-size:clamp(1rem,.96rem + .3vw,1.14rem); font-weight:600;
  color:var(--tx); min-height:56px; transition:color .2s;
}
.faq__q:hover{ color:var(--gold-ink); }
.faq__c{ width:20px; height:20px; flex:none; color:var(--gold-ink); transition:transform .3s var(--ease); }
.faq__q[aria-expanded="true"] .faq__c{ transform:rotate(180deg); }
.faq__a{ padding:0 .4rem 1.5rem; }
.faq__a p{ margin:0; max-width:70ch; color:var(--tx-2); }
.faq__foot{ margin-top:var(--sp-5); text-align:center; }
.faq__foot p{ font-family:var(--f-disp); font-size:1.4rem; margin-bottom:1rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.ft{ background:var(--ink); color:var(--tx-onDark-2); padding-top:clamp(3rem,7vw,5.5rem); overflow:hidden; position:relative; }
.ft__in{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:2.5rem; }
.brand--ft img{ height:82px; width:auto; margin-bottom:1.2rem; }
.ft__blurb{ font-size:.92rem; max-width:34ch; }
.stars--ft{ font-size:.85rem; display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.stars--ft span:first-child{ color:var(--gold); }
.ft__h{ font-family:var(--f-head); font-size:.78rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin:0 0 1.1rem; }
.ft__l{ display:grid; gap:.7rem; font-size:.93rem; }
.ft__l a{ text-decoration:none; transition:color .2s; }
.ft__l a:hover{ color:var(--gold); }


/* Footer social links. Gold on the dark footer clears AA comfortably; the
   icons are stroked rather than filled so they match the rest of the set. */
.ft__social{ display:flex; gap:.5rem; margin:1.1rem 0 0; padding:0; list-style:none; }
.ft__social a{
  display:inline-flex; align-items:center; gap:.45rem;
  min-height:44px; padding:.5rem .8rem .5rem .6rem;
  border:1px solid var(--line-dark); color:var(--gold);
  font-family:var(--f-head); font-size:.82rem; font-weight:600; letter-spacing:.04em;
  text-decoration:none; transition:background .18s ease, border-color .18s ease;
}
.ft__social a:hover, .ft__social a:focus-visible{
  background:rgba(215,181,109,.12); border-color:var(--gold);
}
.ft__social svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; flex:none; }
/* Icon-only on the narrowest screens, but the target must stay 44px square. */
@media (max-width:420px){
  .ft__social a{ min-width:44px; justify-content:center; padding-inline:.6rem; }
  .ft__social a span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
}

.ft__mark{
  font-family:var(--f-disp); font-size:clamp(4rem,16vw,15rem); line-height:.8;
  text-align:center; color:rgba(215,181,109,.07); letter-spacing:.06em;
  margin-top:2rem; user-select:none; white-space:nowrap;
}
.ft__legal{
  display:flex; flex-wrap:wrap; gap:.6rem 2rem; justify-content:space-between;
  padding-block:1.6rem; border-top:1px solid var(--line-dark); font-size:.84rem;
}
.ft__legal p{ margin:0; }

/* sticky mobile call bar */
.callbar{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:900;
  align-items:center; justify-content:center; gap:.6rem;
  background:var(--gold); color:var(--ink); min-height:56px;
  font-family:var(--f-head); font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; font-size:.9rem; text-decoration:none;
  padding-bottom:env(safe-area-inset-bottom);
}
.callbar .ico{ width:18px; height:18px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1100px){
  .cg{ grid-template-columns:1fr; }
  .cg__aside{ position:static; }
  .quick{ grid-template-columns:repeat(2,1fr); }
  .quick__f:nth-child(2n){ border-right:0; }
  .quick__go{ grid-column:1/-1; margin-top:.5rem; }
}

@media (max-width:960px){
  .hdr__cta span{ display:none; }
  .hdr__cta{ padding:.7rem .9rem; }
  .burger{ display:block; }
  .nav{
    position:fixed; inset:0 0 0 auto; width:min(320px,86vw);
    background:var(--ink); padding:6rem 2rem 2rem;
    transform:translateX(100%); transition:transform .3s var(--ease);
    box-shadow:-10px 0 40px rgba(0,0,0,.4); overflow-y:auto;
  }
  .nav.is-open{ transform:translateX(0); }
  .nav__list{ flex-direction:column; gap:1.6rem; }
  .nav__list a{ font-size:1rem; }

  .g2,.areas{ grid-template-columns:1fr; }
  .g2--rev .prose{ order:0; }
  .about__media{ padding-bottom:4rem; max-width:520px; margin-inline:auto; }
  .ft__in{ grid-template-columns:1fr 1fr; }
}

@media (max-width:720px){
  .hero{ padding-block:7rem 5rem; min-height:auto; }
  .quick{ grid-template-columns:1fr; }
  .quick__f{ border-right:0; border-bottom:1px solid var(--line); }

  /* Touch targets: everything tappable gets to 44px on touch-sized screens. */
  .quick__f input,.quick__f select{ min-height:44px; }
  .nav__list a{ display:flex; align-items:center; min-height:44px; }
  .ft__l{ gap:0; }
  .ft__l a{ display:flex; align-items:center; min-height:44px; }
  .trust{ font-size:.8rem; gap:.5rem 1rem; }
  .trust li + li::before{ margin-right:.8rem; }
  .fr--off{ position:static; width:60%; margin:-3rem 0 0 auto; }
  .about__media{ padding-bottom:0; }
  .areas__list{ grid-template-columns:repeat(2,1fr); }
  .ft__in{ grid-template-columns:1fr; gap:2rem; }
  .ft__legal{ justify-content:flex-start; }
  .callbar{ display:flex; }
  body{ padding-bottom:56px; }
  .hdr__cta{ display:none; }
}

@media (max-width:420px){
  .checks,.fgrid{ grid-template-columns:1fr; }
  .brand__img{ height:44px; }
}

/* ============================================================
   MOTION / PRINT
   ============================================================ */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .reveal{ opacity:1; transform:none; }
}

@media print{
  .hdr,.callbar,.rail__ctl,.quotes__ctl,.hero__fan,.burger{ display:none !important; }
  body{ background:#fff; color:#000; }
  .sec--ink,.sec--teal,.ft{ background:#fff !important; color:#000 !important; }
}

/* ============================================================
   Service pages (wall-panelling.html and siblings)
   ============================================================ */

.crumb{ margin-bottom:1.6rem; }
.crumb ol{ display:flex; flex-wrap:wrap; gap:.4rem; list-style:none; margin:0; padding:0;
  font-family:var(--f-head); font-size:.76rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--tx-2); }
.crumb li + li::before{ content:"/"; margin-right:.4rem; color:var(--line); }
.crumb a{ color:var(--gold-ink); text-decoration:none; }
.crumb a:hover{ text-decoration:underline; }
.crumb [aria-current]{ color:var(--tx-2); }

.svcp__top{ padding-bottom:clamp(2rem,4vw,3rem); }
.svcp__h1{ margin:.2rem 0 1rem; max-width:20ch; }
.svcp__lede{ font-size:clamp(1.05rem,.98rem + .4vw,1.28rem); line-height:1.6;
  color:var(--tx-2); max-width:56ch; margin:0 0 2rem; }
.svcp__cta{ display:flex; flex-wrap:wrap; gap:.9rem; margin:0; }

/* Body copy. A measure of ~68 characters is where long-form prose stops
   being tiring to read; the shell alone is wider than that. */
.svcp__body p{ max-width:68ch; font-size:1.03rem; line-height:1.75; margin:0 0 1.3rem; }
.svcp__body p:last-child{ margin-bottom:0; }

.svcp__steps{ counter-reset:step; list-style:none; margin:0; padding:0;
  display:grid; gap:1.6rem; }
@media (min-width:720px){ .svcp__steps{ grid-template-columns:1fr 1fr; gap:2rem 2.6rem; } }
.svcp__steps li{ counter-increment:step; position:relative; padding-left:3.2rem; }
.svcp__steps li::before{
  content:counter(step,decimal-leading-zero); position:absolute; left:0; top:.1rem;
  font-family:var(--f-head); font-size:.92rem; font-weight:700; letter-spacing:.08em;
  color:var(--gold);
}
.svcp__steps h3{ font-family:var(--f-head); font-size:1.06rem; font-weight:600;
  color:var(--cream); margin:0 0 .35rem; }
.svcp__steps p{ margin:0; color:var(--tx-onDark-2); font-size:.95rem; line-height:1.65; }

.svcp__grid{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); }
.svcp__shot{ margin:0; width:100%; }

.svcp__end{ text-align:center; }
.svcp__close{ font-size:1.05rem; line-height:1.7; color:var(--tx-onDark-2);
  max-width:60ch; margin:0 auto 1.8rem; }
.svcp__end .svcp__cta{ justify-content:center; }
.svcp__more{ margin:2.2rem 0 0; font-size:.9rem; color:var(--tx-onDark-2); }
.svcp__more a{ color:var(--gold); }

/* Plain crawlable links to the service pages. The cards above are
   role="button" and open the gallery, so a link cannot live inside one. */
.svcs__more{ margin:1.6rem 0 0; text-align:center; font-size:.95rem; color:var(--tx-onDark-2); }
.svcs__more a{ color:var(--gold); text-underline-offset:.2em; }

/* Caption on the inset photo of Edyta and Marek. Sits inside the frame so it
   reads as part of the snapshot rather than as body copy underneath it. */
.fr__cap{
  position:absolute; left:0; right:0; bottom:0;
  padding:1.4rem .8rem .5rem;
  background:linear-gradient(to top, rgba(26,25,24,.72), rgba(26,25,24,0));
  color:var(--cream); text-align:center;
  font-family:var(--f-head); font-size:.78rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
}


/* ---- Who we are: the people are the main picture ----
   The photo of the two of them is close to square, so it cannot go in the
   arch frame without cutting one of them out of shot. It gets a plain
   rectangular frame with the same gold rule instead. */
.fr--rect img{ width:100%; display:block; }
.fr--rect::before{
  content:""; position:absolute; inset:-14px; border:1px solid var(--gold);
  pointer-events:none; z-index:1;
}
/* One photo, no inset: nothing overlaps a portrait of two people tidily, and
   the whole point of this section is that you can see who they are. */
.about__media--people{ padding-bottom:0; }

/* ============================================================
   THE PORTFOLIO  (work.html)
   ------------------------------------------------------------
   No new colours: everything below is built from the tokens at
   the top of this file. Art Deco is carried by proportion,
   symmetry, thin rules and the stepped corner already used on
   .btn — not by ornament laid over the photographs. The work is
   the loudest thing on the page and nothing here competes.
   ============================================================ */

/* --hdr-h   the header at its full height. Page layout uses this (the hero's
              top padding) and it must not move, or the page shifts when the
              header shrinks.
   --hdr-pin  the header's height right now. Anything that pins itself under
              the header uses this. main.js measures both and keeps --hdr-pin
              in step; the values here are the no-JS fallback, where the header
              never shrinks because that is scripted too. */
:root{ --hdr-h:76px; --hdr-pin:76px; }
@media (min-width:900px){ :root{ --hdr-h:84px; --hdr-pin:84px; } }

/* ---- the one decorative device: rule, lozenge, rule ---- */
.deco{ display:flex; align-items:center; justify-content:center; gap:.7rem; margin-bottom:1.4rem; }
.deco i{ display:block; width:clamp(34px,8vw,64px); height:1px; background:var(--gold); opacity:.75; }
.deco b{ display:block; width:7px; height:7px; background:var(--gold); transform:rotate(45deg); }
.deco--dark i,.deco--dark b{ background:var(--gold-ink); }

/* ---- an outline button, for the secondary call to action ---- */
.btn--line{
  background:transparent; color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--ink);
}
.btn--line:hover{ background:var(--ink); color:var(--gold); box-shadow:none; }

/* ============================ 1. hero ============================ */
.phero{
  background:var(--paper);
  padding:calc(var(--hdr-h) + clamp(2.6rem,7vw,5rem)) 0 clamp(2.4rem,5vw,3.6rem);
  text-align:center; position:relative;
}
.phero__in{ position:relative; padding:clamp(1.8rem,4vw,2.8rem) clamp(1rem,4vw,3rem); }
/* Stepped corner brackets — the Deco frame, drawn as two corners rather
   than a full box so it frames without boxing the text in. */
.phero__in::before,.phero__in::after{
  content:""; position:absolute; width:clamp(28px,6vw,56px); height:clamp(28px,6vw,56px);
  border:1px solid var(--gold); pointer-events:none;
}
.phero__in::before{ top:0; left:0; border-width:1px 0 0 1px; }
.phero__in::after{ bottom:0; right:0; border-width:0 1px 1px 0; }

.phero__h{
  font-family:var(--f-disp); font-weight:400; color:var(--tx);
  font-size:clamp(2.6rem,1.4rem + 5.4vw,5rem); line-height:1.02;
  letter-spacing:.01em; margin:0 0 var(--sp-3);
}
.phero__lede{
  max-width:56ch; margin:0 auto; color:var(--tx-2);
  font-size:clamp(1rem,.96rem + .3vw,1.12rem); line-height:1.75;
}

/* Trust lines as a rule-separated row, not as cards.
   A grid rather than a wrapping flex row: with a known number of columns the
   divider can be put on everything except the first of each row, which a
   wrapping row cannot express — its second line would start with a stray
   divider hanging off the left. */
.phero__tags{
  list-style:none; margin:clamp(1.6rem,4vw,2.4rem) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(2,auto); justify-content:center;
  gap:.85rem clamp(1.2rem,3vw,2.2rem);
  font-family:var(--f-head); font-size:.8rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--tx-2);
}
.phero__tags li{ position:relative; text-align:center; }
/* the divider: on the second of each pair */
.phero__tags li:nth-child(even)::before{
  content:""; position:absolute; left:calc(clamp(1.2rem,3vw,2.2rem) / -2);
  top:50%; margin-top:-3px; width:5px; height:5px;
  background:var(--gold); transform:rotate(45deg) translate(-50%,-50%);
  transform-origin:0 0;
}
@media (min-width:1000px){
  .phero__tags{ grid-template-columns:repeat(4,auto); }
  /* one row now, so every item but the first carries a divider */
  .phero__tags li:not(:first-child)::before{
    content:""; position:absolute; left:calc(clamp(1.2rem,3vw,2.2rem) / -2);
    top:50%; margin-top:-3px; width:5px; height:5px;
    background:var(--gold); transform:rotate(45deg) translate(-50%,-50%);
    transform-origin:0 0;
  }
  .phero__tags li:first-child::before{ content:none; }
}
@media (max-width:479px){
  .phero__tags{ grid-template-columns:auto; gap:.7rem; }
  .phero__tags li::before{ content:none !important; }
}

/* ==================== 2. featured transformations ==================== */
.pft{ padding-block:clamp(3rem,7vw,5.5rem); }
.ftrs{ display:grid; gap:clamp(2.8rem,6vw,4rem); }

.ftr{ display:grid; gap:1.4rem; justify-items:center; }
.ftr__txt{ text-align:center; max-width:38ch; }
.ftr__no{
  font-family:var(--f-head); font-size:.82rem; font-weight:700;
  letter-spacing:.22em; color:var(--gold); margin:0 0 .55rem;
}
.ftr__cat{
  font-family:var(--f-head); font-size:.78rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--tx-onDark-2); margin:0 0 .5rem;
}
.ftr__h{
  font-family:var(--f-disp); font-weight:400; color:var(--cream);
  font-size:clamp(1.5rem,1.2rem + 1.1vw,2rem); line-height:1.15;
  letter-spacing:.01em; margin:0 0 .7rem;
}
.ftr__note{
  margin:0; color:var(--tx-onDark-2); font-size:.95rem; line-height:1.7;
}

/* The comparison itself keeps the .cmp behaviour main.js already drives;
   only the framing changes. A hairline gold rule set off the photograph,
   the way a mounted print sits inside its frame. */
.ftrs .cmp{ width:100%; max-width:520px; margin:0; position:relative; }
.ftrs .cmp--wide{ max-width:700px; }
.ftrs .cmp__stage{ outline:1px solid var(--line-dark); outline-offset:10px; }

@media (min-width:900px){
  /* Text beside the photograph, alternating side so the column of three
     reads as an editorial spread rather than three identical rows. */
  .ftr{
    grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
    align-items:center; gap:clamp(2rem,5vw,4rem); justify-items:stretch;
  }
  .ftr__txt{ text-align:left; max-width:34ch; }
  .ftr:nth-child(even){ grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); }
  .ftr:nth-child(even) .ftr__txt{ order:2; }
  /* Capped rather than left to fill the column: a 3:4 photograph given the
     full 640px column comes out 850px tall, which is taller than the viewport
     it has to be dragged in. These caps put the portrait and the landscape
     stages within about 60px of each other in height. */
  .ftrs .cmp{ max-width:460px; margin-inline:auto; }
  .ftrs .cmp--wide{ max-width:720px; margin-inline:auto; }
}

/* ======================= 3. category navigation ======================= */
.pfil{
  position:sticky; top:var(--hdr-pin); z-index:700;
  background:rgba(251,248,243,.94); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.pfil__in{
  display:flex; gap:.25rem; align-items:stretch;
  overflow-x:auto; scrollbar-width:none;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
}
.pfil__in::-webkit-scrollbar{ display:none; }
.pfil__b{
  flex:none; scroll-snap-align:start;
  min-height:52px; padding:.5rem .95rem;
  background:none; border:0; border-bottom:2px solid transparent;
  color:var(--tx-2); cursor:pointer; white-space:nowrap;
  font-family:var(--f-head); font-size:.82rem; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.pfil__b:hover{ color:var(--tx); }
.pfil__b.is-on{ color:var(--tx); border-bottom-color:var(--gold); }
@media (min-width:1040px){
  /* Nine labels come to about 1400px of chips against a 1192px column, so on
     a wide screen they wrap onto a second centred row rather than scrolling.
     A scrolling row on a desktop hides the last categories behind an edge
     nobody thinks to drag. Below this width the row scrolls, which is the
     right behaviour on a touch screen and is discoverable there. */
  .pfil__in{
    flex-wrap:wrap; overflow:visible; justify-content:center;
    gap:0 .35rem; padding-block:.15rem;
  }
  .pfil__b{ padding:.5rem .9rem; letter-spacing:.11em; }
}

/* ========================== 4. the portfolio ========================== */
.pcat{ padding-block:clamp(2.8rem,6vw,4.5rem); scroll-margin-top:calc(var(--hdr-pin) + 60px); }
.pcat + .pcat{ border-top:1px solid var(--line); }

.pcat__h{ margin-bottom:clamp(1.8rem,4vw,2.6rem); }
.pcat__no{
  display:flex; align-items:center; gap:.85rem; margin:0 0 .45rem;
  font-family:var(--f-head); font-size:.95rem; font-weight:700;
  letter-spacing:.22em; color:var(--gold-ink);
}
.pcat__rule{ display:block; width:40px; height:1px; background:var(--gold); }
.pcat__t{
  font-family:var(--f-disp); font-weight:400; color:var(--tx);
  font-size:clamp(1.9rem,1.3rem + 2.2vw,3rem); line-height:1.08;
  letter-spacing:.01em; margin:0 0 .8rem;
}
.pcat__d{ margin:0; max-width:56ch; color:var(--tx-2); font-size:1.02rem; line-height:1.75; }
.pcat__c{
  margin:1rem 0 0; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  font-family:var(--f-head); font-size:.78rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--tx-2);
}
.pcat__all{
  min-height:44px; padding:0; background:none; border:0; cursor:pointer;
  font:inherit; color:var(--gold-ink);
  border-bottom:1px solid var(--gold); transition:color .2s var(--ease);
}
.pcat__all:hover{ color:var(--tx); }

/* ---- a customer's words under the trade heading ----
   Set against a gold hairline rather than in a box: it is an aside to the
   section, not another card competing with the photographs. The job the
   review was left for is printed with it, so a reader can see for themselves
   what the customer was actually talking about. */
.pcq{
  /* The bottom margin matches .pcat__h's, so a section with a quote and one
     without stand the same distance off their grid. */
  margin:clamp(1.4rem,3vw,2rem) 0 clamp(1.8rem,4vw,2.6rem);
  padding-left:clamp(1rem,2.5vw,1.4rem);
  border-left:1px solid var(--gold); max-width:60ch;
}
.pcq__stars{ display:block; color:var(--gold-ink); font-size:.9rem; letter-spacing:.22em; margin-bottom:.5rem; }
.pcq blockquote{ margin:0; }
.pcq blockquote p{
  margin:0; color:var(--tx); font-size:1rem; line-height:1.7; font-style:italic;
}
.pcq blockquote p::before{ content:"“"; }
.pcq blockquote p::after{ content:"”"; }
.pcq figcaption{
  margin-top:.7rem; display:flex; flex-wrap:wrap; align-items:baseline; gap:.2rem .7rem;
  font-family:var(--f-head); font-size:.82rem; color:var(--tx-2);
}
.pcq figcaption b{
  font-size:.82rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--tx);
}

.pgrid{ list-style:none; margin:0; padding:0; display:grid; gap:clamp(1.2rem,2.4vw,1.9rem); }
@media (min-width:620px){
  .pgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-flow:dense; }
  .pcard--lead{ grid-column:span 2; }
}
@media (min-width:1040px){
  .pgrid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* ---- the card ---- */
.pc{
  display:flex; flex-direction:column; width:100%; height:100%;
  padding:0; text-align:left; cursor:pointer;
  background:var(--white); border:1px solid var(--line);
  transition:border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.pc:hover{
  border-color:var(--gold);
  transform:translateY(-3px);
  box-shadow:0 12px 30px rgba(60,45,15,.14);
}
.pc:focus-visible{ outline:2px solid var(--gold-ink); outline-offset:3px; }

.pc__well{
  display:block; position:relative; overflow:hidden;
  aspect-ratio:4/3; background:var(--ink-2);
}
.pcard--lead .pc__well{ aspect-ratio:16/9; }
.pc__well img{
  width:100%; height:100%; display:block;
  transition:transform .4s var(--ease);
}
/* A photograph fills its well; cropping one loses nothing that matters. */
.pc__well--shot img{ object-fit:cover; }
/* A composite is shown whole and centred on the dark ground, the way a print
   is mounted behind a window. Cropping would cut its panels in half. */
.pc__well--mount{ padding:clamp(.7rem,2vw,1.1rem); }
.pc__well--mount img{ object-fit:contain; }
.pc:hover .pc__well--shot img{ transform:scale(1.035); }

.pc__body{
  display:flex; flex-direction:column; flex:1;
  padding:clamp(1rem,2.4vw,1.35rem) clamp(1rem,2.4vw,1.35rem) clamp(.9rem,2vw,1.15rem);
}
.pc__cat{
  display:block; font-family:var(--f-head); font-size:.78rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold-ink);
  margin-bottom:.5rem;
}
.pc__h{
  display:block; font-family:var(--f-head); font-size:1.12rem; font-weight:600;
  line-height:1.3; color:var(--tx); margin-bottom:.4rem;
}
.pcard--lead .pc__h{ font-size:clamp(1.2rem,1rem + .7vw,1.5rem); }
.pc__d{
  display:block; color:var(--tx-2); font-size:.92rem; line-height:1.62;
  margin-bottom:.9rem;
}
.pc__meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; margin-top:auto;
  font-family:var(--f-head); font-size:.76rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--tx-2);
}
.pc__stages{ position:relative; padding-left:.6rem; }
.pc__stages::before{ content:"\00B7"; position:absolute; left:0; }
@media (max-width:520px){
  /* "8 photographs · Before · During · After" does not fit across a 327px
     card: it wraps into the arrow and strands the separator at the start of
     the second line. Give the stages a row of their own. */
  .pc__stages{ flex-basis:100%; order:2; padding-left:0; margin-top:.2rem; }
  .pc__stages::before{ content:none; }
  .pc__go{ order:1; }
}
.pc__go{
  margin-left:auto; width:28px; height:28px; flex:none;
  display:grid; place-items:center; color:var(--gold-ink);
  transition:transform .25s var(--ease);
}
.pc__go svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; }
.pc:hover .pc__go{ transform:translateX(4px); }

.pnone{
  text-align:center; color:var(--tx-2); padding:clamp(3rem,8vw,5rem) 1rem; margin:0;
}

/* ========================= 8. craftsmanship ========================= */
.pcraft{ padding-block:clamp(3rem,7vw,5.5rem); }
.crafts{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(1.8rem,4vw,2.6rem);
}
@media (min-width:820px){ .crafts{ grid-template-columns:repeat(3,1fr); gap:clamp(2rem,4vw,3.2rem); } }
.craft{ position:relative; padding-top:1.6rem; border-top:1px solid var(--line-dark); }
.craft__no{
  position:absolute; top:-.72em; left:0; padding-right:.7rem;
  background:var(--ink);
  font-family:var(--f-head); font-size:.82rem; font-weight:700;
  letter-spacing:.22em; color:var(--gold); margin:0;
}
.craft__h{
  font-family:var(--f-head); font-size:1.16rem; font-weight:600;
  color:var(--cream); margin:0 0 .6rem; letter-spacing:.01em;
}
.craft p:not(.craft__no){ margin:0; color:var(--tx-onDark-2); font-size:.96rem; line-height:1.75; }

/* ========================== 9. testimonial ========================== */
.pquote{ background:var(--cream); }
.pq{ margin:0; text-align:center; }
.pq blockquote{ margin:0 auto; max-width:58ch; }
.pq blockquote p{
  margin:0; font-family:var(--f-disp); font-weight:400; color:var(--tx);
  font-size:clamp(1.3rem,1rem + 1.3vw,2rem); line-height:1.42; letter-spacing:.01em;
}
.pq blockquote p::before{ content:"\201C"; }
.pq blockquote p::after{ content:"\201D"; }
.pq figcaption{
  margin-top:clamp(1.4rem,3vw,2rem); display:flex; flex-direction:column; gap:.25rem;
  font-family:var(--f-head); font-size:.85rem; color:var(--tx-2);
}
.pq figcaption b{ font-size:.95rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--tx); }

/* ============================= 10. CTA ============================= */
.pcta{ text-align:center; }
.pcta__in{ position:relative; padding-block:clamp(.5rem,2vw,1.5rem); }
.pcta__btns{
  margin-top:clamp(1.8rem,4vw,2.6rem);
  display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center;
}

/* ======================= viewer: multi-photo ======================= */
.lb__nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:52px; height:52px; display:grid; place-items:center;
  background:rgba(26,25,24,.55); border:1px solid var(--line-dark);
  color:var(--cream); cursor:pointer;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.lb__nav:hover{ background:var(--gold); color:var(--ink); border-color:var(--gold); }
.lb__nav svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.6; }
.lb__nav--prev{ left:clamp(.5rem,2vw,2rem); }
.lb__nav--next{ right:clamp(.5rem,2vw,2rem); }
/* In the flow under the figure, not floated over the bottom of the dialog.
   Absolute positioning put the counter on top of the caption as soon as the
   caption ran to two lines, which on a phone it always does. */
.lb__meta{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:.5rem .9rem; padding-inline:1rem; pointer-events:none;
}
/* Both labels are hidden for a single photo; collapse the row too so the
   dialog's gap does not leave a band of empty space under the caption. */
.lb__meta:not(:has(> :not([hidden]))){ display:none; }
.lb__stage{
  font-family:var(--f-head); font-size:.78rem; font-weight:700;
  letter-spacing:.24em; text-transform:uppercase; color:var(--ink);
  background:var(--gold); padding:.28rem .7rem;
}
.lb__count{
  font-family:var(--f-head); font-size:.78rem; font-weight:600;
  letter-spacing:.18em; color:var(--tx-onDark-2); margin:0;
}
@media (max-width:640px){
  /* Off the photograph on a phone, where there is no room beside it. The
     dialog reserves the strip they sit in, so the picture and its caption
     stack above rather than underneath them. */
  .lb{ padding-bottom:calc(env(safe-area-inset-bottom,0px) + 5rem); }
  .lb__fig img{ max-height:64vh; }
  .lb__nav{ top:auto; bottom:calc(env(safe-area-inset-bottom,0px) + .8rem); transform:none; width:60px; height:48px; }
  .lb__nav--prev{ left:calc(50% - 122px); }
  .lb__nav--next{ left:calc(50% + 62px); right:auto; }
}

/* ============================== motion ============================== */
@media (prefers-reduced-motion:reduce){
  .pc,.pc__well img,.pc__go,.pfil__b,.pcat__all,.btn--line{ transition:none !important; }
  .pc:hover{ transform:none; }
  .pc:hover .pc__well--shot img{ transform:none; }
  .pc:hover .pc__go{ transform:none; }
}


/* ---- phone only: the first few of a category, then the rest on ask ----
   One column is the right call for these images — a two-column grid at 375px
   puts a four-panel composite in about 70px of width, which is unreadable.
   The cost of one column is length, and this is what pays it back. From 620px
   the grid is two or three wide, there is no length problem, and every card
   is shown with no control at all.

   Scoped to .js, which the document sets on itself in the head: the button
   that reveals these cards needs JavaScript, so without it nothing is hidden
   in the first place and every project is on the page. */
/* ---- "show the rest" button ----
   The look sits outside the media queries, because the button is now used at
   two widths: on a phone for every trade and the reviews, and on a desktop
   for the couple of trades long enough to need it. Only its visibility is
   width-dependent, and every show rule is scoped to .js so that a browser
   without JavaScript shows all the content and no button. */
.pmore{
  display:none; align-items:center; justify-content:center; gap:.7rem;
  width:100%; min-height:52px; margin-top:1.1rem; padding:.8rem 1rem;
  background:none; border:1px solid var(--line); cursor:pointer;
  font-family:var(--f-head); font-size:.78rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--tx-2);
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
.pmore::before,.pmore::after{
  content:""; width:16px; height:1px; background:var(--gold); flex:none;
}
.pmore:hover{ border-color:var(--gold); color:var(--tx); }
/* The reviews sit on the gold band, where the default border and grey text
   have almost no contrast. */
.pmore--onGold{ border-color:rgba(26,25,24,.3); color:#3A3223; }
.pmore--onGold::before,.pmore--onGold::after{ background:var(--ink); }
.pmore--onGold:hover{ border-color:var(--ink); color:var(--ink); }

@media (max-width:619px){
  /* One column, so every trade shows four and the reviews five. */
  .js .pgrid:not(.is-open) > .pcard:nth-child(n+5){ display:none; }
  .js .wall:not(.is-open) > .rev:nth-child(n+6){ display:none; }
  .js .pmore{ display:flex; }
}

@media (min-width:620px){
  /* Two or three columns, so most trades are short enough to show whole.
     Only the grids marked pgrid--cap6 are capped, and only those carry a
     button — hence pmore--desk rather than showing every button again. */
  .js .pgrid--cap6:not(.is-open) > .pcard:nth-child(n+7){ display:none; }
  .js .pmore--desk{ display:flex; }
}

/* Once it has been pressed there is nothing left to reveal, so the button
   goes. It needs the .js prefix to outrank the show rules above: without it
   the specificity ties and whichever rule comes last in the file wins, which
   left the button sitting there after it had been used. */
.js .pmore[aria-expanded="true"]{ display:none; }

/* ---- focus, on everything the portfolio adds ----
   Gold-ink rather than gold: gold is 2.08:1 on cream and would be a focus
   ring nobody could see. */
.pfil__b:focus-visible,
.pcat__all:focus-visible,
.pmore:focus-visible,
.lb__nav:focus-visible{
  outline:2px solid var(--gold-ink); outline-offset:2px;
}
.lb__nav:focus-visible{ outline-color:var(--gold); }

/* ============================================================
   HOME PAGE TEASER → work.html
   ------------------------------------------------------------
   Sits where Before & after used to. Cream, so it also breaks
   the run of two dark sections it sits between.
   ============================================================ */
.teaser{ background:var(--cream); text-align:center; }
/* The generic light-section hairline would draw across cream directly under
   a black section, which reads as a seam rather than a divider. */
.teaser::before{ content:none !important; }
.teaser .sh{ margin-bottom:clamp(2rem,4vw,2.8rem); }

.tstrip{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(.9rem,2.2vw,1.5rem);
}
@media (min-width:820px){ .tstrip{ grid-template-columns:repeat(4,minmax(0,1fr)); } }

.tstrip__i a{
  display:block; text-decoration:none; color:inherit;
  transition:transform .25s var(--ease);
}
.tstrip__im{
  display:block; position:relative; overflow:hidden;
  aspect-ratio:4/3; background:var(--ink-2);
}
.tstrip__im img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .4s var(--ease);
}
/* the hairline sits off the photograph, the way a mount does */
.tstrip__im::after{
  content:""; position:absolute; inset:8px; border:1px solid rgba(245,240,232,.42);
  pointer-events:none;
}
.tstrip__t{
  display:block; margin-top:.85rem;
  font-family:var(--f-head); font-size:.78rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--tx-2);
  transition:color .2s var(--ease);
}
.tstrip__i a:hover .tstrip__im img{ transform:scale(1.04); }
.tstrip__i a:hover .tstrip__t{ color:var(--gold-ink); }
.tstrip__i a:focus-visible{ outline:2px solid var(--gold-ink); outline-offset:4px; }

.tfoot{ margin-top:clamp(2rem,4vw,2.8rem); }
.tstat{
  margin:0 0 clamp(1.4rem,3vw,1.9rem);
  font-family:var(--f-head); font-size:.82rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--tx-2);
}
.tstat i{ font-style:normal; color:var(--gold); margin-inline:.45em; }

@media (prefers-reduced-motion:reduce){
  .tstrip__i a,.tstrip__im img,.tstrip__t{ transition:none !important; }
  .tstrip__i a:hover .tstrip__im img{ transform:none; }
}