.elementor-kit-6{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* =====================================================================
   GLOBAL DESIGN KIT — Coastal Modern Remodel
   For WordPress + Elementor
   ---------------------------------------------------------------------
   How to install:
   1. Elementor → Site Settings → Custom CSS  (paste this entire file)
      OR add to your child theme's style.css
   2. In Elementor → Site Settings → Global Fonts, set:
        Primary    → Playfair Display
        Secondary  → Montserrat
   3. Apply utility classes (.btn-primary, .eyebrow, .section--dark, etc.)
      via the "CSS Classes" field on any widget.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600&family=Montserrat:wght@300;400;500;600;700&display=swap');

/* =====================================================================
   1. DESIGN TOKENS  (CSS variables)
   ===================================================================== */
:root {

  /* ---- Primary Blue  #2F5D84 ---- */
  --pb-100: #C8D7E5;
  --pb-200: #A2BBD0;
  --pb-300: #7C9FBC;
  --pb-400: #5683A8;
  --pb-500: #2F5D84;   /* brand */
  --pb-600: #284F70;
  --pb-700: #21415C;
  --pb-800: #1A3348;
  --pb-900: #132534;

  /* ---- Dark Navy  #0F2F47 ---- */
  --navy-100: #B5C2CC;
  --navy-200: #8B9DAB;
  --navy-300: #607989;
  --navy-400: #355568;
  --navy-500: #0F2F47;  /* brand */
  --navy-600: #0C283C;
  --navy-700: #092131;
  --navy-800: #061A26;
  --navy-900: #03131B;

  /* ---- Charcoal  #2A2A2A ---- */
  --char-100: #BFBFBF;
  --char-200: #999999;
  --char-300: #737373;
  --char-400: #4D4D4D;
  --char-500: #2A2A2A;
  --char-600: #232323;
  --char-700: #1C1C1C;
  --char-800: #151515;
  --char-900: #0E0E0E;

  /* ---- Mid Grey  #8C8C8C ---- */
  --grey-100: #E0E0E0;
  --grey-200: #C7C7C7;
  --grey-300: #AEAEAE;
  --grey-400: #9B9B9B;
  --grey-500: #8C8C8C;
  --grey-600: #757575;
  --grey-700: #5E5E5E;
  --grey-800: #474747;
  --grey-900: #303030;

  /* ---- Light Grey  #D9D9D9 ---- */
  --light-100: #FFFFFF;
  --light-200: #F7F8FA;
  --light-300: #EFF1F4;
  --light-400: #E4E7EC;
  --light-500: #D9D9D9;
  --light-600: #BFBFBF;
  --light-700: #A6A6A6;
  --light-800: #8C8C8C;
  --light-900: #737373;

  /* ---- Semantic roles (use these in components) ---- */
  --c-bg:           var(--light-100);
  --c-bg-soft:      var(--light-200);
  --c-bg-alt:       var(--light-300);
  --c-surface-dark: var(--navy-500);
  --c-text:         var(--char-500);
  --c-text-muted:   var(--grey-600);
  --c-text-on-dark: var(--light-100);
  --c-heading:      var(--navy-500);
  --c-accent:       var(--pb-500);
  --c-accent-hover: var(--pb-600);
  --c-border:       var(--light-400);
  --c-divider:      var(--light-500);

  /* ---- Typography ---- */
  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Montserrat', system-ui, -apple-system, sans-serif;

  --fs-display: clamp(3rem, 6.5vw, 5.5rem);    /* hero */
  --fs-h1:      clamp(2.25rem, 4vw, 3.5rem);
  --fs-h2:      clamp(1.875rem, 3vw, 2.625rem);
  --fs-h3:      clamp(1.5rem, 2.4vw, 2rem);
  --fs-h4:      clamp(1.25rem, 2vw, 1.5rem);
  --fs-h5:      1.125rem;
  --fs-h6:      1rem;
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-tiny:    0.75rem;

  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-body:  1.65;

  --tracking-eyebrow: 0.22em;
  --tracking-button:  0.14em;
  --tracking-nav:     0.08em;

  /* ---- Spacing scale ---- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --space-10: 8rem;

  /* ---- Layout ---- */
  --container:    1280px;
  --container-sm: 960px;
  --section-y:    clamp(4rem, 9vw, 8rem);
  --gutter:       clamp(1.25rem, 4vw, 2.5rem);

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

  /* ---- Shadows ---- */
  --shadow-sm: 0 2px 8px  rgba(15, 47, 71, 0.06);
  --shadow-md: 0 12px 32px rgba(15, 47, 71, 0.10);
  --shadow-lg: 0 28px 60px rgba(15, 47, 71, 0.16);

  /* ---- Motion ---- */
  --ease:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast:  0.18s var(--ease);
  --t-base:  0.32s var(--ease);
  --t-slow:  0.6s  var(--ease);
}

/* =====================================================================
   2. BASE
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text);
  background: var(--c-bg);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; }

::selection { background: var(--pb-500); color: var(--light-100); }

/* =====================================================================
   3. TYPOGRAPHY
   ===================================================================== */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  font-family: var(--font-heading);
  color: var(--c-heading);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-4);
}

