/* ==========================================================================
   ABD Remodeling / Associates in Building + Design
   Design language: Studio Creative (type, spacing, composition, motion only)
   Palette: ABD's own brand. Navy #273248 and lime #c4d655 sampled from their
   logo mark, bone #e9e6dc from their site templates, paper #fafaf8 from the
   logo artwork ground.
   Display: Josefin Sans. Body: Epilogue.
   ========================================================================== */

:root{
  /* ABD brand */
  --navy:        #273248;
  --navy-deep:   #1b2434;
  --navy-soft:   #33405c;
  --lime:        #c4d655;
  --lime-ink:    #5f6b18;   /* deepened lime, same hue, for small text on light */
  --paper:       #fafaf8;
  --bone:        #e9e6dc;
  --bone-deep:   #ddd8ca;

  /* text */
  --ink:         #23272e;
  --body:        #4a4b50;
  --muted:       #5e5e5e;
  --on-dark:     #fafaf8;
  --on-dark-2:   #c3c9d4;

  /* type */
  --display: "Josefin Sans", "Trebuchet MS", sans-serif;
  --text:    "Epilogue", "Helvetica Neue", Arial, sans-serif;

  /* layout */
  --wrap:    min(90%, 1240px);
  --wrap-nr: min(90%, 980px);
  --nav-h:   84px;
  --gutter:  clamp(1.25rem, 4vw, 3rem);
  --sec:     clamp(4.5rem, 9vw, 8.5rem);

  /* motion */
  --ease:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--paper);
  color:var(--body);
  font-family:var(--text);
  font-size:clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  font-weight:400;
  line-height:1.68;
  letter-spacing:0.004em;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }

h1,h2,h3,h4,.display{
  font-family:var(--display);
  font-weight:400;
  color:var(--ink);
  margin:0;
  letter-spacing:-0.012em;
  line-height:1.03;
}
p{ margin:0 0 1.15em; max-width:68ch; }
p:last-child{ margin-bottom:0; }

.wrap{ width:var(--wrap); margin-inline:auto; }
.wrap-nr{ width:var(--wrap-nr); margin-inline:auto; }
.section{ padding-block:var(--sec); }

/* Bands ------------------------------------------------------------------ */
.band-paper{ background:var(--paper); }
.band-bone{ background:var(--bone); }
.band-navy{ background:var(--navy); color:var(--on-dark); }
.band-navy h1,.band-navy h2,.band-navy h3,.band-navy h4{ color:var(--on-dark); }
.band-navy p{ color:var(--on-dark-2); }

/* Eyebrow ---------------------------------------------------------------- */
.eyebrow{
  font-family:var(--text);
  font-size:0.7rem;
  font-weight:600;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--lime-ink);
  display:flex;
  align-items:center;
  gap:0.85rem;
  margin:0 0 1.6rem;
}
.eyebrow::after{
  content:"";
  height:1px;
  width:clamp(28px, 6vw, 68px);
  background:currentColor;
  opacity:0.5;
}
.band-navy .eyebrow{ color:var(--lime); }

/* Buttons ---------------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:0.7rem;
  font-family:var(--text);
  font-size:0.86rem;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  text-decoration:none;
  padding:1.05rem 1.85rem;
  border-radius:999px;
  border:1px solid transparent;
  transition:background .32s var(--ease), color .32s var(--ease), border-color .32s var(--ease), transform .3s var(--ease);
  min-height:48px;
  cursor:pointer;
}
.btn__dot{
  width:7px; height:7px; border-radius:50%;
  background:currentColor; flex:none;
  transition:transform .4s var(--ease);
}
.btn:hover .btn__dot{ transform:scale(1.9); }
.btn--lime{ background:var(--lime); color:var(--navy); }
.btn--lime:hover{ background:#b3c644; }
.btn--outline{ border-color:rgba(39,50,72,.32); color:var(--ink); background:transparent; }
.btn--outline:hover{ border-color:var(--navy); background:var(--navy); color:var(--paper); }
.btn--outline-light{ border-color:rgba(250,250,248,.4); color:var(--paper); background:transparent; }
.btn--outline-light:hover{ background:var(--paper); color:var(--navy); border-color:var(--paper); }

/* Nav -------------------------------------------------------------------- */
.nav{
  position:sticky; top:0; z-index:120;
  height:var(--nav-h);
  background:var(--paper);
  border-bottom:1px solid rgba(39,50,72,.1);
}
.nav__inner{
  width:var(--wrap); margin-inline:auto; height:100%;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}
