/* ============================================================
   CUBINS.CA — PREMIUM DEMO STYLESHEET
   Design system: "Steel & Signal"
   - Paper white + CuBins navy + CuBins yellow (sampled from their real logo & bins)
   - Archivo (display) / Figtree (body) / JetBrains Mono (spec plates)
   - Signature: stenciled container "spec plates" + hazard-stripe accents
   Built by KevFromTown — demo, not production
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  --ink:        #0A1B2E;   /* CuBins navy (sampled from their logo) */
  --ink-2:      #102538;
  --ink-3:      #17324A;
  --paper:      #F4F6F8;   /* cool paper */
  --white:      #FFFFFF;
  --orange:     #F2C617;   /* CuBins yellow (sampled from their logo) */
  --orange-hot: #FFD84D;
  --orange-deep:#8F6B00;  /* dark amber for text on light */
  --steel:      #5D6D7C;   /* slate secondary text */
  --steel-lt:   #8C99A6;
  --line:       #E2E8EE;
  --line-dk:    rgba(255,255,255,.12);
  --good:       #1F9D62;

  --grad-orange: linear-gradient(135deg,#FFD84D,#EEB800);
  --grad-ink:    linear-gradient(160deg,#10283E 0%, #0A1B2E 65%);

  --r-sm: 12px;
  --r:    20px;
  --r-lg: 28px;

  --shadow-sm: 0 2px 8px rgba(13,22,31,.06);
  --shadow:    0 10px 30px -10px rgba(13,22,31,.14);
  --shadow-lg: 0 30px 60px -20px rgba(13,22,31,.22);
  --shadow-orange: 0 12px 28px -10px rgba(226,178,0,.55);

  --font-display: "Archivo", "Helvetica Neue", sans-serif;
  --font-body:    "Figtree", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", "SFMono-Regular", Menlo, monospace;

  --wrap: 1180px;
  --nav-h: 76px;
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
html:focus-within{ scroll-behavior:smooth; }
body{
  font-family:var(--font-body);
  font-size:17px; line-height:1.65;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font:inherit; cursor:pointer; border:0; background:none; }
input,select,textarea{ font:inherit; color:inherit; }
:focus-visible{ outline:3px solid var(--orange); outline-offset:3px; border-radius:4px; }
::selection{ background:var(--orange); color:var(--ink); }

.wrap{ width:min(var(--wrap), calc(100% - 40px)); margin-inline:auto; }

/* ---------- Type ---------- */
h1,h2,h3,.display{
  font-family:var(--font-display);
  font-weight:800;
  line-height:1.07;
  letter-spacing:-.028em;
}
h1{ font-size:clamp(2.6rem, 5.8vw, 4.5rem); }
h2{ font-size:clamp(1.85rem, 3.6vw, 2.75rem); }
h3{ font-size:clamp(1.15rem, 2vw, 1.35rem); letter-spacing:-.015em; }
.lead{ font-size:clamp(1.05rem,1.6vw,1.25rem); color:var(--steel); max-width:60ch; }
.on-dark .lead{ color:#AAB8C5; }

/* Eyebrow with hazard tick — signature micro-detail */
.eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--font-mono); font-size:.78rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--orange-deep);
  margin-bottom:18px;
}
.eyebrow::before{
  content:""; width:34px; height:8px; border-radius:2px;
  background:repeating-linear-gradient(-55deg, var(--orange) 0 6px, var(--ink) 6px 12px);
}
.on-dark .eyebrow{ color:var(--orange-hot); }
.on-dark .eyebrow::before{
  background:repeating-linear-gradient(-55deg, var(--orange) 0 6px, #ffffff2e 6px 12px);
}

/* ---------- Hazard divider (signature) ---------- */
.hazard{
  height:8px; width:100%;
  background:repeating-linear-gradient(-55deg, var(--orange) 0 14px, var(--ink) 14px 28px);
}

/* ---------- Buttons ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-display); font-weight:700;
  letter-spacing:-.01em; font-size:1rem;
  padding:16px 30px; border-radius:999px;
  transition:transform .25s cubic-bezier(.2,.8,.3,1.2), box-shadow .25s ease, background .25s ease, color .25s ease;
  will-change:transform;
}
.btn svg{ width:18px; height:18px; transition:transform .25s ease; }
.btn:hover svg{ transform:translateX(4px); }
.btn:active{ transform:scale(.97); }

.btn-primary{ background:var(--grad-orange); color:var(--ink); box-shadow:var(--shadow-orange); }
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 18px 34px -10px rgba(226,178,0,.6); }

.btn-ghost{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 2px var(--line); }
.btn-ghost:hover{ transform:translateY(-3px); box-shadow:inset 0 0 0 2px var(--ink); }
.on-dark .btn-ghost, .hero .btn-ghost{ color:#fff; box-shadow:inset 0 0 0 2px rgba(255,255,255,.28); }
.on-dark .btn-ghost:hover, .hero .btn-ghost:hover{ box-shadow:inset 0 0 0 2px #fff; background:rgba(255,255,255,.06); }

.btn-sm{ padding:11px 22px; font-size:.95rem; }

/* ---------- Sticky nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100; height:var(--nav-h);
  display:flex; align-items:center;
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:box-shadow .3s ease, border-color .3s ease;
}
.nav.scrolled{ border-color:var(--line); box-shadow:var(--shadow-sm); }
.nav .wrap{ display:flex; align-items:center; gap:32px; }

.logo{ display:flex; align-items:center; gap:11px; font-family:var(--font-display); font-weight:800; font-size:1.45rem; letter-spacing:-.02em; }
/* Real transparent logo — no blend hacks needed, the badge sits on light and dark alike */
.logo-img{ height:54px; width:auto; display:block; }
.footer-logo{ height:66px; }
@media (max-width:600px){
  .nav .logo-img{ height:44px; }
  .footer-logo{ height:56px; }
}
.logo-mark{ width:40px; height:40px; flex:none; }
.logo b{ color:var(--orange); font-weight:700; }

.nav-links{ display:flex; gap:6px; margin-left:auto; }
.nav-links a{
  padding:9px 14px; border-radius:10px; font-weight:500; font-size:.98rem; color:var(--ink-3);
  transition:background .2s ease, color .2s ease;
}
.nav-links a:hover{ background:var(--paper); }
.nav-links a.active{ color:var(--orange-deep); font-weight:600; }
.nav-cta{ margin-left:8px; }

/* Mobile nav */
.nav-toggle{ display:none; margin-left:auto; width:46px; height:46px; border-radius:12px; place-items:center; }
.nav-toggle span{ display:block; width:24px; height:2px; background:var(--ink); border-radius:2px; transition:transform .3s ease, opacity .3s ease; }
.nav-toggle span + span{ margin-top:6px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

@media (max-width:1020px){
  .nav-toggle{ display:grid; }
  .nav-links{
    position:fixed; top:var(--nav-h); left:0; right:0;
    flex-direction:column; gap:4px; padding:18px 20px 26px;
    background:#fff; border-bottom:1px solid var(--line); box-shadow:var(--shadow);
    transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:transform .3s ease, opacity .3s ease;
  }
  .nav-links.open{ transform:none; opacity:1; pointer-events:auto; }
  .nav-links a{ padding:14px 16px; font-size:1.08rem; }
  .nav-cta{ display:none; }
}

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden;
  background:var(--grad-ink); color:#fff;
  padding:calc(var(--nav-h) + 84px) 0 0;
}
.hero::before{ /* soft orange glow accent */
  content:""; position:absolute; width:720px; height:720px; right:-220px; top:-180px;
  background:radial-gradient(closest-side, rgba(242,198,23,.2), transparent 70%);
  pointer-events:none;
}
.hero::after{ /* faint blueprint grid */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:linear-gradient(to bottom, transparent, #000 12%, #000 82%, transparent);
}
.hero .wrap{ position:relative; z-index:1; }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.hero h1 span{ color:var(--orange-hot); }
.hero .lead{ margin:22px 0 34px; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:14px; }

.hero-badges{ display:flex; flex-wrap:wrap; gap:26px; margin-top:44px; padding:26px 0 60px; border-top:1px solid var(--line-dk); }
.badge{ display:flex; align-items:center; gap:11px; font-size:.95rem; color:#C6D1DB; }
.badge svg{ width:20px; height:20px; color:var(--orange-hot); flex:none; }

.hero-art{ position:relative; }
/* only the SVG fallback illustration should stretch — NOT the chip icons */
.hero-art > svg{ width:100%; height:auto; filter:drop-shadow(0 40px 50px rgba(0,0,0,.45)); }
.hero-chip{
  position:absolute; display:flex; align-items:center; gap:9px; z-index:2;
  background:rgba(10,27,46,.72); border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  padding:11px 16px; border-radius:14px; font-family:var(--font-mono); font-size:.78rem; color:#E7EDF2;
  box-shadow:0 12px 24px -10px rgba(0,0,0,.5);
}
.hero-chip svg{ width:17px; height:17px; flex:none; color:var(--orange-hot); }
.hero-chip b{ color:var(--orange-hot); font-weight:600; }
.chip-1{ top:6%; left:-14px; animation:float 6s ease-in-out infinite; }
.chip-2{ bottom:8%; right:-14px; animation:float 7s ease-in-out 1.2s infinite; }
@keyframes float{ 50%{ transform:translateY(-10px); } }

@media (max-width:900px){
  .hero{ padding-top:calc(var(--nav-h) + 56px); }
  .hero-grid{ grid-template-columns:1fr; gap:44px; }
  .hero-chip{ display:none; }
}

/* ---------- Sections ---------- */
.section{ padding:104px 0; }
.section.tight{ padding:84px 0; }
.section-head{ max-width:720px; margin-bottom:56px; }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head.center .eyebrow{ justify-content:center; }
.section-head .lead{ margin-top:16px; }
.on-dark{ background:var(--grad-ink); color:#fff; }
.on-white{ background:var(--white); }

/* Page hero (subpages) */
.page-hero{ /* CuBins bin blue (#0F448F, sampled from Joey's own bins) blending up into the site navy,
   so the sticky nav sits over navy and stays clean, and the hero still ties to the rest of the site */
  background:linear-gradient(165deg,#0A1B2E 0%,#0D2F63 38%,#0F448F 75%,#1553AB 100%); color:#fff; padding:calc(var(--nav-h) + 72px) 0 72px; position:relative; overflow:hidden; }
.page-hero::before{ content:""; position:absolute; width:560px; height:560px; right:-160px; top:-160px;
  background:radial-gradient(closest-side, rgba(242,198,23,.18), transparent 70%); }
.page-hero .wrap{ position:relative; }
.page-hero .lead{ margin-top:18px; }
.crumbs{ font-family:var(--font-mono); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--steel-lt); margin-bottom:20px; }
.crumbs a:hover{ color:#fff; }
.crumbs span{ color:var(--orange-hot); }

/* ---------- Cards: services ---------- */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }
@media (max-width:960px){ .grid-3{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .grid-3,.grid-2{ grid-template-columns:1fr;} }

.card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  padding:34px 30px; box-shadow:var(--shadow-sm);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:transparent; }
.card h3{ margin:20px 0 10px; }
.card p{ color:var(--steel); font-size:.99rem; }
.card .link{ display:inline-flex; align-items:center; gap:8px; margin-top:18px; font-weight:600; color:var(--orange-deep); }
.card .link svg{ width:16px; height:16px; transition:transform .25s ease; }
.card:hover .link svg{ transform:translateX(4px); }

.icon-tile{
  width:58px; height:58px; border-radius:16px; display:grid; place-items:center;
  background:linear-gradient(140deg,#FFF7D9,#FFEDA8); color:var(--orange-deep);
  transition:transform .35s cubic-bezier(.2,.8,.3,1.4);
}
.icon-tile svg{ width:26px; height:26px; }
.card:hover .icon-tile{ transform:scale(1.08) rotate(-4deg); }

/* Why-us dark tiles */
.why .card{ background:rgba(255,255,255,.05); border-color:var(--line-dk); box-shadow:none; }
.why .card:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.22); transform:translateY(-6px); }
.why .card p{ color:#A7B4C1; }
.why .icon-tile{ background:rgba(242,198,23,.16); color:var(--orange-hot); }

/* ---------- Bin spec plates (SIGNATURE) ---------- */
/* 5 sizes laid out 3-up, then 2 centred underneath — no orphan card */
.bins-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:24px; align-items:start; }
.bins-grid > .bin-card{ grid-column:span 2; }
.bins-grid > .bin-card:nth-child(4){ grid-column:2 / span 2; }
.bins-grid > .bin-card:nth-child(5){ grid-column:4 / span 2; }

@media (max-width:1080px){
  .bins-grid{ grid-template-columns:repeat(4,1fr); }
  .bins-grid > .bin-card,
  .bins-grid > .bin-card:nth-child(4){ grid-column:span 2; }
  .bins-grid > .bin-card:nth-child(5){ grid-column:2 / span 2; }
}
@media (max-width:600px){
  .bins-grid{ grid-template-columns:1fr; }
  .bins-grid > .bin-card,
  .bins-grid > .bin-card:nth-child(4),
  .bins-grid > .bin-card:nth-child(5){ grid-column:1 / -1; }
}

.bin-card{
  position:relative; background:var(--white); border-radius:var(--r-lg);
  border:1px solid var(--line); overflow:hidden; display:flex; flex-direction:column;
  transition:transform .35s ease, box-shadow .35s ease;
}
.bin-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); }
.bin-card.popular{ border:2px solid var(--orange); }
.pop-flag{
  position:absolute; top:16px; right:16px; z-index:2;
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  background:var(--grad-orange); color:var(--ink); padding:7px 12px; border-radius:999px;
}
/* Real photos of Joey's fleet, unified by a dark scrim so the 5 crops read as one set */
.bin-visual{
  position:relative; aspect-ratio:2 / 1; overflow:hidden;
  background:linear-gradient(165deg,#1A2836,#0D161F);
}
.bin-visual img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 58%;
  transition:transform .55s ease;
}
.bin-visual::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(8,16,24,.90) 0%, rgba(8,16,24,.42) 42%, rgba(8,16,24,.10) 100%);
}
.bin-card:hover .bin-visual img{ transform:scale(1.06); }
.bin-yd{
  position:absolute; z-index:2; left:22px; bottom:16px;
  font-family:var(--font-display); font-weight:700; font-size:2.4rem; color:#fff; line-height:1;
  text-shadow:0 2px 14px rgba(0,0,0,.7);
}
.bin-yd small{ display:block; font-family:var(--font-mono); font-weight:500; font-size:.62rem; letter-spacing:.24em; color:var(--orange-hot); margin-top:5px; text-shadow:0 1px 8px rgba(0,0,0,.8); }
.bin-body{ padding:26px 26px 28px; display:flex; flex-direction:column; flex:1; }
.bin-body h3{ font-size:1.4rem; }
.bin-tag{ color:var(--steel); font-size:.93rem; margin:6px 0 18px; }
.spec{ font-family:var(--font-mono); font-size:.8rem; border-top:1px dashed var(--line); padding:10px 0; display:flex; justify-content:space-between; gap:12px; }
.spec dt{ color:var(--steel-lt); letter-spacing:.04em; }
.spec dd{ font-weight:600; text-align:right; }
.bin-price{ margin:18px 0 6px; font-family:var(--font-display); font-weight:700; font-size:2rem; }
.bin-price small{ font-family:var(--font-body); font-weight:500; font-size:.85rem; color:var(--steel); letter-spacing:0; }
.bin-body .btn{ margin-top:auto; width:100%; }

