/* ==========================================================================
   Natural Stone Source Ontario — main site stylesheet
   Fonts: Barlow (body) / Barlow Condensed (headings). No other faces.
   ========================================================================== */

:root{
  --red:#a32219;
  --red-dark:#7d1a13;
  --char:#1c1a18;
  --char-2:#2a2724;
  --stone:#8a7f72;
  --sand:#f2ede6;
  --line:#ded6cb;
  --white:#fff;
  --wrap:1160px;
}

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

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  font-family:'Barlow',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  font-size:17px;
  line-height:1.65;
  color:var(--char);
  background:var(--white);
}

img{max-width:100%;height:auto;display:block}

a{color:var(--red);text-decoration:none}
a:hover{text-decoration:underline}

h1,h2,h3{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:700;
  line-height:1.1;
  letter-spacing:.01em;
  text-transform:uppercase;
  margin:0 0 .5em;
}
h1{font-size:clamp(2.4rem,5.5vw,4rem)}
h2{font-size:clamp(1.8rem,3.6vw,2.6rem)}
h3{font-size:1.35rem}

p{margin:0 0 1.1em}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.skip{
  position:absolute;left:-9999px;top:0;background:var(--char);color:#fff;
  padding:12px 20px;z-index:100;
}
.skip:focus{left:0}

/* --------------------------------------------------------------- header  */

.site-head{
  background:var(--red);
  border-bottom:4px solid var(--red-dark);
  position:sticky;top:0;z-index:50;
}

.head-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;min-height:88px;
}

.brand{display:flex;align-items:center;gap:14px;color:#fff;text-decoration:none;
  min-width:0;flex:0 1 auto;max-width:340px}
.brand:hover{text-decoration:none}
.brand img{width:74px;height:auto}

.brand-text{display:flex;flex-direction:column;line-height:1.05}
.brand-name{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;
  text-transform:uppercase;font-size:1.22rem;letter-spacing:.01em;
}
.brand-sub{
  font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;
  color:rgba(255,255,255,.82);
}

