/*
Theme Name: Office4Garden
Theme URI: https://office4garden.com
Author: Office4Garden
Description: Custom coded theme ported from the Claude Design project "Office4Garden final website" (design system office4gardens c4c1ef).
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: office4garden
*/

/* ==========================================================================
   1. Webfonts (self-hosted, latin subset of the Google Fonts variable files
      the design system's tokens/fonts.css imports: Petrona + Karla)
   ========================================================================== */
@font-face{font-family:'Petrona';font-style:normal;font-weight:400 700;font-display:swap;src:url('assets/fonts/petrona-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Petrona';font-style:italic;font-weight:400 500;font-display:swap;src:url('assets/fonts/petrona-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Karla';font-style:normal;font-weight:400 700;font-display:swap;src:url('assets/fonts/karla-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Karla';font-style:italic;font-weight:400;font-display:swap;src:url('assets/fonts/karla-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ==========================================================================
   2. Design tokens — ONE :root block.
      Tier 1: raw palette / scale values, quoted literally from the design
              system (tokens/*.css) and from the page source (sections-a.jsx,
              sections-c.jsx, process-*.jsx) where a component hard-codes a value.
      Tier 2: semantic aliases. Component rules below consume ONLY tier 2.

   Breakpoint scale (CSS vars can't be used inside @media, so documented here
   and used verbatim everywhere):
      xl 1360px  header phone number hides        (source: sections-a.jsx)
      lg 1140px  desktop nav -> hamburger; 4-col grids -> 2; FAQ grid stacks
      md  900px  timeline rows + footer stack      (source: Process.html)
      sm  768px  phone: type/spacing tokens shrink, 2-col grids -> 1
   ========================================================================== */
:root{
  /* ---- Tier 1: colour palette (tokens/colors.css) ---- */
  --green-600:#2E6E53;
  --green-700:#22553F;
  --moss-wash:#DCEBE3;
  --moss-hairline:rgba(46,110,83,0.28);
  --white:#FFFFFF;
  --stone:#F6F4F0;
  --warm-sand:#EFEBE3;
  --deep-pine:#142E25;
  --overlay-pine:rgba(20,46,37,0.55);
  --charcoal-ink:#2F2C27;
  --warm-graphite:#4A453D;
  --taupe:#7A7268;
  --ash:#A79E92;
  --hairline:#E4DFD8;
  --hairline-soft:#EEEAE4;
  --alert-red:#A8402A;
  --on-green:#FFFFFF;
  --on-pine:#F6F4F0;
  /* Tier 1: translucent values hard-coded in the page source components */
  --white-a90:rgba(255,255,255,0.9);        /* nav link over hero */
  --white-a50:rgba(255,255,255,0.5);        /* hamburger border over hero */
  --white-a18:rgba(255,255,255,0.18);       /* header border over hero */
  --stone-a75:rgba(246,244,240,0.75);       /* hero eyebrow */
  --stone-a15:rgba(246,244,240,0.15);       /* footer divider */
  --scrim-72:rgba(18,38,30,0.72);
  --scrim-62:rgba(18,38,30,0.62);
  --scrim-60:rgba(18,38,30,0.6);
  --scrim-50:rgba(18,38,30,0.5);
  --scrim-45:rgba(18,38,30,0.45);
  --scrim-38:rgba(18,38,30,0.38);
  --scrim-35:rgba(18,38,30,0.35);
  --scrim-25:rgba(18,38,30,0.25);
  --scrim-82:rgba(18,38,30,0.82);
  --scrim-15:rgba(18,38,30,0.15);
  --scrim-0:rgba(18,38,30,0);
  --shadow-ink-35:rgba(0,0,0,0.35);
  --shadow-ink-30:rgba(0,0,0,0.3);

  /* ---- Tier 1: type (tokens/typography.css) ---- */
  --font-display:'Petrona',Georgia,'Times New Roman',serif;
  --font-body:'Karla',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --text-display-xl:56px;
  --text-display-lg:40px;
  --text-display-md:32px;
  --text-display-sm:26px;
  --leading-display:1.12;
  --tracking-display:-0.01em;
  --text-body-lg:18px;
  --text-body-md:16px;
  --text-body-sm:14px;
  --text-body-xs:12px;
  --leading-body:1.55;
  --leading-tight:1.3;
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;
  /* Tier 1: literal component font sizes from the page source */
  --fs-48:48px; --fs-28:28px; --fs-24:24px; --fs-20:20px; --fs-18:18px;
  --fs-17:17px; --fs-15-5:15.5px; --fs-15:15px; --fs-13-5:13.5px; --fs-13:13px;

  /* ---- Tier 1: spacing (tokens/spacing.css) ---- */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px;
  --container-max:1200px;
  --gutter:24px;
  /* Tier 1: literal component spacing from the page source */
  --px-6:6px; --px-10:10px; --px-14:14px; --px-20:20px; --px-22:22px; --px-28:28px;
  --px-36:36px; --px-40:40px; --px-56:56px; --px-72:72px; --px-96:96px;
  --px-140:140px; --px-150:150px;

  /* ---- Tier 1: effects (tokens/effects.css) ---- */
  --radius-sm:2px; --radius-md:4px; --radius-lg:6px; --radius-pill:999px;
  --shadow-card:0 1px 2px rgba(20,46,37,0.05),0 6px 20px rgba(20,46,37,0.07);
  --shadow-card-hover:0 2px 4px rgba(20,46,37,0.06),0 12px 28px rgba(20,46,37,0.1);
  --ease-standard:cubic-bezier(.4,0,.2,1);
  --duration-fast:120ms;
  --duration-standard:180ms;

  /* ---- Tier 2: semantic aliases (tokens/colors.css) ---- */
  --surface-page:var(--white);
  --surface-alt:var(--stone);
  --surface-card:var(--white);
  --surface-card-nested:var(--warm-sand);
  --surface-dark:var(--deep-pine);
  --surface-overlay:var(--overlay-pine);
  --text-heading:var(--charcoal-ink);
  --text-body:var(--warm-graphite);
  --text-muted:var(--taupe);
  --text-disabled:var(--ash);
  --text-on-accent:var(--on-green);
  --text-on-dark:var(--on-pine);
  --border-default:var(--hairline);
  --border-soft:var(--hairline-soft);
  --accent:var(--green-600);
  --accent-hover:var(--green-700);
  --accent-wash:var(--moss-wash);
  --accent-hairline:var(--moss-hairline);
  --danger:var(--alert-red);

  /* ---- Tier 2: component semantics ---- */
  --surface-header:var(--white);
  --surface-media:var(--white);                 /* design-3d render frame bg */
  --text-on-photo:var(--white);
  --text-on-photo-soft:var(--white-a90);
  --text-hero-eyebrow:var(--stone-a75);
  --border-on-photo:var(--white-a18);
  --border-on-photo-strong:var(--white-a50);
  --border-footer:var(--stone-a15);
  --btn-on-dark-bg:var(--white);
  --btn-on-dark-text:var(--deep-pine);
  --btn-on-dark-hover:var(--stone);
  --corner-mark:var(--moss-hairline);
  --text-shadow-photo:0 1px 2px var(--shadow-ink-35),0 2px 18px var(--shadow-ink-30);
  --scrim-hero:linear-gradient(90deg,var(--scrim-72) 0%,var(--scrim-50) 32%,var(--scrim-0) 62%),linear-gradient(0deg,var(--scrim-45) 0%,var(--scrim-0) 45%),linear-gradient(180deg,var(--scrim-35) 0%,var(--scrim-0) 18%);
  --scrim-hero-mobile:linear-gradient(0deg,var(--scrim-82) 0%,var(--scrim-60) 55%,var(--scrim-15) 85%,var(--scrim-35) 100%);
  --scrim-cta:radial-gradient(ellipse 60% 70% at 50% 50%,var(--scrim-62) 0%,var(--scrim-38) 70%,var(--scrim-25) 100%);

  --section-pad-y:var(--space-9);
  --hero-pad-top:var(--px-150);
  --hero-pad-bottom:var(--space-8);
  --hero-min-h:660px;
  --cta-pad-y:var(--px-140);
  --h1-size:var(--text-display-xl);
  --h1-leading:var(--leading-display);
  --h2-size:var(--text-display-lg);
  --tap-min:44px;
  --btn-lg-pad-y:19px; --btn-lg-pad-x:34px;   /* sections-a.jsx CTA size lg */
  --header-offset:88px;                        /* solid header height on no-hero pages */
  --h1-size-md:36px;                           /* Process.html @900 */
  --header-pad-y:var(--px-22);
  --header-pad-y-solid:var(--px-14);

  /* Grid gaps: desktop value, then the value used once a grid stacks to 1 col */
  --gap-row:var(--px-72);        --gap-row-stacked:var(--px-36);
  --gap-faq:var(--space-8);      --gap-faq-stacked:var(--px-40);
  --gap-grid4:var(--px-28);      --gap-grid4-stacked:var(--space-6);
  --gap-footer:var(--px-40);     --gap-footer-stacked:var(--space-6);
  --row-pad-y:var(--px-56);
}

/* ==========================================================================
   3. Base (tokens/base.css + global rules injected by sections-a.jsx)
   ========================================================================== */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-body);color:var(--text-body);background:var(--surface-page);font-size:var(--text-body-md);line-height:var(--leading-body)}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--text-heading);margin:0;font-weight:var(--weight-semibold);letter-spacing:var(--tracking-display)}
h1,h2{text-wrap:balance}
h2{line-height:1.15}
h3{line-height:1.25}
p{margin:0;text-wrap:pretty}
a{color:var(--accent)}
a:hover{color:var(--accent-hover)}
img{max-width:100%}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link:focus{position:fixed;left:var(--space-4);top:var(--space-4);width:auto;height:auto;clip:auto;z-index:200;background:var(--surface-page);color:var(--accent);padding:var(--space-3) var(--space-4)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.container{max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter)}
.eyebrow{font-size:var(--text-body-xs);font-weight:var(--weight-semibold);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:var(--px-14)}

/* ==========================================================================
   4. Components
   ========================================================================== */

/* Photo */
.o4g-photo{display:block;width:100%;height:100%;object-fit:cover}

/* CornerFrame */
.cframe{position:relative}
.cframe__inner{border-radius:var(--radius-sm);overflow:hidden;background:var(--surface-alt)}
.cframe__c{position:absolute;width:var(--px-20);height:var(--px-20);border:0 solid var(--corner-mark)}
.cframe__c--nw{top:-1px;left:-1px;border-top-width:2px;border-left-width:2px}
.cframe__c--ne{top:-1px;right:-1px;border-top-width:2px;border-right-width:2px}
.cframe__c--sw{bottom:-1px;left:-1px;border-bottom-width:2px;border-left-width:2px}
.cframe__c--se{bottom:-1px;right:-1px;border-bottom-width:2px;border-right-width:2px}
.ar-3-2{aspect-ratio:3/2}.ar-4-5{aspect-ratio:4/5}.ar-21-8{aspect-ratio:21/8}.ar-render{aspect-ratio:1360/689}

/* Button (DS Button + page CTA size overrides) */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap-min);font-family:var(--font-body);font-weight:var(--weight-medium);line-height:1.2;letter-spacing:.01em;border:none;border-radius:var(--radius-sm);cursor:pointer;text-decoration:none;white-space:nowrap;transition:background var(--duration-standard) var(--ease-standard),transform 80ms;padding:var(--space-4) var(--px-28);font-size:var(--fs-15-5)}
.btn--lg{padding:var(--btn-lg-pad-y) var(--btn-lg-pad-x);font-size:var(--fs-17)}
.btn--primary{background:var(--accent);color:var(--text-on-accent)}
.btn--primary:hover{background:var(--accent-hover);color:var(--text-on-accent)}
.btn--on-dark{background:var(--btn-on-dark-bg);color:var(--btn-on-dark-text)}
.btn--on-dark:hover{background:var(--btn-on-dark-hover);color:var(--btn-on-dark-text)}
.btn:active{transform:translateY(1px)}

