:root{
  /* brand */
  --red:#be1e2d;
  --red-600:#a81829;
  --red-700:#8d1522;
  --red-050:#fdf2f3;
  --red-100:#f8dfe2;

  --charcoal:#404041;
  --ink:#231f20;

  /* neutrals */
  --n-900:#1a1718;
  --n-800:#2b2728;
  --n-700:#3f3b3c;
  --n-600:#5c5658;
  --n-500:#7d7679;
  --n-400:#a8a2a4;
  --n-300:#d6d2d3;
  --n-200:#e8e5e6;
  --n-100:#f2f0f0;
  --n-050:#f9f8f8;
  --white:#fff;

  /* semantic */
  --bg:var(--white);
  --bg-alt:var(--n-050);
  --text:var(--n-600);
  --heading:var(--ink);
  --line:var(--n-200);

  /* type */
  --font:'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-display:'Barlow Condensed', 'Inter', 'Segoe UI', system-ui, sans-serif;

  /* scale (fluid) */
  --fs-hero:clamp(2.25rem, 1.5rem + 2.9vw, 3.85rem);
  --fs-h2:clamp(1.85rem, 1.3rem + 2.2vw, 3rem);
  --fs-h3:clamp(1.08rem, 1rem + .3vw, 1.25rem);
  --fs-lede:clamp(1.02rem, .97rem + .3vw, 1.15rem);
  --fs-body:1rem;
  --fs-sm:.9rem;
  --fs-xs:.78rem;

  /* layout */
  --shell:1240px;
  --gutter:clamp(1.25rem, 4vw, 2.5rem);
  --sec-y:clamp(4.5rem, 9vw, 8rem);

  /* radii */
  --r-sm:8px;
  --r:12px;
  --r-lg:20px;
  --r-xl:28px;

  /* elevation */
  --sh-sm:0 1px 2px rgba(26,23,24,.05), 0 2px 8px rgba(26,23,24,.04);
  --sh:0 2px 4px rgba(26,23,24,.04), 0 12px 28px rgba(26,23,24,.07);
  --sh-lg:0 4px 8px rgba(26,23,24,.05), 0 24px 56px rgba(26,23,24,.12);
  --sh-red:0 6px 20px rgba(190,30,45,.28);

  /* motion */
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t:.28s var(--ease);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:96px;
}
body{
  margin:0;
  font-family:var(--font);
  font-size:var(--fs-body);
  line-height:1.7;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{display:block; max-width:100%}
button{font:inherit; color:inherit}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{margin:0 0 .5em; color:var(--heading); line-height:1.14; font-weight:700}
p{margin:0 0 1rem}
ul,ol{margin:0; padding:0; list-style:none}
dl,dd{margin:0}

.shell{width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gutter)}

/* ---------- Accessibility ---------- */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:300;
  background:var(--red); color:#fff; padding:.9rem 1.5rem;
  border-radius:0 0 var(--r-sm) 0; font-weight:600;
}
.skip-link:focus{left:0}
:focus-visible{outline:3px solid var(--red); outline-offset:3px; border-radius:4px}

