@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..900&family=Newsreader:opsz,wght@6..72,300..600&display=swap');

/* ==========================================================================
   Zay's Woodworks & Maintenance
   Design direction: "Timber Yard" — planed-bone surfaces, deep walnut slabs,
   brass accent taken from the logo's lettering. Signature device is the
   steel-rule tick rail (.rule), a carpenter's rule drawn in CSS.
   ========================================================================== */

:root{
  /* Surfaces */
  --bone:      #F1ECE3;
  --bone-2:    #E7E0D3;
  --walnut:    #241811;
  --walnut-2:  #33241A;
  --char:      #14100D;

  /* Accents */
  --brass:     #C8912F;
  --brass-lt:  #E2B25C;
  --oak:       #8A5A32;

  /* Text */
  --ink:       #14100D;
  --ink-soft:  #5F564C;
  --ink-onwal: #EFE7D9;
  --ink-onwal-soft: rgba(239,231,217,.66);

  --line:      rgba(20,16,13,.14);
  --line-onwal:rgba(239,231,217,.18);

  /* Type */
  --sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --prose:'Newsreader', Georgia, 'Times New Roman', serif;

  /* Metrics */
  --wrap: 1260px;
  --gut: clamp(20px, 5vw, 56px);
  --sec-y: clamp(64px, 9vw, 132px);
  --r: 2px;

  /* Motion */
  --ease:      cubic-bezier(.22,.68,.24,1);
  --ease-soft: cubic-bezier(.33,.9,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.65;
  font-variation-settings:'wdth' 100;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

::selection{ background:var(--brass); color:var(--walnut); }

:focus-visible{
  outline:2px solid var(--brass);
  outline-offset:3px;
  border-radius:1px;
}

/* --------------------------------------------------------------- type ---- */

h1,h2,h3,h4,.display{
  font-family:var(--sans);
  font-weight:800;
  font-variation-settings:'wdth' 116;
  text-transform:uppercase;
  line-height:.96;
  letter-spacing:.005em;
  margin:0;
  text-wrap:balance;
}

h1,.h1{ font-size:clamp(2.35rem, 5.4vw, 4.7rem); }
h2,.h2{ font-size:clamp(1.9rem, 4vw, 3.15rem); }
h3,.h3{ font-size:clamp(1.15rem, 1.8vw, 1.45rem); line-height:1.06; }
h4,.h4{ font-size:1rem; font-variation-settings:'wdth' 108; }

p{ margin:0 0 1.05em; }
p:last-child{ margin-bottom:0; }

.prose{
  font-family:var(--prose);
  font-size:clamp(1.02rem, 1.25vw, 1.14rem);
  line-height:1.72;
  color:var(--ink-soft);
  font-weight:350;
}
.prose strong{ color:var(--ink); font-weight:600; }
.prose--lead{
  font-size:clamp(1.1rem, 1.6vw, 1.32rem);
  line-height:1.6;
  color:var(--ink);
}

.eyebrow{
  display:block;
  font-size:.7rem;
  font-weight:600;
  font-variation-settings:'wdth' 96;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--oak);
  margin:0 0 .9rem;
}
.eyebrow--onwal{ color:var(--brass-lt); }

.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.wrap--narrow{ max-width:840px; }

/* --------------------------------------------- signature: steel rule ----- */

.rule{
  --tick: 13px;
  position:relative;
  height:12px;
  color:var(--line);
  overflow:hidden;
}
/* The ticks live on a child so the rule's own box always keeps its full
   width. Scaling the element itself to zero would hide it from the scroll
   observer, and it would never be told to draw itself in. */
.rule::before{
  content:'';
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(to right, currentColor 0 1px, transparent 1px calc(var(--tick)*5)) left bottom / 100% 11px no-repeat,
    repeating-linear-gradient(to right, currentColor 0 1px, transparent 1px var(--tick))          left bottom / 100% 5px  no-repeat,
    linear-gradient(currentColor, currentColor)                                                    left bottom / 100% 1px no-repeat;
  transform-origin:left center;
}
.rule--onwal{ color:rgba(239,231,217,.3); }
.rule--brass{ color:rgba(200,145,47,.62); }
.rule--short{ width:88px; }

/* ------------------------------------------------------------ buttons ---- */

.btn{
  --btn-bg:var(--walnut);
  --btn-fg:var(--ink-onwal);
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.95rem 1.5rem;
  background:var(--btn-bg); color:var(--btn-fg);
  font:inherit; font-weight:600; font-size:.83rem;
  font-variation-settings:'wdth' 100;
  letter-spacing:.13em; text-transform:uppercase;
  text-decoration:none; border:1px solid var(--btn-bg); border-radius:var(--r);
  cursor:pointer;
  transition:background .22s ease, color .22s ease, border-color .22s ease, transform .22s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn svg{ width:1.05em; height:1.05em; flex:none; }

.btn--wa{ --btn-bg:var(--brass); --btn-fg:var(--walnut); }
.btn--wa:hover{ --btn-bg:var(--brass-lt); }

.btn--ghost{ --btn-bg:transparent; --btn-fg:var(--ink); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--ink); }

.btn--ghost-onwal{ --btn-bg:transparent; --btn-fg:var(--ink-onwal); border-color:var(--line-onwal); }
.btn--ghost-onwal:hover{ border-color:var(--ink-onwal); }

.btn-row{ display:flex; flex-wrap:wrap; gap:.75rem; }

.textlink{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; color:var(--oak);
  padding-bottom:.35rem; border-bottom:1px solid rgba(138,90,50,.35);
  transition:color .2s ease, border-color .2s ease, gap .2s ease;
}
.textlink:hover{ color:var(--char); border-color:var(--char); gap:.75rem; }
.textlink--onwal{ color:var(--brass-lt); border-color:rgba(226,178,92,.4); }
.textlink--onwal:hover{ color:#fff; border-color:#fff; }

/* ---------------------------------------------------------------- nav ---- */

.nav{
  position:sticky; top:0; z-index:60;
  background:var(--walnut);
  border-bottom:1px solid var(--line-onwal);
}
.nav__in{
  display:flex; align-items:center; gap:1.5rem;
  min-height:82px;
  max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut);
}
.nav__logo{ display:flex; align-items:center; margin-right:auto; text-decoration:none; }
.nav__logo img{ height:54px; width:auto; }

.nav__links{ display:flex; align-items:center; gap:1.9rem; list-style:none; margin:0; padding:0; }
.nav__links a{
  text-decoration:none; color:var(--ink-onwal-soft);
  font-size:.76rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  padding:.4rem 0; position:relative;
  transition:color .2s ease;
}
.nav__links a::after{
  content:''; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background:var(--brass); transform:scaleX(0); transform-origin:left;
  transition:transform .25s ease;
}
.nav__links a:hover{ color:var(--ink-onwal); }
.nav__links a:hover::after,
.nav__links a[aria-current="page"]::after{ transform:scaleX(1); }
.nav__links a[aria-current="page"]{ color:var(--ink-onwal); }

.nav__cta{ display:inline-flex; }
.nav__cta-mob{ display:none; }

.nav__toggle{
  display:none; width:44px; height:44px; padding:0;
  background:none; border:0;
  color:var(--ink-onwal); cursor:pointer;
  margin-right:-8px;          /* pull the bars back to the optical gutter */
}
.nav__toggle span{ display:block; width:18px; height:1.5px; background:currentColor; margin:4px auto; transition:transform .25s ease, opacity .2s ease; }
.nav[data-open="true"] .nav__toggle span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
.nav[data-open="true"] .nav__toggle span:nth-child(2){ opacity:0; }
.nav[data-open="true"] .nav__toggle span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }

