/* FutureTeamsPH components. Values come from tokens.css; spacing uses the normalised scale. */

.ft-root{background:var(--paper);color:var(--ink);font-family:var(--font-sans);font-size:16px;-webkit-font-smoothing:antialiased;box-sizing:border-box}
.ft-root *,.ft-root *:before,.ft-root *:after{box-sizing:inherit}
.ft-root p{margin:0}
.ft-root h1,.ft-root h2,.ft-root h3{margin:0;font-weight:600}
.ft-root a{color:inherit;text-decoration:none}
.ft-root :focus-visible{outline:3px solid var(--focus);outline-offset:5px}

/* Logo lockup */
.ft-logo{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;font-family:var(--font-sans);font-size:27px;font-weight:650;letter-spacing:-1.5px;line-height:1;color:var(--ink)}
.ft-logo img{width:34px;height:34px;border-radius:var(--radius-logo);display:block}
.ft-logo .ph{color:var(--tangerine);font-weight:600}
.ft-logo.on-dark{color:var(--paper)}
.ft-logo.sm{font-size:25px}.ft-logo.sm img{width:31px;height:31px}

/* Buttons and links */
.ft-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-8);padding:16px var(--space-6);background:var(--tangerine);border:1px solid transparent;border-radius:var(--radius-button);color:var(--ink);font:600 14px/1.2 var(--font-sans);cursor:pointer;transition:background .2s,transform .2s}
.ft-button:hover,.ft-button.is-hover{background:var(--tangerine-hover);transform:translateY(-2px)}
.ft-button .arrow{font-size:20px;font-weight:400;line-height:1}
.ft-button.small{padding:var(--space-3) var(--space-4);font-size:12px;gap:var(--space-5)}
.ft-button.small .arrow{font-size:16px}
.ft-button.block{width:100%;justify-content:space-between}
.ft-link{display:inline-flex;align-items:center;gap:var(--space-6);font:550 14px/1.2 var(--font-sans);color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:var(--space-2)}
.ft-link:hover,.ft-link.is-hover{color:var(--tangerine-text);border-color:var(--tangerine-text)}
.ft-link.on-dark{color:var(--paper);border-color:var(--footer-muted)}

/* Labels */
.ft-eyebrow{display:flex;align-items:center;gap:var(--space-2);margin:0;font:400 11px/1.6 var(--font-mono);letter-spacing:.055em;text-transform:uppercase;color:var(--ink)}
.ft-dot{display:inline-block;width:7px;height:7px;border-radius:var(--radius-round);background:var(--status-green);flex-shrink:0}
.ft-hand{font-family:var(--font-hand);font-weight:500;font-size:29px;letter-spacing:-.015em;line-height:1.1;color:var(--ink)}
.ft-chip{display:inline-block;font-size:11px;padding:var(--space-2) var(--space-3);border:1px solid var(--line);border-radius:var(--radius-pill);color:var(--ink)}
.ft-badge{display:grid;place-items:center;width:28px;height:28px;border-radius:var(--radius-round);background:var(--peach);color:var(--peach-text);font:400 10px var(--font-mono)}

/* Section header: eyebrow + hand note, then headline + intro */
.ft-section-top{display:flex;justify-content:space-between;align-items:center;gap:var(--space-6);margin-bottom:var(--space-6)}
.ft-section-intro{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-16);margin-bottom:var(--space-10)}
.ft-section-intro h2{font-size:54px;line-height:1.06;letter-spacing:-.055em;max-width:750px}
.ft-section-intro p{max-width:330px;font-size:14px;line-height:1.65;color:var(--muted)}
.ft-accent{color:var(--tangerine)}

