/* ET EXPO landing page body (approved reference: /30x40-trade-show-booth-rental/, Owner 2026-11-01).
 * Moved out of LandingPageRenderer's inline <style> so a change no longer needs a CSP hash. The header and footer are the
 * site's one header and footer (css/site-chrome.css, MGC-UI-001); the content grid uses their 1280px measure and 24px gutter. */
/* ==========================================================================
   CES landing page - follows the approved reference (landing page.png).
   One scale governs every vertical measurement; the three breakpoints move the
   tokens rather than patching individual rules.
   ========================================================================== */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --lp-black:#000000; --lp-ground:#0B0D10; --lp-band:#0F1216; --lp-raised:#15181D;
  --lp-panel:rgba(255,255,255,.024);
  --lp-accent:#FF6B3D; --lp-accent-press:#E2543A; --lp-on-accent:#0A0A0A;
  --lp-white:#FFFFFF; --lp-body:#B9C0C9; --lp-muted:#7E8792;
  --lp-line:rgba(255,255,255,.10);
  --lp-display:'Archivo','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --lp-sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  --lp-max:var(--site-shell-max,1280px); --lp-gut:var(--site-shell-pad,24px);
  --radius:8px; --header-h:0px;

  /* rhythm scale */
  --sp-2xs:4px; --sp-xs:8px; --sp-s:12px; --sp-m:16px;
  --sp-l:24px; --sp-xl:34px; --sp-2xl:44px;

  /* semantic roles */
  --pad-section:var(--sp-xl);
  --pad-panel:var(--sp-l);
  --pad-card:var(--sp-m);
  --split-col:clamp(170px,17vw,240px);   /* the reference's left heading column */
  --gap-heading:var(--sp-l);
  --gap-text:var(--sp-xs);
  --gap-row:var(--sp-m);
  --gap-col:var(--sp-2xl);

  --hero-min:520px;   /* copy measures ~445px; the rest is breathing room */
  --hero-copy-min:420px;   /* the headline never gets less measure than this */
  --hero-media-ratio:16/9;
  --hero-media-max:260px;

  --lh-body:1.5; --lh-heading:1.25; --lh-display:1.1;
}
body.lp-page{background:var(--lp-ground);color:var(--lp-body);
  font-family:var(--lp-sans);line-height:var(--lh-body);font-size:15px;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
.lp-page a{text-decoration:none}
.lp-page img{display:block;max-width:100%;height:auto}

.lp-page ::selection{background:var(--lp-accent);color:var(--lp-on-accent)}
.lp-page input,.lp-page textarea{caret-color:var(--lp-accent)}
.lp-page :focus-visible{outline:2px solid var(--lp-accent);outline-offset:3px}
.lp-page{scrollbar-color:#2A2F37 var(--lp-ground);scrollbar-width:thin}
.lp-page ::-webkit-scrollbar{width:11px;height:11px}
.lp-page ::-webkit-scrollbar-track{background:var(--lp-ground)}
.lp-page ::-webkit-scrollbar-thumb{background:#2A2F37}
.lp-page ::-webkit-scrollbar-thumb:hover{background:#3A414B}

.lp-wrap{max-width:var(--lp-max);margin:0 auto;
  padding-left:var(--lp-gut);padding-right:var(--lp-gut)}
.lp-section{max-width:var(--lp-max);margin:0 auto;
  padding:var(--pad-section) var(--lp-gut)}
.lp-preview{background:var(--lp-accent);color:var(--lp-on-accent);
  padding:var(--sp-s) var(--sp-m);text-align:center;font-size:.82rem;font-weight:600}

/* Section headings are modest in the reference - the photographs carry the page. */
.lp-section h2{color:var(--lp-white);font-family:var(--lp-display);
  font-size:clamp(1.35rem,2vw,1.75rem);font-weight:600;letter-spacing:-.02em;
  line-height:var(--lh-display);margin-bottom:var(--gap-heading);max-width:20ch}

/* The reference sets a heading in its own left column beside the content. */
.lp-split{display:grid;grid-template-columns:var(--split-col) minmax(0,1fr);
  gap:var(--gap-col);align-items:start}
.lp-split > h2{margin-bottom:0}

/* Shared bordered surface: show panel, quote, process card, closing strip. */
.lp-panel{background:var(--lp-panel);border:1px solid var(--lp-line);
  border-radius:var(--radius)}

.lp-icon{width:20px;height:20px;color:var(--lp-accent);flex:0 0 auto}

/* ---- buttons ---- */
a.lp-cta,button.lp-cta,.lp-cta{display:inline-flex;align-items:center;
  justify-content:center;gap:var(--sp-xs);background:var(--lp-accent);
  color:var(--lp-on-accent);font-family:var(--lp-sans);font-weight:600;
  font-size:.82rem;letter-spacing:0;border-radius:4px;
  padding:11px 20px;border:0;cursor:pointer;transition:background .22s ease}
a.lp-cta:hover,button.lp-cta:hover,.lp-cta:hover{background:var(--lp-accent-press);
  color:var(--lp-on-accent)}
a.lp-cta-sm,.lp-cta-sm{padding:9px 16px;font-size:.78rem}
/* The reference's secondary action is an outlined box, not an underline. */
a.lp-cta-ghost,.lp-cta-ghost{background:transparent;color:var(--lp-white);
  border:1px solid rgba(255,255,255,.28);padding:10px 19px}
a.lp-cta-ghost:hover,.lp-cta-ghost:hover{background:rgba(255,255,255,.06);
  color:var(--lp-white);border-color:rgba(255,255,255,.5)}

/* ---- hero ---- */
/* Track 1 IS the page margin, so the headline starts on exactly the same line as
   the logo, every section heading, the stats and The Show. Track 2 is the copy, held
   on the page measure so it neither collapses on a wide monitor nor drifts away from
   the grid. Track 3 holds the photograph, and gives back one page margin on the right
   so its right edge lands on the SAME line as The Show, Selected Work and every other
   section - the hero is part of the content grid, not a viewport-wide bleed. */
.lp-hero{position:relative;display:grid;
  grid-template-columns:
    max(var(--lp-gut),calc((100vw - var(--lp-max))/2 + var(--lp-gut)))
    minmax(var(--hero-copy-min),calc(var(--lp-max) * .40))
    minmax(0,1fr);
  align-items:stretch;min-height:min(var(--hero-min),86vh);background:var(--lp-black)}
.lp-hero-copy{grid-column:2;display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--header-h) + var(--sp-xl)) var(--sp-l) var(--sp-xl) 0;
  width:100%;position:relative;z-index:2}
.lp-eyebrow{color:var(--lp-accent);font-size:.7rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:var(--sp-m)}
.lp-hero h1{color:var(--lp-white);font-family:var(--lp-display);
  font-size:clamp(1.9rem,3.3vw,3rem);line-height:1.1;letter-spacing:-.025em;
  font-weight:600;max-width:16ch;text-wrap:balance}
.lp-hero .lp-sub{color:var(--lp-body);margin-top:var(--sp-m);
  font-size:clamp(.92rem,1vw,1rem);max-width:44ch;line-height:var(--lh-body)}
.lp-hero-ctas{display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--sp-s);margin-top:var(--sp-l)}
/* Photograph bleeds to the top and right edges and passes behind the header. */
.lp-hero-media{position:relative;align-self:stretch;overflow:hidden;
  background:var(--lp-black);grid-column:3;grid-row:1;
  margin-right:max(var(--lp-gut),calc((100vw - var(--lp-max))/2 + var(--lp-gut)))}
.lp-page .lp-hero-img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center}
/* Soft blend into the copy column so the two halves read as one field. */
.lp-hero-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--lp-black) 0%,rgba(0,0,0,.45) 18%,rgba(0,0,0,0) 52%)}
.lp-hero-noimg{min-height:0}
.lp-hero-noimg .lp-hero-copy{padding-right:var(--lp-gut)}

