/* ============ Buttons ============ */
.btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: .95rem;
  letter-spacing: -.005em;
  padding: .8rem 1.35rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.btn:active{ transform: translateY(1px) scale(.99); }
.btn-icon{ width: 1.1em; height: 1.1em; flex: none; transition: transform var(--dur-base) var(--ease-out); }
.btn:hover .btn-icon{ transform: translateX(3px); }

.btn:focus-visible{ outline: 2px solid var(--primary); outline-offset: 3px; box-shadow: var(--ring); }
.btn:disabled, .btn[aria-disabled="true"]{
  background: var(--surface-3); color: var(--text-muted); border-color: var(--border); box-shadow: none;
  cursor: not-allowed; transform: none;
}

/* Primary: the one loud colour on a page — CTAs only */
.btn-primary{
  background: var(--primary);
  color: var(--on-primary);
}
.btn-primary:hover{ background: var(--primary-hover); box-shadow: 0 10px 26px -12px rgba(255,92,0,.65); }
.btn-primary:active{ background: var(--primary-active); box-shadow: none; }

/* Ghost: neutral outline that warms up on interaction */
.btn-ghost{
  background: transparent;
  color: var(--text-heading);
  border-color: var(--border-strong);
}
.btn-ghost:hover{ border-color: var(--border-accent); background: var(--tint-subtle); }
.btn-ghost:active{ background: var(--tint); border-color: var(--primary); }

/* Secondary: bone on dark, ink on paper — for the second action in a pair */
.btn-light, .btn-secondary{
  background: var(--secondary);
  color: var(--on-secondary);
}
.btn-light:hover, .btn-secondary:hover{ background: var(--secondary-hover); }
.btn-light:active, .btn-secondary:active{ background: var(--sand-300); }
.tone-light .btn-light:active, .tone-light .btn-secondary:active{ background: var(--ink-700); }

.btn-sm{ padding: .55rem 1rem; font-size: .85rem; }
.btn-block{ width: 100%; }


