/* ==========================================================================
   D.W. Transport & Leasing, Inc.
   Shared stylesheet. Colors come from the DWT logo: gold, steel, copper.
   Never hardcode a color in a page; add a token here instead.
   ========================================================================== */

:root{
  /* brand */
  --gold:#E3A81C;
  --gold-dk:#B9820A;
  --steel:#B9BEC4;
  --copper:#B35A1E;
  --copper-dk:#8C4415;
  --ink:#15181C;
  --ink-2:#22262C;
  --paper:#F4F1EA;
  --line:#E3E5E8;
  --line-dk:#3A404A;
  --muted:#4A515A;
  --muted-2:#6A717A;

  /* type */
  --display:"Barlow Condensed",Impact,"Haettenschweiler",sans-serif;
  --body:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --serif:Fraunces,Georgia,"Times New Roman",serif;

  /* layout */
  --wrap:1200px;
  --gutter:40px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:#fff;color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:100;background:var(--gold);color:var(--ink);padding:10px 16px}

/* ---------- header ---------------------------------------------------- */
.topbar{background:var(--ink);color:#fff;font:400 13px/1.5 var(--mono);padding:9px 0}
.topbar .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.topbar .open{display:flex;align-items:center;gap:8px}
.topbar .open::before{content:"";width:8px;height:8px;border-radius:50%;background:#7DBA3C;box-shadow:0 0 0 4px rgba(125,186,60,.25)}
.topbar a:hover{color:var(--gold)}

.masthead{border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:40}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:96px}
.brand{display:flex;align-items:center;gap:14px}
.brand img{height:62px;width:auto}
.brand span{font:600 11px/1.3 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.nav ul{display:flex;align-items:center;gap:26px;list-style:none;font:500 15px var(--body)}
.nav a{padding:6px 0;border-bottom:2px solid transparent}
.nav a:hover{border-color:var(--gold)}
.nav a[aria-current=page]{border-color:var(--copper);font-weight:600}
.nav .quote{background:var(--copper);color:#fff;padding:12px 18px;font:700 17px var(--display);letter-spacing:.06em;text-transform:uppercase;border:0}
.nav .quote:hover{background:var(--copper-dk);border-color:transparent}
.navtoggle{display:none;background:none;border:1px solid var(--line);border-radius:4px;padding:10px 12px;font:600 14px var(--body);cursor:pointer}

/* ---------- buttons and small parts ----------------------------------- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 26px;font:700 18px var(--display);letter-spacing:.08em;text-transform:uppercase;border:0;cursor:pointer}
.btn--copper{background:var(--copper);color:#fff}
.btn--copper:hover{background:var(--copper-dk)}
.btn--gold{background:var(--gold);color:var(--ink)}
.btn--gold:hover{background:var(--gold-dk)}
.btn--ghost{border:2px solid currentColor}
.eyebrow{font:600 13px var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--copper)}
.eyebrow--light{color:var(--gold)}
.lede{font-size:19px;line-height:1.55;color:var(--muted)}
.spec{font:400 13px/1.6 var(--mono)}

/* Anchored sections sit below the sticky masthead when jumped to. */
[id]{scroll-margin-top:118px}

/* ---------- section scaffolding --------------------------------------- */
.section{padding:90px 0;border-top:1px solid var(--line)}
.section--flush{border-top:0}
.section--dark{background:var(--ink);color:#fff;border-top:0}
.section--paper{background:var(--paper);border-top:0}
.section--dark .lede,.section--dark p{color:#C3C9D0}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:44px;flex-wrap:wrap}
.section-head h2{font:700 52px/1 var(--display);text-transform:uppercase}
.section-head p{max-width:400px;font-size:16px;color:var(--muted)}
.section--dark .section-head p{color:#C3C9D0}

/* ---------- home hero -------------------------------------------------- */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;padding-block:64px 80px;align-items:start}
.hero h1{font:700 clamp(46px,6vw,78px)/.98 var(--display);text-transform:uppercase}
.hero h1 em{font-style:normal;color:var(--copper)}
.hero .lede{margin:22px 0 30px;max-width:520px}
.hero-photo{position:relative;border-radius:4px;overflow:hidden}
.hero-photo img{width:100%;aspect-ratio:16/10;object-fit:cover}
.hero-photo .tag{position:absolute;left:16px;bottom:16px;background:#fff;font:600 12px var(--mono);padding:6px 10px;border-radius:2px}

/* dispatch ticket (the quote form) */
.ticket{background:var(--paper);border:1px solid #D9D4C7;border-radius:6px;padding:28px;position:relative;box-shadow:0 20px 40px -24px rgba(0,0,0,.35)}
.ticket::before{content:"";position:absolute;left:0;right:0;top:-1px;height:6px;border-radius:6px 6px 0 0;
  background:repeating-linear-gradient(90deg,var(--gold) 0 24px,var(--steel) 24px 48px,var(--copper) 48px 72px)}
.ticket h2{font:700 30px var(--display);text-transform:uppercase;margin:6px 0 4px}
.ticket .no{font:400 12px var(--mono);color:#7A7466}
.ticket label,.ticket legend{display:block;font:600 12px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:#5A5446;margin:18px 0 8px}
.ticket fieldset{border:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{margin:0;cursor:pointer}
.chips input{position:absolute;opacity:0;width:0;height:0}
.chips span{display:inline-block;font:500 14px var(--body);text-transform:none;letter-spacing:0;color:var(--ink);padding:9px 13px;border:1px solid #CFC9BA;border-radius:3px;background:#fff}
.chips input:checked+span{background:var(--ink);color:#fff;border-color:var(--ink)}
.chips input:focus-visible+span{outline:3px solid var(--gold);outline-offset:2px}
.ticket input[type=text],.ticket input[type=tel],.ticket input[type=email],.ticket textarea{
  width:100%;font:400 16px var(--body);padding:12px 14px;border:1px solid #CFC9BA;border-radius:3px;background:#fff;color:var(--ink)}
.ticket .check{display:flex;align-items:flex-start;gap:10px;margin:20px 0 0;font:400 15px var(--body);
  text-transform:none;letter-spacing:0;color:var(--ink);cursor:pointer}
.ticket .check input{width:18px;height:18px;margin:1px 0 0;flex:none;accent-color:var(--copper)}
.ticket .btn{width:100%;justify-content:center;margin-top:22px}
.ticket .or{text-align:center;font-size:14px;color:#5A5446;margin-top:14px}
.ticket .or a{font-weight:600;color:var(--ink)}

/* ---------- services table -------------------------------------------- */
.rows{border-top:2px solid var(--ink)}
.row{display:grid;grid-template-columns:70px 1.2fr 2fr 1fr;gap:20px;align-items:center;padding:24px 0;border-bottom:1px solid var(--line)}
.row .n{font:600 14px var(--mono);color:var(--copper)}
.row h3{font:700 28px/1 var(--display);text-transform:uppercase}
.row p{font-size:15px;color:var(--muted)}
.row a:hover h3{color:var(--copper)}

/* ---------- card grids -------------------------------------------------- */
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cards--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{border:1px solid var(--line);border-radius:4px;padding:22px;overflow-wrap:anywhere}
.card b{display:block;font:700 44px/1 var(--display)}
.card small{font:600 12px var(--mono);text-transform:uppercase;color:var(--muted-2)}
.card p{font-size:14px;line-height:1.5;color:var(--muted);margin-top:10px}
.section--dark .card p{color:#C3C9D0}
.section--dark .card small{color:var(--steel)}
.section--dark .card{border-color:var(--line-dk)}
.photo-card{border:1px solid var(--line);border-radius:4px;overflow:hidden;display:flex;flex-direction:column}
.photo-card img{aspect-ratio:4/3;object-fit:cover;width:100%}
.photo-card .body{padding:22px;flex:1;display:flex;flex-direction:column;gap:10px}
.photo-card h3{font:700 30px/1 var(--display);text-transform:uppercase}
.photo-card p{font-size:15px;color:var(--muted)}
.photo-card .more{margin-top:auto;font:600 13px var(--mono);text-transform:uppercase;color:var(--copper)}

/* a portrait in a card: square, cropped to the face */
.card .mug{width:100%;aspect-ratio:1/1;object-fit:cover;margin-bottom:14px}
.founder{display:grid;grid-template-columns:260px 1fr;gap:32px;align-items:start}
.founder img{width:100%;aspect-ratio:1/1;object-fit:cover}
@media(max-width:700px){.founder{grid-template-columns:1fr}.founder img{max-width:260px}}

/* the team: small square thumbnails, name and role underneath. The portraits are
   reframed as square files (eyes on the upper third, room above the head), so the
   browser is not asked to crop them. */
.people{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:24px;max-width:900px}
.person img,.person .waiting{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.person .waiting{background:var(--surface-2);display:grid;place-items:center;font:700 34px var(--head);color:var(--muted-2)}
.section--dark .person .waiting{background:var(--ink-2, #22262C);color:var(--steel)}
.person b{display:block;font:700 17px/1.2 var(--head);letter-spacing:.02em;text-transform:uppercase;margin-top:12px}
.person span{display:block;font-size:13px;line-height:1.4;color:var(--muted-2);margin-top:4px}
.section--dark .person span{color:var(--steel)}

/* ---------- quotes ----------------------------------------------------- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.quotes figure{border-top:3px solid var(--gold);padding-top:22px}
.quotes blockquote{font:500 19px/1.5 var(--body)}
.quotes figcaption{font-size:14px;color:var(--muted-2);margin-top:16px}
.quotes figcaption b{display:block;color:inherit}
.section--dark .quotes figcaption{color:var(--steel)}

/* ---------- service area ------------------------------------------------ */
.states{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.states div{border:1px solid var(--line-dk);padding:18px;font:600 13px var(--mono);text-transform:uppercase;display:flex;justify-content:space-between}
.states div.home{background:var(--copper);border-color:var(--copper)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}

/* ---------- page headers (inner pages) ---------------------------------- */
.page-hero{background:var(--ink);color:#fff;padding:70px 0}
.page-hero h1{font:700 clamp(44px,6vw,76px)/.98 var(--display);text-transform:uppercase;margin:14px 0 0}
.page-hero p{max-width:620px;margin-top:18px;color:#C3C9D0;font-size:18px}
.page-hero--photo{background:var(--ink) center/cover;position:relative}

/* ---------- story page (editorial) -------------------------------------- */
.story{background:var(--paper)}
.story-hero{padding-block:56px 0}
.story-hero .kick{display:flex;gap:18px;flex-wrap:wrap;font-size:14px;color:#6A6456}
.story-hero h1{font:600 clamp(46px,7.4vw,104px)/.98 var(--serif);letter-spacing:-.035em;margin:20px 0 0;max-width:1000px}
.story-hero h1 em{font-style:italic;font-weight:500;color:var(--copper)}
.strip{display:grid;grid-template-columns:2fr 1fr;gap:16px;margin-top:48px}
.strip img{width:100%;height:100%;min-height:420px;object-fit:cover}
.caption{font-size:13px;color:#6A6456;margin-top:10px;display:flex;justify-content:space-between;gap:20px}
.story-body{display:grid;grid-template-columns:1fr 1.4fr;gap:80px;padding-block:100px}
.story-body .yr{font:600 150px/.8 var(--serif);color:var(--copper);letter-spacing:-.05em}
.story-body .yr small{display:block;font:500 14px var(--body);color:#6A6456;letter-spacing:0;margin-top:20px}
.story-body p{font-size:20px;line-height:1.65;color:#2B2F35;margin-bottom:22px}
.story-body p:first-of-type::first-letter{font:600 70px/.8 var(--serif);float:left;margin:8px 10px 0 0;color:var(--copper)}
.timeline{border-top:1px solid #D9D4C7;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.timeline div{padding:30px 24px 40px 0;border-right:1px solid #D9D4C7}
.timeline div+div{padding-left:24px}
.timeline div:last-child{border-right:0}
.timeline b{font:600 38px var(--serif);letter-spacing:-.02em}
.timeline p{font-size:15px;line-height:1.5;color:#4B4F55;margin-top:8px}
.todo{background:#FFF4D6;border-left:3px solid var(--gold);padding:2px 8px;font-size:13px;color:#6A5300;display:inline-block}

/* ---------- footer ------------------------------------------------------ */
.footer{background:var(--ink);color:#fff;padding:70px 0 40px}
.footer-top{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid var(--line-dk)}
.footer img{height:96px;width:auto;margin-bottom:18px}
.footer h4{font:700 22px var(--display);text-transform:uppercase;letter-spacing:.04em;margin-bottom:14px}
.footer ul{list-style:none;font-size:15px;line-height:2;color:#C3C9D0}
.footer a:hover{color:var(--gold)}
.footer .legal{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:26px;font-size:14px;color:var(--muted-2)}
.footer address{font-style:normal;font-size:15px;line-height:1.8;color:#C3C9D0}

/* ---------- the mailing list dialog --------------------------------------- */
dialog.signup{border:1px solid #D9D4C7;background:var(--paper);color:var(--ink);padding:0;border-radius:6px;
  width:min(520px,calc(100% - 32px));max-width:none;overflow:hidden}
dialog.signup::backdrop{background:rgba(21,24,28,.55)}
dialog.signup .signup-head{position:relative;padding:22px 24px 14px}
dialog.signup .signup-head::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;
  background:repeating-linear-gradient(90deg,var(--gold) 0 24px,var(--steel) 24px 48px,var(--copper) 48px 72px)}
dialog.signup .no{font:400 12px var(--mono);color:#7A7466}
dialog.signup h2{font:700 30px var(--display);text-transform:uppercase;margin:6px 0 0}
dialog.signup .signup-head button{position:absolute;top:18px;right:18px;background:none;border:0;
  font:400 30px/1 var(--body);color:var(--muted-2);cursor:pointer;padding:0 6px}
dialog.signup .signup-head button:hover{color:var(--ink)}
dialog.signup form{padding:0 24px 24px}
dialog.signup .hint{margin:0 0 6px}
dialog.signup label{display:block;font:600 12px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:#5A5446;margin:16px 0 6px}
dialog.signup input{width:100%;font:400 16px var(--body);padding:12px 14px;border:1px solid #CFC9BA;border-radius:3px;background:#fff;color:var(--ink)}
dialog.signup .ml-message{margin-top:16px;font-size:15px;color:var(--copper)}
dialog.signup .actions{display:flex;gap:10px;margin-top:22px}
dialog.signup .actions .btn{flex:1;justify-content:center}
dialog.signup iframe{display:none}

/* ---------- the home page runs tighter ------------------------------------
   It is one long page now, so the air between sections is cut by about a third.
   The story page keeps its wider spacing: it is meant to be read slowly. */
.home .section{padding:56px 0;border-top:0}   /* no rules between the white rows */
.home .hero{padding-block:40px 52px}
.home .section-head{margin-bottom:26px}
.home .two-col{gap:44px}
.home .cards{gap:14px}
@media(max-width:900px){
  .home .section{padding:40px 0}
  .home .hero{padding-top:28px}
}

/* ---------- responsive --------------------------------------------------- */
@media(max-width:1200px){
  :root{--gutter:32px}
}
@media(max-width:1000px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-top{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  :root{--gutter:24px}
  .navtoggle{display:block}
  .nav{display:none;width:100%}
  .nav.open{display:block}
  .masthead .wrap{flex-wrap:wrap;padding-top:14px;padding-bottom:14px;min-height:0}
  .nav ul{flex-direction:column;align-items:stretch;gap:0;padding-bottom:10px}
  .nav li{border-top:1px solid var(--line)}
  .nav a{display:block;padding:14px 0}
  .nav .quote{display:block;text-align:center;margin:12px 0}
  .hero{grid-template-columns:1fr;padding-top:40px}
  .section{padding:64px 0}
  .section-head h2{font-size:40px}
  .row{grid-template-columns:40px 1fr}
  .row p,.row .spec{grid-column:2}
  .cards--3,.cards--2{grid-template-columns:1fr}
  .quotes{grid-template-columns:1fr}
  .two-col{grid-template-columns:1fr;gap:34px}
  .strip{grid-template-columns:1fr}
  .strip img{min-height:260px}
  .strip .second{display:none}
  .story-body{grid-template-columns:1fr;gap:28px;padding-block:64px}
  .story-body .yr{font-size:104px}
  .timeline{grid-template-columns:1fr 1fr}
  .timeline div{padding:22px 14px 22px 0 !important;border-right:0;border-bottom:1px solid #D9D4C7}
  .footer-top{grid-template-columns:1fr}
}
@media(max-width:560px){
  .cards{grid-template-columns:1fr}
}
@media print{
  .topbar,.nav,.navtoggle,.ticket{display:none}
  body{font-size:12pt}
}