/* ---------- Shared type ---------- */
.kicker{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--red); margin:0 0 1rem;
}
.kicker::before{
  content:''; width:26px; height:2px; background:var(--red); border-radius:2px;
}
.kicker--light{color:#ff8d98}
.kicker--light::before{background:#ff8d98}

.sechead{max-width:62ch; margin:0 auto clamp(2.75rem,5vw,4rem); text-align:center}
.sechead .kicker{justify-content:center}
.sechead__title{font-size:var(--fs-h2); letter-spacing:-.025em}
.sechead__lede{font-size:var(--fs-lede); color:var(--n-500); margin:0}

/* Placeholder value styling: obvious, but not ugly */
.tbc{
  display:inline-block; color:var(--n-400); font-style:italic;
  border-bottom:1px dashed var(--n-300); padding-bottom:1px;
}

/* ---------- Buttons ---------- */
.btn{
  --btn-py:.85rem; --btn-px:1.6rem;
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  gap:.55rem; padding:var(--btn-py) var(--btn-px);
  font-size:var(--fs-sm); font-weight:600; letter-spacing:.01em;
  border:1.5px solid transparent; border-radius:var(--r-sm);
  cursor:pointer; white-space:nowrap; overflow:hidden;
  transition:transform var(--t), background-color var(--t), border-color var(--t), color var(--t), box-shadow var(--t);
}
.btn--sm{--btn-py:.6rem; --btn-px:1.1rem; font-size:var(--fs-xs)}
.btn--lg{--btn-py:1.05rem; --btn-px:2rem; font-size:.97rem}
.btn--block{width:100%}
.btn__arrow{width:17px; height:17px; transition:transform var(--t)}
.btn:hover .btn__arrow{transform:translateX(4px)}

.btn--primary{background:var(--red); color:#fff; box-shadow:var(--sh-red)}
.btn--primary:hover{background:var(--red-600); transform:translateY(-2px); box-shadow:0 10px 28px rgba(190,30,45,.36)}
.btn--primary:active{transform:translateY(0)}

.btn--outline{border-color:var(--n-300); color:var(--ink); background:transparent}
.btn--outline:hover{border-color:var(--ink); background:var(--ink); color:#fff; transform:translateY(-2px)}

.btn--light{background:#fff; color:var(--red)}
.btn--light:hover{transform:translateY(-2px); box-shadow:var(--sh-lg)}

/* ---------- Header ---------- */
.header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid transparent;
  transition:border-color var(--t), box-shadow var(--t), background-color var(--t);
}
.header.is-stuck{border-bottom-color:var(--line); box-shadow:0 4px 24px rgba(26,23,24,.07)}
.header__inner{display:flex; align-items:center; justify-content:space-between; gap:1.5rem; min-height:80px}

.header__progress{
  position:absolute; left:0; bottom:-1px; height:2px; width:100%;
  background:var(--red); transform:scaleX(0); transform-origin:0 50%;
}

.brand{display:flex; align-items:center; gap:.75rem; flex-shrink:0}
.brand__mark{width:52px; height:auto; transition:transform var(--t)}
.brand:hover .brand__mark{transform:scale(1.06)}
.brand__text{display:flex; flex-direction:column; line-height:1.05}
.brand__name{
  font-family:var(--font-display); font-size:1.65rem; font-weight:700;
  letter-spacing:.06em; color:var(--charcoal);
}
.brand__sub{font-size:.62rem; font-weight:600; letter-spacing:.055em; color:var(--red); text-transform:uppercase}

.nav{display:flex; align-items:center; gap:.15rem}
.nav__link{
  position:relative; padding:.55rem .95rem; font-size:var(--fs-sm); font-weight:500;
  color:var(--n-700); border-radius:var(--r-sm); transition:color var(--t);
}
.nav__link::after{
  content:''; position:absolute; left:.95rem; right:.95rem; bottom:.3rem; height:2px;
  background:var(--red); border-radius:2px; transform:scaleX(0); transform-origin:0 50%;
  transition:transform var(--t);
}
.nav__link:hover{color:var(--red)}
.nav__link:hover::after,
.nav__link.is-active::after{transform:scaleX(1)}
.nav__link.is-active{color:var(--red); font-weight:600}
.nav__cta{margin-left:.65rem; color:#fff}
.nav__cta::after{display:none}

.burger{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:46px; height:46px; padding:0 11px;
  background:transparent; border:1px solid var(--line); border-radius:var(--r-sm);
  cursor:pointer;
}
.burger span{display:block; height:2px; background:var(--ink); border-radius:2px; transition:transform var(--t), opacity var(--t)}
.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; overflow:hidden; background:var(--n-050); isolation:isolate}
.hero__bg{position:absolute; inset:0; z-index:-1}
.hero__grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(64,64,65,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(64,64,65,.06) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 85% 70% at 50% 35%, #000 30%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 85% 70% at 50% 35%, #000 30%, transparent 78%);
}
.hero__glow{position:absolute; border-radius:50%; filter:blur(90px)}
.hero__glow--red{
  width:min(46vw,620px); aspect-ratio:1; top:-14%; right:-8%;
  background:radial-gradient(circle, rgba(190,30,45,.17), transparent 68%);
}
.hero__glow--dark{
  width:min(40vw,520px); aspect-ratio:1; bottom:-22%; left:-10%;
  background:radial-gradient(circle, rgba(64,64,65,.14), transparent 68%);
}

.hero__inner{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(2.5rem,5vw,4rem); align-items:center;
  padding-block:clamp(3rem,6.5vw,5.5rem);
}

.tagline{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:var(--fs-xs); font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--n-600); background:#fff; border:1px solid var(--line);
  padding:.5rem 1rem; border-radius:99px; margin:0 0 1.6rem; box-shadow:var(--sh-sm);
}
.tagline__dot{
  width:7px; height:7px; border-radius:50%; background:var(--red); flex-shrink:0;
  box-shadow:0 0 0 3px rgba(190,30,45,.16);
  animation:pulse 2.4s var(--ease) infinite;
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 3px rgba(190,30,45,.16)}
  50%{box-shadow:0 0 0 7px rgba(190,30,45,.03)}
}
.tagline__sep{color:var(--n-300)}

.hero__title{
  font-size:var(--fs-hero); font-weight:700; letter-spacing:-.035em;
  line-height:1.03; margin-bottom:1.35rem;
}
.hero__title-accent{
  color:var(--red);
  text-decoration:underline;
  text-decoration-color:rgba(190,30,45,.22);
  text-decoration-thickness:.09em;
  text-underline-offset:.13em;
}

.hero__lede{font-size:var(--fs-lede); color:var(--n-500); max-width:46ch; margin-bottom:2.25rem}
.hero__actions{display:flex; flex-wrap:wrap; gap:.85rem; margin-bottom:2.25rem}

.hero__motto{
  position:relative; margin:0; padding-left:1.1rem;
  font-family:var(--font-display); font-size:1.22rem; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase; color:var(--red);
}
.hero__motto::before{
  content:''; position:absolute; left:0; top:.15em; bottom:.15em;
  width:3px; background:var(--red); border-radius:2px;
}

/* hero panel */
.hero__panel{display:flex; flex-direction:column; gap:1rem}
.hero__card{
  display:grid; place-items:center; padding:clamp(1.75rem,3.5vw,3rem);
  background:#fff; border:1px solid var(--line); border-radius:var(--r-xl);
  box-shadow:var(--sh-lg);
}
.hero__logo{width:min(100%,340px)}

/* Hidden until real figures are supplied. Remove this rule (or set
   data-ready on the list) once the numbers are filled in. */
.hero__facts[data-pending]{display:none}
.hero__facts{display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem}
.hero__facts li{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:1rem .75rem; text-align:center; box-shadow:var(--sh-sm);
}
.hero__fact-value{
  display:block; font-family:var(--font-display); font-size:1.9rem; font-weight:700;
  line-height:1; color:var(--ink); letter-spacing:.01em;
}
.hero__fact-label{
  display:block; margin-top:.4rem; font-size:.68rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--n-500);
}

/* ---------- Credentials bar ---------- */
.credbar{background:var(--ink); color:rgba(255,255,255,.72); padding:1.4rem 0}
.credbar__inner{
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:.75rem clamp(1.25rem,3vw,2.75rem);
}
.credbar__intro{
  margin:0; font-size:var(--fs-xs); font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:#ff8d98;
}
.credbar__list{display:flex; flex-wrap:wrap; gap:.6rem clamp(1rem,2.5vw,2rem); justify-content:center}
.credbar__list li{
  position:relative; font-size:var(--fs-sm); font-weight:500;
  padding-left:1.4rem;
}
.credbar__list li::before{
  content:''; position:absolute; left:0; top:50%; width:14px; height:8px;
  margin-top:-5px; border-left:2px solid var(--red); border-bottom:2px solid var(--red);
  transform:rotate(-45deg);
}

/* ---------- Sections ---------- */
.section{padding-block:var(--sec-y)}
.section--alt{background:var(--bg-alt)}
.section--dark{background:var(--ink); color:rgba(255,255,255,.72)}
.section--dark h2,.section--dark h3{color:#fff}

.grid{display:grid; gap:clamp(1.1rem,2vw,1.6rem)}
.grid--services{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.grid--projects{grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.grid--shop{grid-template-columns:repeat(3,minmax(0,1fr))}

/* ---------- Service cards ---------- */
.svc{
  position:relative; display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg); padding:clamp(1.5rem,2.5vw,2rem);
  overflow:hidden;
  transition:transform var(--t), box-shadow var(--t), border-color var(--t);
}
.svc::after{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(160deg, rgba(190,30,45,.05), transparent 45%);
  opacity:0; transition:opacity var(--t);
}
.svc:hover{transform:translateY(-6px); box-shadow:var(--sh-lg); border-color:transparent}
.svc:hover::after{opacity:1}

.svc__top{display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:1.25rem}
.svc__icon{
  display:grid; place-items:center; width:54px; height:54px;
  background:var(--red-050); color:var(--red);
  border:1px solid var(--red-100); border-radius:14px;
  transition:background-color var(--t), color var(--t), transform var(--t);
}
.svc__icon svg{width:25px; height:25px}
.svc:hover .svc__icon{background:var(--red); border-color:var(--red); color:#fff; transform:scale(1.05)}
.svc__num{
  font-family:var(--font-display); font-size:1.5rem; font-weight:700;
  color:var(--n-200); letter-spacing:.04em; transition:color var(--t);
}
.svc:hover .svc__num{color:var(--red-100)}

.svc__title{font-size:var(--fs-h3); letter-spacing:-.015em; margin-bottom:.6rem}
.svc__text{font-size:var(--fs-sm); color:var(--n-500); margin-bottom:1.1rem}
.svc__list{
  margin-top:auto; border-top:1px solid var(--line);
  padding-top:1rem; display:grid; gap:.5rem;
}
.svc__list li{
  position:relative; padding-left:1.35rem; font-size:var(--fs-sm); color:var(--n-600);
}
.svc__list li::before{
  content:''; position:absolute; left:0; top:.62em; width:6px; height:6px;
  background:var(--red); border-radius:1px; transform:rotate(45deg);
}

/* ---------- Shop ---------- */
.shop-item{
  display:flex; flex-direction:column; min-height:100%;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(1.4rem,2.5vw,1.85rem);
  transition:transform var(--t), box-shadow var(--t), border-color var(--t);
}
.shop-item:hover{transform:translateY(-6px); border-color:var(--red-100); box-shadow:var(--sh-lg)}
.shop-item__image{height:clamp(210px,20vw,250px); display:grid; place-items:center; margin:calc(-1 * clamp(1.4rem,2.5vw,1.85rem)) calc(-1 * clamp(1.4rem,2.5vw,1.85rem)) 1.35rem; overflow:hidden; background:#fff; border-bottom:1px solid var(--line)}
.shop-item__image img{display:block; width:auto; max-width:100%; height:auto; max-height:100%; object-fit:contain; padding:.75rem}
.shop-item__image--logo{background:#fff}
.shop-item__image--logo img{width:auto; height:auto; max-width:70%; max-height:70%; padding:0; object-fit:contain}
.shop-item__image--photo{background:var(--n-100)}
.shop-item__image--photo img{padding:.5rem}
.shop-item__image--placeholder{background:linear-gradient(135deg,var(--n-100),var(--red-050)); color:var(--red); font-family:var(--font-display); font-size:1.2rem; letter-spacing:.04em; text-transform:uppercase; text-align:center; padding:1rem}
.shop-item__top{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.35rem}
.shop-item__icon{
  display:grid; place-items:center; width:50px; height:50px; flex-shrink:0;
  background:var(--red-050); color:var(--red); border:1px solid var(--red-100); border-radius:14px;
}
.shop-item__icon svg{width:24px; height:24px}
.shop-item__label{font-size:.68rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--red); text-align:right}
.shop-item__title{font-size:var(--fs-h3); letter-spacing:-.015em; margin-bottom:.55rem}
.shop-item__text{font-size:var(--fs-sm); color:var(--n-500); margin-bottom:1.4rem}
.shop-item__action{align-self:flex-start; margin-top:auto; padding:.7rem .9rem; font-size:var(--fs-xs)}
.shop-item__action span{font-size:1.1rem; line-height:1}

/* ---------- Why ---------- */
.why{
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(2.5rem,5vw,4.5rem); align-items:start;
}
.why__lede{font-size:var(--fs-lede); color:rgba(255,255,255,.62); margin-bottom:2rem}
.why__list{display:grid; gap:1rem}
.why__item{
  display:flex; gap:1.25rem; align-items:flex-start;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09);
  border-radius:var(--r-lg); padding:1.5rem;
  transition:background-color var(--t), transform var(--t), border-color var(--t);
}
.why__item:hover{
  background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.16);
  transform:translateX(6px);
}
.why__idx{
  flex-shrink:0; font-family:var(--font-display); font-size:1.5rem; font-weight:700;
  color:var(--red); letter-spacing:.04em; line-height:1.2;
}
.why__item h3{font-size:var(--fs-h3); margin-bottom:.35rem}
.why__item p{margin:0; font-size:var(--fs-sm); color:rgba(255,255,255,.6)}

/* ---------- Process flow ---------- */
.flow{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:clamp(1.25rem,2.5vw,2rem);
}
.flow__step{position:relative; padding-top:2.5rem}
.flow__step::before{
  content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--line);
}
.flow__step::after{
  content:''; position:absolute; top:-4px; left:0; width:10px; height:10px;
  background:var(--red); border-radius:50%;
  box-shadow:0 0 0 4px var(--bg), 0 0 0 6px rgba(190,30,45,.18);
}
.flow__num{
  display:block; font-family:var(--font-display); font-size:.95rem; font-weight:700;
  letter-spacing:.16em; color:var(--red); margin-bottom:.5rem;
}
.flow__step h3{font-size:var(--fs-h3); letter-spacing:-.015em; margin-bottom:.45rem}
.flow__step p{margin:0; font-size:var(--fs-sm); color:var(--n-500)}

/* ---------- Projects ---------- */
.proj{
  display:flex; flex-direction:column; background:#fff;
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  transition:transform var(--t), box-shadow var(--t);
}
.proj:hover{transform:translateY(-6px); box-shadow:var(--sh-lg)}
.proj__media{
  position:relative; aspect-ratio:16/10; display:grid; place-items:center;
  background:
    linear-gradient(135deg, var(--n-100) 0%, var(--n-050) 100%);
  border-bottom:1px solid var(--line);
  overflow:hidden;
  /* REPLACE with: background-image:url('assets/your-photo.jpg');
                   background-size:cover; background-position:center; */
}
.proj__media::before{ /* subtle blueprint texture behind the placeholder */
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(64,64,65,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(64,64,65,.05) 1px, transparent 1px);
  background-size:28px 28px;
}
.proj__ph{
  position:relative; display:inline-flex; flex-direction:column; align-items:center; gap:.5rem;
  font-size:var(--fs-xs); font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--n-400);
}
.proj__ph svg{width:30px; height:30px}
.proj img{width:100%; height:100%; object-fit:cover}

.proj__body{padding:1.5rem; display:flex; flex-direction:column; flex:1}
.chip{
  align-self:flex-start; font-size:.68rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--red); background:var(--red-050);
  border:1px solid var(--red-100); padding:.3rem .7rem; border-radius:99px;
  margin-bottom:.85rem;
}
.proj__title{font-size:var(--fs-h3); letter-spacing:-.015em; margin-bottom:.45rem}
.proj__text{font-size:var(--fs-sm); color:var(--n-500); margin-bottom:1.15rem}
.proj__meta{
  margin-top:auto; border-top:1px solid var(--line); padding-top:1rem;
  display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem;
}
.proj__meta dt{
  font-size:.64rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--n-400); margin-bottom:.15rem;
}
.proj__meta dd{font-size:var(--fs-sm); font-weight:600; color:var(--ink)}

