/* =========================================================
   KRAJCA HOMES — brand + motion styles
   ========================================================= */
:root{
  color-scheme:light only;
  --paper:#fbf6ef;
  --paper-2:#f2e9d9;
  --paper-3:#ece0cc;
  --ink:#403728;
  --ink-2:#5c5140;
  --ink-soft:rgba(64,55,40,.62);
  --line:rgba(64,55,40,.14);
  --amber:#c1743a;
  /* Small uppercase labels need 4.5:1. The old #a85f2c only managed ~4.0:1 on
     the cream backgrounds; #8f4f22 gives 5.3–5.9:1 and still reads as amber. */
  --amber-deep:#8f4f22;
  /* Amber text on the dark ink sections — plain --amber is only 3.25:1 there. */
  --amber-on-dark:#e09a62;
  --moss:#5a6f4e;
  --stone:#b79b74;
  --radius:18px;
  --ease:cubic-bezier(.22,1,.36,1);
  --maxw:1240px;
  --pad:clamp(20px,5vw,80px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.lock{overflow:hidden;height:100vh}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:'Archivo',sans-serif;font-weight:800;line-height:1.02;letter-spacing:-.02em}
::selection{background:var(--amber);color:var(--paper)}

/* film grain overlay */
.grain{
  position:fixed;inset:-50%;z-index:9998;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(6) infinite;
}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-6%,4%)}40%{transform:translate(4%,-6%)}60%{transform:translate(-4%,-4%)}80%{transform:translate(6%,6%)}100%{transform:translate(0,0)}}

/* =============== PRELOADER =============== */
.loader{position:fixed;inset:0;z-index:10000;background:var(--ink);display:grid;place-items:center;color:var(--paper)}
.loader__inner{width:min(420px,74vw);text-align:center}
.loader__logo-wrap{clip-path:inset(0 100% 0 0);width:100%}
.loader__logo{width:100%;height:auto;display:block;transform:translateZ(0);backface-visibility:hidden}
.loader__bar{margin:26px auto 0;width:120px;height:2px;background:rgba(251,246,239,.2);overflow:hidden;border-radius:2px}
.loader__bar i{display:block;height:100%;width:0;background:var(--amber)}
body.loaded .loader{opacity:0;visibility:hidden;transition:opacity .6s var(--ease),visibility .6s}
/* last-resort fallback if JS never runs at all */
.loader{animation:loaderFailsafe .6s ease 7s forwards}
@keyframes loaderFailsafe{to{opacity:0;visibility:hidden;pointer-events:none}}

/* =============== BUTTONS =============== */
.btn{
  --bg:var(--ink);--fg:var(--paper);
  position:relative;display:inline-flex;align-items:center;gap:.5em;
  font-family:'Archivo';font-weight:700;font-size:.92rem;letter-spacing:.01em;
  padding:.85em 1.35em;border-radius:100px;border:1.5px solid var(--ink);
  cursor:pointer;overflow:hidden;isolation:isolate;
  transition:color .35s var(--ease),transform .35s var(--ease),border-color .35s;
  color:var(--fg);background:transparent;
}
.btn span,.btn svg{position:relative;z-index:2}
.btn svg{transition:transform .35s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;z-index:1;background:var(--bg);transform-origin:bottom;transform:scaleY(1);transition:transform .4s var(--ease)}
.btn--solid{color:var(--paper)}
.btn--solid::before{background:var(--ink)}
.btn--solid:hover{color:var(--ink)}
.btn--solid:hover::before{transform:scaleY(0)}
.btn--ghost{color:var(--ink)}
.btn--ghost::before{background:var(--ink);transform:scaleY(0)}
.btn--ghost:hover{color:var(--paper)}
.btn--ghost:hover::before{transform:scaleY(1)}
.btn:hover svg{transform:translateX(4px)}
.btn--nav{color:var(--paper);padding:.7em 1.15em;font-size:.85rem}
.btn--nav::before{background:var(--ink)}
.btn--nav:hover{color:var(--ink);transform:translateY(-1px)}
.btn--nav:hover::before{transform:scaleY(0)}
.btn--block{width:100%;justify-content:center;padding:1.05em}