.nav__logo{ display:flex; align-items:center; gap:.7rem; text-decoration:none; flex:none; }
.nav__logo img{ width:auto; height:44px; max-width:56px; object-fit:contain; }
.nav__logo-txt{
  font-family:var(--display); font-weight:600; font-size:0.82rem;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--navy); line-height:1.25;
}
.nav__logo-txt span{ display:block; font-weight:400; font-size:0.62rem; letter-spacing:0.2em; color:var(--muted); }
.nav__links{ display:flex; align-items:center; gap:clamp(1rem,2.2vw,2.1rem); }
.nav__link{
  font-size:0.79rem; font-weight:500; letter-spacing:0.12em; text-transform:uppercase;
  text-decoration:none; color:var(--ink); position:relative; padding-block:0.4rem;
}
.nav__link::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:100%; background:var(--lime);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .34s var(--ease);
}
.nav__link:hover::after{ transform:scaleX(1); }
.nav__cta{ padding:0.82rem 1.4rem; font-size:0.76rem; }
.nav__burger{
  display:none; width:48px; height:48px; border:0; background:transparent; cursor:pointer;
  align-items:center; justify-content:center; flex-direction:column; gap:6px; padding:0;
  position:relative; z-index:230;
}
.nav__burger span{ display:block; width:24px; height:2px; background:var(--ink); transition:transform .34s var(--ease), opacity .2s linear; }
body.menu-open .nav__burger span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
body.menu-open .nav__burger span:nth-child(2){ opacity:0; }
body.menu-open .nav__burger span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* Mobile menu ------------------------------------------------------------ */
.menu{
  position:fixed; inset:0; z-index:200;
  background:var(--navy);
  display:flex; flex-direction:column; justify-content:center;
  padding:6rem var(--gutter) 3rem;
  opacity:0; visibility:hidden; transform:translateY(-2%);
  transition:opacity .38s var(--ease), transform .38s var(--ease), visibility .38s;
}
body.menu-open .menu{ opacity:1; visibility:visible; transform:none; }
.menu__link{
  font-family:var(--display); font-size:clamp(2rem,8vw,2.9rem); font-weight:300;
  color:var(--paper); text-decoration:none; padding-block:0.55rem; display:block;
  border-bottom:1px solid rgba(250,250,248,.12);
}
.menu__link:last-of-type{ border-bottom:0; }
.menu__foot{ margin-top:2.4rem; display:flex; flex-direction:column; gap:0.9rem; align-items:flex-start; }
.menu__meta{ color:var(--on-dark-2); font-size:0.92rem; text-decoration:none; }

/* Hero ------------------------------------------------------------------- */
.hero{
  position:relative;
  min-height:calc(100svh - var(--nav-h));
  display:grid;
  grid-template-columns:minmax(0,0.86fr) minmax(0,1fr);
  align-items:stretch;
  background:var(--paper);
}
.hero__media{
  position:relative; overflow:hidden; background:var(--bone);
}
.hero__media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:scale(1.06);
}
.hero__tag{
  display:block; position:absolute; left:0; bottom:2rem; z-index:3;
  background:var(--lime); color:var(--navy);
  font-size:0.68rem; font-weight:600; letter-spacing:0.2em; text-transform:uppercase;
  padding:0.75rem 1.35rem 0.75rem clamp(1rem,3vw,2rem);
  max-width:100%;
}
.hero__rule{ position:absolute; top:0; right:0; bottom:0; width:6px; background:var(--lime); z-index:2; }
.hero__body{
  display:flex; flex-direction:column; justify-content:center; overflow:hidden;
  padding:clamp(3rem,7vw,5.5rem) clamp(1.5rem,5vw,4.5rem) clamp(3rem,7vw,5rem) clamp(2rem,5vw,4.5rem);
  position:relative;
}
.hero__arc{
  position:absolute; top:clamp(0.25rem,1.6vw,1rem); right:0;
  width:clamp(190px,25vw,340px); height:auto; pointer-events:none; z-index:0; opacity:.9;
}
.hero__arc path{ fill:none; stroke:var(--lime); stroke-width:5; stroke-linecap:round; }
.hero__inner{ position:relative; z-index:1; }
.h-sec{
  font-size:clamp(1.7rem, 1rem + 2.2vw, 2.6rem);
  font-weight:300; line-height:1.06; max-width:19ch;
}
.hero h1{
  font-size:clamp(2.5rem, 1.1rem + 4.3vw, 4.75rem);
  font-weight:300;
  line-height:1.0;
  letter-spacing:-0.018em;
  max-width:13ch;
  margin-bottom:1.5rem;
}
.hero h1 b{ font-weight:600; }
.hero__sub{
  font-size:clamp(1rem,0.94rem + 0.32vw,1.16rem);
  color:var(--body);
  max-width:44ch;
  margin-bottom:2.2rem;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:0.85rem; margin-bottom:2.6rem; }
