/* ===========================
   Tokens
   =========================== */
:root{
  --ic-blue:#15B6DD;
  --ic-blue-dark:#0ea5e9;
  --ic-teal:#06b6d4;
  --ic-purple:#15B6DD;
  --ic-pink:#E987E3;
  --ic-black:#0b0b0f;
  --ic-gray-50:#f8fafc;
  --ic-gray-100:#f1f5f9;
  --ic-gray-600:#475569;
  --radius-xl:1.25rem;

}

*{ box-sizing:border-box; }

/* ===========================
   Base + Typography
   (Add in HTML head:)
   <link href="https://fonts.googleapis.com/css2?family=Urbanist:wght@400;500;600;700;800&display=swap" rel="stylesheet">
   =========================== */
body{
  margin:0;
  font-family:'Urbanist', sans-serif;
  font-weight:400;
  color:var(--ic-black);
  background:#fff;
}

h1,h2,h3,h4,h5,h6{
  font-family:'Urbanist', sans-serif;
  font-weight:400;
  margin:0 0 .6em;
}

.ic-eyebrow{
  font-family:'Urbanist', sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:600;
  font-size:30px;
  opacity:.9;
}

/* ===========================
   Layout helpers
   =========================== */
.ic-container{ max-width:1440px; margin:0 auto; padding:0 24px; }

.ic-btn{
  display:inline-block;
  padding:14px 22px;
  border-radius:999px;                 /* pill by default sitewide */
  background:#fff;
  color:#0b0b0f;
  font-weight:600;
  text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease;
  box-shadow:0 8px 24px #00000014;     /* ~8% */
}
.ic-btn:hover{ transform:translateY(-1px); box-shadow:0 12px 28px #0000001F; /* ~12% */ }

/* ===========================
   Top bar + Header
   =========================== */
.ic-topbar{
  background:var(--ic-blue);
  color:#fff;
  font-size:.9rem;
  text-align:center;
  padding:6px 8px;
}
.ic-topbar a{ color:#fff; text-decoration:underline; }

.ic-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 0;
}

.ic-logo-icon {
  width: 300px;   /* adjust as needed */
  height:auto;
  display: flex;
  font-size:12px
}
.ic-logo {
  display: block;
  align-items: center;
  gap: 10px;  /* spacing between icon and text */
  height:70px;
}

.ic-nav{ display:flex; gap:28px; }
.ic-nav a{
  color:var(--ic-black);
  text-decoration:none;
  font-weight:600;
  letter-spacing:.02em;
}
.ic-nav a:hover{ text-decoration:underline; }

/* ===========================
   HERO: 1440px content cap + full-bleed right image
   =========================== */
.ic-hero{
  position:relative;
  height:615px;                 /* fixed desktop height */
  width:100%;
  background:#0ea5e9;            /* solid behind the text */
  color:#fff;
  overflow:hidden;
  border-radius:0;
}

/* Inner container: capped width + vertical center */
.ic-hero-inner{
  position:relative;
  z-index:2;                     /* above image */
  max-width:1440px;
  margin:0 auto;
  padding:0 24px;
  height:100%;
  display:flex;
  align-items:center;
}

/* Text column ~40% of full hero width (capped area) */
.ic-copy{
    max-width:680px;
    width:100%;
}
.ic-hero h1{
  font-size:clamp(32px,4vw,56px);
  line-height:1.05;
  margin:12px 0 18px;
}
.ic-hero p{ font-size:18px; opacity:.95; }

/* CTA: prevent stretch in hero only, and square corners */
.ic-hero .ic-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 32px;
  border-radius:999px;             /* hero CTA uses 8px */
  width:auto !important;
  max-width:max-content;
  flex:0 0 auto;
  white-space:nowrap;
}

/* Full-bleed image on the right */
.ic-art{
  position:absolute;
  top:0; right:0; bottom:0;
  width:60vw;            /* visual 40/60 split vs viewport */
  min-width:600px;       /* keeps presence at mid sizes */
  z-index:1;             /* behind text */
  overflow:hidden;       /* clip the image corners if needed */
}

