/* Machine Ice Company — site styles.
   Tokens are lifted from the portal (static/index.html :root) so the public
   site and the staff portal read as one company. Light only, like the portal. */

:root{
  --ground:#F7F8FA; --card:#FFFFFF;
  --ink:#0F1720; --ink-2:#3D4854; --ink-3:#7B8794;
  --line:#E4E8EC; --line-strong:#D3DAE0;
  --accent:#1B2F5B; --accent-hover:#14244A; --accent-ink:#FFFFFF;
  --accent-soft:#EEF2F8;
  --amber:#8F6400; --amber-soft:#FBF3DE;
  --green:#0F7B54; --green-soft:#E8F5EF;
  --field:#FFFFFF; --field-line:#C9D2D9;
  --shadow:0 1px 2px rgba(15,23,32,.05);
  --shadow-lift:0 1px 2px rgba(15,23,32,.04), 0 6px 20px rgba(15,23,32,.06);
  --wrap:1120px; --gutter:20px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font:400 16px/1.6 'Lato',system-ui,-apple-system,'Segoe UI',sans-serif;
}
img{max-width:100%; display:block}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.2; margin:0 0 .5em; font-weight:700; letter-spacing:-.01em}
h1{font-size:clamp(28px,5vw,44px)}
h2{font-size:clamp(22px,3.4vw,32px)}
h3{font-size:19px}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter)}
.muted{color:var(--ink-3)}

/* Skip link — keyboard users land on content, not the nav, every page. */
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--gutter);top:8px;z-index:100;background:var(--card);
  padding:10px 14px;border-radius:8px;box-shadow:var(--shadow-lift)}