.hero__facts{
  display:flex; flex-wrap:wrap; gap:0.6rem 2rem;
  border-top:1px solid rgba(39,50,72,.14); padding-top:1.4rem;
}
.hero__fact{
  display:block; font-size:0.78rem; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted);
}

/* Statement -------------------------------------------------------------- */
.statement{ position:relative; overflow:hidden; }
.statement__grid{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,0.85fr);
  gap:clamp(2.5rem,5vw,5rem); align-items:center;
}
.statement h2{ margin-bottom:1.8rem; max-width:18ch; }
.statement h2 b{ font-weight:600; color:var(--lime); }
.statement__body p{ color:var(--on-dark-2); max-width:56ch; }
.statement__media{ position:relative; }
.statement__media img{ width:100%; height:auto; }
.statement__badge{
  display:block; position:absolute; left:-1px; bottom:-1px; background:var(--lime); color:var(--navy);
  padding:1.1rem 1.4rem; max-width:calc(100% - 2rem);
}
.statement__badge > span{ display:block; font-size:0.66rem; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; }
.statement__badge strong{ font-family:var(--display); font-weight:600; font-size:1.15rem; letter-spacing:0.01em; }
.honors{
  margin-top:clamp(2.5rem,5vw,4rem);
  border-top:1px solid rgba(250,250,248,.16);
  padding-top:1.8rem;
  display:flex; flex-wrap:wrap; gap:0.8rem 2.4rem;
}
.honors__item{ display:block; font-size:0.82rem; color:var(--on-dark-2); letter-spacing:0.03em; }
.honors__item b{ color:var(--lime); font-weight:600; }

/* Full bleed band -------------------------------------------------------- */
.bleed{ position:relative; height:clamp(320px, 52vh, 620px); overflow:hidden; }
.bleed img{ position:absolute; inset:0; width:100%; height:112%; object-fit:cover; }

/* Services --------------------------------------------------------------- */
.svc{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:center;
  padding-block:clamp(3rem,6vw,5.5rem);
}
.svc + .svc{ border-top:1px solid rgba(39,50,72,.12); }
.svc--flip .svc__media{ order:2; }
.svc__media{ position:relative; }
.svc__media img{ width:100%; height:clamp(300px,42vw,520px); object-fit:cover; }
.svc h3{
  font-size:clamp(1.4rem,0.95rem + 1.35vw,1.85rem); font-weight:500; margin-bottom:1.1rem;
  letter-spacing:0.005em;
}
.svc__body p{ color:var(--body); max-width:52ch; }
.svc__link{
  display:inline-flex; align-items:center; gap:0.6rem; margin-top:0.55rem;
  font-size:0.78rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--lime-ink); text-decoration:none; border-bottom:2px solid var(--lime);
  padding-top:0.95rem; padding-bottom:0.5rem; min-height:44px;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.svc__link:hover{ color:var(--ink); border-color:var(--ink); }

/* Work ------------------------------------------------------------------- */
.work__head{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:1.5rem; margin-bottom:clamp(2.2rem,4vw,3.4rem);
}
.work__head h2{ max-width:16ch; }
.work__grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:clamp(1.1rem,2.4vw,2rem); }
.proj{ position:relative; text-decoration:none; display:block; }
.proj__frame{ display:block; overflow:hidden; background:var(--bone-deep); }
.proj img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.proj:hover img{ transform:scale(1.04); }
.proj__cat{
  display:block; font-size:0.68rem; font-weight:600; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--lime-ink); margin:1.1rem 0 0.4rem;
}
.proj__name{ display:block; font-family:var(--display); font-size:clamp(1.15rem,0.9rem + 0.7vw,1.5rem); font-weight:400; color:var(--ink); }
.proj--a{ grid-column:span 7; }
.proj--a .proj__frame{ height:clamp(300px,40vw,520px); }
.proj--b{ grid-column:span 5; align-self:end; }
.proj--b .proj__frame{ height:clamp(260px,32vw,420px); }
.proj--c{ grid-column:span 5; }
.proj--c .proj__frame{ height:clamp(260px,32vw,420px); }
.proj--d{ grid-column:span 7; align-self:end; }
.proj--d .proj__frame{ height:clamp(300px,38vw,470px); }

