/* ============================================================================
   Samya Development Resources — landing page
   Built on Bootstrap 5.3.3. Reference comp: Samya_UiUx_Final_Op1.pdf (1440px wide).
   All px values below are taken from that comp at a 1440px viewport.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens -- */
:root {
  /* brand */
  --sam-purple:        #441D4B;
  --sam-purple-soft:   #B48DCD;
  --sam-gold:          #BE771C;
  --sam-cream:         #FEF9F4;
  --sam-social:        #7D40A4;

  /* ink */
  --sam-ink:           #110F0D;
  --sam-body:          #4F4C4D;
  --sam-body-strong:   #393536;

  /* card / surface tints */
  --sam-lavender:      #E7CCE9;
  --sam-sage:          #D1D0B4;
  --sam-blush:         #EDD5CD;
  --sam-amber:         #E9CC83;
  --sam-form:          #F0DFF2;

  /* added for the About Us / What We Do pages (Samya_About Us.pdf,
     Samya_What We Do.pdf) — a second accent (olive) and the tinted
     panel/hero backgrounds those comps introduce. */
  --sam-olive:         #526628;
  --sam-hero-tint:     #F8F0F9;   /* About Us / What We Do hero background   */
  --sam-panel-pink:    #ECD5ED;   /* Our Vision panel                         */
  --sam-panel-gold:    #F4DDA1;   /* Our Mission panel                        */
  --sam-cream-alt:     #F9F3E9;   /* Our Approach section background          */
  --sam-footer-bar:    #F5DDF0;   /* footer copyright bar (was --sam-purple)  */
  --sam-svc-lavender:  #FDF3FA;   /* service sub-item panel tints, one per    */
  --sam-svc-sage:      #FCFAE7;   /* "What We Do" service (same family as     */
  --sam-svc-blush:     #FEF7F6;   /* the dark svc panel above it, just much   */
  --sam-svc-gold:      #FCF5E2;   /* lighter)                                 */
  --sam-team-blush:    #FAEEEC;   /* Team page — Leadership profile band      */

  /* type — updated per client request: Rokkitt for headings/nav/buttons/section
     titles, Baloo 2 for body copy. Josefin Slab remains on the form labels only
     (that pairing predates this update and wasn't part of the font change). */
  --sam-font-display:  "Rokkitt", Georgia, serif;
  --sam-font-body:     "Baloo 2", "Segoe UI", system-ui, sans-serif;
  --sam-font-section:  "Josefin Slab", Georgia, serif;

  /* layout */
  --sam-container:     1270px;   /* content width inside a 1440px viewport   */
  --sam-gutter:        24px;
  --sam-rail:          1194px;   /* carousel track width                     */
}

/* ------------------------------------------------------------------ base -- */
* { box-sizing: border-box; }

body {
  font-family: var(--sam-font-body);
  font-size: 20px;
  line-height: 1.55;
  color: var(--sam-body);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; }

a { text-decoration: none; color: inherit; }

:focus-visible {
  outline: 2px solid var(--sam-purple);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1080;
  background: var(--sam-purple);
  color: #fff;
  padding: 10px 18px;
  border-radius: 4px;
}

