/* =========================================================================
   Contact Final (test page) — Figma node 13653:8415
   Poppins base + Source Serif 4 italic accents (fonts enqueued globally).
   ========================================================================= */

.cf-page{
    --cf-blue:#005eb8;
    --cf-orange:#f96815;
    --cf-green:#00a86b;
    --cf-ink:#120d0d;
    --cf-grey:#63666a;
    --cf-line:rgba(0,0,0,.12);
    --cf-yellow:#f7b82a;
    font-family:'Poppins',sans-serif;
    color:var(--cf-ink);
    overflow-x:clip;   /* clip horizontal overflow WITHOUT breaking position:sticky (unlike hidden) */
}
.cf-page *{box-sizing:border-box;}
.cf-container{max-width:1240px;margin:0 auto;padding:0 clamp(20px,5vw,40px);}

/* Shared serif-italic accent (inline text only) */
.cf-em{font-family:'Source Serif 4',serif;font-style:italic;font-weight:400;}
span.cf-blue{color:var(--cf-blue);}
.cf-orange{color:var(--cf-orange);}
.cf-green{color:var(--cf-green);}

/* ---------- HERO + FORM ---------- */
.cf-hero{padding:clamp(80px,9vw,132px) 0 72px;}
.cf-hero-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) 542px;
    gap:clamp(40px,6vw,88px);
    align-items:start;
}
.cf-hero-left{position:relative;}

.cf-breadcrumb{display:flex;align-items:center;gap:6px;font-size:14px;letter-spacing:-.42px;margin-bottom:26px;}
.cf-breadcrumb a{color:var(--cf-ink);opacity:.78;text-decoration:none;}
.cf-breadcrumb a:hover{opacity:1;}
.cf-breadcrumb .fa{font-size:13px;}
.cf-bc-sep{opacity:.5;}
.cf-bc-current{opacity:1;}

.cf-hero-title{
    font-family:'Poppins',sans-serif;
    font-weight:400;
    font-size:clamp(38px,4.6vw,56px);
    line-height:1.02;
    color:var(--cf-ink);
    margin:0 0 28px;
    max-width:560px;
}
.cf-hero-title .cf-em{font-size:1em;}