@media (max-width: 940px){
  .nav__in{ min-height:62px; }
  .nav__logo img{ height:36px; }
  .nav__toggle{ display:block; }
  .nav__cta{ display:none; }

  /* Two bars rather than three, and no box around them. */
  .nav__toggle span{ width:22px; margin:5px auto; }
  .nav__toggle span:nth-child(2){ display:none; }
  .nav[data-open="true"] .nav__toggle span:nth-child(1){ transform:translateY(3.25px) rotate(45deg); }
  .nav[data-open="true"] .nav__toggle span:nth-child(3){ transform:translateY(-3.25px) rotate(-45deg); }

  .nav__links{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--walnut);
    border-bottom:1px solid var(--line-onwal);
    padding:.6rem var(--gut) 1.5rem;
    max-height:0; overflow:hidden; visibility:hidden;
    transition:max-height .32s var(--ease), visibility .32s;
  }
  .nav[data-open="true"] .nav__links{ max-height:80vh; visibility:visible; overflow:auto; }

  /* No rules between items — spacing does the separating. */
  .nav__links li{ border:0; }
  .nav__links a{
    display:block;
    padding:.7rem 0;
    font-size:.95rem;
    font-weight:500;
    letter-spacing:.1em;
    color:var(--ink-onwal-soft);
  }
  .nav__links a::after{ display:none; }
  .nav__links a[aria-current="page"]{ color:var(--brass-lt); }

  /* The WhatsApp entry keeps the same rhythm as the links and is marked by
     colour alone. The floating button still carries the solid call to action,
     so a second brass slab in here was only noise. */
  .nav__cta-mob{ display:block; padding-top:.5rem; }
  .nav__cta-mob .btn{
    display:inline-flex; width:auto;
    padding:.7rem 0;
    background:none; border:0; box-shadow:none;
    color:var(--brass-lt);
    font-size:.95rem; font-weight:600; letter-spacing:.1em;
  }
  .nav__cta-mob .btn:hover{ background:none; transform:none; color:#fff; }
}

/* --------------------------------------------------------------- hero ---- */

.hero{ position:relative; background:var(--walnut); color:var(--ink-onwal); overflow:hidden; }
.hero__media{ position:absolute; inset:0; }
.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:center; opacity:.42; }
.hero__media::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(to right, rgba(36,24,17,.94) 0%, rgba(36,24,17,.72) 46%, rgba(36,24,17,.34) 100%),
    linear-gradient(to top, rgba(20,16,13,.92) 0%, transparent 55%);
}
.hero__in{
  position:relative;
  max-width:var(--wrap); margin-inline:auto; padding:clamp(88px,13vw,168px) var(--gut) clamp(52px,7vw,88px);
}
.hero__copy{ max-width:100%; }
.hero h1{ max-width:15ch; margin-bottom:1.6rem; }
.hero h1 em{
  font-style:normal; display:block; color:var(--brass);
}
.hero__sub{
  font-family:var(--prose); font-weight:300;
  font-size:clamp(1.06rem,1.6vw,1.3rem); line-height:1.62;
  color:var(--ink-onwal-soft);
  max-width:46ch; margin-bottom:2.1rem;
}
.hero .rule{ margin-top:clamp(40px,5vw,64px); color:rgba(200,145,47,.5); }

