/* ============================================================
   BINISHINE PROFESSIONAL CLEANERS
   Shared stylesheet — index.html, contact.html, thanks.html

   Tokens: Chalk / Salt / Ink / Slate + one accent, Marine.
   The images carry the colour; the interface stays quiet.
   ============================================================ */
:root{
  --chalk:#F8F6F3;
  --salt:#EDE9E4;
  --ink:#15181B;
  --slate:#71767B;
  --marine:#1B4A46;
  --rule:rgba(21,24,27,.14);

  --display:"Bodoni Moda", Georgia, serif;
  --body:"Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --pad:clamp(20px, 5vw, 72px);
  --maxw:1560px;

  --t-eyebrow:clamp(10px, .72vw, 11.5px);
  --t-body:clamp(15px, 1.02vw, 17px);
  --t-lead:clamp(19px, 1.5vw, 25px);
  --t-h2:clamp(38px, 5.4vw, 88px);
  --t-h1:clamp(46px, 8.4vw, 148px);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--chalk);
  color:var(--ink);
  font-family:var(--body);
  font-size:var(--t-body);
  font-weight:300;
  line-height:1.62;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}

::selection{background:var(--marine);color:var(--chalk)}
:focus-visible{outline:2px solid var(--marine);outline-offset:3px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--marine);color:var(--chalk);
  padding:14px 20px;font-size:var(--t-eyebrow);
  letter-spacing:.16em;text-transform:uppercase;
}
.skip:focus{left:0}

/* ---------- type roles ---------- */
.eyebrow{
  font-size:var(--t-eyebrow);
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--marine);
  margin:0;
}
.display{
  font-family:var(--display);
  font-weight:400;
  line-height:.94;
  letter-spacing:-.018em;
  margin:0;
}
.lead{
  font-size:var(--t-lead);
  font-weight:300;
  line-height:1.44;
  margin:0;
}
.caption{
  font-size:var(--t-eyebrow);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--slate);
  font-weight:400;
}
.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding-inline:var(--pad);
}

/* ---------- scroll progress hairline ---------- */
.progress{
  position:fixed; inset:0 auto auto 0;
  height:2px; width:100%;
  transform:scaleX(0); transform-origin:0 50%;
  background:var(--marine);
  z-index:60;
}

/* ---------- WebGL canvas: above section grounds, below text ---------- */
#gl{
  position:fixed; inset:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index:2;
}

.frame{
  position:relative;
  overflow:hidden;
  background:var(--salt);
}
.frame > img{width:100%;height:100%;object-fit:cover}
html.gl-on .frame > img{opacity:0}
html.gl-on .frame > img.gl-failed{opacity:1}   /* texture blocked — DOM image returns */

/* ============================================================
   LOGO — a pane of glass with two diagonal gleams cut out of it.
   Drawn in currentColor so it survives the nav's difference blend.
   ============================================================ */
.logo{
  width:22px;height:22px;
  flex:0 0 auto;
  display:block;
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0;
  z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
  padding:18px var(--pad);
  color:#fff;
  /* A difference blend looked clever but turned muddy olive over pale skies.
     A plain scrim keeps the nav legible over any photograph. */
  background:linear-gradient(180deg, rgba(21,24,27,.58) 0%, rgba(21,24,27,.22) 62%, rgba(21,24,27,0) 100%);
  text-shadow:0 1px 14px rgba(21,24,27,.45);
  transition:background .45s, color .45s;
}
.nav.is-solid,
.nav--solid{
  color:var(--ink);
  text-shadow:none;
  background:rgba(248,246,243,.86);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--rule);
}
.nav__mark{
  display:flex; align-items:center; gap:11px;
  font-size:var(--t-eyebrow);
  font-weight:600;
  letter-spacing:.34em;
  text-transform:uppercase;
}
.nav__links{
  display:flex; gap:clamp(18px,2.4vw,40px);
  font-size:var(--t-eyebrow);
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:400;
}
.nav__links a{position:relative;padding-block:4px}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:100% 50%;
  transition:transform .45s cubic-bezier(.19,1,.22,1);
}
.nav__links a:hover::after,
.nav__links a[aria-current="page"]::after{transform:scaleX(1);transform-origin:0 50%}
@media (max-width:820px){ .nav__links{display:none} }

