@font-face {
  font-family: "Urbane";
  src: url("assets/font/Urbane-Font/Urbane-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Urbane Light";
  src: url("assets/font/Urbane-Font/Urbane-Light.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Urbane Thin";
  src: url("assets/font/Urbane-Font/Urbane-Thin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Urbane Bold";
  src: url("assets/font/Urbane-Font/Urbane-Bold.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Urbane Demi Bold";
  src: url("assets/font/Urbane-Font/Urbane-Demi-Bold.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root{
  --ink:#1C1C22;
  --muted:#5F6470;
  --bg:#FFFFFF;
  --panel:#F4F6FB;
  --line:rgba(28,28,34,.10);
  --shadow:0 18px 45px rgba(0,0,0,.12);
  --radius:22px;
  --radius-lg:30px;

  --blue:#4DA1FF;
  --teal:#5DD9B3;
  --purple:#7F67F6;

  /* motion */
  --ease:cubic-bezier(.2,.8,.2,1);
  --t-fast:160ms;
  --t:220ms;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  overflow-x:hidden;
  color:var(--ink);
  background:var(--bg);
  font-family:"Urbane", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.45;
}

img{max-width:100%;display:block}
a{color:inherit}

a:focus-visible{
  outline: 3px solid rgba(77,161,255,.45);
  outline-offset: 3px;
  border-radius: 10px;
}

.skip{
  position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.skip:focus{
  left:16px;top:16px;width:auto;height:auto;z-index:9999;
  background:#fff;padding:10px 12px;border-radius:12px;box-shadow:var(--shadow);
}

.container{
  width:min(1440px, calc(100% - 48px));
  margin-inline:auto;
}

/* Header */
.site-header{
  position:sticky;top:0;z-index:50;
  background:linear-gradient(180deg, #14141A 0%, #0F0F14 100%);
  color:#fff;
}
.header-inner{
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand-mark{width:196px;height:37.551px}
.brand-name{font-family:Urbanist, Inter, system-ui, sans-serif;font-weight:700;letter-spacing:-0.02em}

.nav{display:flex;gap:20px}
.nav a{
  color:rgba(255,255,255,.85);
  text-decoration:none;
  font-size:14px;
}
.nav a:hover{color:#fff}

/* Utility */
.muted{color:var(--muted)}
.center{text-align:center}
.divider{height:1px;background:var(--line);margin:28px 0}

.kicker{
  display:flex;align-items:center;gap:10px;
  font-family:"Urbane", system-ui, sans-serif;
  font-weight:100;
  letter-spacing:1.5px;
  text-transform:uppercase;
  font-size:18px;
}
.dot{
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 6px solid #4DA1FF;
  background: #fff;
  font-size: 18px;
}
.kicker.on-dark{
  color:rgba(255,255,255,.75);
  font-size: 18px;
}

.pill{
  width: 257px;
  height: 39px;
  font-family: "Urbane Light", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border-radius: 999px;
  background:
    linear-gradient(#7F67F6, #7F67F6) padding-box,
    linear-gradient(
      90deg,
      #7F67F6 0%,
      #4DA1FF 48%,
      #5DD9B3 97%
    ) border-box;
  border: 2px solid transparent;
  color: white;
  font-size: 14px;
  letter-spacing: .06em;
}

/* Hero */
.hero{padding:22px 0 50px}
.hero-title{
  font-family: "Urbane", sans-serif;
  font-weight: 500;
  font-size: clamp(56px, 6.8vw, 130px);
  color: #1C1C22;
  line-height: 1.05;
  letter-spacing: -1px;
}
.hero-gallery{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  padding-bottom: 50px;
}
.shot{
  border-radius:var(--radius);
  overflow:hidden;
  background: #0D0D0D;
  box-shadow:0 14px 40px rgba(0,0,0,.08);
}
.shot img{width:100%;height:100%;object-fit:cover}

/* WHO */
.who{ padding: 10px 0 10px; }
.who-line{
  height: 1px;
  background: rgba(28,28,34,.14);
  margin: 26px 0 38px;
}
.who-row{
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 90px;
  align-items: start;
}
.who-label{
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 6px;
}
.who-dot{
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 6px solid #4DA1FF;
  background: #fff;
}
.who-kicker{
  font-family: "Urbane", system-ui, sans-serif;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #1C1C22;
}
.who-content{ max-width: 860px; }
.who-title{
  margin: 0 0 20px;
  font-family: "Urbane", system-ui, sans-serif;
  font-weight: 500;
  font-size: 32px;
  line-height: 1.46;
  color: #1C1C22;
}
.who-text{
  margin: 0 0 20px;
  font-family: Inter , system-ui, sans-serif;
  color: #1C1C22;
  opacity: .9;
  font-size: 18px;
  line-height: 1.7;
}

/* AI JOURNEY */
.ai-journey{
  position: relative;
  padding: 80px 0;
  color: #fff;
  background: #07090F;
  overflow: hidden;
}
.ai-journey::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("assets/img/bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: .45;
  pointer-events: none;
}
.ai-inner{ position: relative; z-index: 2; }
.ai-grid{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 80px;
  align-items: center;
}
.ai-kicker{
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: "Urbane Light", system-ui, sans-serif;
  font-size: 18px;
  letter-spacing: .12em;
  margin-bottom: 32px;
  opacity: .8;
  color: #FFFFFF;
}
.ai-dot{
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 6px solid #4DA1FF;
}
.ai-title{
  margin: 0 0 60px;
  font-family: "Urbane", sans-serif;
  font-weight: 500;
  font-size: clamp(44px, 5.8vw, 100px);
  line-height: 1.05;
  letter-spacing: -1px;
  max-width: 900px;
}
.ai-sub{
  margin: 0 0 40px;
  max-width: 600px;
  color: rgba(255,255,255,.7);
  font-size: 24px;
  line-height: 1.6;
  font-family: "Urbane Light", system-ui, sans-serif;
}
.ai-steps{
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 500px;
}
.ai-steps li{
  padding: 18px 0;
  border-bottom: 1px solid rgba(255,255,255,.2);
  font-size: 32px;
  font-weight: 400;
  font-family: "Urbane", system-ui, sans-serif;
}
.ai-visual{
  overflow: visible;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.ai-visual img{
  width: 100%;
  display: block;
}

/* Craft teams */
.craft{padding:56px 0 66px}
.section-title{
  margin:0;
  text-align:center;
  font-family:"Urbane Light", Inter, system-ui, sans-serif;
  letter-spacing:1.5px;
  font-size: clamp(44px, 6vw, 100px);
  line-height:1.25;
}
.section-sub{
  margin:12px auto 0;
  text-align:center;
  color:#1C1C22;
  max-width:720px;
  font-family:"Urbane Light", Inter, system-ui, sans-serif;
  font-size: 24px;
}

.cards{
  margin-top:26px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px 18px 16px;
  box-shadow:0 16px 45px rgba(0,0,0,.06);
  max-width: 100%;
  min-height: 560px;
}
.card h3{
  padding-top: 15px;
  margin:15px 0 6px;
  font-family:"Urbane Light", system-ui, sans-serif;
  letter-spacing:-0.02em;
  font-size:32px;
}
.card p{
  margin:0;
  font-family: Inter, system-ui, sans-serif;
  letter-spacing:-0.02em;
  font-size:18px;
  color: #2C2F36 ;
}
.card-icon{
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 22px;
  line-height: 28;
}
.card-icon img{width:161px;height:161px}
.bg-blue{background:rgba(77,161,255,.92)}
.bg-teal{background:rgba(93,217,179,.92)}
.bg-purple{background:rgba(127,103,246,.92)}

.clutch-pill{
  margin:130px auto 80px;
  width: min(640px, 100%);
  height: auto;
  background:#15161C;
  color:#fff;
  border-radius:16px;
  padding:14px 18px;
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:scenter;
}
.clutch-left{
  display:flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
}
.clutch{font-weight:700;letter-spacing:-0.02em}
.stars{color:#7F67F6}
.clutch-pill p{
  margin:0;
  color:#FFFFFF;
  font-family:"Urbane Light", system-ui, sans-serif;
  letter-spacing:1.5px;
  font-size:18px;
}
.clutch-pill a{color:#fff}

/* Expertise */
.expertise{
  padding:36px 0 30px;
  background-color: #F9F9FE;
}
.expert-row{padding:6px 0 10px}
.expert-head h2{
  margin:0;
  font-family:"Urbane", system-ui, sans-serif;
  font-size: 64px;
  font-weight:200;
  letter-spacing:1px;
}
.expert-head sup{font-size:14px;color:var(--purple);margin-left:4px}

.expert-grid{
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1.2fr 1.2fr 312px;
  gap: 80px;
  align-items: start;
}
.expert-grid-ai{
  margin-top: 40px;
  display: grid;

  /* FIXED left width so col 2 aligns across sections */
  grid-template-columns: 240px 1fr 312px;

  gap: 80px;
  align-items: start;
}

/* Lists */
.expert-list{
  list-style: none;
  padding: 0;
  margin: 0;
  columns: 2;
  column-gap: 20px;
  font-family: "Urbane", system-ui, sans-serif;
  font-size: 18px;
  line-height: 1;
  color: #2F3037;
}
.expert-list li{
  break-inside: avoid;
  padding: 6px 0;
}

.expert-list-ai{
  list-style: none;
  padding: 0;
  margin: 0;
  columns: 1;
  column-gap: 20px;
  font-family: "Urbane", system-ui, sans-serif;
  font-size: 18px;
  line-height: 1;
  color: #2F3037;
}
.expert-list-ai li{
  break-inside: avoid;
  padding: 6px 0;
}

/* Copy */
.expert-copy{
  margin:0;
  color:#2F3037;
  font-family: Inter, system-ui, sans-serif;
  font-size:18px;
  line-height:28px;
  max-width: 500px;
}
.expert-copy-ai{
  margin:0;
  color:#2F3037;
  font-family: Inter, system-ui, sans-serif;
  font-size:18px;
  line-height:28px;
  max-width: 640px;
}

/* MEDIA: fixed size */
.expert-media{
  width: 100%;
  max-width: 420px;
  height: auto;

  /* TL rounded | TR sharp | BR rounded | BL sharp */
  border-radius: 32px 0 32px 0;

  overflow: hidden;
  border: 1px solid #DFE1E5;
  background: #fff;
}

/* image fills */
.expert-media img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Work */
.work{
  padding:40px 0 44px;
  background: #F9F9FE;
}
.work-grid{
  margin-top:70px;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:18px;
  background: #F9F9FE;
}
.work-card{
  border-radius: 0;
  overflow: visible;
  background: transparent;
  margin-bottom: 50px;
}
.work-card img{
  width:100%;
  height:auto;
  aspect-ratio: 640 / 615;
  object-fit: cover;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.work-meta{
  padding:14px 14px 16px;
  background: #F9F9FE;
}
.work-meta h3{
  margin:0;
  font-family:"Urbane Light", Inter, system-ui, sans-serif;
  font-size: 32px;
  letter-spacing:1.5px}
.work-meta p{
  margin:2px 0 0;
  color: #8D8D8D;
  font-family: "Urbane Light", Inter, system-ui, sans-serif
}

/* ==========================
   PRICING 
   ========================== */

.pricing{
  padding: 120px 0;
}

.pricing-kicker{
  justify-content: center;
  margin-bottom: 30px;
}

.pricing-panel{
  background: #F9F9FE;
  border: 1px solid #E6E8EC;
  border-radius: 40px;
  padding: 90px 80px 100px;
}

.pricing-section-sub{
  margin:12px auto 0;
  text-align:center;
  color:#1C1C22;
  max-width:720px;
  font-family:"Urbane Light", Inter, system-ui, sans-serif;
  font-size: 24px;
  margin-bottom: 55px;
}

/* Pricing cards layout */
.rates{
  margin: 22px auto 0;
  width: 920px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-bottom: 70px;
}

/* Base card */
.rate{
  background: #fff;
  border-radius: 18px;
  border: 1px solid rgba(28,28,34,.12);
  padding: 70px 40px;
  text-align: center;
  box-shadow: none;
  min-height: 469px;
  min-width: 420px;
}

/* MID / SENIOR title */
.rate-kicker{
  padding-top: 25px;
  margin: 0 0 40px;
  font-size: 18px;
  letter-spacing: .08em;
  font-family: "Urbane Demi Bold", system-ui, sans-serif;
  color: #1C1C22;
}

/* spacing blocks ($ + label) */
.rate-block{
  margin: 0 0 70px;
}

.rate-block:last-child{
  margin-bottom: 0;
}

.rate-price{
  margin: 0;
  font-size: 48px;
  font-family: "Urbane", system-ui, sans-serif;
  color: #1C1C22;
}

.rate-label{
  margin: 8px 0 0;
  font-size: 24px;
  font-family: "Urbane Light", system-ui, sans-serif;
  color: rgba(28,28,34,.55);
}

/* FEATURE CARD */
.rate-feature{
  position: relative;
  background:#1C1C22;
  overflow: hidden;
  border: 0px solid rgba(28,28,34,.12);
}

/* Top gradient bar */
.rate-topbar{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;

  font-family: "Urbane Demi Bold", system-ui, sans-serif;
  font-size: 14px;
  letter-spacing: .12em;
  color: #fff;

  background: linear-gradient(
    90deg,
    #7F67F6 0%,
    #4DA1FF 48%,
    #5DD9B3 97%
  );
}

/* push content below bar */
.rate-feature{
  padding-top: 100px;
}

/* feature text colors */
.rate-kicker-feature{
  margin: 0 0 40px;
  font-size: 18px;
  letter-spacing: .08em;
  font-family: "Urbane Demi Bold", system-ui, sans-serif;
  color: #fff;
}

.rate-price-feature{
  color: #fff;
  font-size: 48px;
}

.rate-feature .rate-label{
  color: rgba(255,255,255,.55);
  font-size: 24px;
}
/* Footer */
.site-footer{
  color:#fff;
  background: linear-gradient(180deg, #0C0C11 0%, #0B0B10 100%);
  position:relative;
  overflow:hidden;
  padding-top: 10px;
}
.footer-bg-logo{
  width: 100%;
  height: auto;
  display: block;
}

.footer-inner{position:relative;display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.footer-left .muted{color:rgba(255,255,255,.70)}
.map{width:min(520px, 48vw);opacity:.85;border-radius:18px}

/* Responsive */

/* ==========================
   EMBED / TABLET RESPONSIVE
   (Zoho People container friendly)
   ========================== */
@media (max-width: 1200px){
  .container{ width:min(1440px, calc(100% - 32px)); }

  .hero-gallery{ grid-template-columns:repeat(2,1fr); }

  .who-row{ grid-template-columns: 1fr; gap: 28px; }

  .cards{ grid-template-columns: 1fr; }

  .clutch-pill{
    padding: 18px;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .expert-grid{
    grid-template-columns: 1fr 1fr 312px;
    gap: 40px;
  }
  .expert-grid-ai{
    grid-template-columns: 240px 1fr 312px;
    gap: 40px;
  }
  .expert-copy, .expert-copy-ai{ max-width: none; }

  /* Work cards */
  .work-grid{ grid-template-columns: 1fr; }

  /* Pricing (keep 2 columns on tablet) */
  .rates{ grid-template-columns: repeat(2, minmax(0,1fr)); max-width: 920px; }
  .rate{ padding: 56px 28px; }
  .pricing-panel{ padding: clamp(40px, 4vw, 70px) clamp(18px, 3vw, 48px) clamp(44px, 4vw, 80px); }
}

@media (max-width: 980px){
  .hero-gallery{grid-template-columns:repeat(2,1fr)}
  .who-row{grid-template-columns:1fr;gap:18px}
  .who-label{padding-top:0}
  .ai-grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .expert-grid{grid-template-columns:1fr}
  .expert-grid-ai{grid-template-columns:1fr}
  .expert-list{columns:2}

  .expert-media{ width: 100%; height: auto; }
  .expert-media img{ height: auto; }

  .work-grid{grid-template-columns:1fr}
  .rates{ grid-template-columns: repeat(2, minmax(0,1fr)); width:100%; max-width: 920px; }
  .pricing-panel{padding: 46px 18px 56px; border-radius: 28px;}
  .pricing-section-sub{font-size: 18px;}
  .rate{padding: 48px 22px; min-height: auto;}
  .rate-topbar{
  border-radius: 18px 18px 0 0;
height: 42px;}
  .rate-feature{padding-top: 86px;}
  .cards{gap: 14px;}
  .card{min-height: auto;}
  .nav{display:none}
}

@media (max-width: 680px){
  .rates{ grid-template-columns: 1fr; max-width: 520px; }
}


/* ==========================
   OUR CLIENTS
   ========================== */

.client-kicker{
  display:flex;align-items:center;gap:10px;
  font-family:"Urbane", system-ui, sans-serif;
  font-weight:100;
  letter-spacing:1.5px;
  text-transform:uppercase;
  font-size:18px;
  margin-bottom: 70px;
}

.clients{ margin-top: 56px; }

/* Board */
.client-grid{
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: #ffffff;
  position: relative;

  --board-pad: 24px;   
  --cell-pad: 30px;    
  --line: #DFE1E5;
  --gap: 12px;        

  padding: var(--board-pad);
}

/* Cells */
.client{
  width: 100%;
  height: 260px;               
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: none;
  overflow: hidden;           
  padding: var(--cell-pad);
}

.client img{
  width: 340px;
  height: 230px;
  object-fit: contain;
  display: block;

  max-width: 100%;
  max-height: 100%;
}

/* ===== DIVIDERS (DESKTOP: 4 cols × 2 rows) ===== */
.client-grid::before{
  content: "";
  position: absolute;

  inset: var(--board-pad);
  pointer-events: none;

  --half: calc(var(--gap) / 2);

  background-image:
    /* top verticals (25/50/75) */
    linear-gradient(to right,
      transparent 25%, var(--line) 25%, var(--line) calc(25% + 1px), transparent calc(25% + 1px),
      transparent 50%, var(--line) 50%, var(--line) calc(50% + 1px), transparent calc(50% + 1px),
      transparent 75%, var(--line) 75%, var(--line) calc(75% + 1px), transparent calc(75% + 1px)
    ),
    /* bottom verticals (25/50/75) */
    linear-gradient(to right,
      transparent 25%, var(--line) 25%, var(--line) calc(25% + 1px), transparent calc(25% + 1px),
      transparent 50%, var(--line) 50%, var(--line) calc(50% + 1px), transparent calc(50% + 1px),
      transparent 75%, var(--line) 75%, var(--line) calc(75% + 1px), transparent calc(75% + 1px)
    ),
    /* middle horizontal */
    linear-gradient(to bottom,
      transparent calc(50% - .5px),
      var(--line) calc(50% - .5px),
      var(--line) calc(50% + .5px),
      transparent calc(50% + .5px)
    );

  background-repeat: no-repeat;
  background-size:
    100% calc(45% - var(--half)),
    100% calc(45% - var(--half)),
    100% 100%;
  background-position:
    top,
    bottom,
    center;
}

/* ===== MOBILE: 2 cols × 4 rows ===== */
@media (max-width: 980px){
  .client-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    --board-pad: 18px;  
    --cell-pad: 22px;
  }

  .client{
    height: 200px;     
  min-height: 200px;
  padding: var(--cell-pad);
  }

  .client-grid::before{
    --half: calc(var(--gap) / 2);

    background-image:
      /* vertical center line split into 4 segments */
      linear-gradient(to right,
        transparent 50%, var(--line) 50%, var(--line) calc(50% + 1px), transparent calc(50% + 1px)
      ),
      linear-gradient(to right,
        transparent 50%, var(--line) 50%, var(--line) calc(50% + 1px), transparent calc(50% + 1px)
      ),
      linear-gradient(to right,
        transparent 50%, var(--line) 50%, var(--line) calc(50% + 1px), transparent calc(50% + 1px)
      ),
      linear-gradient(to right,
        transparent 50%, var(--line) 50%, var(--line) calc(50% + 1px), transparent calc(50% + 1px)
      ),

      /* horizontals at 25/50/75 */
      linear-gradient(to bottom,
        transparent calc(25% - .5px), var(--line) calc(25% - .5px),
        var(--line) calc(25% + .5px), transparent calc(25% + .5px)
      ),
      linear-gradient(to bottom,
        transparent calc(50% - .5px), var(--line) calc(50% - .5px),
        var(--line) calc(50% + .5px), transparent calc(50% + .5px)
      ),
      linear-gradient(to bottom,
        transparent calc(75% - .5px), var(--line) calc(75% - .5px),
        var(--line) calc(75% + .5px), transparent calc(75% + .5px)
      );

    background-repeat: no-repeat;

    background-size:
      100% calc(25% - var(--half)),
      100% calc(25% - var(--half)),
      100% calc(25% - var(--half)),
      100% calc(25% - var(--half)),
      100% 100%,
      100% 100%,
      100% 100%;

    background-position:
      top,
      0 calc(25% + var(--half)),
      0 calc(50% + var(--half)),
      0 calc(75% + var(--half)),
      center,
      center,
      center;
  }
}

/* ==========================
   WHAT PEOPLE SAY (UPDATED)
   ========================== */

.people-say-title{
  margin-top: 60px;
  margin-bottom: 50px;
}

.quotes{
  margin-top: 22px;

  column-count: 2;      
  column-gap: 18px;
}

/* Each card */
.quote{
  display: inline-block; 
  width: 100%;
  margin: 0 0 18px;     

  break-inside: avoid;   
}

.quote-text{
  margin: 0 0 22px;
  font-family: "Urbane", system-ui, sans-serif;

  /* desktop hits ~32px, then scales down */
  font-size: clamp(18px, 1.8vw, 32px);
  line-height: 1.65;
  color: #1C1C22;
}

.quote-name{
  margin: 0;
  font-family: "Urbane", system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(15px, 1.35vw, 24px);
  color: #1C1C22;
}

.quote-role{
  margin: 6px 0 7px;
  font-family: "Urbane Light", system-ui, sans-serif;
  font-size: clamp(13px, 1.05vw, 18px);
  color: #8D8D8D;
}

.quote-meta{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-family: "Urbane", system-ui, sans-serif;
  flex-wrap: wrap;
}

.quote-stars{
  letter-spacing: 1px;
  font-size: clamp(30px, 2.8vw, 50px);
  color: #7F67F6;
}

.quote-sep{ color: #1C1C22; }

.quote-link{
  font-family: "Urbane Light", system-ui, sans-serif;
  font-size: clamp(13px, 1.05vw, 18px);
  color: #1C1C22;
}
.quote-link:hover{ opacity: .85; }

@media (max-width: 980px){
  .quotes{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px){
  .quotes{
    column-count: 1;
    column-gap: 0;
  }
  .people-say-title{
    margin-top: 44px;
    margin-bottom: 28px;
  }
}

/* Responsive tweaks for these sections */

@media (max-width: 980px){
  .client-grid{
    grid-template-columns: repeat(2, 1fr);
  }

  .client-grid::before{
    --line: rgba(28,28,34,.08);
    --gap: 12px;
    --half: calc(var(--gap) / 2);

    background-image:
      /* vertical center line (50%), split into 4 segments so it doesn't touch horizontals */
      linear-gradient(to right,
        transparent 50%, var(--line) 50%, var(--line) calc(50% + 1px), transparent calc(50% + 1px)
      ),
      linear-gradient(to right,
        transparent 50%, var(--line) 50%, var(--line) calc(50% + 1px), transparent calc(50% + 1px)
      ),
      linear-gradient(to right,
        transparent 50%, var(--line) 50%, var(--line) calc(50% + 1px), transparent calc(50% + 1px)
      ),
      linear-gradient(to right,
        transparent 50%, var(--line) 50%, var(--line) calc(50% + 1px), transparent calc(50% + 1px)
      ),

      /* horizontals at 25/50/75 */
      linear-gradient(to bottom,
        transparent calc(25% - .5px), var(--line) calc(25% - .5px),
        var(--line) calc(25% + .5px), transparent calc(25% + .5px)
      ),
      linear-gradient(to bottom,
        transparent calc(50% - .5px), var(--line) calc(50% - .5px),
        var(--line) calc(50% + .5px), transparent calc(50% + .5px)
      ),
      linear-gradient(to bottom,
        transparent calc(75% - .5px), var(--line) calc(75% - .5px),
        var(--line) calc(75% + .5px), transparent calc(75% + .5px)
      );

    background-repeat: no-repeat;

    /* 4 vertical segments = each row height (25%) minus half gap */
    background-size:
      100% calc(25% - var(--half)),
      100% calc(25% - var(--half)),
      100% calc(25% - var(--half)),
      100% calc(25% - var(--half)),
      100% 100%,
      100% 100%,
      100% 100%;

    /* place vertical segments between the horizontal lines */
    background-position:
      top,
      0 calc(25% + var(--half)),
      0 calc(50% + var(--half)),
      0 calc(75% + var(--half)),
      center,
      center,
      center;
  }
}

/* ==========================
   INTERACTIONS (SUBTLE)
   ========================== */

.shot,
.card,
.work-card,
.quote,
.rate,
.expert-media{
  transition:
    transform var(--t) var(--ease),
    box-shadow var(--t) var(--ease),
    border-color var(--t) var(--ease);
}

.shot img,
.work-card img,
.client img,
.expert-media img{
  transition: transform var(--t) var(--ease);
  will-change: transform;
}

/* Hover lifts */
.shot:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 55px rgba(0,0,0,.10);
}
.shot:hover img{ transform: scale(1.03); }

.card:hover{
  transform: translateY(-4px);
  box-shadow: 0 22px 65px rgba(0,0,0,.10);
  border-color: rgba(28,28,34,.18);
}

.work-card:hover{
  transform: translateY(-4px);
}
.work-card:hover img{ transform: scale(1.02); }

.quote:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 55px rgba(0,0,0,.06);
  border-color: rgba(223,225,229,.9);
}

.rate:hover{
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(0,0,0,.08);
}

.expert-media:hover{
  transform: translateY(-3px);
  box-shadow: 0 20px 60px rgba(0,0,0,.10);
}

/* Client logo micro-interaction */
.client{
  transition: background-color var(--t) var(--ease);
}
.client:hover img{ transform: scale(1.03); }

/* Link hover polish */
.nav a{
  transition: opacity var(--t-fast) var(--ease);
}
.nav a:hover{ opacity: 1; }

.quote-link{
  transition: opacity var(--t-fast) var(--ease), text-decoration-color var(--t-fast) var(--ease);
}
.quote-link:hover{ opacity: .85; }

/* Pricing highlight */
.rate-feature{
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.rate-feature:hover{
  transform: translateY(-4px);
  box-shadow: 0 26px 80px rgba(0,0,0,.22);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .shot,
  .card,
  .work-card,
  .quote,
  .rate,
  .expert-media,
  .client img,
  .shot img,
  .work-card img,
  .expert-media img{
    transition: none !important;
  }
}

/* ==========================
   RESPONSIVE REFACTOR (MOBILE-FIRST)
   ========================== */

:root{
  --container-pad: clamp(20px, 3.5vw, 48px);
  --section-pad: clamp(44px, 6vw, 80px);
  --gap: clamp(14px, 2.2vw, 22px);
  --gap-lg: clamp(18px, 3vw, 80px);
  --radius-md: 18px;
}

body{overflow-x:hidden;}
img{height:auto;}

.container{width:min(1440px, calc(100% - (var(--container-pad) * 2)));}

/* ---- Header / Nav (hamburger) ---- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

.header-inner{gap:12px;}

.nav{display:none;gap:18px;align-items:center;}
.nav a{font-family:"Urbane Light", system-ui, sans-serif;font-size:14px;text-decoration:none;opacity:.85;}
.nav a:hover{opacity:1;}

.nav-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;height:44px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  cursor:pointer;
}
.nav-toggle:active{transform:translateY(1px);}
.nav-toggle-bars{display:grid;gap:5px;}
.nav-toggle-bars span{display:block;width:18px;height:2px;background:#fff;border-radius:999px;opacity:.9;}

/* mobile menu panel */
body.nav-open .nav{
  display:flex;
  position:absolute;
  top:64px;
  right:var(--container-pad);
  left:var(--container-pad);
  flex-direction:column;
  align-items:flex-start;
  padding:14px;
  border-radius:16px;
  background:rgba(20,20,26,.96);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  z-index:60;
}
body.nav-open .nav a{color:#fff;width:100%;padding:10px 10px;border-radius:12px;}
body.nav-open .nav a:hover{background:rgba(255,255,255,.08);}

.site-header .container{position:relative;}

/* ---- Fluid type ---- */
.hero-title{font-size:clamp(44px, 7vw, 130px);}
.ai-title{font-size:clamp(42px, 6vw, 100px);}
.section-title{font-size:clamp(40px, 6vw, 100px);}
.expert-head h2{font-size:clamp(34px, 4.5vw, 64px);}

/* ---- Hero ---- */
.hero{padding:22px 0 var(--section-pad);}
.hero-gallery{grid-template-columns:repeat(2, minmax(0,1fr));gap:var(--gap);}

/* ---- WHO ---- */
.who-row{grid-template-columns:1fr;gap:24px;}

/* ---- AI Journey ---- */
.ai-journey{padding:var(--section-pad) 0;}
.ai-grid{grid-template-columns:1fr;gap:var(--gap-lg);}
.ai-sub{font-size:clamp(18px, 2.2vw, 24px);}
.ai-steps li{font-size:clamp(22px, 2.8vw, 32px);}
.ai-visual{max-width:100%;}
.ai-visual img{max-width:100%;height:auto;}

/* ---- Cards ---- */
.cards{grid-template-columns:1fr;gap:var(--gap);}
.card{width:100%;height:auto;min-height:unset;}
.card-icon{height:clamp(220px, 40vw, 400px);}

.clutch-pill{
  width:100%;
  max-width:640px;
  height:auto;
  margin:clamp(44px, 8vw, 130px) auto var(--section-pad);
}

/* ---- Expertise ---- */
.expert-grid,
.expert-grid-ai{grid-template-columns:1fr;gap:24px;}
.expert-media{width:100%;max-width:312px;justify-self:start;}

/* ---- Work ---- */
.work-grid{grid-template-columns:1fr;gap:var(--gap);}
.work-card img{width:100%;height:auto;aspect-ratio: 16 / 15;max-width:100%;}

/* ---- Quotes ---- */
.quotes{grid-template-columns:1fr;gap:var(--gap);}

/* ---- Pricing ---- */
.pricing{background:#F9F9FE;padding:var(--section-pad) 0;}
.pricing-panel{
  background:#F9F9FE;
  border:1px solid rgba(28,28,34,.08);
  border-radius:clamp(22px, 3vw, 32px);
  padding:clamp(22px, 4vw, 56px);
}
.pricing-head{text-align:center;}
.pricing-kicker{
  display:flex;align-items:center;justify-content:center;gap:12px;
  font-family:"Urbane Light", system-ui, sans-serif;
  letter-spacing:.12em;font-size:14px;
}
.pricing-dot{
  width:18px;height:18px;border-radius:999px;
  border:5px solid #4DA1FF;background:#fff;
  box-shadow:0 0 0 3px rgba(127,103,246,.25) inset;
}
.pricing-title{
  margin:18px 0 10px;
  font-family:"Urbane Light", system-ui, sans-serif;
  font-size:clamp(40px, 6vw, 100px);
  letter-spacing:1.2px;
}
.pricing-sub{
  margin:0 0 clamp(22px, 4vw, 44px);
  font-family:"Urbane Light", system-ui, sans-serif;
  font-size:clamp(16px, 2.2vw, 24px);
  color:#1C1C22;opacity:.85;
}

.rates{
  width:100%;
  max-width:920px;
  margin:0 auto;
  grid-template-columns:1fr;
  gap:clamp(14px, 2vw, 22px);
}
.rate{
  min-width:0;
  min-height:unset;
  padding:clamp(28px, 4vw, 70px) clamp(18px, 3vw, 40px);
}

/* ---- Clients board ---- */
.client-grid{width:100%;}

/* ---- Footer background should never force horizontal scroll ---- */
.site-footer::before{width:min(1400px, 100%);}

/* ==========================
   Tablet (768px+)
   ========================== */
@media (min-width:768px){
  .hero-gallery{grid-template-columns:repeat(4, minmax(0,1fr));}
  .cards{grid-template-columns:repeat(3, minmax(0,1fr));}
  .who-row{grid-template-columns:260px 1fr;gap:clamp(28px, 6vw, 90px);}
  .ai-grid{grid-template-columns:1.1fr .9fr;}
  .work-grid{grid-template-columns:repeat(2, minmax(0,1fr));}
  .quotes{grid-template-columns:repeat(2, minmax(0,1fr));}
  .rates{grid-template-columns:repeat(2, minmax(0,1fr));}
}

/* ==========================
   Desktop (1024px+)
   ========================== */
@media (min-width:1024px){
  .nav-toggle{display:none;}
  .nav{display:flex;position:static;}
  body.nav-open .nav{
    display:flex;position:static;background:transparent;border:0;
    backdrop-filter:none;padding:0;flex-direction:row;
  }
  body.nav-open .nav a{padding:0;}

  .expert-grid{grid-template-columns: 1.2fr 1.2fr 312px;gap:var(--gap-lg);}
  .expert-grid-ai{grid-template-columns: 240px 1fr 312px;gap:var(--gap-lg);}
  .expert-media{justify-self:end;}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important;}
}

/* =========================================================
   RESPONSIVE BUGFIXES (Feb 2026)
   ========================================================= */

/* 1) Make pill + logo never cause horizontal overflow */
.pill{
  width: fit-content;
  max-width: 100%;
  padding-inline: 14px;
  flex-wrap: wrap;
  text-align: center;
}
.brand-mark{
  max-width: min(196px, 48vw);
  height: auto;
}

/* 2) PRICING */
.rate-feature{
  padding-top: 0;              
}
.rate-topbar{
  border-radius: 18px 18px 0 0;

  position: static;            
  height: auto;
  padding: 12px 10px;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}
.rate-feature{
  padding-inline: clamp(18px, 3vw, 40px);
  padding-bottom: clamp(28px, 4vw, 70px);
  padding-top: clamp(22px, 3.2vw, 34px); 
}
.rate-kicker-feature{ margin-top: 10px; }

/* 3) Expertise: when stacked, keep media centered */
@media (max-width: 1023px){
  .expert-media{ justify-self: center; }
}

/* 4) Clients board: logos never touch dividers; dividers always visible */
.client-grid{
  --board-pad: clamp(14px, 2.8vw, 24px);
  --cell-pad: clamp(16px, 3.2vw, 30px);
  --gap: 12px;
}
.client{
  height: clamp(140px, 28vw, 260px);
  min-height: 140px;
  padding: var(--cell-pad);
}
.client img{
  width: min(260px, 78%);
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

@media (max-width: 520px){
  .container{ width: calc(100% - 28px); }

  .hero-title{ font-size: clamp(34px, 10.5vw, 54px); }
  .section-title{ font-size: clamp(32px, 9.5vw, 54px); }
  .section-sub{ font-size: clamp(16px, 4.6vw, 20px); }

  .ai-sub{ font-size: clamp(16px, 4.5vw, 20px); }
  .ai-steps li{ font-size: clamp(18px, 5.2vw, 24px); }

  .card h3{ font-size: clamp(22px, 6vw, 28px); }
  .card p{ font-size: clamp(16px, 4.4vw, 18px); }
  .card-icon img{ width: clamp(110px, 30vw, 150px); height: auto; }

  .quote-text{ font-size: clamp(20px, 5.8vw, 26px); }
  .quote-name{ font-size: clamp(18px, 5vw, 22px); }
  .quote-role, .quote-link{ font-size: clamp(14px, 4vw, 16px); }
  .quote-stars{ font-size: clamp(34px, 9vw, 44px); }

  .rate{ padding: clamp(24px, 4.5vw, 42px) clamp(16px, 4vw, 24px); }
  .rate-kicker, .rate-kicker-feature{ font-size: 14px; margin-bottom: 22px; }
  .rate-price{ font-size: clamp(34px, 10vw, 46px); }
  .rate-label{ font-size: clamp(16px, 4.8vw, 20px); }
  .rate-block{ margin-bottom: 34px; }
  .rate-topbar{
  border-radius: 18px 18px 0 0;
 font-size: 12px; padding: 10px 8px; }
}

@media (max-width: 380px){
  .client img{ width: min(220px, 84%); }
  .rate-topbar{
  border-radius: 18px 18px 0 0;
 letter-spacing: .08em; }
}


/* =========================================================
   OVERRIDES
   ========================================================= */

/* ==========================
   WHAT PEOPLE SAY
   ========================== */

.people-say-title{
  margin-top: 60px;
  margin-bottom: 50px;
}

.quotes{
  margin-top: 22px;

  column-count: 2;
  column-gap: 18px;
  column-fill: balance;
}

.quote{
  display: inline-block;
  width: 100%;
  margin: 0 0 18px;
  break-inside: avoid;

  border-radius: 18px;
  border: 1px solid #DFE1E5;
  background: #fff;
  padding: 26px 26px 22px;
}

.quote-text{
  margin: 0 0 22px;
  font-family: "Urbane", system-ui, sans-serif;

  /* desktop ~32px, scales down on smaller screens */
  font-size: clamp(18px, 1.8vw, 32px);
  line-height: 1.65;
  color: #1C1C22;
}

.quote-name{
  margin: 0;
  font-family: "Urbane", system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(15px, 1.35vw, 24px);
  color: #1C1C22;
}

.quote-role{
  margin: 6px 0 7px;
  font-size: clamp(13px, 1.05vw, 18px);
  font-family: "Urbane Light", system-ui, sans-serif;
  color: #8D8D8D;
}

.quote-meta{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-family: "Urbane", system-ui, sans-serif;
  flex-wrap: wrap;
}

.quote-stars{
  letter-spacing: 1px;
  font-size: clamp(30px, 2.8vw, 50px);
  color: #7F67F6;
}

.quote-sep{
  color: #1C1C22;
}

.quote-link{
  font-family: "Urbane Light", system-ui, sans-serif;
  font-size: clamp(13px, 1.05vw, 18px);
  color: #1C1C22;
}
.quote-link:hover{
  opacity: .85;
}

@media (min-width: 1400px){
  .quotes{ column-count: 3; }
}

@media (max-width: 980px){
  .quotes{
    column-count: 1;
    column-gap: 0;
  }
}

/* ==========================
   PRICING
   ========================== */

.pricing{
  padding: 120px 0;
  background: transparent;
}

.pricing-kicker{
  justify-content: center;
  margin-bottom: 30px;
}

.pricing-panel{
  background: #F9F9FE;
  border: 1px solid #E6E8EC;
  border-radius: 40px;
  padding: 90px 80px 100px;
}

.pricing-section-sub{
  margin:12px auto 0;
  text-align:center;
  color:#1C1C22;
  max-width:720px;
  font-family:"Urbane Light", Inter, system-ui, sans-serif;
  font-size: 24px;
  margin-bottom: 55px;
}

/* Pricing cards layout */
.rates{
  margin: 22px auto 0;
  width: 920px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-bottom: 70px;
}

/* Base card */
.rate{
  background: #fff;
  border-radius: 18px;
  border: 1px solid rgba(28,28,34,.12);
  padding: 70px 40px;
  text-align: center;
  box-shadow: none;
  min-height: 469px;
  min-width: 420px;
}

/* MID / SENIOR title */
.rate-kicker{
  padding-top: 25px;
  margin: 0 0 40px;
  font-size: 18px;
  letter-spacing: .08em;
  font-family: "Urbane Demi Bold", system-ui, sans-serif;
  color: #1C1C22;
}

/* spacing blocks ($ + label) */
.rate-block{
  margin: 0 0 70px;
}
.rate-block:last-child{
  margin-bottom: 0;
}

.rate-price{
  margin: 0;
  font-size: 48px;
  font-family: "Urbane", system-ui, sans-serif;
  color: #1C1C22;
}

.rate-label{
  margin: 8px 0 0;
  font-size: 24px;
  font-family: "Urbane Light", system-ui, sans-serif;
  color: rgba(28,28,34,.55);
}

/* FEATURE CARD */
.rate-feature{
  position: relative;
  background:#1C1C22;
  overflow: hidden;
  border: 0px solid rgba(28,28,34,.12);

  /* push content below bar */
  padding-top: 100px;
}

/* Top gradient bar */
.rate-topbar{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;

  font-family: "Urbane Demi Bold", system-ui, sans-serif;
  font-size: 14px;
  letter-spacing: .12em;
  color: #fff;

  background: linear-gradient(90deg, #7F67F6 0%, #4DA1FF 48%, #5DD9B3 97%);
}

/* feature text colors */
.rate-kicker-feature{
  margin: 0 0 40px;
  font-size: 18px;
  letter-spacing: .08em;
  font-family: "Urbane Demi Bold", system-ui, sans-serif;
  color: #fff;
}

.rate-price-feature{
  color: #fff;
  font-size: 48px;
}

.rate-feature .rate-label{
  color: rgba(255,255,255,.55);
  font-size: 24px;
}

@media (max-width: 980px){
  .rates{ grid-template-columns:1fr; width:100%; max-width: 920px; }
  .pricing-panel{padding: 46px 18px 56px; border-radius: 28px;}
  .pricing-section-sub{font-size: 18px;}
  .rate{padding: 48px 22px; min-height: auto; min-width: 0;}
  .rate-topbar{
    border-radius: 18px 18px 0 0;
    height: 42px;
  }
  .rate-feature{padding-top: 86px;}
}