/* ==========================================================================
   AR CARPENTRY & CONSTRUCTION — style.css
   Single-file stylesheet. No frameworks. Elementor-port friendly:
   every block is one of the page sections listed in README.md.
   ========================================================================== */

/* ---------- 1. Design tokens ---------- */
:root{
  --ink:        #17130C;   /* near-black walnut */
  --ink-2:      #1F1A10;   /* raised dark surface */
  --ink-3:      #2A2317;   /* dark hairline/border */
  --cream:      #F5EFE3;   /* paper */
  --paper:      #FBF7EE;   /* lighter paper */
  --text-dark:  #241D10;   /* body text on light */
  --muted-dark: #6B5F4B;   /* muted on light */
  --light:      #EDE6D6;   /* body text on dark */
  --muted-light:#A99B82;   /* muted on dark */
  --gold:       #C79A3E;   /* signature brass */
  --gold-2:     #E3BE6A;   /* gold highlight */
  --gold-deep:  #8F6A1E;
  --tape:       #EFD9A0;
  --radius:     10px;
  --radius-lg:  18px;
  --container:  1200px;
  --gutter:     clamp(20px, 5vw, 48px);
  --sec-pad:    clamp(72px, 10vw, 140px);
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Courier New", monospace;
  --shadow-card: 0 24px 48px -24px rgba(23,19,12,.28);
  --shadow-pop:  0 32px 64px -28px rgba(23,19,12,.45);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. Reset & base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0;
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  color:var(--text-dark);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; }
h1,h2,h3,h4{ margin:0; font-family:var(--font-display); font-weight:600; line-height:1.12; letter-spacing:-.01em; }
p{ margin:0; }
ul,ol,dl,dd{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--gold); color:var(--ink); }
:focus-visible{ outline:3px solid var(--gold-2); outline-offset:3px; border-radius:4px; }

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

[id]{ scroll-margin-top:150px; }        /* anchors clear the fixed header */
.no-js .reveal{ opacity:1; transform:none; } /* reveal hidden only when JS present */

.skip-link{
  position:fixed; top:-64px; left:16px; z-index:200;
  background:var(--gold); color:var(--ink); font-weight:700;
  padding:10px 18px; border-radius:8px; transition:top .2s var(--ease);
}
.skip-link:focus{ top:12px; }

.eyebrow{
  font-family:var(--font-mono);
  font-size:12.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-deep); margin-bottom:14px;
}
.section-head{ max-width:720px; margin-bottom:clamp(36px,5vw,64px); }
.section-head h2{ font-size:clamp(30px,4.4vw,52px); }
.section-head .sec-lede{ margin-top:16px; color:var(--muted-dark); font-size:clamp(16px,1.6vw,18.5px); }
.section--dark .eyebrow{ color:var(--gold-2); }
.section--dark .section-head .sec-lede{ color:var(--muted-light); }
.section--dark h2,.section--dark h3{ color:var(--cream); }

/* ---------- 3. Buttons ---------- */
.btn{
  --btn-py:15px;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:var(--btn-py) 26px; border-radius:999px;
  font-weight:700; font-size:15.5px; letter-spacing:.02em;
  border:1.5px solid transparent;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, color .25s, border-color .25s;
  will-change:transform;
}
.btn:active{ transform:translateY(1px) scale(.99); }
.btn--gold{
  background:linear-gradient(160deg,var(--gold-2),var(--gold) 55%,var(--gold-deep));
  color:#221A08;
  box-shadow:0 10px 28px -12px rgba(199,154,62,.65), inset 0 1px 0 rgba(255,255,255,.5);
}
.btn--gold:hover{ transform:translateY(-2px); box-shadow:0 16px 34px -12px rgba(199,154,62,.8), inset 0 1px 0 rgba(255,255,255,.5); }
.btn--ghost{ border-color:currentColor; color:var(--cream); background:transparent; }
.btn--ghost:hover{ background:rgba(199,154,62,.14); border-color:var(--gold); color:var(--gold-2); transform:translateY(-2px); }
.btn--ink{ background:var(--ink); color:var(--cream); }
.btn--ink:hover{ background:var(--ink-2); transform:translateY(-2px); box-shadow:var(--shadow-card); }
.btn--sm{ --btn-py:11px; font-size:14px; padding-inline:18px; }
.btn--lg{ --btn-py:18px; font-size:17px; padding-inline:32px; }
.btn--block{ width:100%; }

/* utilities */
.spacing-lg{ margin-top:clamp(64px, 10vw, 112px); }
.section-head--tight{ margin-bottom:18px; }

