/* ==========================================================================
   GRAFIX PALACE — DESIGN SYSTEM
   Editorial / industrial-premium visual language, built on a single
   responsive column grid (12 / 8 / 4) and an 8px spacing scale.

   Every section is laid out with the SAME container width, gutter, column
   count and gap at a given breakpoint — so their edges line up even though
   each section is its own grid instance. That shared token system is the
   thing that makes the page read as one continuous architecture rather
   than a stack of independently-built sections.

   Contents:
     1. Design tokens (colour / type / space / grid / radius / motion)
     2. Reset
     3. Typography scale
     4. Layout primitives (container + 12-col grid)
     5. Buttons
     6. Header
     7. Hero
     8. Stats
     9. About
    10. Services
    11. Portfolio (Work)
    12. Why Grafix Palace
    13. Trusted Clients
    14. Testimonial
    15. Process
    16. Quote form
    17. Contact
    18. Footer
    19. Scroll reveal
    20. Responsive — tablet (8-col)
    21. Responsive — mobile (4-col)
   ========================================================================== */

/* ---------- 1. Design tokens ---------- */
:root{
  /* Colour — sampled directly from the Grafix Palace logo files */
  --navy:        #0A5994;
  --navy-deep:   #073F6B;
  --cyan:        #29ABE3;
  --ink:         #12161C;
  --ink-soft:    #1B212A;
  --paper:       #FFFFFF;
  --surface:     #FAFAFB;   /* card surface, a hair off pure white */
  --mist:        #F4F5F7;
  --mist-deep:   #E9EBEE;
  --line:        rgba(18,22,28,0.12);
  --line-light:  rgba(255,255,255,0.18);
  --text-body:   #3B424C;
  --text-mute:   #737b87;

  /* Type */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Inter", "Helvetica Neue", Arial, sans-serif;

  /* Type scale — every piece of text on the page draws from this set */
  --fs-display:  clamp(46px, 5.6vw, 88px);   /* hero headline */
  --fs-h1:       clamp(30px, 3.2vw, 50px);   /* section headings */
  --fs-h2:       clamp(23px, 2.4vw, 32px);   /* testimonial quote */
  --fs-h3:       clamp(18px, 1.6vw, 23px);   /* service/why/process titles */
  --fs-stat:     clamp(32px, 4.2vw, 68px);   /* stat numbers */
  --fs-body-lg:  clamp(16px, 1.05vw, 18px);
  --fs-body:     16px;
  --fs-small:    14px;
  --fs-caption:  12px;

  /* Spacing — 8px system. Use these, not arbitrary values. */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 80px;
  --space-9: 96px;
  --space-10: 128px;

  /* Grid */
  --container-max: 1440px;
  --gutter: clamp(var(--space-3), 4vw, var(--space-7));   /* container edge padding */
  --grid-gap: var(--space-3);                              /* column gap */
  --grid-cols: 12;
  --section-pad: clamp(var(--space-8), 9vw, var(--space-10));

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* Motion */
  --ease: cubic-bezier(.16,.8,.28,1);
  --transition-fast: .2s var(--ease);
  --transition-base: .3s var(--ease);
  --transition-slow: .6s var(--ease);
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, figure, ul, ol{ margin: 0; }
ul, ol{ padding: 0; list-style: none; }
img{ display: block; max-width: 100%; }
a{ color: inherit; text-decoration: none; }
button, input, select, textarea{ font: inherit; color: inherit; }
button{ cursor: pointer; }

body{
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--text-body);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  overflow-x: hidden;
}

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

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- 3. Typography scale ---------- */
.eyebrow{
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-caption);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: var(--space-2);
  display: block;
}
.eyebrow-light{ color: var(--cyan); }

.section-heading{
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.08;
  font-size: var(--fs-h1);
  color: var(--ink);
  text-wrap: balance;
}
.heading-light{ color: var(--paper); }

