/* =========================================================
   I.D.S Integrated — Polish Layer
   Adds visual richness + tightens dead space without
   touching the base Webflow export. Loaded after
   base.min.css / site.min.css so overrides win on specificity
   (doubled classes) rather than relying on source order alone.
   ========================================================= */

:root{
  --polish-orange:#ff914d;
  --polish-orange-2:#F59958;
  --polish-ink:#1d1e22;
  --polish-paper:#f7f4ef;
  --polish-line:#e4e0d8;
  --polish-green:#ccf095;
  --polish-turq:#84d6d7;
  --polish-purple:#e4cfff;
  --polish-brown:#edcc88;
}

/* -----------------------------------------------------------
   1. TIGHTEN DEAD SPACE
   Desktop sections were using up to 300px of bottom padding.
   Pulling this in gives the page a denser, more confident
   rhythm while keeping the airy, minimal feel at each
   breakpoint (values scaled proportionally, not flattened).
----------------------------------------------------------- */
.section.section{ padding-bottom:150px; }
.hero.hero{ padding-bottom:120px; }
.case-section.case-section{ padding-bottom:130px; }
.pb-xl.pb-xl{ padding-bottom:110px; }
.pb-lg.pb-lg{ padding-bottom:40px; }

@media screen and (max-width:991px){
  .section.section{ padding-bottom:120px; }
  .hero.hero{ padding-bottom:90px; }
  .case-section.case-section{ padding-bottom:110px; }
  .pb-xl.pb-xl{ padding-bottom:90px; }
}

@media screen and (max-width:767px){
  .section.section{ padding-bottom:90px; }
  .hero.hero{ padding-bottom:60px; }
  .case-section.case-section{ padding-bottom:80px; }
  .pb-xl.pb-xl{ padding-bottom:70px; }
}

@media screen and (max-width:479px){
  .section.section{ padding-bottom:64px; }
  .hero.hero{ padding-bottom:40px; }
  .case-section.case-section{ padding-bottom:56px; }
  .pb-xl.pb-xl{ padding-bottom:56px; }
}

/* -----------------------------------------------------------
   2. SUBTLE BACKGROUND TEXTURE
   Soft, brand-colored blobs + a fine dot grid so large
   sections don't read as flat empty space. Very low opacity —
   texture, not decoration that competes with content.
----------------------------------------------------------- */
.polish-field{ position:relative; isolation:isolate; overflow:clip; }
.polish-field::before{
  content:"";
  position:absolute;
  inset:-10% -10% auto -10%;
  height:140%;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(closest-side, rgba(255,145,77,.14), rgba(255,145,77,0) 70%) 8% 10%/38% 38% no-repeat,
    radial-gradient(closest-side, rgba(132,214,215,.16), rgba(132,214,215,0) 70%) 92% 30%/30% 30% no-repeat,
    radial-gradient(closest-side, rgba(204,240,149,.18), rgba(204,240,149,0) 70%) 78% 85%/26% 26% no-repeat;
}
.polish-dots{ position:relative; isolation:isolate; }
.polish-dots::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:radial-gradient(circle, rgba(29,30,34,.12) 1px, transparent 1.4px);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  mask-image:linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  opacity:.5;
}

/* -----------------------------------------------------------
   3. EYEBROW LABEL
   Small uppercase tag used above section headings to add
   hierarchy and a sense of structure/progress through the page.
----------------------------------------------------------- */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:14px;
  font-family:Regolapro, sans-serif;
  font-size:12px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--polish-orange);
}
.eyebrow::before{
  content:"";
  width:16px;
  height:2px;
  border-radius:2px;
  background:var(--polish-orange);
  display:inline-block;
}