.nav__call{
  font-size:var(--t-eyebrow);
  letter-spacing:.16em;
  text-transform:uppercase;
  white-space:nowrap;
}

/* ============================================================
   HERO (index)
   ============================================================ */
.hero{
  position:relative;
  height:100svh; min-height:620px;
  display:flex; align-items:flex-end;
}
.hero__frame{position:absolute; inset:0; z-index:0}
.hero__scrim{
  position:absolute; inset:0; z-index:3;
  background:linear-gradient(180deg, rgba(21,24,27,.45) 0%, rgba(21,24,27,.08) 28%, rgba(21,24,27,.46) 58%, rgba(21,24,27,.8) 100%);
  pointer-events:none;
}
.hero__inner{
  position:relative; z-index:4;
  width:100%;
  padding-bottom:clamp(40px,7vh,84px);
  color:#fff;
  /* the photograph underneath is unknown — guarantee the type reads */
  text-shadow:0 1px 22px rgba(21,24,27,.5);
}
.hero .eyebrow{color:#fff}
.hero__title{font-size:var(--t-h1);margin:clamp(18px,2.4vh,30px) 0 0;max-width:14ch}
.hero__sub{
  margin-top:clamp(18px,2.6vh,32px);
  max-width:46ch;
  font-size:clamp(15px,1.15vw,19px);
  font-weight:300; line-height:1.55;
  color:#fff;
}
.hero__foot{
  margin-top:clamp(26px,4vh,52px);
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  border-top:1px solid rgba(255,255,255,.42);
  padding-top:16px;
}
.hero__foot .caption{color:rgba(255,255,255,.9)}
.hero__scroll{display:flex;align-items:center;gap:12px}
.hero__scroll i{
  display:block;width:52px;height:1px;
  background:rgba(255,255,255,.5);
  position:relative;overflow:hidden;
}
.hero__scroll i::after{
  content:"";position:absolute;inset:0;background:#fff;
  transform:translateX(-100%);
  animation:sweep 2.6s cubic-bezier(.7,0,.3,1) infinite;
}
@keyframes sweep{
  0%{transform:translateX(-100%)}
  55%{transform:translateX(0)}
  100%{transform:translateX(100%)}
}

.rise{will-change:transform,opacity}

/* ============================================================
   SECTION SHELL
   ============================================================ */
.section{position:relative;padding-block:clamp(88px,13vh,190px)}
.section--salt{background:var(--salt)}
.section__head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(24px,5vw,90px);
  align-items:end;
  padding-bottom:clamp(44px,7vh,92px);
}
@media (max-width:900px){ .section__head{grid-template-columns:1fr;align-items:start} }
.section__title{font-size:var(--t-h2);margin-top:18px;max-width:16ch}

/* ============================================================
   SERVICE AREA — the suburb roster.
   No photographs: the names carry it. Each row is a hairline
   that draws itself in on scroll, then opens on hover.
   ============================================================ */
