/* =========================================================
   PROJECTS pattern - archive + single
   Frames: 470:401 (Projects) and 474:646 (Projects - Single (Template))
   file hEz76xPVqoOfNSJ9VKwfTQ, both 1920 wide starting at 0,0.

   Moved here out of archive-project.php's and single-project.php's inline
   <style> blocks as part of the figma-exact pass, so the render harness
   measures what actually ships. Both blocks were deleted from the templates
   in the same edit and are declared in scripts/figma-gate/migrated/projects.json.

   Scoping: .pj-* belongs to archive-project.php and .ps-* to
   single-project.php, and to nothing else in the theme (grep: .pj- appears in
   no other template and not in site.css; .ps- appears in no other template and
   only twice in site.css, in the two .ps-exarr mobile rules this file keeps).
   No evo-tpl-* body class is needed, and none can be used here anyway: the
   harness scopes a body class by URL prefix, and /projects/ is a prefix of
   /projects/<slug>/, so one class would land on both pages.

   Every number below was read off a layer with get_design_context. Where the
   nine hand-placed Figma cards disagree with each other by a pixel or six,
   the majority value is used and the divergence is recorded in
   docs/fleet-issues/projects.md. Nothing here is eyeballed.
   ========================================================= */


/* =========================================================
   ARCHIVE  /projects/  - frame 470:401
   ========================================================= */

/* ---- hero, Header-Banner 470:402 -------------------------------------- */
/* header 470:403 is 1920x600 at 0,0 with an image fill; Overlay 470:404 is
   rgba(0,0,0,0.15) over the same 600px. The white rounded-28px Background
   470:414 (0,567 1920x425) sits entirely behind the navy quote bar and the
   white page, so it has no visible effect and no element here. */