/* ============ Navbar ============ */
.nav{
  position: sticky; top: 0; z-index: var(--z-nav); isolation: isolate;
  --nav-surface: rgba(11,11,13,.84);
  --nav-shadow: 0 10px 30px -18px rgba(0,0,0,.8);
}
/* the bar's surface is its own layer: it can slide away while the logo stays (motion.css) */
.nav::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:0;
  background: var(--nav-surface); backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--divider); box-shadow: var(--nav-shadow);
  transition: opacity var(--dur-base) var(--ease-out), background-color var(--dur-base), transform var(--dur-standard) var(--ease-out);
}
.nav.is-scrolled::before{ opacity: 1; }
/* thin brand hairline under the scrolled bar */
.nav.is-scrolled::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px; pointer-events:none;
  background: linear-gradient(90deg, transparent, rgba(255,92,0,.45) 30%, rgba(255,92,0,.1) 70%, transparent);
  transition: transform var(--dur-standard) var(--ease-out), opacity var(--dur-fast);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding-block: 1.1rem;
}
/* ---- Logo lockup: mark | "Alherin" over a letter-spaced orange "SOLUTIONS" (see templates/logo.js) ---- */
.brand{
  display:inline-flex; align-items:center; gap:.75rem; flex:none;
  color: var(--text-heading); line-height:1; text-decoration:none;
}
.brand-mark{ display:flex; flex:none; transition: transform var(--dur-base) var(--ease-out); }
.brand-mark svg{ display:block; }
.brand-word{
  position:relative; display:inline-grid; align-content:center; padding-left:.75rem;
}
.brand-word::before{ /* hairline divider, fading at both ends */
  content:''; position:absolute; left:0; top:8%; bottom:8%; width:1px;
  background: linear-gradient(180deg, transparent, var(--border-strong) 25%, var(--border-accent) 75%, transparent);
}
.brand-name{
  font-family: var(--font-display); font-weight:700; font-size:1.4rem; letter-spacing:-.03em; line-height:.95;
  color: var(--text-heading);
}
.brand-sub{
  display:flex; justify-content:space-between; gap:.08em; margin-top:.3rem;
  font-family: var(--font-display); font-weight:600; font-size:.62rem; line-height:1; text-transform:uppercase;
  color: var(--text-accent); transition: color var(--dur-base);
}
.brand-sub i{ font-style:normal; }
.brand-word.is-single{ padding-left:.75rem; }
.brand:hover .brand-mark{ transform: rotate(-8deg) scale(1.06); }
.brand:hover .brand-sub{ color: var(--primary-hover); }
.brand:focus-visible{ border-radius: var(--radius-sm); }
.brand-lg{ gap:.9rem; }
.brand-lg .brand-word{ padding-left:.9rem; }
.brand-lg .brand-name{ font-size:1.65rem; }
.brand-lg .brand-sub{ font-size:.7rem; margin-top:.38rem; }
@media (max-width: 360px){ .brand-name{ font-size:1.15rem; } .brand-sub{ font-size:.5rem; } }
.nav-links{ display:flex; align-items:center; gap: var(--space-lg); }
.nav-links a{
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--text-secondary);
  position: relative;
  padding: .35rem 0;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:-2px; height:2px; width:0;
  background: var(--primary); transition: width var(--dur-base) var(--ease-out);
}
.nav-links a:hover, .nav-links a[aria-current="page"]{ color: var(--text-heading); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after{ width: 100%; }
.nav-links a:hover:not([aria-current="page"])::after{ background: var(--sand-400); }
.nav-cta{ display:flex; align-items:center; gap: var(--space-md); }

.nav-toggle{
  display:none; background: var(--surface); border:1px solid var(--border-strong); border-radius: var(--radius-sm);
  width: 44px; height: 44px; align-items:center; justify-content:center; cursor:pointer;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.nav-toggle:hover{ border-color: var(--border-accent); background: var(--tint-subtle); }
.nav-toggle:active{ background: var(--tint); }
.nav-toggle svg{ width: 22px; height: 22px; }

.mobile-menu{
  position: fixed; inset: 0; top: 0;
  background:
    radial-gradient(80% 50% at 100% 100%, rgba(255,92,0,.16), transparent 70%),
    linear-gradient(180deg, var(--ink-900), var(--ink-950));
  z-index: var(--z-overlay);
  display: flex; flex-direction: column;
  padding: var(--container-pad);
  transform: translateY(-100%);
  /* hidden for real when closed (it used to hang below the header when its links were taller than the screen);
     visibility waits for the slide-up to finish */
  visibility: hidden;
  overflow-y: auto;
  transition: transform var(--dur-slow) var(--ease-in-out), visibility 0s linear var(--dur-slow);
}
.mobile-menu.is-open{ transform: translateY(0); visibility: visible; transition-delay: 0s; }
@media (max-height: 740px){
  .mobile-menu-links{ gap: var(--space-md); margin-top: var(--space-xl); }
  .mobile-menu-links a{ font-size: 1.6rem; }
}
.mobile-menu-links{ display:flex; flex-direction:column; gap: var(--space-lg); margin-top: var(--space-2xl); }
.mobile-menu-links a{ font-family: var(--font-display); font-size: 2rem; font-weight: 600; color: var(--text-secondary);
  transition: color var(--dur-fast); }
.mobile-menu-links a:hover{ color: var(--text-heading); }
.mobile-menu-links a[aria-current="page"]{ color: var(--text-heading); box-shadow: inset 3px 0 0 var(--primary); padding-left: .75rem; }
.mobile-menu-top{ display:flex; align-items:center; justify-content:space-between; }

@media (max-width: 900px){
  .nav-links, .nav-cta .btn-ghost{ display:none; }
  .nav-toggle{ display:flex; }
}

/* ============ Hero ============ */
.hero{ padding-block: clamp(3rem, 8vw, 6rem) var(--section-pad); position:relative; overflow:hidden; }
.hero-glow{
  position:absolute; inset: -20% -10% auto -10%; height: 700px;
  background: radial-gradient(60% 60% at 30% 20%, rgba(255,92,0,.25), transparent 70%),
              radial-gradient(50% 50% at 80% 10%, rgba(255,92,0,.12), transparent 70%);
  filter: blur(40px); pointer-events:none; z-index:0;
}
.hero-grid{ position:absolute; inset:0; background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 64px 64px; mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 40%, transparent 80%);
  pointer-events:none; z-index:0;
}
.hero-content{ position:relative; z-index:1; max-width: 920px; }
.hero-title{
  font-size: var(--fs-display);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-md);
}
.hero-title .accent{
  color: var(--primary);
  background: linear-gradient(95deg, var(--orange-500) 10%, var(--orange-300) 90%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero-desc{ font-size: var(--fs-body-lg); max-width: 56ch; margin-bottom: var(--space-xl); }
.hero-actions{ display:flex; gap: var(--space-md); flex-wrap:wrap; }
.hero-meta{ display:flex; gap: var(--space-xl); margin-top: var(--space-3xl); flex-wrap:wrap; }
.hero-meta-item{ font-size: var(--fs-small); color: var(--text-warm); padding-left: var(--space-sm); border-left: 1px solid var(--border-strong); }
.hero-meta-item:first-child{ border-left-color: var(--primary); }
.hero-meta-item strong{ display:block; font-family: var(--font-display); font-weight: 500; font-size: 1.75rem; color: var(--text-heading); }

@media (max-width: 640px){
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .hero-actions .btn{ width:100%; }
}

/* ============ Marquee ============ */
.marquee{
  overflow: hidden; border-block: 1px solid var(--divider);
  background: linear-gradient(90deg, var(--ink-900), var(--ink-850) 50%, var(--ink-900)); padding-block: var(--space-lg);
}
.marquee-track{
  display:flex; width: max-content;
  /* ~5.3s per item keeps the original speed whatever the item count */
  animation: marquee calc(var(--marquee-items, 6) * 5.3s) linear infinite;
  will-change: transform;
}
/* gap inside a group + the same space after it, so both halves are exactly equal and -50% lands on the seam */
.marquee-group{
  display:flex; flex-shrink:0; gap: var(--space-2xl); padding-inline-end: var(--space-2xl);
}
.marquee-track:hover{ animation-play-state: paused; }
.marquee-item{
  display:flex; align-items:center; gap: var(--space-sm);
  font-family: var(--font-display); font-weight:500; font-size: 1.1rem; color: var(--text-muted);
  white-space:nowrap;
}
.marquee-item .dot{ width:8px; height:8px; border-radius:2px; transform: rotate(45deg); background: var(--primary); }
.marquee-item:nth-child(even) .dot{ background: var(--sand-400); }
@keyframes marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
/* Reduced motion stops the marquee (motion.css); hovering pauses it. */

/* ============ Section heading ============ */
.section-head{ max-width: 720px; margin-bottom: var(--space-xl); }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head h2{ margin-top: var(--space-sm); }
.section-head-row{ display:flex; align-items:flex-end; justify-content:space-between; gap: var(--space-lg); margin-bottom: var(--space-xl); flex-wrap:wrap; }
.section-head-row .section-head{ margin-bottom: 0; }

/* ============ Cards ============ */
.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}
.card-hover{ transition: border-color var(--dur-base), box-shadow var(--dur-base); }
.card-hover:hover{ border-color: var(--border-accent); box-shadow: var(--highlight), var(--shadow-md); }
/* A card that should stand out from its neighbours (contact details, featured info) */
.card-elevated{ background: var(--surface-elevated); box-shadow: var(--highlight), var(--shadow-md); }
.card-tint{ background: linear-gradient(160deg, var(--tint), var(--surface) 55%); border-color: var(--border-accent); }

/* ---- Project card ---- */
.project-card{
  position: relative;
  display:block;
  text-decoration:none;
}
.project-media{
  position:relative; aspect-ratio: 4/3; overflow:hidden; border-radius: var(--radius-md); border: 1px solid var(--border);
  transition: border-color var(--dur-fast);
  background:
    radial-gradient(60% 70% at 80% 20%, var(--tint), transparent 70%),
    linear-gradient(135deg, var(--surface-3), var(--surface));
}
/* alternate the wash between orange and sand so a grid of cards doesn't repeat one note */
.project-card:nth-child(4n+2) .project-media, .project-card:nth-child(4n+3) .project-media{
  background:
    radial-gradient(60% 70% at 20% 80%, rgba(196,182,164,.12), transparent 70%),
    linear-gradient(135deg, var(--surface-3), var(--surface));
}
.project-media img{ width:100%; height:100%; object-fit:cover; }
/* wide pictures: service & about images, case-study gallery */
.project-media.media-wide{ aspect-ratio: 16/9; }
.project-media.media-wide > img{ display:block; }
/* a case study's client/project logo, above the client name */
.project-logo{ display:block; width:auto; height:auto; max-width: 160px; max-height: 44px; object-fit: contain; margin: .35rem 0 .5rem; }
/* the uploaded brand logo (Content → Company → Logo) in the menu, mobile menu, footer and demo bar */
.brand-logo{ display:block; width:auto; max-width: min(240px, 55vw); object-fit: contain; flex:none; }
/* The logo stays exactly as designed; a soft light sheen (masked to the logo's own shape) sweeps across it once after
   the page loads and again on hover, with a faint brand-orange glow. */
.brand-shine{ position:relative; display:block; flex:none; line-height:0; isolation:isolate; }
.brand-shine .brand-logo{ transition: filter var(--dur-base) var(--ease-out); }
.brand-shine::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  -webkit-mask: var(--brand-src) center / contain no-repeat; mask: var(--brand-src) center / contain no-repeat;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.95) 50%, transparent 62%) no-repeat;
  background-size: 250% 100%; background-position: 160% 0; mix-blend-mode: overlay; opacity:.9;
}
.nav .brand-shine::after{ animation: brand-sheen 1.3s var(--ease-out) .9s 1 both; }
.brand:hover .brand-shine::after, .brand:focus-visible .brand-shine::after{ animation: brand-sheen .9s var(--ease-out) 1 both; }
.brand:hover .brand-shine .brand-logo, .brand:focus-visible .brand-shine .brand-logo{ filter: drop-shadow(0 0 10px rgba(248,69,3,.35)); }
/* over light "paper" sections the header swaps to the dark-ink logo (same shapes, cross-faded) so white parts stay visible */
.brand-shine .brand-logo:not(.brand-logo-ink){ transition: opacity var(--dur-base) var(--ease-out), filter var(--dur-base) var(--ease-out); }
.brand-logo-ink{ position:absolute; left:0; top:0; opacity:0; pointer-events:none; transition: opacity var(--dur-base) var(--ease-out); }
.nav.on-light .brand-logo-ink{ opacity:1; }
.nav.on-light .brand-shine .brand-logo:not(.brand-logo-ink){ opacity:0; }
@keyframes brand-sheen{ from{ background-position: 160% 0; } to{ background-position: -60% 0; } }
/* reduced motion: keep it still, except the site's deliberate desktop "motion-lite" exception */
@media (prefers-reduced-motion: reduce){ html:not(.motion-lite) .brand-shine::after{ animation:none !important; } }
/* the home hero's centre window when a hero image is set */
.hero-frame-image{ display:block; width:100%; height:100%; object-fit:cover; }
.project-media .placeholder-mark{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color: var(--ink-500); font-family:var(--font-display); font-weight:700; font-size:3rem; letter-spacing:-.02em;
}
.project-overlay{
  position:absolute; inset:0; display:flex; align-items:flex-end; padding: var(--space-lg);
  background: linear-gradient(0deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,0) 55%);
  opacity: 0; transition: opacity var(--dur-base) var(--ease-out);
}
.project-card:hover .project-overlay{ opacity: 1; }
.project-view-cta{
  display:inline-flex; align-items:center; gap:.4rem; color: var(--on-dark); font-weight:600; font-size: var(--fs-small);
  transform: translateY(10px); transition: transform var(--dur-base) var(--ease-out);
}
.project-card:hover .project-view-cta{ transform: translateY(0); }
.project-card:hover .project-media{ border-color: var(--border-accent); }
.project-body{ padding: var(--space-sm) 0 0; }
.project-cat{ color: var(--text-accent); font-size: var(--fs-micro); font-weight:500; letter-spacing:.1em; text-transform:uppercase; }
.project-title{ font-family: var(--font-display); font-size: 1.25rem; font-weight:500; margin: .3rem 0 .2rem; color: var(--text-heading); letter-spacing: -.01em; }
.project-desc{ font-size: var(--fs-small); color: var(--text-muted); }