/* Offer card */
.ft-offer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
.ft-offer{display:flex;flex-direction:column;padding:var(--space-8);border-radius:var(--radius-card)}
.ft-offer.butter{background:var(--butter)}.ft-offer.sky{background:var(--sky)}.ft-offer.mint{background:var(--mint)}
.ft-offer .top{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);margin-bottom:var(--space-6)}
.ft-offer .top .ft-eyebrow{font-size:10px}
.ft-offer .glyph{font-size:27px;line-height:1}
.ft-offer h3{font-size:32px;line-height:1.18;letter-spacing:-.05em;margin-bottom:var(--space-4)}
.ft-offer p{font-size:14px;line-height:1.65;color:var(--on-pastel);margin-bottom:var(--space-6)}
.ft-offer ul{list-style:none;padding:0;margin:0 0 var(--space-8);font-size:12px;line-height:1.5}
.ft-offer li{display:flex;gap:var(--space-2);margin-bottom:var(--space-2)}
.ft-offer li:before{content:'↳'}
.ft-offer .card-link{margin-top:auto;padding-top:var(--space-5);border-top:1px solid #00000022;display:flex;justify-content:space-between;font-size:13px;font-weight:600}

/* Problem item */
.ft-problem-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-8)}
.ft-problem{border-top:2px solid var(--tangerine);padding-top:var(--space-6)}
.ft-problem .ft-eyebrow{font-size:10px;color:var(--muted)}
.ft-problem h3{font-size:27px;line-height:1.18;letter-spacing:-.055em;margin:var(--space-4) 0}
.ft-problem p{font-size:14px;line-height:1.65;color:var(--muted)}

/* Promise strip */
.ft-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:var(--space-6);padding:var(--space-6) 0;font-size:13px;font-weight:500}
.ft-strip i{font-style:normal;font-size:24px;color:var(--tangerine);line-height:1}

/* FAQ */
.ft-faq details{border-bottom:1px solid var(--line-strong)}
.ft-faq details:first-child{border-top:1px solid var(--line-strong)}
.ft-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--space-5);padding:var(--space-5) 0;font-size:16px;font-weight:500;letter-spacing:-.02em}
.ft-faq summary::-webkit-details-marker{display:none}
.ft-faq summary span{font-size:23px;line-height:1;transition:transform .2s}
.ft-faq details[open] summary span{transform:rotate(45deg)}
.ft-faq details p{font-size:14px;line-height:1.65;color:var(--muted);max-width:580px;margin:0 var(--space-8) var(--space-6) 0}

/* Form */
.ft-form{border:1px solid var(--line);border-radius:var(--radius-panel);background:var(--white);padding:var(--space-8)}
.ft-form h3{font-size:25px;letter-spacing:-.055em;margin-bottom:var(--space-6)}
.ft-form label{display:block;font-size:12px;font-weight:500;margin:var(--space-5) 0 var(--space-2)}
.ft-form label span{font-weight:400;color:var(--muted)}
.ft-form input,.ft-form select,.ft-form textarea{width:100%;padding:var(--space-3);border:1px solid var(--line-strong);border-radius:var(--radius-input);background:var(--paper);color:var(--ink);font:13px/1.5 var(--font-sans)}
.ft-form .ft-button{margin-top:var(--space-5)}
.ft-form .note{font-size:11px;text-align:center;color:var(--muted);margin-top:var(--space-3)}

/* Client story: stat + timeline */
.ft-stat{display:flex;align-items:center;gap:var(--space-5);border-bottom:1px solid var(--line);padding-bottom:var(--space-5);margin-bottom:var(--space-6)}
.ft-stat .num{font-size:88px;line-height:1;letter-spacing:-.07em;font-weight:600;color:var(--tangerine)}
.ft-stat .label{font-size:23px;line-height:1.15;letter-spacing:-.04em}
.ft-timeline{list-style:none;margin:0;padding:0 0 0 var(--space-5);border-left:1px solid var(--line)}
.ft-timeline li{position:relative}
.ft-timeline li+li{margin-top:var(--space-5)}
.ft-timeline li:before{content:'';position:absolute;left:-24px;top:6px;width:7px;height:7px;border-radius:var(--radius-round);background:var(--tangerine)}
.ft-timeline .ft-eyebrow{font-size:10px;color:var(--muted)}
.ft-timeline h3{font-size:22px;letter-spacing:-.055em;margin:var(--space-1) 0 var(--space-2)}
.ft-timeline p{font-size:12px;line-height:1.65;color:var(--muted)}

/* Dark section */
.ft-dark{background:var(--forest);color:var(--paper);padding:var(--space-12)}
.ft-dark .ft-eyebrow{color:var(--on-dark-label);font-size:10px}
.ft-dark .ft-hand{color:var(--on-dark-label)}
.ft-dark h2{font-size:40px;line-height:1.06;letter-spacing:-.055em}
.ft-dark h2 span{color:var(--tangerine-on-dark)}
.ft-dark p{font-size:13px;line-height:1.65;color:var(--on-dark-muted)}
.ft-principles{border-left:1px solid var(--dark-line);padding-left:var(--space-8)}
.ft-principles article+article{margin-top:var(--space-6)}
.ft-principles h3{font-size:17px;letter-spacing:-.025em;margin:var(--space-2) 0}