/* ---- proof figures ---- */
/* Four distinct columns with a real gap - the figures must never run together. */
.lp-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--gap-row) var(--sp-l);align-items:start}
.lp-stats-hero{margin-top:var(--sp-xl)}
.lp-stat{display:block}
.lp-stat b{display:block;color:var(--lp-accent);font-family:var(--lp-display);
  font-size:clamp(1.5rem,2.1vw,2rem);font-weight:700;line-height:1.05;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.lp-stat span{display:block;color:var(--lp-muted);font-size:.7rem;
  margin-top:var(--sp-2xs);letter-spacing:.04em;max-width:16ch}
a.lp-stat:hover b{color:var(--lp-white)}
.lp-stats-band{background:var(--lp-black);padding:var(--sp-l) 0}
.lp-stats-band .lp-stats{max-width:var(--lp-max);margin:0 auto;padding:0 var(--lp-gut)}

/* ---- the show: a bordered panel of labelled facts ---- */
.lp-show-panel{padding:var(--pad-panel)}
.lp-show-panel > h2{margin-bottom:var(--sp-m)}
.lp-show{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:var(--sp-m)}
/* Vertical rules between the facts, as the reference has them. */
.lp-show-fact{display:flex;gap:var(--sp-s);align-items:flex-start;
  padding-left:var(--sp-l);border-left:1px solid var(--lp-line)}
.lp-show-fact:first-child{padding-left:0;border-left:0}
.lp-show-fact span{display:block;color:var(--lp-muted);font-size:.64rem;
  letter-spacing:.13em;text-transform:uppercase;font-weight:600}
.lp-show-fact b{display:block;color:var(--lp-white);font-size:.95rem;font-weight:500;
  margin-top:3px}
.lp-show-fact i{display:block;font-style:normal;color:var(--lp-muted);
  font-size:.78rem;margin-top:1px}

/* ---- selected work ---- */
.lp-showcase{max-width:var(--lp-max)}
.lp-showcase-head{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--gap-row);margin-bottom:var(--gap-heading)}
.lp-showcase-head h2{margin-bottom:0}
.lp-showcase-all{color:var(--lp-accent);font-size:.76rem;font-weight:600;
  white-space:nowrap}
