/* ==========================================================================
   Malek Webworks — core stylesheet
   Vanilla CSS. Mobile-first. Single warm, light theme — no dark mode.
   Palette: warm cream base, alternating soft peach/sand blocks, charcoal
   ink, one terracotta accent. Bold, rounded, calm — no gradients, no
   glass, no 3D.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand surfaces */
  --bg:              #FAF6F0;   /* page background — warm cream */
  --bg-alt:          #F5E3C9;   /* alternating section block — soft peach */
  --bg-alt-2:        #EFE7DA;   /* alternating section block — soft sand */
  --surface:         #FFFFFF;   /* cards */
  --surface-sunken:  #F1EAE0;

  --border:          rgba(26, 22, 18, 0.12);
  --border-strong:   rgba(26, 22, 18, 0.22);

  /* Ink */
  --text:            #1A1612;
  --text-muted:      #5B5347;
  --text-faint:      #8A8175;
  --text-on-dark:    #FAF6F0;

  /* Accent — one restrained warm terracotta, drawn from the peach blocks */
  --accent:          #B0622E;
  --accent-hover:    #8F4E23;
  --accent-soft:     rgba(176, 98, 46, 0.12);
  --accent-contrast: #FFFFFF;

  --focus:           #8F4E23;

  /* Reference-matched panel colours — used for section backdrops, the
     intro reveal panels, and the carousel's active dot. */
  --peach:       #FFD9AE;
  --apricot:     #FFCB93;
  --pale-yellow: #FCE18F;
  --light-blue:  #9ED3D8;

  /* Type */
  --font-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-display: "Anton", "Arial Narrow", sans-serif;

  /* Fluid type scale */
  --fs-xs:   0.8125rem;
  --fs-sm:   0.9375rem;
  --fs-base: 1.0625rem;
  --fs-md:   clamp(1.0625rem, 0.4vw + 0.95rem, 1.1875rem);
  --fs-lg:   clamp(1.25rem, 0.8vw + 1.05rem, 1.5rem);
  --fs-xl:   clamp(1.5rem, 1.4vw + 1.15rem, 2rem);
  --fs-2xl:  clamp(1.875rem, 2.4vw + 1.3rem, 2.75rem);
  --fs-3xl:  clamp(2.375rem, 4.2vw + 1.25rem, 4.25rem);

  /* Space */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 3rem;     --sp-8: 4rem;
  --sp-9: 6rem;

  --section-y: clamp(3.5rem, 8vw, 6.5rem);
  --wrap: 1160px;
  --wrap-narrow: 760px;

  /* Shape — big, calm rounding, pill nav/buttons */
  --r-sm: 10px;  --r-md: 18px;  --r-lg: 32px;  --r-xl: 44px;  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(26,22,18,.06);
  --shadow-md: 0 10px 30px rgba(26,22,18,.08);
  --shadow-lg: 0 20px 50px rgba(26,22,18,.12);

  --dur: 180ms;
  --ease: cubic-bezier(.2, .7, .3, 1);

  color-scheme: light;
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
input, textarea, select { font: inherit; color: inherit; }

