/* ============================================================
   EMERALD MEDIA — Site Stylesheet v2 (premium / Blackout pass)
   Official brand palette (sampled from logo suite):
   Blackout #091311 · Emerald #024039 · Impression #7E9696
   Placement #CAC1BE · Whitespace #EFEAE7 · Prime Time #E57240
   ============================================================ */
:root{
  --blackout:     #091311;   /* anchor — header, footer, dark sections */
  --blackout-2:   #121C19;   /* cards on blackout                      */
  --emerald:      #024039;   /* anchor — brand green                   */
  --emerald-deep: #01332D;
  --impression:   #7E9696;   /* muted sage-blue neutral                */
  --placement:    #CAC1BE;   /* warm grey neutral                      */
  --white:        #EFEAE7;   /* whitespace background                  */
  --white-soft:   #E5DFD9;   /* cards on whitespace                    */
  --orange:       #E57240;   /* prime time accent                      */
  --orange-hot:   #E8501E;   /* vivid variant — small pops only        */
  --ink:          #14201C;   /* body text on light                     */
  --line:         rgba(3,64,57,.12);
  --line-light:   rgba(242,239,234,.13);

  /* v1 aliases */
  --cream: var(--white);
  --vermilion: var(--orange);
  --sage: var(--impression);

  --serif: "Instrument Serif", Georgia, serif;
  --mono:  "Space Mono", "Courier New", monospace;
  --sans:  "Lato", -apple-system, "Helvetica Neue", Arial, sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);font-size:18px;line-height:1.7;
  color:var(--ink);background:var(--white);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}

/* ---------- type ---------- */
.serif{font-family:var(--serif)}
.kicker{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--orange);display:block;margin-bottom:1.3rem;
}
.kicker--muted{color:var(--impression)}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.06;letter-spacing:-.005em}
h1{font-size:clamp(3.2rem,7vw,6.4rem)}
h2{font-size:clamp(2.4rem,4.8vw,4rem)}
h3{font-size:clamp(1.5rem,2.4vw,2rem)}
.em-i{font-style:italic;color:var(--orange)}
.lead{font-size:1.2rem;max-width:52ch;font-weight:400}

/* ---------- layout ---------- */
.wrap{max-width:1240px;margin:0 auto;padding:0 clamp(1.25rem,4vw,3rem)}
.section{padding:clamp(4rem,9vw,8rem) 0}
.section--green{background:var(--emerald);color:var(--white)}
.section--black{background:var(--blackout);color:var(--white)}
.section--green .lead,.section--black .lead{color:rgba(242,239,234,.72)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
@media(max-width:860px){.grid-2{grid-template-columns:1fr}}

/* ---------- reveal on scroll ---------- */
[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}
[data-reveal].in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.16em;text-transform:uppercase;font-weight:400;
  padding:.85rem 1.9rem;border:1px solid currentColor;border-radius:999px;
  transition:all .35s ease;cursor:pointer;background:transparent;
}
.btn--solid{background:var(--orange);border-color:var(--orange);color:var(--blackout)}
.btn--solid:hover{background:transparent;border-color:var(--orange);color:var(--orange)}
.btn--outline-cream{color:var(--white);border-color:rgba(242,239,234,.35)}
.btn--outline-cream:hover{border-color:var(--white);background:var(--white);color:var(--blackout)}
.btn--outline-green{color:var(--emerald);border-color:rgba(3,64,57,.3)}
.btn--outline-green:hover{border-color:var(--emerald);background:var(--emerald);color:var(--white)}

/* ---------- header (Blackout) ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--blackout);border-bottom:1px solid var(--line-light);
}
.site-header .wrap{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:1.05rem;padding-bottom:1.05rem;
}
.logo img{height:32px;width:auto}
.nav{display:flex;gap:2.2rem;align-items:center}
.nav a{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--white);position:relative;
}
.nav a:not(.btn)::after{
  content:"";position:absolute;left:0;bottom:-4px;height:1px;width:0;
  background:var(--orange);transition:width .3s;
}
.nav a:not(.btn):hover::after,.nav a.active::after{width:100%}
.nav a.active{color:var(--orange)}
.nav .btn{padding:.7rem 1.5rem}
.menu-toggle{display:none}
@media(max-width:860px){
  .nav{display:none}
  .menu-toggle{display:block;background:none;border:0;font-family:var(--mono);
    font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--white);cursor:pointer}
  .nav.open{display:flex;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;background:var(--blackout);padding:2rem;border-bottom:1px solid var(--line-light)}
}

/* ---------- folder-tab header ---------- */
.hcells{display:flex;align-items:stretch;min-height:66px}
.hcells .logo{display:flex;align-items:center;padding:0 clamp(1.25rem,3vw,2.2rem);flex:1}
.hnav{display:flex;align-items:flex-end;gap:5px}
.hcell{
  display:flex;align-items:center;align-self:flex-end;
  padding:.72rem clamp(1.1rem,2.4vw,2rem) .78rem;
  background:rgba(239,234,231,.08);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--white);
  transition:background .3s,color .3s,padding .25s ease;
  position:relative;
}
.hcell:hover{background:rgba(239,234,231,.18);padding-top:.95rem}
.hcell.active{background:var(--orange);color:var(--blackout);padding-top:.95rem}
.hcell--cta{margin-left:5px;margin-right:5px}
.hcell--cta.active{background:var(--orange);color:var(--blackout);padding-top:.95rem}
.hburger{
  background:var(--emerald);border:0;border-left:1px solid var(--line-light);
  width:58px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;flex-direction:column;gap:5px;
}
.hburger span{display:block;width:20px;height:1.5px;background:var(--white);transition:transform .3s}
.hburger:hover span{transform:scaleX(.7)}
.nav-drop{
  display:none;position:absolute;top:100%;left:0;right:0;
  background:var(--blackout);border-bottom:1px solid var(--line-light);
  padding:1.5rem clamp(1.25rem,4vw,3rem);flex-direction:column;
}
.nav-drop.open{display:flex}
.nav-drop a{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--white);padding:.85rem 0;border-bottom:1px solid var(--line-light);
}
.nav-drop a:hover,.nav-drop a.active{color:var(--orange)}
@media(max-width:860px){.hnav,.hcell--cta{display:none}}