.lp-showcase-all:hover{color:var(--lp-white)}
/* Arrows flank the row instead of sitting in the heading. */
.lp-track-wrap{display:flex;align-items:center;gap:var(--sp-s)}
.lp-arrow{width:30px;height:30px;border-radius:50%;flex:0 0 auto;
  border:1px solid var(--lp-line);background:transparent;color:var(--lp-white);
  font-size:1rem;cursor:pointer;line-height:1;
  transition:border-color .2s ease,color .2s ease,background .2s ease}
.lp-arrow:hover:not(:disabled){border-color:var(--lp-accent);color:var(--lp-accent)}
.lp-arrow:disabled{opacity:.28;cursor:default}
.lp-track{display:flex;gap:var(--sp-s);overflow-x:auto;flex:1 1 auto;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:var(--sp-2xs);
  scrollbar-width:none;-ms-overflow-style:none;cursor:grab}
.lp-track::-webkit-scrollbar{display:none}
.lp-track.is-dragging{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none}
.lp-track.is-dragging a{pointer-events:none}
/* Six plates across on desktop, as the reference has it. */
.lp-proj{flex:0 0 calc((100% - var(--sp-s) * 5) / 6);min-width:150px;
  scroll-snap-align:start;position:relative}
.lp-proj-link{display:block;position:relative;overflow:hidden;
  border-radius:var(--radius);background:var(--lp-raised)}