/* Compact hero for interior pages */
.phero{ position:relative; background:var(--walnut); color:var(--ink-onwal); overflow:hidden; }
.phero__media{ position:absolute; inset:0; }
.phero__media img{ width:100%; height:100%; object-fit:cover; opacity:.34; }
.phero__media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to right, rgba(36,24,17,.93), rgba(36,24,17,.6));
}
.phero__in{
  position:relative; max-width:var(--wrap); margin-inline:auto;
  padding:clamp(56px,7.5vw,96px) var(--gut) clamp(44px,6vw,72px);
}
.phero h1{ font-size:clamp(2.1rem,5vw,4rem); max-width:18ch; }
.phero__sub{
  font-family:var(--prose); font-weight:300; color:var(--ink-onwal-soft);
  font-size:clamp(1rem,1.4vw,1.18rem); line-height:1.65;
  max-width:52ch; margin-top:1.25rem;
}
.phero .rule{ margin-top:clamp(34px,5vw,58px); }

/* Breadcrumb */
.crumbs{ font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-onwal-soft); margin-bottom:1.1rem; }
.crumbs a{ text-decoration:none; color:inherit; border-bottom:1px solid transparent; }
.crumbs a:hover{ color:var(--brass-lt); border-color:currentColor; }
.crumbs span{ opacity:.5; margin-inline:.5rem; }

/* ------------------------------------------------------------ sections --- */

.sec{ padding-block:var(--sec-y); }
.sec--wal{ background:var(--walnut); color:var(--ink-onwal); }
.sec--wal .prose{ color:var(--ink-onwal-soft); }
.sec--wal .prose strong{ color:var(--ink-onwal); }
.sec--bone2{ background:var(--bone-2); }
.sec--tight{ padding-block:clamp(48px,6vw,84px); }

.sec-head{
  display:grid;
  grid-template-columns:minmax(0,180px) minmax(0,1fr);
  gap:clamp(18px,4vw,60px);
  align-items:start;
  margin-bottom:clamp(34px,4.6vw,64px);
}
.sec-head__rail{ padding-top:.35rem; }
.sec-head__rail .rule{ margin-top:.9rem; }
.sec-head__body{ max-width:62ch; }
.sec-head__body .prose{ margin-top:1.15rem; }
@media (max-width:860px){
  .sec-head{ grid-template-columns:1fr; gap:1rem; }
  .sec-head__rail .rule{ display:none; }
}

/* ------------------------------------------------------- trust strip ----- */

.trust{ background:var(--walnut-2); color:var(--ink-onwal); border-block:1px solid var(--line-onwal); }
.trust__in{
  max-width:var(--wrap); margin-inline:auto; padding:0 var(--gut);
  display:grid; grid-template-columns:repeat(4,1fr);
}
.trust__item{
  padding:1.5rem 1.4rem 1.5rem 0;
  border-left:1px solid var(--line-onwal);
  padding-left:1.4rem;
  display:flex; flex-direction:column; gap:.3rem;
}
.trust__item:first-child{ border-left:0; padding-left:0; }
.trust__k{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--brass-lt); font-weight:600; }
.trust__v{ font-size:.95rem; color:var(--ink-onwal); font-weight:500; }
@media (max-width:820px){
  .trust__in{ grid-template-columns:1fr 1fr; }
  .trust__item{ padding:1.15rem 1rem 1.15rem 1.1rem; border-top:1px solid var(--line-onwal); }
  .trust__item:nth-child(-n+2){ border-top:0; }
  .trust__item:nth-child(odd){ border-left:0; padding-left:0; }
}

/* ----------------------------------------------------- service cards ----- */

.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.6vw,22px); }
@media (max-width:940px){ .cards{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .cards{ grid-template-columns:1fr; } }

.card{
  position:relative; display:flex; flex-direction:column;
  text-decoration:none; color:inherit;
  background:var(--bone-2); border-radius:var(--r); overflow:hidden;
  transition:transform .3s ease;
}
.sec--wal .card{ background:var(--walnut-2); }
.card__media{ aspect-ratio:4/3; overflow:hidden; background:var(--walnut); }
.card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .55s cubic-bezier(.2,.7,.3,1); }
.card:hover .card__media img{ transform:scale(1.05); }
.card__body{ padding:1.35rem 1.4rem 1.5rem; display:flex; flex-direction:column; gap:.6rem; flex:1; }
.card__body .rule{ --tick:9px; width:56px; height:8px; margin-bottom:.15rem; transition:width .3s ease; }
.card:hover .card__body .rule{ width:96px; color:var(--brass); }
.card p{ font-family:var(--prose); font-weight:300; color:var(--ink-soft); font-size:.98rem; line-height:1.6; }
.sec--wal .card p{ color:var(--ink-onwal-soft); }
.card__more{
  margin-top:auto; padding-top:1rem;
  font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--oak);
}
.sec--wal .card__more{ color:var(--brass-lt); }
.card:hover{ transform:translateY(-3px); }

/* ------------------------------------------------------------ gallery ---- */

.filters{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:clamp(24px,3vw,38px); }
.filter{
  font:inherit; font-size:.73rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  padding:.62rem 1.05rem; cursor:pointer;
  background:transparent; color:var(--ink-soft);
  border:1px solid var(--line); border-radius:var(--r);
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.filter:hover{ border-color:var(--ink); color:var(--ink); }
.filter[aria-pressed="true"]{ background:var(--walnut); border-color:var(--walnut); color:var(--ink-onwal); }

.grid-work{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.4vw,18px); }
@media (max-width:900px){ .grid-work{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .grid-work{ grid-template-columns:1fr; } }

.shot{
  position:relative; display:block; padding:0; border:0; cursor:zoom-in;
  background:var(--walnut); border-radius:var(--r); overflow:hidden;
  aspect-ratio:4/3;
}
.shot img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.3,1), opacity .3s ease; }
.shot:hover img{ transform:scale(1.055); }
.shot__tag{
  position:absolute; left:0; bottom:0; right:0;
  padding:2.4rem .95rem .8rem;
  background:linear-gradient(to top, rgba(20,16,13,.86), transparent);
  color:var(--ink-onwal);
  font-size:.68rem; font-weight:600; letter-spacing:.17em; text-transform:uppercase;
  text-align:left;
  opacity:0; transform:translateY(6px);
  transition:opacity .3s ease, transform .3s ease;
}
.shot:hover .shot__tag, .shot:focus-visible .shot__tag{ opacity:1; transform:none; }
.shot[hidden]{ display:none; }