/* ---------- 4. Tape strip (signature) ---------- */
.tape{
  position:relative; height:44px; overflow:hidden;
  background:
    linear-gradient(rgba(23,19,12,.06), rgba(23,19,12,.06)),
    repeating-linear-gradient(to right, currentColor 0 1px, transparent 1px 13px) bottom left / 100% 9px no-repeat,
    repeating-linear-gradient(to right, currentColor 0 1.6px, transparent 0 65px) bottom left / 100% 17px no-repeat,
    var(--tape);
  color:var(--gold-deep);
  border-block:2px solid var(--ink);
}
.tape__labels{
  position:absolute; inset:0; display:flex; align-items:flex-start;
  font-family:var(--font-mono); font-size:10.5px; color:#5c4a1b;
  white-space:nowrap;
}
.tape__labels span{ flex:0 0 65px; padding-left:5px; transform:translateY(6px); }

/* Tape used as section divider: no border on ink bg */
.tape--divider{ border-block:none; }

/* ---------- 5. Header ---------- */
.site-header{ position:fixed; inset-inline:0; top:0; z-index:100; color:var(--cream); }
.topbar{ background:var(--ink); border-bottom:1px solid rgba(199,154,62,.18); font-size:12.5px; }
.topbar__inner{ display:flex; justify-content:space-between; gap:16px; padding-block:8px; }
.topbar__msg{ margin:0; color:var(--muted-light); letter-spacing:.04em; }
.topbar__phone{ color:var(--gold-2); font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; white-space:nowrap; }
.topbar__phone:hover{ text-decoration:underline; }
@media (max-width:760px){ .topbar__msg{ display:none; } .topbar__inner{ justify-content:flex-end; } }

.nav{ background:rgba(23,19,12,.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(199,154,62,.16); transition:background .3s var(--ease), box-shadow .3s var(--ease); }
.site-header.is-scrolled .nav{ background:rgba(23,19,12,.94); box-shadow:0 12px 32px -18px rgba(0,0,0,.8); }
.nav__inner{ display:flex; align-items:center; gap:clamp(14px,2.6vw,34px); min-height:78px; }

.brand{ display:flex; align-items:center; gap:12px; margin-right:auto; }
.brand__mark{ width:46px; height:46px; border-radius:50%; flex:0 0 auto; transition:transform .5s var(--ease); }
.brand:hover .brand__mark{ transform:rotate(14deg); }
.brand__text{ display:flex; flex-direction:column; line-height:1.05; }
.brand__name{ font-family:var(--font-display); font-weight:600; font-size:clamp(15px,1.5vw,18px); color:var(--cream); white-space:nowrap; }
.brand__name i{ font-style:normal; color:var(--gold); }
.brand__tag{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--muted-light); margin-top:4px; white-space:nowrap; }

.nav__links{ display:flex; flex-wrap:nowrap; gap:clamp(9px,1.25vw,18px); font-size:14px; font-weight:500; }
.nav__links a{ position:relative; padding:6px 1px; color:rgba(237,230,214,.85); transition:color .2s; white-space:nowrap; }
.nav__links a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; background:var(--gold); transition:right .28s var(--ease); }
.nav__links a:hover, .nav__links a.is-active{ color:var(--gold-2); }
.nav__links a:hover::after, .nav__links a.is-active::after{ right:0; }
.nav__actions{ display:flex; align-items:center; gap:10px; }
.nav__call span{ white-space:nowrap; }
@media (max-width:1320px){ .nav__links{ display:none; } }
@media (max-width:1180px){ .nav__call{ display:none; } }
@media (max-width:640px){ .nav__actions .btn--gold{ display:none; } }

.nav__burger{ display:none; width:46px; height:46px; border:1px solid rgba(199,154,62,.4); border-radius:10px; background:rgba(199,154,62,.08); padding:12px; }
.nav__burger span{ display:block; height:2px; border-radius:2px; background:var(--gold-2); margin:4px 0; transition:transform .3s var(--ease), opacity .25s; }
.nav__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
@media (max-width:1320px){ .nav__burger{ display:block; } }

.drawer{
  position:fixed; top:0; bottom:0; right:0; left:0; z-index:99;
  background:rgba(23,19,12,.97);
  display:flex; flex-direction:column; justify-content:center; gap:8px;
  padding:120px var(--gutter) 40px;
  transform:translateX(100%); opacity:0; visibility:hidden; pointer-events:none;
  transition:transform .45s var(--ease), opacity .3s var(--ease), visibility .45s;
}
.drawer:not([hidden]){ visibility:visible; }
.drawer[hidden]{ display:none; }
.drawer.is-open{ transform:translateX(0); opacity:1; pointer-events:auto; }
.drawer__links{ display:flex; flex-direction:column; }
.drawer__links a{
  font-family:var(--font-display); font-size:clamp(26px,7vw,34px); font-weight:600; color:var(--cream);
  padding:10px 0; border-bottom:1px solid rgba(199,154,62,.14);
  display:flex; justify-content:space-between; align-items:center;
}
.drawer__links a::after{ content:"→"; font-family:var(--font-body); color:var(--gold); font-size:22px; }
.drawer__links a:last-child{ border-bottom:none; color:var(--gold-2); }
.drawer__foot{ display:flex; gap:12px; margin-top:26px; }
.drawer__foot .btn{ flex:1; }