/* ---- the thin bar above the nav: how to reach a human ---- */
.topbar{background:var(--accent); color:#D8E1F0; font-size:14px}
.topbar .wrap{display:flex; flex-wrap:wrap; gap:6px 22px; padding-top:8px; padding-bottom:8px}
.topbar a{color:#FFF}
.topbar .addr{color:#AEBDD6}

/* ---- navigation ---- */
.nav{background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:40}
.nav .wrap{display:flex; align-items:center; gap:16px; min-height:68px}
.brand{font-weight:700; font-size:18px; color:var(--ink); white-space:nowrap}
.brand span{color:var(--accent)}
.nav ul{display:flex; gap:4px; list-style:none; margin:0 0 0 auto; padding:0; flex-wrap:wrap}
.nav ul a{display:block; padding:9px 12px; border-radius:8px; color:var(--ink-2); font-size:15px}
.nav ul a:hover{background:var(--accent-soft); color:var(--accent); text-decoration:none}
.nav ul a[aria-current="page"]{color:var(--accent); font-weight:700}

.btn{display:inline-block; background:var(--accent); color:var(--accent-ink);
  padding:11px 20px; border-radius:10px; font-weight:700; font-size:15px;
  border:1px solid var(--accent); cursor:pointer; text-align:center}
.btn:hover{background:var(--accent-hover); text-decoration:none; color:#fff}
.btn.ghost{background:transparent; color:var(--accent)}
.btn.ghost:hover{background:var(--accent-soft); color:var(--accent)}
.navtoggle{display:none; margin-left:auto; background:none; border:1px solid var(--line-strong);
  border-radius:8px; padding:8px 12px; font:inherit; cursor:pointer}

@media (max-width:860px){
  .navtoggle{display:block}
  .nav ul{display:none; width:100%; margin:0; padding-bottom:12px}
  .nav.open ul{display:block}
  .nav.open ul a{padding:12px}
  .nav .wrap{flex-wrap:wrap}
}

/* ---- hero ---- */
.hero{background:linear-gradient(180deg,#16284E 0%, var(--accent) 100%); color:#fff}
.hero .wrap{padding:clamp(48px,8vw,88px) var(--gutter)}
.hero h1{color:#fff; max-width:19ch}
.hero p{color:#C9D6EA; font-size:clamp(16px,2vw,19px); max-width:56ch}
.hero .kicker{text-transform:uppercase; letter-spacing:.12em; font-size:13px;
  font-weight:700; color:#8FA9D4; margin-bottom:14px}
.hero .actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:26px}
/* On the navy hero the default navy button disappears into the background —
   invert it so the primary action is the one that stands out. */
.hero .btn{background:#fff; color:var(--accent); border-color:#fff}
.hero .btn:hover{background:#E8EEF8; color:var(--accent-hover)}
.hero .btn.ghost{background:transparent; color:#fff; border-color:#5E77A8}
.hero .btn.ghost:hover{background:rgba(255,255,255,.12); color:#fff}

/* ---- sections and cards ---- */
section{padding:clamp(40px,6vw,68px) 0}
section.tight{padding:clamp(28px,4vw,44px) 0}
.lead{max-width:62ch; color:var(--ink-2); font-size:17px}
.grid{display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.card{background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:24px; box-shadow:var(--shadow)}
.card h3{margin-bottom:8px}
.card p{color:var(--ink-2); margin-bottom:14px}
.card .more{font-weight:700; font-size:15px}

.band{background:var(--card); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.split{display:grid; gap:32px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); align-items:start}

ul.ticks{list-style:none; padding:0; margin:0}
ul.ticks li{position:relative; padding-left:28px; margin-bottom:10px; color:var(--ink-2)}
ul.ticks li::before{content:""; position:absolute; left:4px; top:9px; width:7px; height:12px;
  border:solid var(--green); border-width:0 2.5px 2.5px 0; transform:rotate(45deg)}

.callout{background:var(--accent-soft); border:1px solid #D7E0EE; border-radius:14px; padding:22px}

/* ---- spec table (ice machines) ---- */
.tablewrap{overflow-x:auto; border:1px solid var(--line); border-radius:14px; background:var(--card)}
table{border-collapse:collapse; width:100%; min-width:680px; font-size:15px}
th,td{text-align:left; padding:13px 16px; border-bottom:1px solid var(--line)}
th{background:var(--accent-soft); color:var(--accent); font-size:13px;
  text-transform:uppercase; letter-spacing:.06em; white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
td .note{display:block; color:var(--ink-3); font-size:13px; margin-top:3px}

/* ---- forms ---- */
.form{background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:clamp(20px,3vw,30px); box-shadow:var(--shadow)}
.field{margin-bottom:17px}
.field label{display:block; font-weight:700; font-size:14px; margin-bottom:6px}
.field .hint{font-weight:400; color:var(--ink-3)}
input[type=text],input[type=email],input[type=tel],select,textarea{
  width:100%; padding:11px 13px; font:inherit; color:var(--ink);
  background:var(--field); border:1px solid var(--field-line); border-radius:10px}
textarea{min-height:124px; resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}

/* The consent block. Deliberately plain and legible: a carrier reviewer has to
   be able to read the exact sentence the customer agreed to. */
.consent{border:1px solid var(--line-strong); border-radius:12px; padding:18px; margin:22px 0}
.consent > p:first-child{font-weight:700; margin-bottom:12px}
.consent label{display:flex; gap:11px; align-items:flex-start; margin-bottom:14px;
  font-size:14.5px; line-height:1.5; color:var(--ink-2); cursor:pointer}
.consent label:last-of-type{margin-bottom:0}
.consent input[type=checkbox]{margin:3px 0 0; width:18px; height:18px; flex:none; accent-color:var(--accent)}
.consent .fineprint{font-size:13px; color:var(--ink-3); margin:12px 0 0}

.formnote{font-size:14px; color:var(--ink-3); margin-top:14px}
.status{display:none; border-radius:10px; padding:13px 15px; margin-bottom:18px; font-size:15px}
.status.ok{display:block; background:var(--green-soft); color:var(--green); border:1px solid #BFE3D3}
.status.bad{display:block; background:var(--amber-soft); color:var(--amber); border:1px solid #EBDCB4}

/* ---- gallery ---- */
.gallery{display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.gallery figure{margin:0; background:var(--card); border:1px solid var(--line);
  border-radius:12px; overflow:hidden}
.gallery img{width:100%; height:210px; object-fit:cover; background:var(--accent-soft)}
.gallery figcaption{padding:11px 14px; font-size:14px; color:var(--ink-2)}

/* ---- footer ---- */
footer{background:var(--accent); color:#C9D6EA; margin-top:8px}
footer .wrap{padding:40px var(--gutter) 30px}
footer a{color:#fff}
footer h4{color:#fff; font-size:15px; margin:0 0 12px; letter-spacing:.02em}
footer ul{list-style:none; padding:0; margin:0}
footer li{margin-bottom:8px; font-size:15px}
.footgrid{display:grid; gap:28px; grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.legal{border-top:1px solid #33497A; margin-top:30px; padding-top:20px; font-size:13px; color:#9FB2D0}
.legal strong{color:#D8E1F0}

@media print{ .nav,.topbar,footer,.btn{display:none} body{background:#fff} }

/* ---------------------------------------------------------------------------
   Motion. Cards, sections and gallery tiles lift in as they come into view,
   and buttons and cards respond to the pointer.

   Two rules this follows, both deliberate:
   - Nothing is hidden by CSS alone. `.reveal` only becomes invisible once the
     script adds `.js-motion` to <html>, so if the JavaScript never runs the page
     is still fully readable rather than blank.
   - `prefers-reduced-motion` turns all of it off. Some people get motion sick.
   --------------------------------------------------------------------------- */

.js-motion .reveal{opacity:0; transform:translateY(16px)}
.js-motion .reveal.in{opacity:1; transform:none;
  transition:opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1)}
/* staggered children, so a row of cards arrives one after another */
.js-motion .reveal.in:nth-child(2){transition-delay:.07s}
.js-motion .reveal.in:nth-child(3){transition-delay:.14s}
.js-motion .reveal.in:nth-child(4){transition-delay:.21s}
.js-motion .reveal.in:nth-child(5){transition-delay:.28s}
.js-motion .reveal.in:nth-child(6){transition-delay:.35s}

.card{transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lift); border-color:var(--line-strong)}
.card .more{display:inline-block; transition:transform .2s ease}
.card:hover .more{transform:translateX(4px)}

.btn{transition:transform .15s ease, background .2s ease}
.btn:active{transform:translateY(1px)}

.gallery figure{transition:transform .3s ease, box-shadow .3s ease}
.gallery figure:hover{transform:translateY(-3px); box-shadow:var(--shadow-lift)}
.gallery img{transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.gallery figure:hover img{transform:scale(1.045)}

tbody tr{transition:background .18s ease}
tbody tr:hover{background:var(--accent-soft)}

/* hero photo */
.hero.photo{position:relative; overflow:hidden}
.hero.photo::before{content:""; position:absolute; inset:0;
  background:var(--hero-img) center/cover no-repeat; opacity:.28}
.hero.photo::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(22,40,78,.55), rgba(27,47,91,.92))}
.hero.photo .wrap{position:relative; z-index:1}

/* lightbox for the gallery */
.lb{position:fixed; inset:0; background:rgba(9,15,26,.92); display:none;
  align-items:center; justify-content:center; z-index:200; padding:24px}
.lb.open{display:flex}
.lb img{max-width:100%; max-height:86vh; border-radius:10px; object-fit:contain}
.lb .close{position:absolute; top:16px; right:18px; background:none; border:0;
  color:#fff; font-size:34px; line-height:1; cursor:pointer; padding:8px}
.lb .nav-btn{position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.12);
  border:0; color:#fff; font-size:30px; cursor:pointer; padding:14px 18px; border-radius:10px}
.lb .prev{left:14px} .lb .next{right:14px}
.lb .cap{position:absolute; bottom:18px; left:0; right:0; text-align:center;
  color:#C9D6EA; font-size:14px}

@media (prefers-reduced-motion: reduce){
  .js-motion .reveal{opacity:1 !important; transform:none !important}
  .js-motion .reveal.in{transition:none}
  .card:hover,.gallery figure:hover{transform:none}
  .gallery figure:hover img{transform:none}
  *{animation-duration:.001ms !important; transition-duration:.001ms !important}
}

/* ---------------------------------------------------------------------------
   Fixes from Will's first look, 2026-11-04.
   --------------------------------------------------------------------------- */

/* 1. The hero photo was barely there. An operator should see the work before
      they read a word, so the picture carries the panel and the overlay only
      does enough to keep the type legible. */
.hero.photo::before{opacity:.72}
.hero.photo::after{background:linear-gradient(185deg,
  rgba(14,26,52,.62) 0%, rgba(16,30,60,.70) 45%, rgba(20,36,72,.88) 100%)}
.hero.photo h1{text-shadow:0 2px 18px rgba(8,14,28,.45)}
.hero.photo p{color:#DCE6F5; text-shadow:0 1px 12px rgba(8,14,28,.5)}

/* 2. "Get a quote" in the nav was dark grey on navy and unreadable until hover.
      Cause: `.nav ul a` (0,1,2) outranks `.btn` (0,1,0) on specificity, so the
      button never got its own white text. */
.nav ul a.btn,
.nav ul a.btn:hover{color:var(--accent-ink); background:var(--accent)}
.nav ul a.btn:hover{background:var(--accent-hover); text-decoration:none}

/* 3. Service cards lead with a photograph. */
.shot-card{padding:0; overflow:hidden; display:flex; flex-direction:column}
.shot-card .shot{display:block; line-height:0; background:var(--accent-soft)}
.shot-card .shot img{width:100%; height:208px; object-fit:cover;
  transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.shot-card:hover .shot img{transform:scale(1.05)}
.shot-card .card-body{padding:22px 24px 24px; display:flex; flex-direction:column; flex:1}
.shot-card .card-body h3{margin-bottom:8px}
.shot-card .card-body .more{margin-top:auto; padding-top:6px}