/* Lightbox */
/* Kept in the flow but inert so the fade can actually run — a display
   switch would skip the transition entirely. */
.lb{
  position:fixed; inset:0; z-index:200; display:flex;
  align-items:center; justify-content:center;
  background:rgba(15,11,8,.94); padding:clamp(16px,4vw,48px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .35s var(--ease), visibility .35s;
}
.lb[data-open="true"]{ opacity:1; visibility:visible; pointer-events:auto; }
.lb img{ max-width:100%; max-height:86vh; object-fit:contain; border-radius:var(--r); }
.lb__close{
  position:absolute; top:clamp(12px,3vw,28px); right:clamp(12px,3vw,28px);
  width:46px; height:46px; display:grid; place-items:center;
  background:transparent; color:var(--ink-onwal);
  border:1px solid var(--line-onwal); border-radius:var(--r);
  font-size:1.3rem; line-height:1; cursor:pointer;
}
.lb__close:hover{ border-color:var(--ink-onwal); }
.lb__cap{
  position:absolute; left:0; right:0; bottom:clamp(14px,3vw,30px);
  text-align:center; color:var(--ink-onwal-soft);
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
}

/* ------------------------------------------------------------- split ----- */

.split{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(28px,5vw,80px); align-items:center;
}
.split--rev .split__media{ order:2; }
.split--top{ align-items:start; }
@media (max-width:880px){
  .split{ grid-template-columns:1fr; gap:2rem; }
  .split--rev .split__media{ order:0; }
}
.split__media img{
  width:100%; height:auto;
  aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--r);
}
.split__body h2{ margin-bottom:1.2rem; }

/* Sub-headings inside a running prose column sit below the section h2 */
.split__body.prose h2{
  font-size:clamp(1.3rem, 2vw, 1.7rem);
  font-variation-settings:'wdth' 110;
  margin:2.4rem 0 .85rem;
}
.split__body.prose h2:first-child{ margin-top:0; }
.split__body.prose > p + h2{ margin-top:2.4rem; }
.split__body .rule{ margin-bottom:1.6rem; }

.stack{ display:flex; flex-direction:column; gap:1.05rem; }
.stack > img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r); }

/* Ticked list */
.ticks{ list-style:none; margin:0; padding:0; display:grid; gap:.85rem; }
.ticks li{
  position:relative; padding-left:1.65rem;
  font-family:var(--prose); font-weight:300; color:var(--ink-soft); line-height:1.6;
}
.sec--wal .ticks li{ color:var(--ink-onwal-soft); }
.ticks li::before{
  content:''; position:absolute; left:0; top:.62em;
  width:10px; height:1px; background:var(--brass);
}
.ticks li strong{ color:var(--ink); font-weight:600; font-family:var(--sans); font-size:.94em; }
.sec--wal .ticks li strong{ color:var(--ink-onwal); }

/* ----------------------------------------------------------- process ----- */

.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
@media (max-width:900px){ .steps{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .steps{ grid-template-columns:1fr; } }
.step{ padding:1.8rem 1.5rem 2rem; border-left:1px solid var(--line-onwal); }
.step:first-child{ border-left:0; padding-left:0; }
@media (max-width:900px){
  .step{ border-top:1px solid var(--line-onwal); padding-inline:1.3rem; }
  .step:nth-child(-n+2){ border-top:0; }
  .step:nth-child(odd){ border-left:0; padding-left:0; }
}
@media (max-width:520px){
  .step{ border-left:0; padding-left:0; }
  .step:nth-child(2){ border-top:1px solid var(--line-onwal); }
}
.step__n{
  font-size:.72rem; font-weight:700; letter-spacing:.2em; color:var(--brass);
  display:block; margin-bottom:1.1rem;
}
.step h3{ margin-bottom:.7rem; }
.step p{ font-family:var(--prose); font-weight:300; font-size:.97rem; line-height:1.62; color:var(--ink-onwal-soft); }

/* ------------------------------------------------------ testimonials ----- */

.quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.6vw,20px); }
@media (max-width:940px){ .quotes{ grid-template-columns:1fr; max-width:640px; } }
.quote{
  position:relative;
  background:var(--bone-2); border-radius:var(--r);
  padding:1.7rem 1.5rem 1.5rem;
  display:flex; flex-direction:column; gap:1.1rem;
}
.quote__text{ font-family:var(--prose); font-weight:300; font-size:1.03rem; line-height:1.66; color:var(--ink); }
.quote__by{ margin-top:auto; font-size:.72rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--oak); }
.quote .rule{ --tick:9px; width:52px; height:8px; }

/* Placeholder marker — delete .is-placeholder from the HTML once real
   content is in. Styling stays harmless if the class is left behind. */
.is-placeholder{ outline:1px dashed rgba(138,90,50,.45); outline-offset:0; }
.is-placeholder::after{
  content:'To confirm';
  position:absolute; top:0; right:0;
  background:var(--oak); color:var(--bone);
  font-size:.58rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  padding:.28rem .5rem;
}

/* --------------------------------------------------------- areas list ---- */