.text-link{
  display: inline-block;
  margin-top: var(--space-3);
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--navy);
  border-bottom: 1px solid var(--navy);
  padding-bottom: 2px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.text-link:hover{ color: var(--cyan); border-color: var(--cyan); }

/* ---------- 4. Layout primitives ---------- */
section{ padding: var(--section-pad) var(--gutter); }

/* Every content wrapper below is capped at the same max-width and centered
   the same way, so — whatever a section's own background does — its
   content's left/right edges always land on the identical boundary as
   every other section's. That's what keeps the page reading as one grid. */
.header-inner, .hero-inner, .stats-inner,
.about-head, .about-body, .services-head, .services-body,
.work-head, .work-grid, .why-head, .why-list,
.clients-head, .client-grid, .testimonial-head, .testimonial-carousel,
.process-head, .process-list, .quote-inner, .form-grid,
.footer-top, .footer-bottom{
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
}

/* Section "head" blocks (eyebrow + heading) are their own small grid so
   the heading can be pinned to an explicit column span (1/8 = 7 of 12
   columns) instead of an approximated max-width. */
.about-head, .services-head, .work-head, .why-head,
.clients-head, .process-head, .testimonial-head{
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  column-gap: var(--grid-gap);
}

/* ---------- 5. Buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: 15px 28px;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
  white-space: nowrap;
}
.btn:focus-visible{ outline-offset: 2px; }
.btn-primary{ background: var(--navy); color: var(--paper); }
.btn-primary:hover{ background: var(--navy-deep); }

.btn-accent{ background: var(--cyan); color: var(--ink); }
.btn-accent:hover{ background: #48bdef; }

.btn-ghost-light{ border-color: var(--line-light); color: var(--paper); }
.btn-ghost-light:hover{ background: rgba(255,255,255,0.1); border-color: var(--paper); }

.btn-large{ padding: 17px 34px; font-size: var(--fs-body); }
.btn-block{ width: 100%; }
.btn-arrow{ display: inline-block; transition: transform var(--transition-fast); }
.btn:hover .btn-arrow{ transform: translateX(3px); }

/* ==========================================================================
   6. HEADER
   ========================================================================== */
.site-header{
  position: sticky;
  top: 0;
  z-index: 100;
  padding-inline: var(--gutter);
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--transition-base);
}
.site-header.is-scrolled{ box-shadow: 0 8px 24px -18px rgba(10,20,35,0.4); }

.header-inner{
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  column-gap: var(--grid-gap);
  align-items: center;
  padding-block: var(--space-3);
}
.brand{ grid-column: 1 / 4; justify-self: start; }
.brand-logo{ height: 34px; width: auto; }

.main-nav{ grid-column: 4 / 10; justify-self: center; }
.main-nav ul{ display: flex; gap: var(--space-6); }
.main-nav a{
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink);
  position: relative;
  padding-bottom: 4px;
}
.main-nav a::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--cyan);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-base);
}
.main-nav a:hover::after{ transform: scaleX(1); }

.header-cta{ grid-column: 10 / 13; justify-self: end; }