/* ---- Service card ---- */
/* Services read as an editorial list: number · name · one line · arrow, split by hairlines */
.service-list{ display:flex; flex-direction:column; border-top: 1px solid var(--border-strong); }
.service-card{
  position: relative;
  display:grid; grid-template-columns: 3.5rem minmax(0, 1.1fr) minmax(0, 1fr) auto;
  grid-template-areas: "idx title desc link"; align-items:center; column-gap: var(--space-lg);
  padding: var(--space-lg) var(--space-sm);
  border-bottom: 1px solid var(--border-strong);
  background: transparent;
  transition: background var(--dur-standard) var(--ease-out-soft);
  text-decoration:none;
}
.service-card:hover, .service-card:focus-visible{ background: var(--surface); }
.service-card > p{ grid-area: desc; margin: 0; font-size: var(--fs-small); color: var(--text-secondary); max-width: 46ch; }
@media (max-width: 760px){
  .service-card{ grid-template-columns: 2.5rem minmax(0, 1fr) auto; grid-template-areas: "idx title link" "idx desc desc"; row-gap: .35rem; padding-inline: 0; }
}
.service-icon{
  display:none !important;
  width: 52px; height: 52px; border-radius: var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  background: var(--tint); color: var(--text-accent); border: 1px solid var(--tint-strong);
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.service-icon svg{ width: 26px; height: 26px; }
.service-card:hover .service-icon{ background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.service-index{ grid-area: idx; font-family: var(--font-display); font-weight:500; color: var(--text-muted); font-size: var(--fs-small);
  font-variant-numeric: tabular-nums; transition: color var(--dur-fast); }
.service-card:hover .service-index{ color: var(--text-accent); }
.service-title{ grid-area: title; margin: 0; font-family: var(--font-display); font-weight:500; font-size: clamp(1.25rem, 1vw + 1rem, 1.75rem);
  letter-spacing: -.02em; color: var(--text-heading); transition: transform var(--dur-standard) var(--ease-out); }
.service-card:hover .service-title{ transform: translateX(8px); }
/* the "Learn more" link becomes a round arrow (the whole row is the link; the text stays for screen readers) */
.service-link{ grid-area: link; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border-strong);
  display:grid; place-items:center; font-size: 0; color: transparent; flex: none;
  transition: background var(--dur-fast), border-color var(--dur-fast); }
.service-link svg{ width:16px; height:16px; color: var(--text-heading); transition: transform var(--dur-standard) var(--ease-out), color var(--dur-fast); }
.service-card:hover .service-link{ background: var(--primary); border-color: var(--primary); }
.service-card:hover .service-link svg{ color: var(--on-primary); transform: rotate(-45deg); }

/* ---- Why us / feature list ---- */
.feature{
  display:flex; gap: var(--space-md); padding: var(--space-lg) 0;
  border-top: 1px solid var(--border);
  transition: border-color var(--dur-base);
}
.feature:hover{ border-top-color: var(--border-accent); }
.feature-num{ font-family: var(--font-display); font-weight:700; color: var(--accent); font-size: 1.1rem; flex: none; width: 2.5rem; }

.process-tags{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top: var(--space-sm); }
.tag{
  font-size: var(--fs-micro); font-weight:600; color: var(--text-warm);
  background: var(--surface-2); border: 1px solid var(--border); padding: .3rem .7rem; border-radius: var(--radius-pill);
}

/* ---- Stats ---- */
.stat-card{
  position: relative;
  padding: var(--space-md) 0 0; border-top: 1px solid var(--border-strong); text-align:left;
}
.stat-card::before{
  content:''; position:absolute; top:-1px; left:0; width: 40px; height:1px; background: var(--primary);
}
.stat-value{ font-family: var(--font-display); font-size: clamp(2.25rem, 3.4vw, 3.5rem); font-weight:500; letter-spacing: -.03em; color: var(--text-heading); }
.stat-label{ font-size: var(--fs-small); color: var(--text-warm); margin-top:.35rem; }

/* ---- Logo strip ---- */
/* Client logos slide right to left, full-bleed. The template repeats the list so a group always has >= 10 tiles —
   a handful of teams still fills the row. Two identical groups + translateX(-50%) = a seamless loop. */
.logo-strip{
  overflow: hidden; background: var(--surface);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logo-strip-track{
  display:flex; width: max-content;
  animation: logo-strip calc(var(--strip-items, 10) * 3.2s) linear infinite;
  will-change: transform;
}
.logo-strip:hover .logo-strip-track{ animation-play-state: paused; }
.logo-strip-group{ display:flex; flex-shrink:0; }
/* square tiles with no dividers: an uploaded logo fills its whole tile, so tiles sit edge to edge and no
   box lines show between them (client logos are square uploads) */
/* a margin (not a flex gap) after EVERY tile, so both identical groups are the same width and the -50% loop stays seamless */
.logo-strip{ padding-block: var(--space-sm); }
.logo-strip-item{
  flex: 0 0 auto; width: 150px; height: 150px; padding: 0; overflow: hidden;
  margin-inline-end: 16px; border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  transition: background var(--dur-base), filter var(--dur-base);
}
.logo-strip-item:hover{ background: var(--surface-2); }
.logo-strip-item:hover img{ filter: brightness(1.06); }
/* a team with no logo yet shows its name, with its own breathing room */
.logo-strip-item:has(> span){ width: 220px; height: 110px; padding: var(--space-md) var(--space-lg); }
.logo-strip-item span{
  text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
  font-family: var(--font-display); font-weight:500; color: var(--text-muted); font-size: 1.05rem; letter-spacing:.02em;
  opacity:.7; transition: opacity var(--dur-base), color var(--dur-base);
}
.logo-strip-item:hover span{ opacity:1; color: var(--text-heading); }
/* uploaded client logos: fill the whole tile, in their own colours */
.logo-strip-item img{
  display:block; width:100%; height:100%; object-fit: cover;
}
@keyframes logo-strip{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
@media (max-width: 560px){
  .logo-strip-item{ width: 120px; height: 120px; margin-inline-end: 12px; border-radius: 12px; }
  .logo-strip-item:has(> span){ width: 160px; height: 90px; }
}
/* Reduced motion stops the strip (motion.css); hovering pauses it. */

/* ---- Team ---- */
.team-card{ text-align:left; }
.team-photo{
  aspect-ratio: 1; border-radius: var(--radius-md);
  background: radial-gradient(70% 70% at 30% 20%, var(--tint), transparent 70%), linear-gradient(150deg, var(--surface-3), var(--surface));
  display:flex; align-items:center; justify-content:center; margin-bottom: var(--space-sm); overflow:hidden;
  border: 1px solid var(--border);
}
.team-photo span{ font-family: var(--font-display); font-weight:700; font-size: 2rem; color: var(--text-muted); }
.team-photo img{ display:block; width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.team-name{ font-family: var(--font-display); font-weight:500; font-size: 1.1rem; color: var(--text-heading); }
.team-role{ color: var(--text-warm); font-size: var(--fs-small); font-weight:400; }

/* ---- Testimonials ---- */
.testimonial-card{
  padding: var(--space-lg); border-radius: var(--radius-md); border: 1px solid var(--border);
  background: var(--surface); display:flex; flex-direction:column; gap: var(--space-md); height: 100%;
  position: relative; overflow: hidden;
}
.testimonial-card::after{ /* angular corner echoing the logo's cut */
  content:''; position:absolute; top:0; right:0; width:40px; height:40px; border-top-right-radius: var(--radius-lg);
  background: linear-gradient(225deg, var(--tint-strong) 50%, transparent 50%); pointer-events:none;
}
.testimonial-quote{ font-family: var(--font-display); font-size: 1.1rem; font-weight:400; line-height: var(--lh-snug); color: var(--text-heading); }
.testimonial-quote::before{ content: '\201C'; color: var(--text-accent); }
.testimonial-quote::after{ content: '\201D'; color: var(--text-accent); }
.testimonial-person{ display:flex; align-items:center; gap: var(--space-sm); margin-top:auto; }
.testimonial-avatar{
  width:44px; height:44px; border-radius:50%; background: var(--tint); border:1px solid var(--tint-strong);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; color: var(--text-accent);
  flex: none; overflow:hidden;
}
.testimonial-avatar img{ display:block; width:100%; height:100%; object-fit:cover; }
.testimonial-name{ font-weight:600; font-size: var(--fs-small); color: var(--text-heading); }
.testimonial-role{ font-size: var(--fs-micro); color: var(--text-warm); }

/* ---- FAQ ---- */
.faq-item{ border-bottom: 1px solid var(--border); transition: border-color var(--dur-base); }
.faq-item[data-open="true"]{ border-bottom-color: var(--border-accent); }
.faq-question{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap: var(--space-md);
  padding: var(--space-lg) 0; background:none; border:none; text-align:left; cursor:pointer;
  font-family: var(--font-display); font-size: 1.05rem; font-weight:600; color: var(--text-heading);
  transition: color var(--dur-fast);
}
.faq-question:hover{ color: var(--text-accent); }
.faq-icon{
  flex:none; width:32px; height:32px; padding:5px; border-radius:50%; background: var(--surface-2); border:1px solid var(--border);
  transition: transform var(--dur-base) var(--ease-out), background var(--dur-base), color var(--dur-base), border-color var(--dur-base);
  color: var(--text-accent);
}
.faq-question:hover .faq-icon{ border-color: var(--border-accent); }
.faq-item[data-open="true"] .faq-icon{ transform: rotate(45deg); background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.faq-answer{
  display:grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-base) var(--ease-out);
}
.faq-item[data-open="true"] .faq-answer{ grid-template-rows: 1fr; }
.faq-answer-inner{ overflow:hidden; }
.faq-answer p{ padding-bottom: var(--space-lg); max-width: 65ch; }

/* ---- Final CTA ---- */
.cta-band{
  border-radius: var(--radius-lg);
  padding: clamp(2.5rem, 6vw, 5rem);
  background: linear-gradient(160deg, var(--ember-800) 0%, var(--ink-900) 55%, var(--ember-900) 100%);
  border: 1px solid rgba(255,92,0,.22);
  box-shadow: var(--highlight), var(--shadow-lg);
  position: relative; overflow:hidden; text-align:center;
}
.cta-band::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(60% 90% at 50% 110%, rgba(255,92,0,.32), transparent 70%),
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px) 0 0 / 48px 48px;
}
.cta-band::after{ /* the logo's diagonal cut, as a corner accent */
  content:''; position:absolute; top:0; left:0; width:44px; height:44px; pointer-events:none;
  background: linear-gradient(135deg, var(--primary) 0 50%, transparent 50%);
}
.cta-band > *{ position:relative; z-index:1; }
.cta-band h2{ max-width: 18ch; margin-inline:auto; }
.cta-actions{ display:flex; gap: var(--space-md); justify-content:center; margin-top: var(--space-lg); flex-wrap:wrap; }

/* ============ Footer ============ */
.footer{
  position: relative; border-top: 1px solid var(--divider); padding-block: var(--space-3xl) var(--space-lg);
  background: radial-gradient(60% 50% at 0% 0%, rgba(255,92,0,.07), transparent 70%), var(--ink-900);
}
.footer::before{
  content:''; position:absolute; top:-1px; left:0; right:0; height:1px;
  background: linear-gradient(90deg, var(--primary), rgba(255,92,0,.15) 40%, transparent 80%);
}
.footer-grid{ display:grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--space-xl); margin-bottom: var(--space-2xl); }
.footer-brand-desc{ max-width: 34ch; margin-top: var(--space-sm); }
.footer-heading{ font-family: var(--font-display); font-size: var(--fs-small); font-weight:700; text-transform:uppercase; letter-spacing:.08em; color: var(--text-warm); margin-bottom: var(--space-md); }
.footer-links{ display:flex; flex-direction:column; gap: var(--space-sm); }
.footer-links a, .footer-links span{ color: var(--text-secondary); font-size: var(--fs-small); transition: color var(--dur-fast); }
.footer-links a:hover{ color: var(--text-heading); }
.footer-social{ display:flex; gap: var(--space-sm); margin-top: var(--space-md); }
.footer-social a{
  width: 38px; height:38px; border-radius:50%; border:1px solid var(--border-strong); background: var(--ink-850);
  display:flex; align-items:center; justify-content:center; transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
}
.footer-social a:hover{ border-color: var(--primary); color: var(--on-primary); background: var(--primary); }
.footer-social svg{ width:17px; height:17px; }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap: var(--space-sm);
  padding-top: var(--space-lg); border-top: 1px solid var(--divider);
  font-size: var(--fs-micro); color: var(--text-muted);
}
@media (max-width: 900px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .footer-grid{ grid-template-columns: 1fr; }
}