/* ---------- 6. Hero ---------- */
.hero{
  position:relative; min-height:clamp(640px,100svh,1040px);
  display:flex; align-items:center; overflow:hidden;
  background:var(--ink); color:var(--cream);
  padding-block:clamp(130px,20vh,180px) clamp(40px,8vh,90px);
}
.hero__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero__shade{
  position:absolute; inset:0;
  background:
    linear-gradient(to right, rgba(23,19,12,.93) 0%, rgba(23,19,12,.78) 42%, rgba(23,19,12,.35) 74%, rgba(23,19,12,.55) 100%),
    linear-gradient(to top, rgba(23,19,12,.96) 0%, transparent 34%);
}
.hero__blueprint{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(to right, transparent 0 79px, rgba(199,154,62,.09) 79px 80px),
    repeating-linear-gradient(to bottom, transparent 0 79px, rgba(199,154,62,.09) 79px 80px);
  mask-image:linear-gradient(to right, rgba(0,0,0,.8), transparent 68%);
  -webkit-mask-image:linear-gradient(to right, rgba(0,0,0,.8), transparent 68%);
}
.hero__content{ position:relative; z-index:2; max-width:820px; }
.hero .eyebrow{ color:var(--gold-2); }
.hero__title{ margin:0 0 22px; }
.hero__title span,.hero__title strong{ display:block; }
.hero__title-a{ font-size:clamp(25px,3.7vw,42px); font-weight:400; color:rgba(245,239,227,.92); }
.hero__title-b{
  font-family:var(--font-display); font-weight:900;
  font-size:clamp(44px,8.4vw,104px); line-height:.94; letter-spacing:.005em;
  color:transparent; -webkit-text-stroke:1.6px rgba(237,230,214,.85);
  background:linear-gradient(180deg, rgba(237,230,214,.12), rgba(237,230,214,.03));
  -webkit-background-clip:text; background-clip:text;
  transform:skewX(-2.5deg);
}
@supports not (-webkit-text-stroke: 1px black){ .hero__title-b{ color:var(--cream); } }
.hero__title-c{
  position:relative; display:inline-flex !important; align-items:center; gap:12px;
  font-family:var(--font-body); font-weight:700; text-transform:uppercase;
  letter-spacing:.34em; font-size:clamp(14px,1.9vw,21px); color:var(--ink);
  background:var(--gold-2); margin-top:8px; padding:8px 18px 8px 20px;
  clip-path:polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  width:auto;
}
.hero__title-c em{ font-style:normal; letter-spacing:.1em; font-weight:500; text-transform:lowercase !important; font-family:var(--font-display); font-size:1.15em; }
.hero__saw{ width:9px; height:9px; border-radius:50%; background:var(--ink); display:inline-block; }
.hero__title-d{ font-size:clamp(25px,3.7vw,42px); font-weight:400; margin-top:10px; color:rgba(245,239,227,.92); }
.hero__sub{ max-width:560px; font-size:clamp(16px,1.8vw,19px); color:rgba(237,230,214,.86); margin-bottom:30px; }
.hero__ctas{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:clamp(36px,6vh,58px); }
.hero__facts{
  display:grid; grid-template-columns:repeat(4,auto); justify-content:start; gap:clamp(20px,4.5vw,56px);
  border-top:1px solid rgba(199,154,62,.25); padding-top:22px; max-width:660px;
}
.hero__facts dt{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted-light); margin-bottom:4px; }
.hero__facts dd{ font-family:var(--font-display); font-size:clamp(20px,2.4vw,27px); font-weight:600; color:var(--gold-2); }
@media (max-width:680px){ .hero__facts{ grid-template-columns:repeat(2,auto); row-gap:18px; } }
.hero__scroll{
  position:absolute; left:50%; bottom:22px; z-index:2; transform:translateX(-50%);
  width:26px; height:44px; border:1.5px solid rgba(199,154,62,.55); border-radius:999px;
}
.hero__scroll span{ position:absolute; left:50%; top:8px; width:4px; height:9px; margin-left:-2px; border-radius:4px; background:var(--gold-2); animation:drop 1.9s var(--ease) infinite; }
@keyframes drop{ 0%{ transform:translateY(0); opacity:1;} 70%{ transform:translateY(16px); opacity:0;} 100%{ opacity:0; } }
@media (max-height:760px){ .hero__scroll{ display:none; } }