/* ---------- Glass-style quote band (testimonials) ---------- */
.quote-band{background:var(--white);text-align:center}
.quote-stack{display:grid;max-width:820px;margin:0 auto}
.quote-item{grid-area:1/1;opacity:0;transition:opacity 1s ease;pointer-events:none}
.quote-item.on{opacity:1;pointer-events:auto}
.quote-item blockquote{
  font-family:var(--serif);font-weight:400;color:var(--orange);
  font-size:clamp(1.35rem,2.5vw,2.1rem);line-height:1.45;letter-spacing:-.005em;
}
.quote-item .sig{display:block;margin-top:2.4rem;color:var(--orange);opacity:.85}
.quote-dots{display:flex;gap:.6rem;justify-content:center;margin-top:2.8rem}
.quote-dots button{
  width:7px;height:7px;border-radius:50%;border:1px solid var(--orange);
  background:transparent;cursor:pointer;padding:0;transition:background .3s;
}
.quote-dots button.on{background:var(--orange)}

/* ---------- Glass-style editorial (About) ---------- */
.editorial{background:#FCFBF8;overflow:hidden}
.edit-grid{
  display:grid;grid-template-columns:.42fr 1.05fr 1fr;
  gap:0 clamp(2rem,4vw,4.5rem);align-items:center;
}
.edit-crop{
  margin-left:calc(-1*clamp(1.25rem,4vw,3rem));
  height:72%;align-self:center;overflow:hidden;
}
.edit-crop img{width:100%;height:100%;object-fit:cover;object-position:70% center}
.edit-portrait{aspect-ratio:4/5;overflow:hidden}
.edit-portrait img{width:100%;height:100%;object-fit:cover}
.edit-copy{position:relative;padding-block:clamp(2rem,4vw,3rem)}
.edit-title{
  font-family:var(--serif);font-style:italic;font-weight:400;color:var(--emerald);
  font-size:clamp(2.4rem,5.2vw,4.4rem);line-height:1.02;letter-spacing:-.015em;
  position:relative;z-index:2;margin-left:calc(-1*clamp(3rem,12vw,11rem));
  margin-bottom:clamp(2rem,4vw,3.5rem);
}
.edit-kicker{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--orange);display:block;margin-bottom:1.4rem;line-height:1.8;
}
.edit-copy p{color:var(--emerald);font-size:1.08rem;max-width:44ch}
.edit-copy p+p{margin-top:1.1rem}
@media(max-width:960px){
  .edit-grid{grid-template-columns:1fr;padding:0 clamp(1.25rem,4vw,3rem)}
  .edit-crop{display:none}
  .edit-title{margin-left:0}
  .edit-portrait{max-width:480px}
}

/* ---------- hero (Blackout with emerald glow) ---------- */
.hero{background:var(--blackout);color:var(--white);overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(2rem,5vw,4rem);
  align-items:center;padding-top:clamp(4rem,8vw,7.5rem);padding-bottom:clamp(4rem,8vw,7.5rem)}
@media(max-width:860px){.hero .wrap{grid-template-columns:1fr}}
.hero h1{margin-bottom:1.8rem}
.hero .lead{margin-bottom:2.4rem}
.hero-cta{display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
.hero-script{display:inline-block;line-height:.95;margin-left:.4rem;white-space:nowrap}

/* ---------- photos ---------- */
.photo{position:relative;overflow:hidden;background:var(--blackout-2)}
.photo img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.photo:hover img{transform:scale(1.04)}
.photo--tall{aspect-ratio:3/4}
.photo--wide{aspect-ratio:16/10}
.photo .ph-label{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:1.5rem;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--impression);
  border:1px dashed rgba(126,150,150,.5);z-index:0;
}
.photo img{position:relative;z-index:1}
.photo img.missing{display:none}
.photo--frame{ /* editorial frame — flat & calm */
  border-radius:2px;box-shadow:0 16px 44px rgba(14,20,18,.10);
}
.polaroid{
  background:#fff;padding:1rem 1rem 3.2rem;
  box-shadow:0 14px 36px rgba(14,20,18,.10);
}
.polaroid .photo{aspect-ratio:3/4}
.polaroid figcaption{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  text-align:center;margin-top:1.1rem;color:var(--emerald);
}

/* ---------- marquee ---------- */
.marquee{background:var(--white);border-block:1px solid var(--line);
  overflow:hidden;padding:1.05rem 0;white-space:nowrap}
