/* ============================================================
   DLM Reno & Construction Inc. design system (redesign)

   Carried over from the original: charcoal + gold palette, and the
   tape-measure tick motif, which ties to both the logo and the
   "measured twice" line. Both were good calls.

   Changed: headings were set in 'Calibri', which ships only with
   Microsoft Office. On macOS, iOS and Android it silently fell back
   to the browser default, so the loaded Oswald was never used and no
   heading ever rendered in a chosen face. Replaced with a real,
   properly loaded display family.

   Type:  Bricolage Grotesque (display), Inter Tight (body)
   ============================================================ */

:root{
  --ink:        #0E0E10;   /* page base */
  --charcoal:   #17171A;   /* header, raised bands */
  --charcoal-2: #1E1E22;   /* cards */
  --line:       #2C2C30;
  --line-2:     #3A3A40;

  --gold:        #C9A24B;
  --gold-bright: #E4C77A;

  /* one colour, reserved strictly for actions. Nothing decorative is
     ever orange, so orange always means "this is the thing to click". */
  --cta:       #E2611B;
  --cta-hover: #F0742B;
  --on-cta:    #140F0A;

  --off-white:     #F1EEE7;
  --off-white-dim: #ACA69B;  /* lifted from #d4d1c8's role for AA on charcoal */

  --display:"Bricolage Grotesque","Helvetica Neue",Helvetica,Arial,sans-serif;
  --body:"Inter Tight",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;

  --gut:clamp(20px,5vw,64px);
  --max:1380px;
  --radius:2px;

  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ink); color:var(--off-white);
  font-family:var(--body); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}

.wrap{max-width:var(--max); margin-inline:auto; padding-inline:var(--gut); width:100%}
/* main is a flex column so the gold band can be reordered on mobile.
   Flex items with margin-inline:auto lose stretch and shrink-wrap, so
   .wrap needs an explicit width:100% above or sections collapse inward. */
main{display:flex; flex-direction:column}
main > *{width:100%}

/* --- type scale: sentence case throughout. No uppercase anywhere. --- */
h1,h2,h3{font-family:var(--display); font-weight:800; margin:0; letter-spacing:-0.035em; line-height:0.96; color:var(--off-white)}
h1{font-size:clamp(38px,6.2vw,88px)}
h2{font-size:clamp(32px,4.6vw,66px)}
h3{font-size:clamp(20px,1.9vw,26px); font-weight:700; letter-spacing:-0.02em; line-height:1.18}
p{margin:0}

/* --- the label: bold gold words. No rules, no marker bars. --- */
.eyebrow{
  font-family:var(--body); font-size:15px; font-weight:700;
  letter-spacing:0; color:var(--gold); margin:0;
}

/* --- slat texture: vertical battens, echoing the feature wall and the
       cedar cladding. Sits behind raised sections, barely there. --- */
.slatted{position:relative; isolation:isolate}
.slatted::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:repeating-linear-gradient(90deg,
    rgba(201,162,75,.055) 0 1px, transparent 1px 34px);
}
@media (max-width:760px){ .slatted::before{background-image:none} }

/* --- buttons: grain over flat colour, generated with SVG turbulence so
       there is no texture image to download --- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--display); font-size:19px; font-weight:800;
  letter-spacing:-0.015em;
  padding:15px 28px; border:none; border-radius:10px;
  background-color:var(--cta); background-image:var(--grain);
  background-blend-mode:overlay; background-size:180px 180px;
  color:var(--on-cta); min-height:52px;
  transition:background-color .18s ease, color .18s ease, transform .18s ease;
}
.btn:hover{background-color:var(--cta-hover)}
.btn:active{transform:translateY(1px)}

.btn--ghost{
  background-color:transparent; background-image:none;
  color:var(--off-white); border:1px solid var(--line-2); padding:14px 26px;
}
.btn--ghost:hover{background-color:transparent; border-color:var(--gold); color:var(--gold-bright)}

a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--gold-bright); outline-offset:3px
}

/* ============================================================
   HEADER
   ============================================================ */
.hdr{position:sticky; top:0; z-index:50; background:var(--charcoal); border-bottom:1px solid var(--line)}
.hdr__in{display:flex; align-items:center; gap:28px; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut); height:82px}
.hdr__logo{display:flex; align-items:center; min-height:44px}
.hdr__logo img{height:52px; width:auto}
.nav{display:flex; gap:30px; margin-left:auto}
.nav a{font-family:var(--body); font-size:16px; font-weight:500; letter-spacing:0;
  color:var(--off-white); padding:6px 0; border-bottom:1px solid transparent}