.areas{ display:grid; grid-template-columns:repeat(3,1fr); gap:0 clamp(20px,3vw,44px); list-style:none; margin:0; padding:0; }
@media (max-width:760px){ .areas{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:440px){ .areas{ grid-template-columns:1fr; } }
.areas li{
  padding:.95rem 0; border-top:1px solid var(--line);
  font-size:.95rem; display:flex; align-items:baseline; gap:.7rem;
}
.sec--wal .areas li{ border-color:var(--line-onwal); }
.areas li::before{ content:''; width:8px; height:1px; background:var(--brass); flex:none; transform:translateY(-.28em); }

/* -------------------------------------------------------------- FAQ ------ */

.faq{ border-top:1px solid var(--line); }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__q{
  width:100%; display:flex; align-items:flex-start; justify-content:space-between; gap:1.5rem;
  padding:1.35rem 0; background:none; border:0; cursor:pointer;
  font:inherit; font-weight:600; font-size:clamp(1rem,1.4vw,1.1rem); text-align:left; color:var(--ink);
  font-variation-settings:'wdth' 104;
}
.faq__q:hover{ color:var(--oak); }
.faq__ico{ flex:none; width:20px; height:20px; position:relative; margin-top:.25em; }
.faq__ico::before,.faq__ico::after{
  content:''; position:absolute; left:50%; top:50%; background:var(--oak);
  transform:translate(-50%,-50%); transition:transform .25s ease, opacity .25s ease;
}
.faq__ico::before{ width:14px; height:1.5px; }
.faq__ico::after{ width:1.5px; height:14px; }
.faq__q[aria-expanded="true"] .faq__ico::after{ transform:translate(-50%,-50%) scaleY(0); }
.faq__a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s ease; }
.faq__q[aria-expanded="true"] + .faq__a{ grid-template-rows:1fr; }
.faq__a > div{ overflow:hidden; }
.faq__a p{
  font-family:var(--prose); font-weight:300; color:var(--ink-soft);
  line-height:1.7; max-width:66ch; padding-bottom:1.4rem;
}

/* FAQ sitting on a walnut section */
.sec--wal .faq,
.sec--wal .faq__item{ border-color:var(--line-onwal); }
.sec--wal .faq__q{ color:var(--ink-onwal); }
.sec--wal .faq__q:hover{ color:var(--brass-lt); }
.sec--wal .faq__ico::before,
.sec--wal .faq__ico::after{ background:var(--brass-lt); }
.sec--wal .faq__a p{ color:var(--ink-onwal-soft); }

/* ------------------------------------------------------------- forms ----- */

.form{ display:grid; gap:1.1rem; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
@media (max-width:640px){ .form__row{ grid-template-columns:1fr; } }
.field{ display:grid; gap:.45rem; }
.field label{
  font-size:.7rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft);
}
.field input,.field select,.field textarea{
  font:inherit; font-size:1rem;
  padding:.85rem .95rem;
  color:var(--ink); background:var(--bone);
  border:1px solid var(--line); border-radius:var(--r);
  transition:border-color .2s ease, background .2s ease;
  width:100%;
}
.sec--wal .field input,.sec--wal .field select,.sec--wal .field textarea{
  background:var(--walnut-2); color:var(--ink-onwal); border-color:var(--line-onwal);
}
.field input:hover,.field select:hover,.field textarea:hover{ border-color:var(--oak); }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--brass); }
.field textarea{ resize:vertical; min-height:132px; }
.form__note{ font-size:.82rem; color:var(--ink-soft); line-height:1.55; }
.sec--wal .form__note{ color:var(--ink-onwal-soft); }
.form__err{ font-size:.78rem; color:#B3341F; min-height:1.1em; }
.sec--wal .form__err{ color:#E9926F; }

/* ------------------------------------------------------------ footer ----- */

.foot{ background:var(--char); color:var(--ink-onwal); padding-block:clamp(48px,6vw,78px) 0; }
.foot__grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:clamp(24px,3.5vw,56px);
  max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut);
}
@media (max-width:900px){ .foot__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .foot__grid{ grid-template-columns:1fr; } }
.foot__logo img{ height:64px; width:auto; margin-bottom:1.1rem; }
.foot p{ font-size:.92rem; color:var(--ink-onwal-soft); line-height:1.65; }
.foot h4{ color:var(--brass-lt); font-size:.7rem; letter-spacing:.2em; margin-bottom:1.1rem; font-weight:600; font-variation-settings:'wdth' 96; }
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:.65rem; }
.foot ul a, .foot__contact a{
  color:var(--ink-onwal-soft); text-decoration:none; font-size:.92rem;
  border-bottom:1px solid transparent; transition:color .2s ease, border-color .2s ease;
}
.foot ul a:hover, .foot__contact a:hover{ color:var(--ink-onwal); border-color:var(--brass); }
.foot__contact{ display:grid; gap:.65rem; font-size:.92rem; color:var(--ink-onwal-soft); }
.foot__social{ display:flex; gap:.6rem; margin-top:1.2rem; }
.foot__social a{
  width:40px; height:40px; display:grid; place-items:center;
  border:1px solid var(--line-onwal); border-radius:var(--r); color:var(--ink-onwal-soft);
  transition:color .2s ease, border-color .2s ease;
}
.foot__social a:hover{ color:var(--brass); border-color:var(--brass); }
.foot__social svg{ width:17px; height:17px; }
.foot__base{
  margin-top:clamp(40px,5vw,64px); border-top:1px solid var(--line-onwal);
}
.foot__base > div{
  max-width:var(--wrap); margin-inline:auto; padding:1.5rem var(--gut);
  display:flex; flex-wrap:wrap; gap:1rem 1.5rem; justify-content:space-between;
  font-size:.78rem; color:rgba(239,231,217,.45);
}
.foot__base a{ text-decoration:none; }
.foot__base a:hover{ color:var(--ink-onwal); }