h1 { font-size: var(--fs-h1); font-weight: 600; }
h2 { font-size: var(--fs-h2); font-weight: 500; }
h3 { font-size: var(--fs-h3); font-weight: 500; }
h4 { font-size: var(--fs-h4); font-weight: 500; }
h5 { font-size: var(--fs-h5); font-weight: 600; }
h6 { font-size: var(--fs-h6); font-weight: 600; }

.display {
  font-family: var(--font-heading);
  font-size: var(--fs-display);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  color: var(--c-heading);
}

p { margin: 0 0 var(--space-4); line-height: var(--lh-body); font-family: var(--font-body);}

a {
  color: var(--c-accent);
  text-decoration: none;
  transition: color var(--t-fast);
}
a:hover { color: var(--c-accent-hover); }

/* Eyebrow / kicker label */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-body);
  font-size: var(--fs-tiny);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--c-accent);
}
.eyebrow::before {
  content: "";
  width: 32px;
  height: 1px;
  background: currentColor;
}

/* Italic display modifier — pairs nicely with Playfair */
.italic-display { font-style: italic; font-weight: 400; }

/* =====================================================================
   4. BUTTONS
   Apply class names (e.g. "btn btn-primary") via Elementor → CSS Classes
   ===================================================================== */
.btn,
.elementor-button.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1rem 1.85rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: var(--tracking-button);
  text-transform: uppercase;
  border-radius: var(--radius-xs);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--t-base);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.btn-primary,
.elementor-button.btn-primary {
  background: var(--navy-500);
  color: var(--light-100);
  border-color: var(--navy-500);
}
.btn-primary:hover {
  background: var(--pb-500);
  border-color: var(--pb-500);
  color: var(--light-100);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-secondary,
.elementor-button.btn-secondary {
  background: transparent;
  color: var(--navy-500);
  border-color: var(--navy-500);
}
.btn-secondary:hover {
  background: var(--navy-500);
  color: var(--light-100);
  transform: translateY(-2px);
}

.btn-ghost {
  background: transparent;
  color: var(--navy-500);
  padding: 0.5rem 0;
  border: none;
  border-bottom: 1px solid var(--navy-500);
  border-radius: 0;
  letter-spacing: var(--tracking-button);
}
.btn-ghost:hover { color: var(--pb-500); border-color: var(--pb-500); }

.btn-on-dark {
  background: var(--light-100);
  color: var(--navy-500);
  border-color: var(--light-100);
}
.btn-on-dark:hover {
  background: transparent;
  color: var(--light-100);
  border-color: var(--light-100);
  transform: translateY(-2px);
}

/* =====================================================================
   5. FORMS
   ===================================================================== */
input[type="text"], input[type="email"], input[type="tel"], input[type="search"],
textarea, select,
.elementor-field-textual {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  padding: 0.95rem 1rem;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-xs);
  background: var(--light-100);
  color: var(--c-text);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  width: 100%;
}
input:focus, textarea:focus, select:focus,
.elementor-field-textual:focus {
  outline: none;
  border-color: var(--navy-500);
  box-shadow: 0 0 0 3px rgba(47, 93, 132, 0.12);
}
label { font-size: var(--fs-small); font-weight: 600; color: var(--navy-500); }

