/*
Theme Name: Thinking Elephants
Description: Custom one-page theme for Thinking Elephants Ad Films.
Version: 1.3
Author: Thinking Elephants
Text Domain: thinking-elephants
*/

/* =====================================================================
   CONTENTS
   1.  Fonts
   2.  Tokens + reset
   3.  Header / logo / nav
   4.  Hero + video (controls, timeline)
   5.  Disciplines (sticky stacking)
   6.  Clients carousel
   7.  Contact button + footer
   8.  Animations (reveal, highlight word)
   9.  About page
   10. Contact page
   11. Mobile + tablet (max-width: 900px)  <- desktop design, scaled to fit
   ===================================================================== */


/* ---------- 1. FONTS ---------- */
@font-face{font-family:'Prompt';font-weight:300;font-style:normal;font-display:block;
  src:url('assets/fonts/Prompt-Light.ttf') format('truetype');}
@font-face{font-family:'Prompt';font-weight:400;font-style:normal;font-display:block;
  src:url('assets/fonts/Prompt-Regular.ttf') format('truetype');}
@font-face{font-family:'Prompt';font-weight:500;font-style:normal;font-display:block;
  src:url('assets/fonts/Prompt-Medium.ttf') format('truetype');}
@font-face{font-family:'Prompt';font-weight:600;font-style:normal;font-display:block;
  src:url('assets/fonts/Prompt-SemiBold.ttf') format('truetype');}
@font-face{font-family:'Inter';font-weight:300;font-style:normal;font-display:block;
  src:url('assets/fonts/Inter-Light.otf') format('opentype');}
@font-face{font-family:'Inter';font-weight:400;font-style:normal;font-display:block;
  src:url('assets/fonts/Inter-Regular.otf') format('opentype');}
@font-face{font-family:'Inter';font-weight:500;font-style:normal;font-display:block;
  src:url('assets/fonts/Inter-Medium.otf') format('opentype');}


/* ---------- 2. TOKENS + RESET ---------- */
:root{
  --navy:#172B36;
  --light:#F1F5F4;
  --orange:#FF9A32;
  --teal:#114C5A;
  --mint:#D9E8E2;
  --line:rgba(241,245,244,.35);
  --pad:clamp(20px,4.2vw,60px);
  --f-title:'Prompt',sans-serif;
  --f-body:'Inter',sans-serif;
  --fs-sub:clamp(26px,3.75vw,54px);
  --fs-copy:clamp(14px,1.67vw,24px);
  --header-h:80px;                         /* script.js overwrites this with the real height */
  --step:clamp(6px,.8vw,12px);             /* offset between stacked discipline sections */
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:var(--header-h)}
body{
  background:var(--navy);color:var(--light);
  font-family:var(--f-body);font-size:var(--fs-copy);font-weight:300;line-height:1.35;
  overflow-x:clip;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
.wrap{padding:0 var(--pad);max-width:1600px;margin:0 auto}


/* ---------- 3. HEADER / LOGO / NAV ---------- */
.site-header{
  position:sticky;top:0;z-index:1000;
  background:var(--navy);
  padding:22px 0 18px;
  transition:transform .4s cubic-bezier(.77,0,.175,1);
}
.site-header::after{content:"";position:absolute;left:var(--pad);right:var(--pad);bottom:0;height:1px;background:var(--line);pointer-events:none}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between}

/* header slides away while the video is on screen, returns once the first section is stuck */
.hide-header .site-header{transform:translateY(-100%)}
.hide-header:has(.discipline.is-stuck) .site-header{transform:none;pointer-events:auto}

/* logo */
.logo{
  --logo-fs:min(3.75vw,54px);
  /* the mark is sized to the cap-height of the logo font, so it matches
     the height of the capital "T" in "Thinking Elephants" at every size */
  --logo-cap:1.5cap;
  --logo-up:2px;                           /* nudge the mark up/down */
  display:flex;align-items:center;gap:.25em;
  font-family:var(--f-title);font-weight:500;font-size:var(--logo-fs);
  line-height:1;letter-spacing:0;white-space:nowrap;
}
.logo br{display:none}
.logo small{margin-left:.3em}
.logo > span:not(.logo-mark){display:inline;opacity:1}
.logo-mark{background:var(--orange);border-radius:50%;position:relative}
.logo-mark::after{display:none}
.logo img{height:1cap;width:auto;object-fit:contain}

.site-header .logo{align-items:center !important}
/* size the logo mark / image to 1cap (the height of the capital T) */
.site-header .logo .logo-mark,
.site-header .logo > img,
.site-header .logo .logo-mark img,
.site-header .logo svg{
  width:var(--logo-cap) !important;
  height:var(--logo-cap) !important;
  min-width:var(--logo-cap) !important;
  max-width:none !important;
  max-height:none !important;
  flex:none !important;
  margin:0 !important;
  object-fit:contain;
  transform:translateY(calc(var(--logo-up) * -1)) !important;
}