/* =============== NAV =============== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:900;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--pad);
  transition:padding .4s var(--ease),background .4s,box-shadow .4s;
}
.nav.scrolled{
  padding:10px var(--pad);
  background:rgba(251,246,239,.82);
  backdrop-filter:blur(12px);
  box-shadow:0 1px 0 var(--line);
}
.nav__brand img{height:46px;width:auto;transition:height .4s var(--ease)}
.nav.scrolled .nav__brand img{height:36px}
.nav__links{display:flex;gap:30px}
.nav__links a{
  font-family:'Archivo';font-weight:600;font-size:.9rem;color:var(--ink-2);
  position:relative;padding:4px 0;transition:color .3s;
}
.nav__links a::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;background:var(--amber);transition:width .35s var(--ease)}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after{width:100%}
.nav__toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.nav__toggle span{width:24px;height:2px;background:var(--ink);border-radius:2px;transition:.3s var(--ease)}
.nav.open .nav__toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.open .nav__toggle span:nth-child(2){transform:translateY(-0px) rotate(-45deg)}

/* =============== HERO =============== */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:120px var(--pad) 60px;overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__blueprint{
  position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(120% 90% at 70% 20%,#000,transparent 75%);
  mask-image:radial-gradient(120% 90% at 70% 20%,#000,transparent 75%);
}
.hero__roof{position:absolute;top:14%;right:var(--pad);width:min(460px,42vw);height:auto;z-index:1;opacity:.16;clip-path:inset(0 100% 0 0)}
.hero__roof-img{width:100%;height:auto;display:block}
.hero__inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;width:100%}
.hero__eyebrow{
  font-family:'Archivo';font-weight:700;text-transform:uppercase;letter-spacing:.18em;
  font-size:.78rem;color:var(--amber-deep);margin-bottom:22px;
}
/* Capped by viewport height too: on a 1440x900 laptop the width-only size made
   the hero 966px tall and pushed "Start your project" below the fold. */
.hero__title{font-size:clamp(3rem,min(12vw,15vh),9.5rem);font-weight:900;letter-spacing:-.03em}
.hero__title .line{display:block;overflow:hidden}
.hero__title .w{display:inline-block;transform:translateY(110%)}
.hero__title .accent{color:var(--amber)}
.hero__sub{max-width:620px;margin:28px 0 0;font-size:clamp(1.02rem,2.1vw,1.28rem);color:var(--ink-2)}
.hero__cta{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap}
/* Right-hand side: on the left it sat directly under the CTA buttons and
   overlapped them by ~54px on shorter laptop screens. */
.hero__scroll{position:absolute;right:var(--pad);bottom:34px;z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;font-family:'Archivo';font-size:.7rem;text-transform:uppercase;letter-spacing:.2em;color:var(--ink-soft)}
.hero__scroll-line{width:1.5px;height:52px;background:var(--line);position:relative;overflow:hidden}
.hero__scroll-line i{position:absolute;top:-50%;left:0;width:100%;height:50%;background:var(--amber);animation:scrolldot 1.8s var(--ease) infinite}
@keyframes scrolldot{0%{top:-50%}100%{top:100%}}

/* reveal helper */
.reveal-up{opacity:0;transform:translateY(28px)}

/* =============== MARQUEE =============== */
.marquee{background:var(--ink);color:var(--paper);padding:26px 0;overflow:hidden;border-top:1px solid rgba(251,246,239,.08);border-bottom:1px solid rgba(251,246,239,.08)}
.marquee__track{display:flex;width:max-content;will-change:transform}
.marquee__set{display:flex;align-items:center;flex-shrink:0}
.marquee__set span{font-family:'Archivo';font-weight:800;font-size:clamp(1.4rem,4vw,2.6rem);text-transform:uppercase;letter-spacing:-.01em;padding:0 .5em;white-space:nowrap}
.marquee__set b{color:var(--amber);font-size:clamp(1rem,3vw,1.8rem)}

/* =============== MISSION =============== */
.mission{padding:clamp(90px,15vh,180px) var(--pad)}
/* Same width as every other section. At the old 1000px each statement line
   wrapped and stranded a single word ("someone", "work,") on its own line. */
.mission__inner{max-width:var(--maxw);margin:0 auto}
.mission__label{font-family:'Archivo';font-weight:700;text-transform:uppercase;letter-spacing:.18em;font-size:.78rem;color:var(--amber-deep);margin-bottom:30px}
.mission__text{font-size:clamp(1.8rem,5.6vw,4.4rem);font-weight:800;letter-spacing:-.025em;line-height:1.06;text-wrap:balance}
.mission__text .ml{display:block;overflow:hidden}
.mission__text .ml > *,.mission__text .ml{will-change:transform}
.mission__text em{font-style:normal;color:var(--amber)}
.mission__foot{max-width:640px;margin-top:34px;font-size:clamp(1rem,2vw,1.18rem);color:var(--ink-2)}
/* wrapper spans injected by JS for line reveal */
.mission__text .ml span.inner{display:block;transform:translateY(105%)}

/* =============== BUILD SCENE =============== */
.build{position:relative;min-height:360vh;background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.build__sticky{position:sticky;top:0;min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:80px var(--pad) 40px;overflow:hidden}
.build__head{text-align:center;margin-bottom:10px}
.build__label{font-family:'Archivo';font-weight:700;text-transform:uppercase;letter-spacing:.18em;font-size:.74rem;color:var(--amber-deep)}
.build__stage{font-size:clamp(1.6rem,4.5vw,3rem);font-weight:900;margin-top:6px;min-height:1.1em;letter-spacing:-.02em}
/* photo-sequence centerpiece — real jobsite stills, cross-faded on scrub */
/* scroll-scrubbed video centerpiece — canvas image sequence */
.scene--seq{position:relative;width:min(1100px,100%,calc(62vh * 1168 / 768));aspect-ratio:1168/768;border-radius:14px;overflow:hidden;box-shadow:0 24px 60px -24px rgba(64,55,40,.45);background:var(--ink)}
.scene--seq canvas{width:100%;height:100%;display:block}
.shot__tag{position:absolute;left:14px;bottom:12px;font-family:'Archivo';font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:var(--paper);background:rgba(64,55,40,.72);backdrop-filter:blur(4px);padding:7px 12px;border-radius:999px}
.build__hint{font-family:'Archivo';font-weight:600;font-size:.8rem;letter-spacing:.04em;color:var(--ink-soft);margin-top:8px;transition:opacity .4s}
.build__rail{width:min(680px,80%);height:3px;background:var(--line);border-radius:3px;margin-top:20px;overflow:hidden}
.build__rail-fill{height:100%;width:0;background:linear-gradient(90deg,var(--moss),var(--amber));border-radius:3px}
.build__steps{list-style:none;display:flex;gap:clamp(10px,3vw,42px);margin-top:16px;flex-wrap:wrap;justify-content:center}
.build__steps li{font-family:'Archivo';font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-soft);transition:color .3s,transform .3s}
.build__steps li.on{color:var(--ink);transform:translateY(-2px)}
.build__steps li.on::before{content:"● ";color:var(--amber);font-size:.7em}

/* =============== SECTION HEADINGS =============== */
.sec-label{font-family:'Archivo';font-weight:700;text-transform:uppercase;letter-spacing:.18em;font-size:.78rem;color:var(--amber-deep);margin-bottom:18px}
.sec-title{font-size:clamp(2rem,6vw,4.4rem);font-weight:900;letter-spacing:-.025em;line-height:1.02}
.sec-title .ml{display:block;overflow:hidden}
.sec-title .ml span.inner{display:block;transform:translateY(105%)}

/* =============== SERVICES =============== */
.services{padding:clamp(80px,12vh,150px) var(--pad)}
.services__head{max-width:var(--maxw);margin:0 auto 60px}
.services__grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{
  position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:34px 30px 30px;overflow:hidden;isolation:isolate;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s;
  --accent:var(--amber);
}
.card[data-accent="ink"]{--accent:var(--ink-2)}
.card[data-accent="moss"]{--accent:var(--moss)}
.card[data-accent="stone"]{--accent:var(--amber-deep)}
.card::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--accent);transform:translateY(101%);transition:transform .55s var(--ease)}
.card:hover{transform:translateY(-6px);box-shadow:0 26px 50px -22px rgba(64,55,40,.4);border-color:transparent;color:var(--paper)}
.card:hover::before{transform:translateY(0)}
.card:hover .card__tag{color:rgba(251,246,239,.75);border-color:rgba(251,246,239,.3)}
.card:hover .card__num{color:rgba(251,246,239,.35)}
.card__num{position:absolute;top:22px;right:26px;font-family:'Archivo';font-weight:900;font-size:1rem;color:var(--line);transition:color .5s}
.card__icon{width:58px;height:58px;color:var(--accent);margin-bottom:22px;transition:color .5s}
.card:hover .card__icon{color:var(--paper)}
.card__icon svg{width:100%;height:100%}
.card h3{font-size:1.4rem;font-weight:800;margin-bottom:12px;letter-spacing:-.01em}
.card p{font-size:.98rem;color:var(--ink-2);transition:color .5s}
.card:hover p{color:rgba(251,246,239,.9)}
.card__tag{display:inline-block;margin-top:20px;font-family:'Archivo';font-weight:600;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);border:1px solid var(--line);border-radius:100px;padding:.4em .9em;transition:.5s}
/* icon hover motions */
.card__icon .card__anim,.card__icon .tree,.card__icon .porch,.card__icon .brick,.card__icon .pk,.card__icon .roll{transition:transform .5s var(--ease),opacity .5s}
.card:hover .card__anim{transform:rotate(-12deg)}
.card:hover .card__icon .brick{transform:translateY(-2px)}
.card:hover .card__icon .brick:nth-of-type(3){transform:translateY(-4px)}
.card:hover .card__icon .brick:nth-of-type(4){transform:translateY(-6px)}
.card:hover .card__icon .pk{transform:translateY(-3px)}
.card:hover .card__icon .pk:nth-of-type(2){transform:translateY(-6px)}
.card:hover .card__icon .pk:nth-of-type(3){transform:translateY(-9px)}
.card:hover .card__icon .tree{transform:rotate(4deg);transform-origin:32px 44px}
.card:hover .card__icon .porch{transform:translateY(-2px)}