.lp-proj img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  transition:transform .9s cubic-bezier(.19,1,.22,1)}
.lp-proj-link:hover img{transform:scale(1.04)}
.lp-proj-copy{position:absolute;left:0;right:0;bottom:0;padding:var(--sp-s);
  background:linear-gradient(0deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.35) 60%,rgba(0,0,0,0) 100%)}
.lp-proj-copy h3{color:var(--lp-white);font-family:var(--lp-sans);
  font-size:.8rem;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.lp-proj-copy p{color:rgba(255,255,255,.66);font-size:.68rem;margin-top:2px}

/* ---- everything under one roof ---- */
.lp-svc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 var(--gap-col)}
.lp-svc{display:flex;gap:var(--sp-s);align-items:flex-start;
  padding:var(--pad-card) 0;border-bottom:1px solid var(--lp-line)}
.lp-svc-text b{display:block;color:var(--lp-white);font-size:.88rem;font-weight:600;
  letter-spacing:-.01em}
.lp-svc-text p{color:var(--lp-muted);font-size:.8rem;margin-top:3px;max-width:34ch;
  line-height:var(--lh-body)}

/* ---- what clients say ---- */
.lp-quote{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:var(--sp-m);background:var(--lp-panel);
  border:1px solid var(--lp-line);border-radius:var(--radius);padding:var(--pad-panel)}
.lp-quote + .lp-quote{margin-top:var(--sp-s)}
.lp-quote-mark{color:var(--lp-accent);font-family:var(--lp-display);font-size:1.9rem;
  line-height:1;align-self:start}
.lp-quote blockquote{color:var(--lp-white);font-family:var(--lp-sans);
  font-size:.95rem;line-height:var(--lh-body);font-weight:400;letter-spacing:-.01em}
.lp-quote figcaption{display:flex;align-items:center;gap:var(--sp-s);
  padding-left:var(--gap-row);border-left:1px solid var(--lp-line)}
.lp-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;
  background:var(--lp-raised);flex:0 0 auto}
.lp-avatar-default{display:flex;align-items:center;justify-content:center;
  color:var(--lp-muted);font-weight:600}
.lp-quote-who b{display:block;color:var(--lp-white);font-weight:600;font-size:.82rem}
.lp-quote-who i{display:block;font-style:normal;font-size:.74rem;color:var(--lp-muted)}
.lp-quote-link{display:inline-block;margin-top:var(--sp-s);color:var(--lp-accent);
  font-size:.72rem;font-weight:600;grid-column:1/-1}
.lp-quote-link:hover{color:var(--lp-white)}

/* ---- how it works ---- */
.lp-process{list-style:none;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--sp-s);
  position:relative}
/* The chevron the reference sets between steps. Drawn in the gap, decorative only,
   and dropped once the cards wrap so it can never point at a line break. */
.lp-step-card + .lp-step-card::before{content:"\203A";position:absolute;
  left:calc(var(--sp-s) * -1);top:50%;transform:translate(-40%,-50%);
  color:var(--lp-accent);font-size:1rem;line-height:1;pointer-events:none}
.lp-step-card{position:relative}
.lp-step-card{display:flex;gap:var(--sp-s);align-items:flex-start;
  padding:var(--pad-card)}
.lp-step{color:var(--lp-accent);font-family:var(--lp-display);font-weight:700;
  font-size:1rem;font-variant-numeric:tabular-nums;line-height:1.2}
.lp-step-card b{color:var(--lp-white);font-family:var(--lp-sans);font-size:.85rem;
  font-weight:600;display:block;letter-spacing:-.01em}
.lp-step-card p{color:var(--lp-muted);font-size:.78rem;margin-top:3px;
  line-height:var(--lh-body)}

/* ---- gallery ---- */
.lp-gallery-wide{max-width:var(--lp-max)}
.lp-shots{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--sp-s)}
.lp-shots figure{position:relative;margin:0;overflow:hidden;
  border-radius:var(--radius);background:var(--lp-raised)}