/* nav */
.main-nav ul{list-style:none;display:flex;gap:5.5vw}
.main-nav a{
  font-family:var(--f-body);font-weight:400;font-style:normal;font-size:24px;
  line-height:1;letter-spacing:0;position:relative;padding-bottom:4px;opacity:1;transition:opacity .3s;
}
.main-nav a:hover{opacity:1}
.main-nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--orange);transition:width .3s}
.main-nav a:hover::after{width:100%}

/* hamburger (shown on mobile only) */
.menu-toggle{display:none;width:40px;height:40px;background:none;border:0;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:7px}
.menu-toggle span{display:block;width:26px;height:2px;background:var(--light);transition:transform .35s ease,opacity .25s ease}
.menu-toggle.open span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.menu-toggle.open span:nth-child(2){opacity:0}
.menu-toggle.open span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}


/* ---------- 4. HERO + VIDEO ---------- */
.hero{
  height:calc(100vh - var(--header-h));          /* fallback */
  height:calc(100svh - var(--header-h));         /* exactly one screen under the header */
  min-height:0;
  margin-bottom:40px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
/* the text is pinned to the screen (position:fixed), so the browser keeps it perfectly still while the page
   scrolls; script.js only zooms it out and fades it before the video arrives */
.hero .wrap{
  position:fixed;left:0;right:0;top:var(--header-h);
  width:100%;max-width:none;margin:0;
  height:calc(100vh - var(--header-h));height:calc(100svh - var(--header-h));
  display:flex;align-items:center;justify-content:center;
  transform-origin:50% 50%;will-change:transform,opacity;pointer-events:none;
}

.hero-title{
  --o:1;
  --title-shift:-5px;                            /* positive = right, negative = left */
  font-family:var(--f-body);font-weight:300;font-style:normal;
  font-size:min(3.75vw,54px);line-height:1.08;
  text-transform:lowercase;letter-spacing:0;
  width:fit-content;max-width:none;
  white-space:nowrap;                            /* lines break only at the <br> tags */
  position:relative;left:var(--title-shift);
}
.hero-title::first-letter{text-transform:uppercase}

.hero-video-section{
  padding-bottom:0;
  scroll-margin-top:calc(-1 * var(--header-h));  /* video lands at the very top so the header hides */
}

.hero-video{
  --video-crop:.92;                              /* 1 = full video, .92 = cut 8% off the bottom, .9 = 10% */
  position:relative;
  width:100vw;margin-left:calc(50% - 50vw);
  height:calc(56.25vw * var(--video-crop));      /* 16:9 height, shortened from the bottom */
  overflow:hidden;background:var(--teal);
}
.hero-video video{width:100%;height:100%;object-fit:cover;object-position:50% 0}   /* top stays, bottom is trimmed */

/* video controls */
.video-controls{
  position:absolute;right:max(10px,1.2vw);top:50svh;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:max(5px,.5vw);z-index:2;
}
.video-controls button{
  display:flex;align-items:center;justify-content:center;
  width:max(26px,2.2vw);height:max(26px,2.2vw);
  color:var(--light);background:rgba(23,43,54,.65);
  border:1px solid var(--line);border-radius:50%;cursor:pointer;
  transition:background .3s,color .3s,border-color .3s;
}
.video-controls button:hover{background:var(--orange);color:var(--navy);border-color:var(--orange)}
.video-controls svg{width:50%;height:50%;fill:currentColor;stroke:none}
.video-controls .stroke{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.vc-play .ic-play,.vc-sound .ic-unmuted{display:none}
.vc-play.is-paused .ic-play{display:block}
.vc-play.is-paused .ic-pause{display:none}
.vc-sound.is-on .ic-unmuted{display:block}
.vc-sound.is-on .ic-muted{display:none}

/* video timeline (lives inside .hero-video, so it scrolls with the video) */
.video-timeline{
  position:fixed;left:0;right:0;top:0;height:20px;
  margin:0;padding:0;background:none;
  z-index:50;opacity:0;pointer-events:none;transition:opacity .25s;
}
.video-timeline.show{opacity:1;pointer-events:auto}
.video-timeline.force-hide{opacity:0 !important;pointer-events:none !important}
.hero-video .video-timeline{
  position:absolute !important;
  left:0;right:0;top:auto;
  bottom:3%;                                     /* distance from the bottom of the video: lower = line sits lower */
  z-index:5;
  opacity:1 !important;
  pointer-events:auto !important;
}

#videoProgress{
  --p:0%;
  -webkit-appearance:none;appearance:none;
  width:100%;height:20px;margin:0;
  background:transparent;cursor:pointer;display:block;outline:none;
}
#videoProgress::-webkit-slider-runnable-track{
  height:3px;
  background:linear-gradient(to right,var(--orange) var(--p),rgba(241,245,244,.35) var(--p));
}
#videoProgress::-moz-range-track{height:3px;background:rgba(241,245,244,.35)}
#videoProgress::-moz-range-progress{height:3px;background:var(--orange)}
#videoProgress::-webkit-slider-thumb{
  -webkit-appearance:none;width:12px;height:12px;margin-top:-4.5px;
  border-radius:50%;background:var(--orange);transform:scale(0);transition:transform .15s;
}
#videoProgress::-moz-range-thumb{
  width:12px;height:12px;border:0;border-radius:50%;
  background:var(--orange);transform:scale(0);transition:transform .15s;
}
.video-timeline:hover #videoProgress::-webkit-slider-thumb{transform:scale(1)}
.video-timeline:hover #videoProgress::-moz-range-thumb{transform:scale(1)}