::selection { background: var(--accent); color: var(--accent-contrast); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.skip-link {
  position: absolute; left: 0; top: 0;
  transform: translateY(-120%);
  background: var(--text); color: var(--bg);
  padding: var(--sp-3) var(--sp-5);
  border-radius: 0 0 var(--r-md) 0;
  z-index: 1000;
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus { transform: translateY(0); }

/* --------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--sp-5); }
.wrap--narrow { max-width: var(--wrap-narrow); }

.section { padding-block: var(--section-y); }
.section--alt { background: var(--bg-alt); border-radius: var(--r-xl); margin-inline: var(--sp-4); }
.section--sand { background: var(--bg-alt-2); border-radius: var(--r-xl); margin-inline: var(--sp-4); }
.section--peach { background: var(--peach); border-radius: var(--r-xl); margin-inline: var(--sp-4); }
.section--apricot { background: var(--apricot); border-radius: var(--r-xl); margin-inline: var(--sp-4); border: 2px solid var(--text); }

.section-head { margin-bottom: var(--sp-7); max-width: 640px; }
.section-head--center { max-width: 640px; margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--accent);
  margin: 0 0 var(--sp-3);
}
.eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); flex-shrink: 0;
}

h1, h2 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 400;
}
h1 { font-size: var(--fs-3xl); line-height: 0.98; letter-spacing: 0.001em; }
h2 { font-size: var(--fs-2xl); line-height: 1.02; letter-spacing: 0.001em; }
h3 { font-size: var(--fs-lg); line-height: 1.25; font-weight: 700; }

.display {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 0.001em;
}

.serif-accent { font-family: var(--font-serif); font-weight: 700; text-transform: none; letter-spacing: -0.01em; }

.prose p + p, .prose p + h3, .prose ul + h3 { margin-top: var(--sp-5); }
.prose h3 { margin-bottom: var(--sp-3); }
.prose ul { display: grid; gap: var(--sp-3); margin-top: var(--sp-4); }
.prose li { padding-left: var(--sp-6); position: relative; color: var(--text-muted); }
.prose li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
}
.prose li strong { color: var(--text); }

.grid { display: grid; gap: var(--sp-5); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) {
  .grid--4 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 880px) {
  .grid--2 { grid-template-columns: 1.1fr 0.9fr; gap: var(--sp-7); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(3, 1fr); }
}

.arrow-link {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-weight: 700; color: var(--text);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 2px;
}
.arrow-link::after { content: "→"; transition: transform var(--dur) var(--ease); }
.arrow-link:hover::after { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   4. Buttons — pill-shaped, bold outline, matches reference language
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: 0.85rem 1.6rem;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: var(--fs-sm);
  border: 2px solid var(--text);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
  white-space: nowrap;
}
.btn--primary { background: var(--text); color: var(--bg); }
.btn--primary:hover { background: var(--accent); border-color: var(--accent); transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--text); }
.btn--ghost:hover { background: var(--text); color: var(--bg); transform: translateY(-2px); }
.btn--lg { padding: 1rem 2rem; font-size: var(--fs-md); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.btn-row--center { justify-content: center; }

/* --------------------------------------------------------------------------
   5. Header / nav — floating full-width pill, rounded on all corners,
   with a gap from the top and sides (matches the reference's masthead).
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: var(--sp-4); z-index: 100;
  padding-inline: var(--sp-4);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--surface);
  border-radius: var(--r-pill);
  padding: 1.1rem var(--sp-4) 1.1rem var(--sp-6);
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--dur) var(--ease);
}
.site-header.is-stuck .header-inner { box-shadow: var(--shadow-lg); }

.brand { display: flex; align-items: center; gap: var(--sp-2); }
.brand img { height: 40px; width: auto; }

.nav-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
}
.nav-toggle:hover { background: var(--bg-alt-2); }
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

.site-nav ul {
  display: flex; align-items: center; gap: var(--sp-6);
}
.site-nav a {
  font-family: var(--font-serif); font-weight: 700; font-size: var(--fs-md);
  color: var(--text-muted);
  padding: var(--sp-2) 0;
  position: relative;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--text); }
.site-nav .nav-cta { display: none; }

.header-actions { display: none; }

@media (max-width: 879px) {
  .site-nav {
    position: fixed; inset: 88px var(--sp-4) auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--sp-5);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  }
  .site-nav.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: var(--sp-1); }
  .site-nav a { display: block; padding: var(--sp-3) var(--sp-3); border-radius: var(--r-sm); }
  .site-nav a:hover { background: var(--bg-alt-2); }
  .site-nav .nav-cta { display: block; margin-top: var(--sp-3); }
  .site-nav .nav-cta .btn { display: flex; width: 100%; }
}
@media (min-width: 880px) {
  .nav-toggle { display: none; }
  .header-actions { display: block; }
  .site-nav .nav-cta { display: none; }
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  padding-block: var(--sp-6) var(--sp-7);
}
.hero-boxed {
  border: 2px solid var(--text);
  border-radius: var(--r-xl);
  background: var(--surface);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 880px) {
  .hero-boxed { grid-template-columns: 1.05fr 0.95fr; min-height: 560px; }
}
.hero-inner {
  text-align: left;
  padding: clamp(2.25rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 3.25rem);
  display: flex; flex-direction: column; justify-content: center;
}
.hero h1 { margin-block: var(--sp-5); }
.hero .lede {
  font-size: var(--fs-lg); color: var(--text-muted); max-width: 52ch;
}
.hero .btn-row { margin-top: var(--sp-6); }
.hero-contacts {
  display: flex; justify-content: flex-start; gap: var(--sp-4); margin-top: var(--sp-6);
}

/* Right-hand image panel — flush to the container's top and right edges,
   with the reference's dramatic sweeping curve carved out of the bottom-left
   corner only. Holds a labelled placeholder until real project photography
   is ready (see the image brief). */
.hero-visual {
  position: relative;
  min-height: 260px;
  border-top: 2px solid var(--text);
  border-radius: 0 0 0 clamp(90px, 16vw, 220px);
  overflow: hidden;
  background: var(--bg-alt-2);
}
@media (min-width: 880px) {
  .hero-visual { min-height: 100%; border-top: 0; border-left: 2px solid var(--text); }
}
.hero-visual img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.media-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: var(--sp-5);
  background:
    repeating-linear-gradient(135deg, var(--border) 0 2px, transparent 2px 14px),
    var(--bg-alt-2);
  color: var(--text-muted);
}
.media-placeholder span { max-width: 30ch; }
.media-placeholder strong { display: block; color: var(--text); font-size: var(--fs-sm); margin-bottom: var(--sp-2); }
.media-placeholder small { font-size: var(--fs-xs); }

/* Generic outlined visual slot — used for the About section's large image
   area. Rounded on every corner (unlike the hero's swept panel). */
.media-slot {
  position: relative;
  border-radius: var(--r-lg);
  border: 2px solid var(--text);
  overflow: hidden;
  min-height: 320px;
}
.media-slot img {
  width: 100%; height: 100%;
  display: block;
  object-fit: cover; object-position: center;
}
.hero-contacts a {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.hero-contacts a:hover { background: var(--bg-alt); transform: translateY(-2px); }
.hero-contacts svg { width: 20px; height: 20px; }

.hero-badge {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-pill); padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   7. Cards
   -------------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
}
.card h3 { margin-bottom: var(--sp-2); }
.card p { color: var(--text-muted); }
.card-list { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); }
.card-list li { padding-left: var(--sp-5); position: relative; color: var(--text-muted); font-size: var(--fs-sm); }
.card-list li::before { content: "—"; position: absolute; left: 0; color: var(--accent); }

