/* ============================================================
   Xclusive Metal & Design
   Home: full-bleed feature hero · Portfolio: gallery page
   ============================================================ */

:root{
  --ink:        #16181c;
  --ink-900:    #0b0c0e;   /* black (matches logo bg) */
  --ink-800:    #16181d;
  --paper:      #f6f5f2;
  --paper-2:    #efece6;
  --steel-300:  #b3b2ad;
  --steel-400:  #9a9c9f;
  --steel-500:  #82858a;
  --steel-600:  #6a6c70;
  --line:       rgba(20,22,26,.12);
  --line-dark:  rgba(255,255,255,.13);
  --accent:     #cf2b2b;   /* brand red */
  --accent-2:   #e8463d;   /* lighter red (hover) */

  --font-display: 'Archivo', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'Space Mono', ui-monospace, monospace;

  --container: 1120px;
  --pad: clamp(20px, 5vw, 44px);
  --r: 2px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--ink-900);
  line-height:1.6;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
.container{ width:100%; max-width:var(--container); margin:0 auto; padding-inline:var(--pad); }

.eyebrow{
  font-family:var(--font-mono);
  font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent-2); margin-bottom:22px;
}
.accent-word{ color:var(--accent-2); }
.placeholder{ color:var(--steel-500) !important; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  padding:15px 28px; border:1px solid transparent; border-radius:var(--r);
  transition:transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
  cursor:pointer;
}
.btn-primary{ background:var(--accent); color:#fff; }
.btn-primary:hover{ background:var(--accent-2); transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--paper); border-color:var(--line-dark); }
.btn-ghost:hover{ border-color:var(--paper); transform:translateY(-2px); }

/* ============ HEADER ============ */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  transition:background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:#000; backdrop-filter:none;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; height:138px; gap:18px; }
.brand-logo{ height:113px; width:auto; }

/* Home: header ALWAYS sits over the full-bleed photo with only a subtle top
   gradient for logo/nav legibility - never a solid black bar, even on scroll,
   so the whole image stays visible. */
.page-home .site-header,
.page-home .site-header.scrolled,
.page-portfolio .site-header{
  background:linear-gradient(180deg, rgba(8,9,11,.6) 0%, rgba(8,9,11,.18) 68%, rgba(8,9,11,0) 100%);
  border-bottom:none;
}
/* portfolio is a long page: header stays pinned + transparent over the photo at the
   very top, but once scrolling it gets a clean dark glassy bar so the gallery cards
   don't clash behind the logo / number / Home. */
.page-portfolio .site-header.scrolled{
  background:rgba(11,12,14,.9);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
/* portfolio header sits over the photo - shadow the white number for legibility */
.page-portfolio .hp-num{ text-shadow:0 2px 12px rgba(0,0,0,.8); }
.page-home .nav a, .page-home .hp-num, .page-home .hp-label{ text-shadow:0 2px 12px rgba(0,0,0,.8); }
/* (header tagline removed per client) */

.nav{ display:flex; align-items:center; gap:26px; }
.nav > a:not(.header-phone):not(.btn){
  font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--paper); position:relative; transition:color .2s ease;
}
.nav > a:not(.header-phone):not(.btn)::after{ content:''; position:absolute; left:0; bottom:-6px; height:1px; width:0; background:var(--accent-2); transition:width .25s ease; }
.nav > a:not(.header-phone):not(.btn):hover{ color:var(--accent-2); }
.nav > a:not(.header-phone):not(.btn):hover::after{ width:100%; }

.header-phone{ display:flex; flex-direction:column; align-items:flex-end; line-height:1.2; }
.hp-label{ font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--steel-400); }
.hp-num{ font-family:var(--font-display); font-weight:600; font-size:16px; color:var(--paper); }
.header-phone:hover .hp-num{ color:var(--accent-2); }

/* Portfolio header right cluster: red Home button stacked OVER the phone number,
   left-aligned, button stretched as wide as the number, slightly larger label. */
