/* =================================================================
   BIHAN ARCHITECTS — styles.css
   Design tokens come straight from the Figma file.
   Sections are clearly marked so each is easy to tweak later.
   ================================================================= */

/* ---------- Design tokens ---------- */
:root{
  --sand:#F4F1EC;        /* hero / page background */
  --paper:#FAF8F4;       /* alt section background */
  --white:#FFFFFF;
  --ink:#1A1A1A;         /* headings */
  --graphite:#333333;    /* body text */
  --muted:#9A9A9A;       /* secondary text */
  --line:#D8D5CE;        /* hairlines */
  --clay:#9C6B3F;        /* accent */
  --dark:#1A1A1A;        /* contact section bg */
  --dark-text:#EDEAE4;
  --dark-muted:#A8A49C;

  --maxw:1440px;
  --pad:clamp(24px, 5vw, 72px);   /* horizontal page padding */
  --nav-h:88px;

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset / base ---------- */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--sand);
  color:var(--graphite);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
section{scroll-margin-top:var(--nav-h);}

.container{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--pad);
}

/* visually hidden but readable by search engines / screen readers */
.visually-hidden{
  position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease);}
.reveal.is-visible{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
}

/* =================================================================
   NAV
   ================================================================= */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:50;
  transition:background .4s var(--ease),box-shadow .4s var(--ease);
}
.nav__inner{
  max-width:var(--maxw);margin-inline:auto;
  height:var(--nav-h);
  padding-inline:var(--pad);
  display:flex;align-items:center;justify-content:space-between;
}
.nav__brand img{height:22px;width:auto;}
.nav__links{display:flex;gap:44px;}
.nav__links a{
  font-size:14px;letter-spacing:.02em;color:var(--graphite);
  position:relative;padding-block:4px;transition:color .25s var(--ease);
}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:1px;
  background:var(--ink);transition:width .3s var(--ease);
}
.nav__links a:hover{color:var(--ink);}
.nav__links a:hover::after{width:100%;}

/* nav background once scrolled past hero */
.nav.is-scrolled{background:rgba(244,241,236,.92);backdrop-filter:blur(8px);box-shadow:0 1px 0 var(--line);}

/* burger (mobile only) */
.nav__burger{
  display:none;background:none;border:0;cursor:pointer;
  width:28px;height:20px;position:relative;
}
.nav__burger span{
  position:absolute;left:0;width:100%;height:1.5px;background:var(--ink);
  transition:transform .3s var(--ease),opacity .3s var(--ease),top .3s var(--ease);
}
.nav__burger span:nth-child(1){top:2px;}
.nav__burger span:nth-child(2){top:9px;}
.nav__burger span:nth-child(3){top:16px;}
body.menu-open .nav__burger span:nth-child(1){top:9px;transform:rotate(45deg);}
body.menu-open .nav__burger span:nth-child(2){opacity:0;}
body.menu-open .nav__burger span:nth-child(3){top:9px;transform:rotate(-45deg);}

/* mobile menu overlay */
.mobile-menu{
  position:fixed;inset:0;z-index:45;background:var(--sand);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s var(--ease);
}
body.menu-open .mobile-menu{opacity:1;visibility:visible;}
.mobile-menu__links{display:flex;flex-direction:column;gap:28px;text-align:center;}
.mobile-menu__links a{font-size:28px;font-weight:300;color:var(--ink);}

/* =================================================================
   HERO
   ================================================================= */
.hero{
  min-height:100svh;
  background:var(--sand);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding:calc(var(--nav-h) + 24px) var(--pad) 48px;
  position:relative;
}
.hero__center{display:flex;flex-direction:column;align-items:center;gap:30px;}
.hero__logo{width:min(560px,80vw);height:auto;}
.hero__slogan{
  font-weight:300;font-size:clamp(17px,2vw,22px);color:var(--graphite);
}
.hero__scroll{
  position:absolute;bottom:40px;left:50%;transform:translateX(-50%);
  font-size:12px;letter-spacing:.16em;color:var(--muted);
}

/* =================================================================
   VISUAL — crossfade on hover
   (before image shown by default, after image fades in on hover/focus)
   ================================================================= */
.visual{width:100%;}
.visual__frame{
  position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;
  background:var(--paper);cursor:pointer;outline:none;
}
.visual__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.visual__img--after{opacity:0;transition:opacity .8s var(--ease);}

/* Desktop / devices with a real pointer: crossfade on hover or keyboard focus */
@media (hover:hover){
  .visual__frame:hover .visual__img--after,
  .visual__frame:focus-visible .visual__img--after{opacity:1;}
}
/* Toggled state (used by tap-to-reveal on touch devices) */
.visual__frame.is-revealed .visual__img--after{opacity:1;}

/* "Tap to reveal" hint — only on touch devices, hidden once revealed */
.visual__hint{
  position:absolute;left:50%;bottom:20px;transform:translateX(-50%);
  display:none;pointer-events:none;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#fff;
  background:rgba(20,20,20,.45);backdrop-filter:blur(4px);
  padding:8px 16px;border-radius:100px;transition:opacity .3s var(--ease);
}
/* hint not needed — on touch the reveal happens automatically on scroll */