/* ---------- 5. DISCIPLINES (sticky stacking) ---------- */
.disciplines{margin-top:clamp(16px,2vw,30px);position:relative}

.discipline{
  position:sticky;
  top:calc(var(--header-h) + var(--i) * var(--step));
  z-index:calc(var(--i) + 1);
  background:var(--navy);
  min-height:min(45vh,380px);
  padding-block:var(--pad);
  display:flex;align-items:center;

  --title:3.75vw;
  --gap:1.4vw;
  --copy:min(1.667vw,24px);
  --lines:3;                                     /* number of bullet points per section */
  --li-gap:.4;                                   /* space between bullet rows, as a multiple of the copy size */
  --cap-text:.727;
  --cap-num:.65;
  --block:calc(var(--title) * var(--cap-text) + var(--gap)
        + var(--copy) * (var(--lines) - 1 + var(--cap-text))
        + var(--copy) * var(--li-gap) * (var(--lines) - 1));
}

/* divider line: stays at the section top and fades out as the section sticks,
   so only the header's own line remains */
.discipline::before{
  content:"";position:absolute;left:var(--pad);right:var(--pad);top:0;
  height:1px;background:var(--line);pointer-events:none;
  /* --ls (0 to 1) is set by script.js from the scroll position */
  opacity:calc(1 - var(--ls,0));
}

.discipline .wrap{
  width:100%;
  display:grid;grid-template-columns:auto auto;
  justify-content:center;align-items:center;
  column-gap:5vw;
}

.d-num{
  --o:1;
  font-family:var(--f-title);font-weight:300;
  font-size:calc(var(--block) / var(--cap-num));
  line-height:1;color:var(--light);letter-spacing:-.02em;
  width:1.5em;
  text-box:trim-both cap alphabetic;
}
/* fixed column width: a long heading can never push the block sideways, so every section starts at the same left edge */
.d-body{padding-top:0;width:min(45.97vw,662px)}

.d-title{
  --o:1;
  display:block;
  white-space:nowrap;                            /* heading stays on one line, extra length just runs to the right */
  font-size:var(--title);font-weight:300;
  margin-bottom:var(--gap);
  text-box:trim-both cap alphabetic;
}
.d-title::before{
  content:"";display:inline-block;
  width:.6em;height:.6em;flex-shrink:0;
  border-radius:50%;background:var(--orange);
  margin-right:.5em;vertical-align:baseline;
  position:relative;top:.02em;
}

/* bullet list: same size and colour as the old paragraph copy */
.d-copy{
  --o:.75;
  list-style:none;
  font-family:var(--f-body);font-weight:400;font-style:normal;
  font-size:var(--copy);line-height:1;letter-spacing:0;
  width:100%;
  min-height:0;
  padding-left:calc(var(--title) * 1.1);         /* heading dot (.6em) + its gap (.5em): bullets start under the first letter of the heading */
  text-box:trim-end cap alphabetic;
}
/* each row: dot + text on one baseline (flex baseline alignment sits the dot's bottom on the letters' baseline) */
.d-copy li{
  display:flex;align-items:baseline;gap:.5em;
}
.d-copy li + li{margin-top:calc(var(--li-gap) * 1em)}
.d-copy li::before{
  content:"";flex:none;
  width:.6em;height:.6em;
  border-radius:50%;
  background:currentColor;                       /* same colour as the text */
}


/* entrance animation (same as the about page): number fades in, dot pops, heading slides in,
   copy rises. Layout is untouched; script.js adds .is-in when a section rises into view. */