.nav-toggle{
  display: none;
  grid-column: 11 / 13;
  justify-self: end;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px; height: 44px;
  background: none;
  border: none;
}
.nav-toggle span{
  width: 25px; height: 2px;
  background: var(--ink);
  transition: transform var(--transition-base), opacity var(--transition-base);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

.mobile-nav{
  display: none;
  flex-direction: column;
  gap: var(--space-4);
  margin-inline: calc(-1 * var(--gutter));
  padding: var(--space-4) var(--gutter) var(--space-5);
  background: var(--paper);
  border-top: 1px solid var(--line);
}
.mobile-nav ul{ display: flex; flex-direction: column; gap: 4px; }
.mobile-nav a{
  display: block;
  padding: var(--space-2) 0;
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 700;
  border-bottom: 1px solid var(--line);
}
.site-header.is-open .mobile-nav{ display: flex; }

/* ==========================================================================
   7. HERO
   ========================================================================== */
.hero{
  position: relative;
  display: flex;
  align-items: end;
  min-height: 92vh;
  padding: var(--gutter);
  padding-bottom: clamp(var(--space-6), 7vw, var(--space-9));
  overflow: hidden;
}
/* .hero itself stays full width so the photograph bleeds edge to edge —
   .hero-inner is the piece that's capped to the shared container width
   and carries the grid, so hero-content still lands on the same column
   boundaries as every other section even on ultra-wide screens. */
.hero-media{ position: absolute; inset: 0; z-index: 0; }
.hero-media img{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.hero-media::after{
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(10,12,16,0.92) 0%, rgba(10,12,16,0.72) 32%, rgba(10,12,16,0.28) 62%, rgba(10,12,16,0.08) 100%),
    linear-gradient(0deg, rgba(10,12,16,0.65) 0%, rgba(10,12,16,0) 42%);
}
.hero-inner{
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  column-gap: var(--grid-gap);
}
.hero-content{ grid-column: 1 / 7; }
.hero-headline{
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: var(--fs-display);
  line-height: 0.98;
  color: var(--paper);
  text-wrap: balance;
  margin-bottom: var(--space-4);
}
.hero-sub{
  font-size: var(--fs-body-lg);
  color: rgba(255,255,255,0.82);
  max-width: 46ch;
  margin-bottom: var(--space-5);
}
.hero-actions{ display: flex; gap: var(--space-2); flex-wrap: wrap; }

.scroll-cue{
  position: absolute;
  left: var(--gutter);
  bottom: var(--space-5);
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  writing-mode: vertical-rl;
}
.scroll-cue span{ width: 1px; height: 44px; background: rgba(255,255,255,0.5); }

/* ---- Hero slideshow ---- */
.hero-slide{
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
  opacity: 0;
  transition: opacity 1.6s var(--ease);
}
.hero-slide.is-active{ opacity: 1; }

.hero-progress{
  position: absolute;
  right: var(--gutter);
  bottom: var(--space-5);
  z-index: 2;
  width: 44px;
  height: 44px;
}
.hero-progress svg{ transform: rotate(-90deg); }
.hero-progress .track{ fill: none; stroke: rgba(255,255,255,0.28); stroke-width: 2.5; }
.hero-progress .fill{
  fill: none;
  stroke: var(--cyan);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 125.6;
  stroke-dashoffset: 125.6;
}
.hero-progress .fill.is-running{ animation: hero-ring-fill var(--hero-slide-duration, 5s) linear forwards; }
@keyframes hero-ring-fill{
  from{ stroke-dashoffset: 125.6; }
  to{ stroke-dashoffset: 0; }
}

/* ==========================================================================
   8. STATS
   ========================================================================== */
.stats{ padding: var(--space-6) var(--gutter); border-bottom: 1px solid var(--line); }
.stats-inner{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: var(--space-4);
}
.stat{
  flex: 0 0 auto;
  min-width: 0;
  padding-left: var(--space-6);
  padding-right: var(--space-6);
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.stat:last-child{ padding-right: 0; }
.stat:first-child{ border-left: none; padding-left: 0; }
.stat-number{
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-stat);
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.stat-plus{ color: var(--cyan); }
.stat-label{
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mute);
}

/* ==========================================================================
   9. ABOUT
   ========================================================================== */
.about-head{ margin-bottom: var(--space-7); }
.about-head .eyebrow, .about-head .section-heading{ grid-column: 1 / 8; }

.about-body{
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  column-gap: var(--grid-gap);
  row-gap: var(--space-5);
  align-items: start;
}
.about-text{ grid-column: 1 / 6; }
.about-text p{ font-size: var(--fs-body-lg); margin-bottom: var(--space-3); max-width: 42ch; }
.about-media{ grid-column: 6 / 13; position: relative; }
.about-media-main{ aspect-ratio: 4 / 3.1; overflow: hidden; }
.about-media-main img{ width: 100%; height: 100%; object-fit: cover; }
.about-media-inset{
  position: absolute;
  left: calc(-1 * var(--space-5));
  bottom: calc(-1 * var(--space-6));
  width: clamp(160px, 24vw, 280px);
  aspect-ratio: 3 / 3.6;
  overflow: hidden;
  box-shadow: 0 24px 60px -20px rgba(10,20,35,0.35);
  border: 6px solid var(--paper);
}
.about-media-inset img{ width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   10. SERVICES
   ========================================================================== */
.services{ background: var(--mist); }
.services-head{ margin-bottom: var(--space-7); }
.services-head .eyebrow, .services-head .section-heading{ grid-column: 1 / 8; }

.services-body{
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  column-gap: var(--grid-gap);
  align-items: start;
}
.services-list{ grid-column: 1 / 8; border-top: 1px solid var(--line); }
.service-row{
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: baseline;
  gap: 4px var(--space-3);
  padding: var(--space-3) 4px;
  border-bottom: 1px solid var(--line);
  cursor: default;
  transition: background var(--transition-fast);
}
.service-row:hover, .service-row:focus-visible, .service-row.is-active{
  background: rgba(10,89,148,0.05);
  outline: none;
}
.service-index{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-small);
  color: var(--cyan);
}
.service-name{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  color: var(--ink);
  grid-column: 2;
}
.service-desc{
  grid-column: 2;
  font-size: var(--fs-small);
  color: var(--text-mute);
  letter-spacing: 0.01em;
}

.services-preview{
  grid-column: 8 / 13;
  position: sticky;
  top: 112px;
  aspect-ratio: 4 / 4.6;
  overflow: hidden;
  background: var(--ink);
  border-radius: var(--radius-md);
}
.preview-img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}
.preview-img.is-active{ opacity: 1; transform: scale(1); }

