/* Inline styles extracted verbatim from the Webflow export (norml.studio). */

/* ============================================================================
   SHARED PAGE-LAYOUT SYSTEM
   One source of truth for the gutter / container / vertical rhythm used by the
   app's custom pages (/before-after, /norml-care, /team). Values are taken from
   the /before-after page (the reference). Consumed by the page CSS Modules via
   var() and by #team-page below. The canonical Norml contract: full-width
   sections, content stretches, only padding-inline clamps at the gutter — never
   a centered max-width box ("boxed in an old way"). See frontend-standards.
   ============================================================================ */
:root {
  --page-gutter: clamp(20px, 5vw, 120px); /* horizontal page margin (left=72@1440, 96@1920) */
  --content-wide: 1480px;                 /* WIDE showcase archetype — viewer, photo grid */
  --content-narrow: 920px;                /* NARROW content-page archetype — centered, e.g. /norml-care */
  --content-text: 760px;                  /* readable single-column text width */
  --page-top: clamp(40px, 6vw, 88px);     /* first-section top padding */
  --section-gap: clamp(64px, 9vw, 112px); /* vertical gap between sections */
  --page-bottom: clamp(72px, 9vw, 130px); /* last-section bottom padding */
}

.caselist{
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
  }

  .caselist li{
    position: relative;
    padding-left: 26px;
  }

  .caselist li::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0.35em;
    width: 16px;
    height: 16px;
    background: url("/assets/cdn.prod.website-files.com/69010dd3d1bb35baf8268ca1/6968e095312dfc99447847a9_norml-arrow.svg") no-repeat center / contain;
  }
  
  /* arrow anim */
  
  .arrowhere::after {
  content: "";
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-left: 0.3em; 
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  animation: arrowCycle 0.4s step-start infinite;
}

@keyframes arrowCycle {
  0% { 
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23 77H30.7143V69.2856H23V77Z' fill='black'/%3E%3Cpath d='M30.7144 69.2856H38.4287V61.5713H30.7144V69.2856Z' fill='black'/%3E%3Cpath d='M46.1431 53.8568H53.8571V46.1428H46.1431V53.8568Z' fill='black'/%3E%3Cpath d='M38.4288 61.5711H46.1431V53.8568H38.4288V61.5711Z' fill='black'/%3E%3Cpath d='M53.8568 46.1433H61.5711V38.429H53.8568V46.1433Z' fill='black'/%3E%3Cpath d='M69.2856 23H23V30.7143H61.5712V38.4286H69.2855V76.9998H76.9998V23.0007L69.2856 23Z' fill='black'/%3E%3C/svg%3E"); 
  }
  
  25% { 
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M26 73.2511C30.9496 68.6682 36.0435 64.4962 40.7016 59.5793C46.1919 53.784 51.8895 48.1949 57.4452 42.4629C62.3495 37.4029 68.055 32.1108 73.9402 28.1874' stroke='black' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M34.6293 27.8678C42.0622 27.8678 49.4978 27.9308 56.9303 27.8678C60.3891 27.8385 64.4252 27.9969 67.8678 27.4772C69.2022 27.2758 72.267 26.6229 73.6206 27.2997C75.2115 28.0951 74.6096 31.8087 74.2598 33.0525C72.5603 39.095 70.7442 45.5147 70.7442 51.8379C70.7442 53.6331 70.4246 55.4468 70.4246 57.2711C70.4246 58.211 70.8311 58.9118 70.9928 59.828C71.041 60.1014 71.0638 61.7276 71.0638 61.426' stroke='black' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E"); 
  }
  
  50% { 
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M71.3965 42.4002C71.281 55.3469 71.1745 67.2457 71.0696 78.8885C74.0257 81.4823 74.0257 81.4823 77.6743 81.9942C81.6235 78.4101 78.5586 74.0766 78.8505 70.1162C79.1558 65.9846 78.8553 61.8081 78.81 56.4925C80.5304 52.5708 80.9204 47.5191 79.2869 42.1395C78.537 39.6687 79.133 36.7887 79.1099 32.4324C78.7165 31.4186 77.7112 28.8324 76.8594 26.6401C73.6979 24.0574 71.2993 25.703 69.2101 27.0225C56.9481 24.1071 44.8116 22.9056 32.5501 22.8904C30.6747 22.888 28.7998 23.4421 26.3978 23.8214C26.75 25.5442 27.0079 26.8041 27.2202 27.8434C30.4401 30.6789 34.1666 30.358 37.7186 30.8025C44.0721 31.5979 50.4215 32.4551 56.7438 33.4635C57.9826 33.6611 59.0918 34.6692 60.8079 35.5998C55.749 41.713 51.5474 48.0429 46.1026 53.011C40.8401 57.8139 35.9879 63.0137 30.6881 67.7335C28.0508 70.0826 24.5662 71.4811 21.448 73.3202C20.2171 76.626 21.5771 78.6728 24.9976 80.3031C26.4304 79.7096 28.4282 79.3149 29.8746 78.2038C35.1767 74.1336 40.3111 69.8446 45.4786 65.6015C51.4479 60.6999 57.2324 55.661 62.1114 49.5574C64.2691 46.8617 67.697 45.1801 71.3959 42.3996L71.3965 42.4002Z' fill='black'/%3E%3C/svg%3E"); 
  }
  
  75% { 
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='21.4108' y='21.2155' width='53.6449' height='10.76' fill='black'/%3E%3Crect x='75.0558' y='21.2155' width='53.6449' height='10.76' transform='rotate(90 75.0558 21.2155)' fill='black'/%3E%3Crect x='69.1725' y='34.8635' width='57.4807' height='10.76' rx='2.75102' transform='rotate(135 69.1725 34.8635)' fill='black'/%3E%3C/svg%3E"); 
  }
}