/* Header */
.site-header{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--header-pad-y) var(--gutter);background:transparent;border-bottom:1px solid var(--border-on-photo);transition:background var(--duration-standard) ease,padding var(--duration-standard) ease,box-shadow var(--duration-standard) ease,border-color var(--duration-standard) ease}
.site-header__logo{display:inline-flex;align-items:center;min-height:var(--tap-min);font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:var(--fs-20);color:var(--text-on-photo);text-decoration:none;transition:color var(--duration-standard) ease}
.site-header__logo:hover{color:var(--text-on-photo)}
.site-nav{display:flex;gap:var(--space-4)}
.site-nav a{font-size:var(--text-body-sm);color:var(--text-on-photo-soft);text-decoration:none;white-space:nowrap;transition:color var(--duration-standard) ease}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--text-on-photo)}
.site-header__actions{display:flex;align-items:center;gap:var(--space-3)}
.header-phone{font-size:var(--text-body-sm);color:var(--text-on-photo);text-decoration:none;font-weight:var(--weight-medium);margin-right:var(--px-6);transition:color var(--duration-standard) ease}
.menu-btn{display:none;width:var(--tap-min);height:var(--tap-min);align-items:center;justify-content:center;background:transparent;border:1px solid var(--border-on-photo-strong);border-radius:var(--radius-sm);cursor:pointer;padding:0;color:var(--text-on-photo)}
.menu-btn .icon-close{display:none}
/* solid state: scrolled, menu open, or a page with no photo hero */
.site-header.is-solid,.site-header.is-open,body:not(.has-hero) .site-header{background:var(--surface-header);border-bottom-color:var(--border-soft)}
.site-header.is-solid{padding-top:var(--header-pad-y-solid);padding-bottom:var(--header-pad-y-solid);box-shadow:var(--shadow-card)}
.site-header.is-solid .site-header__logo,.site-header.is-open .site-header__logo,body:not(.has-hero) .site-header__logo,
.site-header.is-solid .header-phone,.site-header.is-open .header-phone,body:not(.has-hero) .header-phone,
.site-header.is-solid .menu-btn,.site-header.is-open .menu-btn,body:not(.has-hero) .menu-btn{color:var(--text-heading)}
.site-header.is-solid .site-nav a,body:not(.has-hero) .site-nav a{color:var(--text-body)}
.site-header.is-solid .site-nav a:hover,body:not(.has-hero) .site-nav a:hover,.site-header.is-solid .site-nav a[aria-current="page"],body:not(.has-hero) .site-nav a[aria-current="page"]{color:var(--accent)}
.site-header.is-solid .menu-btn,.site-header.is-open .menu-btn,body:not(.has-hero) .menu-btn{border-color:var(--border-default)}
.site-header.is-open .icon-open{display:none}
.site-header.is-open .icon-close{display:block}
body:not(.has-hero) .site-main{padding-top:var(--header-offset)}

