/*
Theme Name: Coast 2 Coast Roofing & Exteriors
Theme URI: https://coast2coastroofing.co
Author: Sonic
Description: Custom high-conversion theme for Coast 2 Coast Roofing & Exteriors, a roofing and full exterior contractor serving Long Island, NY. Mobile-first responsive foundation built once here; every page inherits it.
Version: 1.0
License: GPL-2.0-or-later
Text Domain: coast2coast
*/

/* =========================================================================
   0. FONTS (self-hosted variable, latin subset, no network call)
   ========================================================================= */
@font-face{font-family:'Sora';src:url('assets/fonts/sora-var.woff2') format('woff2-variations'),url('assets/fonts/sora-var.woff2') format('woff2');font-weight:100 800;font-style:normal;font-display:swap;}
@font-face{font-family:'Inter';src:url('assets/fonts/inter-var.woff2') format('woff2-variations'),url('assets/fonts/inter-var.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;}

/* =========================================================================
   1. TOKENS
   ========================================================================= */
:root{
  /* palette, see STYLE-GUIDE.md section 1 */
  --navy:#0C2643;
  --navy-ink:#132541;
  --navy-deep:#081B30;
  --amber:#F2A32C;
  --amber-deep:#D98914;
  --teal:#15705A;
  --teal-bright:#24AF8A;
  --white:#FFFFFF;
  --bone:#F7F5F1;
  --mist:#E7E9EC;
  --slate:#4A5A6E;
  --slate-soft:#6B7A8C;
  --ink:#14283C;
  --warning:#B26A00;
  --danger:#A32E1F;

  /* fluid type scale */
  --step--1:clamp(0.875rem,0.84rem + 0.18vw,0.95rem);
  --step-0:clamp(1rem,0.96rem + 0.22vw,1.125rem);
  --step-1:clamp(1.15rem,1.08rem + 0.36vw,1.375rem);
  --step-2:clamp(1.4rem,1.26rem + 0.7vw,1.85rem);
  --step-3:clamp(1.75rem,1.5rem + 1.25vw,2.6rem);
  --step-4:clamp(1.95rem,1.5rem + 2vw,3.05rem);
  --step-5:clamp(1.85rem,1.35rem + 2.5vw,3.4rem);

  /* spacing rhythm */
  --space-section:clamp(56px,9vw,128px);
  --space-block:clamp(24px,4vw,48px);

  --radius:14px;
  --radius-sm:10px;
  --shadow-card:0 1px 2px rgba(12,38,67,.06),0 8px 24px rgba(12,38,67,.07);
  --shadow-lift:0 2px 6px rgba(12,38,67,.09),0 18px 44px rgba(12,38,67,.13);
  --ring:0 0 0 3px rgba(242,163,44,.45);

  --font-display:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  --header-h:72px;
  --callbar-h:0px;
}

/* =========================================================================
   2. RESET + GLOBAL RESPONSIVE BASELINE
   ========================================================================= */
*,*::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:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--step-0);
  line-height:1.65;
  color:var(--slate);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  padding-bottom:var(--callbar-h);
}
img,video,iframe,svg{max-width:100%;height:auto;}
img{display:block;}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--ink);margin:0 0 .5em;letter-spacing:-.02em;line-height:1.12;font-weight:700;text-wrap:balance;}
h1{font-size:var(--step-4);max-width:22ch;}
h2{font-size:var(--step-3);max-width:24ch;}
h3{font-size:var(--step-2);letter-spacing:-.011em;line-height:1.2;}
h4{font-size:var(--step-1);letter-spacing:-.008em;}
p{margin:0 0 1.15em;max-width:68ch;overflow-wrap:break-word;}
a{color:var(--navy);text-underline-offset:3px;text-decoration-thickness:1px;}
a:hover{color:var(--teal);}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px;border-radius:4px;}
ul,ol{margin:0 0 1.25em;padding-left:1.3em;max-width:68ch;}
li{margin-bottom:.5em;}
strong{color:var(--ink);font-weight:600;}
hr{border:0;border-top:1px solid var(--mist);margin:var(--space-block) 0;}
.screen-reader-text{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;}
.skip-link{position:absolute;left:-9999px;}
.skip-link:focus{left:8px;top:8px;z-index:999;background:var(--amber);color:var(--navy);padding:12px 18px;border-radius:8px;font-weight:600;}

/* =========================================================================
   3. LAYOUT PRIMITIVES (the foundation, used by every page)
   ========================================================================= */
.c2c-container{width:100%;max-width:1200px;margin-inline:auto;padding-inline:clamp(16px,5vw,48px);}
.c2c-container--narrow{max-width:780px;}
.c2c-container--wide{max-width:1360px;}