/* ============ Forms ============ */
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.field{ display:flex; flex-direction:column; gap: .45rem; }
.field.full{ grid-column: 1 / -1; }
.field label{ font-size: var(--fs-small); font-weight:600; color: var(--text-secondary); }
.field input, .field select, .field textarea{
  background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: .85rem 1rem; color: var(--text-primary);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.18);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast);
}
.field input::placeholder, .field textarea::placeholder{ color: var(--text-muted); opacity: 1; }
.field input:hover, .field select:hover, .field textarea:hover{ border-color: var(--ink-500); }
.tone-light .field input:hover, .tone-light .field select:hover, .tone-light .field textarea:hover{ border-color: var(--sand-400); }
.field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--primary); outline:none; box-shadow: var(--ring); background: var(--surface); }
.field input:disabled, .field select:disabled, .field textarea:disabled{ background: var(--surface-3); color: var(--text-muted); border-color: var(--border); cursor: not-allowed; box-shadow: none; }
.field select option{ background: var(--surface-2); color: var(--text-primary); }
.field textarea{ resize: vertical; min-height: 130px; }
.field-error{ color: var(--color-error); font-size: var(--fs-micro); min-height: 1em; }
.form-status{ font-size: var(--fs-small); margin-top: var(--space-sm); border-radius: var(--radius-sm); }
.form-status:not(:empty){ padding: .6rem .85rem; background: var(--color-info-soft); color: var(--text-secondary); border-left: 3px solid var(--color-info); }
.form-status[data-state="success"]:not(:empty){ color: var(--color-success); background: var(--color-success-soft); border-left-color: var(--color-success); }
.form-status[data-state="error"]:not(:empty){ color: var(--color-error); background: var(--color-error-soft); border-left-color: var(--color-error); }
@media (max-width: 640px){
  .form-grid{ grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .field-error:empty{ display: none; }   /* no reserved blank line under every field on phones */
  #project-brief-form.card{ padding: 1.25rem; }
}
/* Touch devices: 44px tap targets for the small text links (logo, breadcrumbs, back-to-top) without changing the layout */
@media (pointer: coarse){
  .to-top{ min-height: 44px; }
  .breadcrumb a{ display: inline-flex; align-items: center; min-height: 44px; }
  .breadcrumb{ margin-bottom: var(--space-2xs); }
  .nav .brand::after{ content: ""; position: absolute; inset: -6px -4px; }
}

/* ============ Page header (interior pages) ============ */
.page-header{
  position: relative; overflow: hidden; padding-block: clamp(3rem, 8vw, 5.5rem) var(--space-2xl);
  background:
    radial-gradient(50% 80% at 90% 0%, rgba(255,92,0,.14), transparent 70%),
    linear-gradient(180deg, var(--ink-900), var(--ink-950));
  border-bottom: 1px solid var(--divider);
}
.page-header::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 64px 64px; mask-image: radial-gradient(ellipse 70% 90% at 80% 0%, black 30%, transparent 80%);
}
.page-header > .container{ position: relative; }
.breadcrumb{ display:flex; gap:.5rem; align-items:center; font-size: var(--fs-small); color: var(--text-muted); margin-bottom: var(--space-md); }
.breadcrumb a{ color: var(--text-warm); }
.breadcrumb a:hover{ color: var(--text-accent); }