.nav a:hover,.nav a.active{border-bottom-color:var(--gold); color:var(--gold-bright)}
.lang{font-family:var(--body); font-size:15px; color:var(--off-white-dim); white-space:nowrap}
.lang .on{color:var(--off-white)}
.lang a:hover{color:var(--gold-bright)}
.burger{display:none; background:none; border:1px solid var(--line-2); color:var(--off-white);
  width:44px; height:44px; font-size:19px; cursor:pointer; border-radius:var(--radius)}

/* segmented language toggle, shown only inside the mobile menu */
.nav__lang{display:none}
.nav__lang a{
  flex:1; display:flex; align-items:center; justify-content:center; min-height:46px;
  font-size:16px; font-weight:500; color:var(--off-white-dim); border-radius:8px;
}
.nav__lang a.on{background:var(--charcoal-2); color:var(--off-white); font-weight:700}

/* jump link down to the transformations, phones only */
.jump{display:none; padding-top:26px}
.btn--wide{width:100%}

/* ============================================================
   HERO
   ============================================================ */
/* the finished deck sits behind the landing copy, masked so it dissolves
   into the page rather than stopping at an edge. Kept dark enough that
   nothing on top of it loses contrast. */
.heroband{position:relative; isolation:isolate; overflow:hidden}
.heroband::before{
  content:""; position:absolute; z-index:-1; inset:0 0 auto 0;
  height:min(900px,105vh);
  background:url("../images/gallery/deck-stairs-after.jpg") center 34%/cover no-repeat;
  opacity:.7;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.65) 42%,rgba(0,0,0,.18) 74%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.65) 42%,rgba(0,0,0,.18) 74%,transparent 100%);
}
.heroband::after{
  content:""; position:absolute; z-index:-1; inset:0 0 auto 0;
  height:min(900px,105vh); pointer-events:none;
  background:linear-gradient(180deg,
    rgba(14,14,16,.62) 0%, rgba(14,14,16,.33) 38%,
    rgba(14,14,16,.68) 78%, var(--ink) 100%);
}
@media (max-width:760px){
  .heroband::after{background:linear-gradient(180deg,
    rgba(14,14,16,.55) 0%, rgba(14,14,16,.46) 55%, var(--ink) 100%)}
}

.hero{padding-top:clamp(44px,6vw,86px)}
/* the label sits on the photo, so it needs the brighter gold to clear AA */
.hero .eyebrow{color:var(--gold-bright)}
.hero__top{display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(26px,5vw,76px); align-items:end; padding-bottom:clamp(30px,4vw,50px)}
.hero h1{margin-top:22px}
.hero h1 .ln2{display:block; margin-top:.16em}
.hero h1 em{font-style:normal; color:var(--gold)}
.hero__lead{color:var(--off-white); font-size:clamp(17px,1.4vw,20px); line-height:1.55; max-width:44ch}
.hero__cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:26px}