/* =============== BEFORE / AFTER =============== */
.ba{padding:clamp(80px,12vh,150px) var(--pad);background:var(--paper-2);border-top:1px solid var(--line)}
.ba__head{max-width:var(--maxw);margin:0 auto 44px}
.ba__stage{position:relative;max-width:1000px;margin:0 auto;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;box-shadow:0 30px 60px -30px rgba(64,55,40,.5);cursor:ew-resize;user-select:none;touch-action:none;-webkit-user-select:none}
.ba__img{position:absolute;inset:0;overflow:hidden}
.ba__svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.ba__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%;display:block}
.ba__after{z-index:1}
.ba__before{z-index:2;clip-path:inset(0 50% 0 0)}
/* each label is anchored to its own side, so it only ever appears in the
   half of the slider where that condition is actually visible */
.ba__badge{position:absolute;top:18px;left:18px;font-family:'Archivo';font-weight:800;font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;background:var(--paper);color:var(--ink);padding:.45em .9em;border-radius:100px;z-index:3}
.ba__after .ba__badge{left:auto;right:18px;background:var(--ink);color:var(--paper)}
/* Scrim under each caption so it stays legible over any photo — the "after"
   shot is bright, and dark ink text on it was nearly unreadable. */
.ba__img::after{content:"";position:absolute;left:0;right:0;bottom:0;height:40%;z-index:2;pointer-events:none;
  background:linear-gradient(to top,rgba(38,32,23,.78),rgba(38,32,23,.35) 45%,transparent)}