/* ============ Pricing ============ */
.pricing-card{
  border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-lg);
  background: var(--surface); display:flex; flex-direction:column; gap: var(--space-md);
  transition: border-color var(--dur-base), box-shadow var(--dur-base), transform var(--dur-base) var(--ease-out);
}
.pricing-card:hover{ border-color: var(--border-strong); }
.pricing-card.is-featured{
  border-color: var(--primary); position:relative;
  background: radial-gradient(90% 60% at 100% 0%, var(--tint-strong), transparent 70%), linear-gradient(170deg, var(--surface-elevated), var(--surface));
  box-shadow: var(--highlight), var(--shadow-glow);
}
@media (min-width: 981px){ .pricing-card.is-featured{ transform: translateY(-10px); } }
.pricing-badge{
  position:absolute; top:-14px; left: var(--space-xl);
  background: var(--primary); color: var(--on-primary); font-size: var(--fs-micro); font-weight:700;
  padding: .3rem .8rem; border-radius: var(--radius-pill); box-shadow: var(--shadow-cta);
}
.pricing-price{ font-family: var(--font-display); font-size: 2rem; font-weight:500; letter-spacing:-.02em; color: var(--text-heading); }
.pricing-card.is-featured .pricing-price{ color: var(--accent); }
.pricing-price span{ font-size: var(--fs-small); color: var(--text-muted); font-weight:500; }
.pricing-feature-list{ display:flex; flex-direction:column; gap: .65rem; margin: var(--space-sm) 0; }
.pricing-feature-list li{ display:flex; gap: .6rem; font-size: var(--fs-small); color: var(--text-secondary); align-items:flex-start; }
.pricing-feature-list svg{ width:18px; height:18px; color: var(--text-accent); flex:none; margin-top: .1em; }

