/* /about-us only (28 Sep 2026 full-screen atlas; logo colours + de-cluttered 9 Oct 2026, client via Mahek: "in the logo Colors and a lil simpler for users to scroll through ... it's a lil clustered"): the "74+ countries" section = the map (tpl/_map.php, built by CLAUDE/tools/build_about_map.py) in the logo's palette (sea #9ce1ff, visited land #95df95, unvisited land white, couple grey #535353 for India + the plane, script blue #2796c3 for spokes + accents), the region index UNDER the map at every width (list on phone, one centred row from 768px), a name tip under the pointer, and the journey (plane on spokes from home). Gone since 9 Oct: on-map region labels, clouds, grid, roll call. Site tokens --tt-* live in ttwt-brief.css; the logo ones are scoped to .ttwt-atlas. Interaction = ttwt-shop.js block 6. */
.ttwt-rv .rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease;transition-delay:var(--d,0s)}
.ttwt-rv.is-in .rv{opacity:1;transform:none}
#shopify-section-ttwt-mission{background:var(--tt-cream);min-height:100vh}
#shopify-section-ttwt-mission .ttwt-cta{padding-top:84px;padding-bottom:72px} /* 84 = the heading clears the 82px sticky header when the section is pinned at the top */
#shopify-section-ttwt-mission .h2{font-size:clamp(34px,3.6vw,54px);line-height:1.05}
#shopify-section-ttwt-mission p.fs-18{max-width:720px;margin-left:auto;margin-right:auto}
.ttwt-atlas{--lg-sea:#9ce1ff;--lg-leaf:#95df95;--lg-leaf-2:#6fd36f;--lg-leaf-3:#53c253;--lg-leaf-0:#d3efd3;--lg-grey:#535353;--lg-blue:#2796c3;position:relative;margin:22px 0 36px;padding:0 24px;text-align:left}
.ttwt-atlas-map{position:relative;width:min(100%,clamp(calc((100vh - 236px) * 1.866),80vw,calc((100vh - 100px) * 1.866)));margin:0 auto}
.ttwt-atlas-svg{display:block;width:100%;height:auto;background:var(--lg-sea);border-radius:18px}
.ttwt-atlas-land{fill:#fff;stroke:none;fill-rule:evenodd;opacity:0;transition:opacity .9s ease .1s}
.is-in .ttwt-atlas-land{opacity:1}
.ttwt-atlas-home{fill:var(--lg-grey);stroke:var(--lg-grey);stroke-width:.4;stroke-linejoin:round;fill-rule:evenodd}
/* visited: the logo's land green with white hairline borders, stamped in one after another on reveal (client order) */
.ttwt-atlas-c{fill:var(--lg-leaf);stroke:#fff;stroke-width:.6;stroke-linejoin:round;fill-rule:evenodd;opacity:0;transform:scale(1.35);transform-box:fill-box;transform-origin:center;transition:opacity .4s ease calc(.45s + var(--i,0) * .03s),transform .4s cubic-bezier(.2,.8,.3,1) calc(.45s + var(--i,0) * .03s),fill .25s ease}
.ttwt-atlas-pin{fill:var(--lg-leaf);stroke:#fff;stroke-width:1.4;r:3.4;opacity:0;transition:opacity .4s ease calc(.45s + var(--i,0) * .03s),fill .25s ease}
.is-in .ttwt-atlas-c{opacity:1;transform:none}
.is-in .ttwt-atlas-pin{opacity:1}
/* a picked region deepens, the rest fade; hover, or the plane landing there (.is-go) = darkest */
.ttwt-atlas.has-sel .ttwt-atlas-r:not(.is-sel) .ttwt-atlas-c,.ttwt-atlas.has-sel .ttwt-atlas-r:not(.is-sel) .ttwt-atlas-pin{fill:var(--lg-leaf-0)}
.ttwt-atlas-r.is-sel .ttwt-atlas-c,.ttwt-atlas-r.is-sel .ttwt-atlas-pin{fill:var(--lg-leaf-2)}
.ttwt-atlas-r.is-hot .ttwt-atlas-c,.ttwt-atlas-c.is-hot,.ttwt-atlas-c.is-go,.ttwt-atlas-r.is-hot .ttwt-atlas-pin,.ttwt-atlas-pin.is-hot,.ttwt-atlas-pin.is-go{fill:var(--lg-leaf-3)}
/* journey: hub at home, one spoke per region drawn by the JS (pathLength=1 dash), a pulse where the plane lands, spokes rest faint */
.ttwt-atlas-tour{pointer-events:none}
.ttwt-atlas-hub{fill:#fff;stroke:var(--lg-grey);stroke-width:2}
.ttwt-atlas-arc{fill:none;stroke:var(--lg-blue);stroke-width:2.1;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;transition:opacity .5s ease}
.ttwt-atlas-arc.is-on{opacity:1}
.ttwt-atlas-arc.is-done{opacity:.3;stroke-dashoffset:0}
.ttwt-atlas-stop{fill:none;stroke:var(--lg-blue);stroke-width:1.6;opacity:0;transform-box:fill-box;transform-origin:center}
.ttwt-atlas-stop.is-go{animation:ttwt-pulse 1.5s ease-out infinite}
@keyframes ttwt-pulse{0%{opacity:.9;transform:scale(.45)}100%{opacity:0;transform:scale(2.4)}}
.ttwt-atlas-plane{fill:var(--lg-grey);opacity:0;transition:opacity .3s ease}
.ttwt-atlas-plane.is-on{opacity:1}
.ttwt-atlas-plane-b{transform-box:fill-box;transform-origin:center;scale:1.25}
.ttwt-atlas-plane-s{fill:#000;opacity:.2;transform-box:fill-box;transform-origin:center;translate:5px 8px;scale:1.25;filter:blur(1.5px)} /* the plane floats: soft shadow on the ground */
/* the only text on the map: HOME on India, and the tag = the country the plane just landed in (white halo so it reads on sea or land) */
.ttwt-atlas-lab{font:700 11px/1 Cormorant,serif;letter-spacing:.22em;text-transform:uppercase;fill:#fff;cursor:default;opacity:0;transition:opacity .6s ease 1.4s}
.is-in .ttwt-atlas-lab{opacity:1}
.ttwt-atlas-tag{font:italic 700 22px/1 Cormorant,serif;fill:var(--lg-blue);paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round;opacity:0;transition:opacity .35s ease}
.ttwt-atlas-tag.is-on{opacity:1}
/* sky = second <svg> over the map (tpl/_map.php): since 9 Oct only the two ping rings at home (clouds removed) */
.ttwt-atlas-globe{position:relative}
.ttwt-atlas-sky{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;opacity:0;transition:opacity 1.6s ease 1.8s}
.is-in .ttwt-atlas-sky{opacity:1}
.ttwt-atlas-ping{fill:none;stroke:var(--lg-blue);stroke-width:1.3;opacity:0;transform-box:fill-box;transform-origin:center;animation:ttwt-ping 3.2s ease-out infinite}
@keyframes ttwt-ping{0%{opacity:.8;transform:scale(.35)}100%{opacity:0;transform:scale(3.4)}}
/* name tip under the pointer (shapes carry data-n) */
.ttwt-atlas-tip{position:absolute;z-index:2;pointer-events:none;transform:translate(14px,-34px);font:700 10.5px/1 Lato,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--lg-grey);padding:7px 10px 6px;white-space:nowrap;border-radius:4px}
.ttwt-atlas-tip[hidden]{display:none}
/* region index under the map: count + name, tap for the country line (the line = .ttwt-atlas-cap under the row from 768px, the row's own <p> on phone) */
.ttwt-atlas-index{margin-top:24px}
.ttwt-atlas-item{border-top:1px solid var(--tt-line)}
.ttwt-atlas-item:last-child{border-bottom:1px solid var(--tt-line)}
.ttwt-atlas-row{appearance:none;display:flex;align-items:baseline;gap:14px;width:100%;background:none;border:0;padding:11px 0;text-align:left;cursor:pointer;color:var(--tt-ink)}
.ttwt-atlas-row b{font:700 34px/1 Cormorant,serif;min-width:54px;color:var(--tt-ink)}
.ttwt-atlas-row span{flex:1;font:700 10.5px/1.4 Lato,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--lg-grey);transition:color .2s}
.ttwt-atlas-row:after{content:"+";font:400 24px/1 Cormorant,serif;color:var(--lg-blue)}
.ttwt-atlas-row[aria-expanded=true]:after{content:"\2013"}
.ttwt-atlas-row:hover span,.ttwt-atlas-row[aria-expanded=true] span{color:var(--tt-ink)}
.ttwt-atlas-row:focus-visible{outline:2px solid var(--lg-blue);outline-offset:2px}
.ttwt-atlas-names{margin:-2px 0 14px 68px;font:italic 400 15px/1.65 Lato,sans-serif;color:var(--lg-grey)}
.ttwt-atlas-cap{display:none;max-width:1100px;margin:14px auto 0;text-align:center;font:italic 400 15px/1.7 Lato,sans-serif;color:var(--lg-grey)}
.ttwt-atlas-cap:empty{display:none}
.ttwt-atlas-names span,.ttwt-atlas-cap span{cursor:default;transition:color .15s}
.ttwt-atlas-names span:hover,.ttwt-atlas-names span.is-hot,.ttwt-atlas-cap span:hover,.ttwt-atlas-cap span.is-hot{color:var(--tt-ink);text-decoration:underline;text-decoration-color:var(--lg-blue);text-underline-offset:3px}
@media (min-width:768px){
.ttwt-atlas-names{display:none}
.ttwt-atlas-cap{display:block}
.ttwt-atlas-index{display:flex;flex-wrap:wrap;justify-content:center;gap:0 30px;margin-top:22px}
.ttwt-atlas-item,.ttwt-atlas-item:last-child{border:0}
.ttwt-atlas-row{width:auto;gap:10px;padding:8px 0}
.ttwt-atlas-row b{min-width:0;font-size:28px}
}
@media (min-width:1200px){
.ttwt-atlas-index{gap:0 40px}
.ttwt-atlas-row b{font-size:30px}
}
@media (max-width:767px){
#shopify-section-ttwt-mission{min-height:0}
#shopify-section-ttwt-mission .ttwt-cta{padding-top:52px;padding-bottom:56px}
.ttwt-atlas{margin:22px 0 28px;padding:0 16px}
.ttwt-atlas-map{width:100%}
.ttwt-atlas-svg{border-radius:14px}
.ttwt-atlas-lab,.ttwt-atlas-tag{display:none} /* an 11px HOME and a 22px tag on a 358px-wide map: the index below carries the names */
.ttwt-atlas-c{stroke-width:1}.ttwt-atlas-pin{stroke-width:2.2;r:5}
.ttwt-atlas-arc{stroke-width:2.6}.ttwt-atlas-hub{r:6;stroke-width:3.5}.ttwt-atlas-stop{r:11;stroke-width:3}.ttwt-atlas-plane-b,.ttwt-atlas-plane-s{scale:2.2}
.ttwt-atlas-tip{transform:translate(-50%,-44px)}
.ttwt-atlas-index{margin-top:20px}
.ttwt-atlas-row{padding:10px 0}.ttwt-atlas-row b{font-size:28px;min-width:46px}
.ttwt-atlas-names{margin-left:60px;font-size:14px}
}
@media (prefers-reduced-motion:reduce){.ttwt-rv .rv,.ttwt-atlas-land,.ttwt-atlas-c,.ttwt-atlas-pin,.ttwt-atlas-lab{opacity:1;transform:none;transition:none}.ttwt-atlas-stop.is-go{animation:none}.ttwt-atlas-ping{display:none}}

/* ---- "The Two" intro (28 Sep 2026): Rinnku | the couple | Ritesh mirrored round the photo (she is on the left in it), the story line under them draws Kerala -> 74+ countries on reveal, the two closing paragraphs side by side. Copy = the old Shopify block verbatim (edits_2026-09-28_two.py). Hidden until the section reveals (.is-in from ttwt-shop.js block 5) AND the loading screen is gone (html.ttwt-intro), so the first visit sees it. ---- */
.ttwt-two{padding:72px 0 64px;background:#fff;overflow:hidden}
.ttwt-two-head{text-align:center;max-width:720px;margin:0 auto 40px}
.ttwt-two-lead{font-size:18px;line-height:1.55;color:#333;margin:10px 0 0}
.ttwt-two-row{display:grid;grid-template-columns:1fr clamp(280px,34%,420px) 1fr;gap:44px;align-items:start}
.ttwt-two-photo{margin:0;background:#fff;padding:10px;box-shadow:0 34px 60px -30px rgba(0,0,0,.5);opacity:0;transform:scale(.96);transition:opacity .9s ease .1s,transform 1.1s cubic-bezier(.2,.8,.2,1) .1s}
.ttwt-two-photo img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.ttwt-two-who{padding-top:96px;opacity:0;transition:opacity .9s ease .45s,transform .9s cubic-bezier(.2,.8,.2,1) .45s}
.ttwt-two-who--l{text-align:right;transform:translateX(-56px)}
.ttwt-two-who--r{text-align:left;transform:translateX(56px)}
.ttwt-two-name{font-family:var(--bs-font-heading-family);font-size:48px;line-height:1;font-weight:600;margin:0;color:var(--tt-ink)}
.ttwt-two-role{font-family:var(--bs-font-heading-family);font-style:italic;font-size:24px;line-height:1.2;color:var(--tt-accent);margin:6px 0 16px}
.ttwt-two-who .rte p{font-size:17px;line-height:1.6;color:#333;margin:0 0 12px}
.ttwt-two-who .rte p:last-child{margin-bottom:0}
.is-in .ttwt-two-photo,.is-in .ttwt-two-who{opacity:1;transform:none}
.ttwt-two-story{max-width:1040px;margin:52px auto 0;text-align:center}
.ttwt-two-path{display:grid;grid-template-columns:repeat(5,1fr);position:relative;margin:0 0 22px;padding:0}
.ttwt-two-path:before{content:"";position:absolute;left:10%;right:10%;top:7px;height:2px;background:var(--tt-accent);transform:scaleX(0);transform-origin:left;transition:transform 2.2s cubic-bezier(.4,0,.2,1) .6s}
.ttwt-two-path li{position:relative;padding-top:26px;font-family:var(--bs-font-heading-family);font-size:22px;font-weight:600;line-height:1.1;color:var(--tt-ink);opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s ease}
.ttwt-two-path li:before{content:"";position:absolute;left:50%;top:0;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:#fff;border:2px solid var(--tt-accent);box-sizing:border-box;transform:scale(0);transition:transform .45s cubic-bezier(.2,1.4,.4,1)}
.ttwt-two-path li:last-child:before{background:var(--tt-accent)}
.is-in .ttwt-two-path:before{transform:scaleX(1)}
.is-in .ttwt-two-path li,.is-in .ttwt-two-path li:before{opacity:1;transform:none}
.is-in .ttwt-two-path li:nth-child(1),.is-in .ttwt-two-path li:nth-child(1):before{transition-delay:.6s}
.is-in .ttwt-two-path li:nth-child(2),.is-in .ttwt-two-path li:nth-child(2):before{transition-delay:1.15s}
.is-in .ttwt-two-path li:nth-child(3),.is-in .ttwt-two-path li:nth-child(3):before{transition-delay:1.7s}
.is-in .ttwt-two-path li:nth-child(4),.is-in .ttwt-two-path li:nth-child(4):before{transition-delay:2.25s}
.is-in .ttwt-two-path li:nth-child(5),.is-in .ttwt-two-path li:nth-child(5):before{transition-delay:2.8s}
.ttwt-two-fate{font-family:var(--bs-font-heading-family);font-style:italic;font-size:25px;line-height:1.4;color:var(--tt-ink);max-width:780px;margin:0 auto}
.ttwt-two-why{display:grid;grid-template-columns:1fr 1fr;gap:44px;max-width:1040px;margin:44px auto 0;padding-top:32px;border-top:1px solid var(--tt-line)}
.ttwt-two-why p{font-size:17px;line-height:1.6;color:#333;margin:0}
.ttwt-two-social{margin-top:28px}
.ttwt-two-social .section-social{justify-content:center}
/* loading screen up: hold every start state until html.ttwt-intro is removed (header.php off()), then the transitions run in view */
html.ttwt-intro .ttwt-two .rv{opacity:0;transform:translateY(22px)}
html.ttwt-intro .ttwt-two-photo{opacity:0;transform:scale(.96)}
html.ttwt-intro .ttwt-two-who--l{opacity:0;transform:translateX(-56px)}
html.ttwt-intro .ttwt-two-who--r{opacity:0;transform:translateX(56px)}
html.ttwt-intro .ttwt-two-path:before{transform:scale(0)}
html.ttwt-intro .ttwt-two-path li{opacity:0;transform:translateY(8px)}
html.ttwt-intro .ttwt-two-path li:before{transform:scale(0)}
@media (max-width:1199px){.ttwt-two-who{padding-top:40px}}
@media (max-width:991px){
.ttwt-two{padding:48px 0 44px}
.ttwt-two-who{padding-top:0}
.ttwt-two-head{margin-bottom:28px}
.ttwt-two-row{grid-template-columns:1fr;gap:28px}
.ttwt-two-photo{order:-1;width:100%;max-width:420px;margin:0 auto}
.ttwt-two-who--l,.ttwt-two-who--r{text-align:left}
.ttwt-two-name{font-size:40px}
.ttwt-two-story{margin-top:40px;text-align:left}
.ttwt-two-path{grid-template-columns:1fr;gap:12px;padding-left:34px;margin-bottom:20px}
.ttwt-two-path:before{left:7px;right:auto;top:8px;bottom:8px;width:2px;height:auto;transform:scaleY(0);transform-origin:top}
.is-in .ttwt-two-path:before{transform:scaleY(1)}
.ttwt-two-path li{padding-top:0}
.ttwt-two-path li:before{left:-34px;top:5px;margin-left:0}
.ttwt-two-fate{font-size:21px}
.ttwt-two-why{grid-template-columns:1fr;gap:16px;margin-top:32px;padding-top:24px}
.ttwt-two-social .section-social{justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){.ttwt-two-photo,.ttwt-two-who,.ttwt-two-path:before,.ttwt-two-path li,.ttwt-two-path li:before{opacity:1!important;transform:none!important;transition:none!important}}