@media (prefers-reduced-motion:no-preference){
  html .disciplines .discipline .d-num{transition:opacity .8s ease}
  html .disciplines .discipline .d-title,
  html .disciplines .discipline .d-copy{transition:opacity .8s ease,transform .8s cubic-bezier(.16,1,.3,1)}
  html .disciplines .discipline .d-title::before{transition:transform .6s cubic-bezier(.34,1.56,.64,1) .15s}
  html .disciplines .discipline .d-copy{transition-delay:.2s}

  .disciplines .discipline:not(.is-in) .d-num{opacity:0}
  .disciplines .discipline:not(.is-in) .d-title{opacity:0;transform:translate3d(-28px,0,0)}
  .disciplines .discipline:not(.is-in) .d-title::before{transform:scale(0)}
  .disciplines .discipline:not(.is-in) .d-copy{opacity:0;transform:translate3d(0,22px,0)}

  .disciplines .discipline.is-in .d-num{opacity:1}
  .disciplines .discipline.is-in .d-title{opacity:1;transform:none}
  .disciplines .discipline.is-in .d-copy{opacity:.75;transform:none}
}


/* ---------- 6. CLIENTS CAROUSEL ---------- */
.clients{
  /* top divider is drawn as a background so no sticky section can paint over it */
  background:
    linear-gradient(var(--line),var(--line)) var(--pad) 0 / calc(100% - 2 * var(--pad)) 1px no-repeat,
    var(--navy);
  position:relative;z-index:10;
  padding:clamp(28px,3.5vw,52px) 0 clamp(24px,3vw,44px);
  text-align:center;
}
.clients::before{display:none}
.clients h2{
  --o:1;
  font-family:var(--f-body);font-weight:500;font-size:32px;line-height:1.2;
  margin-bottom:clamp(40px,6vw,80px);color:var(--light);
}

.client-window{position:relative;width:60vw;max-width:900px;margin:0 auto;overflow:hidden}
.track{display:flex;width:100%;transition:transform .6s ease}
.client-logo{flex:0 0 calc(100% / 3);display:flex;align-items:center;justify-content:center;padding:0 10px}
.client-logo img{max-width:100%;height:60px;object-fit:contain}

.dots{display:flex;justify-content:center;gap:10px;margin-top:clamp(22px,2.4vw,34px)}
.dots button{
  width:10px;height:10px;border:none;border-radius:50%;
  background:rgba(241,245,244,.2);cursor:pointer;
  transition:background .25s,transform .25s;
}
.dots button:hover{background:rgba(241,245,244,.5)}
.dots button.active{background:var(--orange);transform:scale(1.25)}

/* legacy client boxes (kept in case any .client markup is still used) */
.client.reveal.in{
  transition:opacity 1.8s ease,transform 1.8s cubic-bezier(.16,1,.3,1),background-color .8s ease,border-color .3s ease;
  transition-delay:0s !important;
}
.client.reveal.in:hover{transform:translate3d(0,-4px,0);transition-duration:.3s}
.client:nth-child(n+5).reveal.in{transition-delay:.25s !important}


/* ---------- 7. CONTACT BUTTON + FOOTER ---------- */
.contact{
  text-align:center;
  padding:clamp(40px,8vw,120px) 0 clamp(50px,7vw,100px);
  background:var(--navy);position:relative;
}
.btn{
  display:flex;align-items:center;justify-content:center;
  width:min(17.2vw,247px);height:min(3.4vw,49.1px);
  margin:0 auto;
  border:1px solid var(--line);border-radius:min(.89vw,13px);
  font-size:24px;font-weight:400;
  transition:background .3s,color .3s,border-color .3s;
}
.contact .btn.reveal{--d:.1s}
.btn:hover,
.btn:focus-visible{
  background:var(--orange);color:var(--navy);border-color:var(--orange);
  font-weight:500;
}

.site-footer{
  background:var(--navy);position:relative;
  border-top:1px solid var(--line);
  margin:0 var(--pad);padding:26px 0 30px;
  font-family:var(--f-body);font-size:clamp(9px,.8vw,11px);font-weight:400;
}
.site-footer span{opacity:.5}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}
.footer-socials{display:flex;align-items:center;gap:16px}
.footer-socials a{
  display:flex;align-items:center;justify-content:center;
  color:var(--light);opacity:.6;
  transition:opacity .3s,color .3s,transform .3s;
}
.footer-socials a:hover{opacity:1;color:var(--orange);transform:translateY(-2px)}
.social-icon{width:clamp(16px,1.2vw,20px);height:clamp(16px,1.2vw,20px);fill:currentColor}


/* ---------- 8. ANIMATIONS ---------- */
.reveal{opacity:0;transform:translate3d(0,24px,0)}
.reveal.in{
  opacity:var(--o,1);transform:translate3d(0,0,0);
  transition:opacity .6s ease,transform .6s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--d,0s);
}
.reveal.out{opacity:0;transform:translate3d(0,0,0);transition:opacity .3s ease}