/* ---------- About ---------- */
.about{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2.5rem,5vw,4.5rem); align-items:center;
}
.about__logo-wrap{
  display:grid; place-items:center; padding:clamp(2rem,4vw,3.25rem);
  background:var(--bg-alt); border:1px solid var(--line); border-radius:var(--r-xl);
}
.about__logo{width:min(100%,300px)}
.about__caption{
  margin:1rem 0 0; text-align:center;
  font-family:var(--font-display); font-size:1.1rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--red);
}
.about__copy p{color:var(--n-500)}
.about__points{display:grid; gap:.7rem; margin:1.75rem 0 2rem}
.about__points li{position:relative; padding-left:1.9rem; color:var(--n-600); font-size:var(--fs-sm)}
.about__points li::before{
  content:''; position:absolute; left:0; top:.35em; width:15px; height:8px;
  border-left:2.5px solid var(--red); border-bottom:2.5px solid var(--red);
  transform:rotate(-45deg);
}

/* ---------- CTA ---------- */
.cta{position:relative; background:var(--red); color:#fff; padding-block:clamp(3rem,6vw,4.5rem); overflow:hidden}
.cta::before{
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:52px 52px;
  mask-image:linear-gradient(105deg, #000, transparent 72%);
  -webkit-mask-image:linear-gradient(105deg, #000, transparent 72%);
}
.cta__inner{
  position:relative; display:flex; align-items:center; justify-content:space-between;
  gap:2rem; flex-wrap:wrap;
}
.cta h2{color:#fff; font-size:clamp(1.6rem,1.2rem + 1.6vw,2.35rem); letter-spacing:-.02em; margin-bottom:.4rem}
.cta p{margin:0; color:rgba(255,255,255,.88); font-size:var(--fs-lede)}

/* ---------- Contact ---------- */
.contact{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(2.5rem,5vw,4.5rem); align-items:start;
}
.contact__lede{font-size:var(--fs-lede); color:var(--n-500)}
.contact__list{display:grid; gap:1.1rem; margin-top:2rem}
.contact__list li{
  display:flex; gap:1rem; align-items:center;
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:1rem 1.15rem; transition:border-color var(--t), box-shadow var(--t);
}
.contact__list li:hover{border-color:var(--red-100); box-shadow:var(--sh-sm)}
.contact__icon{
  flex-shrink:0; display:grid; place-items:center; width:46px; height:46px;
  background:var(--red-050); color:var(--red);
  border:1px solid var(--red-100); border-radius:12px;
}
.contact__icon svg{width:21px; height:21px}
.contact__body{display:flex; flex-direction:column; min-width:0}
.contact__body strong{font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--n-400)}
.contact__body a{
  font-size:var(--fs-sm); font-weight:600; color:var(--ink);
  transition:color var(--t);
  /* Long addresses must wrap rather than widen the card. Prefer breaking
     at the wrap opportunity marked in the markup (before the @), and only
     fall back to breaking mid-word if there is genuinely no room. */
  overflow-wrap:break-word; line-height:1.45;
}
.contact__body a:hover{color:var(--red)}
/* breathing room when several addresses are stacked */
.contact__body a + a{margin-top:.2rem}
.contact__body .tbc{font-size:var(--fs-sm)}

/* ---------- Form ---------- */
.contact__formwrap{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-xl);
  padding:clamp(1.5rem,3vw,2.25rem); box-shadow:var(--sh);
}
.form__row{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.form__field{display:flex; flex-direction:column; margin-bottom:1.1rem}
.form__field label{
  font-size:var(--fs-xs); font-weight:600; letter-spacing:.04em;
  color:var(--ink); margin-bottom:.45rem; text-transform:uppercase;
}
.form__opt{font-weight:400; text-transform:none; letter-spacing:0; color:var(--n-400)}
.form input,.form select,.form textarea{
  width:100%; font-family:inherit; font-size:var(--fs-sm); color:var(--ink);
  padding:.85rem 1rem; background:var(--n-050);
  border:1.5px solid var(--line); border-radius:var(--r-sm);
  transition:border-color var(--t), box-shadow var(--t), background-color var(--t);
}
.form input::placeholder,.form textarea::placeholder{color:var(--n-400)}
.form input:focus,.form select:focus,.form textarea:focus{
  outline:none; background:#fff; border-color:var(--red);
  box-shadow:0 0 0 4px rgba(190,30,45,.11);
}
.form textarea{resize:vertical; min-height:130px}
.form__error{color:var(--red); font-size:var(--fs-xs); min-height:1.15em; margin-top:.3rem}
.form input.is-invalid,.form textarea.is-invalid{border-color:var(--red); background:var(--red-050)}
.form__note{margin:1rem 0 0; font-size:var(--fs-sm); text-align:center; min-height:1.3em}
.form__note.is-ok{color:#15803d; font-weight:500}
.form__note.is-err{color:var(--red); font-weight:500}

/* ---------- Footer ---------- */
.footer{background:var(--ink); color:rgba(255,255,255,.58); font-size:var(--fs-sm); padding-top:clamp(3rem,6vw,4.5rem)}
.footer__grid{
  display:grid; grid-template-columns:1.7fr 1fr 1fr 1.15fr;
  gap:clamp(1.75rem,3.5vw,3rem); padding-bottom:3rem;
}
.footer__logo-wrap{
  display:inline-grid; place-items:center; background:#fff;
  border-radius:var(--r); padding:14px 16px; margin-bottom:1.15rem;
}
.footer__logo{width:145px}
.footer__blurb{margin:0 0 .75rem; max-width:34ch}
.footer__motto{
  margin:0; font-family:var(--font-display); font-size:1.02rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--red);
}
.footer__col h4{
  color:#fff; font-size:var(--fs-xs); font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; margin-bottom:1.1rem;
}
.footer__col a,.footer__col span{
  display:block; padding:.32rem 0; color:rgba(255,255,255,.58);
  transition:color var(--t), transform var(--t);
  overflow-wrap:anywhere;
}
.footer__col a:hover{color:#fff; transform:translateX(4px)}
.footer__col .tbc{border-bottom-color:rgba(255,255,255,.2); color:rgba(255,255,255,.42)}

.footer__bottom{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.75rem;
  border-top:1px solid rgba(255,255,255,.1); padding-block:1.5rem;
  font-size:var(--fs-xs); color:rgba(255,255,255,.45);
}
.footer__bottom p{margin:0}

/* ---------- Floating action button ---------- */
.fab{
  position:fixed; right:16px; bottom:16px; z-index:90; display:none;
  align-items:center; gap:.5rem; padding:.85rem 1.3rem;
  background:var(--red); color:#fff; border-radius:99px;
  font-size:var(--fs-sm); font-weight:600; box-shadow:0 8px 26px rgba(190,30,45,.42);
}
.fab svg{width:18px; height:18px}

/* ---------- Scroll reveal ---------- */
[data-anim]{opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out)}
[data-anim].is-visible{opacity:1; transform:none}
[data-anim-delay="1"]{transition-delay:.09s}
[data-anim-delay="2"]{transition-delay:.18s}
[data-anim-delay="3"]{transition-delay:.27s}
[data-anim-delay="4"]{transition-delay:.36s}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .hero__inner,.why,.about,.contact{grid-template-columns:1fr}
  .grid--shop{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero__panel{order:-1; max-width:520px; margin-inline:auto; width:100%}
  .hero__lede{max-width:none}
  .about__media{max-width:460px; margin-inline:auto; width:100%}
  .footer__grid{grid-template-columns:1fr 1fr; gap:2rem}
}

/* On phones the message must come first: the logo panel drops below the
   headline and call to action rather than filling the opening screen. */
@media (max-width:760px){
  .hero__panel{order:0; max-width:none}
  .hero__card{padding:1.5rem}
  .hero__logo{width:min(100%,260px)}
}

@media (max-width:860px){
  .burger{display:flex}
  .nav{
    position:absolute; top:100%; left:0; right:0;
    display:none; flex-direction:column; align-items:stretch; gap:.1rem;
    background:#fff; border-bottom:1px solid var(--line);
    padding:.85rem var(--gutter) 1.35rem;
    box-shadow:0 16px 32px rgba(26,23,24,.14);
    max-height:calc(100vh - 80px); overflow-y:auto;
  }
  .nav.is-open{display:flex}
  .nav__link{padding:.9rem .75rem; font-size:1rem}
  .nav__link::after{display:none}
  .nav__cta{margin:.65rem 0 0; justify-content:center; padding:.95rem}
  .credbar__inner{flex-direction:column; gap:.85rem}
}

@media (max-width:640px){
  html{scroll-padding-top:84px}
  .grid--shop{grid-template-columns:1fr}
  .header__inner{min-height:72px}
  .hero__title br{display:none}
  .hero__actions .btn{flex:1 1 100%}
  .hero__facts{grid-template-columns:1fr; gap:.6rem}
  .hero__facts li{display:flex; align-items:baseline; justify-content:space-between; text-align:left; padding:.85rem 1.1rem}
  .hero__fact-value{font-size:1.55rem}
  .hero__fact-label{margin-top:0}
  .cta__inner{flex-direction:column; align-items:stretch}
  .cta .btn{width:100%}
  .form__row{grid-template-columns:1fr; gap:0}
  .proj__meta{grid-template-columns:1fr 1fr}
  .footer__grid{grid-template-columns:1fr}
  .footer__bottom{flex-direction:column; text-align:center}
  .fab{display:inline-flex}
  .section:last-of-type{padding-bottom:calc(var(--sec-y) + 48px)}
}

@media (max-width:420px){
  .brand__sub{display:none}
  .brand__name{font-size:1.45rem}
  .fab span{display:none}
  .fab{padding:1rem; border-radius:50%}
}

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

/* ---------- Print ---------- */
@media print{
  .header,.fab,.hero__actions,.contact__formwrap,.cta,.hero__bg{display:none !important}
  body{background:#fff; color:#000; font-size:11pt}
  .section{padding-block:1rem; break-inside:avoid}
  .svc,.proj,.why__item{border:1px solid #ccc; box-shadow:none; break-inside:avoid}
  .section--dark,.footer{background:#fff !important; color:#000 !important}
  .section--dark h2,.section--dark h3,.footer__col h4{color:#000 !important}
  [data-anim]{opacity:1 !important; transform:none !important}
}