/* ------------------------------------------------ floating WhatsApp ------ */

.wa-float{
  position:fixed; right:clamp(14px,2.5vw,26px); bottom:clamp(14px,2.5vw,26px); z-index:80;
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.85rem 1.15rem;
  background:var(--brass); color:var(--walnut);
  font-size:.76rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  text-decoration:none; border-radius:100px;
  box-shadow:0 10px 30px rgba(20,16,13,.34);
  transition:transform .25s ease, background .25s ease;
}
.wa-float:hover{ transform:translateY(-3px); background:var(--brass-lt); }
.wa-float svg{ width:19px; height:19px; flex:none; }
@media (max-width:560px){
  .wa-float span{ display:none; }
  .wa-float{ padding:.95rem; border-radius:50%; }
}

/* --------------------------------------------------------- utilities ---- */

.contact-list{ display:grid; gap:1.5rem; }
.contact-item{ display:grid; gap:.3rem; padding-top:1.15rem; border-top:1px solid var(--line-onwal); }
.contact-item__k{ font-size:.68rem; font-weight:600; letter-spacing:.19em; text-transform:uppercase; color:var(--brass-lt); }
.contact-item__v{ font-size:1.06rem; }
.contact-item__v a{ text-decoration:none; border-bottom:1px solid rgba(239,231,217,.25); }
.contact-item__v a:hover{ border-color:var(--brass); }
.contact-item small{ display:block; color:var(--ink-onwal-soft); font-size:.82rem; margin-top:.2rem; }

.legal h2{ font-size:clamp(1.15rem,2vw,1.4rem); margin:2.4rem 0 .9rem; }
.legal h2:first-child{ margin-top:0; }
.legal p, .legal li{ font-family:var(--prose); font-weight:300; color:var(--ink-soft); line-height:1.72; }
.legal ul{ padding-left:1.2rem; display:grid; gap:.5rem; margin:0 0 1.05em; }

.centered{ text-align:center; display:grid; justify-items:center; gap:1.5rem; }
.centered .rule{ width:120px; }

.mt-l{ margin-top:clamp(30px,4vw,52px); }
.mt-m{ margin-top:clamp(20px,2.6vw,32px); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--brass); color:var(--walnut); padding:.8rem 1.2rem;
  font-size:.8rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
}
.skip:focus{ left:0; }


/* ------------------------------------------------ about page feature ----- */
/* Layout adapted from a React/Tailwind reference: a stat row, then a tall
   image beside two stacked cards. Rebuilt in this site's own tokens rather
   than imported, since there is no React here. The page's hero uses the
   standard .phero shared with every other interior page. */

/* Stat row — facts, not invented achievement numbers. */
.stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);
  margin-top:clamp(30px,4vw,52px);
}
.stat{ padding:1.6rem 1.3rem 0 1.3rem; border-left:1px solid var(--line); }
.stat:first-child{ border-left:0; padding-left:0; }
.stat__v{
  font-family:var(--sans); font-weight:800;
  font-variation-settings:'wdth' 116;
  font-size:clamp(1.7rem, 3vw, 2.6rem); line-height:1;
  text-transform:uppercase; color:var(--ink);
}
.stat__k{
  margin-top:.65rem; font-size:.68rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--oak);
}
@media (max-width:760px){
  .stats{ grid-template-columns:1fr 1fr; }
  .stat{ padding:1.3rem 1rem 0 1.1rem; border-top:1px solid var(--line); }
  .stat:nth-child(-n+2){ border-top:0; }
  .stat:nth-child(odd){ border-left:0; padding-left:0; }
}

/* Tall image beside two stacked cards */
.feature{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(14px,1.8vw,22px);
}
@media (max-width:900px){ .feature{ grid-template-columns:1fr; } }
.feature__big{ border-radius:var(--r); overflow:hidden; min-height:300px; }
.feature__big img{ width:100%; height:100%; min-height:300px; object-fit:cover; }
.feature__col{ display:grid; gap:clamp(14px,1.8vw,22px); align-content:start; }

.fcard{
  position:relative; display:block; overflow:hidden;
  border-radius:var(--r);
  background:var(--walnut); color:var(--ink-onwal);
  text-decoration:none;
  transition:transform .35s var(--ease);
}
.fcard:hover{ transform:translateY(-4px); }
.fcard__media{ position:relative; aspect-ratio:16/9; overflow:hidden; }
.fcard__media::after{ background:var(--walnut); }
.fcard__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.3,1);
}
.fcard:hover .fcard__media img{ transform:scale(1.05); }
.fcard__body{ padding:1.4rem 1.5rem 1.6rem; display:grid; gap:.6rem; }
.fcard__body h3{ color:var(--ink-onwal); }
.fcard__body p{
  font-family:var(--prose); font-weight:300; font-size:.97rem;
  line-height:1.6; color:var(--ink-onwal-soft);
}
.fcard__more{
  margin-top:.35rem;
  font-size:.72rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--brass-lt);
}

/* Variant where the copy sits over the photo */
.fcard--overlay .fcard__media{ aspect-ratio:4/3; }
.fcard--overlay .fcard__body{
  position:absolute; left:0; right:0; bottom:0;
  padding:3rem 1.5rem 1.5rem;
  background:linear-gradient(to top, rgba(20,16,13,.92) 20%, transparent);
}


/* -------------------------------------------------- legal page extras --- */

/* Inline marker for a term the business still has to confirm. Reads clearly in
   running legal prose, where a corner tag would not. */
