/* ============================================================
   5Star Plumbing Salinas — Design System (2026)
   OKLCH color, light-dark() auto theming, bento grid, container
   queries, scroll-driven reveal (reduced-motion safe), fluid type.
   Type: Instrument Sans stack / Geist-like fallbacks
   ============================================================ */

@layer reset, tokens, base, layout, components, utilities;

@layer tokens{
  :root{
    color-scheme: light dark;

    /* brand ramp in oklch with hex fallback */
    --brand: #12B5A5;
    --brand: oklch(70% 0.12 185);
    --brand-2: #7C5CFF;
    --brand-2: oklch(62% 0.19 285);
    --brand-ink: #0B3B36;
    --brand-ink: oklch(32% 0.06 185);

    --ink: light-dark(#12141A, #F2F3F7);
    --ink-soft: light-dark(#5A6173, #A9B0C0);
    --bg: light-dark(#FAFAFB, #0F1115);
    --surface: light-dark(#FFFFFF, #171A21);
    --surface-2: light-dark(#F3F4F8, #1F232C);
    --line: light-dark(#E4E6EE, #2A2F3A);
    --line-soft: light-dark(#EFF1F6, #232833);

    --grad: linear-gradient(135deg, var(--brand), var(--brand-2));
    --ring: color-mix(in oklch, var(--brand) 45%, transparent);

    --r-s: 10px; --r-m: 16px; --r-l: 24px; --r-xl: 32px;
    --shadow: 0 1px 2px light-dark(rgba(18,20,26,.05), rgba(0,0,0,.4)),
              0 12px 32px -16px light-dark(rgba(18,20,26,.22), rgba(0,0,0,.6));
    --maxw: 1200px;

    --step--1: clamp(.86rem, .84rem + .1vw, .92rem);
    --step-0: clamp(1rem, .97rem + .16vw, 1.09rem);
    --step-1: clamp(1.2rem, 1.1rem + .5vw, 1.5rem);
    --step-2: clamp(1.5rem, 1.25rem + 1.2vw, 2.1rem);
    --step-3: clamp(2rem, 1.5rem + 2.4vw, 3.1rem);
    --step-4: clamp(2.5rem, 1.7rem + 3.9vw, 4.4rem);
  }
}

@layer reset{
  *,*::before,*::after{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
  body{ margin:0; }
  img,svg{ display:block; max-width:100%; }
  button{ font:inherit; }
}

@layer base{
  body{
    background:var(--bg); color:var(--ink);
    font-family:'Instrument Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
    font-size:var(--step-0); line-height:1.65; -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }
  svg{ width:1.4em; height:1.4em; flex-shrink:0; }
  a{ color:var(--brand-ink); text-decoration:none; }
  @media (prefers-color-scheme:dark){ a{ color:var(--brand); } }
  a:hover{ text-decoration:underline; text-underline-offset:3px; }
  h1,h2,h3{ margin:0 0 .5em; line-height:1.08; letter-spacing:-.03em; font-weight:600; }
  h1{ font-size:var(--step-4); }
  h2{ font-size:var(--step-3); }
  h3{ font-size:var(--step-1); }
  h4{ margin:0 0 .5em; font-size:var(--step-0); font-weight:600; }
  p{ margin:0 0 1em; }
  ul,ol{ padding-left:1.15em; }
  :focus-visible{ outline:3px solid var(--brand); outline-offset:3px; border-radius:4px; }
  ::selection{ background:color-mix(in oklch, var(--brand) 30%, transparent); }
  .grad-text{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
}

@layer layout{
  .container{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
  section{ padding:clamp(56px,7vw,104px) 0; }
  .stack > * + *{ margin-top:1rem; }
  .two-col{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,64px); align-items:start; }
  .grid{ display:grid; gap:16px; }
  .g2{ grid-template-columns:repeat(2,1fr); }
  .g3{ grid-template-columns:repeat(3,1fr); }
  .g4{ grid-template-columns:repeat(4,1fr); }

  /* bento */
  .bento{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }
  .bento > *{ grid-column:span 2; }
  .bento .wide{ grid-column:span 3; }
  .bento .full{ grid-column:span 6; }
  @media (max-width:900px){
    .two-col{ grid-template-columns:1fr; }
    .g3,.g4{ grid-template-columns:repeat(2,1fr); }
    .bento{ grid-template-columns:repeat(2,1fr); }
    .bento > *,.bento .wide,.bento .full{ grid-column:span 2; }
  }
  @media (max-width:600px){
    .g2,.g3,.g4{ grid-template-columns:1fr; }
    .bento{ grid-template-columns:1fr; }
    .bento > *,.bento .wide,.bento .full{ grid-column:span 1; }
  }
}

@layer components{
  /* ---- surfaces ---- */
  .card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l); padding:clamp(20px,2.4vw,30px); }
  .card-soft{ background:var(--surface-2); border:1px solid var(--line-soft); border-radius:var(--r-l); padding:clamp(20px,2.4vw,30px); }
  .card-grad{ background:var(--grad); color:#fff; border-radius:var(--r-l); padding:clamp(22px,2.6vw,32px); }
  .card-grad h2,.card-grad h3{ color:#fff; }
  .s-alt{ background:var(--surface-2); }

  /* ---- eyebrow / label ---- */
  .eb{
    display:inline-flex; align-items:center; gap:9px; font-size:var(--step--1);
    font-weight:600; letter-spacing:.02em; color:var(--ink-soft); margin-bottom:14px;
  }
  .eb::before{ content:""; width:22px; height:3px; border-radius:2px; background:var(--grad); }
  .shead{ max-width:66ch; margin-bottom:clamp(28px,3.5vw,48px); }
  .shead.center{ margin-inline:auto; text-align:center; }
  .shead.center .eb{ justify-content:center; }
  .lede{ font-size:var(--step-1); color:var(--ink-soft); line-height:1.5; letter-spacing:-.01em; }

  /* ---- pill ---- */
  .pill{
    display:inline-flex; align-items:center; gap:8px; padding:6px 13px; border-radius:999px;
    font-size:var(--step--1); font-weight:600; border:1px solid var(--line);
    background:var(--surface); color:var(--ink-soft);
  }
  .pill::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--brand); }
  .pill-b{ background:color-mix(in oklch, var(--brand) 14%, transparent); border-color:transparent; color:var(--brand-ink); }
  @media (prefers-color-scheme:dark){ .pill-b{ color:var(--brand); } }

  /* ---- quick answer: AEO block ---- */
  .answer{
    border:1px solid var(--line); border-left:4px solid transparent;
    border-image:var(--grad) 1; border-radius:var(--r-m);
    background:var(--surface); padding:clamp(20px,2.4vw,28px); margin-bottom:clamp(28px,3vw,40px);
  }
  .answer .q{ font-size:var(--step--1); font-weight:700; color:var(--ink-soft); margin-bottom:10px; display:flex; align-items:center; gap:9px; }
  .answer .q::before{ content:""; width:18px; height:18px; border-radius:5px; background:var(--grad); flex:none; }
  .answer p{ margin:0; font-size:var(--step-1); line-height:1.5; letter-spacing:-.01em; }

  /* ---- buttons ---- */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:9px;
    padding:14px 24px; border-radius:999px; border:1px solid transparent;
    background:var(--ink); color:var(--bg); font-weight:600; cursor:pointer;
    transition:transform .16s ease, box-shadow .16s ease, opacity .16s ease;
  }
  .btn:hover{ text-decoration:none; transform:translateY(-1px); box-shadow:0 10px 24px -12px var(--ring); }
  .btn-grad{ background:var(--grad); color:#fff; }
  .btn-out{ background:transparent; color:var(--ink); border-color:var(--line); }
  .btn-out:hover{ border-color:var(--brand); }
  .btn-light{ background:#fff; color:#12141A; }
  .btn-ghost-l{ background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.4); }
  .btn-sm{ padding:9px 16px; font-size:var(--step--1); }
  .btn-block{ width:100%; }

  /* ---- header ---- */
  .topbar{ background:var(--ink); color:var(--bg); font-size:var(--step--1); }
  .topbar .container{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-block:9px; }
  .topbar a{ color:var(--bg); font-weight:600; }
  .topbar div{ min-width:0; overflow-wrap:anywhere; }

  .site-header{ position:sticky; top:0; z-index:60; background:color-mix(in oklch, var(--bg) 86%, transparent); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
  .site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding-block:11px; }
  .brand{ display:flex; align-items:center; gap:11px; min-width:0; }
  .brand img{ width:40px; height:40px; border-radius:11px; }
  .bw strong{ display:block; font-weight:700; letter-spacing:-.02em; font-size:1.05rem; color:var(--ink); }
  .bw span{ display:block; font-size:.7rem; color:var(--ink-soft); font-weight:500; }
  .mainnav ul{ list-style:none; display:flex; gap:24px; margin:0; padding:0; align-items:center; }
  .mainnav a{ color:var(--ink); font-weight:600; font-size:var(--step--1); padding:6px 0; position:relative; }
  .mainnav a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; border-radius:2px; background:var(--grad); transition:right .22s ease; }
  .mainnav a:hover{ text-decoration:none; }
  .mainnav a:hover::after,.mainnav a[aria-current="page"]::after{ right:0; }
  .navcta{ display:flex; align-items:center; gap:9px; }
  .navtoggle{ display:none; width:42px; height:38px; border-radius:11px; border:1px solid var(--line); background:var(--surface); align-items:center; justify-content:center; cursor:pointer; }
  .navtoggle span,.navtoggle span::before,.navtoggle span::after{ content:""; display:block; width:17px; height:2px; border-radius:2px; background:var(--ink); position:relative; }
  .navtoggle span::before{ position:absolute; top:-5px; }
  .navtoggle span::after{ position:absolute; top:5px; }
  .callicon{ display:none; padding:11px; }
  .callicon svg{ width:17px; height:17px; }

  .hasdrop{ position:relative; }
  .mainnav .drop{
    display:none; position:absolute; top:calc(100% + 14px); left:-16px; min-width:430px;
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l);
    box-shadow:var(--shadow); padding:12px; list-style:none; margin:0;
    grid-template-columns:1fr 1fr; gap:2px;
  }
  .mainnav .hasdrop:hover .drop,.mainnav .hasdrop:focus-within .drop{ display:grid; }
  .mainnav .drop a{ display:block; padding:9px 12px; border-radius:11px; font-weight:600; font-size:var(--step--1); color:var(--ink); }
  .mainnav .drop a::after{ display:none; }
  .mainnav .drop a:hover{ background:var(--surface-2); text-decoration:none; }

  /* ---- hero ---- */
  .hero{ position:relative; overflow:clip; padding-top:clamp(40px,5vw,72px); }
  .hero::before{
    content:""; position:absolute; inset:-30% -10% auto -10%; height:70vh; z-index:-1;
    background:radial-gradient(50% 60% at 20% 30%, color-mix(in oklch, var(--brand) 24%, transparent), transparent 70%),
               radial-gradient(45% 55% at 80% 20%, color-mix(in oklch, var(--brand-2) 22%, transparent), transparent 70%);
    filter:blur(8px);
  }
  .hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,56px); align-items:center; }
  .hero-pills{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
  .hero h1{ letter-spacing:-.04em; }
  .hero-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; }
  .hero-note{ font-size:var(--step--1); color:var(--ink-soft); margin-top:20px; }
  .hero-fig{ position:relative; border-radius:var(--r-xl); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow); }
  .hero-fig img{ width:100%; height:clamp(300px,42vw,470px); object-fit:cover; }
  @media (max-width:900px){ .hero-grid{ grid-template-columns:1fr; } }

  /* ---- trust strip ---- */
  .trust{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--surface); }
  .trust .container{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding-block:22px; }
  .trust div b{ display:block; font-size:var(--step-1); font-weight:700; letter-spacing:-.02em; }
  .trust div span{ font-size:var(--step--1); color:var(--ink-soft); }
  @media (max-width:700px){ .trust .container{ grid-template-columns:repeat(2,1fr); } }

  /* ---- service cards, container-query aware ---- */
  .svc{
    container-type:inline-size;
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l);
    padding:24px; display:flex; flex-direction:column; gap:10px;
    transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  }
  .svc:hover{ border-color:color-mix(in oklch, var(--brand) 55%, var(--line)); transform:translateY(-3px); box-shadow:var(--shadow); }
  .svc .ic{ width:42px; height:42px; border-radius:13px; background:var(--grad); display:grid; place-items:center; color:#fff; }
  .svc .ic svg{ width:21px; height:21px; }
  .svc h3{ margin:0; font-size:var(--step-1); letter-spacing:-.02em; }
  .svc h3 a{ color:var(--ink); }
  .svc p{ margin:0; color:var(--ink-soft); font-size:var(--step--1); }
  .svc .more{ margin-top:auto; font-weight:600; font-size:var(--step--1); color:var(--brand-ink); }
  @media (prefers-color-scheme:dark){ .svc .more{ color:var(--brand); } }
  @container (min-width: 340px){ .svc{ padding:28px; } }

  /* ---- steps ---- */
  .steps{ counter-reset:s; display:grid; gap:14px; }
  .steps .st{ display:grid; grid-template-columns:46px 1fr; gap:16px; align-items:start; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m); padding:20px; }
  .steps .st::before{
    counter-increment:s; content:counter(s,decimal-leading-zero);
    width:38px; height:38px; border-radius:12px; background:var(--surface-2);
    display:grid; place-items:center; font-weight:700; font-size:var(--step--1); color:var(--ink-soft);
  }
  .steps .st h3{ font-size:var(--step-0); margin:0 0 5px; }
  .steps .st p{ margin:0; color:var(--ink-soft); font-size:var(--step--1); }

  /* ---- checks ---- */
  .checks{ list-style:none; padding:0; margin:0; display:grid; gap:12px; }
  .checks li{ display:grid; grid-template-columns:22px 1fr; gap:12px; align-items:start; }
  .checks li::before{
    content:""; width:20px; height:20px; border-radius:7px; background:var(--grad); margin-top:3px;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat, linear-gradient(#000,#000);
    -webkit-mask-composite:source-out; mask-composite:subtract;
  }

  /* ---- scope ---- */
  .scope{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .scope > div{ border-radius:var(--r-l); padding:clamp(20px,2.4vw,30px); border:1px solid var(--line); }
  .scope .inc{ background:color-mix(in oklch, var(--brand) 8%, var(--surface)); }
  .scope .exc{ background:var(--surface-2); }
  .scope h4{ font-size:var(--step--1); text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); margin-bottom:14px; }
  .scope ul{ list-style:none; padding:0; margin:0; }
  .scope li{ padding:10px 0; border-bottom:1px solid var(--line-soft); font-size:var(--step--1); }
  .scope li:last-child{ border-bottom:none; }
  @media (max-width:700px){ .scope{ grid-template-columns:1fr; } }

  /* ---- factors ---- */
  .factors{ list-style:none; padding:0; margin:18px 0 0; display:grid; gap:0; }
  .factors li{ display:grid; grid-template-columns:112px 1fr; gap:14px; padding:14px 0; border-bottom:1px solid var(--line-soft); align-items:baseline; }
  .factors li b{ font-size:var(--step--1); text-transform:uppercase; letter-spacing:.06em; color:var(--brand-ink); }
  @media (prefers-color-scheme:dark){ .factors li b{ color:var(--brand); } }
  @media (max-width:600px){ .factors li{ grid-template-columns:1fr; gap:4px; } }

  /* ---- local note ---- */
  .local{ background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-l); padding:clamp(20px,2.4vw,28px); }
  .local h4{ font-size:var(--step--1); text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); }
  .local p{ margin:0; color:var(--ink-soft); }

  /* ---- gallery ---- */
  .gal{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; }
  .gal figure{ margin:0; position:relative; border-radius:var(--r-m); overflow:hidden; border:1px solid var(--line); background:var(--surface-2); }
  .gal img{ width:100%; height:210px; object-fit:cover; transition:transform .5s ease; }
  .gal figure:hover img{ transform:scale(1.04); }
  .gal figcaption{ position:absolute; inset:auto 0 0 0; padding:10px 13px; font-size:.72rem; color:#fff; background:linear-gradient(0deg,rgba(10,12,16,.9),transparent); }

  /* ---- FAQ ---- */
  .faq{ max-width:860px; display:grid; gap:10px; }
  .faq details{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m); }
  .faq details[open]{ border-color:color-mix(in oklch, var(--brand) 45%, var(--line)); }
  .faq summary{ cursor:pointer; list-style:none; padding:18px 22px; display:flex; justify-content:space-between; gap:16px; align-items:center; font-weight:600; }
  .faq summary::-webkit-details-marker{ display:none; }
  .faq summary::after{ content:"+"; color:var(--ink-soft); font-size:1.2rem; }
  .faq details[open] summary::after{ content:"–"; }
  .faq details p{ margin:0; padding:0 22px 20px; color:var(--ink-soft); font-size:var(--step--1); }

  /* ---- reviews ---- */
  .rev{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l); padding:26px; }
  .rev .stars{ color:var(--brand); letter-spacing:2px; display:block; margin-bottom:10px; }
  .rev .who{ font-size:var(--step--1); color:var(--ink-soft); margin-top:14px; }

  /* ---- contact ---- */
  .ccard{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l); padding:24px; }
  .ccard h4{ font-size:var(--step--1); text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); }
  .ccard p{ margin:0; font-weight:600; overflow-wrap:anywhere; }
  .ccard .sub{ font-weight:400; color:var(--ink-soft); font-size:var(--step--1); margin-top:6px; }
  .mapbox{ border-radius:var(--r-l); overflow:hidden; border:1px solid var(--line); }
  .mapbox iframe{ width:100%; height:420px; border:0; display:block; }

  /* ---- tables ---- */
  .tbl{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-l); background:var(--surface); }
  table{ border-collapse:collapse; width:100%; min-width:520px; font-size:var(--step--1); }
  th,td{ text-align:left; padding:14px 18px; border-bottom:1px solid var(--line-soft); vertical-align:top; }
  thead th{ background:var(--surface-2); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); font-weight:600; }
  tbody tr:last-child td{ border-bottom:none; }

  /* ---- breadcrumb ---- */
  .crumb{ font-size:var(--step--1); color:var(--ink-soft); padding-top:18px; }
  .crumb a{ color:var(--ink-soft); }
  .crumb i{ font-style:normal; margin:0 8px; opacity:.5; }

  /* ---- footer ---- */
  .site-footer{ background:var(--surface); border-top:1px solid var(--line); margin-top:clamp(40px,5vw,80px); }
  .site-footer .container{ padding-top:52px; }
  .fgrid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:32px; padding-bottom:36px; }
  .fbrand{ display:flex; gap:11px; align-items:center; margin-bottom:14px; }
  .fbrand img{ width:40px; height:40px; border-radius:11px; }
  .fbrand strong{ font-weight:700; letter-spacing:-.02em; }
  .site-footer h5{ font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-soft); margin:0 0 14px; }
  .site-footer ul{ list-style:none; padding:0; margin:0; display:grid; gap:9px; }
  .site-footer li{ font-size:var(--step--1); overflow-wrap:anywhere; }
  .site-footer a{ color:var(--ink-soft); }
  .fbot{ border-top:1px solid var(--line); padding:18px 0 28px; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:.78rem; color:var(--ink-soft); }
  @media (max-width:900px){ .fgrid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:600px){ .fgrid{ grid-template-columns:1fr; } }

  /* ---- mobile ---- */
  .mcall{ display:none; }
  .mpanel{ display:none; position:fixed; inset:0; background:var(--bg); z-index:100; padding:20px 24px; overflow-y:auto; }
  .mpanel.open{ display:block; }
  .mpanel .top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
  .mpanel ul{ list-style:none; padding:0; margin:0; }
  .mpanel a{ display:block; padding:14px 0; border-bottom:1px solid var(--line); font-weight:600; font-size:var(--step-1); color:var(--ink); }
  @media (max-width:860px){
    .mainnav ul,.navcta .btn-out{ display:none; }
    .navtoggle{ display:flex; }
    .callicon{ display:inline-flex; }
    .callfull{ display:none; }
    body{ padding-bottom:66px; }
    .mcall{ display:flex; position:fixed; inset:auto 0 0 0; z-index:70; background:var(--surface); border-top:1px solid var(--line); padding:10px 14px; }
  }
}

@layer utilities{
  .center{ text-align:center; }
  .muted{ color:var(--ink-soft); }
  .mt0{ margin-top:0; }

  /* scroll-driven reveal, progressive + reduced-motion safe */
  @media (prefers-reduced-motion:no-preference){
    @supports (animation-timeline: view()){
      .reveal{ animation:reveal linear both; animation-timeline:view(); animation-range:entry 5% cover 22%; }
      @keyframes reveal{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
    }
  }
}