/* Задаємо плавний перехід для тексту та стрілочки */
  .caseheading,
  .caseheading .dynamic-arrow {
    color: #1A1A1E; 
    transition: color 0.3s ease; 
  }

  /* Змінюємо колір І тексту, І стрілочки при наведенні на контейнер */
  .divcontainercase:hover .caseheading,
  .divcontainercase:hover .caseheading .dynamic-arrow {
    color: #FF5D0C; 
  }

  .dynamic-arrow svg {
    width: 0.8em; 
    height: 0.8em;
    display: block;
  }

.head4.arr::after {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-left: 16px;
  background-image: url('/assets/cdn.prod.website-files.com/69010dd3d1bb35baf8268ca1/69a55253ce33dc6e893bc54e_arrow-anim-1.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
}

/* "Discover other projects" card image: the Webflow CSS sets aspect-ratio:16/9 +
   object-fit:cover but no width, so a replaced <img> with width/height:auto keeps
   its NATURAL ratio and the aspect-ratio is ignored — tall sources (e.g. Vona)
   render taller than wide ones, so the two cards mismatch. Forcing the column
   width makes aspect-ratio + object-fit actually crop every card to a uniform
   16:9 (the "Nasdaq card" size). */
.similarprojimg {
  width: 100%;
}

/* Case-study hero (and full-bleed body images): the Webflow base rule only sets
   max-width:100%, so a hero whose source is narrower than the container (e.g.
   InsuraTec 1439px, The Farm Soho 1440px) rendered at its natural width and sat
   inset in the middle, while wider sources filled the column — heroes looked
   inconsistent across case studies. Forcing width:100% makes every hero span the
   full container width (natural ratio preserved, no cropping). */
.imagenopadd {
  width: 100%;
}

/* Case-study index grid card image: 9 of the cards ship a ~693×557 (≈5:4) Webflow
   listing thumbnail, but AstraZeneca/Nasdaq were never on the Webflow listing, so
   the import fell back to their 2880×1520 hero (≈1.9:1) as the card image. The base
   Webflow rule only sets object-fit:contain + width with no ratio lock, so those two
   render far wider/shorter than the rest and break the 2-up grid rhythm. Lock every
   card to the listing ratio and cover-crop — same idea as .similarprojimg above. The
   9 thumbnails are already this ratio (unchanged); the 2 wide ones center-crop to fit. */
.imageincase {
  width: 100%;
  aspect-ratio: 693 / 557;
  object-fit: cover;
}

/* =========================
   SCROLL SECTION
========================= */

.scroll-section {
	position: relative;
	height: 400vh;
	/* 3 экрана = 3 * 100vh */
	width: 100%;
	overflow: visible;
}

/* =========================
   BACKGROUND STACK
========================= */

.bg-stack {
	position: sticky;
	top: 0;
	height: 100vh;
	width: 100%;
	overflow: hidden;
	z-index: 1;
}

/* =========================
   BACKGROUND SCREENS
========================= */

.bg-screen {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 0.6s ease;
	pointer-events: none;
}

.bg-screen.active {
	opacity: 1;
}

/* =========================
   MEDIA (IMG / VIDEO)
========================= */

.bg-screen img,
.bg-screen video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* =========================
   TEXT LAYER
========================= */

.text-layer {
	position: sticky;
	inset: 0;
	z-index: 5;
	height: 100vh;
	display: flex;
	align-items: center;
	color: #fff;
	max-width: 1920px;
	margin: 0 auto;
  padding:0 30px;
}
.text-layer h2{
	font-family: Pppangramsans;
	font-size: 74px;
	line-height: 74px;
	font-weight: 600;
	max-width: 900px;
	margin-bottom: 175px;
}

/* =========================
   CLIENT LIST
========================= */

.client {
	opacity: 0.4;
	transition: opacity 0.3s ease;
	font-family: Pppangramsans;
	font-size: 60px;
	line-height: 70px;
	font-weight: 600;
}

.client.is-active {
	opacity: 1;
}

/* =========================
   SCROLL SPACERS
========================= */

.scroll-spacers {
	position: relative;
	z-index: 0;
 pointer-events: none;
}

.spacer {
	height: 100vh;
}

/* =========================
   OPTIONAL: OVERLAY
========================= */

/*
.bg-stack::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  z-index: 2;
}


/* =========================
   MOBILE FALLBACK
========================= */

@media (max-width: 991px) {
	.text-layer {
		flex-direction: column;
		justify-content: center;
	}
	.text-layer div{
		text-align: center;
	}
	.text-layer h2{
		font-size: 36px;
		font-weight: 600;
		line-height: 40px;
		letter-spacing: -0.72px;
		margin-bottom: 50px;
		text-align: center;
	}
	.client {
		opacity: 0.4;
		transition: opacity 0.3s ease;
		font-size: 26px;
		font-weight: 600;
		line-height: 40px;
		letter-spacing: -0.72px;
	}
}

.hero-video video{
	object-fit:contain;
}

.navbar-5.w-nav{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:24px}.norml-logo{display:inline-flex;align-items:center;flex:0 0 auto}.norml-logo img{height:34px;width:auto;display:block}.navbar-5 .menu-button{float:none;margin:0}@media screen and (max-width:991px){.navbar-5 .menu-button{margin-left:auto}}@media (max-width:600px){.norml-logo img{height:30px}}

[data-wf-bgvideo-fallback-img] {
    display: none;
  }
  @media (prefers-reduced-motion: reduce) {
    [data-wf-bgvideo-fallback-img] {
      position: absolute;
      z-index: -100;
      display: inline-block;
      height: 100%;
      width: 100%;
      object-fit: cover;
    }
  }

#team-page{background:#f8f4ed;color:#003049;font-family:Geist,Verdana,sans-serif;-webkit-font-smoothing:antialiased}
#team-page .tp-wrap{padding-inline:var(--page-gutter);padding-block:var(--page-top) var(--page-bottom)}
#team-page .tp-hero{max-width:var(--content-text);margin-bottom:clamp(48px,7vw,96px)}
#team-page .tp-eyebrow,#team-page .tp-section-label{font-family:Geistmono,'Geist Mono',monospace;text-transform:uppercase;letter-spacing:.16em;font-size:13px;color:#ff5d0c;margin:0}
#team-page .tp-eyebrow{margin-bottom:16px}
#team-page .tp-title{font-family:Pppangramsans,Verdana,sans-serif;font-weight:600;line-height:1.02;letter-spacing:-.015em;font-size:clamp(40px,6.2vw,78px);margin:0 0 20px}
#team-page .tp-intro{font-size:clamp(16px,1.45vw,20px);line-height:1.55;margin:0;opacity:.82}
#team-page .tp-section-label{margin:0 0 26px;padding-bottom:14px;border-bottom:1px solid rgba(0,48,73,.16);max-width:var(--content-wide)}
#team-page .tp-section-label.tp-grouplabel{margin-top:clamp(48px,5vw,72px)}
#team-page .tp-grid{display:grid;gap:clamp(22px,2.5vw,40px);grid-template-columns:repeat(auto-fill,minmax(240px,1fr));max-width:var(--content-wide)}
#team-page .tp-founders{grid-template-columns:repeat(auto-fit,minmax(230px,260px));justify-content:start;margin-bottom:clamp(60px,8vw,120px)}
#team-page .tp-card{display:flex;flex-direction:column}
#team-page .tp-photo{position:relative;aspect-ratio:4/5;border-radius:18px;overflow:hidden;background:#e9e2d6;margin-bottom:18px}
#team-page .tp-founders .tp-photo{aspect-ratio:1/1}
#team-page .tp-photo img{width:100%;height:100%;object-fit:cover;display:block}
#team-page .tp-monogram{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#f8f4ed;font-family:Pppangramsans,sans-serif;font-weight:600;font-size:clamp(48px,7vw,82px);letter-spacing:.02em}
#team-page .tp-name{font-family:Pppangramsans,Verdana,sans-serif;font-weight:600;font-size:clamp(20px,1.6vw,25px);line-height:1.1;margin:0 0 5px}
#team-page .tp-role{font-family:Geistmono,'Geist Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:12px;color:#ff5d0c;margin:0 0 13px}
#team-page .tp-bio{font-size:15px;line-height:1.55;margin:0;opacity:.78}
#team-page .tp-link{display:inline-block;margin-top:13px;font-family:Geistmono,'Geist Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:11px;color:#ff5d0c;text-decoration:none;border-bottom:1px solid rgba(255,93,12,.5);padding-bottom:2px}
#team-page .tp-link:hover{border-bottom-color:#ff5d0c}
@media(max-width:600px){#team-page .tp-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px}#team-page .tp-founders{grid-template-columns:1fr 1fr}}

/* ── Case-study credits — people inside the project-details "Team" cell ───── */
/* clear the fixed nav when a credit deep-links to /team#person */
#team-page .tp-card{scroll-margin-top:clamp(96px,12vh,132px)}
.cs-team-cell{align-self:start}
.cs-credits-meta{list-style:none;margin:7px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.cs-credits-meta .cs-credit{margin:0}
.cs-credits-meta .cs-credit-link{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--deep-blue)}
.cs-credit-avatar{flex:0 0 auto;width:38px;height:38px;border-radius:50%;overflow:hidden;background:#e9e2d6;display:block}
.cs-credit-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.cs-credit-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.cs-credit-name{font-family:Pppangramsans,Verdana,sans-serif;font-weight:600;font-size:16px;line-height:1.15;color:var(--deep-blue);display:inline-flex;align-items:baseline;gap:6px}
.cs-credit-role{font-family:Geistmono,'Geist Mono',monospace;text-transform:uppercase;letter-spacing:.06em;font-size:10.5px;color:#ff5d0c}
.cs-credit-arrow{color:#ff5d0c;font-size:.8em;line-height:1;transition:transform .2s ease}
.cs-credits-meta a.cs-credit-link:hover .cs-credit-name{text-decoration:underline;text-underline-offset:2px;text-decoration-color:rgba(0,48,73,.35)}
.cs-credits-meta a.cs-credit-link:hover .cs-credit-arrow{transform:translate(2px,-2px)}
.cs-credit-link.is-alumni{cursor:default}

/* Mobile nav toggle (replicates Webflow's collapsed nav without its runtime JS) */
@media screen and (min-width: 992px) {
  .navbar-5 .menu-button { display: none; }
}
@media screen and (max-width: 991px) {
  .navbar-5 { position: relative; }
  .navbar-5 .menu-button { display: block; }
  .navbar-5 .navigation.w-nav-menu { display: none; }
  .navbar-5 .navigation.w-nav-menu.nav-open {
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--nude, #f8f4ed);
    padding: 16px 30px 28px;
    z-index: 60;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .1);
  }
}

/* "Book a call" CTA. Webflow's shared CSS hides .header-6.discoverycall
   (display:none) on this navbar variant — every other navbar shows it. Reveal it:
   floated to the far right of the bar on desktop, stacked in the collapsed menu on mobile. */
.navbar-5 .header-6.discoverycall { display: inline-block; }
@media screen and (max-width: 991px) {
  .navbar-5 .navigation.w-nav-menu .header-6.discoverycall { display: block; }
}

/* Page transitions + reveal-on-scroll now live in the dedicated motion layer:
   public/_motion.css (linked after this file in layout.tsx). */

/* ── Contact block: founder avatars + LinkedIn ───────────────────────────
   Small circular profile photos (sourced from the Sanity teamMember docs,
   joined by name in SETTINGS_QUERY) sitting left of each name, with an
   elegant inline LinkedIn link. Accent follows the existing scroll-line
   colour: deep-blue for the first person, orange for the second. */
.cb-person {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
}
.cb-avatar {
  flex: 0 0 auto;
  display: block;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(0, 48, 73, .06);
  box-shadow: inset 0 0 0 1px rgba(0, 48, 73, .08);
  transition: transform .25s ease, box-shadow .25s ease;
}
.cb-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
a.cb-avatar:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 48, 73, .16);
}
.cb-person-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cb-linkedin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-left: 9px;
  vertical-align: middle;
  color: var(--light-blue);
  transition: color .2s ease, transform .2s ease;
}
.cb-linkedin svg {
  width: 17px;
  height: 17px;
  display: block;
}
.cb-linkedin:hover {
  color: var(--deep-blue);
  transform: translateY(-1px);
}
.cb-person--alt .cb-linkedin:hover {
  color: var(--orange);
}

@media screen and (max-width: 991px) {
  .cb-avatar { width: 56px; height: 56px; }
}
@media screen and (max-width: 479px) {
  .cb-person { gap: 13px; margin-bottom: 14px; }
  .cb-avatar { width: 48px; height: 48px; }
  .cb-linkedin { width: 18px; height: 18px; }
  .cb-linkedin svg { width: 15px; height: 15px; }
}

/* ── Studio socials + review badges (footer + contact block) ─────────────
   Studio Instagram/Behance/Pinterest/LinkedIn as a monochrome deep-blue icon
   row; Clutch + Upwork as custom on-brand review pills (★ rating · N reviews)
   that link out. Shared by the footer strip and the contact block. */
.social-icons {
  display: flex;
  align-items: center;
  gap: 16px;
}
.social-icons a {
  display: inline-flex;
  color: var(--deep-blue);
  opacity: .72;
  transition: opacity .2s ease, transform .2s ease;
}
.social-icons a:hover {
  opacity: 1;
  transform: translateY(-2px);
}
.social-icons svg {
  display: block;
  width: 20px;
  height: 20px;
}

/* Footer review cards: platform name left, stars + sub-line stacked right.
   Filled surface — no outline, no drop shadow — so they read as cards. */
.review-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.review-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 15px 22px;
  border-radius: 12px;
  background: rgba(0, 48, 73, .05);
  color: var(--deep-blue);
  text-decoration: none;
  transition: background-color .2s ease;
}
.review-card:hover {
  background: rgba(0, 48, 73, .09);
}
.review-card__platform {
  flex: 0 0 auto;
  font-weight: 700;
  font-size: 15px;
}
.review-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.review-card__stars {
  color: var(--orange);
  font-size: 17px;
  line-height: 1;
  letter-spacing: 2px;
}
.review-card__sub {
  font-size: 13px;
  color: var(--light-blue);
}