.c2c-section{padding-block:var(--space-section);}
.c2c-section--tight{padding-block:clamp(36px,6vw,72px);}
.c2c-section--bone{background:var(--bone);}
.c2c-section--navy{background:var(--navy);color:#D6DEE8;}
.c2c-section--navy h1,.c2c-section--navy h2,.c2c-section--navy h3,.c2c-section--navy h4{color:var(--white);}
.c2c-section--navy a{color:var(--white);}
.c2c-section--navy a:hover{color:var(--teal-bright);}

.c2c-grid{display:grid;gap:clamp(20px,3vw,36px);grid-template-columns:minmax(0,1fr);}
.c2c-grid > *,.c2c-split > *,.c2c-hero__grid > *,.c2c-content__layout > *,.c2c-steps > *,.c2c-strip > *,.c2c-reviews > *,.c2c-footer__grid > *{min-width:0;}
@media (min-width:640px){.c2c-grid--2{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (min-width:768px){.c2c-grid--3{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (min-width:640px){.c2c-grid--4{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (min-width:1024px){.c2c-grid--4{grid-template-columns:repeat(4,minmax(0,1fr));}}
.c2c-split{display:grid;gap:clamp(28px,5vw,64px);grid-template-columns:minmax(0,1fr);}
@media (min-width:1024px){.c2c-split{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;}
  .c2c-split--reverse > *:first-child{order:2;}}

.c2c-media--16x9{aspect-ratio:16/9;object-fit:cover;width:100%;}
.c2c-media--4x3{aspect-ratio:4/3;object-fit:cover;width:100%;}
.c2c-media--3x4{aspect-ratio:3/4;object-fit:cover;width:100%;}
.c2c-media--square{aspect-ratio:1/1;object-fit:cover;width:100%;}
.c2c-rounded{border-radius:var(--radius);overflow:hidden;}

.c2c-eyebrow{font-family:var(--font-body);font-weight:600;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);margin:0 0 .75rem;display:block;}
.c2c-section--navy .c2c-eyebrow,.c2c-hero .c2c-eyebrow{color:var(--teal-bright);}
.lead,p.lead{font-size:var(--step-1);line-height:1.55;color:var(--ink);max-width:60ch;}
.c2c-section--navy .lead{color:#E3EAF2;}
.c2c-center{text-align:center;margin-inline:auto;}
.c2c-center p,.c2c-center h2{margin-inline:auto;}
.c2c-stack > * + *{margin-top:var(--space-block);}

/* =========================================================================
   4. BUTTONS (amber is conversion only, never decoration)
   ========================================================================= */
.c2c-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  min-height:52px;padding:14px 26px;
  font-family:var(--font-body);font-size:1rem;font-weight:600;line-height:1.2;
  border-radius:var(--radius-sm);border:2px solid transparent;
  text-decoration:none;cursor:pointer;text-align:center;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease,transform .15s ease;
}
.c2c-btn:hover{transform:translateY(-1px);}
.c2c-btn--primary{background:var(--amber);color:var(--navy);border-color:var(--amber);}
.c2c-btn--primary:hover{background:var(--amber-deep);border-color:var(--amber-deep);color:var(--navy);}
.c2c-btn--ghost{background:transparent;color:var(--white);border-color:rgba(255,255,255,.5);}
.c2c-btn--ghost:hover{background:rgba(255,255,255,.1);border-color:var(--white);color:var(--white);}
.c2c-btn--navy{background:var(--navy);color:var(--white);border-color:var(--navy);}
.c2c-btn--navy:hover{background:var(--navy-deep);border-color:var(--navy-deep);color:var(--white);}
.c2c-btn--outline{background:transparent;color:var(--navy);border-color:var(--mist);}
.c2c-btn--outline:hover{border-color:var(--navy);color:var(--navy);background:var(--bone);}
.c2c-btn--wide{width:100%;}
@media (min-width:640px){.c2c-btn--wide{width:auto;}}
.c2c-btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-block:var(--space-block) 0;}
.c2c-btn-row .c2c-btn{flex:1 1 auto;}
@media (min-width:640px){.c2c-btn-row .c2c-btn{flex:0 0 auto;}}

/* WordPress core button blocks inherit the primary style */
.wp-block-buttons{display:flex;flex-wrap:wrap;gap:14px;list-style:none;padding:0;margin:var(--space-block) 0 0;}
.wp-block-button__link{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:14px 26px;background:var(--amber);color:var(--navy);border-radius:var(--radius-sm);font-weight:600;text-decoration:none;transition:background-color .15s ease;}
.wp-block-button__link:hover{background:var(--amber-deep);color:var(--navy);}

/* =========================================================================
   5. HEADER + NAV
   ========================================================================= */
.c2c-header{position:sticky;top:0;z-index:60;background:var(--navy);border-bottom:1px solid rgba(255,255,255,.08);}
.c2c-header__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:var(--header-h);}
.c2c-header__logo{display:flex;align-items:center;flex:0 0 auto;min-height:48px;padding-block:4px;}
.c2c-header__logo img{height:40px;width:auto;}
@media (min-width:1024px){.c2c-header__logo img{height:48px;}}
.c2c-header__actions{display:flex;align-items:center;gap:10px;}
.c2c-header__phone{display:inline-flex;align-items:center;gap:.5em;min-height:44px;padding:8px 12px;color:var(--white);font-weight:600;text-decoration:none;border-radius:var(--radius-sm);white-space:nowrap;}
.c2c-header__phone:hover{background:rgba(255,255,255,.09);color:var(--white);}
.c2c-header__phone span{display:none;}
@media (min-width:520px){.c2c-header__phone span{display:inline;}}
.c2c-header__cta{display:none;}
@media (min-width:1024px){.c2c-header__cta{display:inline-flex;}}

.c2c-navtoggle{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;background:transparent;border:1px solid rgba(255,255,255,.28);border-radius:var(--radius-sm);color:var(--white);cursor:pointer;}
@media (min-width:1024px){.c2c-navtoggle{display:none;}}

.c2c-nav{display:none;}
.c2c-nav.is-open{display:block;position:absolute;left:0;right:0;top:100%;background:var(--navy-deep);border-top:1px solid rgba(255,255,255,.08);max-height:calc(100vh - var(--header-h));overflow-y:auto;padding:12px 0 24px;}
@media (min-width:1024px){
  .c2c-nav,.c2c-nav.is-open{display:block;position:static;background:transparent;border:0;padding:0;overflow:visible;max-height:none;}
}
.c2c-nav ul{list-style:none;margin:0;padding:0;max-width:none;}
.c2c-nav > ul{display:block;}
@media (min-width:1024px){.c2c-nav > ul{display:flex;align-items:center;gap:4px;}}
.c2c-nav li{margin:0;position:relative;}
.c2c-nav a{display:flex;align-items:center;min-height:48px;padding:10px clamp(16px,5vw,48px);color:#D6DEE8;font-size:.97rem;font-weight:500;text-decoration:none;}
@media (min-width:1024px){.c2c-nav a{min-height:44px;padding:8px 14px;border-radius:var(--radius-sm);font-size:.93rem;}}
.c2c-nav a:hover,.c2c-nav .current-menu-item > a{color:var(--white);background:rgba(255,255,255,.08);}
.c2c-nav .c2c-sub{border-left:2px solid rgba(36,175,138,.5);margin-left:clamp(16px,5vw,48px);}
.c2c-nav .c2c-sub a{padding-left:14px;font-size:.9rem;color:#AFBECE;}
@media (min-width:1024px){
  .c2c-nav .c2c-has-sub:hover > .c2c-sub,.c2c-nav .c2c-has-sub:focus-within > .c2c-sub{display:block;}
  .c2c-nav .c2c-sub{display:none;position:absolute;top:100%;left:0;min-width:250px;background:var(--navy-deep);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-sm);box-shadow:var(--shadow-lift);padding:8px 0;margin:0;}
  .c2c-nav .c2c-sub a{padding:10px 16px;border-radius:0;}
}

/* Sticky tap-to-call bar, mobile only */
@media (max-width:767px){
  :root{--callbar-h:64px;}
  .c2c-callbar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1px;background:rgba(12,38,67,.2);box-shadow:0 -4px 18px rgba(12,38,67,.18);}
  .c2c-callbar a{display:flex;align-items:center;justify-content:center;gap:.5em;min-width:0;min-height:56px;font-weight:600;font-size:1rem;text-decoration:none;}
  .c2c-callbar__call{background:var(--amber);color:var(--navy);}
  .c2c-callbar__quote{background:var(--navy);color:var(--white);}
}
@media (min-width:768px){.c2c-callbar{display:none;}}

/* =========================================================================
   6. HERO
   ========================================================================= */
.c2c-hero{position:relative;background:var(--navy);color:#D6DEE8;overflow:hidden;}
.c2c-hero__media{position:absolute;inset:0;z-index:0;}
.c2c-hero__media img{width:100%;height:100%;object-fit:cover;}
.c2c-hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,27,48,.82) 0%,rgba(12,38,67,.78) 55%,rgba(8,27,48,.9) 100%);}
@media (min-width:1024px){
  .c2c-hero__media::after{background:linear-gradient(100deg,rgba(8,27,48,.94) 0%,rgba(12,38,67,.86) 48%,rgba(12,38,67,.62) 100%);}
}
.c2c-hero__inner{position:relative;z-index:1;padding-block:clamp(48px,8vw,104px);}
.c2c-hero h1{color:var(--white);font-size:var(--step-4);max-width:20ch;margin-bottom:.45em;}
.c2c-hero--home h1{font-size:var(--step-5);max-width:15ch;}
.c2c-hero p{color:#DCE4EE;}
.c2c-hero .lead{color:#E3EAF2;max-width:52ch;}
.c2c-hero__grid{display:grid;gap:clamp(28px,5vw,56px);grid-template-columns:minmax(0,1fr);align-items:start;}
@media (min-width:1024px){.c2c-hero__grid{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);}}
.c2c-hero__points{list-style:none;padding:0;margin:var(--space-block) 0 0;display:grid;gap:12px;grid-template-columns:minmax(0,1fr);}
.c2c-hero__points li{position:relative;display:block;margin:0;min-width:0;padding-left:30px;color:#DCE4EE;font-size:1rem;}
.c2c-hero__points li > svg{position:absolute;left:0;top:.2em;width:20px;height:20px;color:var(--teal-bright);}
.c2c-hero__trust{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:var(--space-block);padding-top:20px;border-top:1px solid rgba(255,255,255,.14);font-size:.9rem;color:#B9C7D6;}
.c2c-hero__trust span{display:inline-flex;align-items:center;gap:.45em;}
.c2c-hero__trust svg{width:18px;height:18px;color:var(--teal-bright);}

/* Page hero (interior pages, no form) */
.c2c-pagehero{background:var(--navy);color:#D6DEE8;position:relative;overflow:hidden;}
.c2c-pagehero__inner{position:relative;z-index:1;padding-block:clamp(40px,6.5vw,80px);}
.c2c-pagehero h1{color:var(--white);margin-bottom:.35em;}
.c2c-pagehero .lead{color:#E3EAF2;}
.c2c-pagehero__meta{display:flex;flex-wrap:wrap;gap:10px 20px;margin-top:22px;font-size:.9rem;color:#B9C7D6;}
.c2c-pagehero__meta span{display:inline-flex;align-items:center;gap:.45em;}
.c2c-pagehero__meta svg{width:18px;height:18px;color:var(--teal-bright);}

/* Breadcrumbs */
.c2c-crumbs{font-size:.85rem;color:#A9B9CA;margin-bottom:18px;}
.c2c-crumbs a{color:#CBD7E4;text-decoration:none;display:inline-flex;align-items:center;min-height:44px;}
.c2c-crumbs span{display:inline-flex;align-items:center;min-height:44px;}
.c2c-crumbs a:hover{color:var(--white);text-decoration:underline;}
.c2c-crumbs span[aria-hidden]{opacity:.5;margin:0 .45em;}

/* =========================================================================
   7. ESTIMATE FORM (the conversion engine, on every money page)
   ========================================================================= */
.c2c-form,.c2c-hero .c2c-form,.c2c-section--navy .c2c-form{background:var(--white);border-radius:var(--radius);padding:clamp(22px,4vw,34px);box-shadow:var(--shadow-lift);}
.c2c-form h2,.c2c-form h3{color:var(--ink);font-size:var(--step-2);margin-bottom:.3em;max-width:none;}
.c2c-form p,.c2c-hero .c2c-form p,.c2c-section--navy .c2c-form p{color:var(--slate);}
.c2c-form label,.c2c-hero .c2c-form label,.c2c-section--navy .c2c-form label{color:var(--ink);}
.c2c-form h2,.c2c-hero .c2c-form h2,.c2c-section--navy .c2c-form h2{color:var(--ink);}
.c2c-form a,.c2c-hero .c2c-form a,.c2c-section--navy .c2c-form a{color:var(--teal);}
.c2c-form__sub,.c2c-hero .c2c-form .c2c-form__sub{font-size:.95rem;color:var(--slate) !important;margin-bottom:20px;max-width:none;}
.c2c-form__row{display:grid;gap:14px;grid-template-columns:1fr;}
@media (min-width:520px){.c2c-form__row--2{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}}
.c2c-field{display:block;margin-bottom:14px;}
.c2c-field label{display:block;font-size:.86rem;font-weight:600;color:var(--ink);margin-bottom:6px;}
.c2c-field .req{color:var(--danger);}
.c2c-field input,.c2c-field select,.c2c-field textarea{
  width:100%;min-height:50px;padding:12px 14px;font-family:var(--font-body);font-size:16px;color:var(--ink);
  background:var(--white);border:1px solid var(--mist);border-radius:var(--radius-sm);
}
.c2c-field textarea{min-height:104px;resize:vertical;}
.c2c-field input:focus,.c2c-field select:focus,.c2c-field textarea:focus{outline:none;border-color:var(--navy);box-shadow:var(--ring);}
.c2c-form__note,.c2c-hero .c2c-form .c2c-form__note{font-size:.82rem;color:var(--slate-soft) !important;margin:12px 0 0;max-width:none;}
.c2c-form__hp{position:absolute;left:-9999px;}
.c2c-form__msg{margin:0 0 16px;padding:12px 14px;border-radius:var(--radius-sm);font-size:.92rem;max-width:none;}
.c2c-form__msg--ok{background:rgba(21,112,90,.1);color:var(--teal);border:1px solid rgba(21,112,90,.3);}
.c2c-form__msg--err{background:rgba(163,46,31,.08);color:var(--danger);border:1px solid rgba(163,46,31,.25);}

/* =========================================================================
   8. CARDS, SERVICES, PROCESS, TRUST
   ========================================================================= */
.c2c-card{background:var(--white);border:1px solid var(--mist);border-radius:var(--radius);padding:clamp(20px,3vw,28px);display:flex;flex-direction:column;height:100%;transition:box-shadow .18s ease,transform .18s ease,border-color .18s ease;}
.c2c-card > :last-child{margin-bottom:0;}
.c2c-card h3{font-size:var(--step-2);margin-bottom:.4em;}
.c2c-card p{font-size:.98rem;max-width:none;}
.c2c-card__icon{width:44px;height:44px;color:var(--teal);margin-bottom:16px;}
.c2c-card__icon svg{width:44px;height:44px;}
a.c2c-card,a.c2c-card--link{text-decoration:none;color:inherit;}
a.c2c-card h3{color:var(--ink);}
a.c2c-card--navy h3{color:var(--white);}
.c2c-card--link:hover{box-shadow:var(--shadow-lift);transform:translateY(-2px);border-color:rgba(21,112,90,.35);}
.c2c-card--link:hover h3{color:var(--teal);}
.c2c-card--navy.c2c-card--link:hover h3{color:var(--teal-bright);}
.c2c-card__more{margin-top:auto;padding-top:16px;font-weight:600;font-size:.95rem;color:var(--teal);text-decoration:none;display:inline-flex;align-items:center;gap:.4em;}
.c2c-card--link:hover .c2c-card__more{gap:.65em;}
.c2c-card--photo{padding:0;overflow:hidden;}
.c2c-card--photo .c2c-card__body{padding:clamp(20px,3vw,26px);display:flex;flex-direction:column;flex:1;}
.c2c-card--photo img{width:100%;}
.c2c-card--navy{background:var(--navy);border-color:rgba(255,255,255,.12);color:#D6DEE8;}
.c2c-card--navy h3{color:var(--white);}

/* Process steps */
.c2c-steps{list-style:none;padding:0;margin:0;display:grid;gap:clamp(20px,3vw,32px);grid-template-columns:minmax(0,1fr);counter-reset:c2cstep;max-width:none;}
@media (min-width:768px){.c2c-steps--3{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (min-width:768px){.c2c-steps--4{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (min-width:1024px){.c2c-steps--4{grid-template-columns:repeat(4,minmax(0,1fr));}}
.c2c-step{margin:0;position:relative;padding-top:8px;}
.c2c-step::before{counter-increment:c2cstep;content:counter(c2cstep);display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:rgba(21,112,90,.1);color:var(--teal);font-family:var(--font-display);font-weight:700;font-size:1.1rem;font-variant-numeric:tabular-nums;margin-bottom:14px;}
.c2c-section--navy .c2c-step::before{background:rgba(36,175,138,.16);color:var(--teal-bright);}
.c2c-step h3{font-size:var(--step-1);margin-bottom:.35em;}
.c2c-step p{font-size:.97rem;max-width:none;margin-bottom:0;}

/* Checklist */
/* Checklist. Deliberately NOT a flex row: a nowrap flex line sums the
   min-content of every child, so a list item containing several inline
   elements (a <strong> plus two links) reported a min-content wider than the
   phone and expanded the mobile layout viewport. Absolute positioning keeps the
   tick out of flow, so the item can never be wider than its column. The tick is
   drawn in CSS and steps aside when a page supplies its own <svg>. */
.c2c-checks{list-style:none;padding:0;margin:0 0 1.25em;display:grid;gap:12px;grid-template-columns:minmax(0,1fr);max-width:68ch;}
.c2c-checks li{position:relative;display:block;margin:0;min-width:0;padding-left:30px;}
.c2c-checks li::before{content:"";position:absolute;left:3px;top:.52em;width:11px;height:6px;border-left:2px solid var(--teal);border-bottom:2px solid var(--teal);border-radius:1px;transform:rotate(-45deg);}
.c2c-checks li:has(> svg)::before{display:none;}
.c2c-checks li > svg{position:absolute;left:0;top:.18em;width:20px;height:20px;color:var(--teal);}
.c2c-section--navy .c2c-checks li::before,.c2c-hero .c2c-checks li::before{border-color:var(--teal-bright);}
.c2c-section--navy .c2c-checks li > svg,.c2c-hero .c2c-checks li > svg{color:var(--teal-bright);}
.c2c-checks--2{display:grid;gap:12px;grid-template-columns:minmax(0,1fr);}
@media (min-width:640px){.c2c-checks--2{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 28px;}}

/* Stat / proof strip */
.c2c-strip{display:grid;gap:clamp(18px,3vw,28px);grid-template-columns:minmax(0,1fr);}
@media (min-width:640px){.c2c-strip{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (min-width:1024px){.c2c-strip{grid-template-columns:repeat(4,minmax(0,1fr));}}
.c2c-strip__item{position:relative;display:block;min-width:0;padding-left:46px;}
.c2c-strip__item > svg{position:absolute;left:0;top:2px;width:32px;height:32px;color:var(--teal);}

.c2c-section--navy .c2c-strip__item svg{color:var(--teal-bright);}
.c2c-strip__item h3{font-size:1.02rem;margin-bottom:.25em;letter-spacing:-.005em;}
.c2c-strip__item p{font-size:.92rem;margin:0;max-width:none;line-height:1.5;}

/* Reviews */
.c2c-reviews{display:grid;gap:clamp(18px,3vw,28px);grid-template-columns:minmax(0,1fr);}
@media (min-width:768px){.c2c-reviews{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (min-width:1024px){.c2c-reviews--3{grid-template-columns:repeat(3,minmax(0,1fr));}}
.c2c-review{background:var(--white);border:1px solid var(--mist);border-radius:var(--radius);padding:clamp(20px,3vw,28px);display:flex;flex-direction:column;}
.c2c-review blockquote{margin:0 0 18px;padding:0;border:0;font-size:1.01rem;line-height:1.6;color:var(--ink);}
.c2c-review blockquote p{max-width:none;margin-bottom:.7em;}
.c2c-review blockquote p:last-child{margin-bottom:0;}
.c2c-review__who{margin-top:auto;display:flex;align-items:center;gap:12px;padding-top:8px;}
.c2c-review__initial{flex:0 0 40px;width:40px;height:40px;border-radius:50%;background:rgba(21,112,90,.1);color:var(--teal);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:1rem;}
.c2c-review__name{font-weight:600;color:var(--ink);font-size:.95rem;line-height:1.3;}
.c2c-review__src{font-size:.8rem;color:var(--slate-soft);line-height:1.3;}
.c2c-section--navy .c2c-review{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);}
.c2c-section--navy .c2c-review blockquote{color:#E3EAF2;}
.c2c-section--navy .c2c-review__name{color:var(--white);}
.c2c-section--navy .c2c-review__initial{background:rgba(36,175,138,.18);color:var(--teal-bright);}

/* Callout */
.c2c-callout{background:var(--bone);border-left:4px solid var(--teal);border-radius:var(--radius-sm);padding:clamp(20px,3vw,28px);margin-block:var(--space-block);}
.c2c-callout > :last-child{margin-bottom:0;}
.c2c-callout h3{font-size:var(--step-1);margin-bottom:.4em;}
.c2c-callout p{max-width:none;font-size:.99rem;}
.c2c-callout--navy{background:var(--navy);border-left-color:var(--teal-bright);color:#D6DEE8;}
.c2c-callout--navy h3{color:var(--white);}
.c2c-callout--warn{background:rgba(178,106,0,.07);border-left-color:var(--warning);}

/* Inline CTA */
.c2c-cta-inline{background:var(--navy);color:#D6DEE8;border-radius:var(--radius);padding:clamp(24px,4vw,40px);margin-block:var(--space-section) 0;display:grid;gap:20px;align-items:center;}
@media (min-width:768px){.c2c-cta-inline{grid-template-columns:minmax(0,1.4fr) auto;gap:32px;}}
.c2c-cta-inline h2,.c2c-cta-inline h3{color:var(--white);font-size:var(--step-2);margin-bottom:.35em;max-width:26ch;}
.c2c-cta-inline p{color:#DCE4EE;margin:0;max-width:52ch;font-size:.99rem;}
.c2c-cta-inline__actions{display:flex;flex-wrap:wrap;gap:12px;}
.c2c-cta-inline__actions .c2c-btn{flex:1 1 auto;}
@media (min-width:768px){.c2c-cta-inline__actions{flex-direction:column;}.c2c-cta-inline__actions .c2c-btn{width:100%;}}

/* FAQ accordion, auto-converted to FAQPage schema by functions.php */
.c2c-faq{max-width:820px;}
details.wp-block-details,details.c2c-detail{border:1px solid var(--mist);border-radius:var(--radius-sm);background:var(--white);margin-bottom:12px;overflow:hidden;}
details.wp-block-details[open],details.c2c-detail[open]{border-color:rgba(21,112,90,.35);}
details summary{list-style:none;cursor:pointer;padding:18px 52px 18px 20px;font-family:var(--font-display);font-weight:600;font-size:1.03rem;color:var(--ink);position:relative;min-height:56px;display:flex;align-items:center;}
details summary::-webkit-details-marker{display:none;}
details summary::after{content:"";position:absolute;right:22px;top:50%;width:11px;height:11px;border-right:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:translateY(-70%) rotate(45deg);transition:transform .2s ease;}
details[open] summary::after{transform:translateY(-30%) rotate(225deg);}
details summary:hover{background:var(--bone);}
details > :not(summary){padding:0 20px 18px;margin-top:-2px;}
details p{max-width:66ch;font-size:.99rem;}
details > :not(summary):last-child{margin-bottom:0;}

/* Service area list */
.c2c-arealist{list-style:none;padding:0;margin:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));max-width:none;}
.c2c-arealist li{margin:0;}
.c2c-arealist a{display:flex;align-items:center;gap:.5em;min-height:44px;padding:8px 12px;background:var(--white);border:1px solid var(--mist);border-radius:var(--radius-sm);text-decoration:none;color:var(--ink);font-size:.94rem;font-weight:500;}
.c2c-arealist a:hover{border-color:var(--teal);color:var(--teal);}
.c2c-arealist svg{width:16px;height:16px;color:var(--teal);flex:0 0 16px;}
.c2c-arealist--plain li{padding:6px 0;color:var(--slate);font-size:.94rem;}

/* Gallery */
.c2c-gallery{display:grid;gap:clamp(12px,2vw,20px);grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
@media (min-width:768px){.c2c-gallery{grid-template-columns:repeat(3,minmax(0,1fr));}}
.c2c-gallery img{border-radius:var(--radius-sm);width:100%;}
.c2c-gallery figure{margin:0;}
.c2c-gallery figcaption{font-size:.82rem;color:var(--slate-soft);margin-top:8px;}

/* Tables. Mobile-first: a table reads as a stack of records, so no fixed
   min-width can widen the mobile layout viewport. It becomes a real table at sm. */
.c2c-tablewrap{max-width:100%;margin-block:var(--space-block);}
.c2c-tablewrap table{min-width:0;}
table{width:100%;border-collapse:collapse;font-size:.95rem;}
table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;}
table,table tbody,table tr,table td,table th{display:block;width:100%;}
table tr{border:1px solid var(--mist);border-radius:var(--radius-sm);background:var(--white);padding:16px 18px;margin-bottom:12px;}
table td{border:0;padding:0 0 10px;color:var(--slate);}
table td:last-child{padding-bottom:0;}
table td:first-child{font-family:var(--font-display);font-weight:700;color:var(--ink);font-size:1.05rem;letter-spacing:-.01em;margin-bottom:4px;}
table td:first-child strong{font-weight:700;}

@media (min-width:640px){
  .c2c-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--mist);border-radius:var(--radius-sm);}
  .c2c-tablewrap table{min-width:560px;}
  table{display:table;}
  table thead{display:table-header-group;position:static;width:auto;height:auto;overflow:visible;clip:auto;}
  table tbody{display:table-row-group;}
  table tr{display:table-row;border:0;border-radius:0;background:transparent;padding:0;margin:0;}
  table th,table td{display:table-cell;width:auto;text-align:left;padding:13px 15px;border-bottom:1px solid var(--mist);vertical-align:top;}
  table th{font-family:var(--font-display);font-weight:600;color:var(--ink);background:var(--bone);font-size:.9rem;}
  table td:first-child{font-family:var(--font-body);font-weight:400;font-size:.95rem;color:var(--slate);margin-bottom:0;}
  table td:first-child strong{font-family:var(--font-display);font-weight:600;color:var(--ink);}
  table tbody tr:last-child td{border-bottom:0;}
}

/* Related links */
.c2c-related{border-top:1px solid var(--mist);margin-top:var(--space-section);padding-top:var(--space-block);}
.c2c-related h2{font-size:var(--step-2);}
.c2c-related ul{list-style:none;padding:0;display:grid;gap:10px;grid-template-columns:minmax(0,1fr);max-width:none;}
@media (min-width:640px){.c2c-related ul{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}}
.c2c-related li{margin:0;}
.c2c-related a{display:flex;align-items:center;gap:.6em;min-height:48px;padding:10px 14px;border:1px solid var(--mist);border-radius:var(--radius-sm);text-decoration:none;color:var(--ink);font-weight:500;font-size:.96rem;}
.c2c-related a:hover{border-color:var(--teal);color:var(--teal);background:var(--bone);}
.c2c-related svg{width:16px;height:16px;color:var(--teal);flex:0 0 16px;}

/* =========================================================================
   9. PAGE CONTENT WRAPPER
   ========================================================================= */
.c2c-content{padding-block:var(--space-section);}
.c2c-content__layout{display:grid;gap:clamp(32px,5vw,56px);grid-template-columns:minmax(0,1fr);align-items:start;}
@media (min-width:1024px){.c2c-content__layout{grid-template-columns:minmax(0,1fr) 380px;}}
.c2c-content__main{min-width:0;}
.c2c-content__main > :first-child{margin-top:0;}
.c2c-content__main h2{margin-top:var(--space-block);}
.c2c-content__main h2:first-child{margin-top:0;}
.c2c-content__main h3{margin-top:calc(var(--space-block) * .7);}
.c2c-content__main img{border-radius:var(--radius);margin-block:var(--space-block);}
.c2c-content__main figure{margin:var(--space-block) 0;}
.c2c-content__main figcaption{font-size:.85rem;color:var(--slate-soft);margin-top:8px;}
.c2c-aside{position:sticky;top:calc(var(--header-h) + 20px);display:grid;gap:20px;}
@media (max-width:1023px){.c2c-aside{position:static;}}
.c2c-aside__box{background:var(--bone);border:1px solid var(--mist);border-radius:var(--radius);padding:clamp(20px,3vw,26px);}
.c2c-aside__box h3{font-size:var(--step-1);margin-bottom:.5em;}
.c2c-aside__box p{font-size:.94rem;max-width:none;}
.c2c-aside__box > :last-child{margin-bottom:0;}
.c2c-aside__phone{display:flex;align-items:center;justify-content:center;gap:.5em;min-height:56px;background:var(--navy);color:var(--white);border-radius:var(--radius-sm);font-family:var(--font-display);font-weight:700;font-size:1.25rem;font-variant-numeric:tabular-nums;text-decoration:none;letter-spacing:-.01em;}
.c2c-aside__phone:hover{background:var(--navy-deep);color:var(--white);}

/* =========================================================================
   10. FOOTER
   ========================================================================= */
.c2c-footer{background:var(--navy);color:#AFBECE;padding-block:var(--space-section) 0;font-size:.94rem;}
.c2c-footer__grid{display:grid;gap:clamp(28px,4vw,44px);grid-template-columns:minmax(0,1fr);}
@media (min-width:640px){.c2c-footer__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}}
@media (min-width:1024px){.c2c-footer__grid{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));}}
.c2c-footer h3{color:var(--white);font-size:.86rem;letter-spacing:.11em;text-transform:uppercase;font-family:var(--font-body);font-weight:600;margin-bottom:16px;}
.c2c-footer ul{list-style:none;padding:0;margin:0;}
.c2c-footer li{margin-bottom:0;}
.c2c-footer ul a{display:inline-flex;align-items:center;min-height:44px;padding-block:6px;}
.c2c-footer a{color:#AFBECE;text-decoration:none;}
.c2c-footer a:hover{color:var(--white);text-decoration:underline;}
.c2c-footer p{max-width:38ch;line-height:1.6;}
.c2c-footer__logo img{height:46px;width:auto;margin-bottom:18px;}
.c2c-footer__contact{display:grid;gap:12px;margin-top:18px;}
.c2c-footer__contact a{display:inline-flex;align-items:center;gap:.6em;min-height:44px;color:var(--white);font-weight:600;}
.c2c-footer__contact svg{width:18px;height:18px;color:var(--teal-bright);flex:0 0 18px;}
.c2c-footer__bar{margin-top:var(--space-section);border-top:1px solid rgba(255,255,255,.1);padding-block:22px;display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:space-between;font-size:.85rem;color:#8B9CAF;}
.c2c-footer__bar p{margin:0;max-width:none;}
.c2c-footer__bar a{display:inline-flex;align-items:center;min-height:44px;}
.c2c-giveback{position:relative;display:block;padding-left:46px;min-width:0;background:rgba(36,175,138,.1);border:1px solid rgba(36,175,138,.24);border-radius:var(--radius-sm);padding:16px 18px;margin-top:22px;}
.c2c-giveback > svg{position:absolute;left:18px;top:18px;width:22px;height:22px;color:var(--teal-bright);}
.c2c-giveback p{font-size:.88rem;margin:0;color:#C6D3E0;max-width:none;line-height:1.55;}

/* =========================================================================
   11. MOTION (minimal, respects reduced-motion via the global rule above)
   ========================================================================= */
@keyframes c2cRise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
.c2c-rise{animation:c2cRise .4s ease-out both;}

/* =========================================================================
   12. PRINT
   ========================================================================= */
@media print{
  .c2c-header,.c2c-callbar,.c2c-form,.c2c-cta-inline,.c2c-footer__bar{display:none !important;}
  body{color:#000;padding-bottom:0;}
  a::after{content:" (" attr(href) ")";font-size:.8em;}
}

/* =========================================================================
   SERVICE AREA MAP — the "where we work" visual zone
   Custom Long Island SVG with animated pins + Google Maps embed.
   ========================================================================= */
.c2c-mapcard{position:relative;background:linear-gradient(180deg,#E3EFF8 0%,#CFE2F0 100%);border-radius:var(--radius);box-shadow:var(--shadow-card);padding:clamp(10px,2.5vw,28px);overflow:hidden}
.c2c-limap{display:block;width:100%;height:auto}
.c2c-limap .isle{fill:url(#c2cIsle);stroke:#0A2038;stroke-width:2;stroke-linejoin:round;filter:drop-shadow(0 12px 26px rgba(12,38,67,.30))}
.c2c-limap .water-label{font-family:var(--font-body);font-size:13px;font-style:italic;letter-spacing:.14em;text-transform:uppercase;fill:#7C93A8}
.c2c-pin{cursor:pointer;outline:none}
.c2c-pin__dot{fill:var(--amber);stroke:#fff;stroke-width:2.5;transition:fill .15s ease,stroke .15s ease}
.c2c-pin__pulse{fill:none;stroke:var(--amber);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:c2cPulse 3s cubic-bezier(.2,.6,.4,1) infinite;animation-delay:var(--d,0s);opacity:0}
@keyframes c2cPulse{0%{transform:scale(.35);opacity:.95}70%{transform:scale(2.5);opacity:0}100%{transform:scale(2.5);opacity:0}}
.c2c-pin__label{font-family:var(--font-display);font-weight:600;font-size:13.5px;fill:#fff;stroke:rgba(8,27,48,.9);stroke-width:3px;paint-order:stroke;letter-spacing:.01em;transition:fill .15s ease}
.c2c-pin:hover .c2c-pin__dot,.c2c-pin:focus .c2c-pin__dot{fill:#fff;stroke:var(--amber)}
.c2c-pin:hover .c2c-pin__label,.c2c-pin:focus .c2c-pin__label{fill:var(--amber)}
.c2c-ring{fill:none;stroke:var(--teal-bright);stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center;animation:c2cRing 6s ease-out infinite}
.c2c-ring--2{animation-delay:2s}
.c2c-ring--3{animation-delay:4s}
@keyframes c2cRing{0%{transform:scale(.12);opacity:.5}80%{transform:scale(1);opacity:0}100%{transform:scale(1);opacity:0}}
.c2c-map-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:var(--space-block)}
.c2c-map-chips a{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:999px;background:#fff;border:1px solid var(--mist);box-shadow:var(--shadow-card);color:var(--navy-ink);font-weight:600;font-size:var(--step--1);text-decoration:none;transition:transform .15s ease,box-shadow .15s ease,background .15s ease,color .15s ease}
.c2c-map-chips a:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift);background:var(--navy);color:#fff}
.c2c-map-chips a svg{color:var(--amber);flex:none}
.c2c-map-chips a.is-all{background:var(--amber);border-color:var(--amber-deep);color:var(--navy-deep)}
.c2c-map-chips a.is-all svg{color:var(--navy-deep)}
.c2c-map-chips a.is-all:hover{background:var(--amber-deep);color:#fff}
.c2c-map-chips a.is-all:hover svg{color:#fff}
.c2c-gmap{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-card);aspect-ratio:4/3;background:var(--mist);margin-top:var(--space-block)}
.c2c-gmap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:640px){
  /* at phone width the 900px viewBox scales too far down for readable labels;
     the chip row directly below the map carries the town names instead */
  .c2c-pin__label{display:none}
  .c2c-limap .water-label{font-size:19px}
  .c2c-pin__dot{r:10px;stroke-width:4}
  .c2c-pin__pulse{r:16px;stroke-width:3.5}
}
@media (prefers-reduced-motion:reduce){.c2c-pin__pulse,.c2c-ring{animation:none}}
