/* ==========================================================================
   Jayco Digital Redesign design system (jc.css)
   Dark editorial look. Archivo Black display + Hanken Grotesk body.
   Green = actions only. Teal (CREATE) / Pink (GROW) / Orange (REACH) accents.
   Rebuilt from the design handoff as production HTML/CSS (no prototype runtime).
   ========================================================================== */

/* ---------- Fonts (self-hosted) ---------- */
/* Archivo Black - latin-ext */
@font-face { font-family:'Archivo Black'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/archivo-black-ext.woff2?v=2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
/* Archivo Black - latin */
@font-face { font-family:'Archivo Black'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/archivo-black.woff2?v=2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Hanken Grotesk'; font-style:normal; font-weight:300 800; font-display:swap; src:url('/assets/fonts/hanken-grotesk.woff2') format('woff2'); }

/* ---------- Tokens ---------- */
:root{
  --jc-bg:#0a0a0a;
  --jc-panel:#0d0d0d;
  --jc-card:#242424;
  --jc-card-dark:#141414;
  --jc-line:rgba(255,255,255,0.14);
  --jc-line-2:rgba(255,255,255,0.08);
  --jc-text:#EDEDED;
  --jc-head:#f5f5f5;
  --jc-muted:#6f6f6f;
  --jc-muted-2:#b4b4b4;

  --jc-green:#98E176;
  --jc-green-d:#84D35B;
  --jc-teal:#8CCBBE;   /* CREATE */
  --jc-pink:#DFA9B2;   /* GROW   */
  --jc-orange:#E3B896; /* REACH + all star ratings */

  /* light surfaces (reviews / offer sections) */
  --jc-light:#ffffff;
  --jc-light-2:#F7F7F7;
  --jc-light-card:#f6f6f6;
  --jc-light-line:rgba(0,0,0,0.08);
  --jc-light-dash:rgba(0,0,0,0.16);
  --jc-ink:#0a0a0a;
  --jc-ink-muted:#555;

  --jc-display:'Archivo Black',sans-serif;
  --jc-body:'Hanken Grotesk',sans-serif;

  --jc-maxw:1400px;
  --jc-ease:cubic-bezier(.65,0,.35,1);
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:clip;width:100%;}
body.jc{
  margin:0;background:var(--jc-bg);color:var(--jc-head);
  font-family:var(--jc-body);font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.jc a{text-decoration:none;}
:where(body.jc a){color:var(--jc-green);}
:where(body.jc a:hover){color:var(--jc-green-d);}
img{max-width:100%;}

/* ---------- Typography helpers ---------- */
.jc-display{font-family:var(--jc-display);text-transform:uppercase;letter-spacing:-0.02em;line-height:0.94;}
.body-sm{font-family:var(--jc-body);font-weight:400;font-size:14px;line-height:1.55;color:var(--jc-text);}
.body-md{font-family:var(--jc-body);font-weight:400;font-size:17px;line-height:1.6;color:var(--jc-text);}
.body-lg{font-family:var(--jc-body);font-weight:400;font-size:20px;line-height:1.6;color:var(--jc-text);}
.jc-eyebrow{font-size:12px;font-weight:800;letter-spacing:0.18em;text-transform:uppercase;}

.jc-h1{font-family:var(--jc-display);text-transform:uppercase;font-size:clamp(40px,4.6vw,78px);line-height:0.94;letter-spacing:-0.02em;margin:0 0 26px;color:var(--jc-head);}
.jc-h2{font-family:var(--jc-display);text-transform:uppercase;font-size:clamp(36px,4.4vw,72px);line-height:0.96;letter-spacing:-0.02em;margin:0;color:var(--jc-head);}

/* ---------- Layout ---------- */
.jc-wrap{max-width:var(--jc-maxw);margin:0 auto;padding-left:40px;padding-right:40px;}
.sec-x{padding-top:120px;padding-bottom:90px;}
.sec-tight{padding-top:34px;padding-bottom:30px;}

/* ---------- Buttons ---------- */
.jc-btn{position:relative;display:inline-flex;border-radius:999px;overflow:hidden;font-family:var(--jc-display);font-weight:400;text-transform:uppercase;cursor:pointer;text-decoration:none;white-space:nowrap;font-size:14px;letter-spacing:0.02em;}
.jc-btn__row{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:16px 34px;transition:transform .5s var(--jc-ease);}
.jc-btn__row--b{position:absolute;top:100%;left:0;}
.jc-btn:hover .jc-btn__row{transform:translateY(-100%);}
.jc-btn__row svg{transition:transform .5s var(--jc-ease);flex:none;}
.jc-btn:hover .jc-btn__row svg{transform:translateX(4px);}
.jc-btn--green{background:var(--jc-green);color:var(--jc-ink);}
.jc-btn--green:hover{color:var(--jc-ink);}
.jc-btn--outline{background:transparent;color:var(--jc-head);border:1.5px solid var(--jc-green);transition:background .4s ease,color .4s ease;}
.on-light .jc-btn--outline{color:var(--jc-ink);}
.jc-btn--outline:hover{background:var(--jc-green);color:var(--jc-ink);}
.jc-btn--sm .jc-btn__row{padding:12px 24px;font-size:13px;}
.jc-btn--on-light.jc-btn--outline{color:var(--jc-ink);}
/* Brand green solid button that keeps dark text (WhatsApp etc.) */
.jc-btn--wa{background:var(--jc-green);color:var(--jc-ink);}
.jc-btn--wa:hover{background:var(--jc-green-d);color:var(--jc-ink);}

/* ---------- Header (pill nav) ---------- */
.jc-header{position:sticky;top:18px;z-index:60;padding:0 24px;transition:transform .35s var(--jc-ease);}
.jc-header--hidden{transform:translateY(calc(-100% - 30px));}
.jc-header__inner{max-width:var(--jc-maxw);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px;
  background:rgba(32,32,32,0.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--jc-line-2);border-radius:100px;padding:12px 14px 12px 30px;}
.jc-logo{display:flex;align-items:center;}
.jc-logo img{height:30px;width:auto;display:block;}
.hdr-nav{display:flex;align-items:center;gap:30px;}
.hdr-nav a{color:var(--jc-head);font-family:var(--jc-display);font-weight:400;font-size:14px;letter-spacing:0.04em;text-transform:uppercase;white-space:nowrap;transition:color .2s ease;}
.hdr-nav a:hover{color:var(--jc-green);}
.hdr-nav .has-sub{position:relative;}
/* down caret next to Services */
.hdr-caret{display:inline-block;margin-left:5px;vertical-align:-1px;transition:transform .28s ease;}
.hdr-nav .has-sub:hover .hdr-caret,.hdr-nav .has-sub:focus-within .hdr-caret{transform:rotate(180deg);}
/* mega dropdown for Services: anchored to the left of the Services link so it opens
   rightward into the viewport, and capped to the screen width so it never overflows */
.hdr-sub{position:absolute;top:calc(100% + 20px);left:0;transform:translateY(8px);
  background:rgba(20,20,20,0.96);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--jc-line);border-radius:22px;padding:26px;width:640px;max-width:calc(100vw - 40px);
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s ease,transform .28s ease;box-shadow:0 30px 60px rgba(0,0,0,0.5);}
/* invisible bridge so the mouse can cross the gap into the dropdown without losing hover */
.hdr-sub::before{content:"";position:absolute;left:0;right:0;top:-24px;height:24px;}
.hdr-nav .has-sub:hover .hdr-sub,.hdr-nav .has-sub:focus-within .hdr-sub{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);}
.hdr-sub__col h4{font-family:var(--jc-display);text-transform:uppercase;font-size:15px;margin:0 0 14px;letter-spacing:0;}
.hdr-sub__col--create h4{color:var(--jc-teal);}
.hdr-sub__col--grow h4{color:var(--jc-pink);}
.hdr-sub__col--reach h4{color:var(--jc-orange);}
.hdr-sub__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
.hdr-sub__col a{color:var(--jc-text);font-family:var(--jc-body);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:0.03em;}
.hdr-sub__col a:hover{color:var(--jc-head);}
/* mobile menu toggle */
.jc-burger{display:none;background:transparent;border:0;cursor:pointer;padding:10px;color:var(--jc-head);}
.jc-burger svg{display:block;}

/* Mobile full-screen menu */
.jc-menu{position:fixed;inset:0;z-index:70;background:rgba(10,10,10,0.98);backdrop-filter:blur(8px);
  display:flex;flex-direction:column;padding:26px 26px 40px;transform:translateY(-100%);transition:transform .45s var(--jc-ease);overflow-y:auto;}
.jc-menu.open{transform:translateY(0);}
.jc-menu__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:36px;}
.jc-menu__links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;}
.jc-menu__links>li>a,.jc-menu__acc-btn{display:flex;align-items:center;justify-content:space-between;width:100%;
  font-family:var(--jc-display);text-transform:uppercase;font-size:26px;color:var(--jc-head);
  background:transparent;border:0;padding:14px 0;cursor:pointer;letter-spacing:-0.01em;text-align:left;}