.icon-badge {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  margin-bottom: var(--sp-4);
}
.icon-badge svg { width: 26px; height: 26px; }

/* Compact summary cards — icon, name, one-line description, and a jump
   link down to the matching full detail section below. */
.service-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.service-card p { color: var(--text-muted); margin: 0; }
.service-card p:first-of-type { flex-grow: 1; }
.service-summary-grid { margin-bottom: var(--sp-7); }

/* Full-width detail sections — all content visible in normal page flow,
   no accordions. Each section's header sits centred at the top, full-width
   content (a card grid, wider info panels) sits below it. */
.service-detail { padding-block: var(--sp-7); scroll-margin-top: var(--sp-7); }
.service-detail:first-of-type { padding-top: 0; }
.service-divider { border: none; border-top: 1px solid var(--border); margin: 0; }

/* A wider variant of .section-head--center (~750px instead of 640px),
   used only by the Website Design and SEO section intros. */
.section-head--wide { max-width: 750px; }
.section-head--wide > p:not(.eyebrow) { color: var(--text-muted); }

.card-grid-heading { font-size: var(--fs-md); margin-bottom: var(--sp-4); }

/* Shared card-grid look for the Website Design and SEO sections — visually
   matched to (but kept independent of) the automation section's .auto-grid
   / .auto-item, so a change to one never touches the other. */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
  gap: var(--sp-5);
  align-items: stretch;
}
@media (min-width: 640px) {
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; }
}
@media (min-width: 1000px) {
  .card-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .card-grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.card-grid-item {
  background: var(--bg-alt-2);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-sm);
  padding: var(--sp-5);
  display: flex; flex-direction: column; align-items: flex-start;
}
.card-grid-item-title { font-size: var(--fs-sm); margin-bottom: var(--sp-1); }
.card-grid-item p { color: var(--text-muted); font-size: var(--fs-sm); margin: 0; }
.card-grid-item--wide { margin-top: var(--sp-5); }
.card-grid-note { margin-top: var(--sp-3); }

/* Two wider side-by-side panels (Website Design's "Already have a
   website?" / "A practical approach to development"). */