.nav{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.nav a{
  color:#fff;font-family:'Barlow Condensed',sans-serif;font-weight:600;
  text-transform:uppercase;letter-spacing:.04em;font-size:1.02rem;
  padding:12px 11px;border-radius:3px;white-space:nowrap;
  display:inline-flex;align-items:center;min-height:48px;
}
.nav a:hover{background:rgba(0,0,0,.18);text-decoration:none}
.nav a.cta{background:var(--char);margin-left:8px;padding:12px 20px}
.nav a.cta:hover{background:#000}

.nav-toggle{
  display:none;background:none;border:0;cursor:pointer;
  width:48px;height:48px;padding:10px;
}
.nav-toggle-bar{display:block;height:3px;background:#fff;margin:5px 0;border-radius:2px}

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

.hero{
  background:var(--char);
  color:#fff;
  padding:96px 0;
  text-align:center;
}
.hero h1{color:#fff;margin-bottom:.35em}
.hero p{
  max-width:660px;margin:0 auto 1.8em;font-size:1.2rem;
  color:rgba(255,255,255,.86);
}

.page-head{
  background:var(--char);color:#fff;padding:64px 0 56px;text-align:center;
}
.page-head h1{color:#fff;margin-bottom:.25em}
.page-head p{color:rgba(255,255,255,.82);max-width:640px;margin:0 auto;font-size:1.15rem}

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

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:14px 30px;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.15rem;
  text-transform:uppercase;letter-spacing:.06em;
  background:var(--red);color:#fff;border:0;border-radius:3px;cursor:pointer;
}
.btn:hover{background:var(--red-dark);text-decoration:none}
.btn-ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.6)}
.btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff}
.btn-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* --------------------------------------------------------------- layout  */

.section{padding:80px 0}
.section-alt{background:var(--sand)}
.section-head{text-align:center;max-width:720px;margin:0 auto 52px}
.section-head p{color:#544e47;font-size:1.1rem}

.grid{display:grid;gap:28px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}

.card{
  background:#fff;border:1px solid var(--line);border-radius:4px;
  padding:32px 28px;
}
.section-alt .card{background:#fff}
.card h3{color:var(--red)}
.card p:last-child{margin-bottom:0}

.card-num{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.1rem;
  color:var(--stone);letter-spacing:.14em;display:block;margin-bottom:6px;
}

/* --------------------------------------------------------------- prose   */

.prose{max-width:760px;margin:0 auto}
.prose h2{margin-top:1.6em}
.prose h2:first-child{margin-top:0}

/* --------------------------------------------------------------- quotes  */

.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.quote{
  background:#fff;border-left:4px solid var(--red);
  padding:26px 28px;border-radius:0 4px 4px 0;
  border-top:1px solid var(--line);border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.quote p{font-style:italic;color:#3a3631}
.quote cite{
  font-style:normal;font-family:'Barlow Condensed',sans-serif;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;color:var(--stone);
}

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

.areas{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  list-style:none;padding:0;margin:0;
}
.areas li{
  font-family:'Barlow Condensed',sans-serif;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;font-size:1.05rem;
  background:#fff;border:1px solid var(--line);border-radius:3px;
  padding:10px 18px;
}

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

.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.gal img{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  border-radius:4px;border:1px solid var(--line);background:var(--sand);
}
.gal figure{margin:0}
.gal figcaption{
  font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;
  letter-spacing:.08em;font-size:.95rem;color:var(--stone);padding-top:8px;
}

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

.form{max-width:660px;margin:0 auto}
.field{margin-bottom:22px}
.field label{
  display:block;font-family:'Barlow Condensed',sans-serif;font-weight:600;
  text-transform:uppercase;letter-spacing:.07em;font-size:1.05rem;
  margin-bottom:7px;
}
.field .req{color:var(--red)}
.field input,.field select,.field textarea{
  width:100%;font-family:'Barlow',sans-serif;font-size:17px;
  padding:13px 14px;min-height:52px;
  border:1px solid #b9b0a4;border-radius:3px;background:#fff;color:var(--char);
}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:3px solid rgba(163,34,25,.35);border-color:var(--red);
}

/* Honeypot — hidden from people, visible to bots. Never remove. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.notice{padding:18px 22px;border-radius:3px;margin-bottom:30px;font-weight:500}
.notice-ok{background:#e7f2e9;border:1px solid #9ec3a6;color:#1d4b28}
.notice-bad{background:#fbe9e7;border:1px solid #d9a49f;color:#7d1a13}

.contact-lines{
  display:flex;gap:36px;flex-wrap:wrap;justify-content:center;
  margin-bottom:44px;text-align:center;
}
.contact-lines div{min-width:200px}
.contact-lines span{
  display:block;font-family:'Barlow Condensed',sans-serif;font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;color:var(--stone);font-size:.95rem;
}
.contact-lines a{font-size:1.2rem;font-weight:600}

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

.site-foot{background:var(--char);color:rgba(255,255,255,.78);padding:64px 0 0;margin-top:0}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1.2fr;gap:44px;padding-bottom:48px}
.foot-logo{width:78px;margin-bottom:16px}
.foot-blurb{font-size:.98rem;max-width:340px}
.foot-h{
  font-size:1.1rem;color:#fff;letter-spacing:.1em;margin:0 0 14px;
}
.foot-col h2.foot-h + .foot-list + .foot-h{margin-top:26px}
.foot-list{list-style:none;margin:0;padding:0}
.foot-list li{margin-bottom:9px}
.foot-list a{color:rgba(255,255,255,.82)}
.foot-list a:hover{color:#fff}
.foot-areas{font-size:.98rem;margin:0}

.foot-base{
  border-top:1px solid rgba(255,255,255,.14);
  padding-top:22px;padding-bottom:26px;
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:12px;
}
.foot-base p{margin:0;font-size:.9rem}
.foot-social a{color:rgba(255,255,255,.82);margin-left:18px}
.foot-social a:first-child{margin-left:0}

/* --------------------------------------------------------------- mobile  */
/* Project rule: single-column breakpoint is 768px, not 480px. */

@media (max-width:900px){
  .foot-grid{grid-template-columns:1fr 1fr;gap:34px}
}

/* Nav switches to the hamburger at 1024px, not 768px. Six items plus the
   full business name will not fit on one line below that, and the cramped
   middle zone is where the header used to collide with itself. Content
   grids still stack at 768px per the project rule - see below. */
@media (max-width:1024px){
  .nav-toggle{display:block}
  .nav{
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--red-dark);padding:8px 16px 18px;
    border-bottom:4px solid var(--char);
  }
  .nav.open{display:flex}
  .nav a{width:100%;padding:14px 10px}
  .nav a.cta{margin:8px 0 0;justify-content:center}
  .site-head{position:relative}
  .head-inner{position:relative;min-height:76px}
  .brand{max-width:none}
}

@media (max-width:768px){
  .grid-3,.grid-2,.quotes,.gal{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .hero{padding:64px 0}
  .section{padding:56px 0}
  .brand-name{font-size:1.1rem}
  .brand img{width:60px}
}

/* ---------------------------------------------------- hero with a photo  */
/* Background image is set inline per page so the file can come from the
   photo library. The gradient over it keeps the headline readable no
   matter how bright the photo is. */

.hero-photo{
  background-size:cover;
  background-position:center;
  padding:132px 0;
  text-shadow:0 2px 14px rgba(0,0,0,.5);
}
.hero-photo p{color:rgba(255,255,255,.94)}

/* ---------------------------------------------------- project carousel   */
/* Native horizontal scroll with snap points. No transform, no clipping
   trick, no JS-dependent layout. The strip is a real scroller, so it
   renders correctly with the script off, with the script on, and on any
   photo shape - portrait job shots included. carousel.js only scrolls it. */

.car-section{padding-bottom:56px}

.car{
  position:relative;
  max-width:1160px;
  margin:0 auto;
  padding:0 24px;
}
.car:focus-visible{outline:3px solid var(--red);outline-offset:6px}

.car-view{
  border-radius:4px;
  background:var(--char);
  overflow:hidden;
}

.car-track{
  display:flex;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;              /* Firefox */
  -ms-overflow-style:none;           /* old Edge */
}
.car-track::-webkit-scrollbar{display:none}

.car-slide{
  flex:0 0 100%;
  min-width:100%;
  margin:0;
  position:relative;
  scroll-snap-align:center;
  scroll-snap-stop:always;
}
.car-slide img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  display:block;
  background:var(--char);
}
.car-slide figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:44px 26px 18px;
  background:linear-gradient(transparent,rgba(12,10,9,.88));
  color:#fff;
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
}
.car-cap-name{
  font-family:'Barlow Condensed',sans-serif;font-weight:600;
  text-transform:uppercase;letter-spacing:.05em;font-size:1.2rem;
}
.car-cap-tag{
  font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;
  color:rgba(255,255,255,.72);
}

.car-btn{
  position:absolute;top:50%;transform:translateY(-50%);
  width:52px;height:52px;
  display:none;                       /* shown once carousel.js is running */
  align-items:center;justify-content:center;
  background:rgba(20,18,16,.72);color:#fff;
  border:0;border-radius:50%;cursor:pointer;
  font-size:2rem;line-height:1;padding:0 0 4px;
  z-index:2;
}
.car-btn:hover{background:var(--red)}
.car-prev{left:40px}
.car-next{right:40px}
.car-ready .car-btn{display:flex}

.car-dots{display:flex;justify-content:center;gap:9px;padding:20px 0 0}
.car-dot{
  width:11px;height:11px;padding:0;border-radius:50%;cursor:pointer;
  background:var(--line);border:1px solid #c3b9ac;
}
.car-dot.is-on{background:var(--red);border-color:var(--red)}

.car-more{text-align:center;padding-top:34px}

@media (prefers-reduced-motion:reduce){
  .car-track{scroll-behavior:auto}
}

@media (max-width:768px){
  .hero-photo{padding:80px 0}
  .car{padding:0 16px}
  .car-slide img{aspect-ratio:4/3}
  .car-prev{left:22px}
  .car-next{right:22px}
  .car-btn{width:44px;height:44px;font-size:1.6rem}
  .car-slide figcaption{padding:36px 18px 14px}
}