.ba__caption{position:absolute;bottom:0;z-index:3;padding:22px;font-family:'Archivo';font-weight:600;font-size:clamp(.8rem,1.6vw,1rem);white-space:nowrap;color:var(--paper);text-shadow:0 1px 3px rgba(0,0,0,.45)}
.ba__before .ba__caption{left:0}
.ba__after .ba__caption{right:0}
.ba__handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--paper);transform:translateX(-1px);z-index:4;pointer-events:none}
.ba__grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:var(--paper);color:var(--ink);display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.25)}

/* =============== PROCESS =============== */
.process{padding:clamp(80px,12vh,150px) var(--pad);background:var(--ink);color:var(--paper)}
.process__head{max-width:var(--maxw);margin:0 auto 60px}
.process .sec-label{color:var(--amber-on-dark)}
.process__list{max-width:var(--maxw);margin:0 auto;list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:rgba(251,246,239,.12);border:1px solid rgba(251,246,239,.12);border-radius:var(--radius);overflow:hidden}
.pstep{background:var(--ink);padding:38px 30px 44px;position:relative;transition:background .4s}
.pstep:hover{background:#4a4030}
.pstep__n{font-family:'Archivo';font-weight:900;font-size:2.6rem;color:var(--amber);display:block;margin-bottom:22px;line-height:1}
.pstep h3{font-size:1.3rem;margin-bottom:10px}
.pstep p{font-size:.96rem;color:rgba(251,246,239,.72)}

/* =============== CONTACT =============== */
.contact{padding:clamp(80px,12vh,150px) var(--pad);background:var(--paper-2);border-top:1px solid var(--line)}
.contact__grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,90px);align-items:start}
/* Grid/flex items default to min-width:auto, so the inputs' intrinsic size="20"
   width (~413px) was inflating the column past the viewport and giving the whole
   page a horizontal scrollbar on phones. Let them shrink. */