/* ---------- Booking preview ---------- */
.booking{
  background:var(--white); border-radius:var(--r-lg); box-shadow:var(--shadow-lg);
  overflow:hidden; display:grid; grid-template-columns:.9fr 1.1fr;
}
@media (max-width:900px){ .booking{ grid-template-columns:1fr; } }
.booking-side{ background:var(--grad-ink); color:#fff; padding:46px 42px; position:relative; overflow:hidden; }
.booking-side::after{ content:""; position:absolute; inset:auto -60px -60px auto; width:280px; height:280px;
  background:radial-gradient(closest-side, rgba(242,198,23,.28), transparent 70%); }
.booking-side ul{ margin-top:26px; display:grid; gap:16px; position:relative; z-index:1; }
.booking-side li{ display:flex; gap:12px; align-items:flex-start; color:#C6D1DB; font-size:.98rem; }
.booking-side li svg{ width:20px; height:20px; color:var(--orange-hot); flex:none; margin-top:2px; }
.booking-form{ padding:46px 42px; }
@media (max-width:640px){ .booking-side,.booking-form{ padding:34px 24px; } }
@media (max-width:380px){ .booking-side,.booking-form{ padding:28px 18px; } .section,.section.tight{ padding-left:0; padding-right:0; } }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:680px){ .form-grid{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:7px; }
.field.full{ grid-column:1 / -1; }
.field label{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--steel); }
.field input,.field select,.field textarea{
  min-width:0; max-width:100%;
  border:1.5px solid var(--line); border-radius:14px; padding:14px 16px; background:var(--paper);
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--orange); background:#fff; box-shadow:0 0 0 4px rgba(242,198,23,.3);
}
.form-note{ margin-top:14px; font-size:.85rem; color:var(--steel-lt); text-align:center; }