/* inside the stacked sections the text is always visible (no fade) */
.discipline.reveal,.discipline.reveal.in,.discipline.reveal.out,
.discipline .reveal,.discipline .reveal.in,.discipline .reveal.out{
  opacity:var(--o,1);transform:none;transition:none;
}

/* highlighted word: orange bar wipes in left to right */
.hl{
  position:relative;display:inline-block;isolation:isolate;white-space:nowrap;
  text-box:trim-both cap text;
}
.hl::before,
.hl::after{animation:hl-in 1.1s cubic-bezier(.77,0,.175,1) .6s 1 both}
@keyframes hl-in{
  from{clip-path:inset(0 100% 0 0)}
  to  {clip-path:inset(0 0 0 0)}
}
/* Adjusted inset to stop it touching the line above, while keeping the bottom aligned for "y" descenders */
.hl::before{
  content:"";
  position:absolute;
  inset:-0.05em 0 -0.08em; /* Equal visual padding top and bottom */
  background:var(--orange);
  z-index:-1;
}.hl::after{
  content:attr(data-text);position:absolute;inset:0;
  text-box:trim-both cap text;color:var(--navy);
}

/* after the first load the first-screen text stays put (no replay) */
.te-seen .hero-title.reveal,
.te-seen .about-intro .reveal,
.te-seen .c-card.reveal{opacity:var(--o,1);transform:none;transition:none}
.te-seen .hl::before,
.te-seen .hl::after{animation:none;clip-path:none}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .track{transition:none}
  .hl::before,.hl::after{animation:none;clip-path:none}
}


/* ---------- 9. ABOUT PAGE ---------- */
.about{padding-top:0}

/* statement: same look as the home statement, alone on the first screen */
.about-intro{
  min-height:calc(100vh - var(--header-h));
  min-height:calc(100svh - var(--header-h));
  display:flex;align-items:center;justify-content:center;
  will-change:opacity;
}
/* same as the home hero: the statement is pinned to the screen (position:fixed), so it stays perfectly
   still while the page scrolls; script.js zooms it out and fades it before the first section arrives */
.about-intro .wrap{
  position:fixed;left:0;right:0;top:var(--header-h);
  width:100%;max-width:none;margin:0;
  height:calc(100vh - var(--header-h));height:calc(100svh - var(--header-h));
  display:flex;align-items:center;justify-content:center;
  transform-origin:50% 50%;will-change:transform,opacity;pointer-events:none;
}
.about-intro p{
  --o:1;
  width:fit-content;
  max-width:100%;               /* ensures it doesn't overflow the screen */
  margin:0 auto;                /* centers the text block */
  font-family:var(--f-body);
  font-weight:300;
  font-size:min(3.4vw,50px);
  line-height:1.12;
  letter-spacing:0 !important;  /* Forces normal letters */
  word-spacing:0 !important;    /* Forces normal words */
  white-space:nowrap;                /* keeps your <br> line breaks exactly as they are */
  text-align:left; 
}
.about-intro .ln{display:inline-block;white-space:nowrap;letter-spacing: 0 !important;
    word-spacing: 0 !important;}

/* the points use the same sticky stacking as the home page disciplines (no numbers):
   each section slides up under the header and the next one stacks on top of it.
   script.js sets --i (order) and --ls (divider fade) exactly like the home page. */
.about-points{margin-top:clamp(16px,2vw,30px);position:relative}
.about-point{
  position:sticky;
  top:calc(var(--header-h) + var(--i,0) * var(--step));
  z-index:calc(var(--i,0) + 1);
  background:var(--navy);
  min-height:min(45vh,380px);
  padding-block:var(--pad);
  display:flex;flex-direction:column;justify-content:center;
}
.about-point::before{
  content:"";position:absolute;left:var(--pad);right:var(--pad);top:0;
  height:1px;background:var(--line);pointer-events:none;
  opacity:calc(1 - var(--ls,0));
}
/* text block centred like the home page, text left-aligned inside it */
.about-point{--ab-w:min(72vw,1000px)}
/* heading (orange dot), copy and button all start on the same left edge */
.about-point .about-title,
.about-point .about-copy{width:var(--ab-w);margin-left:calc((100% - var(--ab-w)) / 2);margin-right:0}
.about-point .about-cta{margin-left:calc((100% - var(--ab-w)) / 2)}
.about-intro .reveal,
.about-point .reveal{opacity:1;transform:none;transition:none}
.about-point .about-copy.reveal{opacity:.75}