/* The case footer (.footer) is locked to height:5rem in the Webflow CSS — let
   it grow to fit its content. */
.footer {
  height: auto;
}

/* Footer layout: a left column (nav + socials + review badges) and the big
   "Norml studio" wordmark pinned bottom-right, flush to the bottom edge. */
.footer-layout {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 48px;
}
.footer-layout__left {
  flex: 0 0 auto;
  max-width: 46%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* Small lift off the bottom edge for the left column; the wordmark stays flush. */
  padding-bottom: 16px;
}
.footer-layout__wordmark {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 948px;
}
.footer-layout__wordmark img {
  display: block;
  width: 100%;
  height: auto;
}

@media screen and (max-width: 991px) {
  /* Stack: left column on top, wordmark full-width at the bottom. */
  .footer-layout {
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
  }
  .footer-layout__left {
    max-width: none;
    width: 100%;
    padding-bottom: 0;
  }
  .footer-layout__wordmark {
    width: 100%;
    max-width: 100%;
  }
}
@media screen and (max-width: 479px) {
  .review-cards {
    width: 100%;
  }
  .review-card {
    flex: 1 1 auto;
    padding: 13px 18px;
  }
  .social-icons {
    gap: 18px;
  }
}

/* Homepage InsuraTec featured block — "Key deliverables" grid. The AstraZeneca /
   Stevens grids get their 4→2→1 column template from a per-node Webflow id
   (#w-node-…); InsuraTec is a new hand-added block, so it gets its own class here
   instead of borrowing an id. Breakpoints mirror the Webflow originals exactly. */