/* ==========================================================================
   11. PORTFOLIO (WORK)
   ========================================================================== */
.work-head{ margin-bottom: var(--space-7); }
.work-head .eyebrow, .work-head .section-heading, .work-sub{ grid-column: 1 / 8; }
.work-sub{ margin-top: var(--space-3); font-size: var(--fs-body-lg); color: var(--text-mute); }

.work-grid{
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  grid-auto-rows: minmax(90px, auto);
  column-gap: var(--grid-gap);
  row-gap: var(--grid-gap);
}
.work-item{ position: relative; overflow: hidden; background: var(--mist-deep); min-width: 0; }
.work-item img{ width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); }
.work-item:hover img{ transform: scale(1.045); }

/* Column-span utilities — the interlocking portfolio wall is built purely
   from these against the shared 12-column grid; grid auto-placement packs
   them left-to-right, top-to-bottom without any manual coordinates. */
.span-4{ grid-column: span 4; }
.span-5{ grid-column: span 5; }
.span-6{ grid-column: span 6; }
.span-7{ grid-column: span 7; }
.span-8{ grid-column: span 8; }
.row-2{ grid-row: span 2; }

.work-item figcaption{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3);
  background: linear-gradient(0deg, rgba(8,10,14,0.86) 0%, rgba(8,10,14,0.0) 100%);
  transform: translateY(12px);
  opacity: 0;
  transition: opacity var(--transition-base), transform var(--transition-base);
}
.work-item:hover figcaption, .work-item:focus-within figcaption{
  opacity: 1;
  transform: translateY(0);
}
.wi-client{ color: var(--paper); font-weight: 700; font-size: var(--fs-small); }
.wi-type{ color: rgba(255,255,255,0.75); font-size: var(--fs-caption); }
.wi-year{ color: var(--cyan); font-size: 11px; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   12. WHY GRAFIX PALACE
   ========================================================================== */
.why{ background: var(--ink); }
.why-head{ margin-bottom: var(--space-7); }
.why-head .eyebrow, .why-head .section-heading{ grid-column: 1 / 8; }

.why-list{
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  column-gap: var(--grid-gap);
  border-top: 1px solid var(--line-light);
}
.why-item{
  grid-column: 1 / 13;
  display: grid;
  grid-template-columns: subgrid;
  align-items: baseline;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--line-light);
}
.why-index{ grid-column: 1 / 3; font-family: var(--font-display); font-weight: 800; font-size: var(--fs-small); color: var(--cyan); }
.why-title{ grid-column: 3 / 7; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); color: var(--paper); }
.why-copy{ grid-column: 7 / 13; font-size: var(--fs-small); color: rgba(255,255,255,0.62); max-width: 46ch; }

