/* Smart Home Theaters — the confidence site.
   Static, self-contained, no external requests. Deliberately shares the cut sheets'
   palette and type discipline (docs/cutsheets/) so a sheet and the site read as one brand.

   ‼️Its job is not to sell what is on it. Its job is to look like people who know
   exactly what they are doing, and then send the reader to Ixome. */

:root{
  --ink:#14110f;          /* near-black, warm */
  --body:#3a332d;
  --muted:#6e655c;
  --faint:#9a9186;
  --rule:#ded7cd;
  --paper:#ffffff;
  --tint:#f7f4ef;
  --sand:#efe9e0;
  --accent:#8a5a1e;       /* brass */
  --accent-lite:#d9a460;
  --shadow:0 1px 2px rgba(20,17,15,.05), 0 8px 28px rgba(20,17,15,.07);
  --wrap:1180px;
  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--body);
  font-family:var(--sans); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }

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

/* ---------------- nav ---------------- */
.nav{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--rule);
}
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; gap:24px;
            min-height:72px; }
.brand{ text-decoration:none; line-height:1; flex:none; }
.brand b{ display:block; font-size:17px; font-weight:800; letter-spacing:.09em;
          text-transform:uppercase; color:var(--ink); }
.brand span{ display:block; margin-top:5px; font-size:11px; font-weight:800;
             letter-spacing:.17em; text-transform:uppercase; color:var(--accent); }
.navlinks{ display:flex; align-items:center; gap:30px; flex-wrap:wrap; }
.navlinks a{ font-size:12px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
             text-decoration:none; color:var(--body); white-space:nowrap;
             border-bottom:2px solid transparent; padding-bottom:3px; transition:.15s; }
.navlinks a:hover{ color:var(--ink); border-bottom-color:var(--accent-lite); }
.navlinks a.here{ color:var(--ink); border-bottom-color:var(--accent); }
.navlinks a.ix{ color:var(--paper); background:var(--ink); border:0; padding:10px 17px;
                border-radius:2px; letter-spacing:.11em; }
.navlinks a.ix:hover{ background:var(--accent); }

/* ---------------- hero ---------------- */
.hero{ position:relative; min-height:76vh; display:flex; align-items:flex-end;
       background:var(--ink) center/cover no-repeat; color:#fff; overflow:hidden; }
.hero::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(12,10,9,.42) 0%,rgba(12,10,9,.18) 38%,rgba(12,10,9,.86) 100%); }
.hero .wrap{ position:relative; z-index:2; padding-top:110px; padding-bottom:64px; }
.hero.short{ min-height:56vh; }
.eyebrow{ font-size:11px; font-weight:800; letter-spacing:.22em; text-transform:uppercase;
          color:var(--accent-lite); margin:0 0 16px; }
.hero h1{ margin:0; font-size:clamp(38px,5.6vw,68px); line-height:1.03;
          letter-spacing:-.028em; font-weight:800; max-width:16ch; color:#fff; }
.hero p{ margin:20px 0 0; max-width:56ch; font-size:clamp(16px,1.6vw,19px);
         line-height:1.55; color:rgba(255,255,255,.9); }

/* ---------------- generic sections ---------------- */
section{ padding:88px 0; }
section.tight{ padding:60px 0; }
section.tinted{ background:var(--tint); }
section.sand{ background:var(--sand); }

.kicker{ font-size:11px; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
         color:var(--accent); margin:0 0 14px; }
h2{ margin:0; font-size:clamp(28px,3.6vw,42px); line-height:1.12; letter-spacing:-.022em;
    font-weight:800; color:var(--ink); max-width:20ch; }
h3{ margin:0 0 8px; font-size:18px; line-height:1.28; letter-spacing:-.012em;
    font-weight:800; color:var(--ink); }
.lede{ margin:20px 0 0; font-size:clamp(17px,1.7vw,20px); line-height:1.58; max-width:62ch; }
p{ margin:16px 0 0; }
p:first-child{ margin-top:0; }
strong{ color:var(--ink); font-weight:700; }

/* ---------------- split ---------------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px);
        align-items:center; }
.split.wide-left{ grid-template-columns:1.15fr .85fr; }
.split figure{ margin:0; }
.split figure img{ width:100%; box-shadow:var(--shadow); }
.split figcaption{ margin-top:11px; font-size:12px; line-height:1.5; color:var(--faint);
                   letter-spacing:.02em; }

/* ---------------- tiles ---------------- */
.tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px; }
.tile{ position:relative; overflow:hidden; background:var(--ink); }
.tile{ aspect-ratio:3/2; }
.tile img{ width:100%; height:100%; object-fit:cover;
           transition:transform .5s cubic-bezier(.2,.7,.3,1); }
