/*
Theme Name: Astra Child - MAC
Template: astra
Description: Child theme for the Marketing Analytics Consultants static-site port. Holds the shared design system extracted from the case-study pages. This is a PORT, not a redesign - do not restyle.
Version: 1.0.0
*/

/* ==========================================================================
   SHARED DESIGN SYSTEM
   --------------------------------------------------------------------------
   Extracted from the <style> block of the case-study pages in /source-site/cases/.
   Verified byte-for-byte identical across:
     - case-appeal-support.html
     - case-art-museum.html
     - case-book-production.html
   222 of 231 lines identical (~96%). The only differences between pages are the
   :root colour blocks, which are NOT included here - see the placeholders below.

   DO NOT put page colours in this file. Each of the 21 case-study pages keeps
   its own :root block, inline on that page. Never merge them.
   ========================================================================== */


/* ==========================================================================
   PLACEHOLDER 1 of 2 - PER-PAGE PALETTE  (:root, 14 vars)
   --------------------------------------------------------------------------
   Each case-study page emits its own copy of this block inline, ahead of the
   shared CSS. 11 of the 14 are true colours and differ per page; --navh,
   --serif and --sans are the same on every page but stay in the per-page block
   so the block can be copied across verbatim.

   Shape (values shown are case-appeal-support.html's - DO NOT hardcode here):

     :root{
      --paper:#______;--sky:#______;--sky2:#______;--sky3:#______;
      --blue:#______;--blue-d:#______;--gold:#______;--gold-p:#______;
      --ink:#______;--ink-soft:#______;--rule:#______;
      --navh:94px;
      --serif:Georgia,'Times New Roman',serif;
      --sans:'Gill Sans MT','Gill Sans','Trebuchet MS','Segoe UI',sans-serif;
     }

   >>> PER-PAGE :root GOES HERE (inline on the page, not in this file) <<<
   ========================================================================== */


*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--navh) + 34px)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);
 font-size:19px;line-height:1.68;-webkit-font-smoothing:antialiased}.wrap{max-width:1080px;margin:0 auto;padding:0 30px}
section{padding:62px 0;scroll-margin-top:calc(var(--navh) + 34px)}
h1{font-size:50px;font-size:clamp(32px,4.6vw,50px);line-height:1.14;margin:0 0 22px;color:var(--blue-d);font-weight:700}
h2{font-size:34px;font-size:clamp(25px,3vw,34px);line-height:1.2;margin:0 0 18px;color:var(--blue-d)}
h3{font-size:23px;margin:38px 0 12px;color:var(--blue-d)}
p{margin:0 0 17px;max-width:74ch}.eyebrow{font-family:var(--sans);font-size:16px;letter-spacing:.15em;text-transform:uppercase;
 color:var(--gold);margin:0 0 12px;font-weight:600}