/* ==========================================================================
   13. TRUSTED CLIENTS
   ========================================================================== */
.clients-head{ margin-bottom: var(--space-6); }
.clients-head .eyebrow, .clients-head .section-heading{ grid-column: 1 / 8; }

/* The logo wall runs its own column count, independent of the master
   12-column grid — chosen per breakpoint to divide the 16 client logos
   evenly, so every row completes and the borders always close into full
   rectangles. Only the wall's own left/right edges need to land on the
   shared container margins, which it still does via the shared max-width
   rule above. */
.client-grid{
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.client-grid li{
  min-width: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  aspect-ratio: 5 / 3.4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(var(--space-1), 1.6vw, var(--space-3));
}
.client-grid img{
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  mix-blend-mode: multiply;
  filter: grayscale(1);
  opacity: 0.62;
  transition: opacity var(--transition-base), filter var(--transition-base);
}
.client-grid li:hover img{ filter: grayscale(0); opacity: 1; }

/* ==========================================================================
   14. TESTIMONIAL
   ========================================================================== */
.testimonial{ background: var(--mist); }
.testimonial-head{ margin-bottom: var(--space-7); }
.testimonial-head .eyebrow, .testimonial-head .section-heading{ grid-column: 1 / 8; }

.testimonial-carousel{ position: relative; }
.testimonial-track{
  display: flex;
  gap: var(--space-6);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.testimonial-track::-webkit-scrollbar{ display: none; }

.testimonial-card{
  flex: 0 0 calc(50% - var(--space-6) / 2);
  min-width: 0;
  scroll-snap-align: start;
  padding-right: var(--space-7);
  border-right: 1px solid var(--line);
}
.testimonial-card:last-child{ border-right: none; padding-right: 0; }

.quote-mark{
  display: block;
  font-family: var(--font-display);
  font-size: clamp(44px, 5vw, 64px);
  line-height: 0.6;
  color: var(--cyan);
  opacity: 0.55;
  margin-bottom: var(--space-2);
}
.testimonial-text{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.35;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-4);
  min-height: 6.5em;
}
.testimonial-attribution{ font-size: var(--fs-body); font-weight: 600; color: var(--ink); }
.testimonial-role{ margin-top: 2px; font-size: var(--fs-small); color: var(--text-mute); }

.testimonial-nav-row{ display: flex; gap: var(--space-2); justify-content: flex-end; margin-top: var(--space-6); }
.testimonial-nav{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--ink);
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.testimonial-nav:hover{ background: var(--ink); color: var(--paper); border-color: var(--ink); }
.testimonial-nav:disabled{ opacity: 0.35; pointer-events: none; }

/* ==========================================================================
   15. PROCESS
   ========================================================================== */
.process-head{ margin-bottom: var(--space-7); }
.process-head .eyebrow, .process-head .section-heading{ grid-column: 1 / 8; }

.process-list{
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  column-gap: var(--grid-gap);
}
.process-step{
  grid-column: span 3;
  min-width: 0;
  position: relative;
  padding: var(--space-4) var(--space-3) 0 0;
  border-top: 2px solid var(--ink);
}
.process-index{
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-small);
  color: var(--cyan);
  margin-bottom: var(--space-2);
}
.process-title{
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  color: var(--ink);
  max-width: 16ch;
}

/* ==========================================================================
   16. QUOTE FORM
   ========================================================================== */
.quote{ background: var(--navy); }
.quote-inner{
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  column-gap: var(--grid-gap);
  align-items: start;
}
.quote-head{ grid-column: 1 / 8; grid-row: 1; margin-bottom: var(--space-5); }
.quote-form-col{ grid-column: 1 / 8; grid-row: 2; }
.quote-sub{ margin-top: var(--space-3); font-size: var(--fs-small); color: rgba(255,255,255,0.6); max-width: 42ch; }