.container-samya {
  width: 100%;
  max-width: calc(var(--sam-container) + var(--sam-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--sam-gutter);
}

/* ---------------------------------------------------------------- button -- */
.btn-samya {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 47px;
  padding: 0 22px;
  border: 0;
  border-radius: 24px;
  background: var(--sam-purple);
  color: #fff;
  font-family: var(--sam-font-display);
  font-size: 20.5px;
  font-weight: 500;
  line-height: 1.15;
  box-shadow: 4px 6px 12px rgba(68, 29, 75, .30);
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn-samya:hover,
.btn-samya:focus-visible {
  background: #5c2a65;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 4px 9px 16px rgba(68, 29, 75, .34);
}
.btn-samya:active { transform: translateY(0); }

/* Ghost variant — same shape/size/type as .btn-samya (Home.pdf's "Start a
   Conversation" button measures the same as every filled button on the
   page), just outlined instead of filled. Only one colourway is needed here
   (light border for the purple CTA banner) but named --light in case a
   second, darker-background use turns up later. */
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 47px;
  padding: 0 22px;
  border-radius: 24px;
  font-family: var(--sam-font-display);
  font-size: 20.5px;
  font-weight: 500;
  line-height: 1.15;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn-outline--light {
  border: 2px solid #C9A9CE;
  background: #fff;
  color: var(--sam-purple);
}
.btn-outline--light:hover,
.btn-outline--light:focus-visible {
  background: var(--sam-purple);
  color: #fff;
  border-color: var(--sam-purple);
  transform: translateY(-1px);
}
.btn-outline--light:active { transform: translateY(0); }

/* --------------------------------------------------------- section title -- */
.section-title {
  margin: 0;
  font-family: var(--sam-font-display);
  font-weight: 400;
  font-size: 48.3px;
  line-height: 1.05;
  letter-spacing: .07em;
  text-indent: .07em;          /* balances the trailing letter-space */
  color: var(--sam-ink);
  text-align: center;
}
.section-title::after {
  content: "";
  display: block;
  width: 165px;
  height: 4px;
  margin: 2px auto 0;
  background: var(--sam-gold);
}

/* ==================================================================
   HEADER
   ================================================================== */
.site-header { padding-top: 58px; background: #fff; }

.site-header .navbar { --bs-navbar-nav-link-padding-x: 0; }

.site-header .container-samya {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.navbar-brand { display: inline-flex; align-items: center; min-height: 44px; }
.site-logo { width: 199px; height: auto; display: block; margin-left: -8px; }

.main-nav { gap: 32px; }

@media (min-width: 1200px) {
  /* the comp sets the nav on the logo's baseline rather than the pill's centre */
  .main-nav { transform: translate(12px, 14px); }
}

.main-nav .nav-link {
  padding: 0;
  font-family: var(--sam-font-display);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--sam-ink);
  transition: color .2s ease;
}
.main-nav .nav-link:hover,
.main-nav .nav-link:focus-visible { color: var(--sam-purple); }
.main-nav .nav-link.active { color: #7C549C; }

/* "About Us" sub-menu (Team) */
.main-nav .dropdown-toggle::after { margin-left: 6px; vertical-align: .1em; }
.main-nav .dropdown-menu {
  margin-top: 12px;
  padding: 8px 0;
  border: 0;
  border-radius: 10px;
  box-shadow: 0 18px 40px rgba(68, 29, 75, .16);
}
.main-nav .dropdown-item {
  padding: 10px 22px;
  font-family: var(--sam-font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--sam-ink);
}
.main-nav .dropdown-item:hover,
.main-nav .dropdown-item:focus { background: var(--sam-hero-tint); color: var(--sam-purple); }
.main-nav .dropdown-item.active,
.main-nav .dropdown-item:active { background: transparent; color: #7C549C; }

.header-cta { flex: 0 0 auto; font-size: 20px; padding: 0 20px; }

.navbar-toggler {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}
.navbar-toggler:focus { box-shadow: none; }

/* ==================================================================
   HERO
   ================================================================== */
.hero {
  padding: 50px 0 0 0;
  margin: 50px 0 0 0;
}

.eyebrow {
  margin: 0;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--sam-ink);
}
/* Small olive caption used ahead of the new "Our Work"/"Featured Project"
   headings (Samya_Home.pdf) — bolder than the hero's plain eyebrow, which
   stays untouched. */
.eyebrow--olive { font-weight: 600; color: var(--sam-olive); }
.eyebrow__sep {
  display: inline-block;
  margin: 0 20px;
  color: var(--sam-ink);
}

.hero__title {
  margin: 18px 0 0;
  max-width: 610px;
  font-family: var(--sam-font-display);
  font-weight: 600;
  font-size: 66px;
  line-height: 63.5px;
  color: var(--sam-purple);
}

.hero__lead {
  margin: 13px 0 0;
  max-width: 600px;
  font-size: 20px;
  line-height: 31px;
  color: var(--sam-body);
}

.hero__copy .btn-samya {
  /*margin-top: 29px;*/
  margin: 20px 0;
}

.hero__art {
  display: flex;
  justify-content: flex-end;
  /*margin-top: 24px;*/
  /* top/bottom padding is spin clearance, not decoration: the illustration
     isn't circular (the dress-flare and cane/wheelchair figures break the
     radius), so a full rotation's bounding box is its diagonal, ~31% taller
     than the image itself. This reserves that swing room on an otherwise
     empty (transparent) margin so the spin never touches the copy or the
     next section. See "hero illustration spin" below. */
  /*padding-top: 165px;*/
  padding-bottom: 100px;
  padding-right: 15px;
}

/* the rotating element is sized as a fraction of its column (75%, capped at
   560px) specifically so the same margin math holds at every width from the
   992px breakpoint up: the unused 25% of column width is comfortably more
   than the ~15% each side a full rotation needs to swing into. */
.hero__art-spin {
  flex: 0 0 auto;
  width: 100%;
  max-width: 560px;
  transform-origin: 50% 50%;
  will-change: transform;
  animation: hero-spin 80s linear infinite;
}
.hero__art-spin img { display: block; width: 100%; height: auto; }

@keyframes hero-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ==================================================================
   SECTION SHELL
   ================================================================== */
.section { position: relative; }
.section--wwd      { padding: 61px 0 65px; }
.section--about    { padding: 50px 0 0; background: var(--sam-cream); overflow: hidden; }
.section--leadership { padding: 100px 0 30px; }
.section--clients  { padding: 80px 0 140px; }
.section--connect  { padding: 80px 0 0; overflow: hidden; }
.section--contact  { padding: 80px 0 0; }

/* ==================================================================
   RAIL (What We Do + Our Clients carousels)
   ================================================================== */
.rail { position: relative; margin-top: 41px; }

.rail__viewport {
  max-width: var(--sam-rail);
  margin-inline: auto;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /*-webkit-mask-image: linear-gradient(to right, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);*/
}
.rail__viewport::-webkit-scrollbar { display: none; }

.rail__track {
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rail__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 34px;
  height: 46px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--sam-purple-soft);
  transition: color .2s ease, opacity .2s ease;
}
.rail__btn svg {
  width: 22px;
  height: 36px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rail__btn:hover:not(:disabled) { color: var(--sam-purple); }
.rail__btn:disabled { opacity: .55; cursor: default; }
.rail__btn--prev { left: calc(50% - var(--sam-rail) / 2 - 58px); }
.rail__btn--next { right: calc(50% - var(--sam-rail) / 2 - 58px); }

/* ------------------------------------------------------- what-we-do card -- */
.wwd-card {
  flex: 0 0 284px;
  max-width: 284px;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
}

.wwd-card__img {
  display: block;
  width: 100%;
  height: 173px;
  object-fit: cover;
}

.wwd-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 209px;
  padding: 18px 16px 20px;
}
.wwd-card__body--lavender { background: var(--sam-lavender); }
.wwd-card__body--sage     { background: var(--sam-sage); }
.wwd-card__body--blush    { background: var(--sam-blush); }
.wwd-card__body--amber    { background: var(--sam-amber); }

.wwd-card__title {
  margin: 0 0 25px;
  min-height: 63px;                 /* keeps the terms line aligned across cards */
  font-family: var(--sam-font-display);
  font-weight: 700;
  font-size: 21.5px;
  line-height: 21px;
  color: var(--sam-purple);
}

.wwd-card__terms {
  margin: 0;
  font-size: 16px;
  line-height: 22px;
  color: var(--sam-body-strong);
}

.wwd-card__link {
  margin-top: auto;
  padding: 22px 0 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sam-font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--sam-purple);
}
.wwd-card__link svg {
  width: 10px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .2s ease;
}
.wwd-card__link:hover svg { transform: translateX(4px); }

/* ==================================================================
   ABOUT US
   ================================================================== */
.section--about .section-title { margin-bottom: 83px; }

.about__copy {
  position: relative;
  z-index: 2;
  max-width: 625px;
  padding-left: 63px;
  padding-bottom: 29px;
}

.about__title {
  margin: 0;
  font-family: var(--sam-font-display);
  font-weight: 600;
  font-size: 66px;
  line-height: 63.5px;
  color: var(--sam-purple);
}

.about__text {
  margin: 32px 0 0;
  max-width: 562px;
  font-size: 20px;
  line-height: 30.5px;
  color: var(--sam-body);
}

.about__copy .btn-samya { margin-top: 42px; }

.about__visual {
  position: absolute;
  right: max(0px, calc((100% - 1440px) / 2));
  bottom: 0;
  width: 755px;
  max-width: 54%;
  pointer-events: none;
}

/* ==================================================================
   LEADERSHIP
   ================================================================== */
.section--leadership .section-title { margin-bottom: 105px; }

.leadership__grid {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 60px;
}

.leadership__visual { flex: 0 0 460px; max-width: 460px; /*aspect-ratio: 3 / 2;*/ overflow: hidden; }
.leadership__visual img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }

.leadership__quote {
  position: relative;
  flex: 0 0 533px;
  max-width: 533px;
  margin: 0;
  padding-top: 35px;
  display: flex;
  flex-direction: column;
}

.leadership__mark {
  position: absolute;
  top: -5px;
  left: -110px;
  width: 97px;
}

.leadership__quote blockquote {
  margin: 0;
  /* Matched to the handwritten note baked into images/home-connect-cta.png
     ("A future where everyone belongs is possible.") rather than Home.pdf's
     own SavoyeLetPlain quote script, per request — Caveat is that note's font. */
  font-family: var(--sam-font-display);
  /*font-weight: 600;*/
  font-size: 25px;
  line-height: 38px;
  text-align: left;
  color: var(--sam-social);
}

.leadership__quote figcaption { margin-top: auto; }

.leadership__name,
.leadership__role { display: block; color: var(--sam-body); }
.leadership__name { font-size: 22px; font-weight: 700; line-height: 1.45; color: var(--sam-olive); }
.leadership__role { font-size: 22px; font-weight: 400; line-height: 1.45; }

.leadership__dots {
  position: static;
  margin: 57px 0 0;
  gap: 0;
  justify-content: center;
}
/* The visible dot stays 12px (matches the comp); the button itself is a full
   44px touch target with the dot centred on it via ::before, so mobile taps
   don't need to land on a 12px bullseye. */
.leadership__dots [data-bs-target] {
  position: relative;
  width: 44px;
  height: 44px;
  margin: 0;
  border: 0;
  background: transparent;
  opacity: 1;
  text-indent: 0;
}
.leadership__dots [data-bs-target]::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  transform: translate(-50%, -50%);
  border: 1.5px solid var(--sam-purple);
  border-radius: 50%;
  background: transparent;
}
.leadership__dots .active::before { background: var(--sam-purple); }

/* ==================================================================
   OUR WORK (new in Samya_Home.pdf — ported from the design 2 build,
   src2/css/style.css, which already had this exact section: same blush
   background, gold tag chips and purple ink, just not on the homepage
   until now)
   ================================================================== */
.section--work { padding: 60px 0 10px; background: var(--sam-blush); }

.work__grid { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 40px; align-items: center; }
.work__stage { position: relative; }

.work__title {
  margin: 12px 0 0;
  font-family: var(--sam-font-display);
  font-weight: 700;
  font-size: 44px;
  line-height: 54px;
  color: var(--sam-purple);
}
.work__text { margin: 18px 0 0; font-size: 16px; line-height: 26px; color: var(--sam-body); }
.work__copy .btn-samya { margin-top: 22px; }