a{color:var(--blue)}.nav{position:sticky;top:0;z-index:60;background:var(--sky2);border-bottom:1px solid var(--sky3)}.nav .wrap{display:flex;align-items:center;gap:16px;min-height:var(--navh)}.brand{font-family:var(--serif);font-size:21px;font-weight:700;letter-spacing:.14em;
 text-transform:uppercase;white-space:nowrap;color:var(--blue-d)}.nav ul{display:flex;gap:20px;list-style:none;margin:0;padding:0;flex:1}.nav ul a{font-family:var(--sans);font-size:19px;color:var(--ink-soft);text-decoration:none;
 white-space:nowrap;padding:6px 0;border-bottom:2px solid transparent;display:inline-block}.nav ul a:hover{color:var(--blue-d)}.nav ul a[aria-current="true"]{color:var(--blue-d);border-bottom-color:var(--gold);font-weight:700}.burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:46px;height:40px;
 padding:0 11px;background:var(--paper);border:1px solid var(--sky3);border-radius:5px;cursor:pointer}.burger span{display:block;height:2px;background:var(--blue-d);border-radius:2px;transition:.18s}.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}.burger[aria-expanded="true"] span:nth-child(2){opacity:0}.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:1080px){.burger{display:flex}.nav ul{position:absolute;top:100%;left:0;right:0;display:none;flex-direction:column;gap:0;
 background:var(--paper);border-bottom:1px solid var(--sky3);
 box-shadow:0 12px 26px rgba(31,45,56,.15);padding:6px 0;
 max-height:calc(100vh - var(--navh));overflow-y:auto}.nav ul.open{display:flex}.nav ul li{width:100%}.nav ul a{display:block;padding:14px 24px;border-bottom:none;border-left:3px solid transparent;font-size:20px}.nav ul a[aria-current="true"]{border-left-color:var(--gold);background:var(--sky)}
}.hero{background:var(--sky);padding:64px 0 54px;border-bottom:1px solid var(--rule)}.lede{font-size:21px;line-height:1.62}.figblock{background:var(--paper);border:1px solid var(--rule);border-radius:8px;
 padding:26px 28px 20px;margin:32px 0}.figblock h4{font-family:var(--sans);font-size:16px;letter-spacing:.12em;text-transform:uppercase;
 color:var(--ink-soft);margin:0 0 4px;font-weight:600}.figblock .sub{font-family:var(--serif);font-size:20px;color:var(--blue-d);margin:0 0 20px;font-weight:700;max-width:none}.figblock svg{width:100%;height:auto;display:block}.figblock .note{font-family:var(--sans);font-size:16px;color:var(--ink-soft);
 margin:16px 0 0;line-height:1.55;border-top:1px solid var(--rule);padding-top:13px;max-width:none}.src{font-family:var(--sans);font-size:16px;color:var(--ink-soft);margin-top:6px}.bignums{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin:28px 0}.bignum{background:var(--sky);border:1px solid var(--sky3);border-radius:7px;padding:20px 16px;text-align:center}.bignum b{display:block;font-family:var(--serif);font-size:35px;line-height:1;color:var(--blue-d);font-weight:700}.bignum span{display:block;font-family:var(--sans);font-size:16px;color:var(--ink-soft);margin-top:8px;line-height:1.4}.finding{background:var(--gold-p);border-left:4px solid var(--gold);border-radius:0 7px 7px 0;
 padding:20px 24px;margin:26px 0}.finding b{font-family:var(--sans);font-size:16px;letter-spacing:.1em;text-transform:uppercase;
 color:var(--gold);display:block;margin-bottom:7px}.finding p{margin:0;font-size:19px;line-height:1.6;max-width:none}
table{width:100%;border-collapse:collapse;margin:26px 0;font-size:17px;background:var(--paper)}
th{background:var(--blue-d);color:#fff;font-family:var(--sans);font-size:16px;letter-spacing:.05em;
 text-transform:uppercase;text-align:left;padding:11px 13px;font-weight:600}
td{padding:10px 13px;border-bottom:1px solid var(--rule);vertical-align:top}
tr:nth-child(even) td{background:var(--sky)}.back{display:inline-block;font-family:var(--sans);font-size:17px;margin-bottom:20px}
footer{background:var(--paper);border-top:1px solid var(--rule);color:var(--ink-soft);
 padding:30px 0;font-family:var(--sans);font-size:16px}.contact{background:var(--sky2);border-top:1px solid var(--sky3)}.sitefoot{background:var(--sky2);border-top:1px solid var(--sky3);padding:46px 0 34px;margin-top:0}.footgrid{display:grid;grid-template-columns:minmax(240px,1.5fr) repeat(3,minmax(150px,1fr));gap:32px}.footbrand b{display:block;font-family:var(--serif);font-size:21px;color:var(--blue-d);
 font-weight:700;line-height:1.25;margin-bottom:8px}.footbrand span{display:block;font-family:var(--sans);font-size:16px;color:var(--ink-soft);line-height:1.5}.footbrand .tag{margin-top:12px;color:var(--gold);font-weight:700}.footcol h4{font-family:var(--sans);font-size:16px;letter-spacing:.09em;text-transform:uppercase;
 color:var(--blue-d);margin:0 0 12px;font-weight:700}.footcol a{display:block;font-family:var(--sans);font-size:16px;color:var(--ink-soft);
 text-decoration:none;margin-bottom:9px;line-height:1.4}.footcol a:hover{color:var(--blue-d)}.footrule{height:1px;background:var(--sky3);margin:34px 0 20px}.footbase{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
 font-family:var(--sans);font-size:16px;color:var(--ink-soft);line-height:1.5}.footbase .legal{color:var(--ink-soft)}
@media(max-width:780px){.footgrid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.footgrid{grid-template-columns:1fr}}.fn p,.fn h4,.mitem span,.footcol a,.footbase,.src, td,.crow span.d{
 overflow-wrap:break-word;word-break:normal;hyphens:none;-webkit-hyphens:none}


