/* ===================================================================
   Travis Bell Portfolio — built to match Figma "Portfolio - FINAL"
   Desktop breakpoint (>=1200px) first pass. Tablet/mobile canvases
   will be appended once their design specs are extracted.
   =================================================================== */

:root{
  --bg-primary:#0e1236;
  --panel-navy:#1a2253;
  --orange:#f60;
  --green:#35ff83;
  --blue:#7eaee9;
  --white:#fff;
  --dark-navy:#0e1236;
}

*{box-sizing:border-box;margin:0;padding:0;}
html,body{background:var(--bg-primary);color:var(--white);}
body{font-family:'Jost',sans-serif;overflow-x:hidden;}
a{text-decoration:none;color:inherit;}
button{font-family:inherit;border:none;background:none;padding:0;}
img{display:block;max-width:none;}

.jost-xb{font-weight:800;}
.jost-b{font-weight:700;}
.text-green{color:var(--green);}
.text-orange{color:var(--orange);}
.italic-xb{font-style:italic;font-weight:800;}
.italic-normal{font-style:italic;}

/* Placeholder styling for images not yet supplied */
.placeholder-img{
  background:repeating-linear-gradient(45deg,#3a3f6b,#3a3f6b 10px,#2a2f57 10px,#2a2f57 20px);
  display:flex;align-items:center;justify-content:center;text-align:center;
  color:#ffd9b3;font-size:13px;font-weight:700;padding:8px;
  border:1px dashed #f60;
}
.placeholder-img::after{content:attr(data-missing);}
.placeholder-img--small{font-size:9px;}

/* =============== DESKTOP CANVAS =============== */
.canvas-desktop{
  position:relative;z-index:1;
  width:1440px;
  min-height:8303.53px;
  margin:0 auto;
  overflow:hidden;
  background:transparent;   /* fixed line art shows through from behind */
}

/* ---- NAV ---- */
.nav-desktop{
  position:sticky;top:0;left:0;right:0;
  height:72px;
  backdrop-filter:blur(15px);
  -webkit-backdrop-filter:blur(15px);
  background:rgba(126,174,233,0.14);
  z-index:1000;
}
.nav-logo{position:absolute;left:80px;top:24px;width:286px;font-size:20px;line-height:1.2;white-space:nowrap;}
.nav-logo-orange{color:var(--orange);font-weight:700;}
.nav-links{position:absolute;left:0;top:0;width:1440px;height:72px;}
.nav-link{position:absolute;top:21.5px;height:29px;display:block;cursor:pointer;}
.nav-link[data-target="work"]   {left:1012px;width:42px;}
.nav-link[data-target="about"]  {left:1102px;width:46px;}
.nav-link[data-target="resume"] {left:1196px;width:59px;}
.nav-link[data-target="contact"]{left:1303px;width:57px;}
.nav-link-label{display:block;font-size:16px;font-weight:700;color:var(--white);line-height:23px;text-align:center;transition:color .15s ease;}
.nav-underline{position:absolute;left:0;top:27px;height:2px;width:100%;background:transparent;transition:background .15s ease;}
.nav-link[data-target="work"] .nav-link-label{color:var(--orange);}
.nav-link[data-target="work"] .nav-underline{background:var(--orange);}
.nav-link:hover .nav-link-label{color:var(--orange);}
.nav-link:hover .nav-underline{background:var(--orange);}
.nav-link:active .nav-link-label{color:var(--green);}
.nav-link:active .nav-underline{background:var(--green);}

/* ---- Hero background line-art (placeholder until asset supplied) ---- */
/* Viewport-pinned line art: stays put while the page scrolls over it.
   Option A (default): art at natural aspect, full canvas width, anchored top.
   Option B (body.lines-fit): whole route scaled to fit the viewport height. */
.bg-lineart{position:fixed;top:0;left:50%;transform:translateX(-50%);
  width:1496.25px;height:100vh;z-index:0;overflow:hidden;pointer-events:none;}
/* Figma: "Background / Route Lines" sits at y 785.63, width 1496.25 — not at the top of the page */
/* Vertical offset picks which stretch of the route sits in the viewport.
   -2000px = the mid-route crossing Travis asked for. Change this one number
   to reframe; the picker sheet in the handoff shows the alternatives. */
.bg-lineart img{position:absolute;left:0;top:-2000px;width:1496.25px;height:auto;opacity:1;}
body.lines-fit .bg-lineart img{left:50%;top:0;transform:translateX(-50%);width:auto;height:100vh;}
/* Figma: "Background / Decorative Anchor" — #0e1236 rect, LAYER_BLUR 82.5, softens the lines behind the hero */
.bg-anchor{position:absolute;left:670px;top:635px;width:303px;height:229px;background:var(--bg-primary);
  filter:blur(82.5px);z-index:0;pointer-events:none;}

.howdy{
  position:absolute;left:96px;right:96px;top:93px;
  font-family:'Racing Sans One',cursive;font-weight:400;
  font-size:327px;line-height:0.9;color:var(--white);
  text-shadow:10px 12px 0px var(--orange);
  z-index:1;
}

/* floating tilted case snapshots */
.float-card{position:absolute;display:flex;align-items:center;justify-content:center;z-index:1;}
.float-card-inner{border-radius:15.594px;overflow:hidden;border:0.975px solid var(--blue);box-shadow:18.274px 32.894px 22.66px 0px rgba(0,0,0,0.39);}
.float-card-inner img{width:100%;height:100%;object-fit:cover;}
.float-tapup{left:1090.14px;top:733.03px;width:321.772px;height:428.938px;}
.float-tapup .float-card-inner{transform:rotate(13.95deg);width:236.346px;height:383.264px;}
.float-pennzoil{left:823.14px;top:1029.03px;width:314.59px;height:210.169px;}
.float-pennzoil .float-card-inner{transform:rotate(-2deg);width:307.813px;height:199.548px;}
.float-mylife360{left:813px;top:511px;width:425.486px;height:499.155px;}
.float-mylife360 .float-card-inner{transform:rotate(7.16deg);width:371.499px;height:456.413px;}
.float-presentations{left:992.53px;top:1217.03px;width:290.474px;height:158.509px;}
.float-presentations .float-card-inner{transform:rotate(1deg);width:287.839px;height:153.509px;}

/* ---- Hero content ---- */
.hero-stack{position:absolute;left:96px;top:458px;width:938px;display:flex;flex-direction:column;gap:111px;z-index:1;}
.hero-text-block{display:flex;flex-direction:column;gap:33px;}
.hero-kicker{font-weight:700;font-size:44px;line-height:1.2;color:var(--green);width:766px;text-shadow:3px 13px 6.5px rgba(0,0,0,1);}
.hero-headline{font-weight:900;font-size:100px;line-height:1.05;color:var(--white);text-shadow:3px 4px 4.5px rgba(0,0,0,.96);}
.hero-sub{font-weight:800;font-size:29px;line-height:1.5;color:var(--blue);width:620px;text-shadow:4px 11px 13.1px rgba(0,0,0,1);}
.hero-sub-green{color:var(--green);}
.hero-buttons{display:flex;gap:44px;}

.btn-see-work{
  background:var(--orange);height:91.348px;width:317.643px;border-radius:22px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .15s ease;
}
.btn-see-work span{font-family:'Racing Sans One',cursive;font-size:33.22px;color:var(--white);transition:color .15s ease;}
.btn-see-work:hover{background:var(--blue);}
.btn-see-work:hover span{color:var(--dark-navy);}
.btn-see-work:active{background:var(--green);}
.btn-see-work:active span{color:var(--dark-navy);}

.btn-download-resume{
  display:flex;align-items:center;justify-content:center;
  background:rgba(126,174,233,0.13);border:2.409px solid var(--blue);
  height:89.921px;width:298.662px;border-radius:532.8px;cursor:pointer;
  transition:background .15s ease,border-color .15s ease;
}
.btn-download-resume span{font-family:'Racing Sans One',cursive;font-size:24.84px;color:var(--orange);text-transform:uppercase;transition:color .15s ease;}
/* Hero resume button: hover fills with the brand green at 40% opacity.
   Label goes white for legibility on that fill; shape and border unchanged. */
.btn-download-resume:hover{background:rgba(53,255,131,0.4);}
.btn-download-resume:hover span{color:var(--white);}
.btn-download-resume:active{background:var(--orange);border-color:var(--orange);}
.btn-download-resume:active span{color:var(--white);}

/* ---- Shared panel styles ---- */
.panel{position:absolute;left:4px;width:1440px;overflow:hidden;}
.panel-eyebrow{font-weight:700;font-size:44px;color:var(--orange);}
.panel-eyebrow-green{font-weight:700;font-size:44px;color:var(--green);}
.panel-eyebrow-orange{font-weight:700;font-size:44px;color:var(--orange);position:absolute;}
.panel-h2{font-weight:700;font-size:76px;line-height:1.08;color:var(--white);}
.panel-sub{font-weight:500;font-size:30px;color:var(--blue);}

/* Proof */
.panel-proof{top:1564.64px;height:298px;backdrop-filter:blur(5.75px);-webkit-backdrop-filter:blur(5.75px);background:rgba(126,174,233,0.14);box-shadow:0 33.75px 15px 0 rgba(0,0,0,0.25);}
.panel-proof .panel-eyebrow{position:absolute;left:81px;top:45px;width:782px;line-height:1.25;}
.proof-copy{position:absolute;left:80.63px;top:105px;width:1280px;font-weight:500;font-size:29px;line-height:1.43;color:var(--blue);}

/* Selected Work */
.panel-selected-work{top:2010.64px;height:1780px;backdrop-filter:blur(5.75px);-webkit-backdrop-filter:blur(5.75px);background:rgba(126,174,233,0.14);box-shadow:0 33.75px 15px 0 rgba(0,0,0,0.3);}
.panel-selected-work .panel-eyebrow-green{position:absolute;left:80px;top:85.63px;width:1204px;}
.panel-selected-work .panel-h2{position:absolute;left:88.13px;top:151.88px;width:1278px;}
.panel-selected-work .panel-sub{position:absolute;left:81px;top:248.63px;width:1090px;}

/* Work grid — exact Figma coords (section 511:265). Cards absolutely placed;
   Figma's two rows are not flush-left with each other, so each card is pinned. */
.work-grid{position:absolute;left:0;top:0;width:1440px;height:1780px;}
.work-card{
  position:absolute;display:block;background:var(--panel-navy);
  border-radius:18px;
  width:608px;height:610px;overflow:hidden;cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease;
}
/* Stroke lives on a pseudo-element ABOVE the thumbnail. An inset box-shadow on
   .work-card itself paints on the card's own background layer, which puts it
   behind .work-card-img - the stroke vanished along the top edge and corners. */
.work-card::after{
  content:"";position:absolute;inset:0;border-radius:18px;
  box-shadow:inset 0 0 0 1px var(--blue);
  pointer-events:none;z-index:5;transition:box-shadow .18s ease;
}
.work-card:hover::after,.work-card:focus-visible::after{
  box-shadow:inset 0 0 0 2.55px var(--orange);
}
.work-card:nth-child(1){left:87.31px;top:376px;}
.work-card:nth-child(2){left:745.94px;top:376px;}
.work-card:nth-child(3){left:80px;top:1074px;}
.work-card:nth-child(4){left:742.5px;top:1074px;}
.work-card:hover{transform:scale(1.02);box-shadow:0 12px 32px rgba(0,0,0,.35);}

.work-card-img{position:absolute;left:0;top:0;width:608px;height:312px;overflow:hidden;}
.work-card-img img{width:100%;height:100%;object-fit:cover;object-position:center;}
/* Figma scaleMode CROP — imageTransform reproduced as exact scaled size + offset */
.work-card-img--pz img{position:absolute;object-fit:fill;width:610.694px;height:377.52px;left:-1.347px;top:-32.616px;}
.work-card-img--tapup img{position:absolute;object-fit:fill;width:614.64px;height:936px;left:-3.32px;top:-73.06px;}

.work-card-body{position:absolute;left:0;top:0;width:608px;height:610px;pointer-events:none;}
.work-card-tag  {position:absolute;left:28px;top:336px;width:552px;font-weight:700;font-size:19.5px;line-height:1.25;letter-spacing:1.95px;color:var(--green);}
.work-card-title{position:absolute;left:28px;top:372.38px;width:552px;font-weight:700;font-size:35.494px;line-height:1.15;color:var(--white);}
.work-card-desc {position:absolute;left:28px;top:425.63px;width:552px;font-weight:500;font-size:19.744px;line-height:1.45;color:var(--blue);}
.work-card-cta  {position:absolute;left:27.06px;top:523.13px;width:552px;font-weight:900;font-size:27px;line-height:1.59;color:var(--orange);}
/* Shell Presentations title runs to two lines in Figma; that card reflows below it */
.work-card:nth-child(4) .work-card-title{top:363px;}
.work-card:nth-child(4) .work-card-desc {top:460.75px;}
.work-card:nth-child(3) .work-card-cta,
.work-card:nth-child(4) .work-card-cta  {top:524.5px;}

/* Range + Personality */
.panel-range{top:3938.64px;height:832.875px;background:#eef1f7;box-shadow:0 33.75px 7.5px 0 rgba(0,0,0,0.3);}
.range-bg-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.range-bg-img{transform:rotate(-90deg);width:1188.75px;height:1440px;object-fit:cover;opacity:1;}
.panel-range .panel-eyebrow-orange{left:78.75px;top:54.38px;width:500px;}
.panel-h2-dark{position:absolute;left:78.75px;top:116.25px;width:1278px;font-weight:700;font-size:76px;line-height:1.08;color:var(--dark-navy);}
.panel-sub-dark{position:absolute;left:80.63px;top:283.5px;width:900px;font-weight:500;font-size:30px;line-height:1.43;color:#2d3b63;}
.range-tiles{position:absolute;left:0;top:402.25px;width:1440px;height:350px;filter:drop-shadow(11.25px 11.25px 16.219px rgba(0,0,0,0.19));}
.range-tile{position:absolute;top:0;background:var(--white);width:306px;height:350px;border-radius:16px;box-shadow:0 12px 28px 0 rgba(14,18,54,0.14);overflow:hidden;transition:transform .25s ease,box-shadow .25s ease;transform-origin:center;}
.range-tile-img{position:absolute;left:14px;top:14px;width:278px;height:260px;border-radius:10px;overflow:hidden;}
.range-tile-img img{width:100%;height:100%;object-fit:contain;transform-origin:center;}
/* Travis override: hover scales the WHOLE card (image + title + subtitle), not just the photo */
.range-tile:nth-child(1){left:80.63px;}
.range-tile:nth-child(2){left:403.13px;}
.range-tile:nth-child(3){left:727.5px;}
.range-tile:nth-child(4){left:1051.88px;}
/* Travis override: hover scales the WHOLE card, not just the photo */
.range-tile:hover{transform:scale(1.06);box-shadow:0 20px 40px 0 rgba(14,18,54,0.28);z-index:2;}
.range-tile-title{position:absolute;left:0;right:0;top:284.38px;text-align:center;font-weight:900;font-size:22.5px;line-height:1.3;color:var(--dark-navy);}
.range-tile-sub{position:absolute;left:0;right:0;top:314.38px;text-align:center;font-weight:700;font-size:16.875px;line-height:1.3;color:var(--orange);}
.range-tile-img img.holiday-overlay{position:absolute;left:178px;top:113.75px;width:106.875px;height:101.25px;object-fit:contain;transform:none;}

/* Off the Clock */
.panel-offclock{left:-9px;width:1447.5px;top:4919.52px;height:767.63px;backdrop-filter:blur(5.75px);-webkit-backdrop-filter:blur(5.75px);background:rgba(126,174,233,0.14);box-shadow:0 33.75px 15px 0 rgba(0,0,0,0.3);}
.offclock-script{position:absolute;left:88.13px;top:39.38px;width:1170px;font-family:'Grape Nuts',cursive;font-weight:400;font-size:81.619px;line-height:1.1;color:var(--orange);}
.offclock-cards{position:absolute;left:0;top:0;width:1447.5px;height:767.63px;}
.offclock-card{position:absolute;top:155.63px;background:rgba(126,174,233,0.2);box-shadow:inset 0 0 0 1px var(--blue);border-radius:18px;width:628px;height:270px;overflow:hidden;}
.offclock-card:nth-child(1){left:99px;}
.offclock-card:nth-child(2){left:751px;}
.offclock-card-img{position:absolute;left:18px;top:18px;width:230px;height:234px;border-radius:12px;overflow:hidden;}
.offclock-card-img img{width:100%;height:100%;object-fit:cover;}
/* Figma scaleMode CROP on the 3D Design photo — exact imageTransform */
.offclock-card:nth-child(2) .offclock-card-img img{position:absolute;object-fit:fill;width:323.797px;height:575.64px;left:-56.327px;top:-133.16px;}
.offclock-card-copy{position:absolute;left:261px;top:0;width:332px;}
.offclock-card-title{position:absolute;top:18px;width:332px;font-weight:900;font-size:24px;line-height:1.15;color:var(--green);}
.offclock-card-text{position:absolute;top:58px;width:332px;font-weight:400;font-size:22.5px;line-height:1.45;color:var(--white);}
.offclock-card:nth-child(2) .offclock-card-text{font-weight:500;}
/* Figma: this italic run is blue (#7eaee9), not white */
.offclock-card-text .italic-normal{font-style:italic;font-weight:400;color:var(--blue);}

/* Testimonials */
.panel-testimonials{top:5835.15px;height:767.875px;backdrop-filter:blur(5.75px);-webkit-backdrop-filter:blur(5.75px);background:rgba(126,174,233,0.14);box-shadow:0 33.75px 15px 0 rgba(0,0,0,0.3);}
.panel-testimonials .panel-eyebrow-green{position:absolute;left:81px;top:62.13px;width:1279px;}
.panel-testimonials .panel-h2{position:absolute;left:80.63px;top:116.25px;width:1278px;}
.testimonial-cards{position:absolute;left:0;top:0;width:1440px;height:767.88px;}
.testimonial-card{position:absolute;top:251.88px;width:410px;height:420px;border-radius:18px;overflow:hidden;}
.testimonial-card:nth-child(1){left:80px;}
.testimonial-card:nth-child(2){left:514px;}
.testimonial-card:nth-child(3){left:948px;}
.testimonial-card--blue  {background:rgba(126,174,233,0.2);box-shadow:inset 0 0 0 1px var(--blue);}
.testimonial-card--orange{background:rgba(255,102,0,0.2);box-shadow:inset 0 0 0 1px var(--orange);}
.testimonial-card--green {background:rgba(53,255,131,0.2);box-shadow:inset 0 0 0 1px var(--green);}
.testimonial-quote{position:absolute;left:28px;top:30px;width:354px;font-weight:400;font-size:22.5px;line-height:1.55;color:var(--white);}
.testimonial-attr {position:absolute;left:28px;top:260px;width:354px;font-weight:700;font-size:22.5px;line-height:1.3;}
.testimonial-card:nth-child(2) .testimonial-attr{top:259.37px;}
.testimonial-attr span{font-weight:800;display:block;}
.testimonial-attr--blue{color:var(--blue);}
.testimonial-attr--orange{color:var(--orange);}
.testimonial-attr--green{color:var(--green);}

/* Capabilities */
.panel-capabilities{top:6751.03px;height:750.25px;backdrop-filter:blur(5.75px);-webkit-backdrop-filter:blur(5.75px);background:rgba(126,174,233,0.12);box-shadow:0 33.75px 15px 0 rgba(0,0,0,0.3);}
.panel-capabilities .panel-eyebrow-green{position:absolute;left:80.63px;top:58.13px;white-space:nowrap;}
.panel-capabilities .panel-h2{position:absolute;left:80.63px;top:112.5px;width:1278px;}
.capabilities-card{position:absolute;left:81px;top:250.25px;width:1280.625px;height:433.125px;background:var(--panel-navy);box-shadow:inset 0 0 0 1px rgba(126,174,233,0.6);border-radius:24px;}
/* Exact Figma coords from node 512:315 children. Row pitch 84.375px. */
/* Four rows (matching the mobile capability set) re-spaced inside the card's
   original Figma height, so nothing below this panel moves. Values wrap to two
   lines; the label column is bounded so long labels wrap instead of colliding. */
.cap-row{position:absolute;left:0;right:0;height:75px;display:flex;align-items:center;}
.cap-row .cap-label{position:absolute;left:45px;top:50%;transform:translateY(-50%);
  width:250px;font-weight:700;font-size:30px;line-height:1.15;}
.cap-row .cap-value{position:absolute;left:313.125px;top:50%;transform:translateY(-50%);
  width:922.5px;font-weight:800;font-size:22.5px;line-height:1.32;color:var(--white);}
.cap-row:nth-child(1){top:13.125px;}
.cap-row:nth-child(3){top:123.75px;}
.cap-row:nth-child(5){top:234.375px;}
.cap-row:nth-child(7){top:345px;}
.cap-label--orange{color:var(--orange);}
.cap-label--green{color:var(--green);}
.cap-label--blue{color:var(--blue);}
.cap-divider{position:absolute;left:48.75px;width:1183.125px;height:1.875px;background:rgba(126,174,233,0.22);border-radius:1px;margin:0;}
.cap-divider:nth-child(2){top:105.94px;}
.cap-divider:nth-child(4){top:216.56px;}
.cap-divider:nth-child(6){top:327.19px;}

/* Contact */
.panel-contact{top:7649.28px;height:585px;backdrop-filter:blur(5.75px);-webkit-backdrop-filter:blur(5.75px);background:rgba(126,174,233,0.14);box-shadow:0 33.75px 15px 0 rgba(0,0,0,0.3);}
.panel-contact .panel-eyebrow-green{position:absolute;left:88.13px;top:43.13px;width:700px;}
.contact-card{position:absolute;left:80.63px;top:112.5px;width:1280.63px;height:420px;background:var(--panel-navy);box-shadow:inset 0 0 0 1px var(--blue);border-radius:24px;overflow:hidden;}
.contact-pitch{position:absolute;left:0;top:0;width:823px;height:420px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding-left:43.12px;box-sizing:border-box;}
.contact-h2    {position:static;width:750px;margin:0;font-weight:700;font-size:67px;line-height:1.08;color:var(--white);}
.contact-sub   {position:static;width:670px;margin:16px 0 0;font-weight:500;font-size:30px;line-height:1.43;color:var(--blue);}
.btn-connect,.btn-download-resume-solid{
  position:absolute;left:823.12px;width:395.63px;height:90px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
.btn-connect{top:103.13px;background:var(--green);}
.btn-connect span{font-family:'Racing Sans One',cursive;font-size:35.625px;color:var(--dark-navy);transition:color .15s ease;}
.btn-connect:hover{background:var(--orange);}
.btn-connect:hover span{color:var(--white);}
.btn-connect:active{background:var(--orange);}
.btn-connect:active span{color:var(--white);}
.btn-download-resume-solid{top:243.75px;background:var(--orange);}
.btn-download-resume-solid span{font-family:'Racing Sans One',cursive;font-size:35.625px;color:var(--white);transition:color .15s ease;}
.btn-download-resume-solid:hover{background:var(--blue);}
.btn-download-resume-solid:hover span{color:var(--dark-navy);}
.btn-download-resume-solid:active{background:var(--green);}
.btn-download-resume-solid:active span{color:var(--dark-navy);}

/* Footer */
.footer-desktop{position:absolute;left:86px;top:8247.28px;width:1280px;height:54px;font-weight:500;overflow:hidden;}
.footer-copy{position:absolute;left:0;top:12px;width:400px;color:var(--blue);font-size:22.5px;line-height:1.3;}
.footer-feedback{position:absolute;left:763.13px;top:15px;color:var(--orange);font-size:16.875px;line-height:1.3;text-align:right;width:517.5px;}


/* --- semantic heading resets: keep Figma metrics after <p> -> <h1>/<h2>/<h3> --- */
h1.hero-headline,h2.panel-h2,h2.panel-h2-dark,h3.work-card-title{
  margin:0;padding:0;
}
.sr-only-skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:#35ff83;color:#0e1236;padding:10px 18px;border-radius:6px;
  font-weight:700;font-size:16px;
}
.sr-only-skip:focus{left:16px;top:16px}
/* main.js moves focus to the skip-link target and marks it tabindex="-1".
   These elements are never reachable by Tab, so the ring is noise, not feedback. */
[tabindex="-1"]:focus{outline:none}

/* ===== Full recommendation overlays (CSS-only, no JavaScript) ===== */
.review-modal{position:fixed;left:0;right:0;top:0;bottom:0;z-index:900;
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s ease,visibility .2s ease}
.review-modal:target{opacity:1;visibility:visible;pointer-events:auto}
.review-backdrop{position:absolute;left:0;right:0;top:0;bottom:0;background:rgba(6,9,26,.84)}
.review-panel{position:relative;background:#1a2253;overflow-y:auto;-webkit-overflow-scrolling:touch}
.review-modal--blue   .review-panel{box-shadow:inset 0 0 0 1px #7eaee9,0 30px 70px rgba(0,0,0,.55)}
.review-modal--orange .review-panel{box-shadow:inset 0 0 0 1px #f60,0 30px 70px rgba(0,0,0,.55)}
.review-modal--green  .review-panel{box-shadow:inset 0 0 0 1px #35ff83,0 30px 70px rgba(0,0,0,.55)}
.review-close{position:absolute;display:flex;align-items:center;justify-content:center;
  line-height:1;color:#7eaee9;border-radius:50%;font-weight:400}
.review-close:hover{background:rgba(126,174,233,.18)}
.review-name{font-weight:800;color:#fff;line-height:1.2}
.review-role{font-weight:600;line-height:1.35;margin-top:3px}
.review-modal--blue   .review-role{color:#7eaee9}
.review-modal--orange .review-role{color:#f60}
.review-modal--green  .review-role{color:#35ff83}
.review-source{font-weight:500;color:rgba(255,255,255,.5);margin-top:5px}
.review-body p{font-weight:400;color:#fff}
.review-body p+p{margin-top:.85em}
.review-more{position:absolute;left:28px;bottom:28px;font-weight:700;font-size:19px;line-height:1;
  letter-spacing:.02em;border-bottom:2px solid currentColor;padding-bottom:3px;transition:opacity .15s ease}
.review-more:hover{opacity:.6}
.review-more--blue{color:#7eaee9}
.review-more--orange{color:#f60}
.review-more--green{color:#35ff83}
.review-modal{padding:40px 24px}
.review-panel{width:760px;max-width:100%;max-height:86vh;border-radius:20px;padding:42px 48px 46px}
.review-close{right:18px;top:14px;width:42px;height:42px;font-size:32px}
.review-name{font-size:27px}
.review-role{font-size:17px}
.review-source{font-size:14px}
.review-body{margin-top:22px}
.review-body p{font-size:18.5px;line-height:1.6}


/* =====================================================================
   GAME CARD — "Résumé Shredder"  (desktop, third child of .offclock-cards)
   Pure CSS animation, no JS. Sits below the two off-clock project cards.
   panel-relative: left 99, top 457.63, 1280 x 250
   ===================================================================== */
.gamecard{
  position:absolute;left:99px;top:457.63px;width:1280px;height:250px;
  display:block;border-radius:18px;isolation:isolate;
  background:linear-gradient(112deg,#131a45 0%,#1e2864 52%,#0f1540 100%);
  box-shadow:inset 0 0 0 1px var(--blue), 0 18px 40px rgba(0,0,0,0.35);
  transition:transform .3s ease, box-shadow .3s ease;
}
.gamecard:hover,.gamecard:focus-visible{
  transform:translateY(-5px);
  box-shadow:inset 0 0 0 1.5px var(--green), 0 28px 56px rgba(0,0,0,0.45);
  outline:none;
}

/* screen texture */
.gc-scan{
  position:absolute;inset:0;pointer-events:none;z-index:6;border-radius:18px;overflow:hidden;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,0.16) 0 1px,transparent 1px 3px);
}

/* copy */
.gc-kicker{position:absolute;left:56px;top:30px;font-weight:900;font-size:19px;
  letter-spacing:.24em;color:var(--green);animation:gcBlink 2.4s steps(1,end) infinite;}
@keyframes gcBlink{0%,72%{opacity:1}76%,84%{opacity:.25}88%,100%{opacity:1}}
.gc-h3{position:absolute;left:52px;top:52px;width:660px;
  font-family:'Racing Sans One','Arial Black','Jost',sans-serif;font-weight:400;font-size:72px;
  line-height:.94;color:var(--orange);text-shadow:0 4px 0 #8c2b00,0 8px 0 rgba(0,0,0,.35);}
.gc-p{position:absolute;left:56px;top:126px;width:690px;font-weight:700;font-size:19.5px;
  line-height:1.36;color:var(--blue);}
.gc-p b{color:var(--white);font-weight:700;}
.gc-play{position:absolute;left:56px;top:226px;height:48px;z-index:8;padding:0 32px;
  display:flex;align-items:center;gap:12px;border-radius:999px;
  font-family:'Racing Sans One','Jost',sans-serif;font-size:22px;letter-spacing:.04em;
  color:#2b1000;background:linear-gradient(180deg,#ffa049,var(--orange));
  box-shadow:0 4px 0 #a34100;transition:transform .22s ease,box-shadow .22s ease;
  animation:gcAttract 2.8s ease-in-out infinite;}
@keyframes gcAttract{
  0%,62%,100%{box-shadow:0 4px 0 #a34100, 0 0 0 0 rgba(255,160,73,0)}
  74%{box-shadow:0 4px 0 #a34100, 0 0 0 7px rgba(255,160,73,.22)}
  86%{box-shadow:0 4px 0 #a34100, 0 0 0 13px rgba(255,160,73,0)}
}
.gamecard:hover .gc-play{transform:translateY(-2px);box-shadow:0 6px 0 #a34100;animation:none;}
.gc-play span{font-family:'Jost',sans-serif;font-weight:900;font-size:19px;}

/* animated stage on the right */
.gc-stage{position:absolute;right:28px;top:0;width:500px;height:250px;overflow:hidden;}
.gc-sheet{position:absolute;top:0;width:52px;height:68px;border-radius:5px;
  background:linear-gradient(#9aa7c9 0 5px,#e9edf7 5px);
  box-shadow:0 4px 12px rgba(0,0,0,0.45);
  transform-origin:50% 100%;
  animation:gcFall 3.4s linear infinite;}
.gc-sheet::after{content:"";position:absolute;left:7px;right:7px;top:12px;height:2px;
  border-radius:2px;background:#0e1236;opacity:.22;
  box-shadow:0 8px 0 rgba(14,18,54,.22),0 16px 0 rgba(14,18,54,.22),0 24px 0 rgba(14,18,54,.22);}
.gc-sheet.is-scam{background:#1d2b12;border:1.5px solid #b6ff3d;}
.gc-sheet.is-scam::after{background:#b6ff3d;box-shadow:0 8px 0 #b6ff3d,0 16px 0 #b6ff3d;opacity:.5;}
.gc-sheet.is-gold{background:linear-gradient(160deg,#fff6d8,#ffd97a);
  border:2px solid #ffc844;}
.gc-sheet.is-gold::after{background:#5a3d00;opacity:.3;}

.gc-sheet:nth-child(1){left:104px;--r:-7deg; animation-delay:0s}
.gc-sheet:nth-child(2){left:174px;--r:5deg;  animation-delay:-.62s}
.gc-sheet:nth-child(3){left:244px;--r:-3deg; animation-delay:-1.25s}
.gc-sheet:nth-child(4){left:314px;--r:8deg;  animation-delay:-1.88s}
.gc-sheet:nth-child(5){left:384px;--r:-5deg; animation-delay:-2.5s}
.gc-sheet:nth-child(6){left:209px;--r:4deg;  animation-delay:-3.05s}

@keyframes gcFall{
  0%   {transform:translateY(-84px) rotate(var(--r)) scaleY(1);opacity:0}
  9%   {opacity:1}
  74%  {transform:translateY(140px) rotate(var(--r)) scaleY(1);opacity:1}
  86%  {transform:translateY(160px) rotate(var(--r)) scaleY(.12);opacity:.55}
  100% {transform:translateY(160px) rotate(var(--r)) scaleY(0);opacity:0}
}

/* the shredder it all falls into */
.gc-shredder{position:absolute;left:88px;right:76px;bottom:22px;height:60px;}
.gc-mouth{position:absolute;left:0;right:0;top:0;height:13px;border-radius:5px 5px 0 0;
  background:#05070f;overflow:hidden;
  box-shadow:inset 0 -4px 8px rgba(0,0,0,.9), 0 0 18px rgba(53,255,131,0.45);}
.gc-mouth::after{content:"";position:absolute;inset:0;opacity:.7;
  background:repeating-linear-gradient(90deg,var(--green) 0 4px,transparent 4px 11px);}
.gc-base{position:absolute;left:0;right:0;top:13px;height:47px;border-radius:0 0 11px 11px;
  background:linear-gradient(180deg,#3a4a8f,#232c63 45%,#141a44);
  box-shadow:inset 0 0 0 2px rgba(126,174,233,0.55);
  display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:14px;letter-spacing:.2em;color:var(--blue);}

@media (prefers-reduced-motion:reduce){
  .gc-sheet{animation:none;transform:translateY(60px) rotate(var(--r));opacity:1}
  .gamecard,.gc-play{transition:none}
  .gc-kicker,.gc-play{animation:none}
}