.marquee--orange{background:var(--orange);border:0}
.marquee--orange .marquee-track{color:var(--blackout)}
.marquee--black{background:var(--blackout);border-block:1px solid var(--line-light)}
.marquee--black .marquee-track{color:var(--white)}
.marquee-track{
  display:inline-block;font-family:var(--serif);font-size:1.35rem;
  letter-spacing:.28em;text-transform:uppercase;color:var(--emerald);
  animation:marquee 30s linear infinite;
}
.marquee-track .tilde{color:var(--orange);margin:0 1.2rem}
.marquee--orange .tilde{color:var(--white)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- client logo strip (Blackout) ---------- */
.logos{background:var(--blackout);padding:clamp(3.5rem,7vw,5.5rem) 0;overflow:hidden}
.logos .kicker{text-align:center;margin-bottom:2.6rem}
.logo-row{display:flex;gap:clamp(3rem,6vw,5.5rem);align-items:center;width:max-content;
  animation:marquee 55s linear infinite;padding-block:.9rem}
.logo-row--rev{animation-direction:reverse}
.logo-row img{
  height:64px;width:auto;max-width:230px;object-fit:contain;
  filter:brightness(0) invert(1);opacity:.85;
  transition:opacity .3s;
}
.logo-row img.opq{ /* opaque JPG/PNG — knock the background out */
  filter:grayscale(1) invert(1) contrast(1.25) brightness(1.2);
  mix-blend-mode:screen;
}
.logo-row img:hover{opacity:1}
.logos:hover .logo-row{animation-play-state:paused}

/* ---------- editorial floats + script accent ---------- */
.statement-stage{position:relative}
.float-photo{
  position:absolute;width:clamp(140px,14vw,210px);overflow:hidden;
  box-shadow:0 12px 32px rgba(14,20,18,.10);border-radius:2px;
}
.float-photo img{width:100%;height:100%;object-fit:cover}
.float-photo--tl{top:-2rem;left:9%;aspect-ratio:4/5}
.float-photo--r{top:34%;right:8%;aspect-ratio:3/4;width:clamp(160px,16vw,240px)}
@media(max-width:1000px){.float-photo{display:none}}
.script{
  font-family:"Mrs Saint Delafield",cursive;color:var(--orange);
  font-size:clamp(2.4rem,4vw,3.4rem);line-height:1.1;display:inline-block;
  transform:rotate(-4deg);font-weight:400;
}
.script--flat{transform:none}
.script--onphoto{position:absolute;bottom:1.1rem;left:1.4rem;z-index:3;color:var(--white);
  text-shadow:0 2px 14px rgba(14,20,18,.5)}
.script--right{display:block;text-align:right;padding-right:clamp(1rem,4vw,3rem);margin-bottom:-1.2rem}
.script--sm{font-size:clamp(1.9rem,3vw,2.6rem)}

/* ---------- big statement ---------- */
.statement{text-align:center}
.statement h2{font-size:clamp(1.9rem,4.6vw,3.8rem);max-width:22ch;margin:0 auto;line-height:1.22}
.statement .caps{font-family:var(--mono);font-size:.55em;letter-spacing:.14em;
  text-transform:uppercase;vertical-align:.18em;color:var(--orange)}
.statement-sub{font-family:var(--mono);font-size:.7rem;letter-spacing:.24em;
  text-transform:uppercase;margin-top:2.4rem;color:var(--impression)}

/* ---------- quicklinks ---------- */
.quicklinks li{border-top:1px solid var(--line-light)}
.quicklinks li:last-child{border-bottom:1px solid var(--line-light)}
.quicklinks a{
  display:grid;grid-template-columns:1.2fr 1fr 3.5rem;align-items:baseline;gap:1.5rem;
  padding:2.2rem .5rem;transition:padding .3s,color .3s;
}
.quicklinks .ql-num{text-align:right}
@media(max-width:700px){.quicklinks a{grid-template-columns:1fr 3rem}}
.quicklinks a:hover{padding-left:1.5rem;color:var(--orange)}
.quicklinks .ql-title{font-family:var(--serif);font-size:clamp(1.5rem,3.4vw,2.6rem)}
.quicklinks .ql-num{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;color:var(--impression)}
.quicklinks .ql-desc{font-size:1rem;color:rgba(242,239,234,.55);max-width:38ch}
@media(max-width:700px){.quicklinks .ql-desc{display:none}}

/* ---------- stacked folders (Keren Elise style) ---------- */
.folder-stack{padding-bottom:2rem}
.folder{
  position:sticky;top:calc(110px + var(--i)*3.4rem);
  display:block;background:var(--folder-bg,var(--white));color:var(--ink);
  border-radius:0 14px 14px 14px;
  padding:clamp(1.8rem,3.5vw,3rem);
  margin-bottom:clamp(2.5rem,5vw,4rem);
  box-shadow:0 -14px 34px rgba(14,20,18,.16);
  transition:transform .35s ease;
}
.folder:hover{transform:translateY(-5px)}
.folder-tab{
  position:absolute;top:-30px;left:0;height:30px;min-width:132px;
  background:var(--folder-bg,var(--white));border-radius:10px 10px 0 0;
  display:flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.22em;color:var(--orange);
}
.folder-tab::after{
  content:"";position:absolute;right:-16px;bottom:0;width:16px;height:30px;
  background:var(--folder-bg,var(--white));
  clip-path:polygon(0 0,100% 100%,0 100%);
}
.folder--1{--folder-bg:#EFEAE7}
.folder--2{--folder-bg:#E5DFD9}
.folder--3{--folder-bg:#DFD8CD}
.folder-inner{display:grid;grid-template-columns:1fr auto auto;gap:clamp(1.5rem,3vw,3rem);align-items:center}
@media(max-width:760px){.folder-inner{grid-template-columns:1fr}}
.folder h3{font-size:clamp(1.5rem,3vw,2.3rem);margin-bottom:.6rem}
.folder p{font-size:.95rem;color:rgba(20,32,28,.75);max-width:52ch}
.folder-thumb{width:clamp(120px,14vw,180px);aspect-ratio:4/5;overflow:hidden;border-radius:2px}
.folder-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.folder:hover .folder-thumb img{transform:scale(1.05)}
.folder-arrow{
  font-family:var(--mono);font-size:1.1rem;color:var(--orange);
  transition:transform .35s ease;align-self:center;
}
.folder:hover .folder-arrow{transform:translateX(6px)}
@media(max-width:760px){.folder-thumb{display:none}.folder-arrow{display:none}}

/* ---------- founder ---------- */
.founder-quote{
  font-family:var(--serif);font-style:italic;font-size:clamp(1.15rem,2vw,1.5rem);
  line-height:1.5;border-left:2px solid var(--orange);padding-left:1.5rem;margin:2rem 0;
}
.sig{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--impression)}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;text-align:center}
@media(max-width:860px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat-num{font-family:var(--serif);font-size:clamp(2.6rem,5vw,4.2rem);color:var(--orange);line-height:1}
.stat-label{font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;margin-top:.9rem;color:rgba(242,239,234,.65)}

/* ---------- platforms strip ---------- */
.platforms{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(1.5rem,4vw,3.5rem);
  font-family:var(--mono);font-size:.76rem;letter-spacing:.24em;text-transform:uppercase;color:var(--emerald)}
.platforms span{opacity:.8}
.platforms .tilde{color:var(--orange)}

/* ---------- testimonials ---------- */
.testis{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,3vw,3rem)}
@media(max-width:860px){.testis{grid-template-columns:1fr}}
.testi{background:var(--white-soft);padding:clamp(2rem,4vw,3.2rem);border-radius:2px;
  border-top:1px solid rgba(3,64,57,.35)}
.testi-head{font-family:var(--serif);font-style:italic;font-size:1.55rem;line-height:1.4;margin-bottom:1.2rem}
.testi p{font-size:1.05rem;color:rgba(20,32,28,.8)}
.testi .sig{display:block;margin-top:1.4rem;color:var(--orange)}
.section--black .testi{background:var(--blackout-2);border-top-color:rgba(228,113,63,.5)}
.section--black .testi p{color:rgba(242,239,234,.7)}

/* ---------- service detail blocks ---------- */
.svc-block{border-top:1px solid var(--line);padding:3rem 0;display:grid;
  grid-template-columns:120px 1fr 1.2fr;gap:2rem;align-items:start}
@media(max-width:860px){.svc-block{grid-template-columns:1fr;gap:.8rem}}
.svc-num{font-family:var(--mono);font-size:.76rem;letter-spacing:.2em;color:var(--orange)}
.svc-block h3{font-size:clamp(1.4rem,2.4vw,1.9rem)}
.svc-block p{color:rgba(20,32,28,.8)}

/* ---------- hover-reveal service list (Willow & White style) ---------- */
.svc-stage{display:grid;grid-template-columns:.75fr 1.25fr;gap:clamp(2.5rem,5vw,5rem);align-items:start}
@media(max-width:900px){.svc-stage{grid-template-columns:1fr}}
.svc-photo-panel{position:sticky;top:110px;aspect-ratio:3/4;overflow:hidden;border-radius:2px;background:var(--white-soft)}
.svc-photo-panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease}
.svc-photo-panel img.on{opacity:1}
@media(max-width:900px){.svc-photo-panel{display:none}}
.svc-list{border-bottom:1px solid var(--line)}
.svc-item{border-top:1px solid var(--line)}
.svc-row{display:flex;align-items:baseline;gap:1.6rem;padding:1.8rem .25rem;cursor:default;transition:padding-left .35s ease}
.svc-item:hover .svc-row{padding-left:1rem}
.svc-row .num{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;color:var(--impression);min-width:3.2rem}
.svc-row h3{font-size:clamp(1.35rem,2.4vw,1.9rem);transition:color .35s ease;flex:1}
.svc-item:hover .svc-row h3{color:var(--orange)}
.svc-row .arrow{font-family:var(--mono);color:var(--orange);opacity:0;transform:translateX(-8px);transition:opacity .35s,transform .35s}
.svc-item:hover .arrow{opacity:1;transform:none}
.svc-body{max-height:0;opacity:0;overflow:hidden;
  transition:max-height .55s ease,opacity .45s ease,padding-bottom .55s ease;
  padding-left:calc(3.2rem + 1.6rem + .25rem);max-width:58ch}
.svc-body p{font-size:1.05rem;color:rgba(20,32,28,.78)}
.svc-item:hover .svc-body,.svc-item:focus-within .svc-body{max-height:220px;opacity:1;padding-bottom:1.8rem}
@media(hover:none),(max-width:700px){
  .svc-body{max-height:none;opacity:1;padding-bottom:1.8rem;padding-left:0}
  .svc-row{padding-bottom:.4rem}
}
@media(max-width:700px){.svc-body{padding-left:0}}

/* why-choose grid — mini folder cards */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3.4rem 1.6rem;margin-top:3rem}
@media(max-width:860px){.why-grid{grid-template-columns:1fr;gap:3.2rem}}
.why-card{
  background:var(--white);color:var(--ink);
  padding:2rem 2rem 2.2rem;border-radius:0 12px 12px 12px;
  position:relative;transition:transform .35s ease;
  filter:drop-shadow(0 12px 26px rgba(9,19,17,.22));
}
.why-card:hover{transform:translateY(-6px)}
.why-card .num{
  position:absolute;top:-26px;left:0;height:27px;min-width:96px;
  background:var(--white);border-radius:12px 0 0 0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.22em;color:var(--orange);
  margin:0;
}
.why-card .num::after{ /* smooth folder slant, flush with the card */
  content:"";position:absolute;top:0;right:-11px;width:24px;height:100%;
  background:var(--white);transform:skewX(26deg);transform-origin:bottom left;
  border-radius:0 9px 0 0;
}
.why-card h3{font-size:1.3rem;margin-bottom:.5rem;color:var(--emerald)}
.why-card p{font-size:1rem;color:rgba(20,32,28,.75)}