/* Signature rotating blade badge */
.hero__badge{
  position:absolute; right:clamp(24px,5vw,72px); bottom:clamp(90px,16vh,140px); z-index:3;
  filter:drop-shadow(0 22px 34px rgba(0,0,0,.55));
  animation:badge-float 7s ease-in-out infinite;
}
.hero__badge svg{ overflow:visible; }
.hero__badge-txt{ transform-origin:120px 120px; animation:badge-spin 26s linear infinite; }
@keyframes badge-spin{ to{ transform:rotate(360deg); } }
@keyframes badge-float{ 0%,100%{ transform:translateY(0) rotate(2deg);} 50%{ transform:translateY(-12px) rotate(2deg);} }
@media (prefers-reduced-motion: reduce){ .hero__badge{ animation:none; } .hero__badge-txt{ animation:none; } }
@media (max-width:1240px){ .hero__badge{ display:none; } }

/* ---------- 7. Ticker ---------- */
.ticker{ background:var(--gold-2); color:var(--ink); overflow:hidden; border-block:2px solid var(--ink); }
.ticker__track{ display:flex; width:max-content; animation:ticker 46s linear infinite; }
.ticker:hover .ticker__track{ animation-play-state:paused; }
.ticker__row{ display:flex; align-items:center; gap:0; white-space:nowrap; padding-block:11px; }
.ticker__row span{ font-family:var(--font-mono); font-size:13px; letter-spacing:.08em; text-transform:uppercase; font-weight:500; padding-inline:18px; }
.ticker__row i{ font-style:normal; font-size:10px; opacity:.65; }
@keyframes ticker{ to{ transform:translateX(-50%); } }

/* ---------- 8. Generic sections ---------- */
.section{ padding-block:var(--sec-pad); position:relative; }
.section--dark{ background:var(--ink); color:var(--light); }
.section--dark p{ color:var(--muted-light); }
.section--paper{ background:var(--paper); }
.section--cream{ background:var(--cream); }

/* ---------- 9. Services ---------- */
.services__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(272px,100%),1fr)); gap:18px; counter-reset:svc; }
.svc{
  position:relative; background:#fff; border:1px solid rgba(23,19,12,.1); border-radius:var(--radius);
  padding:30px 26px 26px; overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.svc::before{
  counter-increment:svc; content:"0" counter(svc);
  position:absolute; top:18px; right:20px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; color:rgba(35,29,16,.35);
}
.svc:hover{ transform:translateY(-6px); box-shadow:var(--shadow-card); border-color:rgba(199,154,62,.55); }
.svc::after{ content:""; position:absolute; inset-inline:0; bottom:0; height:3px; background:linear-gradient(90deg,var(--gold-2),var(--gold-deep)); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); }
.svc:hover::after{ transform:scaleX(1); }
.svc__icon{
  width:52px; height:52px; border-radius:12px; display:grid; place-items:center; margin-bottom:20px;
  background:linear-gradient(150deg, rgba(199,154,62,.16), rgba(199,154,62,.32));
  color:var(--gold-deep); border:1px solid rgba(199,154,62,.35);
  transition:transform .35s var(--ease);
}
.svc:hover .svc__icon{ transform:rotate(-6deg) scale(1.06); }
.svc h3{ font-size:20.5px; margin-bottom:9px; }
.svc p{ font-size:15px; color:var(--muted-dark); line-height:1.6; }
.svc--alt{ display:flex; flex-direction:column; justify-content:space-between; gap:22px;
  background:var(--ink); border-color:var(--ink); color:var(--cream); }
.svc--alt h3{ color:var(--cream); }
.svc--alt p{ color:var(--muted-light); }
.svc--alt::before{ color:rgba(199,154,62,.65); }
.svc--alt .svc__link{ font-family:var(--font-mono); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-2); display:inline-flex; gap:8px; align-items:center; }
.svc--alt .svc__link::after{ content:"→"; transition:transform .25s var(--ease); }
.svc--alt:hover .svc__link::after{ transform:translateX(5px); }

/* ---------- 10. Projects ---------- */
.projects__grid{ display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:118px; gap:18px; }
.project{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  background:var(--ink-2); border:1px solid rgba(199,154,62,.18);
  display:block; width:100%; padding:0; text-align:left; color:inherit;
  grid-column:span 4; grid-row:span 4;
}
.project img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.project::after{ content:""; position:absolute; inset:0; background:linear-gradient(200deg, transparent 40%, rgba(23,19,12,.88)); opacity:.9; }
.project__body{
  position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:flex-end;
  padding:22px; gap:4px; transition:transform .5s var(--ease);
}
.project__eyebrow{ font-family:var(--font-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-2); }
.project h3{ font-size:clamp(19px,1.8vw,24px); color:var(--cream); }
.project p{ font-size:14px; color:var(--muted-light); max-width:46ch; }
.project__zoom{ position:absolute; top:18px; right:18px; width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center; background:rgba(23,19,12,.55); border:1px solid rgba(199,154,62,.5); color:var(--gold-2);
  opacity:0; transform:scale(.7); transition:opacity .3s, transform .3s var(--ease); z-index:3; }