/* simple entrance animation: dot pops, heading slides in, line draws, copy and button rise */
@media (prefers-reduced-motion:no-preference){
  .about-points .about-point .about-title,
  .about-points .about-point .about-copy,
  .about-points .about-point .about-cta{
    transition:opacity .8s ease,transform .8s cubic-bezier(.16,1,.3,1);
  }
  .about-points .about-point .about-title::before{transition:transform .6s cubic-bezier(.34,1.56,.64,1) .15s}
  .about-points .about-point .about-copy{transition-delay:.2s}
  .about-points .about-point .about-cta{transition-delay:.35s}

  .about-points .about-point:not(.is-in) .about-title{opacity:0;transform:translate3d(-28px,0,0)}
  .about-points .about-point:not(.is-in) .about-title::before{transform:scale(0)}
  .about-points .about-point:not(.is-in) .about-copy,
  .about-points .about-point:not(.is-in) .about-cta{opacity:0;transform:translate3d(0,22px,0)}

  .about-points .about-point.is-in .about-title{opacity:1;transform:none}
  .about-points .about-point.is-in .about-copy{opacity:.75;transform:none}
  .about-points .about-point.is-in .about-cta{opacity:1;transform:none}
}

.about-title{
  --o:1;
  display:block;
  font-family:var(--f-body);font-weight:300;
  font-size:min(3.75vw,54px);line-height:1;
  margin-bottom:clamp(10px,1.4vw,20px);
}
.about-title::before{
  content:"";display:inline-block;width:.6em;height:.6em;border-radius:50%;
  background:var(--orange);margin-right:.5em;vertical-align:baseline;
  position:relative;top:.02em;
}
.about-copy{
  --o:.9;
  width:75vw;max-width:1080px;
  font-family:var(--f-body);font-weight:400;font-size:24px;
  line-height:1.17;letter-spacing:0;
}

/* CTA on the last point (left-aligned under the copy; use margin-inline:auto to centre) */
.about-cta{margin:clamp(16px,2vw,28px) 0 0}


/* ---------- 10. CONTACT PAGE ---------- */
/* everything is centred and sized by screen height, so the whole page fits without scrolling */
.cpage{
  min-height:calc(100vh - var(--header-h));
  min-height:calc(100svh - var(--header-h));
  padding:2vh 0;
  display:flex;align-items:center;
}
.cpage .wrap{
  width:100%;
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(14px,3.6vh,44px);
}

.c-title{
  --o:1;
  display:block;
  font-family:var(--f-body);font-weight:300;
  font-size:clamp(22px,min(3.75vw,5.2vh),54px);line-height:1;
}
.c-title::before{
  content:"";display:inline-block;width:.6em;height:.6em;border-radius:50%;
  background:var(--orange);margin-right:.5em;position:relative;top:.02em;
}