/* ---------- process (editorial numbered steps) ---------- */
.process{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(2rem,4vw,3.5rem);counter-reset:step}
@media(max-width:860px){.process{grid-template-columns:1fr}}
.step{border-top:1px solid rgba(229,114,64,.5);padding-top:1.6rem;position:relative;
  counter-increment:step;transition:transform .35s ease}
.step:hover{transform:translateY(-6px)}
.step::before{ /* giant outline numeral */
  content:counter(step,decimal-leading-zero);
  display:block;font-family:var(--serif);
  font-size:clamp(3.8rem,7vw,6rem);line-height:1;margin-bottom:1rem;
  color:var(--orange);
}
.step:not(:last-child)::after{
  content:"\2192";position:absolute;right:-2.2rem;top:38%;
  font-family:var(--mono);font-size:1.4rem;color:var(--orange);opacity:.55;
}
@media(max-width:860px){.step:not(:last-child)::after{display:none}}
.step .num{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;color:var(--orange)}
.step h3{margin:.6rem 0 .4rem;font-size:clamp(1.4rem,2.2vw,1.8rem)}
.step p{font-size:1.02rem;color:rgba(20,32,28,.8)}
.section--green .step p,.section--black .step p{color:rgba(242,239,234,.68)}

/* ---------- capability list (numbered ledger) ---------- */
.cap-list{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(1.5rem,3vw,3rem);counter-reset:cap;align-self:center}
@media(max-width:700px){.cap-list{grid-template-columns:1fr}}
.cap-list li{
  counter-increment:cap;position:relative;
  border-bottom:1px solid var(--line-light);
  padding:1.05rem .5rem 1.05rem 3.4rem;font-size:1.05rem;
  transition:padding-left .3s ease,color .3s ease;
}
.cap-list li:nth-child(1),.cap-list li:nth-child(2){border-top:1px solid var(--line-light)}
@media(max-width:700px){.cap-list li:nth-child(2){border-top:0}}
.cap-list li::before{
  content:counter(cap,decimal-leading-zero);
  position:absolute;left:.5rem;top:1.3rem;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;color:var(--orange);
}
.cap-list li::after{
  content:"\2192";position:absolute;right:.6rem;top:1.02rem;
  font-family:var(--mono);color:var(--orange);
  opacity:0;transform:translateX(-8px);transition:opacity .3s,transform .3s;
}
.cap-list li:hover{padding-left:4rem;color:var(--orange)}
.cap-list li:hover::after{opacity:1;transform:none}