.project:hover img, .project:focus-visible img{ transform:scale(1.06); }
.project:hover .project__zoom, .project:focus-visible .project__zoom{ opacity:1; transform:scale(1); }
.project--ig{ background:var(--ink-2); border-style:dashed; }
.project--ig .project__body{ justify-content:center; align-items:center; text-align:center; gap:12px; }
@media (max-width:760px){
  .projects__grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:108px; gap:12px; }
  .project{ grid-column:span 1; grid-row:span 4; }
}
@media (max-width:480px){
  .projects__grid{ grid-template-columns:1fr; grid-auto-rows:auto; }
  .project{ grid-column:1/-1; grid-row:auto; min-height:280px; }
}

/* Lightbox */
.lightbox{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:24px;
  background:rgba(15,12,7,.92); opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s; }
.lightbox[hidden]{ display:none; }
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox__fig{ margin:0; max-width:min(1060px, 94vw); position:relative; }
.lightbox__fig img{ max-height:78vh; width:auto; max-width:100%; border-radius:var(--radius-lg); box-shadow:var(--shadow-pop); margin-inline:auto; }
.lightbox__cap{ display:flex; flex-wrap:wrap; gap:4px 16px; align-items:baseline; margin-top:14px; color:var(--light); }
.lightbox__cap .project__eyebrow{ margin-right:auto; }
.lightbox__nav{ position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; border-radius:50%;
  border:1px solid rgba(199,154,62,.5); background:rgba(23,19,12,.6); color:var(--gold-2); font-size:0; display:grid; place-items:center; }
.lightbox__nav::after{ content:""; width:12px; height:12px; border-left:2.4px solid var(--gold-2); border-bottom:2.4px solid var(--gold-2); }
.lightbox__prev{ left:-10px; } .lightbox__prev::after{ transform:rotate(45deg); }
.lightbox__next{ right:-10px; } .lightbox__next::after{ transform:rotate(-135deg); }
.lightbox__close{ position:absolute; top:-52px; right:0; width:42px; height:42px; border-radius:50%; border:1px solid rgba(199,154,62,.5);
  background:rgba(23,19,12,.6); color:var(--gold-2); font-size:20px; line-height:1; }
@media (max-width:640px){ .lightbox__nav{ display:none; } .lightbox__close{ top:8px; right:8px; } }
body.nav-locked{ overflow:hidden; }

/* ---------- 11. Process (measured as a taped ruler) ---------- */
.process__steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); gap:clamp(16px,2.6vw,26px); counter-reset:step; }
.step{
  position:relative; background:#fff; border:1px solid rgba(23,19,12,.1); border-radius:var(--radius);
  padding:26px 24px 28px; transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.step:hover{ transform:translateY(-6px); box-shadow:var(--shadow-card); border-color:rgba(199,154,62,.55); }
.step::before{ /* shop-drawing style corner tab */
  counter-increment:step; content:"STEP 0" counter(step);
  position:absolute; top:0; right:0;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; color:#7d6b3f;
  background:var(--tape); border-inline-start:1px solid rgba(23,19,12,.15); border-block-end:1px solid rgba(23,19,12,.15);
  border-start-end-radius:8px; padding:4px 10px 4px 12px;
}
.step__num{
  display:block; font-family:var(--font-display); font-weight:900; font-size:46px; line-height:1;
  color:transparent; -webkit-text-stroke:1.3px rgba(36,29,16,.4); margin-bottom:14px;
}
.step h3{ font-size:20px; margin-bottom:8px; color:var(--text-dark); }
.step p{ font-size:15px; color:var(--muted-dark); }

/* ---------- 12. About / split layouts ---------- */
.split{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,5vw,64px); align-items:center; }
@media (max-width:960px){ .split{ grid-template-columns:1fr; } }
.about__imgwrap{ position:relative; }
.about__imgwrap img{ width:100%; border-radius:var(--radius-lg); box-shadow:var(--shadow-pop); }
.about__imgframe{
  position:absolute; inset:18px -18px -18px 18px; border:1.5px solid rgba(199,154,62,.6); border-radius:var(--radius-lg); z-index:-1;
}
.section--dark .about__imgframe{ border-color:rgba(199,154,62,.5); }
.badge--years{
  position:absolute; width:118px; height:118px; border-radius:120px; background:var(--gold); color:var(--ink);
  padding:8px; z-index:2; box-shadow:var(--shadow-pop);
  filter:drop-shadow(0 0 0 var(--ink));
}
.about__imgwrap .badge--years{ left:26px; bottom:-32px; }
.badge--years{ animation:badge-in .9s .15s var(--ease) backwards; }
@keyframes badge-in{ from{ transform:scale(.5) rotate(-14deg); opacity:0; } }
.badge--years svg{ width:100%; height:100%; display:block; }
.badge--text{ display:block; margin-top:-54px; margin-left:auto; margin-right:auto; width:max-content; padding-top:16px;
  font-family:var(--font-display); font-weight:900; line-height:1; text-align:center; }