/* form card */
.c-card{
  width:min(980px,90vw);margin:0;
  padding:clamp(16px,3.4vh,44px) clamp(22px,3.4vw,52px);
  border:1px solid var(--line);
  border-radius:clamp(14px,1.8vw,26px);
}
.c-form{
  margin-top:clamp(12px,2.6vh,32px);
  display:grid;grid-template-columns:1fr 1fr;
  column-gap:clamp(14px,2vw,28px);
}
.c-form .c-field:has(#te_company),
.c-form .c-field:has(textarea){grid-column:1 / -1}
.c-field{margin-bottom:clamp(8px,2vh,24px)}
.c-field label{
  display:block;
  font-family:var(--f-body);font-weight:400;
  font-size:clamp(13px,min(1.5vw,2.1vh),22px);line-height:1.2;
  margin-bottom:clamp(5px,.9vh,12px);
}
.c-field input,
.c-field textarea{
  width:100%;background:transparent;color:var(--light);
  font-family:var(--f-body);font-weight:400;
  font-size:clamp(13px,min(1.5vw,2.1vh),22px);
  border:1px solid rgba(241,245,244,.55);
  border-radius:clamp(7px,.9vw,13px);
  padding:0 1em;height:clamp(32px,5vh,50px);
  outline:none;transition:border-color .3s;
}
.c-field textarea{height:clamp(64px,11vh,150px);padding:.7em 1em;resize:vertical;display:block}
.c-field input:focus,
.c-field textarea:focus{border-color:var(--orange)}

.c-send{
  grid-column:1 / -1;justify-self:start;
  display:flex;align-items:center;justify-content:center;
  width:min(18.1vw,230px);height:clamp(36px,5.4vh,52px);
  min-width:150px;min-height:36px;
  background:transparent;color:var(--light);cursor:pointer;
  font-family:var(--f-body);font-weight:400;
  font-size:clamp(13px,min(1.5vw,2.1vh),22px);
  border:1px solid var(--line);border-radius:min(.89vw,13px);
  transition:background .3s,color .3s,border-color .3s;
}
.c-send:hover,
.c-send:focus-visible{background:var(--orange);color:var(--navy);border-color:var(--orange);font-weight:500}

.c-note{font-size:clamp(13px,min(1.5vw,2.1vh),22px);margin-top:clamp(8px,1.4vh,20px);line-height:1.3}
.c-note.ok{color:var(--orange)}
.c-note.bad{color:#ff8a7a}

/* hidden spam trap */
.c-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* info row: location (left) | email (centre) | phone (right) */
.c-info{
  width:min(980px,90vw);margin:0;
  display:grid;grid-template-columns:auto auto auto;justify-content:space-between;align-items:start;
}
.c-stack{display:contents}                       /* email + phone become direct grid columns */
.c-info > .c-block:first-child{justify-self:start}
.c-stack .c-block:first-child{justify-self:center;text-align:left}
.c-stack .c-block:last-child{justify-self:end}

.c-block .c-title{
  display:flex;align-items:center;gap:.5em;
  font-size:clamp(18px,min(2.4vw,3.6vh),34px);
  margin-bottom:clamp(8px,1.6vh,18px);
}
.c-block .c-title::before{display:none}          /* icons replace the orange dots here */
.c-stack .c-block:first-child .c-title{justify-content:flex-start}
.c-ico{
  width:1em;height:1em;flex:none;
  fill:none;stroke:var(--orange);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
}

.c-info{--c-fs:clamp(13px,min(1.5vw,2.4vh),20px)}
.c-block address,
.c-mail{
  font-style:normal;font-family:var(--f-body);font-weight:400;
  font-size:var(--c-fs);line-height:1.25;
}
/* block-level so every text line (address, email, phone) sits the same distance under its title */
.c-mail{display:block;width:fit-content;text-decoration:underline;text-underline-offset:3px;transition:color .3s}
.c-mail:hover{color:var(--orange)}

.c-ico-link{display:flex;flex:none;transition:transform .3s}
.c-ico-link:hover{transform:translateY(-2px)}
.c-addr{transition:color .3s}
.c-addr:hover{color:var(--orange)}


/* contact page only: no slide-up on entry (a plain fade, nothing moves). Other pages keep their animations. */
.cpage .reveal,
.cpage .reveal.in,
.cpage .reveal.out{transform:none}
.cpage .reveal.in{transition:opacity .6s ease;transition-delay:var(--d,0s)}


/* =====================================================================
   11. MOBILE + TABLET  (900px and below)
   ===================================================================== */
@media (max-width:900px){

  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  :root{--pad:5vw}

  /* ---- header ---- */
  .site-header{padding:2.8vw 0 2.4vw}
  .logo{--logo-fs:clamp(13px,4.5vw,28px);--logo-up:0px}

  .menu-toggle{display:flex;width:max(28px,7.2vw);height:max(28px,7.2vw);gap:5px}
  .menu-toggle span{width:20px}
  .menu-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .menu-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  .main-nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    background:var(--navy);border-bottom:1px solid var(--line);
    padding:4px var(--pad) 14px;
  }
  .main-nav.open{display:block}
  .main-nav ul{flex-direction:column;gap:0}
  .main-nav a{
    display:block;font-size:clamp(13px,3.7vw,20px);
    padding:13px 0 11px;border-bottom:1px solid var(--line);
  }
  .main-nav a::after{display:none}
  .main-nav li:last-child a{border-bottom:0}
  .main-nav a:active{color:var(--orange)}

  /* ---- hero ---- */
  .hero{
    height:calc(100vh - var(--header-h));height:calc(100svh - var(--header-h));
    min-height:0;padding:0;margin-bottom:0;box-sizing:border-box;
  }
  .hero .wrap{
    height:calc(100vh - var(--header-h));height:calc(100svh - var(--header-h));
    padding:0 var(--pad);
  }
  .hero-title{
    --title-shift:0px;
    font-size:min(8.6vw,60px);line-height:1.15;     
    white-space:normal;width:100%;max-width:none;
    text-align:left;                               
    margin:0 auto;
    text-wrap:balance;                             
  }
  .hero-title br{display:none}                     /* FIX: Hide BR tags so text wraps naturally with spaces */
  .video-controls{top:50%;right:2.5vw}
  .video-controls button{width:max(24px,6.4vw);height:max(24px,6.4vw)}
  .hero-video .video-timeline{bottom:2%}

  /* ---- disciplines ---- */
  .disciplines{margin-top:6vw}                   
  .discipline{
    min-height:min(42vh,330px);min-height:min(42svh,330px);   
    padding-block:4.5vw;
    --title:clamp(13px,4vw,28px);                
    --gap:clamp(6px,1.6vw,11px);
    --copy:clamp(10px,2.9vw,16px);                
    --li-gap:.5;
    --cap-text:.727;
    --cap-num:.65;
    --block:calc(var(--title) * var(--cap-text) + var(--gap)
          + var(--copy) * (var(--lines) - 1 + var(--cap-text))
          + var(--copy) * var(--li-gap) * (var(--lines) - 1));
  }
  .discipline .wrap{
    grid-template-columns:auto auto;               
    justify-content:center;
    align-items:center;
    column-gap:4vw; /* Slightly wider gap for the bigger numbers */
  }
  
  /* ---- FIX: Increased Mobile 01, 02 size ---- */
  .d-num{
    font-size:calc(var(--block) / var(--cap-num) * .97); /* Increased from .75 to match text height */
    width:1.35em;                                  
    line-height:1;
    align-self:center;
  }
  
  .d-body{width:58vw;min-width:0}                
  .d-copy{min-height:0;line-height:1}
  .d-copy li{white-space:nowrap}                 

  /* ---- clients ---- */
  .clients{padding:6vw 0 5vw}
  .clients h2{font-size:clamp(16px,4.5vw,26px);margin-bottom:6vw}
  .client-window{width:90vw}
  .client-logo{flex:0 0 calc(100% / 2);padding:0 8px}
  .client-logo img{height:clamp(29px,8vw,48px)}
  .dots{margin-top:4.5vw;gap:8px}
  .dots button{width:8px;height:8px}

  /* ---- contact button + footer ---- */
  .contact{padding:7vw 0 6vw}
  .btn{
    width:min(42vw,220px);height:min(9.6vw,42px);
    border-radius:min(2.2vw,11px);
    font-size:clamp(11px,3.2vw,16px);
  }
  .site-footer{padding:4vw 0;font-size:clamp(9px,2.3vw,11px)}
  .footer-inner{flex-direction:column;gap:3.5vw;text-align:center}
  .footer-socials{gap:4vw}
  .social-icon{width:clamp(16px,4.8vw,22px);height:clamp(16px,4.8vw,22px)}

  /* ---- about page ---- */
  .about-points{margin-top:0}
  .about-point{min-height:min(42vh,330px);min-height:min(42svh,330px);padding-block:4.5vw;--ab-w:90vw;align-items:flex-start}   
  .about-point .about-title{width:auto;max-width:100%;margin-left:0;margin-right:0}
  .about-point .about-copy{width:var(--ab-w);max-width:100%;margin-left:0;margin-right:0}
  
  .about-intro{
    min-height:0;padding:0;box-sizing:border-box;
    height:calc(100vh - var(--header-h));height:calc(100svh - var(--header-h));
  }
  .about-intro .wrap{
    height:calc(100vh - var(--header-h));height:calc(100svh - var(--header-h));
    padding:0 var(--pad);
  }
  
  /* ---- FIX: About intro spacing (whatmatters / heartbeatand) ---- */
  .about-intro p{
    font-size:min(8.6vw,60px);line-height:1.15;     
    white-space:normal;width:100%;max-width:100%;margin:0 auto;text-align:left;
    text-wrap:balance;                             
  }
  .about-intro p br{display:none} /* Hide BR tags so text wraps naturally with spaces */
  .about-intro .ln{display:inline;white-space:normal;margin-right:.26em}  
  .about-intro .ln:last-child{margin-right:0}
  
  .about-intro p,
  .about-intro .ln{
    font-family:var(--f-body) !important;
    font-weight:300 !important;font-style:normal !important;
    letter-spacing:0 !important;word-spacing:0 !important;
    font-synthesis:none;
  }
  
  .about-title{font-size:clamp(15px,4.6vw,30px);margin-bottom:clamp(6px,1.6vw,11px)}
  .about-copy{width:100%;font-size:clamp(11px,2.9vw,16px);line-height:1.35;text-wrap:balance}   
  .about-cta{margin-top:6vw}

  /* ---- contact page ---- */
  .cpage{display:block;min-height:0;padding:8vw 0}
  .cpage .wrap{display:block}
  .c-title{font-size:clamp(16px,5.1vw,30px)}
  .c-card{width:100%;padding:5vw}
  .c-form{display:block;margin-top:5vw}
  .c-field{margin-bottom:5vw}
  .c-field label{margin-bottom:2vw}
  .c-field label,.c-field input,.c-field textarea,.c-send,
  .c-block address,.c-mail,.c-note{font-size:clamp(12px,3.1vw,16px)}
  .c-field input{height:max(36px,9vw)}
  .c-field textarea{height:max(100px,28vw)}
  .c-send{width:min(42vw,210px);height:max(38px,9.6vw);min-width:0;min-height:38px}

  .c-info{width:100%;margin-top:8vw;grid-template-columns:1fr;row-gap:6vw}
  .c-stack{display:flex;flex-direction:column;row-gap:6vw}
  .c-info > .c-block,
  .c-stack .c-block{justify-self:start;text-align:left}
  .c-stack .c-block:first-child .c-title{justify-content:flex-start}
  .c-stack .c-block:first-child .c-mail{margin-inline:0}
  .c-block .c-title{font-size:clamp(16px,5.1vw,30px);margin-bottom:2.4vw}
}