.tile:hover img{ transform:scale(1.035); }
.tile figcaption{ position:absolute; left:0; right:0; bottom:0; padding:34px 18px 15px;
  color:#fff; font-size:12.5px; font-weight:700; letter-spacing:.06em;
  background:linear-gradient(180deg,rgba(12,10,9,0),rgba(12,10,9,.82)); }

/* ---------------- the three doors ---------------- */
.doors{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:46px; }
.door{ display:block; text-decoration:none; background:var(--paper); border:1px solid var(--rule);
       padding:30px 28px 26px; transition:.2s; }
.door:hover{ border-color:var(--ink); transform:translateY(-2px); box-shadow:var(--shadow); }
.door .n{ font-size:11px; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
          color:var(--accent); }
.door h3{ margin:11px 0 9px; font-size:23px; letter-spacing:-.018em; }
.door p{ margin:0; font-size:15px; line-height:1.55; color:var(--body); }
.door .go{ display:inline-block; margin-top:16px; font-size:12px; font-weight:800;
           letter-spacing:.13em; text-transform:uppercase; color:var(--ink); }
.door .go::after{ content:" →"; color:var(--accent); }

/* ---------------- facts row ---------------- */
.facts{ display:grid; grid-template-columns:repeat(3,1fr); gap:34px; margin-top:40px; }
.fact{ border-top:3px solid var(--accent); padding-top:14px; }
.fact b{ display:block; font-size:clamp(26px,3vw,34px); line-height:1.05; letter-spacing:-.02em;
         color:var(--ink); font-weight:800; }
.fact span{ display:block; margin-top:8px; font-size:14.5px; line-height:1.5; color:var(--body); }