/* ============ Reveal animation ============
   Entrance and scroll motion now live in scripts/motion.js + styles/motion.css (one owner, reduced-motion aware). */

/* ============ Badges ============ */
.badge{
  display:inline-flex; align-items:center; gap:.4rem; font-size: var(--fs-micro); font-weight:600;
  padding: .35rem .75rem; border-radius: var(--radius-pill); border: 1px solid var(--border-strong); color: var(--text-warm);
  background: var(--surface-2); width: fit-content; align-self: flex-start; flex: none;
}
.badge-accent{ color: var(--text-accent); background: var(--tint); border-color: var(--tint-strong); }
.badge-success{ color: var(--color-success); background: var(--color-success-soft); border-color: transparent; }
.badge-warning{ color: var(--color-warning); background: var(--color-warning-soft); border-color: transparent; }
.badge-error{ color: var(--color-error); background: var(--color-error-soft); border-color: transparent; }

/* ============ Job / careers ============ */
.job-row{
  display:flex; align-items:center; justify-content:space-between; gap: var(--space-md);
  padding: var(--space-lg) 0; border-top: 1px solid var(--border); flex-wrap:wrap;
  transition: border-color var(--dur-base);
}
.job-row:hover{ border-top-color: var(--border-accent); }
.job-row:last-child{ border-bottom: 1px solid var(--border); }
.job-title{ font-family: var(--font-display); font-weight:500; font-size: 1.1rem; color: var(--text-heading); }
.job-meta{ display:flex; gap: var(--space-sm); flex-wrap:wrap; margin-top:.4rem; }