/* Awards ----------------------------------------------------------------- */
.awards__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:clamp(1.2rem,3vw,2.4rem); }
.award__frame{ display:block; overflow:hidden; height:clamp(260px,30vw,400px); }
.award__frame img{ width:100%; height:100%; object-fit:cover; }
.award__title{ font-family:var(--display); font-size:1.22rem; font-weight:400; color:var(--on-dark); margin:1.3rem 0 0.45rem; }
.award__note{ font-size:0.92rem; color:var(--on-dark-2); margin:0; }

/* Process ---------------------------------------------------------------- */
.proc__list{ margin-top:clamp(2.2rem,4vw,3.2rem); }
.proc__row{
  display:grid; grid-template-columns:auto minmax(0,15rem) minmax(0,1fr);
  gap:clamp(1rem,3vw,2.6rem); align-items:baseline;
  padding-block:clamp(1.4rem,2.6vw,2.1rem);
  border-top:1px solid rgba(39,50,72,.14);
}
.proc__row:last-child{ border-bottom:1px solid rgba(39,50,72,.14); }
.proc__num{
  font-family:var(--display); font-size:0.8rem; font-weight:600; letter-spacing:0.16em;
  color:var(--lime-ink); min-width:2.6rem;
}
.proc__name{ font-family:var(--display); font-size:clamp(1.2rem,0.98rem + 0.7vw,1.5rem); font-weight:500; color:var(--ink); letter-spacing:0.005em; }
.proc__text{ margin:0; color:var(--body); font-size:0.99rem; }

/* Team ------------------------------------------------------------------- */
.team__grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,148px),1fr));
  gap:clamp(1.1rem,2.4vw,2rem);
  margin-top:clamp(2.2rem,4vw,3.4rem);
}
.person__frame{ display:block; overflow:hidden; background:var(--bone-deep); aspect-ratio:3/4; }
.person__frame img{ width:100%; height:100%; object-fit:cover; object-position:center 18%; transition:transform .8s var(--ease); }
.person:hover .person__frame img{ transform:scale(1.045); }
.person__name{ font-family:var(--display); font-size:1.18rem; font-weight:500; color:var(--ink); margin:1rem 0 0.25rem; }
.person__role{ font-size:0.78rem; letter-spacing:0.09em; text-transform:uppercase; color:var(--muted); margin:0; }

/* Reviews ---------------------------------------------------------------- */
.rev__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:clamp(1.4rem,3vw,2.6rem); margin-top:clamp(2rem,4vw,3rem); }
.rev{ border-top:3px solid var(--lime); padding-top:1.6rem; }
.rev p{ color:var(--body); font-size:1rem; margin-bottom:1.2rem; }
.rev__who{ display:block; font-family:var(--display); font-size:1.05rem; font-weight:600; color:var(--ink); letter-spacing:0.02em; }
.rev--lead{ grid-column:1 / -1; }
.rev--lead p{ font-family:var(--display); font-weight:300; font-size:clamp(1.25rem,0.95rem + 1.05vw,1.72rem); line-height:1.36; color:var(--ink); max-width:34ch; }

/* CTA -------------------------------------------------------------------- */
.cta__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,0.8fr); gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.cta h2{ max-width:15ch; margin-bottom:1.4rem; }
.cta__actions{ display:flex; flex-wrap:wrap; gap:0.85rem; margin-top:2rem; }
.cta__contact{ display:flex; flex-direction:column; gap:1.5rem; }
.cta__item{ text-decoration:none; display:block; padding-block:0.45rem; }
.cta__label{ display:block; font-size:0.68rem; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; color:var(--lime); margin-bottom:0.35rem; }
.cta__value{ display:block; font-family:var(--display); font-size:clamp(1.05rem,0.9rem + 0.55vw,1.35rem); font-weight:400; color:var(--on-dark); line-height:1.35; }