.info-panels {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}
@media (min-width: 640px) {
  .info-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.info-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
}
.info-panel h4 { margin-bottom: var(--sp-2); }
.info-panel p { color: var(--text-muted); margin: 0; }

/* Softly highlighted full-width block (SEO's "Clear expectations from
   the start"). */
.callout-panel {
  background: var(--bg-alt);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  margin-top: var(--sp-6);
}
.callout-panel h4 { margin-bottom: var(--sp-2); }
.callout-panel p { color: var(--text-muted); margin: 0; }

.service-detail-cta { text-align: center; margin-top: var(--sp-6); }

/* Automation section — centred header, then a full-width card grid
   (replaces the old two-column intro + sidebar layout for this
   service only; the other two .service-detail sections are unaffected). */
#automation .section-head { margin-bottom: var(--sp-6); }
#automation .section-head > p:not(.eyebrow) { color: var(--text-muted); }

.auto-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
  gap: var(--sp-5);
  align-items: stretch;
}
@media (min-width: 640px) {
  .auto-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; }
}
@media (min-width: 1000px) {
  .auto-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; }
}
.auto-item {
  background: var(--bg-alt-2);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-sm);
  padding: var(--sp-5);
  display: flex; flex-direction: column; align-items: flex-start;
}
.auto-item h4 { font-size: var(--fs-sm); margin-bottom: var(--sp-1); }
.auto-item p { color: var(--text-muted); font-size: var(--fs-sm); margin: 0; }

/* Text-only workflow cards — bold title, a short numbered list of steps,
   then a description. Nested inside .auto-item, so the surrounding
   grid/card look (cream background, rust border-left accent, rounded
   corners, equal desktop heights) is unchanged. No icons, images, or
   decorative graphics — content alone sets each card's height. */
.workflow-card h4 { margin: 0 0 var(--sp-3); width: 100%; }

.workflow-steps {
  list-style: decimal;
  margin: 0 0 var(--sp-3);
  padding-left: 1.2em;
  width: 100%;
}
.workflow-steps li {
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-bottom: var(--sp-1);
}
.workflow-steps li::marker { color: var(--accent); font-weight: 700; }

.workflow-outcomes {
  list-style: none;
  margin: 0 0 var(--sp-3);
  padding: 0;
  width: 100%;
  display: flex; flex-direction: column; gap: var(--sp-1);
}
.workflow-outcomes li { font-size: var(--fs-sm); }
.workflow-outcomes strong { color: var(--accent); }

.workflow-desc { color: var(--text-muted); font-size: var(--fs-sm); margin: 0; width: 100%; }

.automation-cta { text-align: center; margin-top: var(--sp-6); }
.automation-steps { margin-top: var(--sp-7); }
.automation-steps h4 { font-size: var(--fs-md); margin-bottom: var(--sp-2); }
.automation-steps h4:not(:first-child) { margin-top: var(--sp-5); }
.automation-steps > p { color: var(--text-muted); margin-bottom: var(--sp-2); }

/* --------------------------------------------------------------------------
   8. Portfolio
   -------------------------------------------------------------------------- */
.portfolio-flagship {
  display: grid; gap: var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  overflow: hidden;
}
@media (min-width: 880px) {
  .portfolio-flagship { grid-template-columns: 1fr 1fr; align-items: center; padding: var(--sp-7); }
}
.portfolio-flagship img {
  width: 100%; height: auto; display: block;
  border-radius: var(--r-md); border: 1px solid var(--border);
}
.tag-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-4) 0; }
.tag {
  display: inline-flex; padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill); background: var(--bg-alt);
  font-size: var(--fs-xs); font-weight: 700; color: var(--text);
}

.portfolio-grid { margin-top: var(--sp-6); }
.carousel-panel {
  background: var(--peach);
  border-radius: var(--r-xl);
  padding: clamp(2rem, 5vw, var(--sp-8)) clamp(1.25rem, 4vw, var(--sp-6));
  margin-top: var(--sp-7);
}
.carousel-panel .section-head { max-width: 640px; margin-inline: auto; text-align: center; }
.portfolio-card {
  background: var(--surface); border: 2px solid var(--text); border-radius: var(--r-lg);
  overflow: hidden;
}
.portfolio-card-media {
  display: block;
  width: 100%;
  aspect-ratio: 8 / 5; /* ~16:10, matched to the 1384x868 screenshot assets */
  overflow: hidden;
}
.portfolio-card img {
  width: 100%; height: 100%;
  display: block;
  object-fit: cover; object-position: center top;
}
.portfolio-card .portfolio-card-body { padding: var(--sp-5); }
.portfolio-card h3 {
  margin-bottom: var(--sp-2);
  font-family: var(--font-serif); font-weight: 700; text-transform: none; letter-spacing: -0.01em;
}
.portfolio-card p { color: var(--text-muted); font-size: var(--fs-sm); }