.mobile-menu{display:none;position:fixed;inset:0;z-index:99;background:var(--surface-header);padding-top:var(--px-96);flex-direction:column;overflow-y:auto}
.mobile-menu.is-open{display:flex}
.mobile-menu nav{display:flex;flex-direction:column;padding:0 var(--gutter)}
.mobile-menu nav a{font-family:var(--font-display);font-size:var(--fs-24);color:var(--text-heading);text-decoration:none;padding:var(--px-14) 0;border-bottom:1px solid var(--border-soft)}
.mobile-menu nav a:hover{color:var(--accent)}
.mobile-menu__cta{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-6) var(--gutter)}
.mobile-menu__tel{font-size:var(--text-body-md);color:var(--text-heading);text-decoration:none;font-weight:var(--weight-medium);text-align:center;padding:var(--px-10) 0}
body.menu-open{overflow:hidden}

/* Page hero (PageHero) */
.page-hero{position:relative;min-height:var(--hero-min-h);display:flex;align-items:flex-end;background:var(--surface-dark)}
.page-hero__img{position:absolute;inset:0}
.page-hero__img .o4g-photo,.cta-band__img .o4g-photo{filter:saturate(1.12) contrast(1.04)}
.page-hero__scrim{position:absolute;inset:0;pointer-events:none;background:var(--scrim-hero)}
.page-hero__content{position:relative;z-index:1;max-width:var(--container-max);margin:0 auto;width:100%;padding:var(--hero-pad-top) var(--gutter) var(--hero-pad-bottom);display:flex;flex-direction:column;gap:var(--px-20);text-shadow:var(--text-shadow-photo)}
.page-hero__eyebrow{font-size:var(--text-body-xs);font-weight:var(--weight-semibold);letter-spacing:.08em;text-transform:uppercase;color:var(--text-hero-eyebrow)}
.page-hero h1{font-size:var(--h1-size);line-height:var(--h1-leading);letter-spacing:var(--tracking-display);color:var(--text-on-photo);max-width:760px}
.page-hero__body{font-size:var(--text-body-lg);color:var(--text-on-photo);max-width:560px}