.hero__media{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.hero__media figure{margin:0; position:relative; overflow:hidden; background:var(--charcoal-2)}
.hero__media img{width:100%; height:clamp(280px,38vw,520px); object-fit:cover}
.hero__media figcaption{
  position:absolute; left:0; bottom:0; padding:9px 14px;
  font-family:var(--body); font-size:13px; font-weight:500;
  background:rgba(14,14,16,.86); color:var(--off-white); border-top:1px solid var(--line);
}
.hero__tag{
  position:absolute; top:0; left:0; padding:9px 16px;
  font-family:var(--display); font-size:16px; font-weight:800; letter-spacing:-0.01em;
  background:rgba(14,14,16,.82); color:var(--off-white);
}
.hero__tag--after{background:var(--gold); color:#0E0E10}

/* ============================================================
   CREDENTIALS BAND: facts that are true, not invented metrics
   ============================================================ */
.band{background:var(--gold); color:#0E0E10; margin-top:clamp(44px,6vw,80px)}
.band__in{display:flex; flex-wrap:wrap; justify-content:center; gap:10px 40px; padding-block:17px;
  font-family:var(--body); font-size:16px; font-weight:700}
.band__in span{display:flex; align-items:center; gap:11px}
.band__in span::before{content:""; width:5px; height:5px; background:#0E0E10; flex:none}

/* ============================================================
   SECTIONS
   ============================================================ */
.sec{padding-block:clamp(60px,7.5vw,124px)}
.sec--raised{background:var(--charcoal)}
.split{display:grid; grid-template-columns:minmax(0,.62fr) minmax(0,2fr); gap:clamp(26px,5vw,80px)}
.split__side{position:sticky; top:114px; align-self:start}
.split__side h2{margin-top:18px}

/* --- services: an editorial list, not a card grid. No numbers: not a sequence. --- */
.svc{border-top:1px solid var(--line)}
.svc__row{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,52%); gap:clamp(16px,3vw,44px);
  align-items:start; padding-block:clamp(24px,3vw,38px); border-bottom:1px solid var(--line); position:relative}
.svc__row::before{content:""; position:absolute; left:0; right:0; top:-1px; height:2px; background:var(--gold);
  transform:scaleX(0); transform-origin:left; transition:transform .4s cubic-bezier(.4,0,.2,1)}
.svc__row:hover::before{transform:scaleX(1)}
.svc__body{color:var(--off-white-dim); font-size:16px}
/* no boxes: a gold square, then the word */
.svc__tags{margin-top:16px; display:flex; flex-wrap:wrap; gap:8px 24px}
.svc__tags i{
  font-style:normal; font-family:var(--body); font-size:15px; font-weight:500;
  color:var(--off-white); display:flex; align-items:center; gap:9px;
}
.svc__tags i::before{content:""; width:6px; height:6px; background:var(--gold); flex:none}
.svc__note{margin:16px 0 0; font-size:13.5px; line-height:1.55; color:var(--off-white-dim); opacity:.72; border-left:2px solid var(--gold); padding-left:12px}

/* --- process: a genuine sequence, drawn on a dimension line --- */
.proc__head{display:grid; grid-template-columns:1.4fr 1fr; gap:clamp(22px,5vw,68px); align-items:end; margin-bottom:clamp(36px,5vw,66px)}
/* direct child only: a descendant selector here also caught .eyebrow and
   greyed out the gold label */
.proc__head > p{color:var(--off-white-dim); max-width:40ch}
.proc__line{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line-2)}
.step{padding:24px clamp(14px,2vw,30px) 4px 0}
.step__no{font-family:var(--body); font-size:16px; font-weight:700; color:var(--gold)}
.step h3{margin:15px 0 9px}
.step p{color:var(--off-white-dim); font-size:15.5px; max-width:30ch}

/* ============================================================
   BEFORE / AFTER: real projects, portrait to match the source photos
   ============================================================ */
.work__head{display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:20px; margin-bottom:clamp(28px,4vw,50px)}
.ba{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.2vw,28px); align-items:start}
.ba__item{display:block}
.ba__pair{display:grid; grid-template-columns:1fr 1fr; gap:4px; background:var(--line); padding:0}
/* the frame owns the ratio, so all six shots match no matter what the
   source photo's shape is. They're a mix of portrait and landscape */
.ba__shot{position:relative; overflow:hidden; aspect-ratio:3/4; background:var(--charcoal-2)}
.ba__shot img{width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.22,1,.36,1)}
/* landscape sources whose subject sits right of centre */
.ba__shot--rightcrop img{object-position:right center}
.ba__item:hover .ba__shot img{transform:scale(1.03)}
.ba__shot span{
  position:absolute; top:0; left:0; padding:6px 10px;
  font-family:var(--body); font-size:13px; font-weight:700;
  background:rgba(14,14,16,.82); color:var(--off-white);
}
.ba__shot--after span{background:var(--gold); color:#0E0E10}
.ba__cap{display:flex; justify-content:space-between; gap:14px; align-items:baseline;
  padding-top:13px; margin-top:13px; border-top:1px solid var(--line)}
.ba__cap b{font-family:var(--display); font-weight:700; font-size:18px; letter-spacing:-.02em}
.ba__cap span{font-family:var(--body); font-size:14px; color:var(--off-white-dim)}
.ba__item:hover .ba__cap{border-top-color:var(--gold)}

/* ============================================================
   CTA + FOOTER
   ============================================================ */
.cta{display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(26px,5vw,68px); align-items:end; padding-block:clamp(60px,8vw,124px)}
.cta h2{margin-top:20px}
.cta__head{display:flex; align-items:flex-start; gap:clamp(20px,3vw,40px); flex-wrap:wrap}
.cta__icons{display:flex; gap:14px; align-items:flex-start; padding-top:14px}
.cta__icons svg{width:clamp(38px,3.4vw,52px); height:auto; color:var(--gold); opacity:.9}
.cta__side p{color:var(--off-white-dim); font-size:16px; margin-bottom:24px}

.ftr{background:var(--charcoal); border-top:1px solid var(--line)}
.ftr__in{max-width:var(--max); margin-inline:auto; padding-inline:var(--gut); padding-block:clamp(38px,5vw,60px)}
.ftr__cols{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:clamp(24px,4vw,60px)}
.ftr__logo img{height:64px; width:auto}
.ftr__blurb{color:var(--off-white-dim); font-size:15.5px; max-width:34ch; margin-top:16px}
.ftr h4{font-family:var(--body); font-size:15px; font-weight:700; color:var(--gold); margin:0 0 12px}
.ftr ul{list-style:none; margin:0; padding:0}
.ftr li{display:flex; align-items:center; min-height:44px; font-size:15px; color:var(--off-white-dim)}
.ftr li a{display:flex; align-items:center; min-height:44px; width:100%; font-size:15px; color:var(--off-white)}
.ftr li a:hover{color:var(--gold-bright)}
.ftr__base{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px;
  margin-top:clamp(30px,4vw,50px); padding-top:22px; border-top:1px solid var(--line);
  font-family:var(--body); font-size:14px; color:var(--off-white-dim)}

/* --- social icons (carried over) --- */
.social-links{display:flex; gap:10px; margin-top:6px}
.social-links a{width:44px; height:44px; display:grid; place-items:center;
  border:1px solid var(--line-2); border-radius:var(--radius); color:var(--off-white-dim)}
.social-links a:hover{color:var(--gold-bright); border-color:var(--gold)}
.social-links svg{width:19px; height:19px; fill:currentColor}

/* ============================================================
   MOTION: one reveal, nothing else moves unprompted
   ============================================================ */
.rv{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1)}
.rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1 !important; transform:none !important}
  *{animation:none !important; transition-duration:.01ms !important}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .hero__top{grid-template-columns:1fr; align-items:start; gap:24px}
  .split{grid-template-columns:1fr; gap:30px}
  .split__side{position:static}
  .proc__head{grid-template-columns:1fr}
  .proc__line{grid-template-columns:repeat(2,1fr); border-top:none}
  .step{border-top:1px solid var(--line-2); padding-right:20px}
  .cta{grid-template-columns:1fr}
  .ba{grid-template-columns:1fr 1fr}
}
/* nav collapses before the header CTA can push the page wide */
@media (max-width:980px){
  .nav,.lang{display:none}
  .nav.open{
    display:flex; position:absolute; left:0; right:0; top:82px; flex-direction:column; gap:0;
    background:var(--charcoal); border-bottom:1px solid var(--line); padding:8px var(--gut) 16px;
  }
  .nav.open a{min-height:48px; display:flex; align-items:center; border-bottom:1px solid var(--line)}
  .nav.open .nav__lang{
    display:flex; gap:6px; margin-top:14px; padding:5px;
    background:var(--ink); border:1px solid var(--line); border-radius:10px;
  }
  .nav.open .nav__lang a{border-bottom:none}
  .burger{display:grid; place-items:center; margin-left:auto}
  .hdr__in{gap:14px; position:relative}
}
@media (max-width:760px){
  /* the band is desktop-only; the jump link stands in for it on phones */
  .band{display:none}
  .jump{display:block}
  /* two stacked section paddings left a dead band above the closing CTA */
  #work{padding-bottom:20px}
  .cta{padding-block:44px 60px}
  .cta__side{margin-top:6px}
  .cta__side .btn{display:flex; width:fit-content; margin-inline:auto}
  .hero__media{grid-template-columns:1fr}
  .hero__media img{height:clamp(240px,60vw,380px)}
  .svc__row{grid-template-columns:1fr; gap:12px}
  .proc__line{grid-template-columns:1fr}
  .ba{grid-template-columns:1fr}
  .ftr__cols{grid-template-columns:1fr}
  .hero__cta .btn,.cta__side .btn{flex:1 1 auto}
  .hdr__logo img{height:42px}
  .hdr .btn{padding:10px 15px; font-size:14px; min-height:44px; border-radius:8px; white-space:nowrap}
}