/* ---------------- spine band ---------------- */
.spine{ background:var(--ink); color:#f2eee8; }
.spine .wrap{ padding-top:66px; padding-bottom:66px; display:grid;
              grid-template-columns:auto 1fr; gap:clamp(28px,5vw,64px); align-items:center; }
.spine .say{ font-size:clamp(28px,3.4vw,40px); line-height:1.05; letter-spacing:-.024em;
             font-weight:800; color:#fff; }
.spine .say i{ display:block; font-style:normal; font-size:11px; font-weight:800;
               letter-spacing:.2em; text-transform:uppercase; color:var(--accent-lite);
               margin-bottom:12px; }
.spine p{ margin:0; font-size:16.5px; line-height:1.6; color:rgba(255,255,255,.78); max-width:60ch; }
.spine p strong{ color:#fff; }

/* ---------------- the Ixome handoff ---------------- */
.handoff{ background:var(--sand); border-top:3px solid var(--accent); }
.handoff .wrap{ padding-top:76px; padding-bottom:76px; text-align:center; }
.handoff h2{ margin:0 auto; max-width:22ch; }
.handoff p{ margin:20px auto 0; max-width:60ch; font-size:18px; }
.btn{ display:inline-block; margin-top:30px; background:var(--ink); color:#fff;
      text-decoration:none; padding:17px 34px; font-size:13px; font-weight:800;
      letter-spacing:.15em; text-transform:uppercase; border-radius:2px; transition:.2s; }
.btn:hover{ background:var(--accent); }
.btn.ghost{ background:transparent; color:var(--ink); border:2px solid var(--ink); }
.btn.ghost:hover{ background:var(--ink); color:#fff; }
.handoff small{ display:block; margin-top:18px; font-size:13px; color:var(--muted); }

/* ---------------- lists ---------------- */
.checks{ margin:26px 0 0; padding:0; list-style:none; }
.checks li{ position:relative; padding-left:30px; margin-top:13px; font-size:16.5px;
            line-height:1.55; }
.checks li::before{ content:""; position:absolute; left:0; top:.62em; width:14px; height:2px;
                    background:var(--accent); }
.checks li b{ color:var(--ink); }

.cols2{ columns:2; column-gap:52px; margin-top:26px; }
.cols2 p{ break-inside:avoid; margin:0 0 16px; }

/* ---------------- pull quote ---------------- */
.pull{ margin:0; border-left:3px solid var(--accent); padding:4px 0 4px 26px;
       font-size:clamp(19px,2.2vw,25px); line-height:1.36; letter-spacing:-.012em;
       color:var(--ink); font-weight:700; max-width:34ch; }

/* ---------------- footer ---------------- */
footer{ background:var(--ink); color:rgba(255,255,255,.6); font-size:13.5px; line-height:1.65; }
footer .wrap{ padding-top:52px; padding-bottom:52px; display:grid;
              grid-template-columns:1.3fr 1fr 1fr; gap:38px; }
footer b.f{ display:block; color:#fff; font-size:15px; font-weight:800; letter-spacing:.09em;
            text-transform:uppercase; margin-bottom:4px; }
footer span.pw{ display:block; font-size:12px; font-weight:800; letter-spacing:.17em;
                text-transform:uppercase; color:var(--accent-lite); margin-bottom:14px; }
footer h4{ margin:0 0 12px; font-size:11px; font-weight:800; letter-spacing:.18em;
           text-transform:uppercase; color:rgba(255,255,255,.55); }
footer a{ color:rgba(255,255,255,.82); text-decoration:none; display:block; margin-bottom:8px; }
footer a:hover{ color:#fff; }
.legal{ border-top:1px solid rgba(255,255,255,.13); }
.legal .wrap{ display:block; padding-top:22px; padding-bottom:34px; font-size:12px;
              color:rgba(255,255,255,.45); }

/* ---------------- responsive ---------------- */
@media (max-width:900px){
  .split,.split.wide-left{ grid-template-columns:1fr; gap:34px; }
  .tiles,.doors,.facts{ grid-template-columns:1fr 1fr; }
  .spine .wrap{ grid-template-columns:1fr; }
  footer .wrap{ grid-template-columns:1fr 1fr; }
  .cols2{ columns:1; }
  section{ padding:64px 0; }
}
@media (max-width:620px){
  body{ font-size:16px; }
  .wrap{ padding:0 20px; }
  .nav .wrap{ min-height:auto; padding-top:14px; padding-bottom:14px; flex-wrap:wrap; }
  .navlinks{ gap:18px; width:100%; }
  .tiles,.doors,.facts{ grid-template-columns:1fr; }
  .hero{ min-height:66vh; }
  .hero .wrap{ padding-top:56px; padding-bottom:44px; }
  footer .wrap{ grid-template-columns:1fr; }
}

/* ---------- a hero with no photograph ----------
   Used where the strongest image is the argument itself (the designers' pair), and
   where every candidate photo would have had to be upscaled to fill the band. */
.hero.plain{ background:var(--ink); min-height:auto; }
.hero.plain::after{ display:none; }
.hero.plain .wrap{ padding-top:96px; padding-bottom:84px; }
.hero.plain h1{ max-width:19ch; }
.hero.plain p{ color:rgba(255,255,255,.72); }

/* ---------- feature tile ----------
   Runs the full width as a banner over the grid. Spanning only two columns left its
   shorter row-mate stranded against the tile's black background. */
.tiles .tile.feature{ grid-column:1 / -1; aspect-ratio:5/2; }
@media (max-width:620px){ .tiles .tile.feature{ aspect-ratio:3/2; } }

/* ---------- the Ixome strip ----------
   Every trade page ends pointing at Ixome. It is deliberately slim so it cannot
   compete with the page's own ask ("send us your plans"). */
.ixstrip{ background:var(--sand); border-top:3px solid var(--accent); }
.ixstrip .wrap{ padding:34px 28px; display:flex; align-items:center; gap:26px;
                justify-content:space-between; flex-wrap:wrap; }
.ixstrip p{ margin:0; font-size:16px; line-height:1.5; max-width:64ch; }
.ixstrip p b{ color:var(--ink); }
.ixstrip a{ flex:none; margin-top:0; }