/* =========================================================
   SNIP-N-CUTS — concept mockup
   ========================================================= */

@font-face{font-family:'Montserrat';src:url('../fonts/montserrat.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Sacramento';src:url('../fonts/sacramento.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}

:root{
  --ink:#0d0d0f;
  --ink-2:#17171a;
  --bone:#f7f4ef;
  --paper:#fffdfa;
  --stone:#d7cabb;
  --stone-2:#cdbead;
  --line:#dbd3c9;
  --muted:#6d675f;
  --red:#fc0919;
  --red-deep:#c9060f;
  --rail:56px;
  --pad:clamp(22px,5vw,80px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bone);color:var(--ink);
  font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-weight:300;font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:400;line-height:1.05}
p{margin:0 0 1.1em}
ul,ol{margin:0;padding:0;list-style:none}

/* ---------- shared type ---------- */
.eyebrow{
  font-size:11px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;
  color:var(--muted);margin:0 0 22px;
}
.eyebrow--light{color:rgba(255,255,255,.55)}
.script{
  font-family:'Sacramento',cursive;font-weight:400;
  font-size:clamp(2.1rem,3.6vw,3.1rem);line-height:1.1;letter-spacing:.01em;
  color:var(--ink);margin:0 0 26px;
}
.h2{
  font-size:clamp(1.9rem,3.6vw,3rem);font-weight:300;letter-spacing:-.015em;line-height:1.08;
}
.ghost{
  font-size:clamp(2.4rem,8.5vw,7rem);font-weight:200;letter-spacing:.14em;
  color:var(--stone-2);opacity:.62;text-align:center;margin:0 0 clamp(30px,5vw,70px);
  white-space:nowrap;
}
.ghost--left{text-align:left}
.placeholder{color:#a39a8f;font-style:italic}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;padding:17px 34px;font-size:11px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;border:1px solid transparent;
  transition:background .25s,color .25s,border-color .25s,transform .25s;
  white-space:nowrap;
}
.btn--red{background:var(--red);color:#fff}
.btn--red:hover{background:var(--ink);color:#fff}
.btn--dark{background:var(--ink);color:#fff}
.btn--dark:hover{background:var(--red);color:#fff}
.btn--ghost{border-color:rgba(13,13,15,.45);color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn--lg{padding:21px 48px;font-size:12px}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* =========================================================
   RIGHT RAIL
   ========================================================= */
.rail{
  position:fixed;top:0;right:0;bottom:0;width:var(--rail);z-index:60;
  background:var(--ink);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
}
.rail__phone{
  writing-mode:vertical-rl;font-size:11px;font-weight:500;letter-spacing:.3em;
  text-transform:uppercase;transition:color .25s;
}
.rail__phone:hover{color:var(--red)}
.rail__line{width:1px;height:70px;background:rgba(255,255,255,.28)}
.rail__tag{writing-mode:vertical-rl;font-size:10px;letter-spacing:.34em;color:rgba(255,255,255,.45)}
@media(max-width:1180px){.rail{display:none}:root{--rail:0px}}

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed;top:0;left:0;right:var(--rail);z-index:50;
  transition:background .35s,box-shadow .35s,padding .35s;
  padding:20px 0;
}
.nav.solid{background:rgba(247,244,239,.96);box-shadow:0 1px 0 rgba(13,13,15,.09);padding:10px 0;
  backdrop-filter:saturate(140%) blur(6px)}
.nav__inner{
  display:flex;align-items:center;justify-content:space-between;gap:30px;
  padding:0 var(--pad);
}
.nav__logo img{height:68px;width:auto;transition:height .35s}
.nav.solid .nav__logo img{height:48px}
.nav__logo-dark{display:none}
.nav__links{display:flex;align-items:center;gap:clamp(16px,2.1vw,32px)}
.nav__links a{
  font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  position:relative;padding:6px 0;transition:color .25s;
}
/* over the hero photograph the links need to be light */
.nav:not(.solid) .nav__links a:not(.btn){color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.55)}
.nav__links a:not(.btn)::after{
  content:'';position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--red);
  transition:right .3s cubic-bezier(.2,.7,.3,1);
}
.nav__links a:not(.btn):hover::after{right:0}
.nav__cta{padding:14px 26px;letter-spacing:.2em}
.nav__cta::after{display:none}
.nav__burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:10px}
.nav__burger span{display:block;width:24px;height:1.5px;background:var(--ink);transition:transform .3s,opacity .3s}
.nav__burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav__burger.open span:nth-child(2){opacity:0}
.nav__burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

@media(max-width:980px){
  .nav__burger{display:flex}
  .nav__burger.open span{background:#fff}
  .nav__links{
    position:fixed;inset:0 0 0 auto;width:min(78vw,340px);background:var(--ink);
    flex-direction:column;align-items:flex-start;justify-content:center;gap:26px;
    padding:0 40px;transform:translateX(100%);transition:transform .45s cubic-bezier(.2,.7,.3,1);
  }
  .nav__links.open{transform:none}
  .nav__links a{color:#fff;font-size:13px}
  .nav__cta{margin-top:14px}
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  display:grid;grid-template-columns:1.02fr .98fr;min-height:100vh;
  margin-right:var(--rail);background:var(--stone);
}
.hero__copy{display:flex;align-items:center;padding:150px var(--pad) 110px;position:relative}
.hero__copy::before{
  content:'';position:absolute;left:calc(var(--pad) - 26px);top:38%;bottom:16%;width:1px;
  background:rgba(13,13,15,.32);
}
.hero__copy-inner{max-width:640px}
.hero__title{
  font-size:clamp(2.3rem,4.2vw,3.9rem);font-weight:250;letter-spacing:-.025em;line-height:1.06;
  margin:0 0 28px;
}
.hero__title em{
  font-style:normal;font-weight:600;white-space:nowrap;
  background-image:linear-gradient(var(--red),var(--red));
  background-size:100% 6px;background-position:0 90%;background-repeat:no-repeat;
}
.hero__sub{max-width:460px;color:#3b3733;font-size:16px;margin-bottom:38px}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px}
.hero__media{position:relative;overflow:hidden;background:var(--ink)}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}

/* below this width the hero photo sits behind the nav, so the logo and
   burger have to flip to their light-on-dark variants */
@media(max-width:900px){
  .nav:not(.solid) .nav__logo-light{display:none}
  .nav:not(.solid) .nav__logo-dark{display:block}
  .nav:not(.solid) .nav__burger:not(.open) span{background:#fff}
  .ghost{white-space:normal;font-size:clamp(1.7rem,7.4vw,2.6rem);letter-spacing:.1em}
}

@media(max-width:900px){
  .hero{grid-template-columns:1fr;min-height:0}
  .hero__copy{order:2;padding:70px var(--pad) 80px}
  .hero__copy::before{display:none}
  .hero__media{order:1;height:66vh;min-height:420px;margin-top:0}
}

/* =========================================================
   TRUST STRIP
   ========================================================= */
.trust{background:var(--ink);color:#fff;margin-right:var(--rail)}
.trust__inner{
  display:grid;grid-template-columns:repeat(4,1fr);
  padding:0 var(--pad);
}
.trust__item{
  padding:34px 26px;display:flex;flex-direction:column;gap:7px;
  border-left:1px solid rgba(255,255,255,.13);
}
.trust__item:first-child{border-left:0;padding-left:0}
.trust__k{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.trust__v{font-size:14px;font-weight:400;letter-spacing:.02em}
.trust__v a:hover{color:var(--red)}
.trust .placeholder{color:rgba(255,255,255,.38)}
@media(max-width:820px){
  .trust__inner{grid-template-columns:1fr 1fr}
  .trust__item{padding:24px 20px}
  .trust__item:nth-child(odd){border-left:0;padding-left:0}
  .trust__item:nth-child(n+3){border-top:1px solid rgba(255,255,255,.13)}
}

/* =========================================================
   INTRO
   ========================================================= */
.intro{background:var(--bone);padding:clamp(80px,10vw,140px) var(--pad);margin-right:var(--rail)}
.intro__inner{max-width:620px;margin:0 auto;text-align:center}
.intro__body{font-size:16.5px;color:#4a453f;margin:0}

/* =========================================================
   SERVICES
   ========================================================= */
.services{background:var(--bone);padding:0 0 clamp(60px,8vw,110px);margin-right:var(--rail);overflow:hidden}
.svc{display:grid;align-items:center;gap:0;margin-bottom:clamp(50px,7vw,90px)}
.svc--a{grid-template-columns:1fr 1fr}
.svc--b{grid-template-columns:1fr 1fr}
.svc__panel{
  background:var(--paper);padding:clamp(38px,5vw,70px) clamp(28px,4.5vw,64px);
  position:relative;z-index:2;
}
.svc--a .svc__panel{margin-left:var(--pad);box-shadow:34px 0 0 0 var(--stone)}
.svc--b .svc__panel{margin-right:var(--pad);box-shadow:-34px 0 0 0 var(--stone)}
.svc__img{margin:0;height:100%;min-height:420px;position:relative;z-index:1}
.svc__img img{width:100%;height:100%;object-fit:cover}
.svc--a .svc__img{margin-left:-40px}
.svc--b .svc__img{margin-right:-40px}

.menu{margin:0 0 26px;border-top:1px solid var(--line)}
.menu li{
  display:flex;align-items:baseline;gap:10px;padding:11px 0;
  border-bottom:1px solid var(--line);font-size:14px;
}
.menu li > span:first-child{flex:0 1 auto}
.menu li em{font-style:normal;color:#8d857b;font-size:12.5px;white-space:nowrap}
.menu li i{flex:1 0 18px;border-bottom:1px dotted #bfb6ab;transform:translateY(-3px)}
.menu li .price{font-size:13.5px;font-weight:500;color:var(--ink);letter-spacing:.01em;white-space:nowrap}
.menu__label{
  font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--red);
  font-weight:600;margin:0 0 12px;
}
.svc__note{
  text-align:center;font-size:12.5px;letter-spacing:.03em;color:#8d857b;
  max-width:620px;margin:0 auto;padding:0 var(--pad);
}
.svc__note a{border-bottom:1px solid var(--red);padding-bottom:1px;color:var(--ink)}
.cta__actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn--outline{border-color:rgba(255,255,255,.4);color:#fff}
.btn--outline:hover{background:#fff;color:var(--ink);border-color:#fff}

@media(max-width:900px){
  .svc--a,.svc--b{grid-template-columns:1fr}
  .svc__panel{margin:0 var(--pad) !important;box-shadow:none !important;order:2}
  .svc__img{order:1;margin:0 !important;min-height:300px;height:56vw;max-height:420px}
}

/* =========================================================
   QUOTE
   ========================================================= */
.quote{
  position:relative;margin-right:var(--rail);min-height:clamp(320px,45vw,520px);
  display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--ink);
}
.quote__bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 62%;
  opacity:.36;filter:grayscale(.35) contrast(1.05);
}
.quote__text{
  position:relative;font-family:'Sacramento',cursive;color:#fff;text-align:center;
  font-size:clamp(2.1rem,5.4vw,4.4rem);line-height:1.25;margin:0;padding:70px 30px;
  text-shadow:0 2px 30px rgba(0,0,0,.5);
}

/* =========================================================
   WHY
   ========================================================= */
.why{background:var(--stone);margin-right:var(--rail);padding:clamp(72px,9vw,130px) var(--pad)}
.why__inner{display:grid;grid-template-columns:minmax(260px,1fr) 2.1fr;gap:clamp(38px,6vw,90px);align-items:start}
.why__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,54px)}
.why__item .num{
  display:block;font-size:11px;letter-spacing:.26em;color:var(--red);font-weight:600;margin-bottom:12px;
}
.why__item h3{font-size:17px;font-weight:600;letter-spacing:.01em;margin:0 0 10px}
.why__item p{font-size:14.5px;color:#403b35;margin:0;padding-top:14px;border-top:1px solid rgba(13,13,15,.16)}
@media(max-width:900px){
  .why__inner{grid-template-columns:1fr}
  .why__grid{grid-template-columns:1fr}
}

/* =========================================================
   PROCESS
   ========================================================= */
.process{background:var(--bone);margin-right:var(--rail);padding:clamp(72px,9vw,120px) var(--pad)}
.process__head{text-align:center;margin-bottom:clamp(30px,4vw,50px)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,4vw,60px);max-width:1080px;margin:0 auto}
.steps li{position:relative}
.steps .num{
  display:block;font-size:clamp(2.4rem,4.4vw,3.4rem);font-weight:200;
  color:var(--stone-2);letter-spacing:-.02em;line-height:1;margin:0 0 20px;
}
.steps h3{font-size:16px;font-weight:600;margin:0 0 9px;padding-top:24px;
  border-top:1px solid var(--line);letter-spacing:.02em}
.steps p{font-size:14.5px;color:#4a453f;margin:0}
@media(max-width:820px){.steps{grid-template-columns:1fr}}

/* =========================================================
   WORK
   ========================================================= */
.work{background:var(--paper);margin-right:var(--rail);padding:clamp(72px,9vw,120px) var(--pad) clamp(50px,7vw,90px)}
.work__head{display:flex;align-items:baseline;justify-content:space-between;gap:26px;flex-wrap:wrap}
.work__head .ghost{margin-bottom:26px}
.work__note{font-size:12px;letter-spacing:.08em}
.work__grid{
  display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:185px;gap:14px;margin-top:14px;
}
.work__grid figure{margin:0;overflow:hidden;background:var(--stone);grid-column:span 2}
.work__grid figure:first-child{grid-row:span 2}
.work__grid img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.work__grid figure:hover img{transform:scale(1.05)}
.work__handle{text-align:center;margin:46px 0 0;color:var(--muted);font-size:2.2rem}
@media(max-width:900px){
  .work__grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px}
  .work__grid figure{grid-column:span 1}
  .work__grid figure:first-child{grid-row:span 2}
}

/* =========================================================
   ABOUT
   ========================================================= */
.about{
  position:relative;background:var(--stone);margin-right:var(--rail);
  display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:clamp(30px,5vw,72px);
  padding:clamp(70px,9vw,120px) var(--pad);overflow:hidden;
}
.about__watermark{
  position:absolute;right:-3%;bottom:-6%;width:min(42%,520px);opacity:.06;pointer-events:none;
}
.about__img{margin:0;position:relative;z-index:1}
.about__img img{width:100%;aspect-ratio:4/3.1;object-fit:cover}
.about__copy{position:relative;z-index:1;max-width:520px}
.about__copy p:not(.script):not(.eyebrow){font-size:15.2px;color:#3f3a35}
.about__copy .eyebrow{margin-bottom:14px}
.about__copy .script{margin-bottom:20px}
.about__copy .btn{margin-top:14px}
@media(max-width:900px){.about{grid-template-columns:1fr}}

/* =========================================================
   FAQ
   ========================================================= */
.faq{background:var(--bone);margin-right:var(--rail);padding:clamp(72px,9vw,120px) var(--pad)}
.faq__inner{display:grid;grid-template-columns:minmax(240px,1fr) 1.7fr;gap:clamp(34px,6vw,90px);align-items:start}
.faq__list{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:22px 40px 22px 0;position:relative;
  font-size:15.5px;font-weight:500;letter-spacing:.01em;transition:color .25s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'';position:absolute;right:6px;top:50%;width:11px;height:1px;background:var(--ink);
}
.faq summary::before{
  content:'';position:absolute;right:11px;top:calc(50% - 5px);width:1px;height:11px;background:var(--ink);
  transition:transform .3s,opacity .3s;
}
.faq details[open] summary{color:var(--red)}
.faq details[open] summary::before{transform:rotate(90deg);opacity:0}
.faq details[open] summary::after{background:var(--red)}
.faq details p{font-size:14.5px;color:#4a453f;max-width:640px;margin:0;padding:0 0 24px}
.faq details p a{border-bottom:1px solid var(--red);padding-bottom:1px}

@media(max-width:900px){.faq__inner{grid-template-columns:1fr}}

/* =========================================================
   FINAL CTA
   ========================================================= */
.cta{
  background:var(--ink);color:#fff;margin-right:var(--rail);
  padding:clamp(80px,11vw,150px) var(--pad);text-align:center;
}
.cta__inner{max-width:760px;margin:0 auto}
.cta__title{
  font-size:clamp(1.9rem,4.4vw,3.5rem);font-weight:250;letter-spacing:-.02em;line-height:1.1;
  margin:0 0 20px;
}
.cta__sub{color:rgba(255,255,255,.6);margin:0 0 38px;font-size:15.5px}
.cta__addr{margin:26px 0 0;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.42)}

/* =========================================================
   FOOTER
   ========================================================= */
.foot{background:var(--ink-2);color:rgba(255,255,255,.72);margin-right:var(--rail);
  padding:clamp(56px,7vw,90px) var(--pad) 0;font-size:14px}
.foot__inner{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:clamp(28px,4vw,60px);
  padding-bottom:56px;
}
.foot__brand img{height:78px;width:auto;margin-bottom:26px}
.foot__brand p{margin:0 0 14px;line-height:1.8}
.foot__tel{font-size:19px;color:#fff;letter-spacing:.04em;transition:color .25s}
.foot__tel:hover{color:var(--red)}
.foot__col h4{
  font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.42);
  margin:0 0 20px;font-weight:600;
}
.foot__col a{display:block;padding:5px 0;transition:color .25s}
.foot__col a.btn{display:inline-block;padding:15px 28px}
.foot__col a:not(.btn):hover{color:var(--red)}
.foot__col p{line-height:2}
.foot .placeholder{color:rgba(255,255,255,.34)}
.foot__col--cta .btn{margin-top:10px}
.foot__bar{
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.11);padding:24px 0 30px;
  font-size:11px;letter-spacing:.08em;color:rgba(255,255,255,.4);
}
.foot__mock{font-style:italic;color:rgba(255,255,255,.3)}
@media(max-width:900px){.foot__inner{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot__inner{grid-template-columns:1fr}}