/* =========================================================
   TAILORS FLOOR — Full-bleed photo hero
   ========================================================= */
:root{
  --ink:#14161a;
  --cream-text:#f7f5f0;
  --cream-dim:rgba(247,245,240,.78);
  --cream-faint:rgba(247,245,240,.55);
  --gold:#dcb877;
  --gold-light:#ecd39f;
  --line-soft:rgba(247,245,240,.28);

  --font-display:'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:'Work Sans', Helvetica, Arial, sans-serif;
  --font-mono:'IBM Plex Mono', 'Courier New', monospace;
}

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

html,body{
  height:100%;
  margin:0;
}

body{
  font-family:var(--font-body);
  color:var(--cream-text);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

/* ---------- Full-bleed cover photo ---------- */
.hero-bg{
  position:fixed;
  inset:0;
  background-image:url("../images/cover-photo.jpg");
  background-size:cover;
  background-position:center 38%;
  z-index:0;
}
.hero-overlay{
  position:fixed;
  inset:0;
  background:
    linear-gradient(180deg, rgba(10,12,16,.72) 0%, rgba(10,12,16,.5) 32%, rgba(10,12,16,.62) 68%, rgba(10,12,16,.82) 100%);
  z-index:0;
}

/* Full-viewport frame */
.page{
  position:relative;
  z-index:1;
  height:100vh;
  height:100svh;
  display:flex;
  flex-direction:column;
  padding:clamp(16px, 3vh, 34px) clamp(20px, 5vw, 64px);
}

/* ---------- Top bar — logo lockup ---------- */
.top-bar{
  flex:0 0 auto;
  display:flex;
  align-items:center;
}
.brand-mark{
  display:flex;
  align-items:center;
  gap:14px;
}
.brand-logo{
  width:clamp(64px, 8.5vh, 92px);
  height:clamp(64px, 8.5vh, 92px);
  border-radius:12px;
  box-shadow:0 8px 22px rgba(0,0,0,.4);
}
.brand-wordmark{
  display:flex;
  flex-direction:column;
  gap:2px;
  text-align:left;
}
.brand-name{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(20px, 2.8vh, 27px);
  letter-spacing:.3px;
  color:var(--cream-text);
  text-shadow:0 2px 10px rgba(0,0,0,.5);
}
.brand-tag{
  font-family:var(--font-mono);
  font-size:clamp(10px, 1.15vh, 12.5px);
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--gold-light);
}

/* ---------- Centered hero content ---------- */
.hero-content{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:clamp(10px, 2vh, 20px);
  min-height:0;
}

.eyebrow{
  font-family:var(--font-mono);
  font-weight:600;
  font-size:clamp(14px, 1.9vh, 19px);
  letter-spacing:4px;
  text-transform:uppercase;
  color:var(--gold-light);
  text-shadow:0 2px 8px rgba(0,0,0,.5);
}

.slogan-1{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(32px, 6.2vh, 68px);
  line-height:1.1;
  max-width:18ch;
  color:var(--cream-text);
  text-shadow:0 4px 22px rgba(0,0,0,.55);
}
.slogan-1 em{ font-style:italic; color:var(--gold-light); }

.slogan-2{
  font-family:var(--font-display);
  font-weight:800;
  font-style:normal;
  font-size:clamp(19px, 3vh, 30px);
  letter-spacing:.4px;
  color:var(--gold-light);
  max-width:26ch;
  text-shadow:0 2px 12px rgba(0,0,0,.5);
}

/* ---------- Prominent phone call-out ---------- */
.hero-phone{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(22px, 3.6vh, 36px);
  letter-spacing:.4px;
  color:var(--cream-text);
  padding:clamp(10px, 1.6vh, 16px) clamp(24px, 3.4vw, 38px);
  border:2px solid var(--gold-light);
  border-radius:999px;
  background:rgba(220,184,119,.14);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  text-shadow:0 2px 12px rgba(0,0,0,.5);
  transition:background .2s ease, transform .2s ease;
}
.hero-phone .icon{
  width:clamp(20px, 3vh, 28px);
  height:clamp(20px, 3vh, 28px);
  color:var(--gold-light);
  flex-shrink:0;
}
.hero-phone:hover{
  background:rgba(220,184,119,.24);
  transform:translateY(-2px);
}

/* ---------- WhatsApp order button ---------- */
.whatsapp-btn{
  display:inline-flex;
  align-items:center;
  gap:11px;
  font-family:var(--font-body);
  font-weight:700;
  font-size:clamp(15px, 2vh, 19px);
  letter-spacing:.2px;
  color:#ffffff;
  padding:clamp(10px, 1.5vh, 15px) clamp(24px, 3.2vw, 34px);
  border-radius:999px;
  background:#25D366;
  box-shadow:0 10px 26px rgba(37,211,102,.35);
  transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.whatsapp-btn .icon{
  width:clamp(19px, 2.6vh, 24px);
  height:clamp(19px, 2.6vh, 24px);
  color:#ffffff;
  flex-shrink:0;
}
.whatsapp-btn:hover{
  background:#20bd5a;
  transform:translateY(-2px);
  box-shadow:0 14px 32px rgba(37,211,102,.45);
}

.service-line{
  font-family:var(--font-body);
  font-weight:700;
  font-size:clamp(14px, 1.9vh, 18px);
  color:var(--cream-text);
  max-width:44ch;
  padding:10px 20px;
  border:1px solid rgba(220,184,119,.5);
  border-radius:999px;
  background:rgba(220,184,119,.12);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}

/* ---------- Bottom bar — contact + footer ---------- */
.bottom-bar{
  flex:0 0 auto;
}
.contact-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(14px, 2.6vw, 32px);
  flex-wrap:wrap;
  padding-top:clamp(10px, 1.6vh, 18px);
  border-top:1px solid var(--line-soft);
}
.contact-item{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-weight:500;
  font-size:clamp(12px, 1.5vh, 15px);
  letter-spacing:.4px;
  color:var(--cream-text);
  transition:color .2s ease;
}
.contact-item .icon{
  width:clamp(14px, 1.9vh, 18px);
  height:clamp(14px, 1.9vh, 18px);
  color:var(--gold-light);
  flex-shrink:0;
}
a.contact-item:hover{ color:var(--gold-light); }
.contact-address{ cursor:default; }

.fb-link{
  width:clamp(28px, 3.4vh, 36px);
  height:clamp(28px, 3.4vh, 36px);
  border-radius:50%;
  border:1px solid var(--line-soft);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:border-color .2s ease, background .2s ease, transform .2s ease;
}
.fb-link:hover{
  border-color:var(--gold-light);
  background:rgba(220,184,119,.16);
  transform:translateY(-2px);
}
.fb-link svg{ width:56%; height:56%; fill:var(--cream-text); }
.fb-link:hover svg{ fill:var(--gold-light); }

.foot-strip{
  text-align:center;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--cream-faint);
  padding-top:10px;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:640px){
  .contact-row{ gap:12px; }
  .contact-address{ order:3; flex-basis:100%; justify-content:center; }
  .hero-phone{ font-size:20px; padding:10px 22px; }
}

/* Fallback: on very short viewports, allow scroll instead of crushing content */
@media (max-height:560px){
  html,body{ overflow-y:auto; }
  .page{ height:auto; min-height:100vh; padding:24px 20px; }
}

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; }
}