/* #workCarousel's min-height is kept equal to its tallest slide via JS
   (js/main.js, syncCarouselHeight) rather than CSS, because fixing it with a
   grid/stacking trick fights Bootstrap's own transform-based slide
   animation — the outgoing and incoming slides render on top of each other
   instead of sliding past one another. */
/* Narrower than .work__stage by the nav's own footprint, so the carousel's
   box (and everything that slides inside it) never reaches under .work__nav
   — no overlap to fight over with z-index, and arrows stay clickable. */
.work__carousel { width: calc(100% - 120px); }
.work__carousel .carousel-inner { overflow: hidden; }
.work__carousel .carousel-item .work__slide { display: flex; min-height: 300px; border-radius: 20px; overflow: hidden; }

.work__photo { flex: 1 1 45%; width: 45%; object-fit: cover; display: block; }

/* .work__photo--contain: for a slide that's just one image with no card
   (e.g. an event banner with text baked into the graphic), object-fit: cover
   crops that text off. contain shows the whole image, letterboxed on the
   section's own background rather than cropped. */
.work__photo--contain { object-fit: contain; background: var(--sam-blush); }

.work__card {
  flex: 1 1 55%;
  padding: 28px 32px;
  background: #FFFAFA;
  display: flex;
  flex-direction: column;
}
.work__card-title {
  margin: 4px 0 0;
  font-family: var(--sam-font-display);
  font-weight: 600;
  font-size: 23px;
  line-height: 1.3;
  color: var(--sam-purple);
}
.work__card-text { margin: 14px 0 0; font-size: 15px; line-height: 24px; color: var(--sam-body); }