/* =====================================================================
   6. SECTIONS / CONTAINERS
   ===================================================================== */
.section {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}
.section--alt  { background: var(--c-bg-soft); }
.section--dark { background: var(--navy-500); color: var(--c-text-on-dark); }

.section--dark h1, .section--dark h2,
.section--dark h3, .section--dark h4,
.section--dark .elementor-heading-title { color: var(--light-100); }
.section--dark p { color: var(--light-300); }
.section--dark .eyebrow { color: var(--pb-300); }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.container--sm { max-width: var(--container-sm); }

/* =====================================================================
   7. UTILITY HELPERS  (Elementor-friendly)
   ===================================================================== */
.text-accent  { color: var(--c-accent) !important; }
.text-navy    { color: var(--navy-500) !important; }
.text-muted   { color: var(--c-text-muted) !important; }
.text-on-dark { color: var(--light-100) !important; }
.text-center  { text-align: center; }

.bg-soft  { background: var(--c-bg-soft) !important; }
.bg-alt   { background: var(--c-bg-alt) !important; }
.bg-navy  { background: var(--navy-500) !important; }
.bg-blue  { background: var(--pb-500) !important; }

.divider-line {
  display: inline-block;
  width: 48px;
  height: 1px;
  background: var(--c-accent);
  vertical-align: middle;
}

.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

.radius-md { border-radius: var(--radius-md); }
.radius-lg { border-radius: var(--radius-lg); }

/* Image hover treatment for project tiles */
.img-hover {
  overflow: hidden;
  border-radius: var(--radius-sm);
}
.img-hover img {
  transition: transform var(--t-slow);
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.img-hover:hover img { transform: scale(1.05); }

/* Card */
.card {
  background: var(--light-100);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  padding: var(--space-6);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--pb-200);
}

/* =====================================================================
   PACIFIC BLUES - CF7 FORM STYLING 
===================================================================== */

.pb-form-wrapper {
    width: 100%;
    max-width: 600px; /* Adjust based on your Elementor column */
}

.pb-form-group {
    margin-bottom: 1.5rem;
    width: 100%;
}

/* Enforce Global Kit Label Styles */
.pb-form-wrapper label {
    display: block;
    font-size: var(--fs-small);
    font-weight: 600;
    color: var(--navy-500);
    margin-bottom: 0.5rem;
}

/* Ensure CF7 Select dropdowns match the text inputs */
.pb-form-wrapper select.wpcf7-form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%232F5D84%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem top 50%;
    background-size: 0.65rem auto;
}

/* Redundant fallback to guarantee your global kit applies to CF7 generated tags */
.pb-form-wrapper input[type="text"], 
.pb-form-wrapper input[type="email"], 
.pb-form-wrapper input[type="tel"], 
.pb-form-wrapper textarea, 
.pb-form-wrapper select { 
    font-family: var(--font-body); 
    font-size: var(--fs-body); 
    padding: 0.95rem 1rem; 
    border: 1px solid var(--c-border); 
    border-radius: var(--radius-xs); 
    background: var(--light-100); 
    color: var(--c-text); 
    transition: border-color var(--t-fast), box-shadow var(--t-fast); 
    width: 100%; 
    box-sizing: border-box;
}

.pb-form-wrapper input:focus, 
.pb-form-wrapper textarea:focus, 
.pb-form-wrapper select:focus { 
    outline: none; 
    border-color: var(--navy-500); 
    box-shadow: 0 0 0 3px rgba(47, 93, 132, 0.12); 
}

/* CF7 Validation and Error Messages */
.wpcf7-not-valid-tip {
    font-size: var(--fs-small);
    color: #d9534f;
    margin-top: 0.25rem;
    display: block;
}

.wpcf7 form .wpcf7-response-output {
    margin: 1.5rem 0 0 0;
    border-radius: var(--radius-xs);
    border: 1px solid var(--c-border);
}/* End custom CSS */