/* ---------- CTA band ---------- */
.cta-band{background:var(--orange);color:var(--blackout);text-align:center}
.cta-band .kicker{color:var(--blackout)}
.cta-band h2{max-width:18ch;margin:0 auto 2.2rem}
.cta-band .btn{color:var(--blackout)}
.cta-band .btn:hover{background:var(--blackout);border-color:var(--blackout);color:var(--white)}

/* ---------- forms ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
@media(max-width:700px){.form-grid{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:.45rem}
.field--full{grid-column:1/-1}
.field label{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--emerald)}
.field input,.field select,.field textarea{
  font-family:var(--sans);font-size:.95rem;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--line);
  padding:.7rem .1rem;outline:none;transition:border-color .3s;border-radius:0;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--orange)}
.field textarea{min-height:120px;resize:vertical}

/* ---------- footer (Blackout) ---------- */
.site-footer{background:var(--blackout);color:var(--white)}
.footer-top{padding:clamp(4rem,8vw,6.5rem) 0;border-bottom:1px solid var(--line-light);
  display:grid;grid-template-columns:auto 1.3fr auto;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media(max-width:1000px){.footer-top{grid-template-columns:auto 1fr}}
@media(max-width:860px){.footer-top{grid-template-columns:1fr}}
.footer-phone{position:relative;width:clamp(190px,17vw,260px);
  margin-top:calc(-1*clamp(6rem,11vw,10rem));z-index:5;align-self:start}
.footer-phone img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.footer-phone .script{position:absolute;right:-.5rem;bottom:-2.6rem;white-space:nowrap}
@media(max-width:1000px){.footer-phone{display:none}}
.footer-top .monogram{height:120px;width:auto}
.footer-top h2{font-size:clamp(1.4rem,2.6vw,2.1rem);line-height:1.4;max-width:34ch;font-weight:400}
.footer-mid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:2.5rem;padding:3.5rem 0;border-bottom:1px solid var(--line-light)}
@media(max-width:860px){.footer-mid{grid-template-columns:1fr 1fr}}
.footer-col h4{font-family:var(--mono);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--impression);margin-bottom:1.2rem}
.footer-col a{display:block;font-size:1rem;padding:.28rem 0;color:rgba(242,239,234,.82)}
.footer-col a:hover{color:var(--orange)}
.newsletter-form{display:flex;flex-direction:column;gap:1rem;max-width:320px}
.newsletter-form input{
  background:transparent;border:0;border-bottom:1px solid var(--line-light);
  color:var(--white);padding:.6rem .1rem;font-family:var(--sans);outline:none;border-radius:0;
}
.newsletter-form input::placeholder{color:rgba(242,239,234,.4)}
.footer-bottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:1.6rem 0;font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(242,239,234,.45)}