.insuratec-deliv-grid {
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
@media screen and (max-width: 991px) {
  .insuratec-deliv-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (max-width: 767px) {
  .insuratec-deliv-grid {
    grid-template-columns: 1fr;
  }
}

/* "How we work" homepage block — an auto-scrolling marquee (reel) of real-work clips shown at
   native 16:9 so they stay clean (no letterbox), adapted from the /from-0-to-wow deliverables
   clips. Scoped to .home-howwework so the /from-0-to-wow page is untouched.
   - The heading sits in a .container aligned to the homepage content box (.container-58 =
     max-width 1920 / 20px gutter); the reel below is full-bleed.
   - The track holds the clips three times and translates -33.333% for a gap-free loop — each item
     carries its own trailing margin, so a third lands exactly one set over (2 copies left a gap on
     wide screens because one set is narrower than the viewport). Honours reduced-motion; never pauses on hover. */
.home-howwework {
  padding-top: 2.5rem;
  padding-bottom: 5rem;
  overflow: hidden;
}
.home-howwework .container {
  max-width: 1920px;
  padding-left: 20px;
  padding-right: 20px;
}
.home-howwework .heading-wrap {
  margin-bottom: 2.5rem;
}
.howwework-reel {
  overflow: hidden;
}
.howwework-reel__track {
  display: flex;
  width: max-content;
  animation: howwework-marquee 40s linear infinite;
}
.howwework-reel__item {
  flex: 0 0 auto;
  width: 20rem;
  margin-right: 1rem;
}
.howwework-reel__media {
  /* The clips are 1280×720 with content composed centre-frame on dark sides. A 7:10 portrait
     crop is the sweet spot: tight enough to hide the deck clip's dark margins (Strategy), wide
     enough to keep the dashboard's cards in frame (Build). Gives a clean portrait "reel" tile. */
  position: relative;
  aspect-ratio: 7 / 10;
  overflow: hidden;
  border-radius: 12px;
}
.howwework-reel__media video,
.howwework-reel__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@keyframes howwework-marquee {
  from {
    transform: translateX(0);
  }
  to {
    /* one set = a third of the tripled track; each item's trailing margin makes this exact */
    transform: translateX(-33.333%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .howwework-reel__track {
    animation: none;
  }
  .howwework-reel {
    overflow-x: auto;
  }
}
@media screen and (max-width: 767px) {
  .howwework-reel__item {
    width: 20rem;
  }
}

/* InsuraTec featured heading — the shared .head2home caps at 685px, wrapping this long title to
   ~5 lines. Widen just this one (scoped via .is-wide) so it lands in 2–3 lines; the Sanity
   featured-case headings keep the original measure. */
.head2home.is-wide {
  max-width: 72rem;
}

/* "How we work" reel — disciplines subtext under the heading (replaces the old [ end to end ] tag). */
.home-howwework .howwework-subtext {
  margin-top: 1.1rem;
  font-size: 1.125rem;
  line-height: 1.4;
  opacity: 0.6;
}