.lp-shots figure:nth-child(4n+1){grid-column:span 12}
.lp-shots figure:nth-child(4n+1) img{aspect-ratio:21/8}
.lp-shots figure:nth-child(4n+2){grid-column:span 7}
.lp-shots figure:nth-child(4n+3){grid-column:span 5}
.lp-shots figure:nth-child(4n+4){grid-column:4/span 9}
.lp-shots figure:nth-child(4n+2) img,.lp-shots figure:nth-child(4n+3) img{
  aspect-ratio:4/3}
.lp-shots figure:nth-child(4n+4) img{aspect-ratio:16/9}
.lp-shot{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.lp-shots img{width:100%;height:auto;object-fit:cover;
  transition:transform .9s cubic-bezier(.19,1,.22,1)}
.lp-shots figure:hover img{transform:scale(1.035)}
.lp-shots figcaption{position:absolute;left:0;right:0;bottom:0;
  padding:var(--sp-s);color:#fff;font-size:.72rem;font-weight:600;
  background:linear-gradient(0deg,rgba(0,0,0,.84),rgba(0,0,0,0));
  opacity:0;transition:opacity .4s ease;pointer-events:none}
.lp-shots figure:hover figcaption,.lp-shots figure:focus-within figcaption{opacity:1}

/* ---- case study ---- */
.lp-case{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--gap-heading) var(--gap-col);align-items:center}
.lp-case img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius)}
.lp-case h3{color:var(--lp-white);font-family:var(--lp-display);font-size:1.15rem;
  font-weight:600;margin-bottom:var(--sp-xs);letter-spacing:-.02em}
.lp-case p{color:var(--lp-body);margin-bottom:var(--sp-s);max-width:48ch}

/* ---- faq ---- */
.lp-faq{border-bottom:1px solid var(--lp-line);padding:var(--pad-card) 0}
.lp-faq:first-of-type{border-top:1px solid var(--lp-line)}
.lp-faq summary{color:var(--lp-white);cursor:pointer;font-weight:500;
  font-size:.92rem;letter-spacing:-.01em;list-style:none;
  display:flex;justify-content:space-between;gap:var(--sp-l);align-items:baseline}
.lp-faq summary::-webkit-details-marker{display:none}
.lp-faq summary::after{content:"+";color:var(--lp-accent);font-size:1.2rem;
  font-weight:300;line-height:1;flex:0 0 auto}
.lp-faq[open] summary::after{content:"\2013"}
.lp-faq-q{font:inherit;color:inherit;letter-spacing:inherit;margin:0}
.lp-faq p{color:var(--lp-muted);margin-top:var(--gap-text);max-width:70ch;
  font-size:.85rem;line-height:var(--lh-body)}

/* ---- closing strip ---- */
.lp-band-panel{display:flex;align-items:center;justify-content:space-between;
  gap:var(--gap-col);padding:var(--pad-panel) var(--sp-xl)}
.lp-band-line{color:var(--lp-white);font-family:var(--lp-display);
  font-size:clamp(1.05rem,1.5vw,1.3rem);font-weight:600;letter-spacing:-.02em;
  line-height:var(--lh-heading);max-width:34ch}
.lp-band-actions{display:flex;align-items:center;gap:var(--sp-l);flex:0 0 auto}
.lp-band-link{color:var(--lp-accent);font-size:.8rem;font-weight:600;
  border-bottom:1px solid currentColor;padding-bottom:2px;white-space:nowrap}
.lp-band-link:hover{color:var(--lp-white)}

/* ---- conversion section ---- */
.lp-form-section{background:var(--lp-band);max-width:none;
  padding-left:0;padding-right:0}
.lp-form-section > h2{max-width:var(--lp-max);width:100%;
  margin:0 auto var(--gap-heading);padding:0 var(--lp-gut)}
.lp-form-section > .lp-form{max-width:var(--lp-max);margin:0 auto;
  padding:0 var(--lp-gut)}