/* Image fills the box and fades on the LEFT edge */
.ic-art img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
/* mask: show hero bg on left, reveal image by ~35% */
  -webkit-mask-image: linear-gradient(to right,
    transparent 0%,
    #000 35%,
    #000 100%
  );
  mask-image: linear-gradient(to right,
    transparent 0%,
    #000 35%,
    #000 100%
  );
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
}

/* Seamless left-edge blend into hero bg */
.ic-art::before{ display:none !important; content:none !important;
}


/* ===========================
   Stats
   =========================== */
.ic-stats{ background:#fff; padding:36px 0; }
.ic-stats .ic-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.ic-stat{ text-align:center; padding:16px 10px; }
.ic-icon{
  width:149px; height:149px; margin:0 auto 12px; border-radius:50%;
  background:linear-gradient(270deg,var(--ic-pink),var(--ic-purple));
  display:grid; place-items:center; color:#fff; font-size:36px;
}

html, body { overflow-x:hidden; }

/* ===========================
   About
   =========================== */
.ic-about{
  background:linear-gradient(135deg, var(--ic-blue-dark), var(--ic-teal));
  color:#fff; padding:20px 0;
}
.ic-about .ic-grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:28px; align-items:center;
}
.ic-card{ background:#ffffff14; padding:22px; border-radius:16px; } /* ~8% white */

/* ===========================
   How it works
   =========================== */
.ic-how{ background:#fff; padding:20px 0; }
.ic-how .ic-grid{
  display:grid; grid-template-columns:.95fr 1.05fr; gap:32px; align-items:center;
}
.ic-shadow{ box-shadow:0 16px 48px #00000026; border-radius:16px; overflow:hidden; } /* ~15% */

.ic-how .ic-btn{
  background:#ec4899;   /* Intercake pink */
  color:#fff;           /* ensure text is white */
  border-radius:999px;
}

.ic-how .ic-btn:hover{
  background:#db2777;   /* slightly darker pink on hover */
}

/* ===========================
   Testimonials
   =========================== */
.ic-testimonials{
  background:#0ea5e9;
  position:relative;
  padding:70px 0;

  /* Decorative SVG background */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 415 580'><path d='M399.733 400.164L305.61 356.039L184.015 298.982C176.017 295.236 175.959 283.766 183.899 279.962L399.385 175.62C411.962 169.534 416.772 153.792 409.644 141.678C359.8 56.8235 268.401 0 163.904 0C6.028 0 -122 129.74 -122 289.794C-122 449.848 6.028 579.588 163.904 579.588C269.329 579.588 361.365 521.711 410.919 435.627C418.279 422.811 413.005 406.367 399.733 400.105V400.164ZM188.652 184.281C203.257 161.049 228.179 147.179 255.303 147.179C280.283 147.179 303.234 158.766 318.303 178.956C323.287 185.569 321.954 194.991 315.463 200.023C308.914 205.056 299.64 203.71 294.714 197.097C285.267 184.515 270.951 177.259 255.361 177.259C238.437 177.259 222.847 185.92 213.747 200.433C210.908 204.939 206.097 207.397 201.229 207.397C198.505 207.397 195.723 206.636 193.288 205.056C186.392 200.609 184.363 191.304 188.768 184.281H188.652ZM17.7354 188.378C32.3407 165.145 57.2624 151.276 84.3864 151.276C109.366 151.276 132.317 162.863 147.386 183.052C152.313 189.665 151.038 199.087 144.488 204.12C137.939 209.153 128.666 207.807 123.682 201.194C114.235 188.553 99.919 181.355 84.3285 181.355C67.4049 181.355 51.8144 190.016 42.715 204.529C39.9331 209.036 35.1226 211.493 30.1962 211.493C27.4722 211.493 24.6903 210.733 22.2561 209.153C15.3591 204.705 13.3306 195.4 17.7354 188.378ZM198.852 466.175C190.796 467.404 182.682 467.989 174.684 467.989C149.299 467.989 124.493 461.903 101.774 450.374L93.138 458.158L92.9641 457.982C68.3902 476.592 33.3839 473.432 12.5192 449.848C-8.34547 426.264 -7.4761 390.8 13.5625 368.211L13.3886 368.036L17.2717 364.525L20.7492 361.423C15.7648 348.9 12.2294 335.674 10.2009 321.98C8.80994 312.383 15.3591 303.488 24.8642 302.025C34.3112 300.679 43.1787 307.233 44.6276 316.83C49.9018 352.704 68.3322 384.363 96.6155 406.016C124.725 427.551 159.267 436.622 193.752 431.414C203.257 430.009 212.067 436.622 213.516 446.219C214.907 455.817 208.357 464.77 198.852 466.175Z' fill='%23ffffff' fill-opacity='0.24'/></svg>");
  background-repeat:no-repeat;
  background-position:left center;
  background-size: clamp(140px, 18vw, 320px) auto;
}

.ic-twrap{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
/*.ic-quote{
  background:#fff; border-radius:20px; padding:22px; box-shadow:0 10px 30px #0000001A; *//* ~10% */
/*}*/
/*.ic-quote{ position:relative; overflow:hidden; }
.ic-quote::before{
  content:"";
  position:absolute;
  top:8px; left:8px;               /* position */
  /*width:176px; height:144px;           /* size */
  /*background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 344 286' fill='none'><path d='M319.093 2.34082H24.9164C13.0221 2.34082 3.3736 9.03569 3.3736 17.2889V221.412C3.3736 229.665 13.0221 236.36 24.9164 236.36H63.5681L90.1423 277.78C95.1738 285.625 111.222 285.625 116.264 277.78L142.838 236.36H319.103C330.997 236.36 340.646 229.665 340.646 221.412V17.2889C340.646 9.03569 330.997 2.34082 319.103 2.34082H319.093Z' fill='%23ffffff' stroke='%23E987E3' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center/contain;
  opacity:.80;                       /* subtle */
  /*pointer-events:none;
}
.ic-stars{ color:#fbbf24; font-size:18px; letter-spacing:2px; }
.ic-quote small{ display:block; margin-top:10px; color:#64748b; }

/* ===========================
   Footer
   =========================== */
.ic-footer{
  background:#0b0b0f; color:#bfc4d1; padding:28px 0; font-size:.95rem;
}
.ic-footer a{ color:#bfc4d1; text-decoration:none; }
.ic-footer a:hover{ text-decoration:underline; }

/* ===========================
   Responsive (single source of truth)
   =========================== */
@media (max-width:1200px){
  .ic-copy{ max-width:48%; min-width:unset; }
  .ic-art{ width:52vw; }
}

@media (max-width:992px){
  .ic-hero{ height:auto; min-height:600px; }
  .ic-hero-inner{
    padding:48px 24px 340px;     /* space for image docked below */
    align-items:flex-start;
  }
  .ic-copy{ max-width:100%; min-width:0; }
  /*.ic-art{
    width:100%;
    height:320px;
    top:auto; left:0; right:0; bottom:0;
    min-width:0;
    background-position:center 30%;
  }
  .ic-art::before{
    background:linear-gradient(to top,
      #0ea5e9 0%,
      #0ea5e900 55%
    );
  }*/

  .ic-about .ic-grid,
  .ic-how .ic-grid{ grid-template-columns:1fr; }

  .ic-stats .ic-row{ grid-template-columns:1fr; }
  .ic-twrap{ grid-template-columns:1fr; }
}
/* Mobile: image docks below and fades upward */
@media (max-width: 992px){
  .ic-art{
    width:100%;
    height:320px;
    top:auto; left:0; right:0; bottom:0;
    min-width:0;
  }
  .ic-art img{
    -webkit-mask-image: linear-gradient(to top,
      transparent 0%,
      #000 55%,
      #000 100%
    );
    mask-image: linear-gradient(to top,
      transparent 0%,
      #000 55%,
      #000 100%
    );
  }
}
/* --- Section typography fixes --- */
.ic-about h2,
.ic-how h2{
  font-family:'Urbanist', sans-serif;
  font-weight:400;                /* base */
  font-size:clamp(28px, 3.2vw, 40px);
  line-height:1.15;
  letter-spacing:.01em;
  margin:0 0 14px;
}

.ic-about h2 strong,
.ic-how h2 strong{
  font-weight:800;                /* give <strong> visible contrast inside H2 */
}

.ic-about p,
.ic-how p{
  font-family:'Urbanist', sans-serif;
  font-weight:400;
  line-height:1.6;
  font-size:18px;
  margin:0 0 14px;
}

/* card text readability on the dark gradient */
.ic-about .ic-card p{
  color:#fff;                     /* ensure white on gradient */
  opacity:.95;
}

/* optional: tighten spacing + image display fixes */
.ic-card{ padding:22px; }
.ic-shadow img{ display:block; width:100%; height:auto; }

/* ===========================
   About hero
   =========================== */
.about-hero{
  position:relative;
  width:100%;
  height:615px;
  background:#0ea5e9;     /* same Intercake blue */
  color:#fff;
  overflow:hidden;
}

.about-hero-inner{
  position:relative;
  z-index:2;                     /* above image */
  max-width:1440px;
  margin:0 auto;
  padding:0 24px;
  height:615px;
  display:flex;
  align-items:center;
}

.about-copy p{
  max-width:520px;
  font-size:18px;
  line-height:1.6;
  opacity:.95;
  margin:0 0 20px;
}

/* CTA in About uses white pill by default; keep or switch to pink */
.about-cta{ border-radius:28px; }

/* Right image with soft left blend (mask, no overlay) */
.about-art{
  position:absolute;
  top:0; right:0; bottom:0;
  width:50vw;            /* visual 40/60 split vs viewport */
  min-width:600px;       /* keeps presence at mid sizes */
  z-index:1;             /* behind text */
  overflow:hidden;       /* clip the image corners if needed */
}
.about-art img{
  display:block;
  width:100%;
  height:615px;
  object-fit:cover;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 32%, #000 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 32%, #000 100%);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}

/* ===========================
   Industries
   =========================== */
.industries{ background:#fff; padding:70px 0 90px; }
.industries-title{
  text-align:center;
  font-size:clamp(28px,3.2vw,44px);
  line-height:1.15;
  margin:0 0 28px;
}
.industries-title strong{ font-weight:800; }

.industries-grid{
  list-style:none; padding:0; margin:0 auto 36px;
  max-width:1100px;
  display:grid; gap:26px 36px;
  grid-template-columns: repeat(6, 1fr);
  justify-items:center; align-items:start;
}
.industries-grid li{ text-align:center; }
.industries-grid .bub{
  width:88px; height:88px; border-radius:50%;
  display:grid; place-items:center;
  background:#49baf2;       /* blue badges from screenshot */
  color:#fff; font-size:36px;
  margin:0 auto 10px;
  box-shadow:0 10px 24px #00000014;
}
.industries-grid p{
  font-size:14px; line-height:1.35; max-width:140px; margin:0 auto;
}

/* Pink CTA centered below icons */
.industries-cta{ display:flex; justify-content:center; margin-top:12px; }
.ic-btn--pink{ background:#ec4899; color:#fff; border-radius:28px; }
.ic-btn--pink:hover{ background:#db2777; }

/* Responsive */
@media (max-width: 1200px){
  .industries-grid{ grid-template-columns: repeat(4, 1fr); }
}
/*@media (max-width: 992px){
  .about-hero-inner{
    min-height:auto;
    padding:48px 24px;
  }
  .about-art{ min-height:340px; }
  .industries-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px){
  .industries-grid{ grid-template-columns: repeat(2, 1fr); }
}
*/

/* Bubble container replaces the standard card look */
/* Bubble card using inline SVG (no distortion, content-aware) */
.ic-quote.ic-quote--bubble{
  position:relative;
  min-height: clamp(200px, 36vw, 320px); /* grows with content */
}

/* The SVG bubble fills the card */
.ic-quote.ic-quote--bubble .bubble-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  pointer-events:none; /* clicks go to links / content */
}

/* Content area padding: extra bottom for the tail */
.ic-quote.ic-quote--bubble .quote-body{
  position:relative;
  z-index:1;
  padding:
    clamp(28px, 5vw, 30px)   /* top */
    clamp(20px, 5vw, 40px)   /* right */
    clamp(52px, 7vw, 72px)   /* bottom (tail clearance) */
    clamp(35px, 6vw, 60px);  /* left */
  color:#0b0b0f;
}

/* Stars + text */
.ic-quote.ic-quote--bubble .ic-stars{
  color:#fbbf24;
  font-size: clamp(14px, 1.6vw, 18px);
  letter-spacing: 2px;
  margin-bottom: clamp(6px, 1vw, 10px);
}

.ic-quote.ic-quote--bubble p{
  margin:0;
  font-size: clamp(14px, 1.4vw, 18px);
  line-height:1.55;
  /* hard-wrap safety for long words/URLs */
  white-space: normal;
  overflow-wrap:anywhere;
  word-break: break-word;
  hyphens:auto;
}

.ic-quote.ic-quote--bubble small{
  display:block;
  margin-top: clamp(8px, 1.2vw, 12px);
  font-size: clamp(12px, 1.2vw, 14px);
  color:#64748b;
}

/* Extra tightening on very narrow phones */
@media (max-width:600px){
  .ic-quote.ic-quote--bubble .quote-body{
    padding: 10px 18px 46px 22px;
  }
}
/* Default (tablet/desktop) – keep your current rules */

/* Mobile: lock aspect ratio so bubble scales without distortion */
@media (max-width: 992px){
  .ic-quote.ic-quote--bubble{
    position: relative;
    aspect-ratio: 344 / 286;   /* <- keeps the bubble’s shape */
    max-width: 520px;          /* optional: cap width */
    margin: 0 auto;            /* center in column */
  }

  /* The SVG bubble fills the card (no stretch because of aspect-ratio above) */
  .ic-quote.ic-quote--bubble .bubble-bg{
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    display: block; pointer-events: none;
  }

  /* Place content inside the “safe” area of the bubble using % insets */
  .ic-quote.ic-quote--bubble .quote-body{
    position: absolute;
    inset: 1% 6% 22% 9%;  /* top right bottom left (extra bottom for tail) */
    overflow: hidden;      /* prevent spill */
    display: flex; flex-direction: column; justify-content: flex-start;
    padding: 22px 18px 46px 22px;
  }

  /* Fluid, tighter type so copy fits comfortably */
  .ic-quote.ic-quote--bubble .ic-stars{
    font-size: clamp(13px, 3.5vw, 16px);
    margin-bottom: clamp(4px, 1.2vw, 8px);
  }
  .ic-quote.ic-quote--bubble p{
    margin: 0;
    font-size: clamp(13px, 3.6vw, 15px);
    line-height: 1.5;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
  }
  .ic-quote.ic-quote--bubble small{
    margin-top: clamp(6px, 2vw, 10px);
    font-size: clamp(12px, 3.2vw, 14px);
    color:#64748b;
  }
}
@media (min-width:400px) and (max-width:550px){
  .ic-quote.ic-quote--bubble .ic-stars{
    font-size: 13px;   /* down from clamp */
  }
  .ic-quote.ic-quote--bubble p{
    font-size: 13.5px; /* scale main quote text */
    line-height: 1.45; /* a bit tighter */
  }
  .ic-quote.ic-quote--bubble small{
    font-size: 12px;   /* attribution */
  }
}

/* Logo sizing (uses your existing tokens) */
.ic-logo-img{ max-height:70px; height:auto; width:auto; display:block; }

/* Header layout */
.ic-header{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 0; }

/* Desktop nav (your existing ic-nav styles apply) */
.ic-nav{ display:flex; gap:28px; }

/* Mobile toggle button (hidden on desktop) */
.ic-menu-toggle{
  display:none; position:relative;
  width:42px; height:38px; border:0; background:transparent; cursor:pointer;
}
.ic-menu-bar{
  position:absolute; left:8px; right:8px; height:3px; background:var(--ic-black);
  border-radius:3px; transition:transform .2s ease, opacity .2s ease, top .2s ease;
}
.ic-menu-bar:nth-child(1){ top:10px; }
.ic-menu-bar:nth-child(2){ top:17px; }
.ic-menu-bar:nth-child(3){ top:24px; }

/* When menu is open, animate to an “X” */
.ic-menu-toggle.is-open .ic-menu-bar:nth-child(1){ top:17px; transform:rotate(45deg); }
.ic-menu-toggle.is-open .ic-menu-bar:nth-child(2){ opacity:0; }
.ic-menu-toggle.is-open .ic-menu-bar:nth-child(3){ top:17px; transform:rotate(-45deg); }

/* ----- Mobile behavior ----- */
@media (max-width: 992px){
  .ic-menu-toggle{ display:block; }

  /* Stack header a bit tighter on mobile */
  .ic-header{ padding:12px 0; }

  /* Turn nav into a slide-down panel */
  .ic-nav{
    position:absolute; left:0; right:0; top:100%;
    background:#fff;
    display:grid; gap:0;            /* vertical list */
    border-top:1px solid var(--ic-gray-100);
    box-shadow:0 12px 30px #00000014;
    transform-origin:top;
    transform:scaleY(0);
    opacity:0;
    pointer-events:none;
    transition:transform .2s ease, opacity .2s ease;
    z-index:99;
  }
  /* Keep nav inside the page width */
  .ic-header + .ic-nav{ /* just in case of different placement */ }
  .ic-container{ position:relative; } /* anchor the dropdown within the container */

  .ic-nav a{
    padding:14px 24px;
    border-bottom:1px solid var(--ic-gray-100);
    color:var(--ic-black);
    text-decoration:none;
    font-weight:600;
  }
  .ic-nav a:last-child{ border-bottom:0; }

  /* Open state */
  .ic-nav.is-open{
    transform:scaleY(1);
    opacity:1;
    pointer-events:auto;
  }
}
@media (max-width: 767px) {
  .about-hero {
    height: auto;                 /* let content define height */
  }
  .about-hero-inner {
    height: auto;                 /* remove fixed 615px */
    padding: 0;                   /* we'll pad children */
    display: block;               /* drop flex overlay layout */
  }

  /* Image goes first, full width, not absolute */
  .about-art {
    position: static;             /* no overlay */
    width: 100%;
    min-width: 0;                 /* allow shrink */
    height: auto;
    z-index: 1;
    overflow: visible;
    margin: 0;                    /* reset any inherited spacing */
  }
  .about-art img {
    width: 100%;
    height: auto;                 /* keep aspect */
    object-fit: cover;
    -webkit-mask-image: none;     /* remove hard mask on small screens */
    mask-image: none;
    display: block;
  }

  /* Text follows below image, padded and readable */
  .about-hero .about-copy,
  .about-hero .hero-content {     /* use whichever wrapper you have */
    padding: 16px 20px 24px;
  }

  /* Scalable type to avoid overflow */
  .about-hero .hero-content h1,
  .about-hero h1 {
    font-size: clamp(24px, 7vw, 34px);
    line-height: 1.15;
    margin: 0 0 8px;
  }
  .about-copy p {
    max-width: none;
    font-size: clamp(14px, 4vw, 16px);
    line-height: 1.55;
    margin: 0 0 16px;
  }

  /* Optional: center-align mobile hero */
  .about-hero { text-align: left; }   /* change to center if you prefer */
}

/* ===== Tablet comfort tweaks ===== */
@media (min-width: 768px) and (max-width: 1024px) {
  .about-hero,
  .about-hero-inner { height: auto; }
  .about-art { min-width: 0; width: 50vw; }
  .about-art img { height: 100%; }
}

/* ===== Desktop keeps your original intent ===== */
/* (no changes needed; your original rules apply above 1024px) */

/* Contact section with background image + blue mask (Figma-style) */
.ic-contact {
  position: relative;
  padding: 72px 0;
  color: #fff;
  min-height: 100vh;
  overflow: hidden;

  /* background image */
  background: url("images/contactBG.png") center / cover no-repeat;

  /* blue overlay on top */
}
.ic-contact::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #15B6DD;   /* your brand blue */
  opacity: 0.87;          /* adjust: 0.4 lighter, 0.7 darker */
  z-index: 0;
}

/* make sure content sits above overlay */
.ic-contact-inner {
  position: relative;
  z-index: 1;
  display:grid; gap:28px;
  max-width:900px;
}


.ic-contact-head h1{
  font-size:clamp(28px,4vw,48px);
  line-height:1.1; margin:0 0 8px;
}
.ic-contact-head p{ margin:0; opacity:.9; }

/* Form panel (reuse your existing styles if already added) */
.ic-form{
  background:#ffffffee; color:var(--ic-black);
  backdrop-filter:saturate(120%) blur(2px);
  border-radius:16px; padding:24px;
  box-shadow:0 16px 48px #00000026;
}
.ic-form-row{ display:grid; gap:8px; margin-bottom:16px; }
.ic-form-row label{ font-weight:600; font-size:14px; color:#0b0b0f; }
.ic-form-row input, .ic-form-row textarea{
  width:100%; border:1px solid var(--ic-gray-100);
  border-radius:12px; padding:12px 14px; font:inherit; background:#fff;
  outline:none; transition:border .15s, box-shadow .15s;
}
.ic-form-row input:focus, .ic-form-row textarea:focus{
  border-color:var(--ic-blue-dark);
  box-shadow:0 0 0 3px rgba(14,165,233,.15);
}
.ic-form-actions{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:8px; }
.ic-form-note{ margin:0; font-size:14px; color:var(--ic-gray-600); }
.ic-form-status{ margin-top:10px; font-weight:600; color:var(--ic-blue-dark); }

/* Mobile tweaks */
@media (max-width:640px){
  .ic-contact{ padding:56px 0; }
  .ic-form{ padding:18px; }
  /* optional: switch to simpler cover behavior on small screens */
  .ic-contact{
    background:
      linear-gradient(rgba(21,182,221,0.70), rgba(21,182,221,0.70)),
      url("images/ContactBG.png") center / cover no-repeat;
    background-blend-mode: multiply;
  }
}
/* Row under the form: address left, logo right */
.ic-contact-row{
  display:flex;
  align-items:flex-end;          /* aligns to bottom like the mock */
  justify-content:space-between;
  gap:20px;
  margin-top:20px;
  color:#fff;
}

.ic-contact-address{
  margin:0;
  font-size:16px;
  line-height:1.6;
  opacity:.95;
}
.ic-contact-address a{ color:#fff; text-decoration:underline; }
.ic-contact-address a:hover{ text-decoration:none; }

/* Logo on the right */
.ic-contact-mark{
  width:auto;
  max-width:180px;               /* tweak to match your comp */
  height:48px;                   /* consistent height as in screenshot */
  object-fit:contain;
  display:block;
}

/* Stack on small screens */
@media (max-width: 720px){
  .ic-contact-row{
    flex-direction:column;
    align-items:flex-start;
  }
  .ic-contact-mark{
    height:40px;
    margin-top:8px;
  }
}