.page-portfolio .nav{ flex-direction:column; align-items:stretch; gap:10px; }
.page-portfolio .header-phone{ align-items:flex-start; }
/* plain white HOME text - no red box/fill, left-aligned above the number */
.btn.nav-home{
  align-self:flex-start; width:auto;
  justify-content:flex-start;
  padding:0; border:none; background:transparent;
  color:var(--paper); font-size:15px;
  text-shadow:0 2px 12px rgba(0,0,0,.8);
}
.btn.nav-home:hover{ background:transparent; color:var(--accent-2); transform:none; }

/* ============ HOME FEATURE HERO ============ */
/* Photo + scrim are a TRUE background of the section, so they always cover the
   full content height on any device (no separate layer that can fail to grow). */
.hero-home{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  background-image:
    linear-gradient(180deg, rgba(9,10,12,.52) 0%, rgba(9,10,12,.30) 30%, rgba(9,10,12,.48) 62%, rgba(9,10,12,.74) 100%),
    url('assets/work/hero-staircase.jpg');
  background-size:cover, cover;
  background-position:center, center;
  background-repeat:no-repeat, no-repeat;
}
.hero-inner{ position:relative; z-index:2; width:100%; color:var(--paper); padding-block:clamp(132px,20vh,210px) clamp(54px,8vh,96px); }
.hero-title{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(40px,6.6vw,80px); line-height:1.04; letter-spacing:-.02em;
  text-shadow:0 2px 22px rgba(0,0,0,.6);
}
.hero-lead{
  margin-top:26px; max-width:50ch;
  font-size:clamp(16px,1.8vw,20px); color:#e7e6e2;
  text-shadow:0 2px 16px rgba(0,0,0,.7);
}
.hero-home .eyebrow{ text-shadow:0 2px 14px rgba(0,0,0,.6); }
.hero-actions{ display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; }

.hero-contact-block{ margin-top:42px; padding-top:30px; border-top:1px solid rgba(255,255,255,.22); }
.hero-contact-title{ font-family:var(--font-display); font-weight:700; font-size:19px; letter-spacing:-.01em; color:#fff; margin-bottom:18px; text-shadow:0 2px 16px rgba(0,0,0,.7); }
.hero-contact{
  list-style:none; display:flex; flex-wrap:wrap; gap:16px clamp(28px,5vw,56px);
}
.hero-contact li{ display:flex; align-items:baseline; gap:12px; }
.hc-label{ font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:#cfd0d2; text-shadow:0 1px 10px rgba(0,0,0,.7); }
.hero-contact a, .hero-contact span:not(.hc-label){ font-size:16px; color:#fff; border-bottom:1px solid transparent; transition:border-color .2s ease; text-shadow:0 2px 14px rgba(0,0,0,.75); }
.hero-contact a:hover{ border-color:var(--accent-2); }

/* slim home footer */
.home-footer{ background:var(--ink-900); border-top:1px solid var(--line-dark); padding-block:22px; }
.home-footer-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.hf-meta{ font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; color:var(--steel-500); }
.hf-link{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--paper); }
.hf-link:hover{ color:var(--accent-2); }

/* ============ WORK / PORTFOLIO PAGE ============ */
.page-portfolio .work{
  padding-top:calc(138px + clamp(36px,6vw,64px));
  background:transparent;
  color:var(--paper);
}
/* Fixed, VIEWPORT-sized backdrop (a real layer, not background-attachment:fixed,
   which breaks on iOS). Because it's pinned to the viewport it is only ever one
   screen tall, so the photo never stretches no matter how long the page gets,
   and the gallery scrolls over it. */
.page-portfolio::before{
  content:"";
  position:fixed; inset:0; z-index:-1;
  background:
    linear-gradient(rgba(9,10,12,.5), rgba(9,10,12,.66)),
    url('assets/work/hero-staircase.jpg') center center / cover no-repeat;
}
.page-portfolio .work-head .eyebrow{ color:var(--accent-2); }
.page-portfolio .work-title{ color:#fff; text-shadow:0 2px 18px rgba(0,0,0,.55); }
.page-portfolio .work-desc{ color:#e6e7e9; text-shadow:0 1px 10px rgba(0,0,0,.7); }
.work{ background:var(--paper); color:var(--ink); padding-bottom:clamp(56px,9vw,104px); padding-top:clamp(56px,9vw,104px); }
.work-head{ margin-bottom:clamp(32px,5vw,52px); max-width:680px; }
.work-head .eyebrow{ color:var(--accent); }
.work-title{ font-family:var(--font-display); font-weight:700; font-size:clamp(38px,5.5vw,58px); letter-spacing:-.02em; }
.work-desc{ margin-top:14px; color:var(--steel-600); font-size:clamp(15px,1.6vw,18px); max-width:56ch; }

.gallery{ columns:2; column-gap:18px; }
.g-item{
  break-inside:avoid; margin-bottom:18px; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--r); background:#fff;
}
.g-item img{ width:100%; height:auto; transition:transform .6s cubic-bezier(.2,.8,.2,1); }
.g-item:hover img{ transform:scale(1.03); }
.g-item figcaption{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:14px 16px; }
.g-what{ font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--ink); }
.g-where{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); white-space:nowrap; }

/* ============ FOOTER / CONTACT (portfolio) ============ */
.site-footer{ background:var(--ink-900); color:var(--paper); padding-top:clamp(56px,8vw,90px); }
.footer-inner{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,72px); align-items:start; padding-bottom:clamp(40px,6vw,64px); }
.footer-title{ font-family:var(--font-display); font-weight:700; font-size:clamp(30px,4.5vw,50px); letter-spacing:-.02em; line-height:1.02; }
.footer-sub{ margin-top:16px; color:var(--steel-300); max-width:42ch; }
.footer-contact{ list-style:none; }
.footer-contact li{ display:flex; align-items:baseline; gap:18px; padding:16px 0; border-top:1px solid var(--line-dark); }
.footer-contact li:last-child{ border-bottom:1px solid var(--line-dark); }
.fc-label{ font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--steel-400); width:88px; flex:none; }
.footer-contact a, .footer-contact span:not(.fc-label){ font-size:17px; color:var(--paper); border-bottom:1px solid transparent; transition:border-color .2s ease; }
.footer-contact a:hover{ border-color:var(--accent-2); }
.footer-base{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:18px; padding-block:26px; border-top:1px solid var(--line-dark); }
.footer-logo{ height:40px; width:auto; }
.footer-meta{ font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; color:var(--steel-500); }