.cf-hero-copy{max-width:400px;}
.cf-hero-copy p{font-size:18px;line-height:1.5;color:#000;margin:0 0 24px;}
.cf-hero-copy p:last-child{margin-bottom:0;}

.cf-hero-arrow{
    position:absolute;
    top:185px;
    right:-60px;
    width:210px;
    height:auto;
    color:#DADADA;            /* whole element = subtle grey line-art (matches design) */
    pointer-events:none;
}
.cf-hero-arrow svg{width:100%;height:auto;display:block;}
.cf-hero-dot{
    position:absolute;left:8px;top:64px;
    width:14px;height:14px;border-radius:50%;
    background:var(--cf-orange);
}

/* ---------- FORM ---------- */
.cf-form{display:flex;flex-direction:column;gap:24px;}
.cf-field{display:flex;flex-direction:column;gap:4px;}
.cf-field label{font-size:18px;line-height:1.5;color:#000;}
.cf-req{color:var(--cf-orange);}
.cf-field input,
.cf-field textarea{
    width:100%;
    border:1px solid var(--cf-line);
    border-radius:0;
    padding:14px 16px;
    font-family:'Source Serif 4',serif;
    font-style:italic;
    font-size:16px;
    line-height:1.5;
    color:var(--cf-ink);
    background:#fff;
    outline:none;
    transition:border-color .2s;
}
.cf-field input::placeholder,
.cf-field textarea::placeholder{color:var(--cf-grey);font-family:'Source Serif 4',serif;font-style:italic;}
.cf-field input:focus,
.cf-field textarea:focus{border-color:var(--cf-blue);}
.cf-field textarea{height:110px;resize:vertical;}

.cf-form-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;}
.cf-submit{
    background:var(--cf-yellow);
    color:#000;
    font-family:'Poppins',sans-serif;
    font-weight:600;
    font-size:15px;
    line-height:18px;
    border:0;border-radius:0;
    padding:11px 12px;
    cursor:pointer;
    transition:filter .2s;
}
.cf-submit:hover{filter:brightness(.94);}
.cf-submit:disabled{opacity:.6;cursor:default;}
.cf-form-status{font-size:14px;margin:0;}
.cf-form-status.is-ok{color:var(--cf-green);}
.cf-form-status.is-err{color:#d33;}

/* ---------- BLUE CONTACT BAND ---------- */
.cf-blue-section{padding:0 0 8px;}
.cf-blueband{
    position:relative;
    background:var(--cf-blue);
    overflow:hidden;
    display:grid;
    grid-template-columns:1fr 452px;
    gap:48px;
    align-items:center;
    padding:64px 43px;
    min-height:457px;
}
/* cream circle: bleeds off the top, bottom sits ~3/4 down, large enough to hold the left text */
.cf-blue-circle{
    position:absolute;
    left:-160px;
    top:calc(78% - 800px);
    width:800px;height:800px;border-radius:50%;
    background:#ffe399;
    pointer-events:none;z-index:1;
    transition:transform .7s cubic-bezier(.22,.61,.36,1);
}
/* cyan circle: parked below, rises up from the bottom on hover (Figma Variant2) — stops with a gap below the cream */
.cf-blue-circle2{
    position:absolute;
    left:-20px;top:104%;
    width:520px;height:520px;border-radius:50%;
    background:#59cbe8;
    pointer-events:none;z-index:1;
    transition:top .7s cubic-bezier(.22,.61,.36,1), left .7s cubic-bezier(.22,.61,.36,1);
}
.cf-blueband:hover .cf-blue-circle2{left:110px;top:81%;}
.cf-blueband:hover .cf-blue-circle{transform:translate(-14px,8px);}
@media(prefers-reduced-motion:reduce){
    .cf-blue-circle,.cf-blue-circle2{transition:none;}
}
.cf-blue-left{position:relative;z-index:2;max-width:520px;align-self:start;margin-top:26px;}
.cf-blue-eyebrow{font-size:18px;line-height:1.5;color:#000;margin:0 0 24px;}
.cf-blue-head{font-size:clamp(24px,3vw,32px);line-height:1.2;color:#000;margin:0;}
.cf-blue-head .cf-em{display:block;}     /* italic line breaks below "…but" (Figma) */

.cf-blue-right{position:relative;z-index:2;display:flex;flex-direction:column;gap:30px;color:#fff;}
/* two-column item: arrow gutter | text (label over value); arrow sits beside the value line */
.cf-contact-item{display:grid;grid-template-columns:26px 1fr;column-gap:16px;row-gap:6px;align-items:center;}
.cf-contact-label{grid-column:2;grid-row:1;font-size:18px;line-height:1.5;margin:0;color:#fff;}
.cf-contact-label .cf-em{font-size:20px;}
.cf-contact-arrow{grid-column:1;grid-row:2;align-self:center;color:rgba(255,255,255,.9);width:26px;height:26px;display:inline-flex;}
.cf-contact-arrow svg{width:100%;height:100%;display:block;}
.cf-contact-value{grid-column:2;grid-row:2;color:#fff;font-weight:500;font-size:18px;line-height:1.5;margin:0;text-decoration:underline;text-underline-offset:2px;}
.cf-contact-address{font-weight:400;text-decoration:none;max-width:400px;}

/* ---------- BRANDS MARQUEE ---------- */
.cf-brands{background:rgba(255,227,153,.2);padding:56px 0 64px;overflow:hidden;margin-top:56px;}
.cf-brands-head{
    display:flex;flex-direction:column;align-items:center;
    text-align:center;
    font-family:'Poppins',sans-serif;font-weight:400;
    font-size:clamp(24px,3.4vw,40px);
    line-height:1.2;color:#000;
    margin:0 auto 44px !important;
    padding:0 20px;
}
.cf-brands-head .cf-em{font-size:1.28em;}
.cf-brands-head .cf-bh-line{display:block;}     /* two centered lines (Figma) */
.cf-brands-wrap{
    overflow:hidden;width:100%;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
}
.cf-brands-track{display:flex;align-items:center;gap:72px;width:max-content;animation:cfScroll 42s linear infinite;}
.cf-brands:hover .cf-brands-track{animation-play-state:paused;}
.cf-brand-logo{height:38px;width:auto;max-width:150px;object-fit:contain;flex-shrink:0;opacity:.9;filter:grayscale(0);}
@keyframes cfScroll{to{transform:translateX(-50%);}}

/* ---------- FAQ ---------- */
.cf-faq{padding:64px 0 96px;}
.cf-faq-grid{display:grid;grid-template-columns:365px minmax(0,1fr);gap:55px;align-items:start;}
.cf-faq-left{position:sticky;top:120px;}
.cf-faq-title{
    font-family:'Poppins',sans-serif;font-weight:400;
    font-size:clamp(30px,3.4vw,40px);line-height:1.2;color:#000;margin:0;
}
.cf-faq-title .cf-em{font-size:1.2em;}

.cf-faq-right{display:flex;flex-direction:column;}
.cf-faq-item{border-bottom:1px solid rgba(0,0,0,.15);}
.cf-faq-q{
    width:100%;background:none;border:0;cursor:pointer;
    display:flex;align-items:center;justify-content:space-between;gap:24px;
    padding:16px 0;text-align:left;
    font-family:'Poppins',sans-serif;font-size:clamp(17px,1.6vw,22px);line-height:1.4;color:#000;
}
.cf-faq-icon{position:relative;flex-shrink:0;width:24px;height:24px;}
.cf-faq-icon::before,
.cf-faq-icon::after{
    content:"";position:absolute;top:50%;left:50%;
    background:#000;transition:transform .25s ease,opacity .25s ease;
}
.cf-faq-icon::before{width:16px;height:1.5px;transform:translate(-50%,-50%);}
.cf-faq-icon::after{width:1.5px;height:16px;transform:translate(-50%,-50%);}
.cf-faq-item.is-open .cf-faq-icon::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0;}
.cf-faq-a{overflow:hidden;}
.cf-faq-a p{font-size:16px;line-height:1.4;color:#000;margin:0;padding:10px 0;}
.cf-faq-a a{color:#000;text-decoration:underline;}
.cf-faq-a p:first-child{padding-top:0;}
.cf-faq-a p:last-child{padding-bottom:16px;}

/* ---------- RESPONSIVE ---------- */
@media(max-width:991px){
    .cf-hero-grid{grid-template-columns:1fr;gap:40px;}
    .cf-hero-right{max-width:542px;}
    .cf-hero-arrow{display:none;}
    .cf-hero-copy{max-width:none;}
    .cf-blueband{grid-template-columns:1fr;gap:36px;padding:48px 28px;min-height:0;}
    .cf-blue-circle{width:420px;height:420px;left:-160px;top:-80px;transform:none;}
    .cf-faq-grid{grid-template-columns:1fr;gap:32px;}
    .cf-faq-left{position:static;}
}
@media(max-width:560px){
    .cf-brands-track{gap:48px;}
    .cf-brand-logo{height:34px;max-width:110px;}
    .cf-hero-title{max-width:none;}
}

@media(max-width:991px){
  /* remove the semi-circle on mobile (Pritesh, TTC Website chat) — keep text readable on solid blue */
  .cf-blue-circle,.cf-blue-circle2{display:none !important;}
  .cf-blue-eyebrow,.cf-blue-head{color:#fff;}
}