/* -----------------------------------------------------------
   4. STATS STRIP (used right after the hero)
   Pulls real numbers already stated in the page copy into a
   scannable proof band — the first thing a visitor sees after
   the headline, before they've committed to reading further.
----------------------------------------------------------- */
.stats-strip{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1px;
  background:var(--polish-line);
  border:1px solid var(--polish-line);
  border-radius:16px;
  overflow:hidden;
  margin:0 0 8px;
}
.stat-item{
  background:#fff;
  padding:28px 20px;
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.stat-num{
  font-family:Regolapro, sans-serif;
  font-weight:500;
  font-size:clamp(22px, 3vw, 30px);
  letter-spacing:-.5px;
  color:var(--polish-ink);
}
.stat-label{
  font-size:12.5px;
  line-height:1.4;
  color:#77787a;
}
@media screen and (max-width:767px){
  .stats-strip{ grid-template-columns:repeat(2, 1fr); border-radius:14px; }
  .stat-item{ padding:20px 14px; }
}

.stats-strip-wrap{
  margin-top:-56px;
  margin-bottom:90px;
  position:relative;
  z-index:2;
}
@media screen and (max-width:767px){
  .stats-strip-wrap{ margin-top:-30px; margin-bottom:56px; }
}

/* -----------------------------------------------------------
   5. CASE STUDIES — single, unified showcase
   A featured flagship case study up top (image + copy split),
   with the remaining work in a 3-up row underneath. Replaces
   the old one-at-a-time slider so every case study is visible
   at once, without a second/duplicate listing on the page.
----------------------------------------------------------- */
.case-intro{
  max-width:640px;
  margin-bottom:44px;
}
.case-intro-desc{
  color:#717171;
  font-size:15px;
  line-height:1.6;
  margin-top:4px;
}

.case-grid{
  display:flex;
  flex-direction:column;
  gap:24px;
}

/* Featured flagship card */
.case-feature{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  align-items:stretch;
  border-radius:20px;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--polish-line);
  text-decoration:none;
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.case-feature:hover{
  transform:translateY(-4px);
  box-shadow:0 26px 52px -22px rgba(29,30,34,.28);
  border-color:transparent;
}
.case-feature-media{
  position:relative;
  min-height:380px;
  overflow:hidden;
  background:#efece6;
}
.case-feature-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.case-feature:hover .case-feature-media img{ transform:scale(1.06); }
.case-feature-body{
  padding:48px 48px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:16px;
}
.case-feature-body .case-grid-tag{
  position:static;
  display:inline-flex;
  width:fit-content;
  background:var(--polish-paper);
  border:1px solid var(--polish-line);
}
.case-feature-title{
  font-family:Regolapro, sans-serif;
  font-size:clamp(22px, 2.4vw, 28px);
  font-weight:500;
  letter-spacing:-.4px;
  line-height:1.25;
  color:var(--polish-ink);
}
.case-feature-desc{
  font-size:15px;
  line-height:1.65;
  color:#717171;
  max-width:46ch;
}

/* Secondary 3-up row */
.case-grid-sub{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:24px;
}

.case-grid-card{
  position:relative;
  display:block;
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--polish-line);
  text-decoration:none;
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.case-grid-card:hover{
  transform:translateY(-4px);
  box-shadow:0 22px 40px -18px rgba(29,30,34,.25);
  border-color:transparent;
}
.case-grid-media{
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  background:#efece6;
}
.case-grid-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.case-grid-card:hover .case-grid-media img{ transform:scale(1.07); }
.case-grid-tag{
  position:absolute;
  top:14px;
  left:14px;
  background:rgba(247,244,239,.94);
  color:var(--polish-ink);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.02em;
  padding:6px 12px;
  border-radius:999px;
}
.case-grid-num{
  position:absolute;
  top:14px;
  right:14px;
  width:30px;
  height:30px;
  border-radius:999px;
  background:var(--polish-ink);
  color:#fff;
  font-size:11px;
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:center;
}
.case-grid-body{
  padding:22px 22px 24px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.case-grid-title{
  font-family:Regolapro, sans-serif;
  font-size:17px;
  font-weight:500;
  color:var(--polish-ink);
  letter-spacing:-.2px;
  line-height:1.3;
}
.case-grid-desc{
  font-size:14px;
  line-height:1.55;
  color:#717171;
}
.case-grid-cta{
  margin-top:10px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:600;
  color:var(--polish-ink);
}
.case-grid-cta img{
  width:13px;
  height:13px;
  filter:invert(0);
  transition:transform .25s ease;
}
.case-grid-card:hover .case-grid-cta img{ transform:translateX(4px); }

@media screen and (max-width:900px){
  .case-feature{ grid-template-columns:1fr; }
  .case-feature-media{ min-height:260px; }
  .case-feature-body{ padding:32px 28px; }
  .case-grid-sub{ grid-template-columns:1fr 1fr; }
}

@media screen and (max-width:767px){
  .case-grid{ gap:18px; }
  .case-grid-sub{ grid-template-columns:1fr; gap:18px; }
}

/* -----------------------------------------------------------
   6. VALUE ROW — used inside the dark "We get hired" CTA box
   to give that panel real content instead of one line of copy
   floating in a large white box.
----------------------------------------------------------- */
.value-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:28px 40px;
  margin-top:8px;
  padding-top:28px;
  border-top:1px solid var(--polish-line);
  width:100%;
}
.value-item{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13.5px;
  font-weight:500;
  color:var(--polish-ink);
}
.value-item img{ width:20px; height:20px; flex:none; }

/* -----------------------------------------------------------
   7. MICRO-INTERACTIONS
   Small, tasteful hover polish for buttons + case slider images
   already present in the source markup.
----------------------------------------------------------- */
.btn.w-inline-block{ transition:background-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.btn.w-inline-block:hover{ transform:translateY(-2px); box-shadow:0 10px 22px -10px rgba(29,30,34,.35); }

.card-case-image-wrap.card-case-image-wrap{ overflow:hidden; }
.card-case-image.card-case-image{ transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.card-case-image-wrap:hover .card-case-image{ transform:scale(1.05); }

/* Accordion polish */
.accordion-item-3.padded{ transition:background-color .25s ease; }
.accordion-item-3.padded:hover{ background-color:rgba(255,145,77,.05); }

/* -----------------------------------------------------------
   8. CASE STUDY TEMPLATE
   Large real project visual + editorial caption, a restructured
   overview, a proof-style deliverables grid, and a light
   numbered process strip. Designed to accept more screenshots
   later without changing the layout.
----------------------------------------------------------- */
.case-hero-visual{
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--polish-line);
  background:#fff;
  margin-top:8px;
  box-shadow:0 26px 50px -32px rgba(29,30,34,.35);
}
.case-hero-bar{
  display:flex;
  align-items:center;
  gap:14px;
  padding:11px 16px;
  background:#efece6;
  border-bottom:1px solid var(--polish-line);
}
.case-hero-dots{
  display:flex;
  gap:6px;
  flex:none;
}
.case-hero-dots span{
  width:9px;
  height:9px;
  border-radius:50%;
  background:#d8d4cb;
  display:block;
}
.case-hero-url{
  flex:1;
  max-width:340px;
  margin:0 auto;
  text-align:center;
  font-size:12.5px;
  color:#77787a;
  background:#fff;
  border:1px solid var(--polish-line);
  border-radius:6px;
  padding:5px 14px;
}
.case-hero-media{
  position:relative;
  aspect-ratio:16/8.5;
  background:#efece6;
}
.case-hero-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.case-hero-caption{
  position:absolute;
  left:0; right:0; bottom:0;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  padding:22px 26px;
  background:linear-gradient(0deg, rgba(15,15,17,.62), rgba(15,15,17,0) 70%);
  color:#fff;
}
.case-hero-caption-label{
  font-size:13px;
  font-style:italic;
  opacity:.92;
  max-width:56ch;
}
.case-hero-caption-tag{
  flex:none;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.3);
  border-radius:999px;
  padding:6px 12px;
  white-space:nowrap;
}
@media screen and (max-width:767px){
  .case-hero-visual{ border-radius:14px; }
  .case-hero-bar{ padding:9px 12px; gap:10px; }
  .case-hero-url{ font-size:11.5px; padding:4px 10px; }
  /* Full-page screenshots are landscape; forcing a tall mobile
     crop would hide most of the interface. Let the image sit at
     its natural ratio instead so the whole screenshot is legible. */
  .case-hero-media{ aspect-ratio:auto; }
  .case-hero-media img{ height:auto; object-fit:contain; background:var(--polish-paper); }
  .case-hero-caption{ position:static; background:var(--polish-ink); flex-direction:column; align-items:flex-start; }
}

.case-overview-grid.case-overview-grid{ gap:56px; }
.case-overview-kicker{
  font-size:12px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--polish-orange);
  margin-bottom:6px;
}