@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } .g-item:hover img{ transform:none; } }

/* ============ RESPONSIVE ============ */
@media (max-width:760px){
  .gallery{ columns:1; }
  .footer-inner{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  body{ font-size:16px; }
  .brand-logo{ height:84px; }
  .header-inner{ height:110px; }
  .header-inner{ gap:12px; }
  .nav{ gap:14px; }
  .nav > a:not(.header-phone):not(.btn){ font-size:11px; letter-spacing:.1em; padding-block:12px; }  /* >=44px tap target */
  .hp-label{ display:none; }                 /* save width: show number only */
  .hp-num{ font-size:15px; }
  .header-phone{ padding-block:9px; }        /* bigger tap target */
  .eyebrow{ font-size:11px; letter-spacing:.14em; }
  /* fit the full hero on a phone screen: tighter top/bottom, compact rhythm */
  .hero-inner{ padding-block:98px 44px; }
  .hero-title{ font-size:clamp(38px,11vw,46px); }
  .hero-lead{ margin-top:18px; font-size:16px; }
  .hero-actions{ margin-top:26px; }
  .hero-contact-block{ margin-top:30px; padding-top:24px; }
  .hero-contact{ gap:14px 28px; }
  .hero-contact li{ flex-direction:column; align-items:flex-start; gap:2px; }
  .hero-contact a{ padding-block:5px; }      /* easier to tap */
  .hero-contact a, .hero-contact span:not(.hc-label){ word-break:break-word; }
  .footer-contact li{ flex-direction:column; align-items:flex-start; gap:5px; padding:14px 0; }
  .fc-label{ width:auto; }
  .footer-contact a{ padding-block:4px; }
  .footer-contact a, .footer-contact span:not(.fc-label){ font-size:16px; word-break:break-word; }
  /* gallery breathing room + comfortable taps */
  .g-item{ margin-bottom:20px; }
  .g-item figcaption{ padding:16px; }
  .hf-link{ padding-block:8px; }
}