/* =================================================================
   Shared bits
   ================================================================= */
.eyebrow{font-weight:500;font-size:14px;letter-spacing:.06em;color:var(--ink);}

/* =================================================================
   ABOUT
   ================================================================= */
.about{background:var(--white);}
.about__inner{
  display:grid;grid-template-columns:1fr 488px;gap:88px;align-items:stretch;
}
.about__text{
  display:flex;flex-direction:column;justify-content:space-between;gap:40px;
}
.about__top{display:flex;flex-direction:column;gap:24px;}
.about__lead{
  font-weight:300;font-size:clamp(26px,2.4vw,32px);line-height:1.3;
  color:var(--ink);max-width:24ch;
}
.about__body{display:flex;flex-direction:column;gap:24px;}
.about__body p{font-size:17px;line-height:1.65;color:var(--graphite);max-width:62ch;}
.about__facts{
  list-style:none;display:flex;justify-content:space-between;gap:24px;
  padding-top:24px;border-top:1px solid var(--line);
}
.about__facts li{font-weight:500;font-size:13px;letter-spacing:.02em;color:var(--ink);}
.about__photo{aspect-ratio:122/170;overflow:hidden;background:var(--sand);}
.about__photo img{width:100%;height:100%;object-fit:cover;}

/* =================================================================
   SERVICES + ACCORDION
   ================================================================= */
.services{background:var(--paper);}
.section-title{font-weight:300;font-size:clamp(32px,3.4vw,44px);color:var(--ink);line-height:1.1;}
.eyebrow--muted{color:var(--muted);}
.services__head{
  display:flex;justify-content:space-between;align-items:center;
  gap:24px;margin-bottom:48px;
}

.accordion{border-top:1px solid var(--line);}
.acc-item{border-bottom:1px solid var(--line);}
.acc-head{
  width:100%;background:none;border:0;cursor:pointer;color:var(--ink);
  display:flex;align-items:center;gap:32px;padding:28px 0;text-align:left;
}
.acc-num{flex:none;width:24px;font-size:15px;letter-spacing:.04em;color:var(--muted);}
.acc-title{
  flex:1;font-weight:300;font-size:clamp(20px,2.2vw,30px);line-height:1.2;
  transition:color .25s var(--ease);
}
.acc-head:hover .acc-title{color:var(--clay);}
.acc-icon{flex:none;width:18px;height:18px;position:relative;}
.acc-icon::before{
  content:"";position:absolute;left:50%;top:50%;
  width:9px;height:9px;
  border-right:1.5px solid var(--muted);
  border-bottom:1.5px solid var(--muted);
  transform:translate(-50%,-75%) rotate(45deg);   /* chevron pointing down */
  transition:transform .35s var(--ease),border-color .25s var(--ease);
}
.is-open .acc-icon::before{
  transform:translate(-50%,-25%) rotate(225deg);  /* chevron pointing up */
  border-color:var(--clay);
}
.acc-head:hover .acc-icon::before{border-color:var(--ink);}
.is-open .acc-head:hover .acc-icon::before{border-color:var(--clay);}

.acc-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease);}
.is-open .acc-panel{grid-template-rows:1fr;}
.acc-panel__inner{overflow:hidden;}
.acc-panel__inner p{
  max-width:62ch;padding:0 0 32px 56px;
  color:var(--graphite);font-size:16px;line-height:1.65;
}

.text-link{
  display:inline-flex;align-items:center;gap:10px;margin-top:48px;
  font-weight:500;font-size:15px;letter-spacing:.02em;color:var(--ink);
}
.text-link span{color:var(--clay);transition:transform .3s var(--ease);}
.text-link:hover span{transform:translateY(3px);}

/* =================================================================
   PROJECTS
   ================================================================= */