/* ---------- Service areas ---------- */
.areas-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:900px){ .areas-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .areas-grid{ grid-template-columns:1fr;} }
.area-card{
  position:relative; overflow:hidden; border-radius:var(--r); padding:30px 26px;
  background:var(--white); border:1px solid var(--line);
  transition:transform .3s ease, box-shadow .3s ease;
}
.area-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.area-card::before{ content:""; position:absolute; inset:0 auto 0 0; width:5px; background:var(--grad-orange);
  transform:scaleY(0); transform-origin:bottom; transition:transform .35s ease; }
.area-card:hover::before{ transform:scaleY(1); }
.area-card h3{ display:flex; align-items:center; gap:10px; font-size:1.35rem; }
.area-card h3 svg{ width:20px; height:20px; color:var(--orange); flex:none; }
.area-card p{ color:var(--steel); font-size:.95rem; margin-top:10px; }
.area-card .eta{ margin-top:16px; font-family:var(--font-mono); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--orange-deep); }

/* ---------- Reviews ---------- */
.reviews-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:960px){ .reviews-grid{ grid-template-columns:1fr; } }
.review{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:32px 28px;
  display:flex; flex-direction:column; gap:16px; box-shadow:var(--shadow-sm);
  transition:transform .3s ease, box-shadow .3s ease;
}
.review:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.stars{ display:flex; gap:3px; color:#F5A623; }
.stars svg{ width:18px; height:18px; }
.review q{ quotes:"“" "”"; font-size:1.02rem; color:var(--ink-3); }
.review footer{ display:flex; align-items:center; gap:13px; margin-top:auto; }
.avatar{
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center; flex:none;
  font-family:var(--font-display); font-weight:700; font-size:1.1rem; color:#fff;
  background:linear-gradient(140deg,var(--ink-3),var(--ink));
}
.review footer b{ display:block; font-size:.97rem; }
.review footer span{ font-size:.83rem; color:var(--steel); }

/* ---------- Gallery ---------- */
.masonry{ columns:3 300px; column-gap:20px; }
.shot{
  break-inside:avoid; margin-bottom:20px; border-radius:var(--r); overflow:hidden; position:relative;
  cursor:pointer; border:1px solid var(--line);
}
.shot .ph{ transition:transform .5s ease; }
.shot:hover .ph{ transform:scale(1.05); }
.shot::after{
  content:"View project"; position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--font-display); letter-spacing:-.01em; font-weight:700; color:#fff;
  background:rgba(13,22,31,.45); opacity:0; transition:opacity .3s ease; font-size:1.05rem;
}
.shot:hover::after{ opacity:1; }

