/* ==============================================================
   12-COLUMN GRID
   One lattice for all content: --margin on both sides, --gutter between 12 equal columns.
   The header, hero image and the big wordmark stay (almost) full-bleed on purpose; content sits on the grid.
   Press "g" on the page (or add ?grid to the URL) to show the columns.
   ============================================================== */






/* content gets the grid margin; the full-bleed bands keep their own small inset (more specific rules in site.css) */
.pad-x{padding-inline:var(--margin);}

/* helper for any new block */
.grid-12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);}

/* ---- section intro: label | statement ---- */
:root .section-grid-intro{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);}
:root .section-grid-intro > .eyebrow{grid-column:1 / span 4;}
:root .section-grid-intro > .intro-statement{grid-column:5 / -1;} /* starts on the same column as .intro-photo */

/* ---- intro: text | photo | results ---- */
:root .intro-lower{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:start;}
:root .intro-copy{grid-column:5 / span 3;grid-row:1;max-width:none;}                    /* text and photo start under the headline (Figma: text 5-7, photo 9-11) */
:root .intro-photo{grid-column:9 / span 3;grid-row:1;width:100%;max-width:none;justify-self:stretch;align-self:start;}
:root .intro-side{grid-column:5 / -1;grid-row:2;align-self:start;margin-top:var(--head-gap);} /* results below, from column 5 */

/* ---- section heading line: label | headline | note ---- */
:root .section-heading-line{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);}
:root .section-heading-line > .eyebrow{grid-column:1 / span 3;}
:root .section-heading-line > h2{grid-column:4 / span 6;}
:root .section-heading-line > p{grid-column:10 / span 3;}

/* ---- toolkit ---- */
:root .toolkit-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);grid-template-areas:none;}
:root .toolkit-head > .eyebrow{grid-area:auto;grid-column:1 / -1;grid-row:1;}
:root .toolkit-head > .toolkit-title{grid-area:auto;grid-column:1 / span 8;grid-row:2;}
:root .toolkit-head > .toolkit-note{grid-area:auto;grid-column:8 / span 5;grid-row:2;}   /* starts on column 8, in line with the results block above */
:root .toolkit{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);}
:root .tk{grid-column:span 2;padding-left:0;padding-right:0;}
:root .tk + .tk{padding-left:0;}

/* ---- case cards: cols 2-11 (the list stays a normal block so the sticky stack keeps working) ---- */
:root .projects{max-width:none;margin-left:0;margin-right:0;}
:root .project-item{width:calc(10 * var(--col) + 9 * var(--gutter));margin-left:calc(var(--col) + var(--gutter));margin-right:0;}

/* ---- services: feature (1-5) | rows (7-12) ---- */
:root .services-layout{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);}
:root .services-feature{grid-column:1 / span 4;}
:root .service-rows{grid-column:6 / span 7;}

/* ---- steps: four across ---- */
:root .steps{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:32px;}
:root .step{grid-column:span 3;}

/* ---- pricing: three across ---- */
:root .pricing-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--gutter);}
:root .pricing-card{grid-column:span 4;}

/* ---- FAQ lines up under the headline (starts at column 4) ---- */
:root .faq-list{margin-left:calc(3 * (var(--col) + var(--gutter)));}

/* ---- contact ---- */
:root .contact-content{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:end;}
:root .contact-main{grid-column:1 / span 8;}
:root .contact-availability{grid-column:10 / span 3;}

/* ---- footer ---- */
:root .footer-top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);}
:root .footer-top > .footer-brand{grid-column:1 / span 3;}
:root .footer-top > p{grid-column:4 / span 5;}
:root .footer-top > nav{grid-column:10 / span 3;justify-self:end;}

/* ============ tablet ============ */
@media(max-width:999px){
  :root .section-grid-intro > .eyebrow,:root .section-grid-intro > .intro-statement{grid-column:1 / -1;}
  :root .section-heading-line > .eyebrow,:root .section-heading-line > h2{grid-column:1 / -1;}
  :root .section-heading-line > p{grid-column:1 / span 8;}
  :root .intro-copy{grid-column:1 / span 6;}
  :root .intro-photo{grid-column:7 / span 6;}
  :root .intro-side{grid-column:1 / -1;margin-top:40px;}
  :root .toolkit-head > .toolkit-title{grid-column:1 / -1;}
  :root .toolkit-head > .toolkit-note{grid-column:1 / -1;grid-row:3;margin-top:16px;}
  :root .tk{grid-column:span 4;}
  :root .project-item{width:calc(12 * var(--col) + 11 * var(--gutter));margin-left:0;}
  :root .services-feature,:root .service-rows{grid-column:1 / -1;}
  :root .step{grid-column:span 6;}
  :root .pricing-card{grid-column:span 12;}
  :root .faq-list{margin-left:0;}
  :root .contact-main,:root .contact-availability{grid-column:1 / -1;}
  :root .footer-top > .footer-brand{grid-column:1 / span 6;}
  :root .footer-top > p{grid-column:7 / span 6;}
  :root .footer-top > nav{grid-column:1 / -1;justify-self:start;margin-top:24px;}
}
/* ============ phone ============ */
@media(max-width:699px){
  :root .intro-copy,:root .intro-photo{grid-column:1 / -1;}
  :root .intro-copy{margin-bottom:28px;}
  :root .tk{grid-column:span 6;}
  :root .step{grid-column:span 12;}
  :root .footer-top > .footer-brand,:root .footer-top > p{grid-column:1 / -1;}
}

/* ============ column overlay: press "g" ============ */
html.show-grid::after{
  content:"";position:fixed;top:0;bottom:0;left:var(--margin);right:var(--margin);z-index:99999;pointer-events:none;
  background:repeating-linear-gradient(90deg,
    rgba(245,53,0,.12) 0,
    rgba(245,53,0,.12) calc((100% - 11 * var(--gutter)) / 12),
    transparent calc((100% - 11 * var(--gutter)) / 12),
    transparent calc((100% - 11 * var(--gutter)) / 12 + var(--gutter)));
  outline:1px solid rgba(245,53,0,.35);
}

/* ============================================================
   Calm sections (03)-(09): same grid logic as the intro and the toolkit.
   Label on columns 1-4, headline from column 5, note under the headline,
   content starts on column 5 as well.
   ============================================================ */
@media(min-width:1000px){
  :root .section-heading-line > .eyebrow{grid-column:1 / span 4;}
  :root .section-heading-line > h2{grid-column:5 / -1;}
  :root .section-heading-line > p{grid-column:5 / span 4;grid-row:2;margin-top:20px;}
  :root .faq-list{margin-left:calc(4 * (var(--col) + var(--gutter)));}
}

/* approach (04): headline and note start on column 7, like the Figma design */
@media(min-width:1000px){
  :root .flow-section .section-heading-line > h2{grid-column:7 / -1;}
  :root .flow-section .section-heading-line > p{grid-column:7 / span 4;}
}

/* services (03): headline and note start on column 6, in line with the service rows */
@media(min-width:1000px){
  :root .services-section .section-heading-line > h2{grid-column:6 / -1;}
  :root .services-section .section-heading-line > p{grid-column:6 / span 4;}
}

/* contact (07): headline and note start on column 7 inside the dark panel */
@media(min-width:1000px){
  :root .contact-section .section-heading-line > h2{grid-column:7 / -1;}
  :root .contact-section .section-heading-line > p{grid-column:7 / span 4;}
}