/* ============================================================
   CHAT WIDGET: ported from style.css so index.html needs only
   this stylesheet. Calibri references replaced with the mono face.
   ============================================================ */
#dlm-chat-root{position:fixed; bottom:24px; right:24px; z-index:200; font-family:var(--body)}
#dlm-chat-bubble{width:56px; height:56px; border-radius:50%; background:var(--gold); border:none;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 6px 20px rgba(0,0,0,.4); transition:background .2s, transform .15s}
#dlm-chat-bubble:hover{background:var(--gold-bright); transform:translateY(-2px)}
#dlm-chat-window{position:absolute; bottom:72px; right:0; width:340px; max-width:calc(100vw - 48px);
  max-height:480px; background:var(--charcoal); border:1px solid var(--line); border-radius:8px;
  display:flex; flex-direction:column; overflow:hidden; box-shadow:0 12px 40px rgba(0,0,0,.5)}
#dlm-chat-window.dlm-hidden{display:none}
#dlm-chat-header{background:var(--ink); border-bottom:1px solid var(--line); padding:14px 16px;
  display:flex; align-items:flex-start; justify-content:space-between}
#dlm-chat-title{font-family:var(--body); font-size:16px; font-weight:700; color:var(--gold-bright)}
#dlm-chat-subtitle{font-size:12px; color:var(--off-white-dim); margin-top:4px; max-width:250px}
#dlm-chat-close{background:none; border:none; color:var(--off-white-dim); font-size:22px; line-height:1; cursor:pointer; padding:0 4px}
#dlm-chat-close:hover{color:var(--gold-bright)}
#dlm-chat-body{flex:1; overflow-y:auto; padding:14px 16px; display:flex; flex-direction:column; gap:10px; max-height:260px}
.dlm-msg{font-size:14px; line-height:1.5; padding:9px 12px; border-radius:6px; max-width:88%}
.dlm-msg-bot{background:var(--charcoal-2); color:var(--off-white); align-self:flex-start; border:1px solid var(--line)}
.dlm-msg-user{background:var(--gold); color:#0E0E10; align-self:flex-end}
.dlm-msg a{color:var(--gold-bright); text-decoration:underline}
.dlm-msg-bot a{color:var(--gold-bright)}
#dlm-chat-quick{display:flex; flex-wrap:wrap; gap:8px; padding:0 16px 12px}
.dlm-quick-btn{font-family:var(--body); font-size:14px; font-weight:500;
  background:none; border:1px solid var(--line-2); color:var(--off-white-dim);
  padding:8px 12px; border-radius:20px; cursor:pointer; transition:color .2s, border-color .2s}
.dlm-quick-btn:hover{color:var(--gold-bright); border-color:var(--gold)}
#dlm-chat-form{display:flex; border-top:1px solid var(--line)}
#dlm-chat-input{flex:1; background:var(--charcoal-2); border:none; color:var(--off-white);
  padding:12px 14px; font-size:14px; font-family:var(--body)}