/* ============ Value/perks grid ============ */
.perk-card{ padding: var(--space-lg); border:1px solid var(--border); border-top: 2px solid var(--border-accent); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--highlight), var(--shadow-sm); }

/* ---------- Project brief form: note, completeness meter, extras ---------- */
.form-note{
  display:flex; gap:.75rem; align-items:flex-start;
  margin:0 0 var(--space-md); padding: var(--space-sm) var(--space-md);
  border:1px solid var(--border-accent); border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--tint), var(--tint-subtle) 60%, transparent);
  color: var(--text-secondary); font-size: var(--fs-small); line-height: var(--lh-normal);
}
.form-note::before{ content:"★"; color: var(--text-accent); font-size:1rem; line-height:1.3; }
.brief-meter{ margin:0 0 var(--space-md); }
.brief-meter-head{ display:flex; justify-content:space-between; font-size: var(--fs-micro); color: var(--text-muted); margin-bottom:.4rem; letter-spacing:.02em; }
.brief-meter-head strong{ color: var(--accent); font-weight:600; }
.brief-meter-track{ height:6px; border-radius: var(--radius-pill); background: var(--surface-3); overflow:hidden; }
.brief-meter-fill{
  height:100%; width:0; border-radius:inherit;
  background: linear-gradient(90deg, var(--color-primary-600), var(--color-primary), var(--color-primary-200));
  transition: width var(--dur-base) var(--ease-out);
}
.field-help{ font-size: var(--fs-micro); color: var(--text-muted); }
.field.is-filled label::after{ content:" ✓"; color: var(--color-success); font-weight:700; }
.field.has-error input, .field.has-error select, .field.has-error textarea{ border-color: var(--color-error); box-shadow: 0 0 0 3px var(--color-error-soft); }
.field.has-error label{ color: var(--color-error); }
.field.is-filled input, .field.is-filled select, .field.is-filled textarea{ border-color: color-mix(in srgb, var(--color-success) 40%, var(--border-strong)); }
.check-group{ display:flex; flex-wrap:wrap; gap:.5rem; }
.check-option{
  display:inline-flex; align-items:center; gap:.5rem; cursor:pointer;
  padding:.55rem .85rem; border:1px solid var(--border-strong); border-radius: var(--radius-pill);
  background: var(--surface-2); font-size: var(--fs-small); color: var(--text-secondary);
  transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
}
.check-option:hover{ border-color: var(--ink-500); color: var(--text-primary); }
.check-option:has(input:focus-visible){ box-shadow: var(--ring); }
.check-option:has(input:checked){ border-color: var(--primary); background: var(--tint); color: var(--text-heading); }
.check-option:has(input:disabled){ color: var(--text-muted); background: var(--surface-3); cursor: not-allowed; }
.check-option input{ accent-color: var(--primary); width:auto; }
.hp-field{ position:absolute !important; left:-10000px; width:1px; height:1px; overflow:hidden; }
.form-success{ text-align:center; padding: var(--space-xl) var(--space-md); }
.form-success-icon{
  width:64px; height:64px; margin:0 auto var(--space-md); display:grid; place-items:center;
  border-radius:50%; background: var(--color-success-soft); color: var(--color-success);
  box-shadow: 0 0 0 8px rgba(63,207,122,.06); animation: success-pop .5s var(--ease-out);
}
.form-success-icon svg{ width:30px; height:30px; }
.form-success h3{ margin-bottom:.5rem; }
.form-success .ref{ display:inline-block; margin-top: var(--space-sm); padding:.35rem .8rem; border-radius: var(--radius-pill);
  background: var(--tint); border: 1px solid var(--tint-strong); font-size: var(--fs-micro); color: var(--text-accent); letter-spacing:.04em; }