/* --------------------------------------------------------------------------
   9. Process steps
   -------------------------------------------------------------------------- */
.steps { counter-reset: step; }
.step {
  display: flex; gap: var(--sp-5); padding-block: var(--sp-5);
  border-top: 1px solid var(--border);
}
.step:first-child { border-top: 0; }
.step-num {
  counter-increment: step;
  flex-shrink: 0;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--text); color: var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: var(--fs-md);
}
.step-num::before { content: counter(step, decimal-leading-zero); }
.step-body h3 { margin-bottom: var(--sp-1); }
.step-body p { color: var(--text-muted); }

/* --------------------------------------------------------------------------
   10. FAQ accordion
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: var(--sp-3); }
.faq details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
}
.faq summary {
  cursor: pointer; list-style: none; font-weight: 700;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-size: 1.4em; line-height: 1; color: var(--accent); flex-shrink: 0;
}
.faq details[open] summary::after { content: "–"; }
.faq-body { color: var(--text-muted); padding-top: var(--sp-3); }

/* --------------------------------------------------------------------------
   12. Form
   -------------------------------------------------------------------------- */
.form { display: grid; gap: var(--sp-4); }
.field { display: grid; gap: var(--sp-2); }
.field label { font-weight: 700; font-size: var(--fs-sm); }
.field .req { color: var(--accent); }
.field .hint { font-weight: 400; color: var(--text-faint); }
.field input, .field select, .field textarea {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  width: 100%;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent);
}
.form-note { font-size: var(--fs-xs); color: var(--text-faint); margin-top: var(--sp-2); }
.hp { position: absolute; left: -9999px; }

.form-status {
  border-radius: var(--r-md); padding: var(--sp-4);
  background: var(--bg-alt-2); font-weight: 600;
}
.form-status--ok { background: var(--accent-soft); color: var(--accent-hover); }

.contact-list { display: grid; gap: var(--sp-4); }
.contact-list .label { display: block; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); margin-bottom: 2px; }
.contact-list a { font-weight: 700; }
.contact-list a:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   13. CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  background: var(--text); color: var(--bg);
  border-radius: var(--r-xl);
  margin-inline: var(--sp-4);
  padding-block: var(--sp-8);
  text-align: center;
}
.cta-band h2 { color: var(--bg); }
.cta-band p { color: rgba(250,246,240,.75); max-width: 560px; margin-inline: auto; margin-top: var(--sp-3); }
.cta-band .btn--primary { background: var(--bg); color: var(--text); border-color: var(--bg); }
.cta-band .btn--primary:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.cta-band .btn--ghost { border-color: rgba(250,246,240,.4); color: var(--bg); }
.cta-band .btn--ghost:hover { background: var(--bg); color: var(--text); }

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */
.site-footer { padding-block: var(--sp-8) var(--sp-6); margin-top: var(--sp-7); }
.footer-grid { display: grid; gap: var(--sp-7); }
@media (min-width: 720px) {
  .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; }
}
.footer-brand img { height: 44px; width: auto; margin-bottom: var(--sp-3); }
.footer-brand p { color: var(--text-muted); max-width: 320px; }
.footer-col h2 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .06em; margin-bottom: var(--sp-4); }
.footer-col ul { display: grid; gap: var(--sp-2); }
.footer-col a { color: var(--text-muted); }
.footer-col a:hover { color: var(--accent); }
.footer-bottom {
  margin-top: var(--sp-8); padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6);
  font-size: var(--fs-xs); color: var(--text-faint);
}
.footer-bottom a { color: var(--text-faint); }
.footer-bottom a:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   15. Misc widgets — cookie banner, WhatsApp FAB, breadcrumb
   -------------------------------------------------------------------------- */
.breadcrumb { font-size: var(--fs-xs); color: var(--text-faint); margin-bottom: var(--sp-4); }
.breadcrumb a { color: var(--text-faint); }
.breadcrumb a:hover { color: var(--accent); }