.about__content p{ margin-bottom:16px; color:var(--muted-dark); }
.about__content h3{ margin:30px 0 12px; font-size:19px; }
.values-list li{ display:flex; gap:14px; align-items:flex-start; padding:12px 0; border-bottom:1px dashed rgba(36,29,16,.2); }
.values-list li:last-child{ border-bottom:none; }
.values-list svg{ flex:0 0 24px; color:var(--gold-deep); margin-top:2px; }
.values-list strong{ display:block; font-weight:700; }
.values-list span{ font-size:14.5px; color:var(--muted-dark); display:block; }
.about__sign{ display:flex; align-items:center; gap:18px; margin-top:30px; }
.about__sign img{ width:56px; height:56px; border-radius:50%; object-fit:cover; border:2px solid var(--gold); }
.about__sign p{ margin:0; font-size:14px; color:var(--muted-dark); }
.about__sign strong{ display:block; font-family:var(--font-display); font-size:19px; color:var(--text-dark); }

/* ---------- 13. Big CTA band ---------- */
.cta-band{ background:linear-gradient(120deg,var(--gold-2),var(--gold) 60%,var(--gold-deep)); color:#221A08; padding-block:clamp(46px,7vw,80px); }
.cta-band .split{ align-items:center; }
.cta-band h2{ font-size:clamp(26px,3.6vw,44px); margin-bottom:10px; }
.cta-band p{ font-size:clamp(15px,1.6vw,18px); color:rgba(34,26,8,.85); }
.cta-band__actions{ display:flex; flex-wrap:wrap; gap:12px; }
.cta-band .section--dark, .cta-band .section--light{ background:transparent; color:rgba(34,26,8,.92); }
.cta-band__facts{ display:flex; gap:24px; margin-top:18px; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; opacity:.8; flex-wrap:wrap; }
.cta-band__facts li::before{ content:"✓ "; }
@media (max-width:900px){ .section--light.section__shade h2,.section--light.section__shade p{ text-shadow:none; } }

/* ---------- 14. Reviews ---------- */
.reviews__note{ font-size:13.5px; margin-bottom:34px; display:flex; align-items:center; gap:8px; color:var(--muted-light); }
.reviews__note svg{ color:var(--gold); }
.rev-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:34px; }
@media (max-width:920px){ .rev-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .rev-grid{ grid-template-columns:1fr; } }
.revcard{ background:var(--ink-2); border:1px solid rgba(199,154,62,.22); border-radius:var(--radius); padding:22px; position:relative; transition:transform .3s var(--ease), border-color .3s; }
.revcard:hover{ transform:translateY(-5px); border-color:rgba(199,154,62,.6); }
.revcard::before{ content:"“"; font-family:var(--font-display); font-size:64px; line-height:0; position:absolute; top:28px; right:20px; color:rgba(199,154,62,.3); }
.stars{ color:var(--gold-2); font-size:15px; letter-spacing:2px; margin-bottom:12px; }
.revcard p{ font-size:14.8px; color:var(--light); font-style:italic; margin-bottom:14px; }
.revcard footer{ font-size:12.5px; color:var(--muted-light); border-top:1px solid rgba(199,154,62,.16); padding-top:12px; font-family:var(--font-mono); letter-spacing:.04em; }
.reviews__foot{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between; }
.reviews__foot p{ font-size:14px; color:var(--muted-light); }
.socials{ display:flex; gap:10px; }
.socialbtn{ display:inline-flex; align-items:center; gap:9px; padding:10px 16px; border-radius:999px; border:1px solid rgba(199,154,62,.4); color:var(--cream); font-size:14px; font-weight:600; transition:background .25s, color .25s, transform .25s var(--ease); }
.socialbtn:hover{ background:var(--gold-2); color:var(--ink); transform:translateY(-2px); border-color:var(--gold-2); }