.pj-hero{position:relative;height:600px;overflow:hidden;color:#fff;background:#002b54;}
.pj-hero .bg{position:absolute;inset:0;z-index:0;}
.pj-hero .bg img{width:100%;height:100%;object-fit:cover;display:block;}
.pj-hero .bg .ov{position:absolute;inset:0;background:rgba(0,0,0,.15);}
.pj-hero .container{position:relative;z-index:2;padding-top:300px;}
/* Figma puts the hero text column at x197; the shared 1520 container is at
   x200, hence the 3px pull. Released below 1200. */
.pj-hero .eyebrow{margin-left:-3px;font-family:var(--font-display);font-weight:400;
  font-size:20px;line-height:25px;letter-spacing:normal;color:#fff;margin-bottom:2px;
  width:max-content;max-width:100%;}
/* CSS adds letter-spacing after the last glyph too; Figma only tracks between
   glyphs, so a tracked box measures exactly one unit narrower than drawn. The
   padding gives the box back its drawn width without moving a single glyph. */
.pj-hero h1{margin-left:-3px;font-family:var(--font-display);font-weight:700;
  font-size:75px;line-height:89px;letter-spacing:-1.5px;color:#fff;width:max-content;max-width:100%;
  padding-right:1.5px;}

/* Form-Quote 617:459 sits at y567 over a 600px hero: a 33px overlap.
   site.css only applies the shared --qb-overlap above 1200, so this matches. */
@media(min-width:1201px){
  .pj-hero + .quotebar{margin-top:-33px;}
}

/* ---- intro, Intro 470:415 -------------------------------------------- */
/* h2 470:417 y830 h55, p 470:416 y914 w1114. Quote bar ends at 687, so 143
   above the h2; 29 between the h2 box and the p; 58 to the filter label. */
.pj-intro{padding:143px 0 58px;text-align:center;}
.pj-intro h2{font-family:var(--font-display);font-weight:700;font-size:50px;line-height:55px;
  letter-spacing:-1.5px;color:#27272d;width:max-content;max-width:100%;margin:0 auto 29px;
  padding-right:1.5px;}
.pj-intro p{font-family:var(--font-display);font-weight:300;font-size:20px;line-height:26px;
  letter-spacing:normal;color:#27272d;width:1114px;max-width:100%;min-height:106px;margin:0 auto;}

/* ---- filter row, Search-bar 470:557 ---------------------------------- */
/* label 470:560 x198 y1078; select 470:559 x198 y1112 389.744x65 r15;
   search 470:564 x614.73 y1112 1101.275x65 r15; both bordered #b7b7b7.
   Row spans 198..1716.005, which is 2px left of the shared container. */
.pj-filter{padding:0 0 108px;}
.pj-filter .flabel{margin:0 0 8px -2px;font-family:var(--font-display);font-weight:500;
  font-size:18px;line-height:26px;letter-spacing:-0.36px;color:#27272d;
  width:max-content;max-width:100%;padding-right:0.36px;}
.pj-filter .frow{display:flex;gap:26.986px;margin-left:-2px;width:1518.005px;max-width:100%;}
.pj-filter .fsel{position:relative;flex:0 0 389.744px;width:389.744px;height:65px;}
.pj-filter .fsel select{width:100%;height:65px;border:1px solid #b7b7b7;border-radius:15px;
  background:#fff;padding:0 63.974px 0 22.984px;font-family:var(--font-display);font-weight:300;
  font-size:17px;line-height:26px;letter-spacing:normal;color:#27272d;appearance:none;cursor:pointer;}
/* Vector 470:562, exported from Figma: 16.49 x 9.001, #b7b7b7, right inset
   23.484 inside the 389.744 box, centred on the box's own centre line. */
.pj-filter .fsel .chev{position:absolute;right:23.484px;top:28px;width:16.49px;height:9.001px;
  background:url('/wp-content/themes/evoheat/assets/img/figma/projects/filter-chevron.svg') no-repeat center/100% 100%;
  pointer-events:none;border:0;transform:none;margin:0;}
.pj-filter .fsearch{position:relative;flex:1 1 auto;height:65px;}
.pj-filter .fsearch input{width:100%;height:65px;border:1px solid #b7b7b7;border-radius:15px;
  background:#fff;padding:0 71.965px 0 22.984px;font-family:var(--font-display);font-weight:300;
  font-size:17px;line-height:26px;letter-spacing:normal;color:#27272d;}
/* Figma draws the placeholder in the body ink, not a grey. */
.pj-filter .fsearch input::placeholder{color:#27272d;opacity:1;}
/* Vector 470:567, exported: 19.5083 x 19.5211, #b7b7b7, y1137 (2.26 below the
   field's centre line, as drawn), right inset 32.457. */
.pj-filter .fsearch .mag{position:absolute;right:32.457px;top:25px;width:19.5083px;height:19.5211px;
  background:url('/wp-content/themes/evoheat/assets/img/figma/projects/search-magnifier.svg') no-repeat center/100% 100%;
  border:0;border-radius:0;margin:0;}
.pj-filter .fsearch .mag::after{content:none;}

/* ---- 3-across card grid, Projects 470:437 ---------------------------- */
/* Cards at x197 / 717 / 1236.0004, 479.684 wide, 551 tall, row pitch 619.
   A 39.816 column gap reproduces all three column positions inside 1px
   (716.5 vs 717, 1236.0 vs 1236.0004). Grid spans 197..1715.684. */
.pj-grid-wrap{padding:0 0 35px;}
.pj-grid{display:grid;grid-template-columns:repeat(3,479.684px);column-gap:39.816px;row-gap:68px;
  margin-left:-3px;width:1518.684px;max-width:100%;}
.pj-card{position:relative;height:551px;background:#fff;border:1px solid #d3d3d3;border-radius:20px;
  overflow:hidden;display:flex;flex-direction:column;box-shadow:none;transition:box-shadow .15s ease;}
.pj-card:hover{transform:none;box-shadow:0 18px 40px rgba(0,20,45,.10);}
/* image 470:456 etc: 477.686 x 295 at the card's content origin, r20. Figma
   then lays a white 477.686x57 rectangle (470:457) across y+280..y+337, which
   is what the card body's own white background does here from y+280 down. */
.pj-card .pj-thumb{display:block;position:relative;flex:0 0 295px;height:295px;
  border-radius:20px;overflow:hidden;background:#002b54;}
.pj-card .pj-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.pj-card .pj-body{position:relative;z-index:2;margin-top:-16px;background:#fff;
  padding:0 25.98px 39px 40.97px;display:flex;flex-direction:column;flex:1 1 auto;min-height:0;}
.pj-card .pj-body::before{content:"";display:block;flex:0 1 42px;height:42px;min-height:0;}
/* Title 470:458: 24 Medium, tracking -0.72, #27272d, 410.73 box. Figma's own
   normal leading measures 30 on all eight hug boxes; card 1's 55px frame is
   hand-set, not a type fact (see fleet-issues). */
.pj-card h3{font-family:var(--font-display);font-weight:500;font-size:24px;line-height:30px;
  letter-spacing:-0.72px;color:#27272d;width:410.73px;max-width:100%;margin:0;flex:0 0 auto;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;}
/* text 470:459: 17 Light / 22, #27272d, 29 below the title box. */
.pj-card p{font-family:var(--font-display);font-weight:300;font-size:17px;line-height:22px;
  letter-spacing:normal;color:#27272d;width:410.73px;max-width:100%;margin:29px 0 0;flex:0 0 auto;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;}
/* btn 470:460: 145.904x47, r50, 1px #18181e at 50%, label 17 Book #27272d.
   All nine cards put it at card x + 41.97 and 40 clear of the card bottom, so
   it is bottom-anchored; the -1px pulls it to 41.97 while the title sits at
   the majority 41.97 + the 1px the design wobbles by. */
.pj-card .pj-view{align-self:flex-start;flex:0 0 auto;margin:auto 0 0 0;width:145.904px;height:47px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;background:transparent;
  border:1px solid rgba(24,24,30,.5);border-radius:50px;font-family:var(--font-display);
  font-weight:400;font-size:17px;line-height:22px;letter-spacing:normal;color:#27272d;
  text-decoration:none;transition:background .15s ease,color .15s ease,border-color .15s ease;}
/* Card 1 (470:451) is drawn in the filled state: #2ca9e3 with white text. */
.pj-card .pj-view:hover{background:#2ca9e3;border-color:#2ca9e3;color:#fff;}

/* ---- pagination, srcoll 470:546 -------------------------------------- */
/* Previous 470:547 x713, Numbers 470:553 x799.94, Next 470:550 x1141.72, all
   57.962x58 r29; the row spans 713..1199.682 and is 3.66 left of the page
   centre, as drawn. The page numbers are one overflowing text node in Figma
   (x823.94, 291 wide, ending 1114.94), so per-digit x cannot be read off the
   design: the five items after the current pill tile that 257.038 evenly. */
.proj-pagination{display:flex;align-items:center;margin:146px 0 0 513px;width:486.682px;
  max-width:100%;padding:0;justify-content:flex-start;}
.proj-pagination .page-numbers-list{display:flex;align-items:center;gap:0;list-style:none;
  padding:0;margin:0;width:100%;}
.proj-pagination .page-numbers-list > li{display:flex;align-items:center;margin:0;padding:0;}
.proj-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;
  width:51.4076px;height:58px;box-sizing:border-box;background:transparent;border:0;border-radius:0;
  font-family:var(--font-display);font-weight:300;font-size:20px;line-height:23px;
  letter-spacing:normal;color:#636363;text-decoration:none;}
.proj-pagination a.page-numbers:hover{color:#27272d;}
.proj-pagination .page-numbers.prev,
.proj-pagination .page-numbers.next,
.proj-pagination .page-numbers.current{width:57.962px;height:58px;border-radius:29px;}
/* Button - Previous 470:547 is drawn as ONE frame carrying opacity 50%, so the
   #18181e hairline AND the arrow glyph inside it are both half strength. The
   earlier rule half-toned only the border and left the glyph at full #18181E,
   a state the frame never draws. Page 1's Previous is the inert span the
   template prints, which is exactly what the frame draws; a real Previous link
   on page 2 and up is the same button at full strength. */
.proj-pagination .page-numbers.prev{border:1px solid #18181e;background:transparent;color:#18181e;}
.proj-pagination span.page-numbers.prev{opacity:.5;}
.proj-pagination .page-numbers.current{background:#2ca9e3;border:1px solid rgba(0,0,0,0);
  font-weight:500;color:#fff;}
.proj-pagination .page-numbers.next{background:#002b54;border:1px solid rgba(0,0,0,0);color:#fff;}
.proj-pagination .page-numbers-list > li:last-child{margin-left:auto;}
/* Previous 470:547 ends at 770.962 and Numbers 470:553 opens at 799.94: a
   28.978 gap. Anchored positionally so it holds on any page, not just page 1. */
.proj-pagination .page-numbers-list > li:first-child + li > .page-numbers{margin-left:28.978px;}
/* SVG 470:548 / 470:551: the same 14x12 glyph already exported into the theme
   as proj-prev.svg (#18181E) and proj-next.svg (white). */
.proj-pagination .page-numbers.prev .ico,
.proj-pagination .page-numbers.next .ico{display:block;width:14px;height:12px;}
.proj-pagination .page-numbers.prev .ico{background:url('/wp-content/themes/evoheat/assets/proj-prev.svg') no-repeat center/100% 100%;}
.proj-pagination .page-numbers.next .ico{background:url('/wp-content/themes/evoheat/assets/proj-next.svg') no-repeat center/100% 100%;}


/* =========================================================
   SINGLE  /projects/<slug>/  - frame 474:646
   ========================================================= */

/* ---- hero, Header-Banner 474:647 ------------------------------------- */
/* Same 1920x600 header 474:648, but its overlay is rgba(0,0,0,0.2) and the
   separate Overlay node 474:649 is hidden. */
.ps-hero{position:relative;height:600px;overflow:hidden;color:#fff;background:#002b54;}
.ps-hero .bg{position:absolute;inset:0;z-index:0;}
.ps-hero .bg img{width:100%;height:100%;object-fit:cover;display:block;}
.ps-hero .bg .ov{position:absolute;inset:0;background:rgba(0,0,0,.2);}
.ps-hero .container{position:relative;z-index:2;padding-top:300px;}
.ps-hero .eyebrow{margin-left:-3px;font-family:var(--font-display);font-weight:400;
  font-size:20px;line-height:25px;letter-spacing:normal;color:#fff;margin-bottom:2px;
  width:max-content;max-width:100%;}
.ps-hero h1{margin-left:-3px;font-family:var(--font-display);font-weight:700;font-size:75px;
  line-height:89px;letter-spacing:-1.5px;color:#fff;width:max-content;max-width:100%;
  padding-right:1.5px;}

@media(min-width:1201px){
  .ps-hero + .quotebar{margin-top:-33px;}
}

/* ---- category pills, tabs 474:661 ----------------------------------- */
/* Six pills at y809, 50 tall, r100, a flat 35 gap, row 243..1656. Widths are
   the drawn widths (150/240/150/204/178/316) and each pill's own left inset
   is the drawn one, because Figma does not centre the labels consistently. */
.ps-cats{padding:122px 0 0;}
.ps-cats .container{max-width:1520px;}
.ps-catrow{display:flex;flex-wrap:wrap;gap:35px;justify-content:flex-start;margin-left:43px;
  width:1413px;max-width:100%;}
.ps-cat{height:50px;padding:0;display:inline-flex;align-items:center;justify-content:flex-start;
  border-radius:100px;border:2px solid #b7b7b7;background:transparent;color:#b7b7b7;
  font-family:var(--font-display);font-weight:400;font-size:24px;line-height:30px;
  letter-spacing:-0.72px;text-decoration:none;box-sizing:border-box;
  transition:border-color .15s ease,color .15s ease;}
.ps-catrow .ps-cat:nth-child(1){width:150px;padding-left:27px;}
.ps-catrow .ps-cat:nth-child(2){width:240px;padding-left:27px;}
.ps-catrow .ps-cat:nth-child(3){width:150px;padding-left:27px;}
.ps-catrow .ps-cat:nth-child(4){width:204px;padding-left:21px;}
.ps-catrow .ps-cat:nth-child(5){width:178px;padding-left:22px;}
.ps-catrow .ps-cat:nth-child(6){width:316px;padding-left:22px;}
.ps-cat:hover{border-color:#002b54;color:#002b54;}
/* 474:663: the selected pill is solid #002b54 with a Bold white label and no
   border, so its label keeps the same x with 2px more padding. */
.ps-cat.on{background:#002b54;border-color:#002b54;color:#fff;font-weight:700;border-width:0;}
.ps-catrow .ps-cat.on:nth-child(1),
.ps-catrow .ps-cat.on:nth-child(3){padding-left:29px;}
/* 474:663 is the one pill the frame actually draws selected, and its label sits
   27 in, not the 29 the outline pills either side of it use. Drawn value. */
.ps-catrow .ps-cat.on:nth-child(2){padding-left:27px;}
.ps-catrow .ps-cat.on:nth-child(4){padding-left:23px;}
.ps-catrow .ps-cat.on:nth-child(5),
.ps-catrow .ps-cat.on:nth-child(6){padding-left:24px;}

/* ---- intro, Intro 474:680 ------------------------------------------- */
/* h2 474:681 y984 1348 wide, centred on 964 (4px right of the page centre);
   p 474:682 y1120 1089 wide, centred on 959.5. Both as drawn. */
.ps-intro{padding:125px 0 126px;text-align:center;}
.ps-intro .container{max-width:1520px;}
.ps-intro h2{font-family:var(--font-display);font-weight:700;font-size:40px;line-height:48px;
  letter-spacing:-1.2px;color:#27272d;width:1348px;max-width:100%;margin:0 0 40px 90px;}
.ps-intro p{font-family:var(--font-display);font-weight:300;font-size:20px;line-height:26px;
  letter-spacing:normal;color:#27272d;width:1089px;max-width:100%;margin:0 0 0 215px;}

/* ---- case study panel, Rectangle 4 474:660 -------------------------- */
/* Full-bleed 1920x1742 at y1324, #f4f4f4, r28. The old build drew a 1720
   inset panel in #f6f7f8 with r26; all three were wrong. */
.ps-case{padding:0;}
.ps-case .wrap{max-width:none;margin:0;padding:0;}
.ps-case .panel{background:#f4f4f4;border-radius:28px;padding:157px 0 171px;margin:0;}
/* video 474:686 x200 y1481 739x455 r20; the prose column starts at x1029 and
   is 654 wide, so 739 + 90 + 654 = 1483 from x200. */
.ps-video{display:grid;grid-template-columns:739px 654px;column-gap:90px;align-items:start;
  width:1483px;max-width:100%;margin:0 auto 0 200px;}
.ps-embed{position:relative;aspect-ratio:auto;width:739px;height:455px;max-width:100%;
  border-radius:20px;overflow:hidden;background:#1a1c1f;}
.ps-embed iframe{width:100%;height:100%;border:0;display:block;}
.ps-embed .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:96px;height:68px;
  border-radius:16px;background:#ff0000;display:flex;align-items:center;justify-content:center;}
.ps-embed .play::after{content:"";width:0;height:0;border-left:24px solid #fff;
  border-top:15px solid transparent;border-bottom:15px solid transparent;margin-left:5px;}
/* The right column starts 44 below the video top. Its first block carries the
   drawn lead type (474:685: 32 Medium / 37) and the rest the drawn body type
   (474:684: 20 Light / 26, 26 apart, which is the blank line Figma uses). */
.ps-vtext{padding-top:44px;width:654px;max-width:100%;}
.ps-case .panel > .ps-vtext{width:654px;margin:0 auto 0 1029px;}
.ps-vtext > :first-child{margin-top:0;}
.ps-vtext p{font-family:var(--font-display);font-weight:300;font-size:20px;line-height:26px;
  letter-spacing:normal;color:#27272d;margin:26px 0 0;}
/* 474:685's box is hand-set to 115 where its own three lines at its own drawn
   37 leading measure 111, and the body under it opens on the frame's own 1663.
   min-height reproduces the drawn box exactly for this lead and still lets a
   longer lead on any of the other 78 projects push the body down instead of
   clipping it. */
.ps-vtext > p:first-child{font-weight:500;font-size:32px;line-height:37px;width:650px;max-width:100%;
  min-height:115px;margin:0;}
.ps-vtext > p:first-child + p{margin-top:23px;}
.ps-vtext h2,.ps-vtext h3{font-family:var(--font-display);font-weight:500;font-size:32px;
  line-height:37px;letter-spacing:normal;color:#27272d;margin:26px 0 0;}
.ps-vtext ul{list-style:disc;margin:26px 0 0;padding-left:24px;}
.ps-vtext li{font-family:var(--font-display);font-weight:300;font-size:20px;line-height:26px;color:#27272d;margin:0;}
/* mid band: lead 474:693 y2093 1172 wide centred on 960, body 474:692 y2188
   1115 wide centred on 931.5, both starting at x374. The zone opens 157 below
   the video row, the same gap the panel opens with. */
.ps-mid{text-align:center;padding:157px 0 0;}
/* 474:693's box is hand-set to 69 where its own two lines at its own drawn 37
   leading measure 74, and 474:692 opens on the frame's own 2188: 26 under the
   drawn box, which is 21 under the last line the box actually holds. The 21 is
   what reproduces the drawn body position, and unlike a fixed 69 height it
   cannot collide with a longer lead on another project. */
.ps-mid h2{font-family:var(--font-display);font-weight:500;font-size:32px;line-height:37px;
  letter-spacing:normal;color:#27272d;width:1172px;max-width:100%;margin:0 0 21px 374px;}
.ps-mid p{font-family:var(--font-display);font-weight:300;font-size:20px;line-height:26px;
  letter-spacing:normal;color:#27272d;width:1115px;max-width:100%;margin:0 0 0 374px;}
.ps-mid p + p{margin-top:26px;}
/* gallery 474:687: two 739.727x476 shots at x200 and x980.27, r20, 127 below
   the mid body. Its arrows are NOT level in the design: Previous 474:694 sits
   at y2604 and Next 474:697 at y2628, which is the shots' own centre line. */
.ps-gal{position:relative;padding:127px 0 0;width:1519.997px;max-width:100%;margin:0 auto 0 200px;}
.ps-galrow{display:grid;grid-template-columns:repeat(2,739.727px);column-gap:40.543px;}
.ps-galrow .shot{display:block;height:476px;border-radius:20px;overflow:hidden;background:#002b54;}
.ps-galrow .shot img{width:100%;height:100%;object-fit:cover;display:block;}
.ps-arr{position:absolute;width:57.962px;height:58px;border-radius:29px;
  display:inline-flex;align-items:center;justify-content:center;font-size:0;text-decoration:none;
  box-sizing:border-box;transform:none;}
.ps-arr .ico{display:block;width:14px;height:12px;}
/* Previous 474:694 carries opacity 50% on the whole button, border and glyph
   alike, the same way 470:547 does. Next 474:697 is full strength. */
.ps-arr.prev{left:-81px;top:312px;border:1px solid #18181e;background:transparent;opacity:.5;}
.ps-arr.next{right:-80.965px;top:336px;background:#002b54;border:1px solid rgba(0,0,0,0);}
.ps-arr.prev .ico{background:url('/wp-content/themes/evoheat/assets/proj-prev.svg') no-repeat center/100% 100%;}
.ps-arr.next .ico{background:url('/wp-content/themes/evoheat/assets/proj-next.svg') no-repeat center/100% 100%;}

/* ---- explore more, Projects 474:700 --------------------------------- */
/* h2 474:728 y3211 492 wide, centred on 957 (3px left of the page centre);
   cards at x199 / 718 / 1239, 481x570, r40; a 39 column gap reproduces all
   three inside 1px. Arrows 474:729 / 474:732 sit 38 clear of the row, level
   with its centre. */
.ps-explore{padding:145px 0 145px;}
.ps-explore .container{max-width:1520px;position:relative;}
.ps-explore h2{position:relative;left:-3px;text-align:center;font-family:var(--font-display);
  font-weight:700;font-size:50px;line-height:67px;letter-spacing:-1px;color:#27272d;
  width:max-content;max-width:100%;margin:0 auto 59px;padding-right:1px;}
.ps-exprow{display:grid;grid-template-columns:repeat(3,481px);column-gap:38.75px;
  margin-left:-1px;width:1520.5px;max-width:none;}
.ps-excard{position:relative;height:570px;border-radius:40px;overflow:hidden;
  background:#002b54;display:block;text-decoration:none;}
.ps-excard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
/* Background 474:710: a 480-wide scrim, transparent to 50% then rgba(0,0,0,.8),
   the whole layer at 70% opacity. */
.ps-excard .sh{position:absolute;left:0;top:0;width:480px;height:570px;border-radius:40px;
  background:linear-gradient(180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.8) 100%);opacity:.7;}
/* Card 1's scrim 474:703 is drawn at 60%, cards 2 and 3 (474:710 / 474:720) at
   70%. Drawn per card, so reproduced per card. */
.ps-exprow > .ps-excard:nth-child(1) .sh{opacity:.6;}
/* Title 40 Medium / 50, tracking -1.6, white, in the drawn 330 box (474:721,
   the only one of the three the designer left wrapping; 474:704 and 474:711 are
   single-line hugs of their own sample titles).
   The three titles are hand-placed and do not agree: 474:704 sits 53 in from
   its card with 60 clear of the bottom, 474:711 43 in with 60 clear and
   474:721 48 in with 50 clear. Drawn per card, so reproduced per card, the
   same way the six category pills keep their own drawn insets. The base rule
   below is the median 48 / 60, which is what a fourth card would get. */
.ps-excard h3{position:absolute;left:48px;bottom:60px;right:auto;z-index:2;color:#fff;
  font-family:var(--font-display);font-weight:500;font-size:40px;line-height:50px;
  letter-spacing:-1.6px;width:330px;max-width:calc(100% - 96px);margin:0;}
/* Scoped to the artboard width: these outrank the mobile block on specificity,
   so below 1201 they must not apply at all. */
@media(min-width:1201px){
  .ps-exprow > .ps-excard:nth-child(1) h3{left:53px;bottom:60px;}
  .ps-exprow > .ps-excard:nth-child(2) h3{left:43px;bottom:60px;}
  .ps-exprow > .ps-excard:nth-child(3) h3{left:48px;bottom:50px;}
}
.ps-exarr{position:absolute;top:50%;transform:translateY(-50%);width:58px;height:58px;
  border-radius:29px;display:inline-flex;align-items:center;justify-content:center;
  font-size:0;text-decoration:none;z-index:3;box-sizing:border-box;}
.ps-exarr .ico{display:block;width:14px;height:12px;}
/* Previous 474:729 carries opacity 50% on the whole button, border and glyph
   alike. Both carousels' arrows are inert decoration in the frame and in the
   build, so there is no active state this could mislabel. */
.ps-exarr.prev{left:-97px;border:1px solid #18181e;background:transparent;opacity:.5;}
.ps-exarr.next{right:-96px;background:#002b54;border:1px solid rgba(0,0,0,0);}
.ps-exarr.prev .ico{background:url('/wp-content/themes/evoheat/assets/proj-prev.svg') no-repeat center/100% 100%;}
.ps-exarr.next .ico{background:url('/wp-content/themes/evoheat/assets/proj-next.svg') no-repeat center/100% 100%;}
/* Both arrows are level with the CARD ROW's centre, not the container's:
   h2 box 67 + its 59 margin puts the row 126 below the container top, and the
   row is 570 tall, so 126 + 285. */
.ps-explore .container > .ps-exarr{top:411px;}


/* =========================================================
   Below the 1920 artboard. Figma has no mobile frame for either page, so the
   fixed pixel rules above are released here exactly as site.css does, and the
   layout goes fluid. No horizontal scroll at 375.
   ========================================================= */
@media(max-width:1200px){
  .pj-hero,.ps-hero{height:auto;min-height:520px;}
  .pj-hero .container,.ps-hero .container{padding-top:330px;}
  .pj-hero .eyebrow,.pj-hero h1,.ps-hero .eyebrow,.ps-hero h1{margin-left:0;width:auto;padding-right:0;}
  .pj-hero h1,.ps-hero h1{font-size:52px;line-height:60px;letter-spacing:-1px;}

  .pj-intro{padding:70px 0 40px;}
  .pj-intro h2{font-size:34px;line-height:40px;width:auto;}
  .pj-intro p{width:auto;}

  .pj-filter{padding:0 0 48px;}
  .pj-filter .flabel{width:auto;padding-right:0;}
  .pj-filter .frow{flex-wrap:wrap;gap:18px;margin-left:0;width:auto;}
  .pj-filter .fsel{flex:1 1 100%;width:auto;}
  .pj-filter .fsearch{flex:1 1 100%;}

  .pj-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;row-gap:34px;
    margin-left:0;width:auto;}
  .pj-card{height:auto;}
  .pj-card .pj-thumb{flex:0 0 auto;height:230px;}
  .pj-card .pj-body{padding:34px 28px 34px 28px;margin-top:-16px;}
  .pj-card h3{font-size:22px;line-height:28px;width:auto;}
  .pj-card p{width:auto;margin-top:20px;}
  .pj-card .pj-view{margin:24px 0 0;}

  .proj-pagination{margin:48px 0 0;width:auto;justify-content:center;}
  .proj-pagination .page-numbers-list{flex-wrap:wrap;justify-content:center;gap:10px;width:auto;}
  .proj-pagination .page-numbers{width:auto;min-width:28px;height:44px;}
  .proj-pagination .page-numbers.prev,
  .proj-pagination .page-numbers.next,
  .proj-pagination .page-numbers.current{width:44px;height:44px;border-radius:22px;}
  .proj-pagination .page-numbers.current{margin-left:0;}
  .proj-pagination .page-numbers.next{margin-left:0;}

  .ps-cats{padding:60px 0 0;}
  .ps-catrow{gap:14px;margin-left:0;justify-content:center;}
  .ps-cat,.ps-catrow .ps-cat:nth-child(1),.ps-catrow .ps-cat:nth-child(2),
  .ps-catrow .ps-cat:nth-child(3),.ps-catrow .ps-cat:nth-child(4),
  .ps-catrow .ps-cat:nth-child(5),.ps-catrow .ps-cat:nth-child(6){width:auto;height:44px;
    padding:0 20px;font-size:17px;line-height:22px;justify-content:center;}

  .ps-intro{padding:60px 0 60px;}
  .ps-intro h2{font-size:28px;line-height:34px;width:auto;margin:0 0 24px;}
  .ps-intro p{width:auto;margin:0;}

  .ps-case .panel{border-radius:28px;padding:60px 0;}
  .ps-video{grid-template-columns:minmax(0,1fr);column-gap:0;row-gap:34px;width:auto;margin:0;
    padding:0 24px;}
  .ps-embed{width:auto;height:auto;aspect-ratio:739/455;}
  .ps-vtext,.ps-case .panel > .ps-vtext{width:auto;max-width:none;padding-top:0;margin:0;}
  .ps-vtext > p:first-child{width:auto;font-size:24px;line-height:30px;min-height:0;}

  .ps-mid{padding:48px 24px 0;}
  .ps-mid h2{width:auto;margin:0 0 20px;font-size:24px;line-height:30px;}
  .ps-mid p{width:auto;margin:0;}

  .ps-gal{padding:48px 24px 0;width:auto;margin:0;}
  .ps-galrow{grid-template-columns:minmax(0,1fr);column-gap:0;row-gap:24px;}
  .ps-galrow .shot{height:260px;}
  .ps-arr{display:none;}

  .ps-explore{padding:70px 0 70px;}
  .ps-explore h2{left:0;font-size:30px;line-height:38px;width:auto;margin:0 auto 34px;}
  .ps-exprow{grid-template-columns:minmax(0,1fr);column-gap:0;row-gap:24px;margin-left:0;width:auto;max-width:100%;}
  .ps-excard{height:290px;border-radius:24px;}
  .ps-excard .sh{width:100%;height:100%;border-radius:24px;}
  .ps-excard h3{left:28px;bottom:26px;font-size:26px;line-height:32px;width:auto;
    max-width:calc(100% - 56px);}
  .ps-explore .container > .ps-exarr{top:50%;}
  .ps-exarr{display:none;}
}

@media(max-width:768px){
  .pj-hero h1,.ps-hero h1{font-size:38px;line-height:44px;}
  .pj-intro h2{font-size:26px;line-height:32px;}
  .pj-grid{grid-template-columns:minmax(0,1fr);}
  .ps-intro h2{font-size:24px;line-height:30px;}
  .ps-explore h2{font-size:26px;line-height:32px;}
}