.jc-menu__acc-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--jc-ease);}
.jc-menu__acc-panel>div{overflow:hidden;}
.jc-menu__acc.open .jc-menu__acc-panel{grid-template-rows:1fr;}
.jc-menu__acc-btn svg{transition:transform .35s ease;}
.jc-menu__acc.open .jc-menu__acc-btn svg{transform:rotate(45deg);}
.jc-menu__sub{list-style:none;margin:0 0 10px;padding:6px 0 6px 4px;display:flex;flex-direction:column;gap:12px;}
.jc-menu__sub a{color:var(--jc-text);font-family:var(--jc-body);font-weight:700;font-size:17px;text-transform:uppercase;letter-spacing:0.03em;}
.jc-menu__sub .fam{font-family:var(--jc-display);text-transform:uppercase;font-size:12px;letter-spacing:0.14em;display:block;margin:8px 0 2px;}
.jc-menu__sub .fam--create{color:var(--jc-teal);}
.jc-menu__sub .fam--grow{color:var(--jc-pink);}
.jc-menu__sub .fam--reach{color:var(--jc-orange);}

/* ---------- Tags ---------- */
.jc-tag{--jc-tilt:-2deg;display:inline-block;font-family:var(--jc-display);text-transform:uppercase;line-height:1;white-space:nowrap;
  transform:rotate(var(--jc-tilt));animation:jc-tag .6s cubic-bezier(.34,1.56,.64,1) both;}