/* Placeholder "photo" frames — replaced with real photos in the live build */
.ph{
  display:grid; place-items:center; text-align:center; gap:6px; padding:20px;
  color:#fff; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
}
.ph small{ opacity:.65; letter-spacing:.06em; }
.ph svg{ width:44px; height:44px; opacity:.9; margin-bottom:4px; }
.ph-a{ background:linear-gradient(150deg,#22384C,#0D161F); }
.ph-b{ background:linear-gradient(150deg,#2E6DA8,#17324A); }
.ph-c{ background:linear-gradient(150deg,#41566B,#1E2F3E); }
.ph-d{ background:linear-gradient(150deg,#C9A20E,#7A5E00); }
.ph-e{ background:linear-gradient(150deg,#2C4258,#101C28); }
.ph-tall{ min-height:420px; } .ph-mid{ min-height:320px; } .ph-short{ min-height:240px; }

/* Lightbox */
.lightbox{
  position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:24px;
  background:rgba(13,22,31,.9); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.lightbox.open{ opacity:1; pointer-events:auto; }
.lightbox-inner{ width:min(880px,100%); border-radius:var(--r-lg); overflow:hidden; transform:scale(.96); transition:transform .3s ease; }
.lightbox.open .lightbox-inner{ transform:scale(1); }
.lightbox-close{
  position:absolute; top:22px; right:22px; width:48px; height:48px; border-radius:50%;
  background:rgba(255,255,255,.12); color:#fff; font-size:1.5rem; display:grid; place-items:center;
  transition:background .2s ease, transform .2s ease;
}
.lightbox-close:hover{ background:rgba(255,255,255,.24); transform:rotate(90deg); }

/* ---------- FAQ ---------- */
.faq-list{ max-width:820px; margin-inline:auto; display:grid; gap:14px; }
.faq-item{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; transition:box-shadow .3s ease, border-color .3s ease; }
.faq-item.open{ box-shadow:var(--shadow); border-color:transparent; }
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:18px; text-align:left;
  padding:22px 26px; font-weight:600; font-size:1.05rem;
}
.faq-q .chev{ width:34px; height:34px; flex:none; border-radius:50%; display:grid; place-items:center;
  background:var(--paper); transition:transform .35s ease, background .35s ease, color .35s ease; }
.faq-q .chev svg{ width:16px; height:16px; }
.faq-item.open .chev{ transform:rotate(180deg); background:var(--grad-orange); color:var(--ink); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .4s ease; }
.faq-a p{ padding:0 26px 24px; color:var(--steel); }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:26px; align-items:start; }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:34px 30px; box-shadow:var(--shadow-sm); }
@media (max-width:400px){ .contact-card,.card{ padding:26px 20px; } }
.c-row{ display:flex; gap:16px; padding:16px 0; border-bottom:1px dashed var(--line); align-items:flex-start; }
.c-row:last-of-type{ border-bottom:0; }
.c-row .icon-tile{ width:48px; height:48px; border-radius:13px; }
.c-row .icon-tile svg{ width:22px; height:22px; }
.c-row b{ display:block; font-size:1rem; }
.c-row span, .c-row a{ color:var(--steel); font-size:.95rem; }
.c-row a:hover{ color:var(--orange-deep); }
.map-ph{
  border-radius:var(--r); min-height:260px; margin-top:8px; position:relative; overflow:hidden;
  background:linear-gradient(150deg,#DDE6EE,#C6D3DF); border:1px solid var(--line);
  display:grid; place-items:center; color:var(--steel); font-family:var(--font-mono); font-size:.75rem; letter-spacing:.12em; text-transform:uppercase;
}
.map-ph::before{ content:""; position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(rgba(93,109,124,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(93,109,124,.16) 1px, transparent 1px);
  background-size:44px 44px; }
.map-pin{ position:absolute; width:44px; height:44px; color:var(--orange); filter:drop-shadow(0 8px 10px rgba(13,22,31,.3)); animation:float 4s ease-in-out infinite; }

/* ---------- CTA band ---------- */
.cta-band{ position:relative; overflow:hidden; background:var(--grad-orange); color:var(--ink); border-radius:var(--r-lg);
  padding:64px 56px; display:flex; flex-wrap:wrap; align-items:center; gap:32px; justify-content:space-between; }
.cta-band::before{ content:""; position:absolute; inset:0; opacity:.1;
  background:repeating-linear-gradient(-55deg, #fff 0 16px, transparent 16px 44px); mix-blend-mode:overlay; }
.cta-band h2{ max-width:520px; position:relative; }
.cta-band .btn{ position:relative; background:var(--ink); color:#fff; box-shadow:0 16px 30px -10px rgba(0,0,0,.35); }
.cta-band .btn:hover{ transform:translateY(-3px); }
.cta-band .sub{ position:relative; margin-top:10px; color:rgba(10,27,46,.72); font-weight:500; }
@media (max-width:640px){ .cta-band{ padding:44px 28px; } }

/* ---------- Footer ---------- */
.footer{ background:var(--ink); color:#9FADBA; padding:76px 0 0; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:44px; padding-bottom:56px; }
@media (max-width:940px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }
.footer .logo{ color:#fff; margin-bottom:18px; }
.footer p{ font-size:.95rem; max-width:34ch; }
.footer h4{ font-family:var(--font-mono); font-weight:500; font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:#fff; margin-bottom:20px; }
.footer ul{ display:grid; gap:12px; font-size:.96rem; }
.footer ul a{ transition:color .2s ease; }
.footer ul a:hover{ color:var(--orange-hot); }
.hours li{ display:flex; justify-content:space-between; gap:18px; }
.hours b{ color:#DFE7EE; font-weight:500; }
.socials{ display:flex; gap:12px; margin-top:22px; }
.socials a{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background:rgba(255,255,255,.07); color:#DFE7EE; transition:background .25s ease, transform .25s ease, color .25s ease; }
.socials a:hover{ background:var(--grad-orange); color:var(--ink); transform:translateY(-3px); }
.socials svg{ width:18px; height:18px; }
.footer-bottom{ border-top:1px solid var(--line-dk); padding:26px 0; font-size:.85rem; color:#788797; }
.footer-bottom a:hover{ color:#fff; }

/* ---------- Comparison table (bin sizes page) ---------- */
.compare{ overflow-x:auto; border-radius:var(--r); border:1px solid var(--line); background:#fff; box-shadow:var(--shadow-sm); }
.compare table{ width:100%; border-collapse:collapse; min-width:680px; }
.compare th,.compare td{ padding:18px 22px; text-align:left; border-bottom:1px solid var(--line); font-size:.95rem; }
.compare thead th{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--steel); background:var(--paper); }
.compare tbody tr:last-child td{ border-bottom:0; }
.compare tbody tr:hover{ background:#FFFBEA; }
.compare td b{ font-family:var(--font-display); font-size:1.1rem; font-weight:800; }

/* ---------- Stats strip ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
@media (max-width:800px){ .stats{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:360px){ .stats{ grid-template-columns:1fr;} }
.stat{ text-align:center; padding:30px 18px; border-radius:var(--r); background:rgba(255,255,255,.05); border:1px solid var(--line-dk); }
.stat b{ display:block; font-family:var(--font-display); font-weight:700; font-size:clamp(2.4rem,4vw,3.2rem); color:#fff; line-height:1; }
.stat b i{ font-style:normal; color:var(--orange-hot); }
.stat span{ font-size:.9rem; color:#A7B4C1; }

/* ---------- Reveal animations ---------- */
[data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal="left"]{ transform:translateX(-30px); }
[data-reveal="right"]{ transform:translateX(30px); }
[data-reveal].in{ transform:none; }
.map-ph[data-reveal="right"], .map-ph[data-reveal="left"]{ transform:translateY(26px); }
.map-ph[data-reveal].in{ transform:none; }
/* On phones, horizontal reveals can push content past the viewport edge — rise vertically instead */
@media (max-width:900px){
  [data-reveal="left"],[data-reveal="right"]{ transform:translateY(26px); }
}
/* stagger children */
[data-stagger] > *{ opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); }
[data-stagger].in > *{ opacity:1; transform:none; }
[data-stagger].in > *:nth-child(2){ transition-delay:.08s; }
[data-stagger].in > *:nth-child(3){ transition-delay:.16s; }
[data-stagger].in > *:nth-child(4){ transition-delay:.24s; }
[data-stagger].in > *:nth-child(5){ transition-delay:.32s; }
[data-stagger].in > *:nth-child(6){ transition-delay:.40s; }

/* Hero entrance */
.hero [data-enter]{ opacity:0; transform:translateY(24px); animation:enter .8s cubic-bezier(.2,.7,.3,1) forwards; }
.hero [data-enter="2"]{ animation-delay:.12s; } .hero [data-enter="3"]{ animation-delay:.24s; }
.hero [data-enter="4"]{ animation-delay:.36s; } .hero [data-enter="5"]{ animation-delay:.48s; }
@keyframes enter{ to{ opacity:1; transform:none; } }

/* Page loader */
.loader{ position:fixed; inset:0; z-index:300; display:grid; place-items:center; background:var(--ink); transition:opacity .5s ease, visibility .5s ease; }
.loader.done{ opacity:0; visibility:hidden; }
.loader-mark{ width:64px; height:64px; animation:pulse 1.1s ease-in-out infinite; }
@keyframes pulse{ 50%{ transform:scale(1.12); opacity:.75; } }

/* Toast (demo form feedback) */
.toast{
  position:fixed; left:50%; bottom:30px; transform:translate(-50%, 90px); z-index:250;
  background:var(--ink); color:#fff; padding:16px 26px; border-radius:999px; box-shadow:var(--shadow-lg);
  display:flex; align-items:center; gap:12px; font-size:.95rem; transition:transform .45s cubic-bezier(.2,.8,.3,1.2);
}
.toast.show{ transform:translate(-50%, 0); }
.toast svg{ width:20px; height:20px; color:var(--good); }

/* Back to top */
.to-top{
  position:fixed; right:24px; bottom:24px; z-index:90; width:52px; height:52px; border-radius:50%;
  background:var(--grad-orange); color:var(--ink); box-shadow:var(--shadow-orange);
  display:grid; place-items:center; opacity:0; pointer-events:none; transform:translateY(14px);
  transition:opacity .3s ease, transform .3s ease;
}
.to-top.show{ opacity:1; pointer-events:auto; transform:none; }
.to-top svg{ width:20px; height:20px; }
.to-top:hover{ transform:translateY(-3px); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
  [data-reveal],[data-stagger] > *,.hero [data-enter]{ opacity:1 !important; transform:none !important; }
}


/* ---------- Real photos from cubins.ca ---------- */
.hero-photo{
  border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line-dk);
  box-shadow:0 40px 70px -25px rgba(0,0,0,.55); background:#fff;
}
.hero-photo img{ width:100%; height:auto; display:block; }
.shot > img{ width:100%; display:block; transition:transform .5s ease; }
.shot:hover > img{ transform:scale(1.05); }

/* ---------- Award band (Quality Business Awards 2025 + 2026) ---------- */
.award-band{
  position:relative; overflow:hidden; background:var(--grad-ink); color:#C6D1DB;
  border:1px solid var(--line-dk); border-radius:var(--r-lg);
  padding:52px 56px; display:flex; align-items:center; gap:52px;
}
.award-band::before{ content:""; position:absolute; inset:0; opacity:.06;
  background:repeating-linear-gradient(-55deg, #F2C617 0 16px, transparent 16px 44px); }
.award-seals{ position:relative; display:flex; gap:16px; flex:none; }
.award-seal{ width:118px; height:118px; filter:drop-shadow(0 14px 24px rgba(0,0,0,.45)); }
@media (max-width:1080px){ .award-seal{ width:100px; height:100px; } }
.award-copy{ position:relative; min-width:0; }
.award-copy h2{
  color:#fff; margin:10px 0 14px; font-size:clamp(1.6rem,3vw,2.2rem);
  /* the years live on the seals, so the heading stays short and never wraps
     mid-phrase the way "2024, 2025 & 2026" used to */
  text-wrap:balance;
}
.award-copy p{ max-width:50ch; text-wrap:pretty; }
@media (max-width:820px){
  .award-band{ flex-direction:column; text-align:center; padding:44px 28px; gap:30px; }
  .award-copy p{ margin-inline:auto; }
  .award-seals{ flex-wrap:wrap; justify-content:center; }
  .award-seal{ width:96px; height:96px; }
}

/* ---------- Shared form bits (used by book.php AND contact.php) ---------- */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-error{
  margin:14px 0 0; padding:13px 16px; border-radius:12px;
  background:#FDECEA; border:1px solid #F5C6C0; color:#96281B; font-size:.92rem;
}
.book-done{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:52px 40px; text-align:center; box-shadow:var(--shadow);
}
.book-done-mark{ color:var(--good); margin-bottom:18px; }
.book-done h2{ font-size:1.9rem; margin-bottom:12px; }
.book-done p{ color:var(--steel); max-width:52ch; margin:0 auto 14px; }
.book-done .btn{ margin-top:18px; }

/* Footer legal links */
.footer-legal a{ color:#8C99A6; text-decoration:none; }
.footer-legal a:hover{ color:#fff; }

/* ---------- Floating "Book a Bin" (all pages except book.php) ---------- */
.book-float{
  position:fixed; left:18px; bottom:18px; z-index:90;
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 18px 13px 15px; border-radius:999px;
  background:var(--grad-orange); color:var(--ink); font-weight:700; font-size:.95rem;
  text-decoration:none; box-shadow:var(--shadow-orange), 0 4px 14px rgba(13,22,31,.25);
  transition:transform .2s ease, box-shadow .2s ease;
}
.book-float svg{ width:20px; height:20px; flex:none; }
.book-float:hover{ transform:translateY(-2px); }
@media (max-width:600px){
  .book-float{ left:14px; bottom:14px; padding:12px 16px 12px 14px; font-size:.9rem; }
}