.work__tags { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.work__tags li {
  padding: 6px 16px;
  border-radius: 16px;
  background: #e1bf58;
  color: #5A4020;
  font-size: 13px;
  font-weight: 500;
}

.work__link {
  margin-top: 8px;
  padding: 10px 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sam-font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--sam-purple);
}
.work__link svg { width: 9px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.work__link:hover svg { transform: translateX(4px); }

/* Featured-project prev/next — same 44px circle-button treatment as the
   Our Approach carousel on about-us.html (kept as its own copy rather than
   a shared class, so neither page depends on the other). Only one project
   ships today; the carousel is real (Bootstrap, data-bs-slide) so more
   slides can be added later without new markup patterns. */
.work__nav {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: center;
}
.work__nav button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--sam-social);
  background: none;
  color: var(--sam-social);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color .2s ease, color .2s ease;
}
.work__nav button svg { width: 9px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.work__nav button:hover:not(:disabled) { background: var(--sam-social); color: #fff; }
.work__nav button:disabled { opacity: .4; cursor: default; }

/* ==================================================================
   OUR CLIENTS
   ================================================================== */
.rail--clients { margin-top: 64px; }

.rail--clients .rail__viewport {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
}

.rail--clients .rail__track--clients {
  gap: 56px;
  align-items: center;
  justify-content: space-between;
  min-width: 100%;
}
.client {
  flex: 0 0 220px;
  height: 142px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: center;
}
.client img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; }

/* ==================================================================
   "LET'S BUILD..." CTA BANNER (new in Samya_Home.pdf — the same purple
   banner src2 uses for its whole Connect section, here inserted as its own
   section ahead of the existing Connect form. Named cta-banner__* rather
   than reusing connect__* because .connect__leaf/.connect__flower already
   belong to the form section right below it.)
   ================================================================== */
.section--cta { margin-top: 80px; position: relative; padding: 48px 0; min-height: 260px; background: var(--sam-purple); overflow: visible; display: flex; align-items: center; }

.cta-banner__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 320px);
  gap: 48px;
}
.cta-banner__title {
  margin: 0;
  font-family: var(--sam-font-display);
  /*font-weight: 700;*/
  font-size: 52px;
  line-height: 54px;
  color: #e3d0e6;
}
.cta-banner__aside { padding-left: 24px; border-left: 2px solid rgba(255,255,255,.35); }
.cta-banner__text { margin: 0; font-size: 16px; line-height: 26px; color: #F0DEE9; }
.cta-banner__aside .btn-outline { margin-top: 20px; }

.cta-banner__decor { position: absolute; right: max(0px, calc((100% - 1440px) / 2)); bottom: 0; z-index: 0; pointer-events: none; }
.cta-banner__decor img { display: block; width: clamp(300px, 45vw, 670px); max-width: none; height: auto; }

/* ==================================================================
   CONNECT
   ================================================================== */
.section--connect .section-title { margin-bottom: 58px; }

.connect__leaf,
.connect__flower {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}
.connect__leaf   { left: max(calc((100% - 1440px) / 2) - 60px); height: 66%; width: auto; }
.connect__flower { left: calc(50% + 510px); top: 191px; width: 127px; }

.connect-form {
  position: relative;
  z-index: 1;
  max-width: 1020px;
  margin-inline: auto;
  padding: 0 16px 26px;
  background: var(--sam-form);
}

.connect-form__row {
  display: flex;
  border-bottom: 2px solid #fff;
}
.connect-form__field { flex: 1 1 50%; min-width: 0; }
.connect-form__row--single .connect-form__field { flex: 1 1 100%; }

.connect-form input,
.connect-form textarea {
  display: block;
  width: 100%;
  height: 76px;
  padding: 0 10px 0 0;
  border: 0;
  background: transparent;
  font-family: var(--sam-font-display); /*var(--sam-font-section);*/
  font-weight: 300;
  font-size: 23px;
  line-height: 1.4;
  color: var(--sam-body-strong);
  resize: none;
}
.connect-form textarea { padding-top: 25px; height: 76px; }
.connect-form input:focus,
.connect-form textarea:focus { outline: none; box-shadow: none; }
.connect-form ::placeholder { color: var(--sam-body-strong); opacity: 1; }
.connect-form .is-invalid { box-shadow: inset 0 -2px 0 #b3261e; }

.connect-form__status {
  margin: 14px 0 0;
  min-height: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--sam-purple);
}
.connect-form__status:empty { margin: 0; }
.connect-form__status.is-error { color: #8c1d18; }

.connect-form__actions { margin-top: 46px; text-align: center; }

/* ==================================================================
   CONTACT US
   ================================================================== */
.section--contact .section-title { margin-bottom: 103px; }

.contact__grid {
  display: flex;
  align-items: stretch;
  gap: 55px;
}

.contact__map { flex: 0 0 760px; max-width: 760px; display: block; }
.contact__map img { display: block; width: 100%; height: 100%; object-fit: cover; }

.contact__details { flex: 1 1 auto; }

.contact__name {
  margin: 0;
  font-family: var(--sam-font-body);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.3;
  letter-spacing: -.015em;
  color: var(--sam-ink);
}

.contact__address {
  margin: 30px 0 0;
  font-size: 20px;
  line-height: 34px;
  letter-spacing: -.02em;
  font-style: normal;
  color: var(--sam-body);
}

/* Email/phone — new in Samya_Home.pdf. Same purple square icon badge for
   both, matching the site's other purple accents rather than plain line
   icons (the footer's email/phone on about-us.html/what-we-do.html use
   plain line icons instead — that's a genuine difference between the two
   comps, not an inconsistency to fix). */
.contact__links { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.contact__links a { display: flex; align-items: center; gap: 14px; padding: 6px 0; font-size: 18px; color: var(--sam-ink); }
.contact__links a:hover { color: var(--sam-purple); }
.contact__icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--sam-social);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.contact__icon svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.contact__social {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-top: 46px;
}
.contact__social-label { font-size: 17px; letter-spacing: .06em; color: var(--sam-ink); }
.contact__social-list {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Icon stays 32px visually; the link's own padding brings the actual tap
   target up to 44px without changing the icon's size or the gap it reads at. */
.contact__social-list a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
}
.contact__social-list img {
  display: block;
  width: 32px;
  height: 32px;
  transition: transform .2s ease;
}
.contact__social-list a:hover img { transform: translateY(-2px); }

/* ==================================================================
   FOOTER
   ================================================================== */
.site-footer { margin-top: 35px; }

/* Shared across all three pages (Samya_About Us.pdf / Samya_What We Do.pdf
   introduced this — logo + tagline and a footer-level nav, above whatever
   page-specific illustration/bar already followed). */
.site-footer__top { background: var(--sam-purple); padding: 15px 0; }

.site-footer__top-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px 24px;
}

.site-footer__logo { display: block; width: 200px; height: auto; }

.site-footer__nav-list {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer__nav-list + .site-footer__nav-list { /*margin-top: 6px;*/ }
.site-footer__nav-list li:not(:last-child)::after {
  content: "|";
  margin: 0 20px;
  color: var(--sam-panel-pink);
  opacity: .6;
}
.site-footer__nav-list a {
  display: inline-flex;
  align-items: center;
  padding: 12px 0;                 /* keeps the tap target ≥44px tall */
  font-family: var(--sam-font-body);
  /*font-weight: 500;*/
  font-size: 20px;
  color: var(--sam-panel-pink);
}
.site-footer__nav-list--muted a { /*color: var(--sam-hero-tint);*/ }
.site-footer__nav-list a:hover,
.site-footer__nav-list a:focus-visible { color: #fff; }

.site-footer__art {
  display: block;
  width: 100%;
  height: auto;
}

.site-footer__bar {
  background: var(--sam-footer-bar);
  padding: 22px 16px;
  text-align: center;
}
.site-footer__bar p {
  margin: 0;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: -.02em;
  color: var(--sam-purple);
}

/* ============================================================================
   ABOUT US PAGE (about-us.html) — reference: Samya_About Us.pdf
   Reuses .hero/.hero__title/.hero__lead/.eyebrow/.btn-samya/.section-title
   from above; only the pieces genuinely new to this page are defined here.
   ============================================================================ */

/* the About Us / What We Do hero sits on a tinted background and runs a
   size larger than the homepage's — both pages measured the same from their
   own comps, so this is a deliberate difference, not an inconsistency. */
.hero--tinted { background: var(--sam-hero-tint); }
.hero--tinted .hero__title { font-size: 75px; line-height: 71px; }
.hero--tinted .hero__lead { font-size: 22px; line-height: 34px; }

.about-hero__art { margin-top: -50px; /*padding: 24px 0 40px;*/ }
.about-hero__art img { display: block; width: 100%; height: auto; }

/* .hero--btn-bottom: pins the CTA to the bottom of the hero row instead of
   right after the lead paragraph, so it lines up with the base of the art
   column on the right (same column-height trick as .team-leader__photo /
   .team-leader__copy). Opt-in per page via this modifier — being rolled out
   page by page rather than onto the shared .hero--tinted all at once. */
.hero--btn-bottom .hero__copy { display: flex; flex-direction: column; }
.hero--btn-bottom .hero__copy .btn-samya { align-self: flex-start; margin-top: auto; }

/* "What We Do" mini-intro directly under the hero: photo-with-leaves on the
   left, heading + copy on the right — mirrors .about__grid's proportions. */
.section--intro { padding: 56px 0 60px; }
.intro__grid { display: grid; grid-template-columns: minmax(0, 575px) minmax(0, 1fr); gap: 56px; align-items: center; margin-top: 41px;}
.intro__visual img { display: block; width: 100%; }
.intro__title {
  margin: 0;
  font-family: var(--sam-font-display);
  font-weight: 600;
  font-size: 44px;
  line-height: 50px;
  color: var(--sam-purple);
}
.intro__text { margin: 20px 0 0; font-size: 22px; line-height: 34px; color: var(--sam-body); }
.intro__text + .intro__text { margin-top: 18px; }

/* Our Vision / Our Mission — two equal panels, each with its own leaf art
   tucked behind the copy. */
.section--pillars { padding: 0 0 60px; }
.pillars__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.pillar {
  position: relative;
  min-width: 0;
  border-radius: 4px;
  /*aspect-ratio: 931 / 510;
  padding: 48px 56px 48px 40%;*/
  text-align: center;
  /*display: flex;
  flex-direction: column;
  justify-content: center;*/
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.pillar--vision { background-image: url("../images/our-vision-box.png"); padding: 20px 0; }
.pillar--mission { background-image: url("../images/our-mission-box.png"); padding: 20px 0; }
.pillar__title {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--sam-font-display);
  font-weight: 700;
  font-size: 44px;
  color: var(--sam-purple);
}
.pillar__text {
  position: relative;
  z-index: 1;
  margin: 20px auto 0;
  max-width: 420px;
  font-size: 22px;
  line-height: 32px;
  color: var(--sam-body-strong);
}

.addtnl--text {
  margin-top:30px;
}

/* Our Approach — a one-card-at-a-time continuum carousel: heading/copy on
   the left, photo-with-leaves on the right, spanning both rows. */
.section--approach { position: relative; padding: 90px 0 70px; background: var(--sam-cream-alt); }
.section--approach .section-title { margin-bottom: 41px; }
.approach__grid { display: grid; grid-template-columns: minmax(0, 620px); gap: 56px; align-items: start; }
.approach__copy { grid-column: 1; }
.approach__title {
  margin: 12px 0 0;
  font-family: var(--sam-font-display);
  font-weight: 600;
  font-size: 44px;
  line-height: 50px;
  color: var(--sam-purple);
}
.approach__text { margin: 20px 0 0; font-size: 22px; line-height: 34px; color: var(--sam-body); }

.approach__visual {
  position: absolute;
  top: 0;
  bottom: 0;
  right: max(0px, calc((100% - 1440px) / 2));
  width: clamp(500px, 45vw, 680px);
  pointer-events: none;
}
.approach__visual img { display: block; width: 70%; height: auto; object-fit: cover; object-position: 50% 15%; margin-left: 20%; }

.approach__carousel { margin-top: 32px; display: flex; align-items: stretch; gap: 20px; }
.approach-card {
  flex: 1 1 auto;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 18px 40px rgba(68, 29, 75, .08);
  padding: 32px 40px;
  text-align: center;
  /* Only the active slide is in the flow at any moment, so the carousel's
     height would otherwise jump to match whichever card is showing — pinned
     to the tallest of the three (measured per breakpoint) so it stays put. */
  min-height: 238px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.approach-card__title {
  margin: 0;
  font-family: var(--sam-font-display);
  font-weight: 600;
  font-size: 32px;
  color: var(--sam-olive);
}
.approach-card__text { margin: 14px 0 0; font-size: 20px; line-height: 30px; color: var(--sam-body); }

.approach__nav { flex: 0 0 auto; display: flex; flex-direction: row; justify-content: center; gap: 12px; align-items: center; }
.approach__nav button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--sam-social);
  background: none;
  color: var(--sam-social);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color .2s ease, color .2s ease;
}
.approach__nav button svg { width: 9px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.approach__nav button:hover:not(:disabled) { background: var(--sam-social); color: #fff; }
.approach__nav button:disabled { opacity: .4; cursor: default; }

/* Bootstrap's carousel classes drive the slide behaviour; only the pieces
   that need visual overrides from Bootstrap's defaults are set here. */
.approach__carousel .carousel-inner { flex: 1 1 auto; width: auto; }

/* ============================================================================
   WHAT WE DO PAGE (what-we-do.html) — reference: Samya_What We Do.pdf
   ============================================================================ */
.section--services { padding: 56px 0 0; }
.services__intro { max-width: 1000px; margin: 20px auto 0; font-size: 22px; line-height: 34px; color: var(--sam-body); text-align: center; }

/* Each service is a colour block inset to the standard container width (per
   Samya_What We Do.pdf — only the hero banner and footer bleed full-width): a
   dark "hero" strip (photo + heading, alternating sides) sitting directly on
   a much lighter tint of the same hue that holds the sub-item list — see the
   four --sam-svc-* tokens. */
.service { margin-top: 56px; }

.service__panel .container-samya { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; /*padding-block: 56px;*/ background: var(--service-dark);
border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.service__photo img { display: block; width: 100%; }

.service__title {
  margin: 0;
  font-family: var(--sam-font-display);
  font-weight: 600;
  font-size: 58px;
  line-height: 58px;
  color: var(--service-ink);
}
.service__text { margin: 20px 0 0; font-size: 22px; line-height: 34px; color: var(--service-ink); }

.service__items .container-samya { background: var(--service-light); padding-block: 56px; display: flex; flex-direction: column; gap: 40px;
border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.service__item { display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: start; }
.service__item-icon { width: 90px; height: 90px; border-radius: 50%; background: var(--service-dark); flex: 0 0 auto; }
.service__item-title {
  margin: 0 0 8px;
  font-family: var(--sam-font-display);
  font-weight: 600;
  font-size: 32px;
  color: var(--service-ink);
}
.service__item-text { margin: 0; font-size: 20px; line-height: 30px; color: var(--sam-body); }

.service--gta     { --service-dark: var(--sam-lavender); --service-light: var(--sam-svc-lavender); --service-ink: var(--sam-purple); }
.service--partner { --service-dark: var(--sam-sage);     --service-light: var(--sam-svc-sage);     --service-ink: #434F21; }
.service--disinfo { --service-dark: var(--sam-blush);    --service-light: var(--sam-svc-blush);    --service-ink: #6E4A3A; }
.service--csr     { --service-dark: var(--sam-amber);    --service-light: var(--sam-svc-gold);     --service-ink: #6E4A3A; }

/* ==================================================================
   RESPONSIVE
   ================================================================== */

/* --- ≤1399px: keep the desktop composition, shrink the display type ------ */
@media (max-width: 1399.98px) {
  :root { --sam-rail: min(1194px, calc(100vw - 160px)); }
  .hero__title, .about__title { font-size: 50px; }
  .about__visual { max-width: 48%; }
}

/* --- ≤1199px: nav collapses into the toggler ----------------------------- */
@media (max-width: 1199.98px) {
  .site-header { padding-top: 26px; padding-bottom: 8px; }
  .site-header .container-samya { justify-content: space-between; }

  .navbar-collapse {
    flex-basis: 100%;
    margin-top: 18px;
    padding-bottom: 12px;
  }
  .main-nav {
    gap: 4px;
    margin-inline: 0 !important;
  }
  /* 44px is the minimum comfortable touch target (WCAG 2.5.5 / Apple HIG) —
     the collapsed mobile menu is real navigation, not decorative, so its rows
     need to be reliably tappable, not just visually adequate. */
  .main-nav .nav-link { display: flex; align-items: center; min-height: 44px; padding: 0; font-size: 19px; }
  .header-cta { margin-top: 14px; }

  .hero { padding-top: 56px; }
  .hero__title { font-size: 46px; }
  .hero__art { margin-top: 24px; padding-right: 0; }

  .section--leadership .section-title,
  .section--contact .section-title { margin-bottom: 72px; }
  .section--about .section-title { margin-bottom: 56px; }

  .leadership__grid { gap: 40px; }
  .leadership__visual { flex: 0 0 46%; max-width: 46%; }
  .leadership__quote { flex: 1 1 auto; max-width: none; padding-left: 40px; }
  .leadership__mark { left: -8px; width: 74px; }

  .about__copy { padding-left: 0; padding-bottom: 90px; }
  .contact__map { flex: 0 0 60%; max-width: 60%; }
  .contact__social { margin-top: 60px; }

  .hero--tinted .hero__title { font-size: 58px; line-height: 1.15; }
  .intro__grid,
  .approach__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .section--approach { min-height: 0; }
  .approach__visual {
    position: static;
    order: -1;
    top: auto; bottom: auto; right: auto;
    width: 100%;
    max-width: 460px;
  }
  .approach__visual img { height: auto; object-fit: initial; }
  .approach-card { min-height: 178px; }
  .intro__title, .approach__title, .pillar__title, .service__title,
  .work__title, .cta-banner__title { font-size: 38px; line-height: 1.2; }
  .service__panel .container-samya { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-block: 40px; }
  .service__photo { max-width: 420px; }

  .work__grid { grid-template-columns: minmax(0, 1fr); }
  .work__carousel { width: 100%; }
  .work__carousel .work__slide { flex-direction: column; }
  .work__photo { width: 100%; height: 220px; }
  .work__nav { position: static; transform: none; justify-content: center; margin-top: 24px; }

  .cta-banner__grid { grid-template-columns: minmax(0, 460px); gap: 24px; }
  .cta-banner__aside { border-left: 0; padding-left: 0; border-top: 2px solid rgba(255,255,255,.35); padding-top: 20px; }

  /* Below the two-column layout the photo no longer fits beside the text
     without overlapping it, so it moves above the heading instead — still
     poking out of the top of the purple bar by ~15% of its own height,
     just via negative margin rather than sheer overflow. */
  .section--cta { flex-direction: column; }
  .cta-banner__decor { position: static; order: -1; margin: -78px 0 24px; text-align: center; }
  .cta-banner__decor img { width: 320px; max-width: none; height: auto; }
}

/* --- ≤991px: single-column hero, about visual becomes a banner ----------- */
@media (max-width: 991.98px) {
  body { font-size: 18px; }

  .section-title { font-size: 36px; letter-spacing: .1em; }
  .section-title::after { width: 130px; margin-top: 16px; }

  .hero { padding-top: 44px; }
  .hero__title { font-size: 40px; }
  .hero__lead { font-size: 18px; max-width: none; }
  .hero__art { justify-content: center; margin-top: 32px; }

  .section--wwd { padding: 40px 0 48px; }
  .section--about { padding-top: 40px; }
  .section--about .section-title { margin-bottom: 40px; }

  .about__copy {
    max-width: none;
    padding-bottom: 32px;
    text-align: left;
  }
  .about__title { font-size: 38px; }
  .about__text { max-width: none; }
  .about__visual {
    position: static;
    display: block;
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
  }

  .section--leadership { padding: 56px 0 64px; }
  .section--leadership .section-title { margin-bottom: 48px; }
  .leadership__grid { flex-direction: column; align-items: center; gap: 40px; }
  .leadership__visual { flex: 0 0 auto; max-width: 520px; width: 100%; }
  .leadership__quote { padding: 0 0 0 56px; width: 100%; }
  .leadership__mark { top: -6px; left: 0; width: 62px; }
  .leadership__quote blockquote { font-size: 22px; line-height: 1.5; text-align: left; }
  .leadership__quote blockquote br.quote-break { display: none; }
  .leadership__quote figcaption { margin-top: 28px; }
  .leadership__dots { margin-top: 40px; }

  .section--clients { padding-top: 48px; padding-bottom: 64px; }
  .client { flex: 0 0 170px; height: 110px; }

  .section--connect { padding-top: 52px; }
  .section--connect .section-title { margin-bottom: 40px; }
  .connect__leaf   { width: 110px; top: 200px; opacity: .85; }
  .connect__flower { left: auto; right: 0; width: 84px; top: 220px; opacity: .85; }
  .connect-form { padding: 0 20px 24px; }
  .connect-form input, .connect-form textarea { height: 64px; font-size: 17px; }
  .connect-form textarea { padding-top: 20px; }
  .connect-form__actions { margin-top: 32px; }

  .section--contact { padding-top: 52px; }
  .section--contact .section-title { margin-bottom: 44px; }
  .contact__grid { flex-direction: column; gap: 32px; }
  .contact__map { flex: 0 0 auto; max-width: 100%; width: 100%; }
  .contact__map img { height: auto; aspect-ratio: 1096 / 526; }
  .contact__name { font-size: 22px; }
  .contact__address { font-size: 18px; }
  .contact__social { margin-top: 32px; }

  .site-footer__bar p { font-size: 16px; }
  .site-footer__top { padding: 40px 0; }

  .hero--tinted .hero__title { font-size: 46px; }
  .hero--tinted .hero__lead { font-size: 18px; line-height: 1.6; }
  .about-hero__art { margin-top: 0; padding-top: 32px; }

  .section--intro { padding: 40px 0 48px; }
  .intro__title, .approach__title { font-size: 32px; }
  .intro__text, .approach__text, .pillar__text { font-size: 18px; line-height: 1.6; }

  .section--pillars { padding: 0 0 48px; }
  .pillars__grid { grid-template-columns: 1fr; gap: 24px; }
  /*.pillar { padding: 40px 32px 40px 40%; }*/
  .pillar__title { font-size: 34px; }

  .section--approach { padding: 48px 0 56px; }
  .approach__carousel { flex-direction: column; }
  .approach-card { min-height: 208px; }
  .approach__nav { flex-direction: row; justify-content: center; margin-top: 8px; }

  .section--services { padding: 40px 0 0; }
  .services__intro { font-size: 18px; line-height: 1.6; }
  .service { margin-top: 40px; }
  .service__title { font-size: 32px; line-height: 1.2; }
  .service__text { font-size: 18px; line-height: 1.6; }
  .service__items .container-samya { padding-block: 40px; gap: 32px; }
  .service__item { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 16px; }
  .service__item-icon { width: 72px; height: 72px; }
  .service__item-title { font-size: 26px; }
  .service__item-text { font-size: 17px; }

  .section--work { padding: 48px 0 56px; }
  .work__title { font-size: 32px; }
  .work__text { font-size: 18px; line-height: 1.6; }

  .section--cta { min-height: 0; }
  .cta-banner__grid { max-width: none; }
  .cta-banner__title { font-size: 32px; }
  .cta-banner__text { font-size: 18px; line-height: 1.6; }
  .cta-banner__decor { margin: -74px 0 24px; }
  .cta-banner__decor img { width: 280px; }
}

/* --- ≤767px: stacked forms, tighter rails -------------------------------- */
@media (max-width: 767.98px) {
  :root { --sam-gutter: 20px; --sam-rail: calc(100vw - 40px); }

  .hero__title { font-size: 34px; }
  .eyebrow { font-size: 14px; }
  .eyebrow__sep { margin: 0 12px; }

  .hero__art-spin { width: 100%; max-width: 420px; }

  .rail { margin-top: 32px; }
  .rail__btn { display: none; }
  .rail__viewport { padding-bottom: 4px; }
  .rail__track { gap: 16px; }
  .rail__track--clients { justify-content: flex-start; gap: 40px; }

  /* What We Do: one card per row instead of a horizontal scroller */
  .section--wwd .rail__viewport {
    overflow: visible;
    max-width: none;
    /*-webkit-mask-image: none;
            mask-image: none;*/
  }
  .section--wwd .rail__track { flex-direction: column; gap: 20px; }
  .wwd-card { flex: 0 0 auto; width: 100%; max-width: none; }

  .about__title { font-size: 32px; }

  .leadership__quote { padding-left: 0; }
  .leadership__mark { position: static; display: block; margin-bottom: 8px; }
  .leadership__quote blockquote { font-size: 20px; }

  .connect__leaf,
  .connect__flower { display: none; }

  .connect-form__row { flex-direction: column; border-bottom: 0; }
  .connect-form__field { border-bottom: 2px solid #fff; }
  .connect-form input, .connect-form textarea { height: 58px; }

  .contact__social { flex-wrap: wrap; gap: 16px; }

  .site-footer { margin-top: 24px; }
  .site-footer__top { padding: 32px 0; }
  .site-footer__top-inner { flex-direction: column; gap: 24px; }
  .site-footer__logo { width: 168px; }
  .site-footer__nav-list a { font-size: 17px; }
  .site-footer__nav-list li:not(:last-child)::after { margin: 0 14px; }
  .site-footer__bar { padding: 18px 16px; }
  .site-footer__bar p { font-size: 14px; }

  .hero--tinted .hero__title { font-size: 34px; }
  .intro__title, .approach__title, .pillar__title, .service__title,
  .work__title, .cta-banner__title { font-size: 28px; }
  .approach-card { padding: 24px; min-height: 185px; }
  .approach-card__title { font-size: 26px; }
}

/* ==================================================================
   TEAM PAGE — Our Team / Leadership / Team Members
   Reference comp: Samya_About Us_Team.pdf (1440px wide). A standalone page
   (not in primary nav yet — linked from About Us's "Meet Our Team"/this
   page's own hero button) so these classes are scoped with a team- prefix
   rather than reusing .approach__.service__* from the other pages.
   ================================================================== */
.section--team-intro { padding: 56px 0 64px; }
.team-intro__grid { display: grid; grid-template-columns: minmax(0, 620px) minmax(0, 1fr); gap: 56px; align-items: center; margin-top: 41px; }
.team-intro__text { margin: 0; font-size: 22px; line-height: 34px; color: var(--sam-body); }
.team-intro__visual img { display: block; width: 100%; }

.section--team-leadership { position: relative; padding: 56px 0; }
.team-leader__grid { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 56px; align-items: stretch; }
.team-leader__photo { position: relative; overflow: hidden; }
.team-leader__photo img:first-child { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 4px; position: relative; z-index: 1; }
.team-leader__leaf { position: absolute; top: 18%; right: -90px; width: 130px; pointer-events: none; z-index: 0; }
.team-leader__name { margin: 0; font-family: var(--sam-font-display); font-weight: 700; font-size: 32px; color: var(--sam-purple); }
.team-leader__role { margin: 4px 0 0; font-size: 20px; color: var(--sam-body); }
.team-leader__text { margin: 24px 0 0; font-size: 20px; line-height: 30px; color: var(--sam-body); }
.team-leader__copy { display: flex; flex-direction: column; }
.team-leader__copy .btn-samya { margin-top: auto; align-self: flex-start; }

.team-leader__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  color: var(--sam-purple-soft);
  transition: color .2s ease;
}
.team-leader__nav svg { width: 22px; height: 32px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.team-leader__nav:hover { color: var(--sam-purple); }
.team-leader__nav--prev { left: 24px; }
.team-leader__nav--next { right: 24px; }

.section--team-members { padding: 56px 0 72px; }
.team-members__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px 40px; margin-top: 41px; }
.team-member__photo { display: block; width: 100%; max-width: 380px; }
.team-member__name { margin: 20px 0 0; font-family: var(--sam-font-display); font-weight: 700; font-size: 26px; color: var(--sam-purple); }
.team-member__role { margin: 2px 0 0; font-size: 17px; color: var(--sam-body); }
.team-member__text { margin: 14px 0 0; font-size: 17px; line-height: 26px; color: var(--sam-body); }
.team-member .btn-samya { margin-top: 20px; }

@media (max-width: 991.98px) {
  .team-intro__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .team-intro__visual { max-width: 460px; }
  .team-leader__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; text-align: center; }
  .team-leader__photo { max-width: 380px; margin-inline: auto; }
  .team-leader__leaf { display: none; }
  .team-members__grid { grid-template-columns: repeat(2, 1fr); gap: 40px 32px; }
}

@media (max-width: 575.98px) {
  .team-members__grid { grid-template-columns: minmax(0, 1fr); }
  .team-leader__nav { width: 36px; height: 36px; }
  .team-leader__nav--prev { left: 8px; }
  .team-leader__nav--next { right: 8px; }
}

/* --- ≤575px -------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .section-title { font-size: 30px; }
  .hero__title { font-size: 30px; }
  .about__title { font-size: 28px; }
  .site-logo { width: 156px; }
  .btn-samya { font-size: 16px; padding: 0 18px; }
  .client { flex: 0 0 148px; height: 96px; }

  .hero--tinted .hero__title { font-size: 28px; }
  /*.pillar { padding: 32px 24px 32px 40%; }*/
  .approach-card { min-height: 245px; }
}

/* --- reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .rail__viewport { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

section#team {
  padding-top: 80px;
}

div#teamLeadershipCarousel {
  background: var(--sam-team-blush);
  padding: 50px 0 20px 0;
  margin-top: 50px;
}
.cmt {
  margin-top:100px;
}

/* ==================================================================
   TEAM MEMBER POP-UP (Bootstrap modal)
   Reference comp: Samya_Team_Pop-up.pdf — opened from every "Read More"
   on team.html (Leadership + Core Team + Consultants).
   ================================================================== */
.team-modal .modal-dialog { max-width: 900px; }
.team-modal .modal-content { position: relative; border: 0; border-radius: 16px; overflow: hidden; }
.team-modal__banner { display: block; width: 100%; height: auto; }
.team-modal__close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  /*background: #fff;*/
  opacity: 1;
  box-shadow: 0 6px 16px rgba(68, 29, 75, .18);
}
.team-modal__close:hover { opacity: 1; /*background: #fff;*/ }
.team-modal__body { padding: 8px 48px 48px; }
.team-modal__name { margin: 0; font-family: var(--sam-font-display); font-weight: 700; font-size: 28px; color: var(--sam-purple); }
.team-modal__role { margin: 4px 0 0; font-size: 18px; color: var(--sam-body); }
.team-modal__text { margin: 24px 0 0; font-size: 18px; line-height: 28px; color: var(--sam-body); }

@media (max-width: 575.98px) {
  .team-modal__body { padding: 8px 24px 32px; }
  .team-modal__name { font-size: 24px; }
  .team-modal__close { top: 12px; right: 12px; }
}

/* ==================================================================
   OUR WORK PAGE (our-work.html)
   Reference comp: Samya_Partners Main (2).pdf — a filterable grid of
   partner engagement cards, each on its own pre-made leaf-illustration
   background (images/partner-banners/).
   ================================================================== */
.section--partners { padding: 60px 0 90px; }

.partners-intro { /*max-width: 900px;*/ margin: 0 auto; text-align: center; }
.partners-intro__text { margin: 24px auto 0; font-size: 16px; line-height: 26px; color: var(--sam-body); }

.partners-filter {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  margin: 40px auto 0;
  padding: 14px 26px;
  border-radius: 10px;
  background: var(--sam-hero-tint);
}
.partners-filter__label { font-weight: 600; color: var(--sam-ink); white-space: nowrap; }
.partners-filter__pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.partners-filter__pill {
  padding: 8px 20px;
  border-radius: 20px;
  border: 1.5px solid var(--sam-purple);
  background: #fff;
  color: var(--sam-purple);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}
.partners-filter__pill:hover { background: var(--sam-lavender); }
.partners-filter__pill.is-active { background: var(--sam-purple); border-color: var(--sam-purple); color: #fff; }

.partners-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; margin-top: 48px; }

.partner-card {
  position: relative;
  min-height: 300px;
  padding: 32px 36px 76px;
  border-radius: 24px;
  background-color: var(--sam-cream-alt);
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: 150px;
  text-align: left;
}
.partner-card__logo { display: block; height: 64px; width: auto; max-width: 220px; object-fit: contain; }
.partner-card__title { margin: 28px 38% 0 0; font-family: var(--sam-font-display); font-weight: 700; font-size: 22px; line-height: 1.3; color: #522618; }
.partner-card__text { margin: 14px 42% 0 0; font-size: 15px; line-height: 23px; color: var(--sam-body); }
.partner-card__link {
  position: absolute;
  left: 36px;
  bottom: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sam-font-display);
  font-weight: 600;
  font-size: 15px;
  color: #522618;
}
.partner-card__link svg { width: 9px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.partner-card__link:hover svg { transform: translateX(4px); }

.partner-card.is-hidden { display: none; }

/* trimmed/ — the originals have a wide band of empty canvas below the leaf
   artwork (the source PNGs were exported oversized); background-position:
   bottom was aligning that empty space with the card's bottom edge instead
   of the leaf itself. These copies are cropped tight to the artwork so the
   leaf actually sits flush at the bottom, matching the PDF. */
.partner-card--ww2        { background-image: url("../images/partner-bgs/ww2.png"); }
.partner-card--coalition  { background-image: url("../images/partner-bgs/coalition.png"); }
.partner-card--cry        { background-image: url("../images/partner-bgs/cry.png"); }
.partner-card--lahi       { background-image: url("../images/partner-bgs/lend.png"); }
.partner-card--jansahas   { background-image: url("../images/partner-bgs/jansahas.png"); }
.partner-card--sanved     { background-image: url("../images/partner-bgs/sanved.png"); }
.partner-card--mizizi     { background-image: url("../images/partner-bgs/mizizi.png"); }
.partner-card--talash     { background-image: url("../images/partner-bgs/talaash.png"); }
.partner-card--fst        { background-image: url("../images/partner-bgs/fst.png"); }

@media (max-width: 991.98px) {
  .partners-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 575.98px) {
  .partners-filter { flex-direction: column; align-items: flex-start; width: auto; padding: 16px; border-radius: 20px; }
  .partner-card { padding: 24px 20px 64px; }
  .partner-card__title, .partner-card__text { margin-right: 10%; }
  .partner-card__link { left: 20px; bottom: 20px; }
}

/* ==================================================================
   PARTNER DETAIL PAGE (partner-detail.html)
   Reference comp: Samya_Partners Individual (2).pdf — only "WW2" shipped
   with full content; the other 8 partners render a shorter page (just the
   hero + Our Engagement) until their Our Role / At a Glance / Featured
   Resource / In Focus content is supplied — see js/partner.js.
   ================================================================== */
.partner-hero { padding: 50px 0 56px; background: var(--sam-cream-alt); margin: 50px 0 0 0;}
.partner-hero__head { display: flex; align-items: flex-start; gap: 32px; margin-top: 20px; }
.partner-hero__logo { width: 216px; height: 156px; object-fit: contain; background: #fff; flex: 0 0 auto; }
.partner-hero__title {
  margin: 0;
  padding-bottom: 16px;
  border-bottom: 4px solid var(--sam-gold);
  max-width: 620px;
  font-family: var(--sam-font-display);
  font-weight: 700;
  font-size: 48px;
  line-height: 1.2;
  color: #522618;
}
.partner-hero__tagline { margin: 28px 0 0; max-width: 760px; font-size: 22px; line-height: 1.5; color: var(--sam-body); }

.section--partner-detail { padding: 60px 0 90px; }

.partner-h2 {
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 4px solid var(--sam-gold);
  display: inline-block;
  font-family: var(--sam-font-display);
  font-weight: 400;
  font-size: 32px;
  color: var(--sam-ink);
}

.partner-engagement { margin: 24px 0 0; max-width: 700px; font-size: 16px; line-height: 26px; color: var(--sam-body); }

.partner-detail__grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; margin-top: 56px; align-items: start; }
.partner-detail__grid--bottom { margin-top: 64px; }

.partner-roles { margin-top: 32px; display: flex; flex-direction: column; gap: 28px; }
.partner-role { display: flex; gap: 20px; align-items: flex-start; }
.partner-role__dot { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.partner-role__icon { width: 36px; height: 36px; object-fit: contain; }
.partner-role__title { margin: 0; font-family: var(--sam-font-display); font-weight: 700; font-size: 20px; }
.partner-role__text { margin: 6px 0 0; font-size: 15px; line-height: 24px; color: var(--sam-body); }

.role-purple { color: var(--sam-purple); }
.role-rust   { color: #6E4A3A; }
.role-olive  { color: var(--sam-olive); }
.role-maroon { color: #522618; }
span.role-purple { background: var(--sam-lavender); }
span.role-rust   { background: var(--sam-blush); }
span.role-olive  { background: var(--sam-sage); }

.partner-glance { padding: 36px 32px; border-radius: 20px; background: #F8E7E4; }
.partner-glance__fields { margin: 28px 0 0; display: flex; flex-direction: column; gap: 24px; }
.partner-glance__field dt { font-family: var(--sam-font-display); font-weight: 700; font-size: 18px; }
.partner-glance__field dd { margin: 4px 0 0; font-size: 15px; line-height: 23px; color: var(--sam-body); }
.partner-glance__field dd ul { margin: 0; padding-left: 18px; }

.partner-resource { margin-top: 32px; display: flex; gap: 24px; padding: 24px; border-radius: 20px; background: var(--sam-svc-gold); }
.partner-resource__image { flex: 0 0 150px; width: 150px; height: auto; border-radius: 10px; object-fit: cover; align-self: flex-start; }
.partner-resource__type { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sam-olive); }
.partner-resource__title { margin: 6px 0 0; font-family: var(--sam-font-display); font-weight: 700; font-size: 22px; color: var(--sam-gold); }
.partner-resource__text { margin: 10px 0 0; font-size: 15px; line-height: 23px; color: var(--sam-body); }
.partner-resource__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 18px;
  padding: 10px 24px;
  border: 2px solid var(--sam-gold);
  border-radius: 24px;
  font-family: var(--sam-font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--sam-gold);
  transition: background-color .2s ease, color .2s ease;
}
.partner-resource__btn:hover { background: var(--sam-gold); color: #fff; }

.partner-infocus { margin: 32px 0 0; padding: 0; list-style: none; border-radius: 20px; overflow: hidden; background: var(--sam-hero-tint); }
.partner-infocus li + li { border-top: 1px solid rgba(68, 29, 75, .12); }
.partner-infocus a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 24px;
  color: var(--sam-ink);
  font-size: 15px;
}
.partner-infocus a strong { font-family: var(--sam-font-display); color: var(--sam-purple); }
.partner-infocus a svg { flex: 0 0 auto; width: 8px; height: 11px; fill: none; stroke: var(--sam-purple); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.partner-detail__back { margin-top: 64px; }
.partner-detail__back a { font-family: var(--sam-font-display); font-weight: 600; color: var(--sam-purple); }

@media (max-width: 991.98px) {
  .partner-hero__title { font-size: 38px; }
  .partner-detail__grid, .partner-detail__grid--bottom { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}

@media (max-width: 575.98px) {
  .partner-hero { padding: 36px 0 40px; }
  .partner-hero__head { flex-direction: column; gap: 16px; }
  .partner-hero__logo { width: 160px; height: 120px; }
  .partner-hero__title { font-size: 30px; }
  .partner-resource { flex-direction: column; }
  .partner-resource__image { width: 100%; flex-basis: auto; }
}

/* ==================================================================
   INSIGHTS PAGE (insights.html)
   Reference comp: Samya_Insights (1).pdf — its hero/intro copy and all six
   cards were an unedited copy-paste of the Our Work page (identical text,
   the same "Indonesia Country Report" card repeated six times), so only the
   layout (filter/search/sort bar, 2-up card grid, Load More) was reused;
   the copy below is original and the grid is JSON-driven (data/insights.json)
   so real posts can be added without touching markup — see js/insights.js.
   ================================================================== */
.section--insights { padding: 60px 0 90px; }

.insights-intro { /*max-width: 900px;*/ margin: 0 auto; text-align: center; }
.insights-intro__text { margin: 24px auto 0; font-size: 16px; line-height: 26px; color: var(--sam-body); }

.insights-filter {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 40px auto 0;
  padding: 14px 26px;
  border-radius: 10px;
  background: var(--sam-hero-tint);
}
.insights-filter__label { font-weight: 600; color: var(--sam-ink); white-space: nowrap; }
.insights-filter__pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.insights-filter__pill {
  padding: 8px 20px;
  border-radius: 20px;
  border: 1.5px solid var(--sam-purple);
  background: #fff;
  color: var(--sam-purple);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}
.insights-filter__pill:hover { background: var(--sam-lavender); }
.insights-filter__pill.is-active { background: var(--sam-purple); border-color: var(--sam-purple); color: #fff; }

.insights-filter__search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 20px;
  background: #fff;
}
.insights-filter__search svg { flex: 0 0 auto; width: 15px; height: 15px; fill: none; stroke: var(--sam-body); stroke-width: 1.6; stroke-linecap: round; }
.insights-filter__search input { border: 0; outline: 0; width: 100px; font-size: 14px; color: var(--sam-ink); background: transparent; }

.insights-filter__sort { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--sam-ink); white-space: nowrap; }
.insights-filter__sort select {
  border: 1.5px solid var(--sam-purple);
  border-radius: 20px;
  padding: 7px 16px;
  background: #fff;
  color: var(--sam-purple);
  font-size: 14px;
  font-weight: 500;
}

.insights-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 32px; margin-top: 48px; }

.insight-card { display: block; }
.insight-card__thumb {
  display: block;
  padding: 24px 40px;
  border-radius: 20px;
  background: var(--sam-svc-blush);
}
.insight-card__thumb img { display: block; width: 100%; height: auto; max-width: 230px; margin: 0 auto; border-radius: 4px; box-shadow: 0 12px 28px rgba(68, 29, 75, .18); }
.insight-card__type { margin: 24px 0 0; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sam-olive); }
.insight-card__title { margin: 8px 0 0; font-family: var(--sam-font-display); font-weight: 700; font-size: 22px; color: #522618; }
.insight-card__text { margin: 10px 0 0; font-size: 15px; line-height: 23px; color: var(--sam-body); }
.insight-card__link {
  margin-top: 14px;
  padding: 10px 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sam-font-display);
  font-weight: 600;
  font-size: 15px;
  color: #522618;
}
.insight-card__link svg { width: 9px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.insight-card__link:hover svg { transform: translateX(4px); }

.insights-empty { margin: 48px 0 0; text-align: center; color: var(--sam-body); }
.insights-loadmore { margin-top: 48px; text-align: center; }

@media (max-width: 767.98px) {
  .insights-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 575.98px) {
  .insights-filter { flex-direction: column; align-items: stretch; padding: 16px; border-radius: 20px; }
  .insights-filter__search, .insights-filter__sort { justify-content: center; }
  .insights-filter__search input { width: auto; flex: 1 1 auto; }
}

/* ==================================================================
   FULL-WIDTH TEST (what-we-do1.html only)
   Drops .container-samya's max-width everywhere on this one page so every
   section's background spans the full viewport instead of the usual 1440px
   box; the side gutter padding stays so text doesn't run to the browser
   edge. Scoped to body.full-width-test so it can't leak onto any other
   page that shares this stylesheet. The hero art image already uses
   width: 100% (.about-hero__art img), so with the column no longer capped
   it scales fluidly with the viewport on its own — no extra rule needed.
   ================================================================== */
body.full-width-test .container-samya { max-width: none; }
/* ------------------------------------------------------- CMS additions -- */
/* Insight detail page (new in the CMS version; reuses partner-hero styles). */
.insight-article { max-width: 860px; }
.insight-article__type { margin-bottom: 8px; }
.insight-article__date { margin: 0 0 24px; font-size: 15px; color: var(--sam-body); }
.insight-article__image { display: block; max-width: 100%; height: auto; margin: 0 0 32px; border-radius: 10px; }
.insight-article__text { margin: 0 0 20px; font-size: 18px; line-height: 30px; color: var(--sam-body-strong); }
.insight-article__actions { display: flex; flex-wrap: wrap; gap: 16px; margin: 32px 0; }