/* ===========================================================================
   TEG Media: homepage concepts. Shared base for design A and design B.

   Built as a plain static page so it can become a WordPress theme later
   without a page builder in the way. Faces: Montserrat (the house display
   face), Cabin (the house reading face) and Libre Baskerville italic, the
   serif mm2h.com uses, so the two sister sites read as one family.
   =========================================================================== */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{ margin:0; font-family:'Cabin',system-ui,sans-serif; font-size:17px; line-height:1.6;
      color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased }
img{ display:block; max-width:100%; height:auto }
a{ color:inherit; text-decoration:none }
h1,h2,h3,h4,p{ margin:0 }
ul{ list-style:none; margin:0; padding:0 }

:root{
  --red:#C8102E;            /* TEG red, as the wordmark carries it on screen */
  --red-deep:#941317;       /* the house document red */
  --black:#0B0B0D;
  --navy:#06102B;           /* the TEG kit navy from the ITP overview */
  --ink:#15171C;
  --soft:#555B66;
  --grey:#8A909B;
  --rule:#E3E1DC;
  --paper:#FFFFFF;
  --warm:#F5F3EF;
  --display:'Montserrat',system-ui,sans-serif;
  --serif:'Libre Baskerville',Georgia,serif;
  --wrap:1240px;
}

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 40px }
@media (max-width:720px){ .wrap{ padding:0 20px } }

/* ---------- type ---------- */
.eyebrow{ display:block; font-family:var(--display); font-weight:700; font-size:12px;
          letter-spacing:.22em; text-transform:uppercase; color:var(--red) }
.serif{ font-family:var(--serif); font-style:italic; font-weight:400 }
.h-sec{ font-family:var(--display); font-weight:800; font-size:44px; line-height:1.08;
        letter-spacing:-.015em; margin-top:14px }
.h-sec .serif{ font-weight:400; letter-spacing:0 }
.lede{ font-size:19px; line-height:1.65; color:var(--soft) }
@media (max-width:720px){ .h-sec{ font-size:32px } .lede{ font-size:17px } }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; gap:10px; font-family:var(--display);
      font-weight:700; font-size:13px; letter-spacing:.12em; text-transform:uppercase;
      padding:17px 28px; border:1.5px solid transparent; transition:background .2s,color .2s }
.btn.solid{ background:var(--red); color:#fff }
.btn.solid:hover{ background:#a50d25 }
.btn.ghost{ border-color:rgba(255,255,255,.7); color:#fff }
.btn.ghost:hover{ background:#fff; color:var(--ink) }
.btn.dark{ background:var(--navy); color:#fff }
.btn.line{ border-color:var(--ink); color:var(--ink) }
.btn.line:hover{ background:var(--ink); color:#fff }
.btn .arr{ font-family:var(--serif); font-style:normal; font-size:16px; letter-spacing:0 }
.more{ font-family:var(--display); font-weight:700; font-size:12px; letter-spacing:.14em;
       text-transform:uppercase; color:var(--red); border-bottom:1.5px solid currentColor;
       padding-bottom:3px }

/* ---------- the TEG frond pattern ----------
   One tile across the band, never repeated, exactly as the print documents
   carry it. */
.fronds{ position:absolute; inset:0; overflow:hidden; pointer-events:none; opacity:.12; color:#fff;
         display:flex; align-items:flex-end }
.fronds svg{ width:100%; min-width:1440px; height:auto; flex:none }

/* ---------- mobile menu button (static in the mockup) ---------- */
.burger{ display:none; width:44px; height:44px; align-items:center; justify-content:center }
.burger span{ display:block; width:24px; height:2px; background:currentColor; position:relative }
.burger span::before,.burger span::after{ content:""; position:absolute; left:0; width:24px;
  height:2px; background:currentColor }
.burger span::before{ top:-7px } .burger span::after{ top:7px }

/* ---------- client logos, quiet ---------- */
.logos{ display:grid; grid-template-columns:repeat(5,1fr); gap:0;
        border-top:1px solid var(--rule); border-left:1px solid var(--rule) }
.logos div{ border-right:1px solid var(--rule); border-bottom:1px solid var(--rule);
            aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; padding:18px }
.logos img{ max-height:64px; width:auto; filter:grayscale(1) contrast(1.05); mix-blend-mode:multiply;
            opacity:.72; transition:filter .25s,opacity .25s }
.logos div:hover img{ filter:none; opacity:1 }
@media (max-width:720px){ .logos{ grid-template-columns:repeat(3,1fr) } .logos img{ max-height:44px } }

/* the client logos are supplied as 600px squares with the mark in the middle,
   so they are shown as squares and sized by height */
.logos img{ max-height:none; height:124px; width:124px; object-fit:contain; opacity:.8 }
@media (max-width:720px){ .logos img{ height:84px; width:84px } }
/* a fixed ratio plus a fixed-height logo forced every cell wider than its
   column; the cells get a height instead, and the columns may shrink */
.logos{ grid-template-columns:repeat(5,minmax(0,1fr)) }
.logos div{ aspect-ratio:auto; height:160px }
@media (max-width:720px){ .logos{ grid-template-columns:repeat(2,minmax(0,1fr)) } .logos div{ height:120px } }