mark.todo{
  background:rgba(200,145,47,.22);
  color:var(--ink);
  padding:.1em .38em;
  border-bottom:1px dashed var(--oak);
  font-family:var(--sans);
  font-size:.9em;
  border-radius:1px;
}

.legal .pullquote{
  margin:1.6rem 0;
  padding:1.3rem 1.5rem;
  background:var(--walnut);
  color:var(--ink-onwal);
  border-left:3px solid var(--brass);
  border-radius:var(--r);
}
.legal .pullquote p{
  color:var(--ink-onwal);
  font-family:var(--prose);
  font-size:1.06rem;
  line-height:1.65;
  margin:0;
}

.ltable{
  width:100%;
  border-collapse:collapse;
  margin:1.4rem 0 1.6rem;
  font-size:.94rem;
  display:block;
  overflow-x:auto;
}
.ltable th,.ltable td{
  text-align:left;
  padding:.8rem .9rem;
  border-bottom:1px solid var(--line);
  vertical-align:top;
}
.ltable th{
  font-size:.68rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--oak);
  border-bottom-color:var(--ink);
}
.ltable td{ font-family:var(--prose); font-weight:300; color:var(--ink-soft); }
.ltable code{
  font-size:.9em; background:var(--bone-2);
  padding:.15em .4em; border-radius:2px;
}

/* ------------------------------------------------------ offer strip ----- */
/* A priced extra that is not one of the five core services. */

.offer{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(18px,3vw,44px);
  align-items:center;
  margin-top:clamp(18px,2.2vw,28px);
  padding:clamp(20px,2.6vw,32px);
  background:var(--walnut);
  color:var(--ink-onwal);
  border-left:3px solid var(--brass);
  border-radius:var(--r);
}
@media (max-width:760px){ .offer{ grid-template-columns:1fr; } }
.offer h3{ color:var(--ink-onwal); margin-bottom:.55rem; }
.offer p{
  font-family:var(--prose); font-weight:300;
  color:var(--ink-onwal-soft); line-height:1.6; max-width:62ch;
}
.offer__price{
  display:block;
  font-family:var(--sans); font-weight:800;
  font-variation-settings:'wdth' 116;
  font-size:clamp(1.5rem,2.6vw,2.1rem);
  line-height:1; color:var(--brass-lt);
  white-space:nowrap;
}
.offer__price small{
  display:block; margin-top:.5rem;
  font-size:.66rem; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-onwal-soft);
  font-variation-settings:'wdth' 96;
}

/* ------------------------------------------------------ cookie bar ------ */

