.elementor-227424 .elementor-element.elementor-element-f2774f8{--display:flex;}.elementor-227424 .elementor-element.elementor-element-3ca8102{--display:flex;}.elementor-227424 .elementor-element.elementor-element-0cae0dc{--display:flex;}.elementor-227424 .elementor-element.elementor-element-c4d7fc5{--display:flex;}.elementor-227424 .elementor-element.elementor-element-919c7e7{--display:flex;}.elementor-227424 .elementor-element.elementor-element-32832d8{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:60px 60px;--row-gap:60px;--column-gap:60px;--flex-wrap:nowrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-227424 .elementor-element.elementor-element-32832d8:not(.elementor-motion-effects-element-type-background), .elementor-227424 .elementor-element.elementor-element-32832d8 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-secondary );}.elementor-227424 .elementor-element.elementor-element-d66fdc8{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--gap:40px 40px;--row-gap:40px;--column-gap:40px;--margin-top:20px;--margin-bottom:20px;--margin-left:20px;--margin-right:20px;--padding-top:60px;--padding-bottom:60px;--padding-left:20px;--padding-right:20px;}.elementor-227424 .elementor-element.elementor-element-03af281{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:10px;--padding-right:20px;}.elementor-227424 .elementor-element.elementor-element-03af281.e-con{--align-self:center;}.elementor-227424 .elementor-element.elementor-element-bdf6151{width:100%;max-width:100%;}.elementor-227424 .elementor-element.elementor-element-a839401{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-227424 .elementor-element.elementor-element-a839401.e-con{--align-self:center;}.elementor-227424 .elementor-element.elementor-element-20513b7{background-color:#FFFFFF;margin:0% 0% calc(var(--kit-widget-spacing, 0px) + 0%) 0%;padding:10% 10% 10% 10%;border-style:solid;border-width:2px 2px 2px 2px;border-color:#A8A8A847;border-radius:30px 30px 30px 30px;box-shadow:3px 3px 65px 4px rgba(0, 0, 0, 0.13);--e-form-steps-indicators-spacing:24px;--e-form-steps-indicator-padding:28px;--e-form-steps-indicator-inactive-primary-color:#FFFFFF;--e-form-steps-indicator-inactive-secondary-color:#ACACAC;--e-form-steps-indicator-active-primary-color:#FFFFFF;--e-form-steps-indicator-active-secondary-color:#141414;--e-form-steps-indicator-completed-primary-color:#000000;--e-form-steps-indicator-completed-secondary-color:#FFFFFF;--e-form-steps-divider-width:1px;--e-form-steps-divider-gap:28px;}.elementor-227424 .elementor-element.elementor-element-20513b7 .elementor-field-group{padding-right:calc( 24px/2 );padding-left:calc( 24px/2 );margin-bottom:24px;}.elementor-227424 .elementor-element.elementor-element-20513b7 .elementor-form-fields-wrapper{margin-left:calc( -24px/2 );margin-right:calc( -24px/2 );margin-bottom:-24px;}.elementor-227424 .elementor-element.elementor-element-20513b7 .elementor-field-group.recaptcha_v3-bottomleft, .elementor-227424 .elementor-element.elementor-element-20513b7 .elementor-field-group.recaptcha_v3-bottomright{margin-bottom:0;}body.rtl .elementor-227424 .elementor-element.elementor-element-20513b7 .elementor-labels-inline .elementor-field-group > label{padding-left:2px;}body:not(.rtl) .elementor-227424 .elementor-element.elementor-element-20513b7 .elementor-labels-inline .elementor-field-group > label{padding-right:2px;}body .elementor-227424 .elementor-element.elementor-element-20513b7 .elementor-labels-above .elementor-field-group > label{padding-bottom:2px;}.elementor-227424 .elementor-element.elementor-element-20513b7 .elementor-field-group > label, .elementor-227424 .elementor-element.elementor-element-20513b7 .elementor-field-subgroup label{color:var( --e-global-color-primary );}.elementor-227424 .elementor-element.elementor-element-20513b7 .elementor-mark-required .elementor-field-label:after{color:#790E0E;}.elementor-227424 .elementor-element.elementor-element-20513b7 .elementor-field-group > label{font-family:"roboto-mono", Sans-serif;font-size:12px;font-weight:600;text-transform:uppercase;font-style:normal;text-decoration:none;line-height:1.5em;letter-spacing:0px;}.elementor-227424 .elementor-element.elementor-element-20513b7 .elementor-field-type-html{padding-bottom:24px;color:var( --e-global-color-primary );font-family:"Poppins", Sans-serif;font-size:16px;font-weight:300;text-transform:none;font-style:normal;text-decoration:none;line-height:1.5em;letter-spacing:0px;}.elementor-227424 .elementor-element.elementor-element-20513b7 .elementor-field-group .elementor-field{color:#4D4D4D;}.elementor-227424 .elementor-element.elementor-element-20513b7 .elementor-field-group .elementor-field, .elementor-227424 .elementor-element.elementor-element-20513b7 .elementor-field-subgroup label{font-family:"inter-variable", Sans-serif;font-size:14px;font-weight:500;text-transform:none;text-decoration:none;line-height:1em;letter-spacing:0px;word-spacing:1px;}.elementor-227424 .elementor-element.elementor-element-20513b7 .elementor-field-group .elementor-field:not(.elementor-select-wrapper){background-color:#FFFFFF;border-color:#DCDCDCB8;border-width:3px 3px 3px 3px;border-radius:10px 10px 10px 10px;}.elementor-227424 .elementor-element.elementor-element-20513b7 .elementor-field-group .elementor-select-wrapper select{background-color:#FFFFFF;border-color:#DCDCDCB8;border-width:3px 3px 3px 3px;border-radius:10px 10px 10px 10px;}.elementor-227424 .elementor-element.elementor-element-20513b7 .elementor-field-group .elementor-select-wrapper::before{color:#DCDCDCB8;}.elementor-227424 .elementor-element.elementor-element-20513b7 .elementor-button{font-family:"Poppins", Sans-serif;font-size:16px;font-weight:700;text-transform:capitalize;font-style:normal;text-decoration:none;line-height:1em;letter-spacing:0px;border-style:solid;border-width:2px 2px 2px 2px;border-radius:30px 30px 30px 30px;padding:16px 50px 16px 50px;}.elementor-227424 .elementor-element.elementor-element-20513b7 .e-form__buttons__wrapper__button-next{background-color:#FF9600;color:#000000;border-color:#FF9600;transition-duration:100ms;}.elementor-227424 .elementor-element.elementor-element-20513b7 .elementor-button[type="submit"]{background-color:#FF9600;color:#000000;border-color:#FF9600;transition-duration:100ms;}.elementor-227424 .elementor-element.elementor-element-20513b7 .elementor-button[type="submit"] svg *{fill:#000000;transition-duration:100ms;}.elementor-227424 .elementor-element.elementor-element-20513b7 .e-form__buttons__wrapper__button-previous{background-color:#B2B2B2FA;color:#000000;border-color:#B2B2B2FA;transition-duration:100ms;}.elementor-227424 .elementor-element.elementor-element-20513b7 .e-form__buttons__wrapper__button-next:hover{background-color:#244151;color:#FFFFFF;border-color:#244151;}.elementor-227424 .elementor-element.elementor-element-20513b7 .elementor-button[type="submit"]:hover{background-color:#244151;color:#FFFFFF;border-color:#244151;}.elementor-227424 .elementor-element.elementor-element-20513b7 .elementor-button[type="submit"]:hover svg *{fill:#FFFFFF;}.elementor-227424 .elementor-element.elementor-element-20513b7 .e-form__buttons__wrapper__button-previous:hover{background-color:#020101;color:#FFFFFF;border-color:#020101;}.elementor-227424 .elementor-element.elementor-element-20513b7 .elementor-message{font-family:"inter-variable", Sans-serif;font-size:14px;font-weight:400;font-style:normal;text-decoration:none;line-height:1.6em;letter-spacing:0px;}.elementor-227424 .elementor-element.elementor-element-20513b7 .elementor-message.elementor-message-success{color:#141414;}.elementor-227424 .elementor-element.elementor-element-20513b7 .elementor-message.elementor-message-danger{color:#C52928;}.elementor-227424 .elementor-element.elementor-element-20513b7 .elementor-message.elementor-help-inline{color:var( --e-global-color-primary );}.elementor-227424 .elementor-element.elementor-element-20513b7 .e-form__indicators__indicator, .elementor-227424 .elementor-element.elementor-element-20513b7 .e-form__indicators__indicator__label{font-family:"roboto-mono", Sans-serif;font-size:14px;font-weight:900;text-transform:capitalize;font-style:normal;text-decoration:none;line-height:1em;letter-spacing:0px;}body.elementor-page-227424:not(.elementor-motion-effects-element-type-background), body.elementor-page-227424 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-text );}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-227424 .elementor-element.elementor-element-32832d8{--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--gap:40px 40px;--row-gap:40px;--column-gap:40px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-227424 .elementor-element.elementor-element-d66fdc8{--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:50px 50px;--row-gap:50px;--column-gap:50px;--padding-top:20px;--padding-bottom:80px;--padding-left:20px;--padding-right:20px;}.elementor-227424 .elementor-element.elementor-element-d66fdc8.e-con{--align-self:center;}.elementor-227424 .elementor-element.elementor-element-03af281{--justify-content:center;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-227424 .elementor-element.elementor-element-bdf6151{width:auto;max-width:auto;}.elementor-227424 .elementor-element.elementor-element-bdf6151.elementor-element{--align-self:center;}.elementor-227424 .elementor-element.elementor-element-a839401{--min-height:0px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:space-between;--padding-top:0px;--padding-bottom:0px;--padding-left:40px;--padding-right:40px;}.elementor-227424 .elementor-element.elementor-element-20513b7{width:auto;max-width:auto;margin:10px 10px calc(var(--kit-widget-spacing, 0px) + 10px) 10px;padding:40px 40px 40px 40px;}.elementor-227424 .elementor-element.elementor-element-20513b7 .elementor-field-group > label{font-size:14px;}.elementor-227424 .elementor-element.elementor-element-20513b7 .elementor-field-type-html{font-size:14px;}.elementor-227424 .elementor-element.elementor-element-20513b7 .elementor-field-group .elementor-field, .elementor-227424 .elementor-element.elementor-element-20513b7 .elementor-field-subgroup label{font-size:14px;}.elementor-227424 .elementor-element.elementor-element-20513b7 .elementor-button{font-size:14px;}.elementor-227424 .elementor-element.elementor-element-20513b7 .elementor-message{font-size:14px;}.elementor-227424 .elementor-element.elementor-element-20513b7 .e-form__indicators__indicator, .elementor-227424 .elementor-element.elementor-element-20513b7 .e-form__indicators__indicator__label{font-size:14px;}}@media(max-width:767px){.elementor-227424 .elementor-element.elementor-element-32832d8{--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:wrap;--align-content:center;--padding-top:48px;--padding-bottom:48px;--padding-left:24px;--padding-right:24px;}.elementor-227424 .elementor-element.elementor-element-d66fdc8{--gap:30px 0px;--row-gap:30px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-227424 .elementor-element.elementor-element-03af281{--justify-content:center;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:2px;--padding-bottom:2px;--padding-left:2px;--padding-right:2px;}.elementor-227424 .elementor-element.elementor-element-a839401{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-227424 .elementor-element.elementor-element-20513b7{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:25px 25px 25px 25px;}}@media(min-width:768px){.elementor-227424 .elementor-element.elementor-element-32832d8{--width:100%;}.elementor-227424 .elementor-element.elementor-element-d66fdc8{--width:100%;}}@media(max-width:1024px) and (min-width:768px){.elementor-227424 .elementor-element.elementor-element-d66fdc8{--width:96%;}.elementor-227424 .elementor-element.elementor-element-a839401{--width:100%;}}/* Start custom CSS for form, class: .elementor-element-20513b7 *//* ============================================
   ETHOS — Complete Custom CSS for Your Form
   
   This includes:
   1. Your existing button styling
   2. NEW website field "https://" prefix
   
   PASTE THIS ENTIRE BLOCK into:
   Form Widget → Advanced → Custom CSS
   ============================================ */

/* ============================================
   SECTION 1: Form Buttons (Your Existing Code)
   ============================================ */

/* Layout: stacked on mobile, 2-up on >=640px */
.elementor-227424 .elementor-element.elementor-element-20513b7 .e-form__buttons{
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.elementor-227424 .elementor-element.elementor-element-20513b7 .e-form__buttons__wrapper{
  flex: 1 1 100%;
  width: 100%;
  min-width: 0; /* prevents weird overflow in flex rows */
}

@media (min-width: 640px){
  .elementor-227424 .elementor-element.elementor-element-20513b7 .e-form__buttons__wrapper{
    flex: 1 1 calc(50% - 8px);
  }
}

/* Button styling: match .ethos-about-cta-btn */
.elementor-227424 .elementor-element.elementor-element-20513b7 .e-form__buttons__wrapper__button,
.elementor-227424 .elementor-element.elementor-element-20513b7 .elementor-button[type="submit"]{
  /* layout */
  width: 100% !important;
  min-height: 52px !important;
  max-width: 100% !important;

  /* typography */
  font-family: "Inter", sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;

  /* spacing + shape */
  padding: 1rem 2.5rem !important;
  border-radius: 9999px !important;

  /* prevent clipping */
  white-space: normal !important;
  text-align: center;
  line-height: 1.1 !important;

  /* remove Elementor defaults */
  border: none !important;
  outline: none !important;
  box-shadow: none !important;

  /* motion */
  transition: transform 160ms ease, box-shadow 160ms ease !important;
}

/* Hover lift */
.elementor-227424 .elementor-element.elementor-element-20513b7 .e-form__buttons__wrapper__button:hover,
.elementor-227424 .elementor-element.elementor-element-20513b7 .elementor-button[type="submit"]:hover{
  transform: translateY(-1px);
}

/* Focus ring (accessible) */
.elementor-227424 .elementor-element.elementor-element-20513b7 .e-form__buttons__wrapper__button:focus-visible,
.elementor-227424 .elementor-element.elementor-element-20513b7 .elementor-button[type="submit"]:focus-visible{
  outline: 3px solid rgba(255, 150, 1, 0.55) !important;
  outline-offset: 3px !important;
}

/* Small phones: tighten padding and type */
@media (max-width: 480px){
  .elementor-227424 .elementor-element.elementor-element-20513b7 .e-form__buttons{
    gap: 12px;
  }

  .elementor-227424 .elementor-element.elementor-element-20513b7 .e-form__buttons__wrapper__button,
  .elementor-227424 .elementor-element.elementor-element-20513b7 .elementor-button[type="submit"]{
    padding: 0.9rem 1.25rem !important;
    font-size: 0.84rem !important;
    letter-spacing: 0.045em !important;
  }
}

@media (max-width: 360px){
  .elementor-227424 .elementor-element.elementor-element-20513b7 .e-form__buttons__wrapper__button,
  .elementor-227424 .elementor-element.elementor-element-20513b7 .elementor-button[type="submit"]{
    padding: 0.85rem 1.1rem !important;
    font-size: 0.82rem !important;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .elementor-227424 .elementor-element.elementor-element-20513b7 .e-form__buttons__wrapper__button,
  .elementor-227424 .elementor-element.elementor-element-20513b7 .elementor-button[type="submit"]{
    transition: none !important;
    transform: none !important;
  }
}


/* ============================================
   SECTION 2: Website Field "https://" Prefix (NEW)
   
   IMPORTANT: Replace "field_website" with your actual Field ID
   if it's different. Check in Elementor → Click website field →
   Look for "Field ID" in the left panel.
   ============================================ */

/* Target the website field wrapper */
.elementor-227424 .elementor-element.elementor-element-20513b7 .elementor-field-group-field_website {
  position: relative;
}

/* Create the "https://" prefix */
.elementor-227424 .elementor-element.elementor-element-20513b7 .elementor-field-group-field_website::before {
  content: 'https://';
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'inter-tight', 'Inter Tight', sans-serif;
  font-size: 16px;
  color: #1A1A1A;
  opacity: 0.5;
  font-weight: 600;
  pointer-events: none;
  z-index: 10;
}

/* Add padding so user text doesn't overlap prefix */
.elementor-227424 .elementor-element.elementor-element-20513b7 .elementor-field-group-field_website input {
  padding-left: 82px !important;
}

/* Match styling from original form (optional - remove if not needed) */
.elementor-227424 .elementor-element.elementor-element-20513b7 .elementor-field-group-field_website input {
  font-family: 'inter-tight', 'Inter Tight', sans-serif !important;
  font-size: 16px !important;
  background-color: #F9F8F6 !important;
  border: 2px solid rgba(26, 26, 26, 0.08) !important;
  border-radius: 10px !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  color: #1A1A1A !important;
  font-weight: 500 !important;
}

/* Focus state - orange border (matches Ethos brand) */
.elementor-227424 .elementor-element.elementor-element-20513b7 .elementor-field-group-field_website input:focus {
  border-color: #FF9601 !important;
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(255, 150, 1, 0.08) !important;
  background-color: #FFFFFF !important;
}

/* Mobile adjustments for prefix */
@media (max-width: 767px) {
  .elementor-227424 .elementor-element.elementor-element-20513b7 .elementor-field-group-field_website::before {
    font-size: 14px;
    left: 14px;
  }
  
  .elementor-227424 .elementor-element.elementor-element-20513b7 .elementor-field-group-field_website input {
    padding-left: 75px !important;
  }
}


/* ============================================
   END OF CUSTOM CSS
   ============================================ *//* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-32832d8 *//* ===================================
   ETHOS INK CONTACT PAGE - THEME CSS
   Single Page Settings → Advanced → Custom CSS
   
   This CSS handles page-level styling only.
   Form styling is in the Form Widget → Custom CSS.
   =================================== */

/* Global Resets for Contact Page Elements */
.ethos-hero-copy *,

/* ===================================
   HERO COPY (LEFT COLUMN)
   =================================== */

.ethos-hero-copy {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-top: 40px;
}

@media (max-width: 767px) {
  .ethos-hero-copy {
    text-align: center;
    align-items: center;
    padding-top: 0;
  }
}

/* Gradient Eyebrow Badge */
.ethos-eyebrow-badge {
  color: #FFFFFF;
  letter-spacing: 0.20em;
  font-size: 0.79rem;
  font-family: 'roboto-mono', 'Roboto Mono', monospace;
  font-weight: 900;
  text-transform: uppercase;
  padding: 12px 18px;
  display: inline-block;
  width: fit-content;
  background: linear-gradient(to right, 
    rgba(36, 65, 81, 0.75) 0%, 
    rgba(107, 27, 154, 0.75) 33%, 
    rgba(197, 41, 40, 0.75) 66%, 
    rgba(46, 125, 49, 0.75) 100%) 0 50% / 100% 50% no-repeat;
  clip-path: polygon(
    0.5% 30%, 0% 55%, 0.3% 70%, 
    99.2% 72%, 99.8% 68%, 100% 52%, 
    99.5% 35%, 98.8% 28%
  );
  line-height: 1;
}

/* Hero Headline */
.ethos-hero-headline {
  font-family: 'pressio', 'Pressio', sans-serif;
  font-size: clamp(36px, 5.5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #1A1A1A;
  font-weight: 700;
  max-width: 620px;
}

/* Hero Subheadline */
.ethos-hero-subheadline {
  font-family: 'inter-tight', 'Inter Tight', sans-serif;
  font-size: 18px;
  line-height: 1.65;
  color: #1A1A1A;
  opacity: 0.65;
  max-width: 560px;
  font-weight: 400;
}

@media (max-width: 767px) {
  .ethos-hero-headline {
    font-size: 36px;
  }
  .ethos-hero-subheadline {
    font-size: 16px;
  }
}

/* ============================================
   ETHOS INK CONTACT PAGE - HERO COPY STYLES
   Paste into: Elementor Container > Advanced > Custom CSS
   ============================================ */

/* Hero Content Container */
.elementor-227424 .elementor-element.elementor-element-32832d8 .ethos-hero-content {
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
}

/* Eyebrow Badge */
.elementor-227424 .elementor-element.elementor-element-32832d8 .ethos-eyebrow-wrapper {
  margin-bottom: 8px;
}

.elementor-227424 .elementor-element.elementor-element-32832d8 .ethos-eyebrow-badge {
  color: #FFFFFF;
  letter-spacing: 0.20em;
  font-size: 0.79rem;
  font-family: 'Roboto Mono', monospace;
  font-weight: 900;
  text-transform: uppercase;
  padding: 12px 16px;
  position: relative;
  display: inline-block;
  background: linear-gradient(to right, 
    rgba(36, 65, 81, 0.70) 0%, 
    rgba(107, 27, 154, 0.70) 33%, 
    rgba(197, 41, 40, 0.70) 66%, 
    rgba(46, 125, 49, 0.70) 100%) 0 50% / 100% 50% no-repeat;
  clip-path: polygon(
    0.5% 30%, 0% 55%, 0.3% 70%, 
    99.2% 72%, 99.8% 68%, 100% 52%, 
    99.5% 35%, 98.8% 28%
  );
  line-height: 1;
  margin: 0;
}

/* Main Headline */
.elementor-227424 .elementor-element.elementor-element-32832d8 .ethos-hero-headline {
  font-family: 'pressio', sans-serif;
  font-size: clamp(38px, 5vw, 58px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #FFFFFF;
  margin: 0;
  padding: 0;
  font-weight: 700;
}

/* Subheadline */
.elementor-227424 .elementor-element.elementor-element-32832d8 .ethos-hero-subheadline {
  font-family: 'Inter Tight', sans-serif;
  font-size: 18px;
  line-height: 1.7;
  color: #FFFFFF;
  opacity: 0.7;
  margin: 0;
  padding: 0;
  max-width: 540px;
}

/* Mobile Adjustments */
@media (max-width: 767px) {
  .elementor-227424 .elementor-element.elementor-element-32832d8 .ethos-hero-content {
    text-align: center;
    align-items: center;
  }

  .elementor-227424 .elementor-element.elementor-element-32832d8 .ethos-hero-headline {
    font-size: 32px;
  }

  .elementor-227424 .elementor-element.elementor-element-32832d8 .ethos-hero-subheadline {
    font-size: 16px;
  }

  .elementor-227424 .elementor-element.elementor-element-32832d8 .ethos-eyebrow-badge {
    font-size: 0.70rem;
    padding: 10px 14px;
  }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  .elementor-227424 .elementor-element.elementor-element-32832d8 .ethos-hero-headline {
    font-size: 42px;
  }
}

/* ============================================
   ETHOS — Complete Custom CSS for Your Form
   
   This includes:
   1. Your existing button styling
   2. NEW website field "https://" prefix
   
   PASTE THIS ENTIRE BLOCK into:
   Form Widget → Advanced → Custom CSS
   ============================================ */

/* ============================================
   SECTION 1: Form Buttons (Your Existing Code)
   ============================================ */

/* Layout: stacked on mobile, 2-up on >=640px */
.elementor-227424 .elementor-element.elementor-element-32832d8 .e-form__buttons{
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.elementor-227424 .elementor-element.elementor-element-32832d8 .e-form__buttons__wrapper{
  flex: 1 1 100%;
  width: 100%;
  min-width: 0; /* prevents weird overflow in flex rows */
}

@media (min-width: 640px){
  .elementor-227424 .elementor-element.elementor-element-32832d8 .e-form__buttons__wrapper{
    flex: 1 1 calc(50% - 8px);
  }
}

/* Button styling: match .ethos-about-cta-btn */
.elementor-227424 .elementor-element.elementor-element-32832d8 .e-form__buttons__wrapper__button,
.elementor-227424 .elementor-element.elementor-element-32832d8 .elementor-button[type="submit"]{
  /* layout */
  width: 100% !important;
  min-height: 52px !important;
  max-width: 100% !important;

  /* typography */
  font-family: "Inter", sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;

  /* spacing + shape */
  padding: 1rem 2.5rem !important;
  border-radius: 9999px !important;

  /* prevent clipping */
  white-space: normal !important;
  text-align: center;
  line-height: 1.1 !important;

  /* remove Elementor defaults */
  border: none !important;
  outline: none !important;
  box-shadow: none !important;

  /* motion */
  transition: transform 160ms ease, box-shadow 160ms ease !important;
}

/* Hover lift */
.elementor-227424 .elementor-element.elementor-element-32832d8 .e-form__buttons__wrapper__button:hover,
.elementor-227424 .elementor-element.elementor-element-32832d8 .elementor-button[type="submit"]:hover{
  transform: translateY(-1px);
}

/* Focus ring (accessible) */
.elementor-227424 .elementor-element.elementor-element-32832d8 .e-form__buttons__wrapper__button:focus-visible,
.elementor-227424 .elementor-element.elementor-element-32832d8 .elementor-button[type="submit"]:focus-visible{
  outline: 3px solid rgba(255, 150, 1, 0.55) !important;
  outline-offset: 3px !important;
}

/* Small phones: tighten padding and type */
@media (max-width: 480px){
  .elementor-227424 .elementor-element.elementor-element-32832d8 .e-form__buttons{
    gap: 12px;
  }

  .elementor-227424 .elementor-element.elementor-element-32832d8 .e-form__buttons__wrapper__button,
  .elementor-227424 .elementor-element.elementor-element-32832d8 .elementor-button[type="submit"]{
    padding: 0.9rem 1.25rem !important;
    font-size: 0.84rem !important;
    letter-spacing: 0.045em !important;
  }
}

@media (max-width: 360px){
  .elementor-227424 .elementor-element.elementor-element-32832d8 .e-form__buttons__wrapper__button,
  .elementor-227424 .elementor-element.elementor-element-32832d8 .elementor-button[type="submit"]{
    padding: 0.85rem 1.1rem !important;
    font-size: 0.82rem !important;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .elementor-227424 .elementor-element.elementor-element-32832d8 .e-form__buttons__wrapper__button,
  .elementor-227424 .elementor-element.elementor-element-32832d8 .elementor-button[type="submit"]{
    transition: none !important;
    transform: none !important;
  }
}


/* ============================================
   SECTION 2: Website Field "https://" Prefix (NEW)
   
   IMPORTANT: Replace "field_website" with your actual Field ID
   if it's different. Check in Elementor → Click website field →
   Look for "Field ID" in the left panel.
   ============================================ */

/* Target the website field wrapper */
.elementor-227424 .elementor-element.elementor-element-32832d8 .elementor-field-group-field_website {
  position: relative;
}

/* Create the "https://" prefix */
.elementor-227424 .elementor-element.elementor-element-32832d8 .elementor-field-group-field_website::before {
  content: 'https://';
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'inter-tight', 'Inter Tight', sans-serif;
  font-size: 16px;
  color: #1A1A1A;
  opacity: 0.5;
  font-weight: 600;
  pointer-events: none;
  z-index: 10;
}

/* Add padding so user text doesn't overlap prefix */
.elementor-227424 .elementor-element.elementor-element-32832d8 .elementor-field-group-field_website input {
  padding-left: 82px !important;
}

/* Match styling from original form (optional - remove if not needed) */
.elementor-227424 .elementor-element.elementor-element-32832d8 .elementor-field-group-field_website input {
  font-family: 'inter-tight', 'Inter Tight', sans-serif !important;
  font-size: 16px !important;
  background-color: #F9F8F6 !important;
  border: 2px solid rgba(26, 26, 26, 0.08) !important;
  border-radius: 10px !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  color: #1A1A1A !important;
  font-weight: 500 !important;
}

/* Focus state - orange border (matches Ethos brand) */
.elementor-227424 .elementor-element.elementor-element-32832d8 .elementor-field-group-field_website input:focus {
  border-color: #FF9601 !important;
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(255, 150, 1, 0.08) !important;
  background-color: #FFFFFF !important;
}

/* Mobile adjustments for prefix */
@media (max-width: 767px) {
  .elementor-227424 .elementor-element.elementor-element-32832d8 .elementor-field-group-field_website::before {
    font-size: 14px;
    left: 14px;
  }
  
  .elementor-227424 .elementor-element.elementor-element-32832d8 .elementor-field-group-field_website input {
    padding-left: 75px !important;
  }
}


/* ============================================
   END OF CUSTOM CSS
   ============================================ *//* End custom CSS */
/* Start custom CSS *//* ============================================ ELEMENTOR CSS: ABOUT US PAGE (VERSION B) Copy this CSS into Elementor's Custom CSS ============================================ */ /* Hero Animations */ @keyframes servicesHeroSway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } } @keyframes servicesHeroFloat { 0%, 100% { transform: translateY(0px) translateX(0px); } 25% { transform: translateY(-15px) translateX(10px); } 50% { transform: translateY(-25px) translateX(-5px); } 75% { transform: translateY(-10px) translateX(8px); } } /* Value Cards Hover Effects */ .ethos-value-card { transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1); } .ethos-value-card:hover { transform: translateY(-8px); box-shadow: var(--ethos-shadow-md) !important; } .ethos-value-card:hover .card-top-bar { background-color: var(--card-color) !important; } .ethos-value-card[data-color="--ethos-orange"]:hover .card-top-bar { background-color: var(--ethos-orange) !important; } .ethos-value-card[data-color="--ethos-purple"]:hover .card-top-bar { background-color: var(--ethos-purple) !important; } .ethos-value-card[data-color="--ethos-red"]:hover .card-top-bar { background-color: var(--ethos-red) !important; } .ethos-value-card[data-color="--ethos-green"]:hover .card-top-bar { background-color: var(--ethos-green) !important; } /* CTA Button Hover Effects */ .ethos-primary-cta:hover { transform: translateY(-1px); box-shadow: var(--ethos-shadow-cta); } .ethos-primary-cta:hover .cta-overlay { transform: translateX(0) !important; } .ethos-primary-cta:hover svg { transform: translate(4px, -4px); } /* Approach Cards Hover Effects */ .approach-card:hover { background-color: white !important; box-shadow: 0 8px 24px rgba(0,0,0,0.16); border-color: rgba(0,0,0,0.1) !important; } /* Responsive Grid Adjustments */ @media (max-width: 1024px) { .philosophy-grid { grid-template-columns: 1fr !important; } .philosophy-grid > div:first-child { padding: 80px 24px !important; } .philosophy-grid > div:last-child { padding: 80px 24px !important; } } @media (max-width: 768px) { .stats-grid { grid-template-columns: repeat(2, 1fr) !important; } .values-grid { grid-template-columns: 1fr !important; } .approach-grid { grid-template-columns: 1fr !important; } } @media (max-width: 640px) { .stats-grid { grid-template-columns: 1fr !important; } .approach-grid { grid-template-columns: 1fr !important; } } /* Ensure proper spacing */ .ethos-about-b section { position: relative; } /* Focus States for Accessibility */ .ethos-primary-cta:focus { outline: 3px solid var(--ethos-focus-outline); outline-offset: 2px; } /* Smooth transitions for all interactive elements */ .ethos-value-card, .approach-card, .ethos-primary-cta { will-change: transform; } /* ============================================ ETHOS ABOUT B — FONT + SPACING TIGHTEN PATCH Append to end of your existing Body CSS ============================================ */ /* 1) Font tokens — force correct families for this page */ .ethos-about-b{ --font-heading: 'pressio', 'Pressio', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; --font-body: 'inter-tight-variable', 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; --font-mono: 'roboto-mono', 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-family: var(--font-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Headings should always be Pressio */ .ethos-about-b h1, .ethos-about-b h2, .ethos-about-b h3{ font-family: var(--font-heading) !important; } /* Paragraphs should always be Inter Tight */ .ethos-about-b p{ font-family: var(--font-body) !important; } /* Any explicit “mono” UI text stays mono */ .ethos-about-b [style*="font-family: var(--font-mono)"]{ font-family: var(--font-mono) !important; } /* 2) Tighten overall page width (1400 → 1200) */ .ethos-about-b div[style*="max-width: 1400px"]{ max-width: 1200px !important; } /* 3) Tighten section spacing (reduce “airy” feel) */ .ethos-about-b .ethos-hero-dark-blue{ padding: 110px 24px 88px !important; /* was 120/100 */ min-height: 520px !important; /* was 550 */ } /* Hero internal spacing */ .ethos-about-b .ethos-hero-dark-blue h1{ margin-bottom: 24px !important; /* was 32 */ } .ethos-about-b .ethos-hero-dark-blue p{ margin-bottom: 36px !important; /* was 48 */ } /* Stats bar padding (48 → 36) and gap (2rem → 1.5rem) */ .ethos-about-b section[style*="background-color: var(--ethos-black)"]{ padding: 36px 24px !important; } .ethos-about-b .stats-grid{ gap: 1.5rem !important; } /* Values + Approach section padding (100 → 84) */ .ethos-about-b section[style*="padding: 100px 24px"]{ padding: 84px 24px !important; } /* Divider spacing under section headings (64 → 44) */ .ethos-about-b div[style*="margin: 0 auto 64px"]{ margin: 0 auto 44px !important; } /* Card grid gaps (2rem → 1.5rem) */ .ethos-about-b .values-grid, .ethos-about-b .approach-grid{ gap: 1.5rem !important; } /* Value cards: padding and radius (48 → 40, 12 → 14) */ .ethos-about-b .ethos-value-card{ padding: 40px !important; border-radius: 14px !important; } /* Fix the one icon wrapper typo (“justify-center”) by forcing centering */ .ethos-about-b .ethos-value-card > div[style*="width: 64px"][style*="height: 64px"]{ justify-content: center !important; } /* CTA spacing (48 → 32) */ .ethos-about-b div[style*="margin-top: 48px"]{ margin-top: 32px !important; } /* Approach cards: slightly tighter */ .ethos-about-b .approach-card{ padding: 42px 28px !important; /* was 48/32 */ border-radius: 16px !important; } /* Approach header spacing (80 → 56) */ .ethos-about-b section[style*="background-color: white"] div[style*="margin-bottom: 80px"]{ margin-bottom: 56px !important; } /* Philosophy section side paddings (100 → 84) */ @media (min-width: 1025px){ .ethos-about-b .philosophy-grid > div:first-child{ padding: 84px 40px 84px 24px !important; } .ethos-about-b .philosophy-grid > div:last-child{ padding: 84px 24px 84px 40px !important; } } /* Testimonial + Perfect Fit tightening */ .ethos-about-b .philosophy-grid div[style*="background-color: var(--ethos-dark-blue)"]{ padding: 48px !important; /* was 56 */ } .ethos-about-b div[style*="border: 2px solid var(--ethos-orange)"]{ padding: 32px !important; /* was 36 */ margin-top: 16px !important; /* was 20 */ } /* 4) Accessibility: prefer focus-visible */ .ethos-about-b .ethos-primary-cta:focus{ outline: none !important; } .ethos-about-b .ethos-primary-cta:focus-visible{ outline: 3px solid var(--ethos-focus-outline); outline-offset: 2px; } /* 5) Reduced motion safety */ @media (prefers-reduced-motion: reduce){ .ethos-about-b .hero-palm-1, .ethos-about-b .hero-palm-2, .ethos-about-b .hero-seagull-1, .ethos-about-b .hero-seagull-2, .ethos-about-b .hero-seagull-3{ animation: none !important; } } /* ABOUT — Values grid should be 2x2 on desktop+ */ @media (min-width: 1025px){ .ethos-about-b .values-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* Anchor offset so the form isn’t hidden under the header */ #about-us-bottom-form{ scroll-margin-top: 120px; } @media (max-width: 768px){ #about-us-bottom-form{ scroll-margin-top: 96px; } } /* ABOUT — Approach card titles match Value card titles */ .ethos-about-b .ethos-approach-title{ font-family: var(--font-heading) !important; font-size: 24px !important; letter-spacing: 0 !important; text-transform: none !important; margin-bottom: 16px !important; }

/* ===================================
   ETHOS INK CONTACT PAGE - THEME CSS
   Single Page Settings → Advanced → Custom CSS
   
   This CSS handles page-level styling only.
   Form styling is in the Form Widget → Custom CSS.
   =================================== */

/* Global Resets for Contact Page Elements */
.ethos-hero-copy *,

/* ===================================
   HERO COPY (LEFT COLUMN)
   =================================== */

.ethos-hero-copy {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-top: 40px;
}

@media (max-width: 767px) {
  .ethos-hero-copy {
    text-align: center;
    align-items: center;
    padding-top: 0;
  }
}

/* Gradient Eyebrow Badge */
.ethos-eyebrow-badge {
  color: #FFFFFF;
  letter-spacing: 0.20em;
  font-size: 0.79rem;
  font-family: 'roboto-mono', 'Roboto Mono', monospace;
  font-weight: 900;
  text-transform: uppercase;
  padding: 12px 18px;
  display: inline-block;
  width: fit-content;
  background: linear-gradient(to right, 
    rgba(36, 65, 81, 0.75) 0%, 
    rgba(107, 27, 154, 0.75) 33%, 
    rgba(197, 41, 40, 0.75) 66%, 
    rgba(46, 125, 49, 0.75) 100%) 0 50% / 100% 50% no-repeat;
  clip-path: polygon(
    0.5% 30%, 0% 55%, 0.3% 70%, 
    99.2% 72%, 99.8% 68%, 100% 52%, 
    99.5% 35%, 98.8% 28%
  );
  line-height: 1;
}

/* Hero Headline */
.ethos-hero-headline {
  font-family: 'pressio', 'Pressio', sans-serif;
  font-size: clamp(36px, 5.5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #1A1A1A;
  font-weight: 700;
  max-width: 620px;
}

/* Hero Subheadline */
.ethos-hero-subheadline {
  font-family: 'inter-tight', 'Inter Tight', sans-serif;
  font-size: 18px;
  line-height: 1.65;
  color: #1A1A1A;
  opacity: 0.65;
  max-width: 560px;
  font-weight: 400;
}

@media (max-width: 767px) {
  .ethos-hero-headline {
    font-size: 36px;
  }
  .ethos-hero-subheadline {
    font-size: 16px;
  }
}

/* ============================================
   ETHOS INK CONTACT PAGE - HERO COPY STYLES
   Paste into: Elementor Container > Advanced > Custom CSS
   ============================================ */

/* Hero Content Container */
body.elementor-page-227424 .ethos-hero-content {
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
}

/* Eyebrow Badge */
body.elementor-page-227424 .ethos-eyebrow-wrapper {
  margin-bottom: 8px;
}

body.elementor-page-227424 .ethos-eyebrow-badge {
  color: #FFFFFF;
  letter-spacing: 0.20em;
  font-size: 0.79rem;
  font-family: 'Roboto Mono', monospace;
  font-weight: 900;
  text-transform: uppercase;
  padding: 12px 16px;
  position: relative;
  display: inline-block;
  background: linear-gradient(to right, 
    rgba(36, 65, 81, 0.70) 0%, 
    rgba(107, 27, 154, 0.70) 33%, 
    rgba(197, 41, 40, 0.70) 66%, 
    rgba(46, 125, 49, 0.70) 100%) 0 50% / 100% 50% no-repeat;
  clip-path: polygon(
    0.5% 30%, 0% 55%, 0.3% 70%, 
    99.2% 72%, 99.8% 68%, 100% 52%, 
    99.5% 35%, 98.8% 28%
  );
  line-height: 1;
  margin: 0;
}

/* Main Headline */
body.elementor-page-227424 .ethos-hero-headline {
  font-family: 'pressio', sans-serif;
  font-size: clamp(38px, 5vw, 58px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #1A1A1A;
  margin: 0;
  padding: 0;
  font-weight: 700;
}

/* Subheadline */
body.elementor-page-227424 .ethos-hero-subheadline {
  font-family: 'Inter Tight', sans-serif;
  font-size: 18px;
  line-height: 1.7;
  color: #1A1A1A;
  opacity: 0.7;
  margin: 0;
  padding: 0;
  max-width: 540px;
}

/* Mobile Adjustments */
@media (max-width: 767px) {
  body.elementor-page-227424 .ethos-hero-content {
    text-align: center;
    align-items: center;
  }

  body.elementor-page-227424 .ethos-hero-headline {
    font-size: 32px;
  }

  body.elementor-page-227424 .ethos-hero-subheadline {
    font-size: 16px;
  }

  body.elementor-page-227424 .ethos-eyebrow-badge {
    font-size: 0.70rem;
    padding: 10px 14px;
  }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  body.elementor-page-227424 .ethos-hero-headline {
    font-size: 42px;
  }
}/* End custom CSS */