/* giant wordmark — Glass-template style sign-off */
.footer-giant{padding:clamp(2rem,5vw,4rem) clamp(.8rem,2vw,1.5rem) clamp(1rem,2.5vw,2rem)}
.footer-giant img{width:100%;height:auto;display:block;opacity:0;
  transform:translateY(24px);transition:opacity 1s ease .1s,transform 1s ease .1s}
.footer-giant img.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.footer-giant img{opacity:1;transform:none}}

/* ---------- page hero (inner pages) ---------- */
.page-hero{background:var(--blackout);color:var(--white);
  padding:clamp(4.5rem,9vw,7.5rem) 0 clamp(3.5rem,7vw,5.5rem)}
.page-hero h1{max-width:16ch}
.page-hero .lead{color:rgba(242,239,234,.72);margin-top:1.6rem}

/* ---------- WhatsApp float ---------- */
.top-float{
  position:fixed;right:1.4rem;bottom:1.4rem;z-index:60;border:0;cursor:pointer;
  width:54px;height:54px;border-radius:50%;background:var(--emerald);color:var(--white);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:1.3rem;
  box-shadow:0 10px 26px rgba(0,0,0,.3);transition:transform .3s,background .3s,opacity .4s;
  opacity:0;pointer-events:none;
}
.top-float.show{opacity:1;pointer-events:auto}
.top-float:hover{transform:scale(1.08);background:var(--orange);color:var(--blackout)}

/* ---------- utility ---------- */
.center{text-align:center}
.mt-2{margin-top:2rem}.mt-3{margin-top:3rem}.mb-2{margin-bottom:2rem}
.section-head{margin-bottom:clamp(2.5rem,5vw,4rem)}
.list-check li{padding:.45rem 0 .45rem 1.8rem;position:relative;font-size:.98rem}
.list-check li::before{content:"→";position:absolute;left:0;color:var(--orange);font-family:var(--mono)}

/* ---------- quicklink hover image ---------- */
.ql-hover-img{
  position:fixed;width:210px;aspect-ratio:3/4;object-fit:cover;
  pointer-events:none;z-index:45;opacity:0;border-radius:2px;
  transform:translate(-50%,-50%) scale(.94);
  transition:opacity .35s ease,transform .35s ease;
  box-shadow:0 16px 40px rgba(14,20,18,.22);
}
.ql-hover-img.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
@media(hover:none){.ql-hover-img{display:none}}

/* ---------- Sheridan-style folder cards (Services) ---------- */
.fstack{padding-bottom:1rem}
.fcard{position:sticky;top:calc(96px + var(--i)*2.4rem);margin-bottom:clamp(2.2rem,4vw,3.2rem);
  filter:drop-shadow(0 -10px 26px rgba(9,19,17,.14))}
.ftabs{display:flex;align-items:flex-end}
.ftab{
  flex:1;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  padding:.85rem 1rem;border-radius:16px 16px 0 0;color:var(--ink);
  background:var(--white);box-shadow:inset 0 0 0 1px rgba(9,19,17,.06);
}
.ftab--active{background:var(--fc-bg);color:var(--fc-ink);box-shadow:none}
.fbody{background:var(--fc-bg);color:var(--fc-ink);padding:clamp(1.6rem,3.5vw,2.8rem) clamp(1.6rem,4vw,3.2rem) clamp(2rem,4vw,3rem)}
.fmeta{display:flex;justify-content:space-between;gap:1rem;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;
  padding-bottom:.7rem;border-bottom:1.5px solid currentColor;margin-bottom:clamp(1.4rem,3vw,2.2rem)}
.fbody h3{font-size:clamp(2rem,4vw,3.2rem);margin-bottom:.8rem;color:inherit}
.fbody p{max-width:58ch;font-size:1.1rem;opacity:.9}
.fchip{
  display:inline-block;margin-top:1.6rem;background:var(--fc-chip,var(--orange));color:var(--fc-chip-ink,var(--blackout));
  font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  padding:.6rem 1.2rem;transition:transform .3s ease,opacity .3s;
}
.fcard:hover .fchip{transform:translateX(6px)}
/* color schemes */
.fcard--white {--fc-bg:var(--white);   --fc-ink:var(--ink)}
.fcard--orange{--fc-bg:var(--orange);  --fc-ink:var(--blackout);--fc-chip:var(--blackout);--fc-chip-ink:var(--white)}
.fcard--green {--fc-bg:var(--emerald); --fc-ink:var(--white)}
.fcard--place {--fc-bg:var(--placement);--fc-ink:var(--blackout)}
.fcard--sage  {--fc-bg:var(--impression);--fc-ink:var(--blackout);--fc-chip:var(--blackout);--fc-chip-ink:var(--white)}
.fcard--black {--fc-bg:var(--blackout-2);--fc-ink:var(--white)}
@media(max-width:700px){.ftab{font-size:.56rem;padding:.7rem .5rem;letter-spacing:.1em}}