.jc-tag--trust{font-size:14px;letter-spacing:0.02em;background:transparent;border:2px solid var(--jc-orange);color:var(--jc-orange);padding:8px 16px;border-radius:10px;}
.jc-tag--fam{--jc-tilt:-3deg;font-size:clamp(30px,2.7vw,44px);background:transparent;border:2.5px solid currentColor;padding:8px 18px;border-radius:12px;}
.jc-tag--create{color:var(--jc-teal);}
.jc-tag--grow{color:var(--jc-pink);}
.jc-tag--reach{color:var(--jc-orange);}
/* service-page hero tag: solid pastel, dark text */
.jc-tag--hero{font-size:14px;letter-spacing:0.02em;color:var(--jc-ink);padding:9px 18px;border-radius:10px;}

/* ---------- Brush underline ---------- */
.jc-brush{position:relative;white-space:nowrap;display:inline-block;}
.jc-brush svg{position:absolute;left:-3%;bottom:-0.2em;width:106%;height:0.42em;overflow:visible;pointer-events:none;}
.jc-brush path{clip-path:inset(0 100% 0 0);animation:jc-draw .7s steps(10,end) forwards;}

/* ---------- Google rating row ---------- */
.jc-rating{display:inline-flex;align-items:center;gap:14px;}
.jc-stars{color:var(--jc-orange);letter-spacing:2px;}

/* ---------- Cards / project cards ---------- */
.jc-card{display:flex;flex-direction:column;text-decoration:none;transition:opacity .4s ease,transform .4s ease;}
.jc-card:hover{opacity:0.94;transform:translateY(-6px);}
.jc-card__img{aspect-ratio:1/1;overflow:hidden;border-radius:20px;background:var(--jc-panel);}
.jc-card__img img{width:100%;height:100%;object-fit:cover;display:block;}
.jc-card__cat{display:inline-block;margin-top:24px;font-size:12px;font-weight:800;letter-spacing:0.12em;text-transform:uppercase;color:var(--jc-teal);}
.jc-card h3{font-family:var(--jc-display);text-transform:uppercase;font-size:26px;line-height:1;margin:14px 0;color:var(--jc-head);}
.jc-card p{margin:0 0 18px;color:var(--jc-text);font-size:16px;line-height:1.55;}
.jc-view{margin-top:auto;display:inline-flex;align-items:center;gap:8px;color:var(--jc-green);font-family:var(--jc-body);font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:0.1em;}
.jc-view svg{transition:transform .35s var(--jc-ease);}
.jc-card:hover .jc-view svg{transform:translateX(5px);}