/* Footer */
.ft-footer{background:var(--ink);color:var(--paper);padding:var(--space-12) var(--space-12) var(--space-5)}
.ft-footer .top{display:flex;justify-content:space-between;align-items:center;gap:var(--space-8);padding-bottom:var(--space-10)}
.ft-footer .top p{font-size:23px;line-height:1.3;letter-spacing:-.04em}
.ft-footer .bottom{border-top:1px solid var(--footer-line);padding-top:var(--space-5);display:flex;justify-content:space-between;align-items:center;font-size:10px;color:var(--footer-muted)}
.ft-footer .bottom .mono{font-family:var(--font-mono);font-size:10px;letter-spacing:.05em}
.ft-footer .ft-hand{color:var(--paper);font-size:25px}

/* Header */
.ft-header{height:88px;border-bottom:1px solid var(--line);background:var(--paper);display:flex;align-items:center;justify-content:space-between;gap:var(--space-8);padding:0 var(--space-12)}
.ft-header nav{display:flex;align-items:center;gap:var(--space-8);font-size:13px;font-weight:500}
.ft-header nav a{white-space:nowrap}
.ft-header nav a:not(.ft-button):hover{color:var(--tangerine-text)}
.ft-header.compact{padding:0 var(--space-8)}
.ft-header.compact nav{gap:var(--space-5);font-size:12px}

/* Photo frame with the signature corner */
.ft-photo{margin:0;overflow:hidden;border-radius:var(--radius-panel) var(--radius-signature) var(--radius-panel) var(--radius-panel)}
.ft-photo img{display:block;width:100%;height:100%;object-fit:cover}

/* Agencies page */
.ft-chip.role{padding:var(--space-2) var(--space-3);border-color:var(--chip-line);border-radius:24px;font-size:12px;background:var(--paper)}
.ft-partnership{background:var(--panel-stone);padding:var(--space-8);border-radius:15px var(--radius-signature) 15px 15px}
.ft-partnership>.ft-hand{display:block;text-align:center;transform:rotate(-3deg);margin-bottom:var(--space-6)}
.ft-partnership .you,.ft-partnership .us{padding:var(--space-6) var(--space-8);border-radius:var(--radius-card)}
.ft-partnership .you{background:var(--butter);transform:rotate(-2deg)}
.ft-partnership .us{background:var(--mint);transform:rotate(2deg)}
.ft-partnership .ft-eyebrow{font-size:10px}
.ft-partnership h3{font-size:32px;letter-spacing:-.055em;margin:var(--space-3) 0}
.ft-partnership p{font-size:14px;line-height:1.65}
.ft-partnership .link{text-align:center;font-size:29px;line-height:1;color:var(--tangerine);margin:var(--space-2)}
.ft-partnership .result{text-align:center;font-size:12px;font-weight:500;margin-top:var(--space-6)}
.ft-advisory{background:var(--band-apricot);padding:var(--space-12)}
.ft-advisory .quote{background:var(--paper);border:1px solid var(--apricot-line);border-radius:var(--radius-card);padding:var(--space-6)}
.ft-advisory .quote .ft-eyebrow{font-size:10px;color:var(--apricot-label)}
.ft-advisory .quote p{font-size:15px;line-height:1.6;margin-top:var(--space-3)}
.ft-advisory .arrow{display:block;text-align:center;color:var(--tangerine);font-size:27px;line-height:1;margin:var(--space-2)}
.ft-advisory .caption{font-size:11px;color:var(--muted);margin-top:var(--space-3)}
.ft-visit{background:var(--note-cream);border-radius:var(--radius-card);padding:var(--space-6) var(--space-8);display:grid;grid-template-columns:.8fr 1.5fr;gap:var(--space-4) var(--space-8);align-items:center}
.ft-visit .ft-hand{font-size:28px}
.ft-visit p{font-size:13px;line-height:1.65}
.ft-visit .ft-link{grid-column:2;justify-self:start;font-size:11px}
.ft-invite{background:var(--panel-stone);border-radius:var(--radius-card);padding:var(--space-6)}
.ft-invite .ft-hand{display:block;font-size:27px;margin-bottom:var(--space-3)}
.ft-invite p{font-size:13px;line-height:1.65;margin-bottom:var(--space-3)}
.ft-invite a{font-size:11px;text-decoration:underline;text-underline-offset:4px}