.quote-form{
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-4), 3.4vw, var(--space-6));
  box-shadow: 0 30px 70px -30px rgba(0,0,0,0.5);
}

.form-grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--space-4);
  row-gap: var(--space-4);
  max-width: none;
}
.field{ grid-column: span 6; display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.field-full{ grid-column: span 12; }

.field label{
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.field input, .field select, .field textarea{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 13px var(--space-2);
  color: var(--ink);
  font-size: var(--fs-body);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.field input::placeholder, .field textarea::placeholder{ color: #A7ADB6; }
.field input:hover, .field select:hover, .field textarea:hover{ border-color: #C7CCD3; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 4px rgba(10,89,148,0.13);
}
.field textarea{ resize: vertical; }

.field select{
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1L6 6L11 1' stroke='%23737b87' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right var(--space-2) center;
  padding-right: var(--space-5);
}

/* ---- Custom date field + calendar popover ---- */
.datefield{ position: relative; }
.datefield-trigger{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 13px var(--space-2);
  font-size: var(--fs-body);
  text-align: left;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.datefield-trigger:hover{ border-color: #C7CCD3; }
.datefield-trigger[aria-expanded="true"]{
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 4px rgba(10,89,148,0.13);
}
.datefield-trigger span{ color: #A7ADB6; }
.datefield-trigger.has-value span{ color: var(--ink); }
.datefield-icon{ color: var(--text-mute); flex-shrink: 0; }

.datepicker{
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  left: 0;
  width: 300px;
  max-width: 88vw;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: 0 24px 60px -20px rgba(10,20,35,0.28), 0 4px 18px rgba(10,20,35,0.08);
}
.datepicker.opens-up{
  top: auto;
  bottom: calc(100% + 8px);
}
.datepicker[hidden]{ display: none; }

.datepicker-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}
.datepicker-title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
}
.datepicker-nav{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  color: var(--text-mute);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.datepicker-nav:hover{ background: var(--mist); color: var(--ink); }

.datepicker-weekdays{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  margin-bottom: var(--space-1);
}
.datepicker-weekdays span{
  font-size: 11px;
  font-weight: 600;
  color: var(--text-mute);
}

.datepicker-grid{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  row-gap: 2px;
}
.dp-day{
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  background: none;
  border: none;
  border-radius: 8px;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.dp-day:hover{ background: var(--mist); }
.dp-day.is-adjacent{ color: #BEC3CB; }
.dp-day.is-today::after{
  content: "";
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--navy);
}
.dp-day.is-selected{ background: var(--ink); color: var(--paper); }
.dp-day.is-selected:hover{ background: var(--ink-soft); }
.dp-day.is-selected.is-today::after{ background: var(--paper); }

.file-input{
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-1);
}
.file-input input[type="file"]{ position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.file-input-btn{
  display: inline-flex;
  padding: 9px 18px;
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--radius-sm);
  background: var(--mist);
  color: var(--ink);
  transition: background var(--transition-fast);
}
.file-input-btn:hover{ background: var(--mist-deep); }
.file-input-name{ font-size: var(--fs-small); color: var(--text-mute); padding-left: 4px; }

.form-footer{
  margin-top: var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.form-status{ font-size: var(--fs-small); color: var(--navy); min-height: 1em; }

/* ==========================================================================
   17. CONTACT (right-hand column of the merged quote+contact section)
   ========================================================================== */
.quote-contact-col{
  grid-column: 8 / 13;
  grid-row: 2;
  position: sticky;
  top: calc(var(--space-9) + var(--space-2));
}
.contact-head{ margin-bottom: var(--space-5); }

.contact-details{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  column-gap: var(--space-4);
  row-gap: var(--space-5);
}
.contact-label{
  display: block;
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: var(--space-2);
}
.contact-block p{ font-size: var(--fs-small); line-height: 1.5; color: rgba(255,255,255,0.82); }
.contact-block a:hover{ color: var(--cyan); }

/* ==========================================================================
   18. FOOTER
   ========================================================================== */
.site-footer{ background: #000; padding: var(--space-7) var(--gutter) var(--space-4); }
.footer-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--line-light);
}
.footer-logo{ height: 40px; width: auto; }

.footer-social{ display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.footer-social a{ font-size: var(--fs-small); color: rgba(255,255,255,0.68); }
.footer-social a:hover{ color: var(--cyan); }
.footer-bottom{ padding-top: var(--space-4); font-size: var(--fs-caption); color: rgba(255,255,255,0.4); }

/* ==========================================================================
   19. SCROLL REVEAL
   ========================================================================== */
.reveal{ opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible{ opacity: 1; transform: translateY(0); }

/* ==========================================================================
   20. RESPONSIVE — TABLET (8-column grid)
   ========================================================================== */
@media (max-width: 1024px){
  :root{ --grid-cols: 8; }

  .main-nav, .header-cta{ display: none; }
  .nav-toggle{ display: flex; }
  .brand{ grid-column: 1 / 4; }

  .hero-content{ grid-column: 1 / 7; }

  .stats-inner{ row-gap: var(--space-4); }
  .stat{ flex-basis: calc(50% - var(--space-6)); }
  .stat:nth-child(3), .stat:nth-child(4){ border-left: none; padding-left: 0; border-top: 1px solid var(--line); padding-top: var(--space-3); }

  .about-head .eyebrow, .about-head .section-heading{ grid-column: 1 / 7; }
  .about-body{ grid-template-columns: 1fr; row-gap: var(--space-4); }
  .about-text{ grid-column: auto; }
  .about-media{ grid-column: auto; margin-top: var(--space-1); }
  .about-media-inset{ width: clamp(140px, 32vw, 220px); left: 0; }

  .services-head .eyebrow, .services-head .section-heading{ grid-column: 1 / 7; }
  .services-body{ grid-template-columns: 1fr; }
  .services-list{ grid-column: auto; }
  .services-preview{ grid-column: auto; position: relative; top: 0; aspect-ratio: 16/9; }

  .work-head .eyebrow, .work-head .section-heading, .work-sub{ grid-column: 1 / 7; }
  .work-grid{ grid-template-columns: repeat(4, 1fr); }
  .span-7, .span-8{ grid-column: span 4; }
  .span-5, .span-6{ grid-column: span 2; }
  .span-4{ grid-column: span 2; }

  .why-head .eyebrow, .why-head .section-heading{ grid-column: 1 / 7; }
  .why-item{ grid-template-columns: subgrid; grid-column: 1 / 9; }
  .why-index{ grid-column: 1 / 2; }
  .why-title{ grid-column: 2 / 5; }
  .why-copy{ grid-column: 5 / 9; }

  .clients-head .eyebrow, .clients-head .section-heading{ grid-column: 1 / 7; }
  .client-grid{ grid-template-columns: repeat(4, 1fr); }

  .testimonial-head .eyebrow, .testimonial-head .section-heading{ grid-column: 1 / 7; }

  .process-head .eyebrow, .process-head .section-heading{ grid-column: 1 / 7; }
  .process-list{ grid-template-columns: repeat(4, 1fr); row-gap: var(--space-4); }
  .process-step{ grid-column: span 2; }

  .quote-form-col{ grid-column: 1 / 9; }
  .quote-contact-col{ grid-column: 1 / 9; grid-row: 3; position: static; margin-top: var(--space-6); }
  .contact-details{ max-width: 420px; }
}

/* ==========================================================================
   21. RESPONSIVE — MOBILE (4-column grid)
   ========================================================================== */
@media (max-width: 640px){
  :root{
    --grid-cols: 4;
    --section-pad: var(--space-8);
    --grid-gap: var(--space-2);
  }

  .header-inner{ padding-block: var(--space-2); }
  .brand{ grid-column: 1 / 3; }
  .brand-logo{ height: 27px; }
  .nav-toggle{ grid-column: 3 / 5; }

  .about-head, .services-head, .work-head, .why-head,
  .clients-head, .process-head, .testimonial-head{ max-width: 100%; }
  .about-head .eyebrow, .about-head .section-heading,
  .services-head .eyebrow, .services-head .section-heading,
  .work-head .eyebrow, .work-head .section-heading, .work-sub,
  .why-head .eyebrow, .why-head .section-heading,
  .clients-head .eyebrow, .clients-head .section-heading,
  .process-head .eyebrow, .process-head .section-heading,
  .testimonial-head .eyebrow, .testimonial-head .section-heading{ grid-column: 1 / 5; }

  .hero{ min-height: 100vh; align-items: end; }
  .hero-content{ grid-column: 1 / 5; }
  .hero-headline{ font-size: clamp(32px, 9.5vw, 46px); }
  .hero-actions{ flex-direction: column; align-items: stretch; }
  .scroll-cue{ display: none; }
  .hero-progress{ display: none; }

  .stats-inner{ row-gap: var(--space-4); }
  .stat{ flex-basis: calc(50% - var(--space-2)); border-left: none; padding-left: 0; padding-right: 0; border-top: 1px solid var(--line); padding-top: var(--space-2); }
  .stat:nth-child(1), .stat:nth-child(2){ border-top: none; padding-top: 0; }
  .stat:nth-child(even){ padding-left: var(--space-2); border-left: 1px solid var(--line); }
  .stat-number{ font-size: clamp(30px, 10vw, 40px); }

  .about-media-inset{ display: none; }

  .services-list{ grid-column: auto; }
  .services-preview{ display: none; }

  .work-grid{ grid-template-columns: 1fr; grid-auto-rows: auto; }
  .work-item{ grid-column: span 1 !important; grid-row: span 1 !important; overflow: visible; background: none; min-width: 0; }
  .work-item img{ aspect-ratio: 4/3.4; height: auto; }
  .work-item figcaption{ opacity: 1; transform: none; position: static; background: none; padding: var(--space-2) 2px var(--space-4); }
  .wi-client{ color: var(--ink); }
  .wi-type{ color: var(--text-mute); }
  .wi-year{ color: var(--navy); }

  .why-item{ grid-template-columns: subgrid; grid-column: 1 / 5; gap: var(--space-1) var(--grid-gap); }
  .why-index{ grid-column: 1 / 5; }
  .why-title{ grid-column: 1 / 5; }
  .why-copy{ grid-column: 1 / 5; }

  /* Mobile: a horizontally-scrolling strip rather than a wrapping grid —
     a wrapping grid at 3-per-row leaves a half-empty trailing row for 16
     items; a scroll strip has no "rows" to leave ragged. */
  .client-grid{
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .client-grid::-webkit-scrollbar{ display: none; }
  .client-grid li{
    flex: 0 0 30%;
    scroll-snap-align: start;
    padding: var(--space-2);
  }

  .testimonial-card{ flex-basis: 100%; padding-right: 0; border-right: none; }
  .testimonial-text{ min-height: 0; }

  .process-list{ grid-template-columns: repeat(4, 1fr); row-gap: var(--space-4); }
  .process-step{ grid-column: 1 / 5; }

  .quote-head{ grid-column: 1 / 5; }
  .quote-form-col{ grid-column: 1 / 5; }
  .quote-form{ padding: var(--space-4); border-radius: var(--radius-md); }
  .form-grid{ grid-template-columns: 1fr; }
  .field{ grid-column: auto; }
  .field-full{ grid-column: auto; }

  .quote-contact-col{ grid-column: 1 / 5; grid-row: 3; position: static; margin-top: var(--space-6); }
  .contact-details{ grid-template-columns: 1fr; grid-auto-flow: row; gap: var(--space-4); }

  .footer-top{ justify-content: flex-start; gap: var(--space-4); }
}