/* ---------- Services (CREATE/GROW/REACH) ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:60px;align-items:start;}
.svc-col>p{color:var(--jc-text);font-size:16px;line-height:1.6;margin:34px 0 30px;max-width:34ch;}
.svc-list{list-style:none;margin:0;padding:0;}
.svc-list li{border-top:1px dashed var(--jc-line);}
.svc-link{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;color:var(--jc-head);font-family:var(--jc-display);text-transform:uppercase;font-size:15px;transition:color .25s ease;}
.svc-link svg{flex:none;transition:transform .25s ease;}
.svc-link:hover svg{transform:translateX(5px);}
.svc-link--teal svg{color:var(--jc-teal);}   .svc-link--teal:hover{color:var(--jc-teal);}
.svc-link--pink svg{color:var(--jc-pink);}   .svc-link--pink:hover{color:var(--jc-pink);}
.svc-link--orange svg{color:var(--jc-orange);}.svc-link--orange:hover{color:var(--jc-orange);}

/* ---------- Marquees ---------- */
.jc-marq-mask{overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);}
.jc-marq{display:flex;gap:80px;align-items:center;width:max-content;animation:jc-marq 32s linear infinite;padding:0 40px;}
.jc-marq img{height:40px;width:auto;object-fit:contain;filter:brightness(0) invert(1);opacity:0.6;}

/* hero screenshot columns */
.hero-visual{position:relative;height:640px;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 9%,#000 91%,transparent);}
.hero-visual__cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;height:100%;}
.hero-visual__col{display:flex;flex-direction:column;gap:18px;}
.hero-visual__col--up{animation:jc-up 40s linear infinite;}
.hero-visual__col--down{margin-top:-56px;animation:jc-down 40s linear infinite;}
.hero-visual img{width:100%;display:block;border-radius:14px;border:1px solid var(--jc-line-2);box-shadow:0 20px 40px rgba(0,0,0,0.45);}

/* ---------- Diff / benefits ---------- */
.diff-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:36px;text-align:center;align-items:start;}
.diff-item{display:flex;flex-direction:column;align-items:center;gap:16px;}
.diff-item+.diff-item{border-left:1px dashed var(--jc-line);padding-left:32px;}
.diff-item h3{font-family:var(--jc-display);text-transform:uppercase;font-size:19px;margin:0;}
.diff-item p{color:var(--jc-text);font-size:15px;line-height:1.55;margin:0;}
.jc-icon{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:var(--jc-ink);flex:none;}
.jc-icon--teal{background:var(--jc-teal);}
.jc-icon--pink{background:var(--jc-pink);}
.jc-icon--orange{background:var(--jc-orange);}
.jc-icon--green{background:var(--jc-green);}