.locs{
  list-style:none;margin:0;padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  /* six rows, flowing down then across, so the numbers read 01–06
     in the left column rather than snaking left-right */
  grid-template-rows:repeat(6,auto);
  grid-auto-flow:column;
  column-gap:clamp(32px,6vw,110px);
}
.loc{
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:baseline;
  gap:clamp(14px,1.6vw,26px);
  padding:clamp(18px,2.4vh,30px) 0;
  cursor:default;
}
.loc__no{
  color:var(--marine);
  opacity:.5;
  font-size:10px;
  letter-spacing:.16em;
  transition:opacity .5s;
  /* sits on the cap-line of the name rather than its baseline */
  align-self:center;
}
.loc__name{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(26px,3vw,48px);
  line-height:1.06;
  letter-spacing:-.018em;
  transition:transform .6s cubic-bezier(.19,1,.22,1),color .5s;
  will-change:transform;
}
.loc__tag{
  text-align:right;
  color:var(--slate);
  opacity:.72;
  transition:opacity .5s,color .5s;
  white-space:nowrap;
}
/* the hairline: scaled to 0 until app.js sweeps it open */
.loc__rule{
  position:absolute;left:0;right:0;bottom:0;
  height:1px;
  background:var(--rule);
  transform:scaleX(0);
  transform-origin:0 50%;
}
.loc__rule::after{
  content:"";
  position:absolute;inset:0;
  background:var(--marine);
  transform:scaleX(0);
  transform-origin:0 50%;
  transition:transform .7s cubic-bezier(.19,1,.22,1);
}
.loc:hover .loc__name{transform:translateX(clamp(6px,.6vw,12px));color:var(--marine)}
.loc:hover .loc__no{opacity:1}
.loc:hover .loc__tag{opacity:1;color:var(--ink)}
.loc:hover .loc__rule::after{transform:scaleX(1)}

.locs__foot{
  margin:clamp(38px,6vh,72px) 0 0;
  max-width:64ch;
  line-height:1.8;
  text-transform:none;
  letter-spacing:.02em;
  font-size:var(--t-body);
}

@media (max-width:900px){
  .locs{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row;column-gap:0}
}
@media (max-width:560px){
  .loc{grid-template-columns:auto minmax(0,1fr);row-gap:6px}
  .loc__tag{grid-column:2;text-align:left;white-space:normal}
}
@media (prefers-reduced-motion:reduce){
  .loc__rule{transform:scaleX(1)}
}

/* ============================================================
   SERVICES — sticky index, deliberately unnumbered
   ============================================================ */
.svc{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);
  gap:clamp(30px,6vw,110px);
}
.svc__index{position:sticky;top:24vh;align-self:start}
.svc__list{list-style:none;margin:26px 0 0;padding:0}
.svc__list li{
  font-family:var(--display);
  font-size:clamp(20px,2.1vw,34px);
  line-height:1.28;
  color:var(--slate);
  opacity:.42;
  position:relative;
  padding-left:34px;
  transition:opacity .5s,color .5s;
}
.svc__list li::before{
  content:"";position:absolute;left:0;top:.72em;
  width:22px;height:1px;background:var(--marine);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .55s cubic-bezier(.19,1,.22,1);
}
.svc__list li.is-active{opacity:1;color:var(--ink)}
.svc__list li.is-active::before{transform:scaleX(1)}

.svc__panels{display:flex;flex-direction:column;gap:clamp(60px,11vh,150px)}
.svc__panel .frame{aspect-ratio:7/5}
.svc__panel h3{
  font-family:var(--display);font-weight:400;
  font-size:clamp(24px,2.5vw,38px);letter-spacing:-.015em;margin:26px 0 0;
}
.svc__panel p{margin:14px 0 0;max-width:52ch;color:#3a3f44}
.svc__panel .caption{display:block;margin-top:18px}

@media (max-width:900px){
  .svc{grid-template-columns:1fr;gap:44px}
  .svc__index{position:static}
  .svc__list{display:none}
}

/* ============================================================
   ABOUT
   ============================================================ */
.about{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(30px,6vw,110px);
  align-items:start;
}
.about__statement{
  font-family:var(--display);
  font-size:clamp(26px,3.4vw,54px);
  line-height:1.16;letter-spacing:-.018em;margin:22px 0 0;
}
.about__body p{margin:0 0 18px}
.about__facts{list-style:none;margin:30px 0 0;padding:0;border-top:1px solid var(--rule)}
.about__facts li{
  padding:13px 0;border-bottom:1px solid var(--rule);
  font-size:var(--t-eyebrow);letter-spacing:.14em;text-transform:uppercase;color:var(--slate);
}
@media (max-width:900px){ .about{grid-template-columns:1fr;gap:40px} }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.quotes{display:flex;flex-direction:column;gap:clamp(56px,10vh,130px)}
.quote{
  display:grid;
  grid-template-columns:minmax(0,.32fr) minmax(0,1fr);
  gap:clamp(20px,4vw,70px);
  align-items:start;padding-top:26px;
  border-top:1px solid var(--rule);
}
.quote blockquote{
  margin:0;
  font-family:var(--display);font-style:italic;font-weight:400;
  font-size:clamp(23px,3vw,46px);line-height:1.22;letter-spacing:-.015em;
  text-wrap:balance;
  text-indent:-.42em;   /* hang the opening quote so the left edge stays true */
}
@media (max-width:900px){ .quote{grid-template-columns:1fr;gap:18px} }

/* ============================================================
   FORM
   ============================================================ */
.cta__frame{height:clamp(320px,56vh,620px);margin-bottom:clamp(60px,10vh,130px)}
.cta__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(34px,6vw,110px);
  align-items:start;
}
@media (max-width:900px){ .cta__grid{grid-template-columns:1fr;gap:44px} }

