/* layout.css — page structure: nav, hero, section shells, grid systems.
   This is "where things sit," not "what things look like" — visual
   styling for buttons/cards/badges lives in components.css instead. */

/* ---------- sunburst backdrop, echoing the logo's chrome rays ---------- */
.sunburst{
  position:absolute; inset:0;
  background:
    repeating-conic-gradient(from 8deg at 50% 120%,
      rgba(201,154,70,0.16) 0deg 2.2deg,
      transparent 2.2deg 9deg);
  pointer-events:none;
}

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(19,16,9,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.nav .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:10px; padding-bottom:10px;
  gap:16px;
}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none;}
.brand img{width:44px; height:44px; border-radius:50%;}
.brand-word{font-family:'Oswald',sans-serif; font-weight:700; letter-spacing:0.04em; font-size:17px; text-transform:uppercase; color:var(--cream);}
.brand-word small{display:block; font-family:'Fraunces',serif; text-transform:none; letter-spacing:0; font-size:11px; color:var(--brass-bright); font-weight:400;}
nav.links{display:flex; gap:26px; align-items:center;}
nav.links a{
  font-family:'Oswald',sans-serif; font-size:13px; letter-spacing:0.08em;
  text-transform:uppercase; text-decoration:none; color:var(--cream-dim);
  border-bottom:1px solid transparent; padding-bottom:4px;
  transition:color .2s, border-color .2s;
}
nav.links a:hover, nav.links a:focus-visible{color:var(--brass-bright); border-color:var(--brass);}
@media (max-width:820px){
  nav.links{display:none;}
}

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden; padding:96px 0 80px; border-bottom:1px solid var(--line);}
.hero .wrap{position:relative; z-index:2;}
.hero h1{font-size:clamp(38px,6vw,72px); line-height:1.02; max-width:16ch;}
.hero h1 em{font-style:normal; color:var(--brass-bright);}
.hero p.lede{
  font-size:19px; color:var(--cream-dim); max-width:52ch; margin:24px 0 34px;
  font-weight:300;
}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:56px;}

/* ---------- section shell ---------- */
section{padding:88px 0;}
.section-head{max-width:640px; margin-bottom:52px;}
.section-head .eyebrow{margin-bottom:14px;}
.section-head h2{font-size:clamp(28px,4vw,42px); line-height:1.08;}
.section-head p{color:var(--cream-dim); font-size:17px; margin-top:16px; font-weight:300;}

/* divider = the "shop line", echoing the logo's rays as a horizontal rule */
.shopline{
  height:1px; width:100%;
  background:repeating-linear-gradient(90deg, var(--brass) 0 22px, transparent 22px 34px);
  opacity:0.55;
}

/* ---------- difference ---------- */
.difference{background:var(--ink-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.diff-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:64px; align-items:center;}
@media (max-width:860px){.diff-grid{grid-template-columns:1fr; gap:36px;}}
.diff-visual{
  aspect-ratio:1/1; border:1px solid var(--line); border-radius:50%;
  display:flex; align-items:center; justify-content:center; position:relative;
  background:radial-gradient(circle at 50% 40%, rgba(201,154,70,0.10), transparent 70%);
}
.diff-visual img{width:78%; border-radius:50%; filter:saturate(1.05);}

/* ---------- services ---------- */
.svc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
@media (max-width:760px){.svc-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:480px){.svc-grid{grid-template-columns:1fr;}}

/* ---------- how it works ---------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:36px;}
@media (max-width:820px){.steps{grid-template-columns:1fr;}}

/* ---------- quote tool ---------- */
.quote-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px;}
@media (max-width:900px){.quote-grid{grid-template-columns:1fr;}}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.quote-result{border-left:1px solid var(--line); padding-left:40px;}
@media (max-width:900px){.quote-result{border-left:none; padding-left:0; border-top:1px solid var(--line); padding-top:32px;}}
.price-pair{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:18px 0;}
@media (max-width:480px){.price-pair{grid-template-columns:1fr;}}

/* ---------- service area / contact ---------- */
.contact{background:var(--ink-soft); border-top:1px solid var(--line);}
.contact-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:60px;}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr;}}

footer{padding:44px 0; border-top:1px solid var(--line);}
.foot-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}

/* ---------- gallery grids (before/after + team/rig) ---------- */
.ba-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px;}
@media (max-width:700px){.ba-grid{grid-template-columns:1fr;}}
.team-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media (max-width:760px){.team-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:480px){.team-grid{grid-template-columns:1fr;}}