/* ---------- Reviews (light) ---------- */
.jc-light-sec{background:var(--jc-light-2);}
.reviews-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:26px;}
.review-card{margin:0;background:#fff;border:1px solid var(--jc-light-line);border-radius:22px;padding:34px;display:flex;flex-direction:column;gap:22px;box-shadow:0 6px 20px rgba(0,0,0,0.06);}
.review-card .stars{color:var(--jc-orange);font-size:18px;letter-spacing:3px;}
.review-card blockquote{margin:0;color:#333;font-size:16px;line-height:1.6;}
.review-card figcaption{display:flex;align-items:center;gap:14px;margin-top:auto;font-size:15px;color:var(--jc-ink);font-weight:700;}
.review-card figcaption span span{color:#777;font-weight:500;}

/* ---------- Featured reviews (homepage) ---------- */
.rv-head{text-align:center;max-width:820px;margin:0 auto 56px;}
.rv-head .body-lg{margin:0 auto;}
.rv-top{display:grid;grid-template-columns:1.35fr 1fr;gap:24px;align-items:stretch;margin-bottom:24px;}
.rv-side{display:grid;grid-template-rows:auto 1fr;gap:24px;}
.rv-stars{color:var(--jc-orange);font-size:22px;letter-spacing:3px;line-height:1;}
.rv-stars.sm{font-size:16px;}
/* Featured dark card */
.rv-feature{position:relative;margin:0;background:#0d0d0d;color:#fff;border-radius:26px;padding:46px;display:flex;flex-direction:column;overflow:hidden;}
.rv-feature .rv-quote{position:absolute;top:6px;right:34px;font-family:Georgia,'Times New Roman',serif;font-size:150px;line-height:1;color:rgba(155,217,131,0.16);pointer-events:none;}
.rv-feature blockquote{position:relative;margin:22px 0 32px;font-size:clamp(21px,1.9vw,30px);line-height:1.34;font-weight:500;color:#f5f5f5;}
.rv-by{margin-top:auto;padding-top:28px;display:flex;align-items:center;gap:16px;border-top:1px solid rgba(255,255,255,0.12);}
.rv-avatar{flex:none;width:52px;height:52px;border-radius:50%;background:var(--jc-green);color:#0a0a0a;display:flex;align-items:center;justify-content:center;font-family:var(--jc-display);font-size:16px;overflow:hidden;}
.rv-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;}
.rv-by__meta{display:flex;flex-direction:column;gap:3px;}
.rv-by__meta strong{color:#fff;font-size:17px;font-weight:700;}
.rv-by__meta span{color:#9a9a9a;font-size:14px;font-weight:400;}
/* Orange rating box */
.rv-rating{background:var(--jc-orange);color:#0a0a0a;border-radius:26px;padding:28px 34px;display:flex;align-items:center;gap:22px;}
.rv-rating__num{font-family:var(--jc-display);font-size:clamp(46px,5vw,66px);line-height:0.86;color:#0a0a0a;}
.rv-rating__stars{color:#0a0a0a;font-size:18px;letter-spacing:2px;}
.rv-rating__label{font-weight:800;font-size:14px;color:var(--jc-ink);margin-top:5px;}
/* White review cards */
.rv-card{margin:0;background:#fff;border:1px solid rgba(0,0,0,0.1);border-radius:22px;padding:30px;display:flex;flex-direction:column;gap:16px;box-shadow:0 6px 20px rgba(0,0,0,0.05);}
.rv-card blockquote{margin:0;color:#333;font-size:16px;line-height:1.6;}
.rv-card figcaption{margin-top:auto;display:flex;flex-direction:row;align-items:center;gap:13px;font-size:15px;}
.rv-card figcaption .rv-card__meta{display:flex;flex-direction:column;gap:2px;}
.rv-card figcaption strong{color:#0a0a0a;font-weight:700;}
.rv-card figcaption .rv-card__meta span{color:#777;font-weight:500;}

/* ---------- Review avatars (initials circle or photo/logo) ---------- */
.rv-ava{flex:none;width:48px;height:48px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--jc-display);font-size:15px;line-height:1;color:#0a0a0a;overflow:hidden;text-transform:uppercase;}
.rv-ava img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;}
.rv-ava--c1{background:#98E176;}
.rv-ava--c2{background:#8CCBBE;}
.rv-ava--c3{background:#DFA9B2;}
.rv-ava--c4{background:#E3B896;}
.rv-ava--c5{background:#B8A6E8;}
.rv-ava--c6{background:#8FC3E8;}
.rv-ava--c7{background:#F0A98C;}
.rv-ava--c8{background:#8BD3AE;}
/* 4-up row */
.rv-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
/* Single featured review + CTA (service pages) */
.rv-single{max-width:760px;margin:0 auto;}
.rv-single .rv-feature{margin:0;transform:rotate(-1.5deg);transform-origin:center;transition:opacity .8s ease,transform .9s cubic-bezier(.16,1,.3,1);}
/* entrance: fade + slide up, settling into the resting tilt (matches the stat card / quote banner) */
[data-reveal-sec].rs .rv-single .rv-feature{opacity:0;transform:translateY(38px) rotate(-4.5deg);}
[data-reveal-sec].in .rv-single .rv-feature{opacity:1;transform:rotate(-1.5deg);}
@media (prefers-reduced-motion:reduce){ .rv-single .rv-feature{transform:rotate(-1.5deg)!important;opacity:1!important;} }
.rv-single__cta{display:flex;justify-content:center;margin-top:38px;}
/* Reviews page */
.reviews-hero{max-width:820px;margin:0 auto 64px;text-align:center;}
.reviews-hero .jc-rating{margin-top:26px;}
.reviews-hero .jc-stars{font-size:22px;}
@media (max-width:1024px){
  .rv-top{grid-template-columns:1fr;}
  .rv-side{grid-template-rows:none;}
  .rv-grid4{grid-template-columns:1fr 1fr;}
}
@media (max-width:640px){
  .rv-feature{padding:34px 26px;}
  .rv-feature .rv-quote{font-size:110px;top:2px;right:24px;}
  .rv-rating{flex-wrap:wrap;gap:14px;padding:24px 26px;}
  .rv-grid4{grid-template-columns:1fr;}
}

/* ---------- Work heads ---------- */
.work-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:52px;}
.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 30px;}

/* ---------- Footer ---------- */
.jc-footer{background:var(--jc-panel);border-top:1px solid var(--jc-line-2);margin-top:40px;}
.jc-footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:50px;}
.jc-footer__grid h2{font-family:var(--jc-display);text-transform:uppercase;font-size:clamp(48px,6vw,104px);line-height:0.9;letter-spacing:-0.02em;margin:0 0 30px;}
.jc-footer h3{font-size:12px;font-weight:800;letter-spacing:0.18em;text-transform:uppercase;color:var(--jc-orange);margin:0 0 24px;}
.jc-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;}
.jc-footer__grid a:not(.jc-btn){color:var(--jc-text);font-family:var(--jc-display);font-size:15px;text-transform:uppercase;text-decoration:underline;text-underline-offset:4px;}
.jc-footer__grid a:not(.jc-btn):hover{color:var(--jc-green);}
.jc-footer__badges{display:flex;flex-direction:column;align-items:flex-start;gap:22px;}
/* Row 1: Google + Meta, smaller, side by side */
.jc-footer__badges-top{display:flex;align-items:center;gap:26px;flex-wrap:wrap;}
.jc-footer__badges-top img{height:42px;width:auto;object-fit:contain;}
/* Google Partner ships on a white background; sit it on a matching white chip so it reads on the dark footer */
.jc-footer__badges-top img[alt="Google Partner"]{background:#fff;padding:7px 11px;border-radius:8px;height:34px;box-sizing:content-box;}
/* Row 2: Upwork badge, on its own line, a little bigger */
.jc-footer__badges .badge-upwork{height:90px;width:auto;object-fit:contain;}
.jc-footer__bar{border-top:1px solid var(--jc-line-2);margin-top:56px;padding-top:26px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;}
.jc-footer__bar p{color:var(--jc-muted);font-size:14px;margin:0;}
.jc-footer__bar div{display:flex;flex-wrap:wrap;gap:22px;}
.jc-footer__bar a{color:var(--jc-muted);font-size:14px;font-family:var(--jc-body);text-transform:none;text-decoration:none;}
.jc-footer__bar a:hover{color:var(--jc-green);}

/* ---------- FAQ accordion ---------- */
.faq-item{border-top:1px solid var(--jc-light-line);}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;background:transparent;border:0;cursor:pointer;
  padding:24px 0;font-family:var(--jc-display);text-transform:uppercase;font-size:17px;color:var(--jc-ink);text-align:left;line-height:1.2;}
.faq-ic{flex:none;transition:transform .38s var(--jc-ease);color:var(--jc-ink);}
.faq-item.open .faq-ic{transform:rotate(45deg);}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s cubic-bezier(.4,0,.2,1);}
.faq-a>div{overflow:hidden;}
.faq-item.open .faq-a{grid-template-rows:1fr;}
.faq-a p{margin:0;padding:0 0 24px;color:var(--jc-ink-muted);font-size:16px;line-height:1.6;}

/* ==========================================================================
   Service page components
   ========================================================================== */

/* Header variant: sits over a light hero. Light frosted-glass pill with dark text. */
.jc-header--over-light{top:0;padding-top:18px;margin-bottom:-100px;}
.jc-header--over-light .jc-header__inner{background:rgba(255,255,255,0.62);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,0.7);box-shadow:0 8px 30px rgba(0,0,0,0.06);}
.jc-header--over-light .hdr-nav a{color:var(--jc-ink);}
.jc-header--over-light .hdr-nav a:hover{color:var(--jc-green-d);}
.jc-header--over-light .jc-burger{color:var(--jc-ink);}
/* the Services dropdown keeps its dark-panel design, so its links stay light */
.jc-header--over-light .hdr-sub__col a{color:var(--jc-text);}
.jc-header--over-light .hdr-sub__col a:hover{color:var(--jc-head);}

/* Light / white section wrappers + dark-on-light colour context */
.sec-light{background:var(--jc-light-2);}
.sec-white{background:var(--jc-light);}
.on-light .jc-h1,.on-light .jc-h2,.on-light h2,.on-light h3{color:var(--jc-ink);}
.on-light .body-lg,.on-light .body-md{color:var(--jc-ink-muted);}
.sec-head{text-align:center;max-width:820px;margin:0 auto 70px;}
.sec-head .body-lg{margin:0 auto;}
/* A little more breathing room between every section title and its intro sentence */
.svc-head>p,.diff-head>p,.sec-head>p,.work-hero>p,.faq-grid>div>p{margin-top:18px!important;}

/* Service hero */
.svc-hero{max-width:var(--jc-maxw);margin:0 auto;padding:190px 40px 100px;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.svc-hero .hero-copy .jc-h1{color:var(--jc-ink);font-size:clamp(42px,4.8vw,82px);}
.svc-hero .hero-copy .body-lg{max-width:540px;margin:0 0 38px;color:#2a2a2a;}
.svc-hero__img{position:relative;width:100%;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.svc-hero__img img{width:100%;height:100%;object-fit:contain;display:block;}

/* Hero washes per family */
.wash-create{background:#F4FFFD;}
.wash-grow{background:#FDEFF3;}
.wash-reach{background:#FFF4EA;}

/* Offer grid (2-col dashed, numbered, pastel icon squares) */
.offer-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:80px;}
.offer-item{border-top:1px dashed var(--jc-light-dash);padding:44px 0;}
.offer-item__head{display:flex;align-items:center;gap:16px;margin-bottom:18px;}
.offer-item__head h3{font-family:var(--jc-display);text-transform:uppercase;font-size:22px;line-height:1;margin:0;color:var(--jc-ink);}
.offer-item p{font-size:17px;line-height:1.6;color:var(--jc-ink-muted);margin:0;}

/* Build grid (3-col dark cards) */
.build-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.build-card{background:var(--jc-card);border:1px solid var(--jc-line);border-radius:24px;box-shadow:0 8px 22px rgba(0,0,0,0.35);padding:36px 32px 38px;}
.build-card__ic{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:14px;margin-bottom:26px;}
.build-card__ic--brand{background:#fff;}
.build-card h3{font-family:var(--jc-display);text-transform:uppercase;font-size:22px;line-height:1;margin:0 0 14px;color:var(--jc-head);}
.build-card p{font-size:16px;line-height:1.6;color:var(--jc-muted-2);margin:0;}

/* Reviews on service pages: 3-col fixed */
.reviews-grid--3{grid-template-columns:repeat(3,1fr);}

/* FAQ grid */
.faq-grid{display:grid;grid-template-columns:0.85fr 1.15fr;gap:70px;align-items:start;}
.faq-grid__col{display:flex;flex-direction:column;gap:16px;}
.faq-item{background:var(--jc-light-card);border:1px solid var(--jc-light-line);border-radius:16px;overflow:hidden;border-top:1px solid var(--jc-light-line);}
.faq-q{padding:24px 28px;}
.faq-a p{padding:0 28px 26px;}
.faq-ic{font-family:var(--jc-body);font-size:26px;font-weight:400;line-height:1;}

@media (max-width:1024px){
  .svc-hero{grid-template-columns:1fr 1fr;gap:44px;padding-top:180px;}
  .build-grid{grid-template-columns:1fr 1fr;}
  .faq-grid{grid-template-columns:1fr;gap:40px;}
  .reviews-grid--3{grid-template-columns:1fr;}
}
@media (max-width:760px){
  .svc-hero{grid-template-columns:1fr;gap:38px;padding:150px 22px 60px;text-align:center;}
  .svc-hero .hero-copy .body-lg,.svc-hero .hero-trust,.svc-hero .hero-cta{margin-left:auto;margin-right:auto;justify-content:center;}
  .svc-hero__img{max-width:none;margin:0 auto;}
  .offer-grid{grid-template-columns:1fr;column-gap:0;}
  .build-grid{grid-template-columns:1fr;}
  .sec-head{margin-bottom:50px;}
}

/* ---------- Reveal animations ---------- */
.rw{display:inline-block;opacity:0;transform:rotateY(-90deg) rotateX(45deg);transform-origin:left center;will-change:transform,opacity;}
.rw.in{opacity:1;transform:rotateY(0) rotateX(0);transition:transform .8s cubic-bezier(.22,1,.36,1),opacity .8s cubic-bezier(.22,1,.36,1);}
.rword{display:inline-block;white-space:nowrap;}
.rf{opacity:0;transform:translateY(18px);will-change:transform,opacity;}
.rf.in{opacity:1;transform:translateY(0);transition:opacity .8s ease,transform .8s ease;}
.rc{opacity:0;transform:translateY(30px);will-change:transform,opacity;}
.rc.in{opacity:1;transform:translateY(0);transition:opacity .7s ease,transform .75s cubic-bezier(.16,1,.3,1);}
.rs{opacity:0;will-change:opacity;}
.rs.in{opacity:1;transition:opacity .9s ease;}

/* ---------- Keyframes ---------- */
@keyframes jc-up{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes jc-down{from{transform:translateY(-50%)}to{transform:translateY(0)}}
@keyframes jc-marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes jc-draw{to{clip-path:inset(0 0 0 0);}}
@keyframes jc-tag{0%{opacity:0;transform:translateY(16px) scale(0.85) rotate(var(--jc-tilt,-2deg));}60%{opacity:1;transform:translateY(-3px) scale(1.04) rotate(var(--jc-tilt,-2deg));}100%{opacity:1;transform:translateY(0) scale(1) rotate(var(--jc-tilt,-2deg));}}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .sec-x{padding-top:100px;padding-bottom:70px;}
  .svc-grid{grid-template-columns:1fr;gap:70px;max-width:640px;margin-left:auto;margin-right:auto;}
  .diff-grid{grid-template-columns:1fr 1fr;}
  .diff-item,.diff-item+.diff-item{border-left:none;padding-left:0;}
  .diff-item:nth-child(even){border-left:1px dashed var(--jc-line);padding-left:32px;}
  .diff-item:nth-child(n+3){border-top:1px dashed var(--jc-line);padding-top:36px;}
  .portfolio-grid{grid-template-columns:1fr 1fr;}
  .jc-footer__grid{grid-template-columns:1fr 1fr;}
  .hdr-sub{width:560px;}
}
@media (max-width:1024px){
  /* switch to the burger menu at the tablet breakpoint, before the bar crowds */
  .hdr-nav{display:none;}
  .jc-burger{display:inline-flex;}
  /* Enquire now already lives in the menu modal, so hide the header button on mobile */
  .jc-header .jc-btn--sm{display:none;}
}
@media (max-width:760px){
  .jc-wrap{padding-left:22px;padding-right:22px;}
  .sec-x{padding-top:80px;padding-bottom:56px;}
  .portfolio-grid{grid-template-columns:1fr;gap:56px;}
  .work-head{flex-direction:column;align-items:center;text-align:center;}
  .diff-grid{grid-template-columns:1fr;}
  .diff-item,.diff-item+.diff-item,.diff-item:nth-child(even){border-left:none;padding-left:0;}
  .diff-item+.diff-item{border-top:1px dashed var(--jc-line);padding-top:44px;}
  .jc-footer__grid{grid-template-columns:1fr;gap:40px;}
  .reviews-grid{grid-template-columns:1fr;}
  .body-lg{font-size:18px;}
}
/* small phones: scale big display headings down so long words never overflow */
@media (max-width:600px){
  .jc-h1,.svc-hero .hero-copy .jc-h1{font-size:clamp(28px,8vw,44px);}
  /* keep h2 below h1 on phones (h1 shrinks here, so h2 must too); !important beats per-page inline sizes */
  .jc-h2{font-size:clamp(24px,7vw,40px)!important;}
  .jc-h1,.jc-h2,.jc-card h3{overflow-wrap:break-word;}
}

@media (prefers-reduced-motion:reduce){
  .rw,.rf,.rc,.rs{opacity:1!important;transform:none!important;}
  .jc-tag{animation:none!important;transform:rotate(var(--jc-tilt,-2deg))!important;}
  .jc-brush path{animation:none!important;}
  .jc-brush path{clip-path:inset(0 0 0 0);}
  .hero-visual__col--up,.hero-visual__col--down,.jc-marq{animation:none!important;}
  html{scroll-behavior:auto;}
}