/* ---------- full-bleed photo banners ---------- */
.banner{position:relative;display:flex;align-items:flex-end;min-height:62vh;
  background:var(--blackout);color:var(--white);overflow:hidden}
.banner--tall{min-height:80vh}
.banner-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.banner-scrim{position:absolute;inset:0;background:rgba(9,19,17,.44)}
.banner .wrap{position:relative;z-index:2;padding-block:clamp(3rem,6vw,5rem);width:100%}
.banner .lead{color:rgba(239,234,231,.88)}
.banner .kicker{color:var(--orange)}
/* ---------- legal pages (full-width editorial) ---------- */
.legal-band{background:var(--blackout);color:var(--white);
  padding:clamp(4.5rem,9vw,7rem) clamp(1.5rem,5vw,5rem) clamp(3rem,6vw,4.5rem)}
.legal-band h1{max-width:none}
.legal-updated{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--impression)}
.legal-body{padding:clamp(1rem,3vw,2.5rem) clamp(1.5rem,5vw,5rem) clamp(4rem,7vw,6rem)}
.legal-sec{display:grid;grid-template-columns:minmax(240px,1fr) 2.3fr;
  gap:clamp(1.5rem,5vw,6rem);border-top:1px solid var(--line);
  padding:clamp(2.2rem,4.5vw,3.6rem) 0}
.legal-sec:first-of-type{border-top:0}
.legal-idx h2{font-size:clamp(1.7rem,2.8vw,2.4rem);color:var(--emerald);
  position:sticky;top:96px;margin:0}
.legal-txt{max-width:75ch}
.legal-txt h3{font-size:clamp(1.25rem,2vw,1.55rem);margin:1.8rem 0 .6rem;color:var(--emerald)}
.legal-txt p{margin:.75rem 0}
.legal-txt ul{margin:.75rem 0 .75rem 1.4rem;list-style:disc}
.legal-txt li{margin:.35rem 0}
@media(max-width:860px){.legal-sec{grid-template-columns:1fr;gap:.8rem}.legal-idx h2{position:static}}
.footer-bottom a:hover{color:var(--orange)}

/* ---------- split hero: content left, full-block image right ---------- */
.split-hero{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100vh - 66px);
  background:var(--white);color:var(--ink)}
.split-hero-content{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(3rem,6vw,6rem) clamp(1.5rem,5vw,5.5rem)}
.split-hero-content h1{color:var(--ink)}
.split-hero-content .lead{color:rgba(20,32,28,.8)}
.split-hero-img{position:relative;overflow:hidden}
.split-hero-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media(max-width:860px){
  .split-hero{grid-template-columns:1fr;min-height:0}
  .split-hero-img{height:58vh;position:relative}
}
/* ---------- About: couch photo overflowing into the green section above ---------- */
.overlap-photo{margin-top:calc(-1*clamp(6rem,14vw,11rem));position:relative;z-index:5;
  height:calc(100% + clamp(6rem,14vw,11rem));max-width:520px;width:100%}
@media(max-width:860px){.overlap-photo{margin-top:calc(-1*clamp(3rem,8vw,5rem))}}

/* ---------- playful UI elements (Impression #7E9696) ---------- */
::selection{background:rgba(126,150,150,.55);color:var(--blackout)}

/* text-selection highlight with handles */
.hl-select{position:relative;background:rgba(126,150,150,.38);padding:0 .1em;white-space:nowrap;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}
.hl-h{position:absolute;width:2.5px;top:-.1em;bottom:-.1em;background:var(--impression)}
.hl-h::after{content:"";position:absolute;width:9px;height:9px;border-radius:50%;
  background:var(--impression);left:50%;transform:translateX(-50%)}
.hl-h--l{left:-3px}.hl-h--l::after{top:-8px}
.hl-h--r{right:-3px}.hl-h--r::after{bottom:-8px}

/* pixel cursor perched on a button */
.btn--cursor{position:relative}
.ui-cursor{position:absolute;right:-13px;bottom:-15px;width:22px;height:auto;pointer-events:none}

/* loading dots ring */
.ui-load{display:inline-flex;align-items:center;gap:.8rem;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--impression)}
.ui-load::before{content:"";width:22px;height:22px;border-radius:50%;
  border:3px dotted var(--impression);animation:uispin 1.6s steps(12) infinite}
@keyframes uispin{to{transform:rotate(360deg)}}

strong{font-weight:700}

/* ---------- mini folder cards (About — same aesthetic as Services) ---------- */
.why-grid .fcard-mini{position:relative;transition:transform .35s ease;
  filter:drop-shadow(0 12px 26px rgba(9,19,17,.22))}
.fcard-mini:hover{transform:translateY(-6px)}
.fcard-mini .ftabs{display:flex}
.fcard-mini .ftab{flex:0 0 auto;min-width:96px;padding:.7rem 1.5rem;
  border-radius:16px 16px 0 0;box-shadow:none;
  background:var(--fc-bg,var(--white));color:var(--orange)}
.fcard-mini .fbody{background:var(--fc-bg,var(--white));color:var(--fc-ink,var(--ink));
  padding:1.7rem 1.9rem 2rem;border-radius:0 14px 14px 14px}