.case-deliverables.design-procces-list{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  border-top:1px solid var(--polish-line);
}
.case-deliverables .design-procces-list-item{
  padding:14px 0;
  border-bottom:1px solid var(--polish-line);
  align-items:flex-start;
}
.case-deliverables .design-procces-list-icon{
  margin-top:2px;
}

.case-process{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:1px;
  background:var(--polish-line);
  border:1px solid var(--polish-line);
  border-radius:14px;
  overflow:hidden;
}
.case-process-step{
  background:#fff;
  padding:22px 16px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.case-process-num{
  font-family:Regolapro, sans-serif;
  font-size:12px;
  color:var(--polish-orange);
  font-weight:600;
}
.case-process-label{
  font-size:13.5px;
  font-weight:500;
  color:var(--polish-ink);
}
@media screen and (max-width:767px){
  .case-process{ grid-template-columns:1fr; border-radius:12px; }
  .case-process-step{ border-bottom:1px solid var(--polish-line); }
}

/* -----------------------------------------------------------
   9. SCROLL REVEAL
   Applied via a small IntersectionObserver script. Elements
   fade/lift in once, on first view. No-op entirely when the
   visitor prefers reduced motion.
----------------------------------------------------------- */
.reveal-up{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
.reveal-up.is-visible{
  opacity:1;
  transform:translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .reveal-up{ opacity:1; transform:none; transition:none; }
}