/* ==========================================================================
   contact.css — the Contact page (Figma 12511:54963, hover 12511:54572).
   Left: the 3D (#gl, js/contact.js). Right: the panel, 568 wide, 30 from
   the top and 5 from the right and bottom; its contents at the file's px.
   ========================================================================== */
html.is-contact, html.is-contact body{ height:100%; overflow:hidden; background:#000; }
/* the 3D is drawn for the whole window; it is moved left so its middle is
   the middle of the space left of the panel */
/* the 3D fills the window; the skeleton is moved to the middle of the space left of the panel inside it (js/contact.js, the camera's view offset) */
html.is-contact #gl{ opacity:0; transition:opacity 1.2s ease; }
html.is-contact.has-3d #gl{ opacity:1; }
.ct{ position:fixed; inset:0; z-index:1; pointer-events:none; }
.ct a, .ct button, .ct-card{ pointer-events:auto; }

/* header: black on the light 3D, the button black over the panel's edge */
.ct-nav__logo{ position:absolute; left:5px; top:5px; width:167px; height:33px; z-index:3; pointer-events:auto; }
.ct-nav__logo img{ width:100%; height:100%; filter:none; }   /* the site's cream, as everywhere */
.ct-nav__links{ position:absolute; right:578px; top:5px; height:20px; align-items:center; display:flex; gap:5px; margin:0; padding:0; list-style:none; z-index:3; }
.ct-nav__links .t{ position:static; color:var(--c-ink); text-decoration:none; transition:opacity .25s; }
.ct-nav__links a:hover, .ct-nav__links a:focus-visible{ opacity:.6; }   /* as the home header */
.ct-nav__cta{ position:absolute; right:5px; top:5px; width:568px; height:20px; background:var(--c-ink); display:grid; place-items:center; color:#000; text-decoration:none; z-index:3; }
.ct-nav__cta .t{ position:static; color:inherit; }

.ct-panel{ position:absolute; right:5px; top:30px; bottom:5px; width:568px; background:#000; pointer-events:auto; color:var(--c-ink); }   /* not clipped: the turning card may reach past it */
.ct-orbs-clip{ position:absolute; inset:0; overflow:hidden; }
.ct-orbs{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
/* the file's stroke: 0.6, dashed 0.6 / 1.2, cream at 20% */
.ct-orbs path{ fill:none; stroke:var(--c-ink); stroke-opacity:.2; stroke-width:.6; stroke-dasharray:.6 1.2; }
.ct-orbs path.ct-orb--back{ stroke-opacity:.08; }   /* the far half, fainter (as the footer's orbits) */
.ct-card{ visibility:hidden; }   /* it rises in last (js/contact.js) */
/* the title's words and marks wait for their turn (js/contact.js): nothing shows before */
html.is-contact:not(.ct-go) .ct-w, html.is-contact:not(.ct-go) .ct-mark--title, html.is-contact:not(.ct-go) .ct-hatch{ opacity:0; }
/* THE BACK OF THE CARD: its texts come in as it turns over (each strip holds a
   copy of the back; they all play the same, so it reads as one) */
.ct-card .ct-strip__b .ct-mark--card, .ct-card .ct-strip__b .ct-phones a, .ct-card .ct-strip__b .ct-mail,
.ct-card .ct-strip__b .ct-hours span, .ct-card .ct-strip__b .ct-crit{ opacity:0; transform:translate3d(0, 8px, 0); transition:opacity .2s ease, transform .2s ease; }
.ct-card.is-open .ct-strip__b .ct-mark--card, .ct-card.is-open .ct-strip__b .ct-phones a, .ct-card.is-open .ct-strip__b .ct-mail,
.ct-card.is-open .ct-strip__b .ct-hours span, .ct-card.is-open .ct-strip__b .ct-crit{ opacity:1; transform:none; transition:opacity .45s cubic-bezier(.215,.61,.355,1), transform .45s cubic-bezier(.215,.61,.355,1); }
.ct-card.is-open .ct-strip__b .ct-mark--card{ transition-delay:.22s; }
.ct-card.is-open .ct-strip__b .ct-phones a:nth-child(1){ transition-delay:.3s; }
.ct-card.is-open .ct-strip__b .ct-phones a:nth-child(2){ transition-delay:.36s; }
.ct-card.is-open .ct-strip__b .ct-mail{ transition-delay:.42s; }
.ct-card.is-open .ct-strip__b .ct-hours span:nth-child(1){ transition-delay:.48s; }
.ct-card.is-open .ct-strip__b .ct-hours span:nth-child(2){ transition-delay:.54s; }
.ct-card.is-open .ct-strip__b .ct-crit{ transition-delay:.6s; }
.ct-orbs rect{ fill:#252222; }

/* the title, 116px, its words placed as the file */
.ct-title{ margin:0; font-size:116px; line-height:.85; letter-spacing:-.02em; text-transform:uppercase; font-weight:900; }
.ct-w{ opacity:0; position:absolute; top:5px; white-space:nowrap; text-box:trim-both cap alphabetic; }
.ct-w--start{ left:6px; }
.ct-w--the{ right:5px; }
.ct-w--dialogue{ top:103px; right:5px; }
.ct-w--protocol{ top:201px; left:4px; }
.ct-mark{ position:absolute; overflow:visible; }
.ct-mark--title{ left:273px; top:5px; width:149px; height:93px; }
.ct-hatch{ position:absolute; }
.ct-hatch--l{ left:223px; top:5.5px; width:48px; height:92px; }
.ct-hatch--r{ left:414.5px; top:5px; width:24px; height:93px; }

.ct-sub{ position:absolute; left:6px; top:103px; margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:5px; }
.ct-sub li, .ct-l{ font-size:12px; line-height:.85; letter-spacing:-.02em; text-transform:uppercase; white-space:pre; }
.ct-l{ position:absolute; margin:0; }
.ct-l--sl{ left:6px; top:186px; } .ct-l--yr{ left:18px; top:186px; } .ct-l--usa{ left:194px; top:186px; }
.ct-l--l, .ct-l--c, .ct-l--r{ top:calc(50% - 4.5px); }
.ct-l--l{ left:19px; } .ct-l--c{ left:268px; } .ct-l--r{ right:19px; }
.ct-tick{ position:absolute; top:calc(50% - 8.5px); width:9px; height:17px; fill:none; stroke:var(--c-ink); stroke-width:1; }
.ct-tick--l{ left:5px; } .ct-tick--r{ right:5px; }

/* THE FOLDER: the card turns over in 3D (js/contact.js builds its strips) */
.ct-card{ position:absolute; left:5px; bottom:5px; width:558px; height:314px; perspective:1400px; outline:none; cursor:pointer; z-index:2; }
.ct-card__in{ position:absolute; inset:0; transform-style:preserve-3d; will-change:transform; }
.ct-strip{ position:absolute; left:0; width:100%; transform-style:preserve-3d; }
.ct-strip__f, .ct-strip__b{ position:absolute; inset:0; overflow:hidden; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.ct-strip__b{ transform:rotateX(180deg); }
.ct-strip__f > .ct-face, .ct-strip__b > .ct-face{ position:absolute; left:0; width:558px; height:314px; }
.ct-face{ color:var(--c-ink); }
.ct-tab{ position:absolute; left:0; top:0; width:226px; height:15px; display:block; }
.ct-face--front .ct-tab path{ fill:#01be5a; }
.ct-tab__t{ position:absolute; z-index:2; left:3px; top:6px; color:var(--c-ink); text-decoration:none; pointer-events:auto; font-size:12px; line-height:.85; letter-spacing:-.02em; text-transform:uppercase; text-box:trim-both cap alphabetic; }
.ct-body{ position:absolute; left:0; top:14.2px; width:558px; height:299.8px; overflow:hidden; }
.ct-face--front .ct-body{ background:#01be5a; }
.ct-logo{ position:absolute; left:calc(50% - 193px); top:calc(50% - 38px); width:385px; height:76px; }
/* one texture over the whole folder, tab included (the tab is the same green, not darker) */
.ct-tex{ position:absolute; inset:0; z-index:1; pointer-events:none; background:url('../assets/img/texture.jpg') center / 768px; mix-blend-mode:luminosity; opacity:.1; clip-path:path('M0 0H190.5C193.8 0 197 .72 200 2.12L225.8 14.2H558V314H0Z'); }
.ct-small{ position:absolute; bottom:4px; font-size:8.97px; line-height:.95; letter-spacing:-.02em; text-transform:uppercase; white-space:nowrap; }
.ct-small--bl{ left:3.7px; } .ct-small--br{ right:4.3px; }
/* the back: cream, the details in black, the tab now at the bottom */
.ct-face--back .ct-body{ top:0; background:var(--c-ink); color:#000; }
.ct-face--back .ct-tab--back{ top:auto; bottom:0; }
.ct-face--back .ct-tab--back path{ fill:var(--c-ink); }
.ct-mark--card{ left:3.7px; top:4.2px; width:113px; height:70.6px; }
.ct-phones, .ct-hours{ position:absolute; left:278px; display:flex; flex-direction:column; gap:5px; }
.ct-phones{ top:5px; } .ct-hours{ top:224px; }
.ct-mail{ position:absolute; right:5px; top:5px; }
.ct-crit{ position:absolute; left:278px; top:284px; margin:0; width:210px; }
.ct-phones a, .ct-mail, .ct-hours span, .ct-crit{ font-size:12px; line-height:.95; letter-spacing:-.02em; text-transform:uppercase; color:#000; text-decoration:none; white-space:pre; text-box:trim-both cap alphabetic; }

/* narrow windows: the panel keeps its layout and is scaled to fit (js/contact.js sets --ct-k) */
.ct-panel{ height:calc((100% - 35px) / var(--ct-k, 1)); transform:scale(var(--ct-k, 1)); transform-origin:100% 100%; top:auto; }
@media (max-width:900px){
  html.is-contact #gl{ transform:none; }
  .ct-nav__links{ right:auto; left:180px; }
  .ct-nav__cta{ width:calc(100% - 10px); top:44px; }
}
/* the tab's link, on the back too (the tab is at the bottom there) */
.ct-tab__t--back{ top:auto; bottom:2px; color:#000; }

/* THE WAY IN (js/contact.js): the 3D alone first; nothing of the panel, its
   button, ticks or texts before its turn */
html.is-contact:not(.ct-panel-in) .ct-panel, html.is-contact:not(.ct-panel-in) .ct-nav__cta{ visibility:hidden; }
html.is-contact:not(.ct-go) .ct-panel > :not(.ct-orbs-clip):not(.ct-card){ visibility:hidden; }
/* the card's tooltip (as the home page's filter one: the button's size and type), green */
.ct-tip{ position:fixed; left:0; top:0; z-index:70; pointer-events:none; height:20px; padding:0 10px; display:flex; align-items:center; justify-content:center;
  background:#01be5a; color:#000; white-space:nowrap; opacity:0; transition:opacity .15s ease; will-change:transform; }
.ct-tip.on{ opacity:1; }
.ct-tip .t{ position:static; color:inherit; }

/* the home page's skeleton light (css/sections.css .st-skelvig), centred on the space left of the panel */
.ct-vig{ position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 48% 62% at 52% 48%, transparent 0%, rgba(0,0,0,.18) 30%, rgba(0,0,0,.62) 62%, rgba(0,0,0,.9) 85%, #000 100%),
    radial-gradient(ellipse 60% 90% at 0% 30%, rgba(14,48,92,.85) 0%, rgba(14,48,92,.4) 45%, transparent 80%),
    radial-gradient(ellipse 60% 80% at 100% 95%, rgba(140,48,14,.8) 0%, rgba(140,48,14,.35) 45%, transparent 80%); }   /* the home page's, the whole window */