.lp-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--gap-row) var(--gap-col)}
.lp-field{display:flex;flex-direction:column;gap:var(--sp-2xs);min-width:0}
.lp-field-wide{grid-column:1/-1}
.lp-field span{font-size:.64rem;color:var(--lp-muted);letter-spacing:.13em;
  text-transform:uppercase;font-weight:600}
.lp-field input,.lp-field textarea{width:100%;padding:9px 0;background:transparent;
  border:0;border-bottom:1px solid var(--lp-line);color:var(--lp-white);
  font-family:inherit;font-size:.92rem;transition:border-color .22s ease}
.lp-field input::placeholder,.lp-field textarea::placeholder{color:#6B747F}
.lp-field input:focus,.lp-field textarea:focus{outline:none;
  border-bottom-color:var(--lp-accent)}
.lp-field textarea{resize:vertical}
.lp-form button{grid-column:1/-1;justify-self:start;margin-top:var(--sp-xs)}
.lp-form-error{grid-column:1/-1;color:#FF9C88;font-size:.85rem}
.lp-form-note{grid-column:1/-1;color:var(--lp-muted);font-size:.75rem}

/* ---- thank you / paused ---- */
.lp-mid{text-align:center;padding:calc(var(--pad-section) * 2) var(--lp-gut)}
.lp-mid h1{color:var(--lp-white);font-family:var(--lp-display);
  font-size:clamp(1.6rem,3vw,2.4rem);letter-spacing:-.025em;font-weight:600;
  line-height:var(--lh-display)}
.lp-mid .lp-sub{margin:var(--gap-heading) auto 0;max-width:46ch;color:var(--lp-body)}
.lp-thanks-actions{display:flex;gap:var(--sp-s);justify-content:center;
  align-items:center;flex-wrap:wrap;margin-top:var(--gap-heading)}

/* ---- lightbox ---- */
.lp-lightbox{position:fixed;inset:0;z-index:120;background:rgba(0,0,0,.97);
  display:flex;align-items:center;justify-content:center;padding:var(--sp-xl)}
.lp-lightbox[hidden]{display:none}
.lp-lightbox img{max-width:100%;max-height:100%;object-fit:contain}
.lp-lightbox button{position:absolute;top:var(--sp-m);right:var(--sp-l);
  background:none;border:0;color:#fff;font-size:2.2rem;cursor:pointer;line-height:1}

/* ============ TABLET ============ */
@media(max-width:1080px){
  :root{
    --pad-section:var(--sp-l); --pad-panel:var(--sp-m);
    --gap-heading:var(--sp-m); --gap-col:var(--sp-l);
  }
  .lp-hero-copy{padding-top:calc(var(--header-h) + var(--sp-l));
    padding-bottom:var(--sp-l)}
  .lp-split{grid-template-columns:1fr;gap:var(--gap-heading)}
  .lp-proj{flex-basis:calc((100% - var(--sp-s) * 2) / 3)}
  .lp-case{grid-template-columns:1fr}
  .lp-show-fact{padding-left:0;border-left:0}
  .lp-band-panel{flex-direction:column;align-items:flex-start}
  /* the CTA, "Talk to our team" and the phone wrap inside the phone screen (gate 2026-11-02: 23-51px overflow) */
  .lp-band-actions{flex-wrap:wrap;flex:1 1 auto;max-width:100%;gap:var(--sp-s) var(--sp-l)}
  .lp-shots figure:nth-child(4n+4){grid-column:span 12}
}
/* ==== The hero stacks at the width where a 40% column can no longer hold
        --hero-copy-min (420px) of measure. Above it the composition stays
        side by side, as the approved direction has it. ==== */
@media(max-width:1240px){
  .lp-hero{grid-template-columns:1fr;min-height:0}
  .lp-hero-copy{grid-column:1;max-width:none;
    padding:calc(var(--header-h) + var(--sp-l)) var(--lp-gut) var(--sp-l)}
  /* Stacked, so it takes the page gutter on BOTH sides and sits exactly as wide as
     the copy above it - still on the content grid, never edge to edge. */
  .lp-hero-media{order:2;grid-column:1;grid-row:auto;
    margin-left:var(--lp-gut);margin-right:var(--lp-gut)}
  /* Sized by ratio so the photo scales with the viewport; the cap stops a wide
     tablet turning the hero into a full-screen image. */
  .lp-page .lp-hero-img{position:static;width:100%;height:auto;
    aspect-ratio:var(--hero-media-ratio);max-height:var(--hero-media-max);
    object-fit:cover;object-position:center}
  .lp-hero-media::after{
    background:linear-gradient(0deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 42%)}
}
/* ==== TABLET ONLY (721-1240): shorten the stacked hero ====
        Scoped with a min-width so none of it reaches the 390 phone layout, which
        keeps its own ratio, cap and padding untouched. The photo carries the cut:
        stacked and full-bleed, its height is the only part of the hero that can
        give without taking measure away from the headline. */
@media(min-width:721px) and (max-width:1240px){
  :root{
    --hero-media-ratio:3/1;
    --hero-media-max:185px;
  }
  .lp-hero-copy{padding:calc(var(--header-h) + var(--sp-s)) var(--lp-gut) var(--sp-s)}
  .lp-eyebrow{margin-bottom:var(--sp-s)}
  .lp-hero .lp-sub{margin-top:var(--sp-s)}
  .lp-hero-ctas{margin-top:var(--sp-m)}
}
/* ============ MOBILE ============ */
@media(max-width:720px){
  :root{
    --pad-card:var(--sp-s); --gap-col:var(--sp-m);
    --hero-media-ratio:3/2; --hero-media-max:210px;
  }
  .lp-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lp-hero-ctas .lp-cta{flex:1 1 100%}
  .lp-hero-ctas .lp-cta-ghost{flex:1 1 100%}
  .lp-svc-grid{grid-template-columns:1fr}
  .lp-quote{grid-template-columns:1fr;align-items:start}
  .lp-quote figcaption{padding-left:0;border-left:0;
    padding-top:var(--sp-s);border-top:1px solid var(--lp-line)}
  .lp-proj{flex-basis:74%}
  .lp-shots{grid-template-columns:1fr}
  .lp-shots figure:nth-child(4n+1),.lp-shots figure:nth-child(4n+2),
  .lp-shots figure:nth-child(4n+3),.lp-shots figure:nth-child(4n+4){grid-column:1/-1}
  .lp-shots figure img{aspect-ratio:3/2}
  .lp-shots figcaption{opacity:1}
  .lp-arrow{display:none}
  .lp-form{grid-template-columns:1fr}
  .lp-form button{width:100%;justify-self:stretch}
}
@media(prefers-reduced-motion:reduce){
  .lp-cta,.lp-shots img,.lp-shots figcaption,.lp-proj img{transition:none}
  .lp-shots figure:hover img{transform:none}
  .lp-proj-link:hover img{transform:none}
  .lp-track{scroll-behavior:auto}
}

/* ---- long article (Owner 2026-11-01): long copy on the layout's left edge; absent when there is no article ---- */
.lp-article-body{max-width:78ch;color:var(--lp-body);font-size:.95rem;line-height:1.7}
.lp-article-body p{margin:0 0 var(--sp-m)}
.lp-article-body h3{color:var(--lp-white);font-family:var(--lp-display);font-size:1.12rem;font-weight:600;
  letter-spacing:-.015em;margin:var(--sp-xl) 0 var(--sp-s)}
.lp-article-body h3:first-child{margin-top:0}
.lp-article-body ul{margin:0 0 var(--sp-m);padding-left:1.2em}
.lp-article-body li{margin:0 0 var(--sp-xs)}
.lp-article-body li::marker{color:var(--lp-accent)}
.lp-article-body strong{color:var(--lp-white);font-weight:600}
.lp-article-body a{color:var(--lp-accent);text-decoration:underline;text-underline-offset:2px}
.lp-article-body a:hover{color:var(--lp-white)}
.lp-article-fig{margin:var(--sp-l) 0;max-width:100%}
.lp-article-fig img{width:100%;height:auto;border-radius:var(--radius);background:var(--lp-raised)}
.lp-article-fig figcaption{color:var(--lp-muted);font-size:.78rem;margin-top:var(--sp-xs)}
/* task4 2026-11-02: the body is the shared Articles editor's HTML - H2/H3, ordered lists, tables and its pictures
   (figure.et-inline-image: size S/M/L/full or pixels, left/centre/right, text wrap). Nothing is wider than the column. */
.lp-article-body::after{content:"";display:table;clear:both}
.lp-article-body h2{color:var(--lp-white);font-family:var(--lp-display);font-size:1.4rem;font-weight:600;
  letter-spacing:-.02em;line-height:1.25;margin:var(--sp-xl) 0 var(--sp-s)}
.lp-article-body h2:first-child{margin-top:0}
.lp-article-body h4{color:var(--lp-white);font-size:1rem;font-weight:600;margin:var(--sp-l) 0 var(--sp-xs)}
.lp-article-body ol{margin:0 0 var(--sp-m);padding-left:1.4em}
.lp-article-body blockquote{margin:0 0 var(--sp-m);padding-left:var(--sp-m);border-left:2px solid var(--lp-accent);color:var(--lp-muted)}
.lp-article-body img{max-width:100%;height:auto}
.lp-article-table{max-width:100%;overflow-x:auto;margin:0 0 var(--sp-m)}
.lp-article-body table{border-collapse:collapse;min-width:60%;font-size:.88rem}
.lp-article-body th,.lp-article-body td{border:1px solid var(--lp-line);padding:8px 12px;text-align:left;vertical-align:top}
.lp-article-body th{color:var(--lp-white);font-weight:600}
.lp-article-body figure.et-inline-image{margin:var(--sp-l) auto;padding:0;max-width:100%;width:100%}
.lp-article-body figure.et-inline-image.et-inline--wide{width:75%}
.lp-article-body figure.et-inline-image.et-inline--half{width:50%}
.lp-article-body figure.et-inline-image.et-inline--small{width:33%}
.lp-article-body figure.et-inline-image.et-inline--px{width:fit-content}
.lp-article-body figure.et-inline-image.et-inline--left{margin-left:0;margin-right:auto}
.lp-article-body figure.et-inline-image.et-inline--right{margin-left:auto;margin-right:0}
.lp-article-body figure.et-inline-image img{display:block;max-width:100%;height:auto;margin:0;border-radius:var(--radius);background:var(--lp-raised)}
.lp-article-body figure.et-inline-image:not(.et-inline--px) img{width:100%}
.lp-article-body figure.et-inline-image figcaption{margin-top:var(--sp-xs);color:var(--lp-muted);font-size:.78rem;line-height:1.5;text-align:center;overflow-wrap:anywhere}
.lp-article-body figure.et-inline-image.et-inline--wrap.et-inline--left{float:left;margin:6px 26px 14px 0;max-width:60%}
.lp-article-body figure.et-inline-image.et-inline--wrap.et-inline--right{float:right;margin:6px 0 14px 26px;max-width:60%}
.lp-article-body figure.et-inline-image:not(.et-inline--wrap){clear:both}
@media(max-width:720px){
  .lp-article-body figure.et-inline-image.et-inline--wide,.lp-article-body figure.et-inline-image.et-inline--half{width:100%}
  .lp-article-body figure.et-inline-image.et-inline--small{width:66%}
  .lp-article-body figure.et-inline-image.et-inline--wrap.et-inline--left,
  .lp-article-body figure.et-inline-image.et-inline--wrap.et-inline--right{float:none;margin:24px auto;max-width:100%}
}