#dlm-chat-input:focus{outline:none}
#dlm-chat-form button[type="submit"]{background:var(--gold); border:none; color:#0E0E10;
  font-family:var(--body); font-size:15px; font-weight:700;
  padding:0 18px; cursor:pointer; transition:background .2s}
#dlm-chat-form button[type="submit"]:hover{background:var(--gold-bright)}
@media (max-width:480px){
  #dlm-chat-root{bottom:16px; right:16px}
  #dlm-chat-window{width:calc(100vw - 32px)}
}

/* keywords carried in weight, not colour */
.hero__lead strong{font-weight:700; color:var(--off-white)}

/* keywords in the service copy carry in weight only */
.svc__body strong{font-weight:700; color:var(--off-white)}

/* ============================================================
   INNER PAGES
   ============================================================ */

/* --- page hero: same voice as the homepage, shorter --- */
.phero{padding-block:clamp(46px,6vw,88px) clamp(30px,4vw,52px)}
.phero h1{margin-top:16px; font-size:clamp(36px,5.4vw,74px)}
.phero__lead{margin-top:22px; color:var(--off-white); font-size:clamp(17px,1.3vw,19px); max-width:56ch}

/* --- "every project includes" --- */
.incl{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,40px); border-top:1px solid var(--line); padding-top:clamp(24px,3vw,38px)}
.incl h3{margin-bottom:10px}
.incl p{color:var(--off-white-dim); font-size:16px; max-width:34ch}