/* Section shell (Section) */
.section{background:var(--surface-page);padding:var(--section-pad-y) 0}
.section--alt{background:var(--surface-alt)}
.section__title{font-size:var(--h2-size);line-height:1.15;color:var(--text-heading);max-width:680px}
.section__body{margin-top:var(--space-7)}

/* Process timeline */
.timeline__title{font-size:var(--h2-size);line-height:1.15;margin:0 0 var(--space-4);max-width:640px}
.timeline__intro{font-size:var(--text-body-lg);line-height:1.6;color:var(--text-body);margin:0 0 var(--space-5);max-width:580px}
.process-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--gap-row);align-items:center;padding:var(--row-pad-y) 0;border-bottom:1px solid var(--border-default)}
.process-row:last-child{border-bottom:none}
.process-row__text{display:flex;flex-direction:column;gap:var(--space-3)}
.process-row--flip .process-row__text{order:2}
.process-row--flip .process-row__media{order:1}
.process-row__meta{display:flex;align-items:baseline;gap:var(--space-4)}
.process-row__num{font-family:var(--font-display);font-size:var(--fs-48);line-height:1;color:var(--accent);font-weight:var(--weight-semibold)}
.process-row__when{font-size:var(--text-body-xs);font-weight:var(--weight-semibold);letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.process-row h3{font-size:var(--fs-28);line-height:1.2}
.process-row p{font-size:var(--text-body-md);line-height:1.75;color:var(--text-body);max-width:460px}
.render-frame{width:100%;border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-card);background:var(--surface-media)}

/* What we need */
.need-photo{margin-bottom:var(--px-36)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap-grid4)}
.need-item{display:flex;flex-direction:column;gap:var(--space-3)}
.need-item svg{width:22px;height:22px;color:var(--accent)}
.need-item h3{font-size:var(--text-body-md)}
.need-item p{font-size:var(--fs-13-5);color:var(--text-body);line-height:1.6}

/* FAQ + Accordion (DS Accordion, native <details name> = one open at a time) */
.faq-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--gap-faq);align-items:start}
.faq-photo{position:sticky;top:var(--px-96)}
.faq-cta{margin-top:var(--px-28)}
.accordion{font-family:var(--font-body)}
.accordion__item{border-bottom:1px solid var(--border-soft)}
.accordion__item summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-1);cursor:pointer;font-size:var(--fs-15);color:var(--text-heading);font-weight:var(--weight-medium)}
.accordion__item summary::-webkit-details-marker{display:none}
.accordion__plus{color:var(--accent);font-size:var(--fs-18);line-height:1;transition:transform var(--duration-standard) var(--ease-standard)}
.accordion__item[open] .accordion__plus{transform:rotate(45deg)}
.accordion__item p{margin:0 var(--space-1) var(--space-4);font-size:var(--text-body-sm);color:var(--text-body);max-width:560px}

/* Closing CTA band */
.cta-band{position:relative;background:var(--surface-dark);color:var(--text-on-photo);padding:var(--cta-pad-y) 0}
.cta-band__img{position:absolute;inset:0}
.cta-band__scrim{position:absolute;inset:0;background:var(--scrim-cta)}
.cta-band__content{position:relative;text-shadow:var(--text-shadow-photo);text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--px-20)}
.cta-band h2{font-size:var(--text-display-md);color:var(--text-on-photo);max-width:560px}
.cta-band p{font-size:var(--fs-17);color:var(--text-on-photo);max-width:480px}
.cta-band .btn{text-shadow:none}

/* Footer */
.site-footer{background:var(--surface-dark);color:var(--text-on-dark);padding:var(--px-56) 0 var(--space-6)}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:var(--gap-footer);padding-bottom:var(--px-40);border-bottom:1px solid var(--border-footer)}
.footer-brand{font-family:var(--font-display);font-size:var(--fs-20);font-weight:var(--weight-semibold);margin-bottom:var(--space-3)}
.footer-blurb{font-size:var(--fs-13);opacity:.85;max-width:260px;margin-bottom:var(--px-20)}
.footer-contact{font-size:var(--fs-13);display:flex;flex-direction:column;gap:var(--px-6);opacity:.9}
.site-footer a{color:inherit;text-decoration:none}
.site-footer a:hover{color:inherit;text-decoration:underline}
.footer-col__h{font-size:var(--text-body-xs);font-weight:var(--weight-semibold);text-transform:uppercase;letter-spacing:.05em;opacity:.6;margin-bottom:var(--space-4)}
.footer-col__links{display:flex;flex-direction:column;gap:var(--px-10)}
.footer-col__links a{font-size:var(--fs-13);opacity:.85}
.footer-bottom{padding-top:var(--px-20);font-size:var(--text-body-xs);opacity:.55;display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-2)}

/* Generic fallback content (index.php / page.php) */
.entry{max-width:760px;margin:0 auto;padding:var(--section-pad-y) var(--gutter)}
.entry h1{font-size:var(--text-display-lg);margin-bottom:var(--space-5)}
.entry p{margin-bottom:var(--space-4)}

/* ==========================================================================
   5. Responsive — one scale: 1360 / 1140 / 900 / 768 (max-width, desktop-first)
   ========================================================================== */
@media (max-width:1360px){
  .header-phone{display:none}
}
@media (max-width:1140px){
  .site-nav{display:none}
  .menu-btn{display:inline-flex}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .faq-grid{grid-template-columns:1fr;gap:var(--gap-faq-stacked)}
  .faq-photo{position:relative;top:0;max-width:520px}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .process-row{grid-template-columns:1fr;gap:var(--gap-row-stacked)}
  .process-row--flip .process-row__text,.process-row--flip .process-row__media{order:unset}
  .footer-grid{grid-template-columns:1fr;gap:var(--gap-footer-stacked)}
  :root{--h1-size:var(--h1-size-md)}
}
@media (max-width:768px){
  /* Source mobile tokens (sections-a.jsx @760): space-9 64, space-8 44, gutter 20.
     Deliberate override: gutter kept at 24px (brief's 24px mobile minimum). */
  :root{
    --space-9:64px;
    --space-8:44px;
    --gutter:24px;
    --h1-size:34px;
    --h1-leading:1.14;
    --h2-size:28px;
    --hero-pad-top:120px;
    --row-pad-y:var(--space-6);
    --gap-row-stacked:var(--space-6);
  }
  .page-hero__scrim{background:var(--scrim-hero-mobile)}
  .header-cta{display:none}
  .ar-21-8{aspect-ratio:16/10}
  .grid-4{grid-template-columns:1fr;gap:var(--gap-grid4-stacked)}
  .btn{white-space:normal;text-align:center}
  .footer-col__links{gap:0}
  .footer-col__links a,.footer-contact a{display:flex;align-items:center;min-height:var(--tap-min)}
  .footer-contact{gap:0}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
}