.form{display:grid;gap:0}
.field{position:relative;border-bottom:1px solid var(--rule);padding:22px 0 10px}
.field label{
  display:block;font-size:var(--t-eyebrow);letter-spacing:.16em;
  text-transform:uppercase;color:var(--slate);margin-bottom:8px;
}
.field input,.field select,.field textarea{
  width:100%;background:transparent;border:0;padding:2px 0;
  font-size:clamp(15px,1.1vw,18px);font-weight:300;color:var(--ink);
}
.field textarea{resize:vertical;min-height:92px;line-height:1.55}
.field input:focus,.field select:focus,.field textarea:focus{outline:none}
.field::after{
  content:"";position:absolute;left:0;bottom:-1px;
  width:100%;height:1px;background:var(--marine);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .5s cubic-bezier(.19,1,.22,1);
}
.field:focus-within::after{transform:scaleX(1)}
.field--split{display:grid;grid-template-columns:1fr 1fr;gap:36px;border:0;padding:0}
.field--split > .field{padding-top:22px}
@media (max-width:620px){ .field--split{grid-template-columns:1fr;gap:0} }

.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}

.submit{
  margin-top:34px;
  display:inline-flex;align-items:center;gap:16px;
  background:var(--marine);color:var(--chalk);border:0;
  padding:20px 34px;
  font-size:var(--t-eyebrow);letter-spacing:.2em;text-transform:uppercase;font-weight:500;
  cursor:pointer;transition:opacity .35s;
}
.submit:hover{opacity:.86}
.submit i{width:26px;height:1px;background:currentColor;display:block;transition:width .45s cubic-bezier(.19,1,.22,1)}
.submit:hover i{width:42px}
.form__note{margin-top:18px;font-size:13px;color:var(--slate);min-height:1.2em}

.contact__list{list-style:none;margin:30px 0 0;padding:0;border-top:1px solid var(--rule)}
.contact__list li{
  display:flex;justify-content:space-between;gap:20px;align-items:baseline;
  padding:15px 0;border-bottom:1px solid var(--rule);
  font-size:var(--t-eyebrow);letter-spacing:.14em;text-transform:uppercase;color:var(--slate);
}
.contact__list b{font-weight:400;color:var(--ink);text-transform:none;letter-spacing:.02em;font-size:15px;text-align:right}
@media (max-width:520px){
  .contact__list li{flex-direction:column;gap:6px}
  .contact__list b{text-align:left}
}

/* ============================================================
   PAGE HEAD — inner pages (contact, thanks)
   ============================================================ */