.cookie-banner {
  position: fixed; left: var(--sp-4); right: var(--sp-4); bottom: var(--sp-4);
  z-index: 200; max-width: 560px; margin-inline: auto;
}
.cookie-banner-inner {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  padding: var(--sp-5);
}
.cookie-banner p { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--sp-4); }
.cookie-banner a { text-decoration: underline; }
.cookie-banner-actions { display: flex; gap: var(--sp-3); }

.whatsapp-fab {
  position: fixed; right: var(--sp-5); bottom: var(--sp-5); z-index: 90;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-lg);
  transition: transform var(--dur) var(--ease);
}
.whatsapp-fab:hover { transform: translateY(-3px); }
.whatsapp-fab svg { width: 28px; height: 28px; }

/* --------------------------------------------------------------------------
   16. Scroll reveal
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 520ms var(--ease), transform 520ms var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   17. Legal page (privacy policy)
   -------------------------------------------------------------------------- */
.legal .prose h2 { margin-top: var(--sp-7); margin-bottom: var(--sp-3); }
.legal .prose h2:first-child { margin-top: 0; }
.legal .prose p { color: var(--text-muted); margin-bottom: var(--sp-3); }
.legal .prose ul { margin-block: var(--sp-3); }

/* --------------------------------------------------------------------------
   18. 404 page
   -------------------------------------------------------------------------- */
.error-page { padding-block: var(--sp-9); text-align: center; }
.error-code {
  font-size: clamp(4rem, 14vw, 9rem);
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
  margin-bottom: var(--sp-4);
}

/* --------------------------------------------------------------------------
   19. Intro loader — a pale-yellow sunburst badge counts up to 100 on the
   cream backdrop, then two colour panels sweep off to the left, revealing
   the page from the right as they go. Shown once per browser session on a
   full page load; skipped entirely under reduced motion. See main.js.
   -------------------------------------------------------------------------- */
.intro-loader {
  position: fixed; inset: 0; z-index: 999;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.intro-badge {
  position: relative;
  z-index: 3;
  isolation: isolate;
  width: clamp(140px, 22vw, 220px);
  height: clamp(140px, 22vw, 220px);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 280ms var(--ease), transform 280ms var(--ease);
}
.intro-badge-burst {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  color: var(--pale-yellow);
  fill: currentColor;
}
.intro-loader-num {
  position: relative; z-index: 1;
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--text);
  font-size: clamp(1.9rem, 5.5vw, 3.25rem);
}
.intro-loader.is-counted .intro-badge { opacity: 0; transform: scale(0.82); }

.intro-panels {
  position: absolute; inset: 0; z-index: 2;
  display: flex;
  transform: translateX(100%);
  transition: transform 720ms var(--ease);
}
.intro-panels > span { flex: 1 1 50%; }
.intro-panels .p-yellow { background: var(--pale-yellow); }
.intro-panels .p-apricot { background: var(--apricot); }
.intro-loader.is-exiting .intro-panels { transform: translateX(-100%); }

.intro-loader.is-hidden { display: none; }
html.intro-lock { overflow: hidden; }

/* --------------------------------------------------------------------------
   20. Carousel — horizontal scroll-snap track with arrow + dot controls
   -------------------------------------------------------------------------- */
.carousel-track {
  display: flex; gap: var(--sp-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--sp-4);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-top: var(--sp-6);
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track > * {
  scroll-snap-align: start;
  flex: 0 0 85%;
}
@media (min-width: 640px) {
  .carousel-track > * { flex: 0 0 46%; }
}
@media (min-width: 880px) {
  .carousel-track > * { flex: 0 0 31.5%; }
}
.carousel-controls {
  display: flex; align-items: center; justify-content: center;
  gap: var(--sp-5); margin-top: var(--sp-6);
}
.carousel-arrow {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid var(--text); background: transparent;
  flex-shrink: 0;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.carousel-arrow:hover { background: var(--text); color: var(--bg); transform: translateY(-2px); }
.carousel-arrow svg { width: 20px; height: 20px; }
.carousel-dots { display: flex; align-items: center; gap: var(--sp-2); }
.carousel-dots button {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--border-strong);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.carousel-dots button.is-active { background: var(--light-blue); transform: scale(1.3); }