.fcard-mini h3{font-size:1.35rem;margin-bottom:.45rem;color:inherit}
.fcard-mini p{font-size:1rem;opacity:.85}
.fcard-mini.fcard--black .ftab,.fcard-mini.fcard--green .ftab{color:var(--orange)}

.script--green{color:var(--emerald)}

/* ---------- contact form folder card ---------- */
.form-card{position:relative;background:var(--white-soft);
  --f3-bg:var(--white-soft);--f3-ink:var(--ink);
  border-radius:18px;padding:clamp(1.8rem,3.5vw,2.8rem);
  margin-top:44px;filter:drop-shadow(0 14px 32px rgba(9,19,17,.12))}
.form-card-tab{position:absolute;top:-31px;left:0;height:32px;padding:0 1.6rem;
  background:var(--white-soft);border-radius:14px 14px 0 0;
  display:flex;align-items:center;gap:.7rem;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--orange)}
.form-card .field label{color:var(--emerald)}
.form-card .field input,.form-card .field select,.form-card .field textarea{
  border-bottom:1.5px solid rgba(2,64,57,.28);padding:.75rem .1rem;font-size:1rem}
.form-card .field input:focus,.form-card .field select:focus,.form-card .field textarea:focus{
  border-color:var(--orange)}
.form-card .field select{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:1.8rem;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237E9696' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .3rem center}
.form-card .btn{width:100%;text-align:center;margin-top:.6rem;padding-block:1.05rem}
.form-card .form-grid{gap:1.5rem}

/* ---------- classic folder cards (About — single colour, tab in silhouette) ---------- */
.folder2{position:relative;background:var(--white);color:var(--ink);
  border-radius:0 18px 18px 18px;padding:1.9rem 1.9rem 2.1rem;margin-top:46px;
  transition:transform .35s ease;filter:drop-shadow(0 14px 28px rgba(9,19,17,.22))}
.folder2:hover{transform:translateY(-6px)}
.folder2-tab{position:absolute;top:-42px;left:0;height:43px;max-width:76%;
  background:var(--white);border-radius:16px 0 0 0;
  display:flex;align-items:center;gap:.75rem;padding:0 .6rem 0 1.4rem;white-space:nowrap}
.folder2-tab::after{ /* smooth folder slope */
  content:"";position:absolute;right:-24px;top:0;width:48px;height:101%;
  background:var(--white);transform:skewX(32deg);transform-origin:bottom left;
  border-radius:0 14px 0 0;z-index:-1}
.folder2-tab .num{font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;color:var(--orange)}
.folder2-tab h3{font-family:var(--serif);font-size:1rem;letter-spacing:.01em;
  color:var(--emerald);margin:0;overflow:hidden;text-overflow:ellipsis}
.folder2 p{font-size:1rem;color:rgba(20,32,28,.78);max-width:34ch}
.folder2 .fmark{position:absolute;top:1.2rem;right:1.4rem;height:34px;width:auto;opacity:.9}
@media(max-width:860px){.folder2-tab{max-width:88%}}

/* good-ads marquee in emerald */
.marquee--green{background:var(--emerald);border:0}
.marquee--green .marquee-track{color:var(--white)}
.marquee--green .tilde{color:var(--orange)}

/* full-bleed split section (image left / text right) */
.split-sec{display:grid;grid-template-columns:1fr 1fr;background:var(--white);color:var(--ink)}
.split-sec-img{position:relative;overflow:hidden;aspect-ratio:1/1}
.split-sec-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.split-sec-content{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(3rem,6vw,6rem) clamp(1.5rem,5vw,5.5rem)}
@media(max-width:860px){.split-sec{grid-template-columns:1fr}}

/* ---------- trapezoid-tab folder cards (About) ---------- */
.folder3{position:relative;border-radius:18px;margin-top:44px;
  padding:1.7rem 1.8rem 1.9rem;background:var(--f3-bg);color:var(--f3-ink);
  transition:transform .35s ease;filter:drop-shadow(0 12px 26px rgba(9,19,17,.2))}
.folder3:hover{transform:translateY(-6px)}
.folder3-tabs{position:absolute;top:-36px;left:18px;display:flex;gap:4px}
.f3tab{clip-path:polygon(14% 0,86% 0,100% 100%,0 100%);
  padding:.6rem 1.9rem .68rem;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.f3tab--active{background:var(--f3-bg);color:var(--f3-ink)}
.f3tab--a{background:var(--white)}
.f3tab--b{background:var(--impression)}
.f3meta{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding-bottom:.55rem;margin-bottom:1.1rem;border-bottom:1px solid currentColor;
  font-size:.9rem}
.f3meta .n{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em}
.f3meta .b{font-weight:700}
.folder3 h3{font-size:clamp(1.4rem,2.2vw,1.8rem);line-height:1.15;margin-bottom:.6rem;color:inherit}
.folder3 p{font-size:.98rem;opacity:.88;max-width:36ch;margin-bottom:.4rem}
.folder3 .f3arrow{position:absolute;right:1.3rem;bottom:1.1rem;width:20px;height:20px}
.folder3--orange{--f3-bg:var(--orange);--f3-ink:var(--white)}
.folder3--white {--f3-bg:var(--white); --f3-ink:var(--ink)}
.folder3--sage  {--f3-bg:var(--impression);--f3-ink:var(--blackout)}
.folder3--place {--f3-bg:var(--placement);--f3-ink:var(--blackout)}
.folder3--black {--f3-bg:var(--blackout-2);--f3-ink:var(--white)}