:root{ --navy:#2C4E86; --navy-fill:#2C4E86; --navy-2:#3D63A6; --navy-ink:#16294D; --navy-tint:#E8ECF7; --red:#E15B3E; --red-2:#B8442A; --red-tint:#FBEAE4; --paper:#FBF6EC; --surface:#FFFFFF; --wash:#F5EBDA; --ink:#1E1912; --ink-2:#5F5648; --ink-3:#6B6152; --red-text:#B8442A; --line:#E9DEC9; --line-2:#F1E8D8; --gold:#B98A2E; --nav-hov:#E1E9F8; /* card accent family used across the hero trust band and services bento - collected here so every component pulls the same source-of-truth values instead of repeating hex literals */ --c-orange:#F7693A; --c-orange-2:#E6451A; --c-orange-pale:#FDE4D8; --c-blue:#3C7ED6; --c-blue-2:#2458AD; --c-blue-pale:#DCE9FB; --c-green:#34B96A; --c-green-2:#1E8F4A; --c-green-pale:#DFF4E7; --c-purple:#9478D6; --c-purple-2:#6E4FB8; --c-purple-pale:#EBE2FA; --c-yellow:#D6A72E; --c-yellow-2:#96730F; --c-yellow-pale:#FBF0C9; --c-teal:#2BA89E; --c-teal-2:#0F7A72; --c-teal-pale:#D7F3F0; --c-pink:#D6568F; --c-pink-2:#B23D6D; --c-pink-pale:#FCE3EC; --r:9px; --r-lg:16px; /* 8pt spacing scale - new sections (hero v2, card strip) are built on these; older sections keep their existing hand-tuned px values to avoid an untested sitewide pass */ --space-1:8px; --space-2:16px; --space-3:24px; --space-4:32px; --space-5:40px; --space-6:48px; --space-7:56px; --space-8:64px; --space-9:72px; --space-10:80px; --space-11:88px; --space-12:96px; --sh:0 1px 2px rgba(46,34,20,.04), 0 8px 24px -14px rgba(46,34,20,.18); --sh-h:0 2px 6px rgba(46,34,20,.06), 0 16px 34px -16px rgba(46,34,20,.26); --ease:cubic-bezier(.2,.7,.3,1); --disp:'Archivo','Source Sans 3',system-ui,sans-serif; --body:'Source Sans 3',system-ui,sans-serif; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --navy:#6E93DD; --navy-fill:#253F72; --navy-tint:#1B2740; --red:#F1815F; --paper:#0D131F; --surface:#141D30; --wash:#1A2438; --ink:#EEF1F8; --ink-2:#AFB8CC; --ink-3:#8B95AB; --red-text:#F1815F; --line:#26314A; --line-2:#1E2740; --nav-hov:#1D2C4A; } } :root[data-theme="dark"]{ --navy:#6E93DD; --navy-fill:#253F72; --navy-tint:#1B2740; --red:#F1815F; --paper:#0D131F; --surface:#141D30; --wash:#1A2438; --ink:#EEF1F8; --ink-2:#AFB8CC; --ink-3:#8B95AB; --red-text:#F1815F; --line:#26314A; --line-2:#1E2740; --nav-hov:#1D2C4A; } [data-theme="dark"] img{filter:brightness(.92) contrast(1.03);} *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;} html{scroll-behavior:smooth;} body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body); font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden; transition:background-color .3s,color .3s;} h1,h2,h3,h4{font-family:var(--disp);font-weight:800;font-stretch:112%;margin:0; letter-spacing:-.012em;line-height:1.1;} p{margin:0;} a{color:inherit;text-decoration:none;} ul{margin:0;padding:0;list-style:none;} img,svg{display:block;max-width:100%;} img{height:auto;} button{font-family:inherit;border:none;background:none;cursor:pointer;} ::selection{background:var(--red);color:#fff;} :focus-visible{outline:3px solid var(--red);outline-offset:2px;} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;} .skip{position:absolute;left:-999px;top:8px;z-index:300;background:var(--navy-fill);color:#fff; padding:10px 16px;border-radius:var(--r);font-weight:700;} .skip:focus{left:8px;} .wrap{max-width:1480px;margin:0 auto;padding:0 30px;} section{padding:116px 30px;} .rule{border-top:1px solid var(--line);} .team-cta{background:var(--navy-tint);border-radius:var(--r-lg);padding:44px 50px; display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;} .team-cta > div:first-child{max-width:640px;} .team-cta .btn{flex-shrink:0;} .kicker{font-family:var(--disp);font-size:12px;font-weight:700;font-stretch:100%; letter-spacing:.2em;text-transform:uppercase;color:var(--red-text);display:flex;align-items:center;gap:9px;margin-bottom:14px;} .kicker::before{content:"";display:block;width:20px;height:2px;background:var(--gold);flex-shrink:0;} .kicker.on-dark{color:#F2AE99;} .kicker .kn{color:var(--ink-3);font-weight:600;letter-spacing:.05em;text-transform:none;margin-left:auto;padding-left:12px;} .kicker.on-dark .kn{color:rgba(255,255,255,.45);} /* ---------- stat counters ---------- */ .stats-sec{padding:56px 30px 60px;background:var(--surface);} .stats3{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;max-width:1480px;margin:0 auto;text-align:center;} .stats3 b{display:block;font-family:var(--disp);font-weight:800;font-stretch:115%; font-size:clamp(38px,5vw,56px);color:var(--navy);line-height:1;} .stats3 span{display:block;margin-top:10px;font-size:14.5px;color:var(--ink-2);line-height:1.5; max-width:230px;margin-left:auto;margin-right:auto;} /* ---------- programs (homepage) ---------- */ .prg{background:var(--paper);} .prg-grid{display:grid;grid-template-columns:.78fr 1.62fr;gap:72px;align-items:start;max-width:1480px;margin:0 auto;} .prg-intro{position:sticky;top:132px;} .prg-intro .h2{margin:14px 0 22px;} .prg-intro .acc{white-space:nowrap;} .prg-intro .lede{margin-bottom:40px;max-width:40ch;} .prg-note{display:flex;align-items:center;gap:10px;margin-top:34px;font-size:13.5px;color:var(--ink-3);} .prg-note::before{content:'';width:22px;height:2px;border-radius:2px;background:var(--gold);} .prg-cards{display:grid;grid-template-columns:1fr 1fr;gap:18px;} .prg-cards > .prg-cta{grid-column:1 / -1;} .prg-card{position:relative;display:flex;gap:16px;align-items:flex-start;padding:26px 22px 24px; background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg); transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s;} .prg-card:hover{transform:translateY(-5px);box-shadow:var(--sh-h);border-color:transparent;} .prg-card:active{transform:translateY(-2px) scale(.99);transition-duration:.1s;} .prg-card .ic{width:52px;height:52px;clip-path:polygon(25% 4%,75% 4%,100% 50%,75% 96%,25% 96%,0% 50%);flex-shrink:0;display:flex;align-items:center;justify-content:center; box-shadow:0 12px 20px -10px rgba(43,31,18,.45);} .prg-card .ic svg{width:25px;height:25px;stroke:#fff;} .prg-card.c1 .ic{background:linear-gradient(135deg,#B5852A 0%,#8F6418 100%);} .prg-card.c2 .ic{background:linear-gradient(135deg,#D9633F 0%,#BF4A2B 100%);} .prg-card.c3 .ic{background:linear-gradient(135deg,#3D63A6 0%,#2C4E86 100%);} .prg-card.c4 .ic{background:linear-gradient(135deg,#C0713A 0%,#A5501F 100%);} .prg-card .no{position:absolute;top:16px;right:18px;font-family:var(--disp);font-weight:800;font-size:12px; letter-spacing:.08em;color:var(--ink-3);} .prg-card h3{font-size:16px;line-height:1.28;margin-bottom:7px;padding-right:26px;transition:color .2s;} .prg-card:hover h3{color:var(--red-text);} .prg-card p{font-size:13.5px;color:var(--ink-2);line-height:1.55;} .prg-card.prg-cta{flex-direction:column;justify-content:center;gap:0;border-color:transparent;color:#fff; background:linear-gradient(150deg,var(--navy-fill) 0%,var(--navy-ink) 100%);} .prg-card.prg-cta h3{color:#fff;font-size:19px;padding-right:0;margin-bottom:9px;} .prg-card.prg-cta:hover h3{color:#fff;} .prg-card.prg-cta p{color:rgba(255,255,255,.82);margin-bottom:16px;} .prg-card.prg-cta .more{display:inline-flex;align-items:center;gap:8px;font-family:var(--disp);font-weight:700; font-size:14px;color:#FFB59B;} .prg-card.prg-cta .more svg{width:15px;height:15px;transition:transform .2s var(--ease);} .prg-card.prg-cta:hover .more svg{transform:translateX(4px);} @media (max-width:1230px){ .prg-grid{grid-template-columns:1fr;gap:44px;} .prg-intro{position:static;} } @media (max-width:700px){ .prg-cards{grid-template-columns:1fr;} } /* ---------- concern finder ---------- */ .finder{background:linear-gradient(180deg,var(--navy-tint) 0%,var(--paper) 100%);} .tagfind{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px;} .tagfind a{display:inline-flex;align-items:center;padding:12px 20px;border-radius:999px; background:var(--surface);color:var(--navy);font-weight:700;font-size:14.5px; border:1.5px solid var(--line);transition:background .2s,border-color .2s,transform .2s var(--ease),box-shadow .2s;} .tagfind a:hover{background:var(--navy);color:#fff;border-color:var(--navy);transform:translateY(-2px);box-shadow:var(--sh-h);} .tagfind span.tag{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:999px; background:var(--surface);color:var(--ink-2);font-weight:600;font-size:14px;border:1.5px solid var(--line);} .tagfind span.tag svg{width:16px;height:16px;stroke:var(--navy);flex-shrink:0;} .h1{font-size:clamp(37px,5.1vw,62px);} .h2{font-size:clamp(27px,3.4vw,41px);} .h3{font-size:clamp(21px,2.3vw,27px);} .lede{font-size:18px;line-height:1.68;color:var(--ink-2);} .lede + .lede{margin-top:15px;} .acc,.hero2 h1 .r{font-family:'Fraunces',Georgia,'Times New Roman',serif;font-style:italic;font-weight:500; letter-spacing:-.01em;color:var(--red-text);} .acc{font-size:1.05em;} .hero2 h1 .r{font-size:1.08em;font-weight:600;} .sec-head{max-width:660px;margin-bottom:62px;} .sec-head p{margin-top:16px;} /* ---------- preloader ---------- */ .preloader{position:fixed;inset:0;z-index:9999;overflow:hidden;pointer-events:none; background:radial-gradient(circle at 50% 45%,var(--navy) 0%,var(--navy-ink) 72%); display:flex;align-items:center;justify-content:center; animation:pl-out .38s cubic-bezier(.4,0,.2,1) .62s forwards;} .preloader::before{content:"";position:absolute;width:150px;height:150px;border-radius:50%; border:2px solid rgba(255,255,255,.2); animation:pl-ring .9s cubic-bezier(.3,0,.4,1) both;} .preloader .badge{width:96px;height:96px;position:relative;z-index:1; animation:pl-logo .55s cubic-bezier(.22,1.3,.36,1) both;} @keyframes pl-logo{ 0%{opacity:0;transform:scale(.45) rotate(-18deg);} 100%{opacity:1;transform:scale(1) rotate(0deg);} } @keyframes pl-ring{ 0%{transform:scale(.5);opacity:0;} 50%{opacity:.55;} 100%{transform:scale(1.2);opacity:0;} } @keyframes pl-out{ 0%{opacity:1;visibility:visible;transform:scale(1);} 100%{opacity:0;visibility:hidden;transform:scale(1.06);pointer-events:none;} } @media (prefers-reduced-motion: reduce){ .preloader{display:none;} } /* ---------- header (floating glass pill) ---------- */ .topbar{display:none;} header{position:fixed;top:0;left:0;right:0;z-index:100;background:transparent; padding:18px 20px 0;transition:padding .25s var(--ease);} header.stuck{padding-top:10px;} .nav{display:flex;align-items:center;justify-content:space-between;gap:19px; max-width:1480px;margin:0 auto;padding:13px 14px 13px 26px; background:rgba(9,33,63,.85);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.14);border-radius:999px; box-shadow:0 22px 44px -22px rgba(0,0,0,.6);transition:background .25s;} header.stuck .nav{background:rgba(9,33,63,.94);} .nav-act{display:flex;flex-direction:row;align-items:center;gap:14px;} .nav-divider{width:1px;height:28px;background:rgba(255,255,255,.18);flex-shrink:0;} .btn-nav{display:flex;align-items:center;justify-content:center;gap:8px; background:linear-gradient(135deg,#C24A2C 0%,#B8442A 100%);color:#fff; font-family:var(--disp);font-weight:700;font-size:15.5px;padding:13px 24px 13px 21px;border-radius:999px; white-space:nowrap;transition:background .2s,transform .2s var(--ease),box-shadow .2s; box-shadow:0 8px 18px -8px rgba(225,91,62,.75);} .btn-nav:hover{background:#fff;color:var(--navy-ink);transform:translateY(-2px); box-shadow:0 12px 24px -8px rgba(0,0,0,.4);} .btn-nav:active{transform:translateY(0) scale(.96);transition-duration:.1s;} .btn-nav svg{width:16px;height:16px;flex-shrink:0;} .nav-num{display:flex;align-items:center;gap:9px;font-family:var(--disp); font-weight:700;font-size:16px;color:#fff;letter-spacing:.01em;transition:opacity .18s;white-space:nowrap;} .nav-num:hover{opacity:.82;} .nav-num-ic{display:flex;align-items:center;justify-content:center;width:33px;height:33px;border-radius:50%; background:linear-gradient(135deg,#F7693A 0%,#E6451A 100%);flex-shrink:0;} .nav-num-ic svg{width:15px;height:15px;stroke:#fff;} .brand{display:flex;align-items:center;gap:12px;} .brand .badge{width:47px;height:47px;flex-shrink:0;} .fbrand .badge{width:64px;height:64px;flex-shrink:0;} .bt{display:flex;flex-direction:column;} .bt .b1{display:block;font-family:var(--disp);font-weight:800;font-stretch:112%;font-size:18.5px; color:#fff;line-height:1.05;letter-spacing:-.01em;white-space:nowrap;} .bt .b2{display:block;font-size:12.5px;font-weight:600;color:#FFD9C4;letter-spacing:.05em; text-transform:uppercase;margin-top:3px;white-space:nowrap;font-family:var(--disp);} .navlinks{display:flex;align-items:center;gap:26px;} .nav-phone-mobile{display:none;} .navlinks a{position:relative;font-size:15.5px;font-weight:600;color:#D7DEEE; padding:8px 1px;white-space:nowrap;transition:color .2s;} .navlinks a::after{content:"";position:absolute;left:1px;right:1px;bottom:1px;height:2px;border-radius:2px; background:#FF7A50;transform:scaleX(0);transform-origin:center;transition:transform .28s var(--ease);} .navlinks a:hover{color:#fff;} .navlinks a:hover::after{transform:scaleX(1);} .navlinks a.active{color:#FF9E7D;font-weight:700;} .navlinks a.active::after{transform:scaleX(1);} .nav-right{display:flex;align-items:center;gap:12px;} .nav-utils{display:flex;align-items:center;gap:2px;padding:3px;flex-shrink:0;order:2; background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:999px;} .nav-act{order:1;} .lang-tg{display:flex;align-items:center;justify-content:center;height:35px;padding:0 13px; border-radius:999px;color:#fff;font-family:var(--disp); font-weight:700;font-size:13.5px;letter-spacing:.02em;flex-shrink:0; transition:background .2s,transform .2s var(--ease);} .lang-tg:hover{background:rgba(255,255,255,.2);transform:translateY(-1px);} .theme-tg{display:flex;align-items:center;justify-content:center;width:35px;height:35px; border-radius:50%;color:#fff;flex-shrink:0; transition:background .2s,color .2s,transform .2s var(--ease);} .theme-tg:hover{background:rgba(255,255,255,.2);transform:translateY(-1px) rotate(-8deg);} .theme-tg svg{width:19px;height:19px;} .theme-tg .i-sun{display:none;} [data-theme="dark"] .theme-tg .i-moon{display:none;} [data-theme="dark"] .theme-tg .i-sun{display:block;} .ntg{display:none;padding:9px;} .ntg span{display:block;width:22px;height:2px;background:#fff;margin:5px 0;border-radius:2px; transition:transform .28s var(--ease),opacity .18s;} .ntg.on span:nth-child(1){transform:translateY(7px) rotate(45deg);} .ntg.on span:nth-child(2){opacity:0;} .ntg.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:700; font-size:15px;padding:15px 26px;border-radius:var(--r);cursor:pointer; transition:background .22s var(--ease),color .22s,border-color .22s,transform .22s var(--ease),box-shadow .22s;} .btn svg{width:16px;height:16px;transition:transform .25s var(--ease);} .btn:hover svg{transform:translateX(3px);} .btn:active{transform:translateY(0) scale(.97);transition-duration:.1s;} .b-red{background:linear-gradient(135deg,#FA5028 0%,#E6451A 100%);color:#fff;box-shadow:0 10px 24px -9px rgba(250,80,40,.6);} .b-red:hover{background:linear-gradient(135deg,var(--navy) 0%,#1B3868 100%);transform:translateY(-2px);box-shadow:0 16px 30px -9px rgba(44,78,134,.6);} .b-navy{background:linear-gradient(135deg,var(--navy) 0%,#1B3868 100%);color:#fff;box-shadow:0 10px 24px -9px rgba(44,78,134,.7);} .b-navy:hover{background:linear-gradient(135deg,#C24A2C 0%,#B8442A 100%);transform:translateY(-2px);box-shadow:0 16px 30px -9px rgba(225,91,62,.6);} .b-out{border:2px solid var(--navy);color:var(--navy);background:var(--surface);} .b-out:hover{background:linear-gradient(135deg,var(--navy) 0%,#1B3868 100%);border-color:var(--navy);color:#fff;transform:translateY(-2px); box-shadow:0 14px 28px -12px rgba(44,78,134,.45);} .b-out-l{border:2px solid rgba(255,255,255,.75);color:#fff;background:rgba(255,255,255,.06);} .b-out-l:hover{background:#fff;border-color:#fff;color:var(--navy-ink);transform:translateY(-2px);} .b-txt{display:inline-flex;align-items:center;gap:7px;font-family:var(--disp);font-weight:700;font-size:15px; color:var(--navy);border-bottom:2px solid var(--line);padding-bottom:3px; transition:border-color .2s,color .2s,gap .2s;} .b-txt:hover{border-color:var(--red);color:var(--red-text);gap:11px;} .b-txt svg{width:14px;height:14px;} /* ---------- hero ---------- */ .hero-screen{display:flex;flex-direction:column; min-height:calc(100vh - var(--header-h, 96px) + 70px);min-height:calc(100dvh - var(--header-h, 96px) + 70px);} .stat-banner{background:var(--navy-ink);color:#fff;padding:24px 30px;} .stat-banner .wrap{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;text-align:center;} .stat-banner .sb-n{font-family:var(--disp);font-weight:800;font-stretch:115%;font-size:34px;color:var(--gold);line-height:1;flex-shrink:0;} .stat-banner .sb-t{font-size:15.5px;color:rgba(255,255,255,.92);max-width:52ch;} .hero{position:relative;color:#fff;overflow:hidden; flex:1 0 auto;display:flex;flex-direction:column;justify-content:flex-end;} .hero-media{position:absolute;inset:0;z-index:0;} .hero-media img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;} .hero-media::after{content:"";position:absolute;inset:0; background: linear-gradient(180deg,rgba(10,16,26,.1) 0%,rgba(10,16,26,.5) 58%,rgba(10,16,26,.88) 100%), linear-gradient(100deg,rgba(10,16,26,.82) 0%,rgba(10,16,26,.38) 50%,rgba(10,16,26,.1) 100%);} .hero-in{position:relative;z-index:1;max-width:1480px;margin:0 auto;width:100%;padding:120px 30px 48px;} .hero .kicker{color:#F2AE99;margin-bottom:12px;} .hero .kicker::before{background:var(--gold);} .hero h1{color:#fff;margin-bottom:18px;max-width:16ch;font-size:clamp(34px,4.8vw,56px);} .hero h1 .r{color:#FF9169;} .hero .lede{color:#E1E6F2;max-width:47ch;margin-bottom:22px;font-size:16.5px;line-height:1.62;} .hero-cta{display:flex;gap:22px;align-items:center;flex-wrap:wrap;} .hero .b-txt{color:#fff;border-bottom-color:rgba(255,255,255,.4);} .hero .b-txt:hover{color:#FF9169;border-bottom-color:#FF9169;} .hero-note{display:flex;align-items:center;gap:8px;font-size:14px;color:#C9D3EA;margin-top:18px;margin-bottom:28px;} .hero-note svg{width:16px;height:16px;flex-shrink:0;color:var(--gold);} .hero .trust .big svg{stroke:var(--gold);} .trust{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid rgba(255,255,255,.25);max-width:640px;} .trust div{padding:14px 22px 0 0;margin-right:22px;border-right:1px solid rgba(255,255,255,.25);} .trust div:last-child{border-right:none;margin-right:0;padding-right:0;} .trust .big{font-family:var(--disp);font-weight:800;font-stretch:112%;font-size:20px;color:#fff; display:flex;align-items:center;gap:8px;} .trust .big svg{width:16px;height:16px;flex-shrink:0;} .trust .sm{font-size:13.5px;color:#AFBEE0;margin-top:3px;} .freewrap{background:var(--paper);padding:60px 30px;flex-shrink:0;} .svc4-head{max-width:1480px;margin:0 auto 28px;} .svc4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:1480px;margin:0 auto;} .svc4 a{border-radius:var(--r-lg);padding:28px 24px;color:#fff;min-height:176px; display:flex;flex-direction:column;align-items:flex-start;box-shadow:var(--sh); transition:transform .25s var(--ease),box-shadow .25s var(--ease);} .svc4 a:hover{transform:translateY(-4px);box-shadow:var(--sh-h);} .svc4 .ic{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.24); display:flex;align-items:center;justify-content:center;margin-bottom:14px;flex-shrink:0;} .svc4 .ic svg{width:24px;height:24px;stroke:#fff;} .svc4 h3{color:#fff;font-size:16.5px;margin-bottom:6px;line-height:1.25;} .svc4 p{color:rgba(255,255,255,.88);font-size:13.5px;line-height:1.5;} .svc4 .c1{background:linear-gradient(135deg,#B5852A 0%,#8F6418 100%);} .svc4 .c2{background:linear-gradient(135deg,#D9633F 0%,#BF4A2B 100%);} .svc4 .c3{background:linear-gradient(135deg,#3D63A6 0%,#2C4E86 100%);} .svc4 .c4{background:linear-gradient(135deg,#C0713A 0%,#A5501F 100%);} /* ---------- free services strip ---------- */ .free{background:var(--navy-ink);color:#fff;padding:0;} .free .wrap{display:grid;grid-template-columns:auto repeat(4,1fr);gap:0;align-items:stretch;} .free .lbl{padding:26px 26px 26px 0;display:flex;flex-direction:column;justify-content:center; border-right:1px solid rgba(255,255,255,.16);} .free .lbl b{font-family:var(--disp);font-weight:800;font-stretch:112%;font-size:19px;line-height:1.15;} .free .lbl span{font-size:13px;color:#A7B3D2;margin-top:4px;} .free .it{padding:26px 20px;border-right:1px solid rgba(255,255,255,.16);display:flex;gap:11px;align-items:flex-start;} .free .it:last-child{border-right:none;padding-right:0;} .free .it svg{width:17px;height:17px;flex-shrink:0;margin-top:3px;} .free .it span{font-size:14.5px;font-weight:600;line-height:1.42;} /* ---------- SIGNATURE: two hands ---------- */ .sig-sec{background:var(--surface);} .sig-g{display:grid;grid-template-columns:1fr auto 1fr;gap:40px;align-items:center;margin-top:20px;} .sig-col h3{font-size:20px;margin-bottom:14px;} .sig-col li{font-size:15.5px;line-height:1.55;color:var(--ink-2);padding:11px 0;border-top:1px solid var(--line-2);} .sig-col li:first-of-type{border-top:none;} .sig-col.r{text-align:right;} .hands{width:330px;height:300px;overflow:visible;} .h-adult{transform:translateX(-46px);opacity:.45;transition:transform 1.15s var(--ease),opacity .9s var(--ease);} .h-child{transform:translateX(46px);opacity:.45;transition:transform 1.15s var(--ease),opacity .9s var(--ease);} .h-heart{opacity:0;transform:scale(.3);transform-origin:center;transform-box:fill-box; transition:opacity .5s var(--ease) .95s,transform .6s cubic-bezier(.3,1.5,.5,1) .95s;} .sig-sec.go .h-adult,.sig-sec.go .h-child{transform:translateX(0);opacity:1;} .sig-sec.go .h-heart{opacity:1;transform:scale(1);} .sig-cap{text-align:center;font-size:13.5px;color:var(--ink-3);margin-top:16px;max-width:280px;} /* ---------- program index ---------- */ .pidx{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;} .prow{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;color:var(--ink); background:var(--surface);padding:34px 26px 28px;border:1px solid var(--line);border-radius:var(--r-lg); box-shadow:0 1px 3px rgba(43,31,18,.05),0 10px 22px -18px rgba(43,31,18,.3); transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s;} .prow::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:var(--pg);} .prow.c1{--pg:linear-gradient(90deg,#B5852A 0%,#8F6418 100%);} .prow.c2{--pg:linear-gradient(90deg,#D9633F 0%,#BF4A2B 100%);} .prow.c3{--pg:linear-gradient(90deg,#3D63A6 0%,#2C4E86 100%);} .prow.c4{--pg:linear-gradient(90deg,#C0713A 0%,#A5501F 100%);} .prow:hover{transform:translateY(-5px);box-shadow:var(--sh-h);border-color:var(--line-2);} .prow:active{transform:translateY(-2px) scale(.99);transition-duration:.1s;} .prow .pic{width:48px;height:48px;clip-path:polygon(25% 4%,75% 4%,100% 50%,75% 96%,25% 96%,0% 50%);background:var(--pg);margin-bottom:16px; display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 10px 18px -10px rgba(43,31,18,.45);} .prow .pic svg{width:22px;height:22px;stroke:#fff;} .prow h3{font-size:19px;margin-bottom:6px;color:var(--ink);} .prow .tag{font-family:var(--disp);font-size:12px;font-weight:700;letter-spacing:.12em; text-transform:uppercase;color:var(--red-text);display:block;margin-bottom:8px;} .prow p{font-size:15px;line-height:1.6;color:var(--ink-2);} .prow .who{margin-top:10px;font-size:13.5px;color:var(--ink-2);} .prow .who b{color:var(--ink);font-weight:700;} .prow .items{margin-top:12px;display:flex;flex-wrap:wrap;gap:7px;} .prow .items span{font-size:12.5px;font-weight:600;color:var(--ink-2);background:var(--wash); padding:5px 11px;border-radius:99px;} /* ---------- signals two-col ---------- */ .sig2{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;} .sgrp{padding:22px 0;border-top:1px solid var(--line);} .sgrp h3{font-size:17px;margin-bottom:10px;display:flex;align-items:center;gap:10px;} .sgrp h3 svg{width:18px;height:18px;flex-shrink:0;} .sgrp li{font-size:15px;line-height:1.55;color:var(--ink-2);padding-left:16px;position:relative;margin-bottom:6px;} .sgrp li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:var(--gold);} .callout{background:var(--navy-tint);border-left:3px solid var(--navy);padding:20px 24px; font-size:15px;line-height:1.62;color:var(--ink);border-radius:0 var(--r) var(--r) 0;} /* ---------- process (real sequence -> numbers justified) ---------- */ .proc{background:var(--navy-ink);color:#fff;} .proc-g{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start;} .proc h2{color:#fff;} .proc .lede{color:#AFBEE0;} .pstep{display:grid;grid-template-columns:44px 1fr;gap:20px;padding:20px 0; border-top:1px solid rgba(255,255,255,.17);} .pstep:last-child{border-bottom:1px solid rgba(255,255,255,.17);} .pstep .n{font-family:var(--disp);font-weight:800;font-stretch:112%;font-size:20px;color:#FF9F82;} .pstep h3{color:#fff;font-size:17.5px;margin-bottom:5px;} .pstep p{color:#A7B3D2;font-size:14.5px;line-height:1.6;} /* ---------- branches ---------- */ .br-g{display:grid;grid-template-columns:1fr 1fr;gap:26px;} .branch{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden; transition:transform .3s var(--ease),box-shadow .3s var(--ease);} .branch:hover{transform:translateY(-5px);box-shadow:var(--sh-h);} .branch .ph{aspect-ratio:16/9;overflow:hidden;background:var(--wash);} .branch .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease);} .branch:hover .ph img{transform:scale(1.06);} .branch .bb{padding:24px 26px 26px;} .branch h3{font-size:21px;margin-bottom:4px;} .branch .st{font-family:var(--disp);font-size:12px;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:var(--red-text);margin-bottom:14px;display:block;} .branch dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-size:14.5px;} .branch dt{color:var(--ink-3);} .branch dd{margin:0;color:var(--ink-2);font-weight:600;} .branch .acts{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap;} .branch .acts a{font-size:14px;font-weight:700;font-family:var(--disp);color:var(--navy); border:1.5px solid var(--line);padding:9px 15px;border-radius:var(--r);transition:border-color .18s,background .18s;} .branch .acts a:hover{border-color:var(--navy);background:var(--navy-tint);} .mapbox{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin-top:26px; box-shadow:0 2px 8px rgba(43,31,18,.05),0 26px 50px -30px rgba(43,31,18,.35);} .mapbox iframe{width:100%;height:340px;border:0;display:block;} /* click-to-load placeholder: avoids a third-party request to Google (and whatever cookies it sets) until the visitor actually asks to see the map */ .map-load{width:100%;height:340px;display:flex;flex-direction:column;align-items:center; justify-content:center;gap:6px;background:var(--wash);color:var(--navy);border:none; cursor:pointer;font-family:var(--body);transition:background .2s var(--ease);} .map-load:hover,.map-load:focus-visible{background:var(--navy-tint);} .map-load svg{width:30px;height:30px;stroke:var(--red-text);margin-bottom:2px;} .map-load span{font-family:var(--disp);font-weight:700;font-size:15px;} .map-load small{color:var(--ink-3);font-size:12.5px;} /* ---------- reviews ---------- */ .rev-g{display:grid;grid-template-columns:auto 1fr;gap:48px;align-items:center;} .score{text-align:center;padding-right:48px;border-right:1px solid var(--line);} .score .n{font-family:var(--disp);font-weight:800;font-stretch:112%;font-size:62px; line-height:1;color:var(--ink);} .score .stars{display:flex;gap:3px;justify-content:center;margin:10px 0 8px;} .score .stars svg{width:18px;height:18px;} .score .c{font-size:14px;color:var(--ink-3);} .rev-note{font-size:15.5px;line-height:1.66;color:var(--ink-2);} .rev-slots{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px;} .rslot{border:1px dashed var(--line);border-radius:var(--r);padding:20px;background:var(--surface);} .rslot .q{font-size:15px;line-height:1.6;color:var(--ink-3);font-style:italic;} .rslot .a{font-size:13.5px;color:var(--ink-3);margin-top:12px;} /* ---------- faq ---------- */ .faq{border-top:1.5px solid var(--navy-ink);} .faq details{border-bottom:1px solid var(--line);} .faq summary{list-style:none;cursor:pointer;padding:24px 50px 24px 0;position:relative; font-family:var(--disp);font-weight:700;font-stretch:110%;font-size:18px;line-height:1.4;transition:color .18s;} .faq summary::-webkit-details-marker{display:none;} .faq summary:hover{color:var(--red-text);} .faq summary::after{content:"";position:absolute;right:8px;top:31px;width:11px;height:2px;background:var(--gold);} .faq summary::before{content:"";position:absolute;right:12.5px;top:26px;width:2px;height:11px; background:var(--gold);transition:transform .25s var(--ease);} .faq details[open] summary::before{transform:scaleY(0);} .faq .ans{padding:0 60px 26px 0;font-size:16px;line-height:1.72;color:var(--ink-2);} .faq .ans p + p{margin-top:12px;} /* ---------- cta ---------- */ .cta{position:relative;overflow:hidden;background:var(--navy-fill);color:#fff;border-radius:var(--r-lg);padding:56px 50px; display:flex;justify-content:space-between;align-items:center;gap:36px;flex-wrap:wrap;} .cta::before{content:"";position:absolute;top:0;right:0;width:280px;height:280px; background:radial-gradient(circle,rgba(255,255,255,.1) 0%,transparent 68%); transform:translate(30%,-38%);pointer-events:none;} .cta::after{content:"";position:absolute;left:-40px;bottom:-70px;width:190px;height:190px;border-radius:50%; background:radial-gradient(circle,var(--red) 0%,transparent 70%);opacity:.35;pointer-events:none;} .cta>*{position:relative;z-index:1;} .cta h2{color:#fff;max-width:16ch;} .cta .rt{display:flex;flex-direction:column;gap:14px;align-items:flex-start;} .cta .inf{font-size:14.5px;color:#C0CCE8;line-height:1.62;} .cta .inf b{color:#fff;display:block;font-family:var(--disp);font-size:20px;font-weight:800;margin-bottom:3px;} /* homepage-only closing-band variant: deeper gradient + a second (WhatsApp) action. Scoped to its own modifier class rather than changing the shared .cta used on other pages' closing bands */ .cta.cta--gradient{background:linear-gradient(135deg,var(--navy-2) 0%,var(--navy-ink) 100%);} .cta-note{color:rgba(255,255,255,.82);font-size:15px;margin-top:10px;} .cta.cta--gradient .rt{gap:12px;} /* ---------- page head + breadcrumb ---------- */ .phd{position:relative;overflow:hidden;background:var(--navy-tint);border-bottom:1px solid var(--line); padding:calc(var(--header-h, 96px) + 26px) 30px 46px;} .phd::before{content:"";position:absolute;top:-60px;right:-60px;width:220px;height:220px;border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--red) 14%,transparent) 0%,color-mix(in srgb,var(--gold) 10%,transparent) 42%,transparent 72%);pointer-events:none;} .phd::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:30px;background:var(--paper); clip-path:polygon(0 100%,100% 42%,100% 100%);pointer-events:none;} .phd h1{color:var(--ink);font-size:clamp(30px,4.2vw,46px);max-width:19ch;} .phd p{color:var(--ink-2);margin-top:15px;max-width:56ch;font-size:17px;line-height:1.62;} .crumb{font-size:13.5px;color:var(--ink-3);margin-bottom:22px;} .crumb a{color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px;} .crumb a:hover{color:var(--red-text);text-decoration:underline;} .crumb span{margin:0 7px;color:var(--ink-3);} /* ---------- offset dual photo ---------- */ .dual-photo{position:relative;max-width:440px;margin:18px 0 34px 30px;} .dual-photo::after{content:"";position:absolute;right:-18px;top:-18px;width:62%;height:58%; background:var(--navy-tint);border-radius:var(--r-lg);z-index:0;} .dual-photo .main{position:relative;z-index:1;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-h);} .dual-photo .main img{width:100%;display:block;aspect-ratio:4/3;object-fit:cover;} .dual-photo .small{position:absolute;left:-30px;bottom:-30px;width:48%;z-index:2; border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-h);border:5px solid var(--surface);} .dual-photo .small img{width:100%;display:block;aspect-ratio:1/1;object-fit:cover;} /* ---------- gallery ---------- */ .gal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;} .gal-item{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line); background:var(--surface);box-shadow:var(--sh-h);margin:0;} .gal-item img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .5s var(--ease);} .gal-item:hover img{transform:scale(1.045);} .gal-item figcaption{padding:13px 16px 14px;font-size:14.5px;font-weight:600;color:var(--ink-2);} .gal-soon{margin-top:6px;border:1.5px dashed var(--line);border-radius:var(--r-lg); padding:34px 28px;text-align:center;color:var(--ink-3);font-size:15px;} /* ---------- forms ---------- */ .cgrid{display:grid;grid-template-columns:.88fr 1.12fr;gap:52px;} .cbox-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;} .cbox{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 22px 20px; display:flex;gap:15px;align-items:flex-start; transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s;} .cbox:hover{transform:translateY(-3px);box-shadow:var(--sh-h);border-color:var(--line-2);} .cbox:active{transform:translateY(-1px) scale(.99);transition-duration:.1s;} .cbox .ic{width:44px;height:44px;clip-path:polygon(25% 4%,75% 4%,100% 50%,75% 96%,25% 96%,0% 50%);flex-shrink:0;display:flex;align-items:center;justify-content:center; box-shadow:0 10px 18px -8px rgba(43,31,18,.4);} .cbox .ic svg{width:19px;height:19px;stroke:#fff;} .cbox.c1 .ic{background:linear-gradient(135deg,#B5852A 0%,#8F6418 100%);} .cbox.c2 .ic{background:linear-gradient(135deg,#D9633F 0%,#BF4A2B 100%);} .cbox.c3 .ic{background:linear-gradient(135deg,#3D63A6 0%,#2C4E86 100%);} .cbox.c4 .ic{background:linear-gradient(135deg,#C0713A 0%,#A5501F 100%);} .cbox .cb-body{min-width:0;} .cbox h3{font-family:var(--disp);font-size:12px;font-weight:700;letter-spacing:.1em; text-transform:uppercase;color:var(--ink-3);margin-bottom:6px;} .cbox p,.cbox a{font-size:15.5px;font-weight:600;line-height:1.5;} .cbox a:hover{color:var(--red-text);} .cbox.wide{grid-column:1 / -1;} /* bigger brand-colored social tiles, scoped to the contact-page card (.cbox .socrow) only - footer's .socrow/.soclink (small inline icon+label) stays as-is, it's a different context */ .cbox .socrow{display:flex;gap:14px;flex-wrap:wrap;margin-top:2px;} .cbox .soclink{flex:1 1 150px;display:flex;align-items:center;gap:12px;padding:14px 16px; border-radius:16px;color:#fff;text-decoration:none; box-shadow:0 14px 28px -16px rgba(0,0,0,.45);transition:transform .25s var(--ease);} .cbox .soclink:hover{transform:translateY(-3px);color:#fff;} .cbox .soclink.ig{background:linear-gradient(135deg,#F9A341 0%,#E1306C 55%,#5851DB 100%);} .cbox .soclink.wa{background:#25D366;} .cbox .soclink.fb{background:#1877F2;} .cbox .sl-ic{flex:none;width:34px;height:34px;display:flex;align-items:center;justify-content:center;} .cbox .sl-ic svg{width:22px;height:22px;} .cbox .sl-tx b{display:block;font-size:14px;font-weight:700;} .cbox .sl-tx small{display:block;font-size:11px;opacity:.9;font-weight:500;margin-top:1px;} @media (max-width:480px){.cbox .soclink{flex-basis:100%;}} /* ---------- two-panel contact layout ---------- */ .contact-panel{align-self:start;position:relative;overflow:hidden;border-radius:32px;padding:34px; background:linear-gradient(155deg,var(--navy-fill) 0%,var(--navy-ink) 100%);} .contact-panel::before{content:"";position:absolute;top:-90px;right:-70px;width:260px;height:260px;border-radius:50%; background:radial-gradient(circle,rgba(240,121,79,.38) 0%,transparent 70%);pointer-events:none;} .contact-panel::after{content:"";position:absolute;bottom:-100px;left:-80px;width:240px;height:240px;border-radius:50%; background:radial-gradient(circle,rgba(217,169,74,.28) 0%,transparent 70%);pointer-events:none;} .contact-panel .cbox-grid,.contact-panel .mapbox{position:relative;z-index:1;} .contact-panel .mapbox{margin-top:20px;border:4px solid rgba(255,255,255,.14);box-shadow:0 24px 50px -20px rgba(0,0,0,.5);} .contact-form-card{background:var(--surface);border-radius:32px;padding:42px 40px; box-shadow:0 2px 8px rgba(43,31,18,.05),0 30px 60px -30px rgba(43,31,18,.3);} @media (max-width:1230px){ .contact-panel{padding:28px;} .contact-form-card{padding:34px 28px;} } @media (max-width:560px){ .contact-panel{padding:22px;border-radius:24px;} .contact-form-card{padding:28px 22px;border-radius:24px;} } /* ---------- why-us numbered list ---------- */ .why-list{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:36px;} .why-item{position:relative;overflow:hidden;display:flex;gap:16px;align-items:flex-start; background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px 22px 22px; transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s;} .why-item::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;} .why-item:hover{transform:translateY(-5px);box-shadow:0 2px 8px rgba(43,31,18,.05),0 26px 46px -22px rgba(43,31,18,.34);border-color:var(--line-2);} .why-item .n{width:38px;height:38px;clip-path:polygon(25% 4%,75% 4%,100% 50%,75% 96%,25% 96%,0% 50%);flex-shrink:0;display:flex;align-items:center;justify-content:center; font-family:var(--disp);font-weight:800;font-stretch:115%;font-size:14px;color:#fff; box-shadow:0 10px 18px -8px rgba(43,31,18,.4);} .why-item.c1 .n{background:linear-gradient(135deg,#B5852A 0%,#8F6418 100%);} .why-item.c2 .n{background:linear-gradient(135deg,#D9633F 0%,#BF4A2B 100%);} .why-item.c3 .n{background:linear-gradient(135deg,#3D63A6 0%,#2C4E86 100%);} .why-item.c4 .n{background:linear-gradient(135deg,#C0713A 0%,#A5501F 100%);} .why-item.c1::before{background:linear-gradient(90deg,#B5852A 0%,#8F6418 100%);} .why-item.c2::before{background:linear-gradient(90deg,#D9633F 0%,#BF4A2B 100%);} .why-item.c3::before{background:linear-gradient(90deg,#3D63A6 0%,#2C4E86 100%);} .why-item.c4::before{background:linear-gradient(90deg,#C0713A 0%,#A5501F 100%);} .why-item h3{font-size:16px;margin-bottom:6px;} .why-item p{font-size:14.5px;color:var(--ink-2);line-height:1.55;} /* ---------- pull quote ---------- */ .pull-quote{max-width:760px;margin:0 auto;text-align:center;font-family:var(--disp);font-weight:700; font-stretch:112%;font-size:clamp(21px,2.5vw,28px);line-height:1.42;color:var(--navy);padding:0 20px;} .pull-quote::before{content:"";display:block;width:46px;height:3px;border-radius:2px;background:var(--gold);margin:0 auto 22px;} .field{margin-bottom:17px;} .field label{display:block;font-size:14px;font-weight:600;color:var(--ink-2);margin-bottom:7px;} .field input,.field textarea,.field select{width:100%;border:1.5px solid var(--line);border-radius:var(--r); padding:13px 15px;font-family:var(--body);font-size:16px;color:var(--ink);background:var(--surface); transition:border-color .18s,box-shadow .18s;} .field select{appearance:none;-webkit-appearance:none;padding-right:42px;cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F5648' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 14px center;background-size:17px;} :root[data-theme="dark"] .field select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23AFB8CC' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");} @media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .field select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23AFB8CC' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");}} .field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--navy); box-shadow:0 0 0 3px var(--navy-tint);} .field textarea{resize:vertical;min-height:112px;} .consent{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:var(--ink-2);line-height:1.55;margin-bottom:18px;} .consent input{width:18px;height:18px;flex-shrink:0;margin-top:2px;accent-color:var(--navy);} .consent a{color:var(--navy);text-decoration:underline;} .fnote{font-size:13.5px;color:var(--ink-3);margin-top:14px;line-height:1.55;} /* ---------- legal / thanks / 404 ---------- */ .legal{max-width:820px;} .legal h2{font-size:23px;margin:36px 0 12px;} .legal h2:first-child{margin-top:0;} .legal p,.legal li{font-size:16px;line-height:1.72;color:var(--ink-2);} .legal p + p{margin-top:12px;} .legal ul{margin-top:10px;} .legal li{padding-left:17px;position:relative;margin-bottom:7px;} .legal li::before{content:"";position:absolute;left:0;top:10px;width:5px;height:5px;border-radius:50%;background:var(--gold);} .center{text-align:center;max-width:620px;margin:0 auto;} .center .big{font-family:var(--disp);font-weight:800;font-stretch:112%;font-size:88px;color:var(--navy-tint);line-height:1;} .center h1{margin:14px 0 16px;} .center .acts{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:28px;} .okmark{width:66px;height:66px;border-radius:50%;background:var(--navy-tint);display:flex; align-items:center;justify-content:center;margin:0 auto 22px;} .okmark svg{width:30px;height:30px;} /* ---------- footer ---------- */ footer{background:var(--navy-ink);color:#9FADCE;padding:58px 30px 26px;} .fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.15fr;gap:42px;margin-bottom:40px;} .fbrand{display:flex;gap:11px;margin-bottom:15px;align-items:center;} .fbrand .b1{color:#fff;} .fbrand .b2{color:#F2AE99;} .fcol .fh{font-family:var(--disp);font-size:12px;font-weight:700;text-transform:uppercase; letter-spacing:.15em;color:#8FA3CE;margin-bottom:15px;} .fcol li{margin-bottom:9px;} .fcol a{font-size:15px;color:#B9C6E6;} .fcol a:hover{color:#fff;text-decoration:underline;} .fcol p{font-size:15px;color:#B9C6E6;line-height:1.66;} .socrow{display:flex;gap:16px;} .soclink{display:inline-flex;align-items:center;gap:7px;} .soclink svg{width:19px;height:19px;flex-shrink:0;transition:transform .2s var(--ease);} .soclink:hover svg{transform:scale(1.1);} .fbot{border-top:1px solid rgba(255,255,255,.13);padding-top:20px;display:flex; justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:13.5px;color:#8FA3CE;} .fbot a{color:#8FA3CE;} .fbot a:hover{color:#fff;} /* ---------- mobile sticky bar ---------- */ .mbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:120;background:var(--surface); border-top:1px solid var(--line);padding:9px 12px calc(9px + env(safe-area-inset-bottom));gap:9px;} .mbar a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px; font-family:var(--disp);font-weight:700;font-size:15px;padding:13px 8px;border-radius:var(--r);} .mbar .c{background:linear-gradient(135deg,#C24A2C 0%,#B8442A 100%);color:#fff;} .mbar .w{background:linear-gradient(135deg,var(--navy) 0%,#1B3868 100%);color:#fff;} .mbar svg{width:17px;height:17px;} /* ---------- scroll reveal ---------- */ .js .rv{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease);} .js .rv.in{opacity:1;transform:none;} .js .pidx.rv article,.js .svc4.rv a,.js .stats3.rv > div,.js .tagfind.rv a{ opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease);} .js .pidx.rv.in article,.js .svc4.rv.in a,.js .stats3.rv.in > div,.js .tagfind.rv.in a{opacity:1;transform:none;} .js .pidx.rv article:nth-child(2),.js .svc4.rv a:nth-child(2),.js .stats3.rv>div:nth-child(2){transition-delay:.06s;} .js .pidx.rv article:nth-child(3),.js .svc4.rv a:nth-child(3),.js .stats3.rv>div:nth-child(3){transition-delay:.12s;} .js .pidx.rv article:nth-child(4),.js .svc4.rv a:nth-child(4){transition-delay:.18s;} .js .pidx.rv article:nth-child(5){transition-delay:.24s;} .js .pidx.rv article:nth-child(6){transition-delay:.3s;} .js .pidx.rv article:nth-child(7){transition-delay:.36s;} .js .tagfind.rv a:nth-child(2){transition-delay:.04s;} .js .tagfind.rv a:nth-child(3){transition-delay:.08s;} .js .tagfind.rv a:nth-child(4){transition-delay:.12s;} .js .tagfind.rv a:nth-child(5){transition-delay:.16s;} .js .tagfind.rv a:nth-child(6){transition-delay:.2s;} .js .tagfind.rv a:nth-child(7){transition-delay:.24s;} .js .prg-cards.rv>a,.js .hl-row.rv>div{ opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .5s var(--ease);} .js .prg-cards.rv.in>a,.js .hl-row.rv.in>div{opacity:1;transform:none;} .js .prg-cards.rv>a:nth-child(2),.js .hl-row.rv>div:nth-child(2){transition-delay:.05s;} .js .prg-cards.rv>a:nth-child(3),.js .hl-row.rv>div:nth-child(3){transition-delay:.1s;} .js .prg-cards.rv>a:nth-child(4),.js .hl-row.rv>div:nth-child(4){transition-delay:.15s;} .js .prg-cards.rv>a:nth-child(5){transition-delay:.2s;} .js .prg-cards.rv>a:nth-child(6){transition-delay:.25s;} .js .prg-cards.rv>a:nth-child(7){transition-delay:.3s;} /* shared fade-up-on-scroll stagger for the hero chips, services bento and how-it-works steps - same .rv/IntersectionObserver mechanism already wired up in main.js (the brief's suggested data-reveal attribute would mean two parallel reveal systems sitewide - reusing this one instead, documented in TODO.md) */ .js .chip-list.rv>li,.js .sb-grid.rv>a,.js .how-steps.rv>div{ opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .5s var(--ease);} .js .chip-list.rv.in>li,.js .sb-grid.rv.in>a,.js .how-steps.rv.in>div{opacity:1;transform:none;} .js .chip-list.rv>li:nth-child(2),.js .sb-grid.rv>a:nth-child(2),.js .how-steps.rv>div:nth-child(2){transition-delay:80ms;} .js .chip-list.rv>li:nth-child(3),.js .sb-grid.rv>a:nth-child(3),.js .how-steps.rv>div:nth-child(3){transition-delay:160ms;} .js .chip-list.rv>li:nth-child(4),.js .sb-grid.rv>a:nth-child(4){transition-delay:240ms;} .js .sb-grid.rv>a:nth-child(5){transition-delay:320ms;} .js .sb-grid.rv>a:nth-child(6){transition-delay:400ms;} .js .sb-grid.rv>a:nth-child(7){transition-delay:480ms;} .js .sb-grid.rv>a:nth-child(8){transition-delay:560ms;} .js .sb-grid.rv>a:nth-child(9){transition-delay:640ms;} /* ---------- hero entrance ---------- */ @keyframes heroIn{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}} .js .hero .kicker,.js .hero h1,.js .hero .lede,.js .hero-cta,.js .hero-note,.js .hero .trust{ opacity:0;animation:heroIn .7s var(--ease) forwards;} .js .hero .kicker{animation-delay:.05s;} .js .hero h1{animation-delay:.15s;} .js .hero .lede{animation-delay:.28s;} .js .hero-cta{animation-delay:.4s;} .js .hero-note{animation-delay:.48s;} .js .hero .trust{animation-delay:.56s;} /* ---------- floating whatsapp ---------- */ .wa-float{position:fixed;right:22px;bottom:22px;width:58px;height:58px;border-radius:50%; background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center; box-shadow:0 12px 26px -8px rgba(37,211,102,.6);z-index:112; transition:transform .25s var(--ease),box-shadow .25s;} .wa-float:hover{transform:scale(1.08);box-shadow:0 16px 32px -8px rgba(37,211,102,.7);} .wa-float svg{width:29px;height:29px;} /* ---------- back to top ---------- */ .to-top{position:fixed;right:24px;bottom:92px;width:46px;height:46px;border-radius:50%; background:linear-gradient(135deg,var(--navy) 0%,#1B3868 100%);color:#fff;display:flex;align-items:center;justify-content:center; box-shadow:0 10px 24px -8px rgba(44,78,134,.5);opacity:0;visibility:hidden;transform:translateY(8px); transition:opacity .25s,transform .25s,visibility .25s,background .2s;z-index:110;} .to-top.show{opacity:1;visibility:visible;transform:none;} .to-top:hover{background:linear-gradient(135deg,#C24A2C 0%,#B8442A 100%);} .to-top svg{width:20px;height:20px;} @media (prefers-reduced-motion:reduce){ .js .rv{opacity:1;transform:none;transition:none;} .js .pidx.rv article,.js .svc4.rv a,.js .stats3.rv > div,.js .tagfind.rv a{opacity:1;transform:none;transition:none;} .js .hero .kicker,.js .hero h1,.js .hero .lede,.js .hero-cta,.js .hero-note,.js .hero .trust{ opacity:1;animation:none;} .h-adult,.h-child,.h-heart{transition:none;transform:none;opacity:1;} .to-top{transition:opacity .1s,visibility .1s;} html{scroll-behavior:auto;} } /* ikon hizalamaları */ .trust .big svg{width:16px;height:16px;flex-shrink:0;} .sig-col h3{display:flex;align-items:center;gap:9px;} .sig-col.r h3{justify-content:flex-end;} .sig-col h3 svg{width:18px;height:18px;flex-shrink:0;} .cbox h3{display:flex;align-items:center;gap:8px;} .cbox h3 svg{width:14px;height:14px;flex-shrink:0;} .branch dl{grid-template-columns:22px 1fr;align-items:start;} .branch dt{display:flex;align-items:center;padding-top:2px;} .branch dt svg{width:16px;height:16px;} .fcol .fh{display:flex;align-items:center;gap:8px;} .free .lbl b{display:flex;align-items:center;gap:9px;} /* ---------- responsive ---------- */ @media (max-width:1400px){ .nav-num-tx{display:none;} .nav-num{gap:0;} } @media (max-width:1230px){ .topbar{display:none;} .nav-act{gap:10px;} .nav-num,.nav-divider{display:none;} /* found via full-site button audit: below here, .nav-act's one remaining child (.btn-nav, "Randevu Al"/"Book Appointment") doesn't fit alongside the logo, EN/TR and theme toggles, and the hamburger - it was pushing #ntg off-screen (worse in English, where the button text is longer), making the mobile menu unclickable. */ .btn-nav{padding:10px 16px;font-size:13.5px;} .navlinks{position:fixed;top:var(--header-h, 88px);left:0;right:0;background:var(--surface);flex-direction:column; align-items:stretch;padding:14px 22px 22px;border-bottom:1px solid var(--line);gap:7px; box-shadow:0 20px 30px -18px rgba(0,0,0,.3); transform:translateY(-165%);transition:transform .3s var(--ease);} .navlinks.open{transform:translateY(0);} .navlinks a{font-size:16px;padding:13px 16px;border-radius:var(--r);color:var(--ink-2); background:transparent;border-color:transparent;border-bottom:1px solid var(--line);} .navlinks a::after{display:none;} .navlinks a:hover{color:var(--navy);background:var(--navy-tint);border-color:transparent;} .navlinks a:last-child{border-bottom:none;} .navlinks a.active{color:#fff;background:var(--red);border-color:var(--red);} .navlinks a.active:hover{color:#fff;background:var(--red);border-color:var(--red);} .nav-phone-mobile{display:flex;align-items:center;gap:10px;margin-top:4px;font-weight:700; color:var(--red-text);border-bottom:none;} .nav-phone-mobile svg{width:18px;height:18px;flex-shrink:0;} .ntg{display:block;} .cgrid,.proc-g,.br-g,.sig2{grid-template-columns:1fr;gap:36px;} .hero-in{padding:90px 20px 34px;} .sig-g{grid-template-columns:1fr;gap:26px;justify-items:center;} .sig-col.r{text-align:left;} .sig-col{width:100%;} .svc4{grid-template-columns:1fr 1fr;} .rev-g{grid-template-columns:1fr;gap:30px;} .score{padding-right:0;border-right:none;border-bottom:1px solid var(--line);padding-bottom:26px;} .rev-slots{grid-template-columns:1fr;} .pidx{grid-template-columns:repeat(2,1fr);} .prow{padding:24px 22px;} .fgrid{grid-template-columns:1fr 1fr;} .mbar{display:flex;} body{padding-bottom:calc(72px + env(safe-area-inset-bottom));} .to-top{bottom:88px;right:16px;width:42px;height:42px;} .wa-float{display:none;} } @media (max-width:560px){ .wrap{padding:0 18px;} section{padding:56px 18px;} .hero-in{padding:70px 18px 28px;} .nav{padding:9px 18px;} .phd{padding:calc(var(--header-h, 84px) + 18px) 18px 40px;} .nav-act{display:none;} .svc4{grid-template-columns:1fr;} .cbox-grid{grid-template-columns:1fr;} .why-list{grid-template-columns:1fr;gap:24px;} .trust{flex-direction:column;} .trust div{width:100%;border-right:none;margin-right:0;padding:13px 0; border-top:1px solid rgba(255,255,255,.16);} .trust div:first-child{border-top:none;padding-top:16px;} .cta{padding:40px 26px;} .fgrid{grid-template-columns:1fr;gap:26px;} .faq summary{font-size:17px;padding-right:44px;} .faq .ans{padding-right:10px;} .sig-g{gap:14px;} .sig-col h3{margin-bottom:8px;} .sig-col li{padding:8px 0;} .hands{width:210px;height:190px;} .sig-cap{margin-top:6px;} .center .big{font-size:64px;} .branch .acts{gap:8px;} .branch .acts a{padding:8px 11px;font-size:13px;} .pidx{grid-template-columns:1fr;} } @media (max-width:640px){ .bt{display:none;} } /* ================================================ LawX-style minimal homepage (calm/elegant variant) ================================================ */ .lx-hero{padding:72px 0 100px;background:var(--paper);overflow:hidden;} .lx-hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center;} .lx-hero h1{font-size:clamp(38px,4.4vw,56px);line-height:1.12;letter-spacing:-.02em;margin:18px 0 22px;max-width:15ch;} .lx-hero h1 .r{color:var(--red-text);} .lx-hero .lede{font-size:17.5px;line-height:1.72;color:var(--ink-2);max-width:46ch;margin-bottom:32px;} .lx-hero-cta{display:flex;gap:14px;flex-wrap:wrap;} .lx-hero-visual{position:relative;} .lx-hero-visual .frame{border-radius:26px;overflow:hidden;aspect-ratio:1/1.05;box-shadow:0 40px 80px -36px rgba(43,31,18,.32);} .lx-hero-visual .frame img{width:100%;height:100%;object-fit:cover;} .lx-hero-badge{position:absolute;left:-28px;bottom:36px;background:var(--surface);border-radius:16px; padding:18px 22px;box-shadow:0 20px 40px -18px rgba(43,31,18,.3);display:flex;align-items:center;gap:14px; border:1px solid var(--line);} .lx-hero-badge .n{font-family:var(--disp);font-weight:800;font-stretch:115%;font-size:26px;color:var(--navy);line-height:1;flex-shrink:0;} .lx-hero-badge .t{font-size:12.5px;color:var(--ink-3);max-width:15ch;line-height:1.35;} .lx-stats{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);} .lx-stats .row{display:grid;grid-template-columns:repeat(4,1fr);max-width:1480px;margin:0 auto;padding:0 30px;} .lx-stats .item{text-align:center;padding:42px 20px;border-right:1px solid var(--line);} .lx-stats .item:last-child{border-right:none;} .lx-stats .n{font-family:var(--disp);font-weight:800;font-stretch:115%;font-size:clamp(26px,2.8vw,36px);color:var(--navy);line-height:1;} .lx-stats .t{margin-top:9px;font-size:13px;color:var(--ink-3);letter-spacing:.01em;line-height:1.4;} /* ---------- top-of-page highlights ---------- */ .how-sec+.highlights{margin-top:-40px;border-radius:36px 36px 0 0;z-index:3;} .highlights{position:relative;overflow:hidden;padding:88px 0 104px;background:var(--paper);} .highlights::before{content:"";position:absolute;top:-120px;right:-100px;width:420px;height:420px;border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--gold) 20%,transparent) 0%,transparent 70%);pointer-events:none;} .highlights::after{content:"";position:absolute;bottom:-140px;left:-110px;width:400px;height:400px;border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--red) 14%,transparent) 0%,transparent 70%);pointer-events:none;} .highlights .head{max-width:600px;margin:0 auto 8px;text-align:center;position:relative;z-index:1;} .highlights .head .kicker{justify-content:center;} .hl-confetti{position:absolute;inset:0;z-index:0;pointer-events:none;} .hl-confetti span{position:absolute;display:block;} .hl-confetti .dot{width:11px;height:11px;border-radius:50%;} .hl-confetti .dash{width:26px;height:8px;border-radius:5px;} .hl-confetti .d1{top:8%;left:6%;background:var(--gold);transform:rotate(-14deg);} .hl-confetti .d2{top:18%;left:47%;background:var(--red);} .hl-confetti .d3{top:12%;right:9%;background:#3D63A6;transform:rotate(20deg);} .hl-confetti .d4{bottom:14%;left:16%;background:#C0713A;transform:rotate(-24deg);} .hl-confetti .d5{bottom:20%;right:18%;background:var(--gold);} .hl-confetti .d6{bottom:8%;right:44%;background:var(--red);transform:rotate(16deg);} .hl-row{position:relative;z-index:1;display:flex;justify-content:center;flex-wrap:wrap;gap:24px 40px;max-width:1200px;margin:52px auto 0;} .hl-item{display:flex;flex-direction:column;align-items:center;text-align:center;width:184px;} .hl-badge{position:relative;width:158px;height:158px;} .hl-badge .blob{position:absolute;left:-12px;bottom:-12px;width:66%;height:66%;border-radius:50%;z-index:0;} .hl-badge .circle{position:relative;z-index:1;width:100%;height:100%; clip-path:polygon(25% 4%,75% 4%,100% 50%,75% 96%,25% 96%,0% 50%);overflow:hidden; display:flex;flex-direction:column;align-items:center;justify-content:center; box-shadow:0 20px 40px -18px rgba(43,31,18,.4);} .hl-badge .circle img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} .hl-badge .circle svg{width:38px;height:38px;stroke:#fff;position:relative;z-index:1;} .hl-badge .circle .num{position:relative;z-index:1;font-family:var(--disp);font-weight:800;font-stretch:115%; color:#fff;font-size:40px;line-height:1;} .hl-badge .circle .cap{position:relative;z-index:1;color:#fff;font-size:11px;font-weight:700; letter-spacing:.05em;text-transform:uppercase;margin-top:6px;opacity:.92;} .hl-badge.c1 .circle{background:linear-gradient(150deg,#B5852A 0%,#8F6418 100%);} .hl-badge.c1 .blob{background:#D9633F;} .hl-badge.c2 .blob{background:#B5852A;} .hl-badge.c3 .circle{background:linear-gradient(150deg,#D9633F 0%,#BF4A2B 100%);} .hl-badge.c3 .blob{background:#3D63A6;} .hl-badge.c4 .circle{background:linear-gradient(150deg,#3D63A6 0%,#2C4E86 100%);} .hl-badge.c4 .blob{background:#C0713A;} .hl-item h3{margin-top:22px;font-size:16px;line-height:1.32;max-width:19ch;} @media (max-width:900px){ .hl-row{gap:28px 22px;} .hl-item{width:130px;} .hl-badge{width:112px;height:112px;} .hl-badge .circle .num{font-size:28px;} .hl-badge .circle svg{width:28px;height:28px;} .hl-item h3{font-size:14px;margin-top:16px;} .hl-confetti{display:none;} } @media (max-width:560px){ .highlights{padding:64px 0 76px;} .hl-row{gap:22px 16px;margin-top:38px;} } /* ---------- highlights v3: full-width photo panel with an overlaid fact bar (TR homepage only) ---------- .hl-badge/.hl-row/.hl-confetti above are kept as-is: en/index.html still uses that markup. To revert: restore index.html's .highlights markup (git checkout) and delete this block; nothing above needs to change either way. Deliberately NOT backdrop-filter glass (see ANTI-PATTERNS.md #6: that treatment is reserved for the hero) - this is a plain solid-gradient scrim instead, the same device the hero already uses on its own photo, just not frosted. */ .highlights.hl-v2{padding:56px 0 72px;} .highlights .hl-feature{position:relative;z-index:1;max-width:1420px;margin:36px auto 0;} .hl-feature-photo{position:relative;border-radius:20px;overflow:hidden;} .hl-feature-photo picture,.hl-feature-photo img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:16/7;} .hl-feature-bar{position:absolute;left:0;right:0;bottom:0;z-index:1;display:flex; background:linear-gradient(0deg,rgba(18,32,58,.94) 0%,rgba(18,32,58,.86) 55%,rgba(18,32,58,0) 100%); padding:34px 8px 26px;} .hl-stat{flex:1;min-width:0;text-align:center;padding:0 16px;border-left:1px solid rgba(255,255,255,.22); display:flex;flex-direction:column;align-items:center;gap:7px;} .hl-stat:first-child{border-left:none;} .hl-stat .n{font-family:var(--disp);font-weight:800;font-stretch:115%;color:#fff; font-size:clamp(22px,2.3vw,36px);line-height:1;white-space:nowrap;} .hl-stat .n.i{display:flex;align-items:center;justify-content:center;} .hl-stat .n.i svg{width:clamp(24px,2.1vw,32px);height:clamp(24px,2.1vw,32px);stroke:#F2AE99;stroke-width:2.3;} .hl-stat .t{font-size:12.5px;font-weight:600;color:rgba(255,255,255,.88);line-height:1.3;max-width:15ch;} @media (max-width:900px){ .highlights .hl-feature{margin-top:28px;} .hl-feature-photo picture,.hl-feature-photo img{aspect-ratio:4/3.4;} .hl-feature-bar{flex-wrap:wrap;padding:20px 6px 16px;} .hl-stat{flex:1 1 50%;padding:12px 10px;border-left:none;border-top:1px solid rgba(255,255,255,.22);} .hl-stat:nth-child(odd){border-left:none;} .hl-stat:nth-child(1),.hl-stat:nth-child(2){border-top:none;} } @media (max-width:560px){ .hl-stat .t{font-size:11.5px;} } .lx-about{padding:136px 0;background:var(--paper);} .lx-about .grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:84px;align-items:center;} .lx-about-imgs{position:relative;padding:22px 44px 40px 6px;} .lx-about-imgs .b{width:100%;aspect-ratio:4/3.3;object-fit:cover;display:block;border-radius:22px; box-shadow:0 2px 8px rgba(43,31,18,.05),0 34px 60px -26px rgba(43,31,18,.4);} .lx-about-imgs .accent{position:absolute;right:0;bottom:0;width:46%;aspect-ratio:3/4;object-fit:cover; display:block;border-radius:16px;border:6px solid var(--surface);box-shadow:0 20px 40px -16px rgba(43,31,18,.42);} .ab-badge{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;justify-content:center; width:104px;height:104px;clip-path:polygon(25% 4%,75% 4%,100% 50%,75% 96%,25% 96%,0% 50%);color:#fff;text-align:center; background:linear-gradient(135deg,#C0713A 0%,#A5501F 100%);box-shadow:0 16px 32px -12px rgba(43,31,18,.48);} .ab-badge b{font-family:var(--disp);font-weight:800;font-stretch:115%;font-size:25px;line-height:1;} .ab-badge span{font-size:12px;letter-spacing:.02em;line-height:1.25;margin-top:4px;max-width:70px;} .lx-about ul{margin-top:24px;display:flex;flex-direction:column;gap:15px;} .lx-about li{display:flex;gap:13px;align-items:flex-start;font-size:15px;color:var(--ink-2);line-height:1.55;} .lx-about li svg{width:19px;height:19px;stroke:var(--navy);flex-shrink:0;margin-top:2px;} .lx-faq{padding:136px 0;background:var(--wash);} .lx-faq .grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;} .lx-faq-side{align-self:start;} .lx-faq-side .lede{margin-top:16px;margin-bottom:28px;} .lx-steps{display:flex;flex-direction:column;gap:0;} .lx-steps .st{display:flex;gap:14px;padding:16px 0;border-top:1px solid var(--line);} .lx-steps .st:last-child{padding-bottom:0;} .lx-steps .st b{font-family:var(--disp);font-weight:800;font-stretch:115%;color:var(--red-text);font-size:14px;flex-shrink:0;} .lx-steps .st span{font-size:14.5px;color:var(--ink-2);line-height:1.5;} @media (max-width:1230px){ .lx-hero .wrap{grid-template-columns:1fr;gap:40px;} .lx-hero-visual{order:-1;max-width:420px;margin:0 auto;} .lx-stats .row{grid-template-columns:repeat(2,1fr);} .lx-stats .item:nth-child(2){border-right:none;} section{padding:88px 30px;} .lx-about,.lx-faq{padding:92px 0;} .lx-reviews{padding:0 0 92px;} .lx-reviews--hero-lead{padding-top:70px;} .lx-about .grid{grid-template-columns:1fr;gap:56px;} .lx-about-imgs{max-width:440px;margin:0 auto;padding:20px 34px 32px 0;} .lx-faq .grid{grid-template-columns:1fr;gap:36px;} } @media (max-width:560px){ section{padding:56px 18px;} .lx-reviews{padding:0 0 70px;} .lx-reviews--hero-lead{padding-top:56px;} .lx-stats .row{grid-template-columns:1fr 1fr;} .lx-about-imgs{padding:16px 26px 26px 0;} .ab-badge{width:82px;height:82px;} .ab-badge b{font-size:19px;} .ab-badge span{font-size:11px;max-width:60px;} .lx-hero-badge{left:10px;bottom:16px;padding:14px 16px;} .lx-hero{padding:56px 0 70px;} .lx-about,.lx-faq{padding:70px 0;} } /* ---------- hero v3: one full-bleed photo, two-column layout (copy+dock left, glass trust chips right) instead of a separate card band below - the chips now live ON the photo ---------- */ .hero2{position:relative;background:#122B4B;overflow:hidden;padding:0;display:flex;flex-direction:column;min-height:92vh;min-height:92dvh;} .hero2>picture{position:absolute;inset:0;z-index:0;} .hero2>picture>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 58%;} .hero2-photo{position:relative;flex:1 0 auto;min-height:480px;display:flex;align-items:center;} /* two combined layers: a left-to-right navy fade (left strong / right still has enough tint for the glass chips sitting there to read clearly) plus a bottom-up fade so the next band's rounded top overlap doesn't land on a bright, uncovered patch of sky/building */ .hero2-photo::after{content:"";position:absolute;inset:0; background: linear-gradient(100deg,rgba(18,32,58,.97) 0%,rgba(18,32,58,.9) 30%,rgba(18,32,58,.55) 55%,rgba(18,32,58,.16) 75%,rgba(18,32,58,.14) 100%), linear-gradient(0deg,rgba(18,32,58,.55) 0%,rgba(18,32,58,0) 34%);} .hero2-in{position:relative;z-index:1;max-width:1480px;margin:0 auto;width:100%; padding:calc(var(--header-h, 96px) + 16px) 30px 64px; display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:clamp(24px,4vw,64px);align-items:center;} /* TR homepage only (hero v4): single-column, extra bottom clearance for the .hero2-stats bar docked at the photo's bottom edge. en/index.html keeps the two-column .hero2-in above. */ .hero2-in--single{display:block;padding-bottom:150px;} .hero2-text{position:relative;max-width:580px;} .hero2 .kicker{color:#fff;margin-bottom:8px;} .hero2 .kicker::before{background:var(--gold);} .hero2 .kicker::after{content:"";display:block;width:20px;height:2px;background:var(--gold);flex-shrink:0;} .hero2 h1{color:#fff;font-size:clamp(30px,3.6vw,44px);line-height:1.14;letter-spacing:-.02em;margin:8px 0 16px;max-width:17ch;} /* fixed light coral, not var(--red-text): that token darkens for light backgrounds, which would nearly disappear against the navy scrim - same fixed-value pattern as .hero h1 .r / .kicker.on-dark elsewhere */ .hero2 h1 .r{color:#F2AE99;} .hero2 .lede{color:rgba(255,255,255,.86);font-size:15.5px;line-height:1.7;max-width:60ch;margin-bottom:24px;} .hero2 .lx-hero-cta{justify-content:flex-start;flex-wrap:wrap;} .hero2-note{display:flex;gap:7px;margin:18px 0 0;max-width:46ch;font-size:12px;line-height:1.5;color:rgba(255,255,255,.68);} .hero2-note svg{flex-shrink:0;width:14px;height:14px;margin-top:1px;stroke:rgba(255,255,255,.55);} /* hero v6: large circular photo badges, provided as finished graphics by the owner (text baked into each image - TR and EN both have their own image set now). A plain 2x2 grid with a small vertical offset on 2 of the 4, not absolute-positioned overlap: the earlier heavily-overlapping version clipped text on narrower columns, this can't. */ .hero2-cluster{position:relative;width:100%;max-width:560px;margin:0 auto; display:grid;grid-template-columns:1fr 1fr;gap:26px;justify-self:center;} .hc-item{border-radius:50%;overflow:hidden;aspect-ratio:1/1;width:100%;align-self:start; box-shadow:0 20px 46px -16px rgba(0,0,0,.55);border:3px solid rgba(255,255,255,.2);} .hc-item img{display:block;width:100%;height:100%;object-fit:cover;} .hc-2{margin-top:34px;} .hc-3{margin-top:-18px;} @media (max-width:1024px){ .hero2-cluster{max-width:420px;margin-top:8px;gap:20px;} .hc-2{margin-top:26px;} .hc-3{margin-top:-14px;} } @media (max-width:560px){ .hero2-cluster{max-width:320px;gap:16px;} .hc-2{margin-top:20px;} .hc-3{margin-top:-10px;} } /* frosted-glass secondary buttons (WhatsApp / phone) - distinct from the solid-outline .b-out-l, for the dock's two lower-emphasis actions next to the one coral primary */ .b-glass{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.32);color:#fff; -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);} .b-glass:hover{background:rgba(255,255,255,.24);transform:translateY(-2px);} @supports not (backdrop-filter:blur(1px)){.b-glass{background:rgba(22,41,75,.78);}} /* solid WhatsApp-brand-green action, same #25D366 already used by the floating WhatsApp button */ .b-whatsapp{background:#25D366;border:1px solid #25D366;color:#fff;} .b-whatsapp:hover{background:#20BD5C;border-color:#20BD5C;transform:translateY(-2px);} .hero-soc{display:flex;align-items:center;gap:12px;margin-top:20px;} .hero-soc-label{font-size:13px;font-weight:600;color:rgba(255,255,255,.68);} .hero-soc-ic{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:42px;height:42px; border-radius:50%;box-shadow:0 10px 22px -11px rgba(0,0,0,.6);transition:transform .22s var(--ease),box-shadow .22s;} .hero-soc-ic svg{width:20px;height:20px;} .hero-soc-ic:hover{transform:translateY(-2px) scale(1.06);} .hero-soc-ic.ig{background:linear-gradient(135deg,#F9A341 0%,#E1306C 55%,#5851DB 100%);} .hero-soc-ic.fb{background:#1877F2;} .hero2-quietlink{display:flex;align-items:center;justify-content:center;gap:9px;width:100%; margin-top:24px;font-size:16px;font-weight:700; color:rgba(255,255,255,.88);text-decoration:none;transition:color .2s,gap .2s;} .hero2-quietlink:hover{color:#fff;gap:12px;} .hero2-quietlink svg{width:16px;height:16px;} /* hero v5 (TR homepage only): the 4 trust facts as circular badges docked at the photo's bottom edge - en/index.html still uses the old .hero2-chips card-stack markup/CSS below, kept as-is for it. Fixed navy/white colors (not theme vars): always on the fixed-color photo scrim regardless of site light/dark theme. */ .hero2-stats{position:absolute;left:0;right:0;bottom:30px;z-index:1; background:linear-gradient(0deg,rgba(18,32,58,.65) 0%,rgba(18,32,58,.28) 65%,rgba(18,32,58,0) 100%); padding:18px 0 12px;} .hero2-stats-in{max-width:1480px;margin:0 auto;padding:0 30px;display:flex;justify-content:space-between;gap:14px;} .hero2-stat{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;} .hero2-stat-circle{flex:none;width:64px;height:64px;border-radius:50%; display:flex;align-items:center;justify-content:center; box-shadow:0 12px 24px -8px rgba(6,12,26,.6),inset 0 1px 0 rgba(255,255,255,.25);} .hero2-stat-circle.c1{background:linear-gradient(150deg,#C79A3D 0%,#8F6418 100%);} .hero2-stat-circle.c2{background:linear-gradient(150deg,#3D63A6 0%,#223E72 100%);} .hero2-stat-circle.c3{background:linear-gradient(150deg,#E07A52 0%,#BF4A2B 100%);} .hero2-stat-circle.c4{background:linear-gradient(150deg,#2C4E86 0%,#16294D 100%);} .hero2-stat-num{font-family:var(--disp);font-weight:800;font-stretch:115%;color:#fff;font-size:16px;} .hero2-stat-ic{display:flex;align-items:center;justify-content:center;} .hero2-stat-ic svg{width:25px;height:25px;stroke:#fff;} .hero2-stat strong{display:block;font-family:var(--disp);font-weight:700;font-size:13.5px;color:#fff; line-height:1.25;text-shadow:0 2px 6px rgba(0,0,0,.5);} .hero2-stat small{display:block;margin-top:2px;font-size:11px;line-height:1.3;color:rgba(255,255,255,.88); text-shadow:0 1px 5px rgba(0,0,0,.55);} .hero2-stats-note{display:flex;gap:7px;max-width:1480px;margin:10px auto 0;padding:0 30px; font-size:12px;line-height:1.5;color:rgba(255,255,255,.68);} .hero2-stats-note svg{flex-shrink:0;width:14px;height:14px;margin-top:1px;stroke:rgba(255,255,255,.55);} /* solid trust cards floating on the hero photo (fixed colors, not theme vars: this card is always white regardless of site light/dark theme, same reasoning as the hero's other fixed-color text - see .hero2 h1 .r above) - EN homepage only, see note above */ .hero2-chips{position:relative;} .chip-list{list-style:none;margin:0;padding:0;display:grid;gap:14px;} .chip{display:flex;align-items:center;gap:14px;padding:16px 20px;border-radius:22px; background:#fff;border:1px solid rgba(17,24,39,.06); box-shadow:0 18px 36px -16px rgba(8,14,28,.38); transition:transform .3s var(--ease),box-shadow .3s var(--ease);} .chip:hover{transform:translateX(-6px);box-shadow:0 24px 46px -16px rgba(8,14,28,.46);} .chip:nth-child(even){margin-right:28px;} .chip-ic{flex:none;width:46px;height:46px;border-radius:50%;background:#EDF1FA; display:flex;align-items:center;justify-content:center;} .chip-ic svg{width:21px;height:21px;stroke:#2C4E86;} .chip strong{display:block;font-family:var(--disp);font-weight:700;font-size:18px;line-height:1.2;color:#16294D;} .chip small{display:block;margin-top:3px;font-size:13.5px;line-height:1.4;color:#5B6478;} .chip-note{display:flex;gap:7px;margin:14px 2px 0;font-size:12px;line-height:1.5;color:rgba(255,255,255,.72);} .chip-note svg{flex-shrink:0;width:14px;height:14px;margin-top:1px;stroke:rgba(255,255,255,.6);} @media (prefers-reduced-motion: reduce){.chip{transition:none;}.chip:hover{transform:none;}} @keyframes hero2In{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}} .js .hero2 .kicker,.js .hero2 h1,.js .hero2 .lede,.js .hero2 .lx-hero-cta,.js .hero2-quietlink{ opacity:0;animation:hero2In .7s var(--ease) forwards;} .js .hero2 .kicker{animation-delay:.12s;} .js .hero2 h1{animation-delay:.22s;} .js .hero2 .lede{animation-delay:.34s;} .js .hero2 .lx-hero-cta{animation-delay:.46s;} .js .hero2-quietlink{animation-delay:.54s;} @media (prefers-reduced-motion: reduce){ .js .hero2 .kicker,.js .hero2 h1,.js .hero2 .lede,.js .hero2 .lx-hero-cta,.js .hero2-quietlink{animation:none;opacity:1;} } /* chip stagger uses the shared .rv reveal system (see "scroll reveal" below) rather than a second parallel animation mechanism - nth-child delays added there */ @media (max-width:1024px){ .hero2-in{grid-template-columns:1fr;} .hero2-chips{margin-top:8px;} .chip-list{grid-template-columns:repeat(2,1fr);} .chip{flex-direction:column;align-items:flex-start;gap:10px;} .chip:nth-child(even){margin-right:0;} /* the stats bar can't rely on absolute-positioning + padding-bottom guesswork once .hero2{min-height:auto} lets content set the hero's height (see mobile query below) - put it back in normal flow so it always lands below the text, never over it */ .hero2-in--single{padding-bottom:32px;} .hero2-photo{flex-direction:column;align-items:stretch;} .hero2-stats{position:static;background:rgba(18,32,58,.96);padding:24px 0 18px;} .hero2-stats-in{flex-wrap:wrap;row-gap:20px;} .hero2-stat{flex:1 1 50%;} } @media (max-width:640px){ .hero2{min-height:auto;} .hero2-in{padding-bottom:40px;} .hero2 .lx-hero-cta{flex-direction:column;align-items:stretch;} .hero2 .lx-hero-cta .btn{justify-content:center;} .hero2-stat-circle{width:54px;height:54px;} .hero2-stat-ic svg{width:21px;height:21px;} .hero2-stat-num{font-size:14px;} .hero2-stat strong{font-size:12.5px;} .hero2-stat small{font-size:10.5px;} .chip-list{gap:10px;} .chip{padding:12px 14px;border-radius:16px;} .chip-ic{width:38px;height:38px;} .chip-ic svg{width:18px;height:18px;} .chip strong{font-size:14.5px;} .chip small{display:none;} } /* ---------- Hizmetlerimiz: bento grid (1 big + 8 small) + CTA band ---------- distinct tinted background (not the page's default --paper) + a stronger heading so this section visually "stands out" when scrolling past the trust cards, per the client's own explicit ask that services be more prominent on the homepage */ /* rounds up and overlaps the hero's bottom edge by 40px so there's no bare strip of page background between the photo and this section, regardless of viewport height. Two selectors because TR's homepage now shows reviews right above Hizmetlerimiz (so .lx-reviews--hero-lead is hero2's next sibling there) while en/index.html still has .svc-bento directly after the hero, unchanged - see index.html section order. */ .hero2+.svc-bento,.hero2+.lx-reviews--hero-lead{margin-top:-40px;border-radius:36px 36px 0 0;position:relative;z-index:2;} .svc-bento{padding:72px 0 96px;background:var(--navy-tint);} .svc-bento .wrap,.how-sec .wrap,.test-sec .wrap{max-width:1200px;} .sb-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px; max-width:760px;margin:0 auto 48px;} .sb-head .kicker{margin-bottom:0;font-size:13px;letter-spacing:.24em;justify-content:center;} .sb-head .h2{font-size:clamp(34px,4.6vw,56px);} .sb-head .lede{max-width:52ch;} .sb-all{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14.5px;color:var(--navy); white-space:nowrap;flex-shrink:0;text-decoration:none;transition:gap .2s var(--ease),color .2s;} .sb-all svg{width:16px;height:16px;transition:transform .2s var(--ease);} .sb-all:hover{color:var(--red-text);gap:11px;} .sb-all:hover svg{transform:translateX(2px);} .sb-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:172px;grid-auto-flow:dense;gap:26px;} .sb-big{grid-column:span 2;grid-row:span 2;position:relative;overflow:hidden;border-radius:22px; text-decoration:none;display:flex;align-items:flex-end;box-shadow:var(--sh-h); transition:transform .3s var(--ease),box-shadow .3s var(--ease);} .sb-big picture,.sb-big img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;} .sb-big::after{content:"";position:absolute;inset:0; background:linear-gradient(0deg,rgba(10,16,30,.9) 0%,rgba(10,16,30,.5) 45%,rgba(10,16,30,.06) 75%);} .sb-big:hover{transform:translateY(-4px);box-shadow:0 10px 20px rgba(0,0,0,.14),0 40px 64px -22px rgba(0,0,0,.4);} @media (prefers-reduced-motion: reduce){.sb-big,.sb-item{transition:none;}.sb-big:hover,.sb-item:hover{transform:none;}} /* fixed (non-theme-reactive) red: var(--red) turns lighter in dark mode for use as foreground text/icons on dark surfaces, which drops white-on-badge contrast to 2.6:1 - this badge is always a small solid-colour chip regardless of theme, so it needs its own stable dark red */ .sb-badge{position:absolute;z-index:1;top:18px;left:18px;background:#B8442A;color:#fff; font-size:12px;font-weight:700;padding:6px 12px;border-radius:999px;letter-spacing:.01em;} .sb-big-body{position:relative;z-index:1;padding:22px 24px 24px;color:#fff;} .sb-big-body h3{font-size:22px;font-weight:800;margin:0 0 8px;letter-spacing:-.01em;} .sb-big-body p{font-size:14.5px;line-height:1.5;margin:0 0 12px;color:rgba(255,255,255,.9); display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .sb-big .sb-more{color:#fff;} /* small cards now carry a real photo too (previously icon-only) - same full-bleed-photo + bottom gradient treatment as .sb-big, scaled down, so all 9 service cards read as one consistent photo gallery. The 2-line description is dropped at this size (no room once a photo is added); the per-category accent colour moves to a ring around the icon chip since a solid pastel fill would fight with nine different photos' own colours. */ .sb-item{position:relative;overflow:hidden;border-radius:20px;text-decoration:none; box-shadow:var(--sh-h);transition:transform .25s var(--ease),box-shadow .25s var(--ease);} .sb-item picture,.sb-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;} .sb-item::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(0deg,rgba(10,16,30,.88) 0%,rgba(10,16,30,.4) 48%,rgba(10,16,30,.04) 72%);} .sb-item:hover{transform:translateY(-4px);box-shadow:0 10px 20px rgba(0,0,0,.14),0 34px 56px -20px rgba(0,0,0,.4);} .sb-item:focus-visible,.sb-big:focus-visible,.sb-all:focus-visible{outline:3px solid var(--red);outline-offset:3px;} .sb-ic{position:absolute;z-index:1;top:12px;left:12px;width:40px;height:40px;border-radius:12px; display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.85); border:1.5px solid rgba(255,255,255,.6);backdrop-filter:blur(2px); transition:border-color .25s var(--ease);} .sb-ic svg{width:19px;height:19px;stroke:var(--red-text);} .sb-item-body{position:absolute;z-index:1;left:0;right:0;bottom:0;padding:14px 16px 16px;color:#fff;} .sb-item-body h3{font-size:16px;font-weight:800;margin:0 0 4px;line-height:1.22;letter-spacing:-.005em;} /* progressive reveal: 1-line description stays collapsed until hover/focus, so the grid stays calm at rest and only shows extra detail on intent (Linear-style hover reveal) */ .sb-item-body p{font-size:12.5px;line-height:1.4;color:rgba(255,255,255,.9);margin:4px 0 0; max-height:0;opacity:0;overflow:hidden;transition:max-height .3s var(--ease),opacity .25s var(--ease);} .sb-item:hover .sb-item-body p,.sb-item:focus-visible .sb-item-body p{max-height:60px;opacity:1;} @media (prefers-reduced-motion: reduce){.sb-item-body p{transition:none;}} .sb-more{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--navy);} .sb-more svg{width:14px;height:14px;flex-shrink:0;transition:transform .2s var(--ease);} .sb-item .sb-more{color:#fff;} .sb-item:hover .sb-more svg{transform:translateX(3px);} .sb-c1 .sb-ic{border-color:var(--c-orange);} .sb-c2 .sb-ic{border-color:var(--c-blue);} .sb-c3 .sb-ic{border-color:var(--c-green);} .sb-c4 .sb-ic{border-color:var(--c-purple);} .sb-c5 .sb-ic{border-color:var(--c-yellow);} .sb-c6 .sb-ic{border-color:var(--c-teal);} .sb-c7 .sb-ic{border-color:var(--c-pink);} .sb-c8 .sb-ic{border-color:#8FA6D9;} .sb-item:hover .sb-ic{border-width:2.5px;} .sb-cta{margin-top:30px;border-radius:24px;padding:34px 38px; background:linear-gradient(120deg,var(--red) 0%,var(--red-2) 100%); display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;color:#fff;} .sb-cta-txt b{display:block;font-size:19px;font-weight:800;margin-bottom:4px;} .sb-cta-txt span{font-size:14.5px;color:rgba(255,255,255,.88);} .sb-cta-act{display:flex;align-items:center;gap:20px;flex-wrap:wrap;} /* fixed dark text: var(--red-text) lightens in dark mode (meant for text on dark surfaces), which would drop this always-white button to 2.6:1 */ .b-white{background:#fff;color:#B8442A;box-shadow:0 10px 20px -8px rgba(0,0,0,.3);} .b-white:hover{background:var(--navy-ink);color:#fff;} .sb-phone{display:inline-flex;align-items:center;gap:9px;color:#fff;font-weight:700;font-size:15.5px;text-decoration:none;} .sb-phone svg{width:18px;height:18px;flex-shrink:0;} @media (max-width:1024px){ .sb-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:190px;} } @media (max-width:640px){ .svc-bento{padding:64px 0;} .svc-bento .wrap,.how-sec .wrap,.test-sec .wrap{padding:0 16px;} .sb-head{gap:14px;margin-bottom:28px;} .sb-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:auto;gap:12px;} .sb-big{grid-column:1/-1;grid-row:auto;aspect-ratio:16/10;} .sb-item{aspect-ratio:1/1;} .sb-item-body h3{font-size:14.5px;} .sb-cta{flex-direction:column;align-items:flex-start;padding:24px 20px;} } /* ---------- Nasıl Çalışıyoruz: 3-step process ---------- */ /* one deliberately dramatic dark band among otherwise light/tinted sections - rounds up and overlaps the previous (svc-bento) section the same way the hero does, so there's no bare strip between them either */ .how-sec{position:relative;padding:110px 0;background:var(--navy-ink);color:#fff;overflow:hidden; margin-top:-40px;border-radius:36px 36px 0 0;z-index:2;} .how-sec::before{content:"";position:absolute;inset:0;pointer-events:none; background: radial-gradient(circle at 94% 10%,rgba(242,174,153,.18) 0%,transparent 42%), radial-gradient(circle at 3% 94%,rgba(242,174,153,.13) 0%,transparent 38%), radial-gradient(rgba(255,255,255,.07) 1.2px,transparent 1.2px); background-size:auto,auto,22px 22px;} .how-sec .wrap{position:relative;} .how-sec .kicker{color:#F2AE99;} .how-sec .head h2{color:#fff;} .how-sec .head .acc{color:#F2AE99;} .how-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:66px;} .how-step{position:relative;text-align:center;padding:0 10px;} .how-step::before{content:"";position:absolute;top:27px;left:calc(-50% + 27px);width:calc(100% - 54px); height:0;border-top:2px dashed rgba(255,255,255,.3);z-index:0;} .how-step:first-child::before{display:none;} .how-num{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;width:54px;height:54px; border-radius:50%;background:#fff;color:var(--navy-ink);font-family:var(--disp);font-weight:800;font-size:20px; margin:0 auto -27px;box-shadow:0 10px 20px -8px rgba(0,0,0,.4);} .how-card{position:relative;z-index:1;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14); border-radius:20px;padding:44px 24px 30px;box-shadow:0 20px 40px -24px rgba(0,0,0,.5);} .how-ic{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%; background:rgba(0,0,0,.3);margin:0 auto 16px;} .how-ic svg{width:23px;height:23px;stroke:#F2AE99;} .how-step h3{font-size:17px;margin-bottom:8px;color:#fff;} .how-step p{font-size:14px;color:rgba(255,255,255,.75);line-height:1.55;margin:0;max-width:260px;margin-inline:auto;} @media (max-width:768px){ .how-steps{grid-template-columns:1fr;gap:40px;} .how-step::before{display:none;} } /* ---------- Ailelerimiz Ne Diyor: placeholder testimonials ---------- */ .test-sec{padding:96px 0;background:var(--wash);} .test-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px;} .test-card{background:var(--surface);border-radius:20px;padding:32px 28px;position:relative;box-shadow:var(--sh); overflow:hidden;} .test-quote{position:absolute;top:10px;left:20px;font-family:'Fraunces',Georgia,serif;font-size:60px; color:var(--navy-tint);line-height:1;pointer-events:none;} .test-card p{position:relative;font-size:15px;line-height:1.6;color:var(--ink-2);font-style:italic;margin:20px 0 20px;} .test-who{display:flex;align-items:center;justify-content:space-between;gap:10px;} .test-name{font-size:13.5px;font-weight:700;color:var(--ink);} .test-stars{color:#B77D00;font-size:14px;letter-spacing:1px;} @media (max-width:900px){.test-grid{grid-template-columns:1fr;}} /* ---------- google review trust card ---------- */ .lx-reviews{padding:0 0 136px;background:var(--paper);} /* TR homepage only: reviews now sit right after the hero overlap, so this needs its own top clearance that en/index.html's reviews (still mid-page, after lx-faq) don't. */ .lx-reviews--hero-lead{padding-top:100px;} .rev-card{position:relative;max-width:760px;margin:0 auto;text-align:center;background:var(--surface);border-radius:24px; padding:50px 40px;box-shadow:0 2px 8px rgba(43,31,18,.05),0 30px 60px -30px rgba(43,31,18,.3);overflow:hidden;} .rev-card::before{content:"\201C";position:absolute;top:-28px;left:50%;transform:translateX(-50%); font-family:'Fraunces',Georgia,serif;font-size:220px;line-height:1;color:var(--navy-tint); pointer-events:none;z-index:0;} .rev-card>*{position:relative;z-index:1;} .rev-score{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:22px;flex-wrap:wrap;} .rev-score .stars{color:#B77D00;font-size:19px;letter-spacing:2px;line-height:1;} .rev-score b{font-family:var(--disp);font-weight:800;font-stretch:112%;font-size:21px;color:var(--ink);} .rev-score .cnt{font-size:13.5px;color:var(--ink-3);} .rev-card blockquote{margin:0 0 18px;font-size:18px;line-height:1.62;color:var(--ink);font-style:italic;} .rev-card .who{font-size:13.5px;color:var(--ink-3);font-weight:600;} .rev-card .btn{margin-top:26px;} @media (max-width:560px){ .rev-card{padding:36px 24px;} .rev-card blockquote{font-size:16px;} } /* ---------- review carousel (replaces the single rev-card on the homepage) ---------- */ .rev-top{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap; max-width:1480px;margin:0 auto 30px;padding:0 30px;} .rev-left{max-width:640px;} .rev-badge{display:inline-flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--line); border-radius:999px;padding:8px 16px;margin-bottom:20px;box-shadow:0 2px 8px rgba(43,31,18,.06);} .rev-badge svg{width:17px;height:17px;flex-shrink:0;} .rev-badge .stars{color:#B77D00;font-size:13px;letter-spacing:1px;} .rev-badge b{font-family:var(--disp);font-weight:800;font-stretch:112%;font-size:15px;color:var(--ink);} .rev-badge .sep{color:var(--line);} .rev-badge .cnt{font-size:12.5px;color:var(--ink-3);} .rev-left .kicker{margin-bottom:6px;} .rev-left h2{margin-bottom:10px;} .rev-left .lede{margin:0;} .rev-ctrl{display:flex;align-items:center;gap:12px;flex-shrink:0;padding-top:4px;} .rev-arrow{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surface); display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--navy); transition:background .2s var(--ease),border-color .2s var(--ease);} .rev-arrow:hover{background:var(--navy-tint);border-color:var(--navy);} .rev-arrow svg{width:18px;height:18px;} .rev-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none; max-width:1480px;margin:0 auto;padding:4px 30px 16px;} .rev-track::-webkit-scrollbar{display:none;} .rev-mini{flex:0 0 320px;scroll-snap-align:start;background:var(--surface);border-radius:18px;padding:24px 22px; box-shadow:0 2px 8px rgba(43,31,18,.05),0 18px 36px -24px rgba(43,31,18,.35); display:flex;flex-direction:column;gap:14px;} .rev-mini-top{display:flex;align-items:center;justify-content:space-between;} .rev-quote-ic{flex:none;width:34px;height:34px;border-radius:50%;background:var(--navy-tint);color:var(--navy); display:flex;align-items:center;justify-content:center;} .rev-quote-ic svg{width:16px;height:16px;} .rev-mini .stars{color:#B77D00;font-size:13px;letter-spacing:1.5px;} .rev-mini p{margin:0;font-size:14.5px;line-height:1.56;color:var(--ink);flex:1;} .rev-mini-who{display:flex;align-items:center;gap:10px;} .rev-avatar{flex:none;width:34px;height:34px;border-radius:50%;background:var(--navy-tint);color:var(--navy); display:flex;align-items:center;justify-content:center;} .rev-avatar svg{width:16px;height:16px;} .rev-mini-who b{display:block;font-size:13px;font-weight:700;color:var(--ink);} .rev-mini-who small{display:block;font-size:11.5px;color:var(--ink-3);margin-top:1px;} .rev-dots{display:flex;justify-content:center;gap:8px;margin-top:22px;} .rev-dots .dot{width:8px;height:8px;border-radius:50%;background:var(--line); transition:background .2s var(--ease),transform .2s var(--ease);} .rev-dots .dot.is-active{background:var(--navy);transform:scale(1.3);} @media (max-width:640px){ .rev-ctrl .btn{display:none;} .rev-mini{flex-basis:270px;padding:20px 18px;} } @media (max-width:560px){ .hero2-in{padding:calc(var(--header-h, 84px) + 24px) 18px 26px;} } /* ---------- overflow safety (contact) ---------- */ /* min-width guard: this rule was overriding the ≤560px single-column .cbox-grid override above (same specificity, later in the file always wins) - the 2-column minmax(0,...) is only meant for the width where cbox-grid is actually 2 columns. */ @media (min-width:561px){.cbox-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}} .cgrid{grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);} .cbox a,.cbox p{overflow-wrap:anywhere;} @media (max-width:1230px){.cgrid{grid-template-columns:minmax(0,1fr);}} /* ---------- mobile: shorter homepage ---------- */ @media (max-width:700px){ .prg-cards{grid-template-columns:1fr 1fr;gap:12px;} .prg-card{flex-direction:column;gap:12px;padding:20px 16px 18px;} .prg-card p{display:none;} .prg-card.prg-cta p{display:block;} .prg-card .no{top:12px;right:14px;} .prg-card h3{font-size:14.5px;padding-right:0;} .prg-card.prg-cta{grid-column:1 / -1;} } /* accents on dark grounds */ .cta .acc,.proc .acc{color:#FFB59B;} /* ---------- form feedback ---------- */ .ferr{margin:0 0 16px;padding:12px 16px;border-radius:var(--r);font-size:14.5px;font-weight:600;line-height:1.5; color:var(--red-text);background:color-mix(in srgb,var(--red) 10%,transparent);border:1px solid color-mix(in srgb,var(--red) 35%,transparent);} .field input[aria-invalid="true"],.consent input[aria-invalid="true"]{outline:2px solid var(--red-text);outline-offset:1px;} .fconfirm{margin-top:26px;padding:24px 24px 22px;border-radius:var(--r-lg);background:var(--navy-tint);border-left:4px solid var(--navy);} .fconfirm h3{font-size:18px;margin-bottom:8px;} .fconfirm p{font-size:15px;line-height:1.6;color:var(--ink-2);} .fconfirm .acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px;}