/* ---------- 15. Areas + FAQ (split) ---------- */
.areas__panel{ display:flex; flex-direction:column; }
.chipgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:9px; margin-top:8px; }
.chip{ display:flex; align-items:center; gap:10px; font-size:14.5px; padding:10px 14px; border:1px solid rgba(23,19,12,.14); border-radius:999px; background:#fff; transition:border-color .25s, transform .25s var(--ease); }
.chip:hover{ border-color:var(--gold); transform:translateX(3px); }
.chip svg{ color:var(--gold-deep); flex:0 0 auto; }
.areas__note{ margin-top:16px; font-size:13.5px; color:var(--muted-dark); font-style:italic; }
.areas__list{ grid-column:1/-1; }
@media (min-width:960px){ .areas__split{ grid-template-columns:.9fr 1.1fr; } }

.faq__list details{ border:1px solid rgba(23,19,12,.14); background:#fff; border-radius:10px; margin-bottom:10px; overflow:hidden; transition:border-color .25s; }
.faq__list details[open]{ border-color:var(--gold); }
.faq__list summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:18px; align-items:center;
  padding:16px 20px; font-weight:600; font-size:16px; }
.faq__list summary::-webkit-details-marker{ display:none; }
.faq__mark{ width:26px; height:26px; border-radius:50%; border:1px solid rgba(36,29,16,.32); flex:0 0 26px; position:relative; transition:transform .3s var(--ease), background .25s, border-color .25s; }
.faq__mark::before,.faq__mark::after{ content:""; position:absolute; inset:50% 6px auto; height:1.6px; background:currentColor; transform:translateY(-50%); transition:opacity .25s; }
.faq__mark::after{ transform:translateY(-50%) rotate(90deg); }
details[open] .faq__mark{ background:var(--gold); border-color:var(--gold); transform:rotate(45deg); }
.faq__list p{ padding:0 20px 18px; color:var(--muted-dark); font-size:15px; }

/* ---------- 16. Quote form ---------- */
.quote__grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(28px,4vw,54px); align-items:flex-start; }
@media (max-width:960px){ .quote__grid{ grid-template-columns:1fr; } }
.contact-list{ margin-top:26px; display:flex; flex-direction:column; gap:2px; }
.contact-row{ display:flex; gap:16px; align-items:center; padding:14px 0; border-bottom:1px dashed rgba(199,154,62,.3); color:inherit; }
.contact-row:last-child{ border-bottom:none; }
.contact-row:hover .contact-row__val{ color:var(--gold-2); }
.ico{ width:44px; height:44px; flex:0 0 44px; border-radius:12px; display:grid; place-items:center; background:rgba(199,154,62,.12); border:1px solid rgba(199,154,62,.34); color:var(--gold-2); }
.ico--wa{ background:rgba(18,140,126,.14); border-color:rgba(37,211,102,.34); color:#5fe0a8; }
.ico--ig{ background:rgba(225,48,108,.13); border-color:rgba(225,48,108,.35); color:#F77FA0; }
.ico--fb{ background:rgba(24,119,242,.13); border-color:rgba(24,119,242,.35); color:#7FB0F7; }
.contact-row__label{ font-size:13px; color:var(--muted-light); }
.contact-row__val{ font-weight:700; font-size:16px; color:var(--cream); transition:color .2s; }

.quote-form{ background:var(--paper); color:var(--text-dark); border-radius:20px; padding:clamp(22px,4vw,38px); box-shadow:var(--shadow-pop); }
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:13.5px; font-weight:700; margin-bottom:6px; letter-spacing:.01em; }
.field label .req{ color:var(--gold-deep); }
.field input,.field select,.field textarea{
  width:100%; font:inherit; font-size:15.5px; color:var(--text-dark);
  background:#fff; border:1.5px solid rgba(23,19,12,.18); border-radius:10px; padding:13px 15px;
  transition:border-color .2s, box-shadow .2s;
}
.field textarea{ resize:vertical; min-height:110px; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 4px rgba(199,154,62,.16); }
.field.invalid input,.field.invalid textarea,.field.invalid select{ border-color:#B4451F; box-shadow:0 0 0 4px rgba(180,69,31,.12); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:540px){ .field-row{ grid-template-columns:1fr; } }
.shake{ animation:shake .4s; }
@keyframes shake{ 0%,100%{transform:none;} 20%{transform:translateX(-6px);} 40%{transform:translateX(6px);} 60%{transform:translateX(-4px);} 80%{transform:translateX(4px);} }
.form-note{ font-size:12.5px; color:var(--muted-dark); margin-top:12px; }
.alt-contact{ margin-top:18px; padding-top:16px; border-top:1px dashed rgba(23,19,12,.2); font-size:14.5px; }
.alt-contact a{ font-weight:700; color:var(--gold-deep); text-decoration:underline; text-underline-offset:3px; }

/* ---------- 17. Footer ---------- */
.site-footer{ background:#0F0C07; color:var(--muted-light); }
.footer__cols{ display:grid; grid-template-columns:1.35fr 1fr 1fr 1.2fr; gap:clamp(26px,4vw,50px); padding-block:clamp(46px,7vw,76px); }
@media (max-width:980px){ .footer__cols{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .footer__cols{ grid-template-columns:1fr; } }
.footer__brand{ display:flex; gap:14px; align-items:center; }
.footer__brand img{ width:56px; height:56px; border-radius:50%; }
.footer__brand b{ font-family:var(--font-display); font-size:19px; color:var(--cream); display:block; }
.footer__brand span{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.26em; text-transform:uppercase; }
.site-footer h4{ font-family:var(--font-mono); font-size:11.5px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-2); margin:0 0 18px; }
.site-footer nav a, .site-footer p a{ display:inline-block; padding:4px 0; font-size:14.5px; color:var(--muted-light); transition:color .2s, transform .2s var(--ease); }
.site-footer nav a:hover, .site-footer p a:hover{ color:var(--gold-2); transform:translateX(3px); }
.footer__tagline{ font-size:14px; line-height:1.7; margin-top:16px; }
.footer__meta{ border-top:1px solid rgba(199,154,62,.16); padding-block:22px; display:flex; flex-wrap:wrap; gap:10px 26px; align-items:center; font-size:13px; }
.footer__meta .sep{ opacity:.5; }
.footer__top{ margin-left:auto; display:inline-flex; align-items:center; gap:8px; color:var(--gold-2); font-family:var(--font-mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; }
.footer__top:hover span{ transform:translateY(-3px); }
.footer__top span{ display:inline-block; transition:transform .25s var(--ease); }

/* ---------- 18. Mobile call bar ---------- */
.mobilebar{
  position:fixed; inset-inline:0; bottom:0; z-index:90; display:none; gap:10px; padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(23,19,12,.92); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-top:1px solid rgba(199,154,62,.3);
}
.mobilebar .btn{ flex:1; --btn-py:14px; font-size:15px; }
@media (max-width:880px){ .mobilebar{ display:flex; } body{ padding-bottom:84px; } }

/* ---------- 19. Reveal animations ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal--in{ opacity:1 !important; transform:none !important; }
.js-enabled .reveal{ will-change:opacity, transform; }
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .reveal{ opacity:1; transform:none; transition:none;
      animation: reveal-in linear both; animation-timeline: view(); animation-range: entry 0% entry 42%; }
    @keyframes reveal-in{ from{ opacity:0; transform:translateY(10%);} to{ opacity:1; transform:none; } }
  }
}
/* hero entrance */
@keyframes up-in{ from{ opacity:0; transform:translateY(34px); } to{ opacity:1; transform:none; } }
@keyframes in-left{ from{ opacity:0; transform:translateX(-60px);} to{ opacity:1; transform:none; } }
@keyframes in-right{ from{ opacity:0; transform:translateX(60px);} to{ opacity:1; transform:none; } }
@keyframes grow-x{ from{ opacity:0; transform:scaleX(0); } to{ opacity:1; transform:scaleX(1); } }
.hero__bg{ animation:hero-zoom 1.6s var(--ease) both; }
@keyframes hero-zoom{ from{ transform:scale(1.08);} to{ transform:none; } }
.hero__content > *{ animation:up-in .9s var(--ease) backwards; }
.hero__content > *:nth-child(1){ animation-delay:.05s; }
.hero__content > *:nth-child(2){ animation-delay:.12s; }
.hero__content > .hero__title .hero__title-a{ animation:in-left .8s .45s var(--ease) backwards; }
.hero__content > .hero__title .hero__title-b{ animation:grow-x .95s .62s var(--ease) backwards; transform-origin:left; }
.hero__content > .hero__title .hero__title-c{ animation:in-right .7s 1.05s var(--ease) backwards; }
.hero__content > .hero__title .hero__title-d{ animation:in-left .7s 1.2s var(--ease) backwards; }
.hero__content > *:nth-child(2){ animation-delay:.24s; }
.hero__content > *:nth-child(3){ animation-delay:.3s; }
.hero__content > *:nth-child(4){ animation-delay:.38s; }
.hero__content > *:nth-child(5){ animation-delay:.46s; }
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .reveal{ opacity:1; transform:none; }
  .ticker__track{ animation:none; }
}

/* ---------- 20. Print ---------- */
@media print{
  .site-header,.ticker,.mobilebar,.lightbox,.hero__scroll,.quote-form{ display:none !important; }
  body{ color:#000; background:#fff; }
}