.contact__grid>*,.contact__form,.field{min-width:0}
input,select,textarea{min-width:0;width:100%;max-width:100%}
.contact__title{font-size:clamp(2.4rem,6vw,4.6rem);font-weight:900;letter-spacing:-.03em;margin:18px 0 22px;line-height:1}
.contact__title .accent{color:var(--amber)}
.contact__lede{font-size:1.1rem;color:var(--ink-2);max-width:440px}
.contact__meta{list-style:none;margin-top:40px;display:grid;gap:20px}
.contact__meta li{display:flex;flex-direction:column;gap:3px}
.contact__meta b{font-family:'Archivo';font-weight:700;font-size:.74rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-soft)}
.contact__meta a,.contact__meta span{font-family:'Archivo';font-weight:700;font-size:1.15rem;color:var(--ink)}
.contact__meta a:hover{color:var(--amber-deep)}
.contact__meta li:last-child span{font-size:.98rem;font-weight:600;line-height:1.4;color:var(--ink-2)}
.contact__form{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:34px;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:7px}
.field--full{grid-column:1/-1}
.contact__form button{grid-column:1/-1}
label{font-family:'Archivo';font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft)}
input,select,textarea{
  font-family:'Inter';font-size:1rem;color:var(--ink);background:var(--paper-2);
  border:1.5px solid var(--line);border-radius:12px;padding:.8em .9em;transition:border-color .3s,background .3s;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--amber);background:var(--paper)}