.cookiebar{
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  background:var(--char);
  border-top:1px solid rgba(200,145,47,.45);
  box-shadow:0 -10px 34px rgba(20,16,13,.34);
}
.cookiebar[hidden]{ display:none; }
.cookiebar__in{
  max-width:var(--wrap); margin-inline:auto;
  padding:1rem var(--gut);
  display:flex; align-items:center; gap:clamp(14px,2.5vw,32px);
  flex-wrap:wrap;
}
.cookiebar p{
  margin:0; flex:1 1 320px;
  font-size:.88rem; line-height:1.55;
  color:var(--ink-onwal-soft);
}
.cookiebar a{ color:var(--brass-lt); }
.cookiebar a:hover{ color:#fff; }
.cookiebar .btn{ flex:none; }

/* Lift the floating button clear of the notice while it is showing. */
.has-cookiebar .wa-float{ bottom:calc(clamp(14px,2.5vw,26px) + 92px); }
@media (max-width:560px){
  .cookiebar__in{ padding-block:.9rem; }
  .has-cookiebar .wa-float{ bottom:calc(clamp(14px,2.5vw,26px) + 132px); }
}

/* ----------------------------------------------------- footer legal ----- */

.foot__legal{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:.4rem 1.2rem;
}
.foot__legal a{
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
.foot__legal a:hover{ color:var(--ink-onwal); border-color:var(--brass); }

/* --------------------------------------------------------- motion -------- */

/* Scroll reveals ---------------------------------------------------------- */

[data-reveal]{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .85s var(--ease), transform .85s var(--ease);
  transition-delay:var(--d, 0ms);
  will-change:opacity, transform;
}
[data-reveal].is-in{ opacity:1; transform:none; }

/* The steel rule draws itself left to right, via its ::before layer. */
[data-reveal-rule]::before{
  transform:scaleX(0);
  transition:transform 1.1s var(--ease);
  transition-delay:var(--d, 120ms);
}
[data-reveal-rule].is-in::before{ transform:scaleX(1); }

/* Photos are revealed by lifting a curtain drawn as a pseudo-element, while
   the image settles back from a slight overscale. The curtain is used instead
   of clipping the container: a clipped container has zero visible area, which
   would stop the scroll observer from ever seeing it and leave the photo
   hidden for good. The reveal drives `scale`, hover drives `transform`, so
   the two never fight over the same property. */
[data-reveal-media]{ position:relative; overflow:hidden; }
[data-reveal-media]::after{
  content:'';
  position:absolute; inset:0;
  background:var(--bone-2);
  transform:scaleY(1);
  transform-origin:bottom;
  transition:transform 1.05s var(--ease);
  transition-delay:var(--d, 0ms);
  z-index:2;
  pointer-events:none;
}
.sec--wal [data-reveal-media]::after,
.hero [data-reveal-media]::after{ background:var(--walnut); }
[data-reveal-media].is-in::after{ transform:scaleY(0); }
[data-reveal-media] img{
  scale:1.06;
  transition:scale 1.35s var(--ease-soft);
  transition-delay:var(--d, 0ms);
}
[data-reveal-media].is-in img{ scale:1; }

/* Page-load sequence ------------------------------------------------------ */

@keyframes riseIn{
  from{ opacity:0; transform:translateY(26px); }
  to  { opacity:1; transform:none; }
}
@keyframes wipeIn{
  from{ opacity:0; transform:translateY(30px); clip-path:inset(0 0 100% 0); }
  to  { opacity:1; transform:none;             clip-path:inset(0 0 0% 0); }
}
@keyframes ruleDraw{
  from{ opacity:0; transform:scaleX(0); }
  to  { opacity:1; transform:scaleX(1); }
}
@keyframes mediaIn{
  from{ opacity:0; scale:1.1; }
  to  { opacity:.42; scale:1; }
}

/* Hold the hero still until the stylesheet and fonts are up, so nothing
   flashes in an unstyled position first. Target the animated elements by
   name — hiding every child would also hide .hero__copy, which wraps two of
   them and is never animated itself. */
.hero .eyebrow, .hero h1, .hero__sub, .hero .btn-row, .hero .rule,
.phero .crumbs, .phero .eyebrow, .phero h1, .phero__sub, .phero .rule{ opacity:0; }

.is-ready .hero__media img{ animation:mediaIn 1.6s var(--ease-soft) both; }
.is-ready .hero .eyebrow  { animation:riseIn .8s var(--ease) .12s both; }
.is-ready .hero h1        { animation:wipeIn 1s  var(--ease) .22s both; }
.is-ready .hero__sub      { animation:riseIn .9s var(--ease) .42s both; }
.is-ready .hero .btn-row  { animation:riseIn .9s var(--ease) .54s both; }
.is-ready .hero .rule     { animation:ruleDraw 1.2s var(--ease) .66s both; transform-origin:left; }

/* Interior page heroes run the same beat, a touch quicker */
.is-ready .phero__media img{ animation:mediaIn 1.4s var(--ease-soft) both; }
.is-ready .phero .crumbs   { animation:riseIn .7s var(--ease) .08s both; }
.is-ready .phero .eyebrow  { animation:riseIn .7s var(--ease) .16s both; }
.is-ready .phero h1        { animation:wipeIn .9s var(--ease) .24s both; }
.is-ready .phero__sub      { animation:riseIn .8s var(--ease) .40s both; }
.is-ready .phero .rule     { animation:ruleDraw 1.1s var(--ease) .52s both; transform-origin:left; }

/* The interior hero photo sits at a lower opacity than the home hero */
.is-ready .phero__media img{ animation-name:mediaIn; opacity:.34; }
@keyframes mediaInSoft{ from{ opacity:0; scale:1.1; } to{ opacity:.34; scale:1; } }
.is-ready .phero__media img{ animation-name:mediaInSoft; }

/* Condensing nav ---------------------------------------------------------- */

.nav{ transition:box-shadow .35s var(--ease), background-color .35s var(--ease); }
.nav__in{ transition:min-height .35s var(--ease); }
.nav__logo img{ transition:height .35s var(--ease); }
.nav[data-scrolled="true"]{ box-shadow:0 10px 34px rgba(20,16,13,.34); }
.nav[data-scrolled="true"] .nav__in{ min-height:64px; }
.nav[data-scrolled="true"] .nav__logo img{ height:42px; }
@media (max-width:940px){
  .nav[data-scrolled="true"] .nav__in{ min-height:58px; }
  .nav[data-scrolled="true"] .nav__logo img{ height:34px; }
}

/* A brass tick grows under each process number as the step arrives */
.step__n{ position:relative; padding-bottom:.55rem; }
.step__n::after{
  content:''; position:absolute; left:0; bottom:0; width:26px; height:1px;
  background:var(--brass);
  transform:scaleX(0); transform-origin:left;
  transition:transform .7s var(--ease);
  transition-delay:calc(var(--d, 0ms) + 260ms);
}
.step[data-reveal].is-in .step__n::after{ transform:scaleX(1); }

/* Lightbox ---------------------------------------------------------------- */

.lb img{
  opacity:0; scale:.965;
  transition:opacity .4s var(--ease), scale .5s var(--ease);
}
.lb[data-open="true"] img{ opacity:1; scale:1; }

/* Buttons pick up a little more life on hover */
.btn{ will-change:transform; }
.btn--wa:hover{ box-shadow:0 8px 22px rgba(200,145,47,.28); }

/* Reduced motion ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-delay:.001ms !important;
    transition-duration:.001ms !important;
    transition-delay:.001ms !important;
  }
  [data-reveal],[data-reveal-rule],[data-reveal-media]{ opacity:1; transform:none; }
  [data-reveal-rule]::before{ transform:scaleX(1); }
  [data-reveal-media]::after{ transform:scaleY(0); }
  [data-reveal-media] img{ scale:1; }
  .hero .eyebrow, .hero h1, .hero__sub, .hero .btn-row, .hero .rule,
  .phero .crumbs, .phero .eyebrow, .phero h1, .phero__sub, .phero .rule{ opacity:1; }
  .hero__media img{ opacity:.42; }
  .phero__media img{ opacity:.34; }
}

/* If JavaScript never runs, show everything rather than a blank page */
.no-js [data-reveal],
.no-js [data-reveal-rule],
.no-js [data-reveal-media]{ opacity:1; transform:none; }
.no-js [data-reveal-rule]::before{ transform:scaleX(1); }
.no-js [data-reveal-media]::after{ transform:scaleY(0); }
.no-js [data-reveal-media] img{ scale:1; }
.no-js .hero .eyebrow, .no-js .hero h1, .no-js .hero__sub,
.no-js .hero .btn-row, .no-js .hero .rule,
.no-js .phero .crumbs, .no-js .phero .eyebrow, .no-js .phero h1,
.no-js .phero__sub, .no-js .phero .rule{ opacity:1; }