.projects{background:var(--white);}
.projects__head{
  display:flex;justify-content:space-between;align-items:center;
  gap:24px;margin-bottom:56px;
}
.projects__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px 40px;}
.project-card{
  display:flex;flex-direction:column;gap:14px;
  background:none;border:0;padding:0;text-align:left;cursor:pointer;
  color:inherit;font:inherit;
}
.project-card__img{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--sand);border:1px solid var(--line);}
.project-card__img img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ease),opacity .6s var(--ease);
}
.pc-white{opacity:1;}   /* white version shown by default (sits on top) */
.project-card:hover .project-card__img img{transform:scale(1.04);}
/* desktop: reveal the colour render on hover */
@media (hover:hover){ .project-card:hover .pc-white{opacity:0;} }
/* touch devices: show the colour version straight away (tap opens the video) */
@media (hover:none){ .pc-white{opacity:0;} }
.project-card:focus-visible{outline:2px solid var(--clay);outline-offset:6px;}
.project-card__name{font-weight:500;font-size:19px;color:var(--ink);}
.project-card__meta{font-size:13px;letter-spacing:.02em;color:var(--muted);}
.project-card__svc{font-size:12px;color:#B5B1A8;}
.project-card__tag{
  position:absolute;top:12px;right:12px;z-index:2;
  font-size:11px;font-weight:500;letter-spacing:.12em;color:#fff;
  background:rgba(20,20,20,.55);backdrop-filter:blur(4px);
  padding:5px 11px;border-radius:100px;pointer-events:none;
}
.projects__more{margin-top:56px;font-size:17px;color:var(--muted);}
.projects__more a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;}
.projects__more a:hover{color:var(--clay);}

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed;inset:0;z-index:100;background:rgba(20,20,20,.94);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s var(--ease);
}
.lightbox.is-open{opacity:1;visibility:visible;}
.lightbox__stage{display:flex;align-items:center;justify-content:center;width:100%;height:100%;}
.lightbox__video{
  max-width:86vw;max-height:80vh;width:auto;height:auto;
  background:#000;box-shadow:0 24px 70px rgba(0,0,0,.45);
}
.lightbox__model{
  display:none;background:#ffffff;
  width:min(92vw,1100px);height:min(82vh,760px);
  box-shadow:0 24px 70px rgba(0,0,0,.18);
  --poster-color:transparent;
}
/* light popup when showing a 3D model (model on white, dark close button) */
.lightbox.is-model{background:rgba(244,241,236,.96);}
.lightbox.is-model .lightbox__close{color:var(--ink);}
.lightbox.is-model .lightbox__caption{color:#6b6660;}
.lightbox__close{
  position:absolute;top:22px;right:30px;background:none;border:0;z-index:2;
  color:#EDEAE4;font-size:36px;line-height:1;cursor:pointer;opacity:.8;transition:opacity .2s;
}
.lightbox__close:hover{opacity:1;}
.lightbox__caption{
  position:absolute;bottom:24px;left:0;width:100%;text-align:center;
  color:#C9C5BD;font-size:13px;letter-spacing:.05em;
}
body.no-scroll{overflow:hidden;}

/* =================================================================
   Section spacing
   ================================================================= */
.section{padding-block:clamp(72px,12vw,120px);}

/* =================================================================
   CONTACT / FOOTER
   ================================================================= */
.contact{
  background:var(--dark);color:var(--dark-text);
  padding-block:clamp(80px,12vw,120px) 40px;
}
.contact__title{
  font-weight:300;font-size:clamp(40px,6vw,64px);line-height:1.05;color:var(--dark-text);
}
.contact__sub{
  margin-top:24px;font-size:clamp(17px,2vw,20px);color:var(--dark-muted);max-width:48ch;
}
.contact__info{display:flex;flex-wrap:wrap;gap:96px;margin-top:56px;}
.contact__item{display:flex;flex-direction:column;gap:8px;}
.contact__label{
  font-weight:500;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#7A766E;
}
.contact__item a,
.contact__item > span:not(.contact__label){
  font-size:17px;color:var(--dark-text);transition:color .2s var(--ease);
}
.contact__item a:hover{color:#fff;}
.contact__foot{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  margin-top:clamp(80px,14vw,140px);padding-top:24px;border-top:1px solid #333028;
  font-size:12px;letter-spacing:.02em;color:#7A766E;
}
.contact__mark{font-weight:500;letter-spacing:.16em;}

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media (max-width:760px){
  :root{--nav-h:64px;}
  .nav__links{display:none;}
  .nav__burger{display:block;}
  .nav__brand img{height:18px;}
  .visual__frame{aspect-ratio:16/10;}

  /* About → single column, photo below text */
  .about__inner{grid-template-columns:1fr;gap:32px;}
  .about__text{justify-content:flex-start;gap:24px;}
  .about__lead{max-width:none;}
  .about__body p{max-width:none;}
  .about__facts{flex-direction:column;gap:10px;align-items:flex-start;}
  .about__photo{aspect-ratio:122/150;}

  /* Services */
  .services__head{margin-bottom:32px;}
  .acc-head{gap:16px;padding:20px 0;}
  .acc-num{width:20px;}
  .acc-panel__inner p{padding-left:0;padding-bottom:24px;}
  .text-link{margin-top:32px;}

  /* Projects → single column on phones (all 6 shown) */
  .projects__head{margin-bottom:32px;}
  .projects__grid{grid-template-columns:1fr;gap:32px;}
  .projects__more{margin-top:36px;font-size:15px;}
  .lightbox__video{max-width:94vw;max-height:74vh;}
  .lightbox__model{width:94vw;height:72vh;}
  .lightbox__close{top:14px;right:18px;}

  /* Contact */
  .contact__info{flex-direction:column;gap:28px;margin-top:40px;}
  .contact__foot{flex-direction:column;align-items:flex-start;gap:16px;margin-top:64px;}
}

/* Tablet: 2-column projects grid */
@media (min-width:761px) and (max-width:1024px){
  .projects__grid{grid-template-columns:repeat(2,1fr);}
}