@keyframes success-pop{ from{ transform: scale(.6); opacity:0; } to{ transform:none; opacity:1; } }
@media (prefers-reduced-motion: reduce){ .form-success-icon{ animation:none; } .brief-meter-fill{ transition:none; } }

/* Enquiry started from a demo project (/contact/?demo=<slug>) */
.form-demo{
  display:flex; align-items:center; justify-content:space-between; gap: var(--space-sm);
  margin:0 0 var(--space-md); padding: .6rem .6rem .6rem var(--space-md);
  border-radius: var(--radius-pill); background: var(--tint); border: 1px solid var(--tint-strong); color: var(--text-secondary); font-size: var(--fs-small);
}
.form-demo strong{ color: var(--text-accent); }
.form-demo button{
  width:28px; height:28px; flex:none; border-radius:50%; border:1px solid var(--border-strong); background:none;
  color: var(--text-secondary); cursor:pointer; font-size: 1.1rem; line-height:1;
}
.form-demo button:hover{ border-color: var(--primary); color: var(--text-accent); }

/* Contact cards: inline icons keep a fixed size (they used to stretch to the card) */
.card .row > svg{ width: 22px; height: 22px; flex: none; color: var(--text-accent); }
.card a.row{ align-items: center; word-break: break-word; }
.card a.row:hover span{ color: var(--text-accent); }

/* Small phones: the menu already carries "Start a Project", so the header keeps just logo + menu button */
@media (max-width: 480px){
  .nav-cta .btn-primary{ display:none; }
}

/* ============ Loading ============ */
.skeleton{
  border-radius: var(--radius-sm); min-height: 1em;
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 40%, var(--surface-2) 60%); background-size: 400% 100%;
  animation: skeleton 1.4s ease infinite;
}
@keyframes skeleton{ from{ background-position: 100% 50%; } to{ background-position: 0 50%; } }