textarea{resize:vertical}
.contact__note{grid-column:1/-1;font-size:.92rem;font-weight:600;line-height:1.5;margin:0;padding:12px 14px;border-radius:10px}
.contact__note--ok{color:#3f5c35;background:rgba(90,111,78,.12);border:1px solid rgba(90,111,78,.3)}
.contact__note--err{color:#8c3b1e;background:rgba(193,116,58,.12);border:1px solid rgba(193,116,58,.35)}
/* honeypot — off-screen for people, still fillable by bots */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:#b4502a}
.field__hint{font-size:.82rem;color:var(--ink-2);margin:2px 0 0}
.field__hint button{font:inherit;font-weight:700;color:var(--amber-deep);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.field__hint--choice{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:12px;margin-top:6px;border-radius:10px;background:var(--paper-2);border:1px solid rgba(193,116,58,.35);color:var(--ink);font-weight:600}
.field__hint--choice button.choice{font:inherit;font-family:'Archivo';font-weight:700;font-size:.85rem;text-decoration:none;color:var(--ink);background:var(--paper);border:1.5px solid var(--line);border-radius:100px;padding:.55em 1em;cursor:pointer;text-align:left;word-break:break-all}
.field__hint--choice button.choice--primary{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.field__err{font-family:'Archivo';font-weight:600;font-size:.76rem;color:#8c3b1e;text-transform:none;letter-spacing:0}
button[disabled]{opacity:.65;cursor:progress}

/* =============== FOOTER =============== */
.footer{background:var(--ink);color:var(--paper);padding:70px var(--pad) 30px}
.footer__top{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;padding-bottom:44px;border-bottom:1px solid rgba(251,246,239,.14)}
.footer__brand img{height:42px;width:auto;margin-bottom:18px}
.footer__brand p{max-width:340px;color:rgba(251,246,239,.7);font-size:.98rem}
.footer__phone{display:block;margin-top:18px;font-family:'Archivo';font-weight:800;font-size:1.25rem;letter-spacing:.01em;color:var(--paper);transition:color .3s}
.footer__phone:hover{color:var(--amber)}
.footer__email{display:block;margin-top:6px;font-family:'Archivo';font-weight:600;font-size:.95rem;color:rgba(251,246,239,.72);transition:color .3s;word-break:break-word}
.footer__email:hover{color:var(--amber)}
.footer__col h4{font-family:'Archivo';font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;color:var(--amber-on-dark);margin-bottom:16px}
.footer__col a{display:block;color:rgba(251,246,239,.78);font-size:.95rem;padding:5px 0;transition:color .3s,padding-left .3s}
.footer__col a:hover{color:var(--paper);padding-left:6px}
.footer__base{max-width:var(--maxw);margin:26px auto 0;display:flex;justify-content:space-between;align-items:center;font-size:.85rem;color:rgba(251,246,239,.6)}
.footer__top-link{font-family:'Archivo';font-weight:600}
.footer__top-link:hover{color:var(--amber)}

.build__note{font-size:.72rem;color:var(--ink-soft);margin-top:10px;text-align:center}
.contact__trust{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.contact__trust li{font-family:'Archivo';font-weight:700;font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:100px;padding:.5em 1em}
.contact__trust li::before{content:"✓ ";color:var(--moss)}
/* =============== RESPONSIVE =============== */
/* Short laptop screens (e.g. 1280x720): tighten the hero so both CTA buttons
   land above the fold instead of ~50px below it. */
@media (max-height:780px) and (min-width:721px){
  .hero{padding-top:96px;padding-bottom:40px}
  .hero__title{font-size:clamp(3rem,min(12vw,13vh),9.5rem)}
  .hero__sub{margin-top:20px}
  .hero__cta{margin-top:24px}
}
@media (max-width:1000px){
  .services__grid{grid-template-columns:repeat(2,1fr)}
  .process__list{grid-template-columns:repeat(2,1fr)}
  .contact__grid{grid-template-columns:1fr}
}
/* Hamburger nav kicks in at 900px, not 720px: between ~720-820px the logo,
   inline links and Get-a-Quote button crush together to ~6px of breathing room. */
@media (max-width:900px){
  .nav__links{
    position:fixed;inset:0 0 0 auto;width:min(320px,84vw);background:var(--paper);
    flex-direction:column;justify-content:center;gap:8px;padding:0 40px;
    transform:translateX(100%);transition:transform .5s var(--ease);box-shadow:-20px 0 60px -20px rgba(0,0,0,.3);
  }
  .nav.open .nav__links{transform:translateX(0)}
  .nav__links a{font-size:1.4rem}
  .nav__toggle{display:flex;order:3}
  .btn--nav{display:none}
  .nav.open .btn--nav{display:inline-flex;position:fixed;bottom:60px;right:40px;z-index:901}
  /* backdrop-filter on a scrolled nav makes it the containing block for its
     position:fixed children, which threw the open menu's Get-a-Quote button
     off the top of the screen. Use a solid bar while the menu is open. */
  .nav.open,.nav.open.scrolled{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--paper)}
}
@media (max-width:720px){
  .services__grid{grid-template-columns:1fr}
  .process__list{grid-template-columns:1fr}
  .contact__form{grid-template-columns:1fr}
  .footer__top{grid-template-columns:1fr;gap:34px}
  /* The 3rem floor on the hero title pushed "we transform." ~4px past the
     right padding on a 375px screen — scale it to the viewport instead. */
  .hero__title{font-size:clamp(2.4rem,11.5vw,9.5rem)}
  /* Buttons stack on mobile and ran into the decorative scroll cue and the
     roofline watermark. Both are ornamental — drop them rather than crowd. */
  .hero__scroll{display:none}
  .hero__roof{display:none}
  .grain{display:none}
  .ba__caption{display:none}
  .ba__img::after{display:none} /* captions are hidden here, so the scrim would only mute the photos */
  .mission__foot,.contact__lede{font-size:1rem}
}

/* graceful fallback if the animation library is unavailable */
.no-gsap .reveal-up,
.no-gsap .hero__title .w,
.no-gsap .mission__text .ml span.inner,
.no-gsap .sec-title .ml span.inner{opacity:1!important;transform:none!important}
.no-gsap .hero__roof{clip-path:none!important}
.no-gsap .loader{display:none!important}
/* photo scene without GSAP: rest on the finished frame, all chips lit */
/* canvas scene without GSAP: JS still draws frame 0; collapse the tall pin */
.no-gsap .build{min-height:auto}
.no-gsap .build__steps li{color:var(--ink)}
.no-gsap .build__hint{display:none}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.15s!important}
  .reveal-up,.hero__title .w,.mission__text .ml span.inner,.sec-title .ml span.inner{opacity:1!important;transform:none!important}
  .hero__roof,.loader__logo-wrap{clip-path:none!important}
  .grain{display:none}
}