@media(max-width:1100px){ }.logo{display:block;flex:none;text-decoration:none;line-height:0}.logo img{height:66px;width:auto;display:block}
@media(max-width:1240px){.logo img{height:56px} }
@media(max-width:1040px){.logo img{height:50px} }
@media(max-width:520px){.logo img{height:44px} }.socrow{display:flex;gap:16px;align-items:center;margin:22px 0 0}.socrow .soc{display:flex;align-items:center;justify-content:center;width:38px;height:38px;
 border:1px solid var(--sky3);border-radius:50%;background:var(--paper)}.socrow .soc svg{fill:var(--ink-soft)}.socrow a.soc{text-decoration:none}.socrow a.soc:hover{border-color:var(--gold)}.socrow a.soc:hover svg{fill:var(--gold)}.nav ul a.soon{color:var(--ink-soft);opacity:.55;cursor:default}

a[href^="mailto:"], a[href^="tel:"]{color:var(--blue);text-decoration:none;
 border-bottom:1px solid var(--sky3)}
a[href^="mailto:"]:hover, a[href^="tel:"]:hover{color:var(--gold);border-bottom-color:var(--gold)}.footbase a[href^="mailto:"],.footbase a[href^="tel:"]{color:var(--ink-soft);border-bottom-color:var(--sky3)}.footbase a[href^="mailto:"]:hover,.footbase a[href^="tel:"]:hover{color:var(--blue-d)}.contact a[href^="mailto:"],.contact a[href^="tel:"]{color:var(--gold);border-bottom-color:var(--gold)}.miniform{margin-top:26px;max-width:900px}.minirow{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}.minifield{display:flex;flex-direction:column;margin-bottom:16px}.minifield.wide{max-width:none}.minifield label{font-family:var(--sans);font-size:16px;font-weight:700;color:var(--blue-d);
 margin-bottom:6px;letter-spacing:.03em}.minifield input{font-family:var(--serif);font-size:17px;padding:11px 13px;border:1px solid var(--sky3);
 border-radius:6px;background:var(--paper);color:var(--ink)}.minifield input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-p)}.miniform .submit{font-family:var(--sans);font-size:18px;font-weight:700;padding:13px 30px;
 border:none;border-radius:6px;background:var(--blue-d);color:#fff;cursor:pointer;margin-top:4px}.miniform .submit:hover{background:var(--gold)}.miniform .formnote{font-family:var(--sans);font-size:16px;color:var(--ink-soft);margin:14px 0 0}.nb{display:none}.eml{font-family:var(--sans);color:var(--blue-d);font-weight:700;user-select:all;hyphens:none;-webkit-hyphens:none;overflow-wrap:break-word}.formstatus{display:none;margin-top:18px;padding:16px 20px;border-radius:8px;
  font-family:var(--sans);font-size:17px;line-height:1.55}.formstatus.show{display:block}.formstatus.ok{background:#E8F3E8;border:1px solid #9CC49C;color:#255025}.formstatus.err{background:#FBF2DE;border:1px solid var(--gold);color:#6E5008}.formstatus strong{font-weight:700}

/* ==========================================================================
   PLACEHOLDER 2 of 2 - PER-PAGE CHART ACCENTS  (:root, 4 vars)
   --------------------------------------------------------------------------
   A SECOND :root block sits at exactly this position in the source pages.
   Present on 10 of the 21 case-study pages; absent on the other 11
   (e.g. case-book-production.html has no such block - omit it there).

   These four vars are referenced ONLY from inside the inline SVG charts in
   <body>. No rule in this stylesheet uses them. They must still be declared
   before the charts render, so keep them inline on the page.

   Shape (values differ per page - DO NOT hardcode here):

     :root{--cs:#______;--cs-wash:#______;--cs-deep:#______;--cs-pale:#______}

   >>> PER-PAGE CHART-ACCENT :root GOES HERE, IF THE PAGE HAS ONE <<<
   ========================================================================== */


/* ===== FIGURES: bigger, readable, scrollable on mobile ===== */
figure.figfull{margin:38px 0;padding:0;
 width:calc(100% + 180px);margin-left:-90px;max-width:100vw;
 overflow-x:auto;-webkit-overflow-scrolling:touch}
figure.figfull svg{display:block;width:100%;min-width:760px;height:auto;
 border:1px solid var(--rule);background:var(--paper)}
figure.figfull figcaption{font-family:var(--sans);font-size:17px;color:var(--ink-soft);
 margin:14px 0 0 90px;line-height:1.5;font-style:italic;max-width:44em}
@media(max-width:1240px){
 figure.figfull{width:100%;margin-left:0}
 figure.figfull figcaption{margin-left:0}
}
@media(max-width:820px){
 figure.figfull svg{min-width:700px}
 figure.figfull:after{content:"\2190 swipe to see the whole chart \2192";
  display:block;font-family:var(--sans);font-size:14px;color:var(--ink-soft);
  padding-top:8px;text-align:center}
}

/* ===== BREAK UP TEXT: lead paragraph after each heading ===== */ .wrap h2 + p{font-size:20px;line-height:1.6;color:var(--blue-d);
 border-left:4px solid var(--gold);padding-left:22px;margin-left:0}

/* ===== KEY-POINT CARDS ===== */ .kpts{display:flex;flex-wrap:wrap;gap:20px;margin:32px 0}.kpts>div{flex:1 1 250px;min-width:0;background:var(--paper);border:1px solid var(--rule);
 border-top:5px solid var(--gold);padding:24px 22px}.kpts h4{font-family:var(--sans);font-size:17px;letter-spacing:.05em;text-transform:uppercase;
 color:var(--blue-d);margin:0 0 11px}.kpts p{font-size:17px;line-height:1.55;color:var(--ink-soft);margin:0;border:none;padding:0}

@media(max-width:820px){
 figure svg,.fig svg,.figure svg{min-width:700px}
 figure,.fig,.figure{overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* ── mobile nav fix: the logo is 9.2:1, so at a fixed height it was wider
      than a phone screen and pushed the burger off the right edge ── */
@media(max-width:1040px){
 :root{ --navh:72px }.nav .wrap{ gap:12px;padding:0 18px;min-height:72px;flex-wrap:nowrap }.logo{ flex:0 1 auto;min-width:0;overflow:hidden }.logo img{ height:auto;width:auto;max-height:40px;max-width:100% }.burger{ display:flex;flex:0 0 auto;margin-left:auto }
}
@media(max-width:560px){
 :root{ --navh:64px }.nav .wrap{ padding:0 14px;min-height:64px }.logo img{ max-height:32px }.burger{ width:44px;height:38px;padding:0 10px }.nav ul a{ font-size:19px;padding:14px 20px }
}

/* ============ PHONE PASS ============
   Everything below exists because the desktop layout used fixed minimum
   widths, which forced the page wider than a phone screen and produced the
   sideways drag. Nothing here changes the desktop layout. */

/* the bar stays on screen while the page scrolls, so the menu button is
   always reachable - position:sticky was silently failing on mobile */.nav { position:fixed;top:0;left:0;right:0;z-index:1000 }
body { padding-top:var(--navh) }

/* phone-shaped chart swaps, where one exists */
figure.chartnarrow { display:none;margin:30px 0;padding:0 }
figure.chartnarrow svg { display:block;width:100%;height:auto;
 border:1px solid var(--rule);background:var(--paper) }

@media(max-width:760px){
 html, body { overflow-x:hidden;max-width:100% }

 /* nothing may be wider than the screen */
 img, svg, table, pre, iframe { max-width:100% }
 figure.figfull, figure.figfull.big { width:100%;max-width:100%;margin-left:0;
  margin-right:0;transform:none;overflow-x:visible }
 figure.figfull svg, figure svg,.fig svg,.figure svg,
 figure.figfull.big svg { min-width:0;width:100%;height:auto }
 figure.figfull:after { content:none }

 /* charts that have a phone version swap to it */
 figure.figfull.chartwide { display:none }
 figure.chartnarrow { display:block }

 /* tables stack into label-and-value rows instead of running off the edge */
 table,.scaletbl { min-width:0;width:100%;font-size:16px }
 table, table tbody, table tr, table td, table th,.scaletbl,.scaletbl tbody,.scaletbl tr,.scaletbl td,.scaletbl th { display:block;width:100% }
 table thead,.scaletbl thead { display:none }
 table tr,.scaletbl tr { border-bottom:2px solid var(--rule);padding:10px 0 }
 table td,.scaletbl td { border-bottom:none;padding:5px 0;width:100% }
 table td:first-child,.scaletbl td:first-child { width:100%;padding-top:12px;
  font-weight:700;color:var(--blue-d) }.scaletbl td.n { text-align:left;font-size:20px }.scaletbl tr.grp td { background:var(--sky2);padding:8px 10px }

 /* floated photos go full width - wrapping text round a photo leaves
    about nine characters a line on a phone */
 figure.lead, figure.lead.left, figure.lead.right,
 figure.inline, figure.inline.left, figure.inline.right,
 figure.shot, figure.shot.left, figure.shot.right,
 figure.sortfig, figure.spoolfig, figure.gradfig, figure.nostpic, figure.heroshot,.me2 figure {
  float:none;width:100%;max-width:320px;margin:24px auto }

 /* multi-column blocks collapse to one column */.cards,.quotes,.vidrow,.hlgrid,.strip,.doors,.reflist { display:block }.cards article,.quotes>figure,.vidrow .vid,.strip>div { width:100%;margin:0 0 18px }.reflist li { margin:0 0 16px }

 /* long unbroken strings (URLs, ids) wrap instead of pushing the page wide */
 p, li, td, th, h1, h2, h3, h4, figcaption, blockquote { overflow-wrap:anywhere }
}

@media(max-width:430px){.wrap { padding-left:16px;padding-right:16px }
 table td,.scaletbl td { font-size:16px }
}

@media(max-width:760px){
 /* a cell told never to wrap will push the page wider than the screen */
 td, th,.scaletbl td,.scaletbl th,.scaletbl td.n,.scaletbl th.n,
 table.reftable td, table.reftable th { white-space:normal }
 table, table.reftable,.scaletbl,.dtable { table-layout:auto }
 /* and a chart figure may never carry a floor width */
 figure svg,.figfull svg,.chartnarrow svg { min-width:0 }
}

@media(max-width:760px){
 /* these tables have no <thead> - the header cells are plain <th> in the first
    row, so hiding thead never touched them and they rendered as a dark band
    with the labels stacked inside it */
 table th,.scaletbl th, table.reftable th,.dtable th,.cases th { display:none }
 table tr:has(> th),.scaletbl tr:has(> th), table.reftable tr:has(> th) { display:none }.hide-sm { display:none }
}

@media(max-width:760px){
 /* table.cases pinned its first column to 20%, which beat the stacking rule
    on specificity and broke company names mid-word (NETFLI / X) */
 table.cases td:first-child, table.cases th:first-child,
 table.deftable td:first-child,.scaletbl td:first-child,
 table.reftable td:first-child { width:100% }
 table.cases td, table.cases th { display:block;width:100% }
 /* nothing breaks mid-word any more */
 p, li, td, th, h1, h2, h3, h4, figcaption, blockquote { overflow-wrap:break-word;word-break:normal }

 /* the column labels come back, as one light line instead of a dark stack */
 table tr:has(> th),.scaletbl tr:has(> th), table.reftable tr:has(> th),
 table.cases tr:has(> th) { display:flex;flex-wrap:wrap;gap:16px;
  background:var(--sky);border-bottom:2px solid var(--rule);padding:9px 12px }
 table th,.scaletbl th, table.reftable th,.dtable th, table.cases th {
  display:inline-block;width:auto;background:none;color:var(--blue-d);
  padding:0;font-size:14px;letter-spacing:.06em;text-transform:uppercase;
  border:none;white-space:nowrap }
 th.hide-sm, td.hide-sm,.hide-sm { display:none }
}

/* ── a soft shadow falling to the right, on photographs only.
      The 4 transparent images (hero drawing, SOTP seal, logo, favicon) are
      excluded by name, since a shadow would trace their silhouette. ── */
figure.lead img,
figure.shot img,
figure.inline img,
figure.sortfig img,
figure.spoolfig img,
figure.gradfig img,
figure.heroshot img,
.nostpic img,
.collage img,
.me2 figure img,
.ridersfig img,
.logowall img,
.life-img,
.cell-img,
.road-sign {
 box-shadow:9px 11px 22px -8px rgba(43,41,38,.34);
 border-radius:2px;
}
.hhero .heroart, .hhero .heroseal, .logo img { box-shadow:none }
@media(max-width:760px){
 figure.lead img, figure.shot img, figure.inline img, figure.sortfig img,
 figure.spoolfig img, figure.gradfig img, figure.heroshot img, .nostpic img,
 .collage img, .me2 figure img, .ridersfig img {
  box-shadow:6px 7px 15px -6px rgba(43,41,38,.30);
 }
}

/* the send button is a real submit control now, not a link */
.formcard button.btn { font:inherit;border:none;cursor:pointer }
.formcard button.btn::-moz-focus-inner { border:0;padding:0 }