/* --- about: alternating statements --- */
.story{display:grid; gap:clamp(34px,5vw,62px)}
.story__row{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr); gap:clamp(22px,4vw,64px); align-items:start;
  border-top:1px solid var(--line); padding-top:clamp(22px,3vw,36px)}
.story__row p{color:var(--off-white-dim); font-size:17px; line-height:1.65}
.story__row p + p{margin-top:14px}
.story__row strong{color:var(--off-white); font-weight:700}
.checks{list-style:none; margin:18px 0 0; padding:0; display:grid; gap:12px}
.checks li{display:flex; align-items:flex-start; gap:11px; color:var(--off-white); font-size:16.5px}
.checks li::before{content:""; width:7px; height:7px; margin-top:9px; background:var(--gold); flex:none}

/* --- contact --- */
.contact{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr); gap:clamp(28px,5vw,72px); align-items:start}
.method{border-top:1px solid var(--line); padding-block:18px}
.method h4{font-family:var(--body); font-size:15px; font-weight:700; color:var(--gold); margin:0 0 6px}
.method a,.method span{display:block; font-size:17px; color:var(--off-white)}
.method a:hover{color:var(--gold-bright)}
.method small{display:block; color:var(--off-white-dim); font-size:14.5px; margin-top:4px}
.prep{margin-top:26px; padding:20px 22px; background:var(--charcoal-2); border-left:3px solid var(--gold); border-radius:0}
.prep h4{font-family:var(--body); font-size:15px; font-weight:700; color:var(--gold); margin:0 0 8px}
.prep p{color:var(--off-white-dim); font-size:16px}

.form{display:grid; gap:18px}
.field{display:grid; gap:8px}
.field label{font-size:15px; font-weight:700; color:var(--off-white)}
.field input,.field select,.field textarea{
  font-family:var(--body); font-size:16px; color:var(--off-white);
  background:var(--charcoal-2); border:1px solid var(--line-2); border-radius:8px;
  padding:13px 14px; min-height:50px; width:100%;
}
.field textarea{min-height:150px; resize:vertical; line-height:1.55}
.field input::placeholder,.field textarea::placeholder{color:#948B7C}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold); outline:none; box-shadow:0 0 0 3px rgba(201,162,75,.22)}
.field--2{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form .btn{justify-self:start}
.sent{display:none; padding:22px; background:var(--charcoal-2); border-left:3px solid var(--gold)}
.sent.on{display:block}
.sent h3{margin-bottom:8px}
.sent p{color:var(--off-white-dim)}

/* ============================================================
   GALLERY — class names below are required by js/gallery-loader.js
   and js/lightbox.js. Do not rename them.
   ============================================================ */
.projects-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,32px)}
.project-card{cursor:pointer}
.project-thumbs{display:grid; grid-template-columns:1fr 1fr; gap:4px; background:var(--line)}
.project-thumb{position:relative; overflow:hidden; aspect-ratio:3/4; background:var(--charcoal-2)}
.project-thumb img{width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.22,1,.36,1)}
.project-card:hover .project-thumb img{transform:scale(1.03)}
.project-thumb .tag{
  position:absolute; top:0; left:0; padding:6px 11px;
  font-family:var(--body); font-size:13px; font-weight:700;
  background:rgba(14,14,16,.82); color:var(--off-white);
}
.project-thumb + .project-thumb .tag{background:var(--gold); color:#0E0E10}
.project-thumb.ph{display:grid; place-items:center; gap:6px; color:var(--off-white-dim)}
.project-thumb.ph .icon{font-size:22px}
.project-thumb.ph .label{font-size:14px}
.project-title{
  font-family:var(--display); font-weight:700; font-size:18px; letter-spacing:-.02em;
  padding-top:13px; margin-top:13px; border-top:1px solid var(--line);
}
.project-card:hover .project-title{border-top-color:var(--gold)}

/* --- lightbox --- */
#lb-overlay{
  position:fixed; inset:0; z-index:300; display:none;
  background:rgba(8,8,9,.975); align-items:center; justify-content:center; padding:20px;
}
/* js/lightbox.js toggles .lb-open on the overlay itself */
#lb-overlay.lb-open{display:flex}
#lb-content{max-width:1100px; width:100%}
#lb-pair{display:grid; grid-template-columns:1fr 1fr; gap:8px; align-items:start}
.lb-panel{position:relative; background:var(--charcoal-2)}
.lb-panel img{width:100%; max-height:66vh; object-fit:contain; display:block}
.lb-tag{
  position:absolute; top:0; left:0; padding:7px 13px;
  font-family:var(--body); font-size:14px; font-weight:700;
  background:rgba(14,14,16,.85); color:var(--off-white);
}
.lb-panel:last-child .lb-tag{background:var(--gold); color:#0E0E10}
.lb-panel-placeholder{display:grid; place-items:center; min-height:280px; color:var(--off-white-dim)}
.lb-ph-icon{font-size:26px}
.lb-ph-label{font-size:14px; margin-top:6px}
#lb-caption{
  text-align:center; margin-top:16px;
  font-family:var(--display); font-weight:700; font-size:20px; color:var(--off-white);
}
#lb-close,.lb-arrow{
  position:absolute; background:var(--charcoal-2); border:1px solid var(--line-2);
  color:var(--off-white); width:48px; height:48px; border-radius:50%;
  font-size:22px; line-height:1; cursor:pointer; display:grid; place-items:center;
}
#lb-close{top:20px; right:20px}
#lb-close:hover,.lb-arrow:hover{background:var(--gold); border-color:var(--gold); color:#0E0E10}
#lb-prev{left:20px; top:50%; transform:translateY(-50%)}
#lb-next{right:20px; top:50%; transform:translateY(-50%)}
#lb-thumbs{position:absolute; bottom:18px; left:50%; transform:translateX(-50%); display:flex; gap:8px; flex-wrap:wrap; justify-content:center; max-width:90vw}
.lb-thumb{width:52px; height:52px; padding:0; border:1px solid var(--line-2); background:var(--charcoal-2); cursor:pointer; overflow:hidden; border-radius:6px}
.lb-thumb img{width:100%; height:100%; object-fit:cover}
.lb-thumb-active{border-color:var(--gold)}