.page-head{
  padding-top:clamp(130px,20vh,220px);
  padding-bottom:clamp(50px,8vh,110px);
}
.page-head__title{font-size:var(--t-h2);margin-top:20px;max-width:14ch}
.page-head .lead{margin-top:26px;max-width:48ch;color:#3a3f44}

/* ============================================================
   CONTACT CHANNELS — one row per way of reaching a human.
   The marine rule wipes across on hover: same gesture as the
   scroll sweep on the home page, reduced to a single line.
   ============================================================ */
.channels{
  list-style:none;margin:0;padding:0;
  border-top:1px solid var(--rule);
}
.channel{position:relative;border-bottom:1px solid var(--rule)}
.channel__link{
  display:grid;
  grid-template-columns:minmax(0,.42fr) minmax(0,1fr) auto;
  gap:clamp(16px,4vw,60px);
  align-items:baseline;
  padding:clamp(26px,4.4vh,46px) 0;
  position:relative;
}
.channel::after{
  content:"";position:absolute;left:0;bottom:-1px;
  width:100%;height:1px;background:var(--marine);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .7s cubic-bezier(.19,1,.22,1);
}
.channel:hover::after,
.channel:focus-within::after{transform:scaleX(1)}

.channel__name{
  font-family:var(--display);
  font-size:clamp(26px,3.4vw,54px);
  line-height:1;letter-spacing:-.02em;
  transition:color .5s;
}
.channel:hover .channel__name{color:var(--marine)}
.channel__detail{display:block}
.channel__value{
  display:block;
  font-size:clamp(16px,1.35vw,21px);
  font-weight:300;
  letter-spacing:.01em;
}
.channel__note{display:block;margin-top:6px;color:var(--slate);font-size:14px;line-height:1.5}
.channel__arrow{
  align-self:center;
  width:34px;height:1px;background:var(--ink);
  position:relative;flex:0 0 auto;
  transition:width .55s cubic-bezier(.19,1,.22,1),background .5s;
}
.channel__arrow::after{
  content:"";position:absolute;right:0;top:-3px;
  width:7px;height:7px;
  border-top:1px solid currentColor;border-right:1px solid currentColor;
  color:var(--ink);
  transform:rotate(45deg);
  transition:color .5s;
}
.channel:hover .channel__arrow{width:56px;background:var(--marine)}
.channel:hover .channel__arrow::after{color:var(--marine)}

@media (max-width:760px){
  .channel__link{grid-template-columns:1fr auto;gap:6px 20px;align-items:center}
  .channel__name{grid-column:1;font-size:clamp(24px,7vw,34px)}
  .channel__arrow{grid-column:2;grid-row:1 / span 2}
  .channel__detail{grid-column:1;margin-top:8px}
}

/* hours + area block */
.detail-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(28px,4vw,70px);
  border-top:1px solid var(--rule);
  padding-top:clamp(34px,5vh,60px);
}
.detail h3{
  font-size:var(--t-eyebrow);letter-spacing:.2em;text-transform:uppercase;
  color:var(--marine);font-weight:500;margin:0 0 16px;
}
.detail p{margin:0 0 6px}
.detail .caption{display:block;margin-top:12px}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--ink);color:var(--chalk);padding-block:clamp(56px,9vh,110px)}
.footer__mark{
  font-family:var(--display);
  font-size:clamp(38px,8.6vw,150px);
  line-height:.9;letter-spacing:-.03em;margin:0;
}
.footer__row{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px 40px;
  margin-top:clamp(38px,6vh,74px);padding-top:22px;
  border-top:1px solid rgba(248,246,243,.2);
  font-size:var(--t-eyebrow);letter-spacing:.14em;text-transform:uppercase;
  color:rgba(248,246,243,.62);
}
.footer__row a:hover{color:var(--chalk)}

/* ============================================================
   CSS-only reveal for pages that don't load GSAP
   ============================================================ */
.fade{opacity:0;transform:translateY(22px);animation:fadeUp .95s cubic-bezier(.19,1,.22,1) forwards}
.fade--1{animation-delay:.05s}
.fade--2{animation-delay:.14s}
.fade--3{animation-delay:.23s}
.fade--4{animation-delay:.32s}
.fade--5{animation-delay:.41s}
@keyframes fadeUp{to{opacity:1;transform:none}}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .hero__scroll i::after{display:none}
  html.gl-on .frame > img{opacity:1}
  #gl{display:none}
  .fade{opacity:1;transform:none}
}