/* Footer ----------------------------------------------------------------- */
.foot{ background:var(--navy-deep); color:var(--on-dark-2); padding-block:clamp(3rem,5vw,4.5rem); }
.foot__top{ display:flex; flex-wrap:wrap; gap:2rem 3rem; justify-content:space-between; align-items:flex-start; }
.foot__logo img{ width:auto; height:64px; max-width:200px; object-fit:contain; }
.foot__nav{ display:flex; flex-wrap:wrap; gap:0.4rem 1.6rem; }
.foot__nav a{ color:var(--on-dark-2); text-decoration:none; font-size:0.86rem; padding-block:0.65rem; display:inline-block; }
.foot__nav a:hover{ color:var(--lime); }
.foot__contact{ font-size:0.9rem; line-height:1.9; }
.foot__contact a{ color:var(--on-dark-2); text-decoration:none; display:inline-block; padding-block:0.35rem; }
.foot__contact a:hover{ color:var(--lime); }
.foot__bottom{
  margin-top:clamp(2.2rem,4vw,3.2rem); padding-top:1.6rem;
  border-top:1px solid rgba(250,250,248,.14);
  display:flex; flex-wrap:wrap; gap:0.8rem 2rem; justify-content:space-between;
  font-size:0.8rem;
}

/* 404 -------------------------------------------------------------------- */
.err{
  min-height:calc(100svh - var(--nav-h));
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  background:var(--navy); color:var(--on-dark);
  padding-block:clamp(4rem,10vw,8rem);
}
.err__code{ font-family:var(--display); font-size:clamp(5rem,18vw,12rem); font-weight:300; line-height:0.85; color:var(--lime); opacity:.9; }
.err h1{ color:var(--on-dark); margin:1.6rem 0 1rem; }
.err p{ color:var(--on-dark-2); max-width:46ch; margin-bottom:2rem; }

/* Motion ----------------------------------------------------------------- */
html.js .reveal{ opacity:0; transform:translateY(26px); }
html.js .hero__stagger > *{ opacity:0; transform:translateY(20px); }
@media (prefers-reduced-motion:reduce){
  html.js .reveal,
  html.js .hero__stagger > *{ opacity:1 !important; transform:none !important; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* Responsive ------------------------------------------------------------- */
@media (max-width:1024px){
  :root{ --nav-h:76px; }
  .nav__links{ display:none; }
  .nav__burger{ display:flex; }
  .statement__grid{ grid-template-columns:minmax(0,1fr); }
  .cta__grid{ grid-template-columns:minmax(0,1fr); }
  .proc__row{ grid-template-columns:auto minmax(0,1fr); }
  .proc__text{ grid-column:2 / -1; }
}
@media (max-width:860px){
  .hero{
    grid-template-columns:minmax(0,1fr);
    min-height:0;
  }
  .hero__media{ height:clamp(300px,52svh,460px); order:1; }
  .hero__rule{ top:auto; bottom:0; left:0; right:0; width:auto; height:6px; }
  .hero__body{ order:2; padding-block:clamp(2.6rem,8vw,4rem); }
  .hero h1{ max-width:16ch; }
  .svc{ grid-template-columns:minmax(0,1fr); }
  .svc--flip .svc__media{ order:0; }
  .work__grid{ grid-template-columns:minmax(0,1fr); }
  .proj--a,.proj--b,.proj--c,.proj--d{ grid-column:1 / -1; }
  .proj--a .proj__frame,.proj--b .proj__frame,.proj--c .proj__frame,.proj--d .proj__frame{ height:clamp(240px,58vw,380px); }
}
@media (max-width:560px){
  .hero__arc{ display:none; }
  .hero__actions .btn{ width:100%; justify-content:center; }
  .rev--lead p{ max-width:none; }
  .foot__top{ flex-direction:column; }
}

/* ---------- Mobile drawer close control ---------- */
/* The burger doubles as the close (X), but the nav's own z-index traps it in a
   stacking context below the drawer, so it is painted over and cannot be tapped.
   This control lives inside the drawer, so it is always visible and always hits. */
#menu .mnav-close {
  position: absolute;
  top: max(0.85rem, env(safe-area-inset-top, 0px));
  right: 0.85rem;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: rgb(250, 250, 248);
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
}
#menu .mnav-close::before,
#menu .mnav-close::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 21px;
  height: 1.5px;
  margin: -0.75px 0 0 -10.5px;
  background: currentColor;
  border-radius: 2px;
}
#menu .mnav-close::before { transform: rotate(45deg); }
#menu .mnav-close::after { transform: rotate(-45deg); }
#menu .mnav-close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }