/*
Theme Name: Every Inch
Theme URI: https://useeveryinch.com
Author: Every Inch LLC
Description: Custom theme for Every Inch LLC — handyman, mounting, babyproofing and fitted storage in Brooklyn. Condensed Saira type, slate-blue palette. Quote form runs on Fluent Forms.
Version: 1.5
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: every-inch
*/

@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;700&family=Barlow+Condensed:wght@400;600&display=swap");
:root { --color-bg: #f2f2f3; --color-surface: #e9e9ea; --color-text: #1d1f20; --color-accent: #5980a6; --color-accent-2: #728fab; --color-divider: color-mix(in srgb, #1d1f20 16%, transparent); --color-neutral-100: #f5f5f8; --color-neutral-200: #e7e7ea; --color-neutral-300: #d4d4d7; --color-neutral-400: #b7b7ba; --color-neutral-500: #98989b; --color-neutral-600: #7a7a7d; --color-neutral-700: #5d5d60; --color-neutral-800: #424244; --color-neutral-900: #2b2b2d; --color-accent-100: #eef6ff; --color-accent-200: #d6ebff; --color-accent-300: #b5d9fd; --color-accent-400: #94bce3; --color-accent-500: #749dc4; --color-accent-600: #597ea3; --color-accent-700: #416180; --color-accent-800: #2c455d; --color-accent-900: #1d2d3d; --color-accent-2-100: #eef6ff; --color-accent-2-200: #d6ebff; --color-accent-2-300: #bdd8f2; --color-accent-2-400: #9ebbd8; --color-accent-2-500: #7e9cb8; --color-accent-2-600: #627d98; --color-accent-2-700: #486077; --color-accent-2-800: #314457; --color-accent-2-900: #1f2d3a; --font-heading: "Barlow Condensed", system-ui, sans-serif; --font-heading-weight: 600; --font-body: "Barlow", system-ui, sans-serif; --space-1: 3.4px; --space-2: 6.8px; --space-3: 10.2px; --space-4: 13.6px; --space-6: 20.4px; --space-8: 27.2px; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 7px; --shadow-sm: 0 1px 2px color-mix(in srgb, #2b2b2d 14%, transparent); --shadow-md: 0 3px 10px color-mix(in srgb, #2b2b2d 16%, transparent); --shadow-lg: 0 12px 32px color-mix(in srgb, #2b2b2d 22%, transparent); }
body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }
.blueprint { position: relative; border: 1px solid var(--color-divider); border-radius: 0px; }
.blueprint.halftone, .blueprint.plate, .blueprint.duotone { overflow: visible; }
.blueprint > .corner { position: absolute; width: 11px; height: 11px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.blueprint > .corner::before, .blueprint > .corner::after { content: ""; position: absolute; background: currentcolor; }
.blueprint > .corner::before { left: 5px; top: 0px; width: 1px; height: 100%; }
.blueprint > .corner::after { top: 5px; left: 0px; width: 100%; height: 1px; }
.blueprint > .corner.tl { top: -6px; left: -6px; }
.blueprint > .corner.tr { top: -6px; right: -6px; }
.blueprint > .corner.bl { bottom: -6px; left: -6px; }
.blueprint > .corner.br { bottom: -6px; right: -6px; }
.duotone { position: relative; overflow: hidden; }
.duotone::after { content: ""; position: absolute; inset: 0px; pointer-events: none; background: var(--color-accent); mix-blend-mode: color; }
*, ::before, ::after { box-sizing: border-box; }
body { margin: 0px; font-size: 15px; line-height: 1.55; font-weight: 400; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2); }
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; }
h6 { letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0px; }
figcaption { font-size: 11px; margin-top: var(--space-1); color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }
.hr { height: 1px; border: 0px; margin: var(--space-4) 0; background: var(--color-divider); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; text-decoration: none; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 14px; line-height: 1.2; color: var(--color-text); background: transparent; border: 1px solid transparent; padding: var(--space-2) calc(var(--space-3) * 1.2); border-radius: var(--radius-md); }
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0px; }
.btn-block { width: 100%; margin-top: var(--space-2); }
.field > label { display: block; font-size: 12px; margin-bottom: 5px; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.input { width: 100%; min-height: 36px; padding: 6px 10px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 14px; color: var(--color-text); caret-color: var(--color-accent); background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-md); }
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0px; }
textarea.input { min-height: 90px; resize: vertical; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.radio input, .seg-opt input { position: absolute; opacity: 0; width: 0px; height: 0px; pointer-events: none; }
.radio .dot { width: 16px; height: 16px; flex: 0 0 auto; border-radius: 50%; border: 1.5px solid var(--color-divider); }
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot { border-color: var(--color-accent); background: var(--color-accent); box-shadow: inset 0 0 0 4px var(--color-bg); }
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.seg { display: inline-flex; overflow: hidden; border: 1px solid var(--color-divider); border-radius: var(--radius-md); }
.seg-opt { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: 13px; cursor: pointer; }
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt:has(input:checked) { background: var(--color-accent); color: var(--color-bg); }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface); }
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 17px; line-height: 1.2; }
.card-body { margin: 0px; font-size: 13px; opacity: 0.8; flex: 1 1 0%; }
.card-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: color-mix(in srgb, var(--color-text) 50%, transparent); }
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }
.tag { display: inline-flex; align-items: center; font-size: 11px; letter-spacing: 0.02em; padding: 3px 10px; border-radius: calc(var(--radius-md) * 0.75); }
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }
.nav { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }
.nav-brand { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 18px; margin-right: auto; }
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--color-accent); }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 60%, transparent); padding: var(--space-2); border-bottom: 1px solid var(--color-divider); }
.table td { padding: var(--space-2); border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); }
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.dialog-backdrop { position: fixed; inset: 0px; display: grid; place-items: center; padding: var(--space-4); background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent); }
.dialog { width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-lg); }
.dialog-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 20px; }
.dialog-body { font-size: 14px; opacity: 0.85; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }
.card, .btn, .input, .tag, .seg, .dialog { border-radius: 0px; }
.card, .dialog { background: transparent; border: 1px solid var(--color-divider); }
.btn { border: 1px solid var(--color-divider); }
.btn-primary { border-color: var(--color-accent); }
.btn-ghost { border-color: transparent; }


  body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);}

  /* Condensed type + slate-blue palette, overriding the design-system tokens */
  .site{
    --font-heading:'Saira Condensed',Arial,sans-serif;
    --font-body:'Saira',system-ui,sans-serif;
    --color-bg:#edeff2; --color-surface:#e2e6eb; --color-text:#0f1319; --color-divider:#c8cfd8;
    --color-accent:#5b7896; --color-accent-300:#b0c0d1; --color-accent-700:#3d5771; --color-accent-900:#243748;
    --color-neutral-900:#131820;
  }
  .site h1,.site h2,.site h3{font-weight:700;letter-spacing:0;}
  .site .lbl{font-family:'Saira Condensed',Arial,sans-serif;font-weight:600;letter-spacing:.1em;}
  .site .btn{font-family:'Saira Condensed',sans-serif;font-weight:600;border-radius:0;}
  .site .tag{font-family:'Saira Condensed',Arial,sans-serif;font-weight:500;font-size:12px;text-transform:uppercase;letter-spacing:.07em;border-radius:0;}

  a{color:var(--color-accent-700);}
  a:hover{color:var(--color-accent);}
  /* Hatched placeholder fill for the portrait figure */
  .ph{background:repeating-linear-gradient(135deg, color-mix(in srgb, var(--color-text) 7%, transparent) 0 1px, transparent 1px 9px);}

  /* FAQ: always expanded on desktop, collapsible on phones (site.js syncs the open state) */
  .site details.faq > summary{list-style:none;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;cursor:default;}
  .site details.faq > summary::-webkit-details-marker{display:none;}
  .site details.faq .faq-ico{display:none;}

  /* Phone layout. Tighter rhythm, smaller display type, two-up service cards,
     and the fixed call/text bar. Keyed off data-m so the markup stays inline-styled. */
  @media (max-width:760px){
    .site details.faq > summary{cursor:pointer;padding-bottom:20px !important;}
    .site details.faq[open] > summary{padding-bottom:0 !important;}
    .site details.faq > summary h3, .site details.faq > summary{font-size:20px !important;}
    .site details.faq .faq-ico{display:block;font-family:var(--font-heading);font-weight:400;font-size:24px;line-height:1;color:var(--color-accent);transition:transform .18s ease;flex:none;}
    .site details.faq[open] .faq-ico{transform:rotate(45deg);}
    .site details.faq > p{padding-right:0 !important;padding-top:6px !important;}
    .site [data-m="hero"]{padding-top:48px !important;padding-bottom:44px !important;}
    .site [data-m="hero-eyebrow"]{margin-bottom:20px !important;}
    .site [data-m="hero-h1"]{font-size:46px !important;max-width:none !important;}
    .site [data-m="hero-body"]{margin-top:26px !important;gap:24px !important;}
    .site [data-m="hero-body"] p{font-size:17px !important;}
    .site [data-m="wrap"]{padding-top:52px !important;padding-bottom:52px !important;}
    .site [data-m="pagewrap"]{padding-top:36px !important;padding-bottom:60px !important;}
    .site [data-m="sechead"]{margin-bottom:24px !important;gap:16px !important;}
    .site [data-m="cats"]{gap:10px !important;}
    .site [data-m="cats"] > a{padding:13px 10px !important;}
    .site [data-m="cats"] > a span{font-size:12px !important;}
    .site [data-m="steps"]{grid-template-columns:1fr !important;}
    .site [data-m="steps"] > div{padding:16px 0 18px !important;border-right:none !important;border-bottom:1px solid var(--color-divider) !important;}
    .site [data-m="steps"] > div:last-child{border-bottom:none !important;}
    .site [data-m="quotes"]{gap:12px !important;}
    .site [data-m="quotes"] > div{padding:22px 20px !important;}
    .site [data-m="cta"]{padding-top:52px !important;padding-bottom:52px !important;gap:24px !important;}
    .site [data-m="stats"]{grid-template-columns:1fr 1fr 1fr !important;margin-top:28px !important;}
    .site [data-m="stats"] > div{padding:14px 10px 14px 0 !important;}
    .site [data-m="stats"] [data-m="stat-n"]{font-size:22px !important;}
    .site [data-m="stats"] [data-m="stat-l"]{font-size:9px !important;letter-spacing:.06em !important;margin-top:4px !important;}
    .site [data-m="svc-list"]{margin-top:26px !important;}
    .site [data-m="svc-row"]{grid-template-columns:1fr !important;gap:8px !important;padding:18px 0 !important;}
    .site [data-m="footer"]{padding-top:44px !important;padding-bottom:104px !important;}
    .site [data-m="footer-cols"]{gap:28px !important;padding-bottom:32px !important;}
    .site [data-m="hdr"]{flex-wrap:nowrap !important;position:relative !important;}
    .site [data-m="burger"]{display:flex !important;}
    .site [data-m="nav"]{
      display:none !important;position:absolute !important;left:0 !important;right:0 !important;top:100% !important;
      flex-direction:column !important;align-items:stretch !important;gap:0 !important;
      background:var(--color-bg) !important;border-bottom:1px solid var(--color-divider) !important;
      padding:4px clamp(20px,5vw,32px) 18px !important;
    }
    .site [data-m="nav"][data-open]{display:flex !important;}
    .site [data-m="nav"] > a{
      padding:15px 0 !important;min-height:44px !important;
      border-top:1px solid var(--color-divider) !important;
      display:flex !important;align-items:center !important;
    }
    .site [data-m="nav"] > a.btn{margin-top:14px !important;border-top:none !important;justify-content:center !important;}
    .site [data-m="bar"]{display:grid !important;}
  }


/* ---------------------------------------------------------------
   Fluent Forms: match the quote form to the Every Inch design.
   Scoped to .site so it never touches forms elsewhere.
   --------------------------------------------------------------- */
.site .fluentform .ff-el-group{margin-bottom:18px;}
.site .fluentform .ff-el-input--label label{
  font-family:'Saira Condensed',Arial,sans-serif;font-weight:600;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;
  color:color-mix(in srgb, var(--color-text) 62%, transparent);margin-bottom:8px;
}
.site .fluentform .ff-el-form-control{
  width:100%;box-sizing:border-box;border-radius:0;
  border:1px solid var(--color-divider);background:var(--color-surface);
  color:var(--color-text);font-family:var(--font-body);font-size:16px;
  padding:13px 14px;box-shadow:none;transition:border-color .15s ease;
}
.site .fluentform .ff-el-form-control:focus{
  outline:none;border-color:var(--color-accent);background:var(--color-bg);
}
.site .fluentform textarea.ff-el-form-control{min-height:140px;resize:vertical;}
.site .fluentform select.ff-el-form-control{appearance:none;background-image:none;}
.site .fluentform .ff-el-is-error .ff-el-form-control{border-color:#a8332f;}
.site .fluentform .error-text,
.site .fluentform .text-danger{
  font-family:var(--font-body);font-size:13px;color:#a8332f;margin-top:6px;
}
.site .fluentform .ff-btn-submit{
  font-family:'Saira Condensed',Arial,sans-serif;font-weight:600;font-size:15px;
  letter-spacing:.08em;text-transform:uppercase;border-radius:0;
  background:var(--color-accent-900);color:var(--color-bg);
  border:1px solid var(--color-accent-900);padding:15px 26px;cursor:pointer;
  transition:background .15s ease,border-color .15s ease;
}
.site .fluentform .ff-btn-submit:hover{
  background:var(--color-accent-700);border-color:var(--color-accent-700);
}
.site .fluentform .ff-message-success{
  font-family:var(--font-body);font-size:17px;line-height:1.5;
  border:1px solid var(--color-accent);background:var(--color-surface);
  color:var(--color-text);border-radius:0;padding:20px 22px;
}
.site .fluentform .ff-t-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:0 18px;}
.site .fluentform .ff-t-cell{padding:0;}

/* ---------------------------------------------------------------
   The call-or-text dialog stays down until the script opens it.
   --------------------------------------------------------------- */
.site #every-inch-phone[hidden]{display:none !important;}

/* ---------------------------------------------------------------
   Skip link: off-screen until focused.
   --------------------------------------------------------------- */
.every-inch-skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  font-family:'Saira Condensed',Arial,sans-serif;font-weight:600;font-size:14px;
  letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
  background:var(--color-accent-900);color:var(--color-bg);padding:14px 20px;
}
.every-inch-skip:focus{left:8px;top:8px;color:var(--color-bg);}