@media (max-width:1080px){
  .incl{grid-template-columns:1fr 1fr}
  .story__row{grid-template-columns:1fr; gap:14px}
  .contact{grid-template-columns:1fr}
  .projects-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .incl{grid-template-columns:1fr; gap:24px}
  .projects-grid{grid-template-columns:1fr}
  .field--2{grid-template-columns:1fr}
  .form .btn{justify-self:stretch}
  #lb-pair{grid-template-columns:1fr; gap:4px}
  .lb-panel img{max-height:38vh}
  #lb-prev{left:8px} #lb-next{right:8px}
  #lb-thumbs{display:none}
}

/* heading levels must not skip, but a footer column label should not look
   like a section title. These carry the semantics without the scale. */
.lbl{font-family:var(--body); font-size:15px; font-weight:700; letter-spacing:0;
  color:var(--gold); margin:0 0 12px; line-height:1.4}
.method .lbl{margin:0 0 6px}
.prep .lbl{margin:0 0 8px}
.lbl-lg{font-family:var(--display); font-size:clamp(20px,1.9vw,26px); font-weight:700;
  letter-spacing:-0.02em; line-height:1.18; color:var(--off-white); margin:0}

/* the French header CTA is a longer word than the English one and was
   squeezing the menu button under the 44px tap minimum */
.burger{flex:none}
.method a{min-height:44px; display:flex; align-items:center}
.btn__short{display:none}
@media (max-width:760px){
  .btn__long{display:none}
  .btn__short{display:inline}

/* ============================================================
   SOCIAL ICONS — no frame, just the mark
   Boxes removed everywhere (contact info column + footer). The
   44x44 hit area is kept but made invisible, so tap targets stay
   accessible; the negative margin pulls the first glyph flush
   with the text above it.
   ============================================================ */
.social-links{gap:0; margin-top:8px; margin-left:-11px}
.social-links a,
.method .social-links a,
.ftr .social-links a{
  width:44px; height:44px; min-height:44px; flex:0 0 auto; padding:0;
  display:flex; align-items:center; justify-content:center;
  border:none; background:none; border-radius:0;
  color:var(--off-white-dim);
  transition:color .2s ease, transform .2s ease;
}
.social-links a:hover{color:var(--gold-bright); background:none; transform:translateY(-1px)}
.social-links svg{display:block; width:22px; height:22px; fill:currentColor}