/* =====================================================================
   MVP layer: colour (terracotta + olive), buttons, line ornaments,
   icons, FAQ, form, project pages, language switch, mobile call bar.
   Type rule: serif ONLY for large display headings; everything small
   is set in the sans, uppercase with tracking where it is a label.
   ===================================================================== */
:root{--clay:#B5623F;--clay-dark:#9A4F30;--olive:#3F4A3C;--night:#2B332A;--night-muted:#a9b0a3;--sage:#B5623F}
em{color:var(--clay)}
.architect blockquote em{color:#E0A283}
.eyebrow::before,.eyebrow::after{background:var(--clay);opacity:1}
.eyebrow{color:var(--olive)}
.architect .eyebrow{color:#c9cfc3}
.fact b{color:var(--olive)}
.nav a:hover,.nav a[aria-current]{border-color:var(--clay)}
.filters button[aria-pressed=true]{border-color:var(--clay);color:var(--clay)}
.link{color:var(--clay);border-color:var(--clay)}
.architect .link{color:#E0A283;border-color:#E0A283}
.loader svg{stroke:var(--clay)}
::selection{background:var(--clay);color:#fff}
.timeline div::before{background:#E0A283}
.bio-timeline div::before{background:var(--clay)}
.bio-timeline,.steps{border-top-color:var(--olive)}

/* ---------- type rule: small text is never serif ---------- */
.brand b{font:600 13px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.brand small{margin-top:6px;letter-spacing:.2em}
.work figcaption{align-items:center;padding:16px 0}
.work .t{font:500 13px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.work .meta{font:400 12px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.work:hover .t{color:var(--clay)}
.timeline b{font:600 14px/1 var(--sans);letter-spacing:.08em}
.footer .big{font:600 13px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px}
.h3{font:500 clamp(17px,1.35vw,20px)/1.25 var(--sans);letter-spacing:.02em}
.step .h3{text-transform:uppercase;letter-spacing:.14em;font-size:14px}
.bio-row .h3{font:300 clamp(26px,2.4vw,36px)/1.1 var(--serif);letter-spacing:-.01em}
.lb-bottom .t{font:500 14px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.architect blockquote{font-size:clamp(26px,2.4vw,38px)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;background:var(--clay);color:#fff;font:500 13px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--clay);border-radius:2px;white-space:nowrap;transition:background .35s var(--ease),border-color .35s,color .35s,transform .35s var(--ease)}
.btn:hover{background:var(--olive);border-color:var(--olive);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn-sm{min-height:40px;padding:0 16px;font-size:12px;letter-spacing:.06em}
.btn-row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:clamp(32px,3.4vw,48px)}

/* header end: language + call button */
.header-end{justify-self:end;display:flex;align-items:center;gap:18px}
.lang{display:inline-flex;gap:4px;font:500 11px/1 var(--sans);letter-spacing:.14em}
.lang a{padding:6px 7px;color:var(--muted);border-bottom:1px solid transparent}
.lang a[aria-current]{color:var(--ink);border-color:var(--clay)}
.menu-foot .lang{margin-bottom:10px}

/* line ornaments: architectural drawings that draw themselves */
.section,.page-hero,.bio-top{position:relative}
.section > .wrap,.page-hero > .wrap,.bio-top > .wrap{position:relative;z-index:1}
.orn{position:absolute;z-index:0;pointer-events:none;fill:none;stroke:var(--clay);stroke-width:1;opacity:.5}
.orn-dim *{vector-effect:non-scaling-stroke}
.orn-dim.draw [pathLength]{stroke-dasharray:none;stroke-dashoffset:0}
.draw [pathLength]{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.6s var(--ease)}
.draw.in [pathLength]{stroke-dashoffset:0}
.draw.in [pathLength]:nth-child(2){transition-delay:.25s}
.draw.in [pathLength]:nth-child(3){transition-delay:.5s}
.draw.in [pathLength]:nth-child(4){transition-delay:.75s}
.draw.in [pathLength]:nth-child(n+5){transition-delay:1s}
.orn-north{width:clamp(64px,6vw,96px);right:var(--gutter);top:clamp(16px,1.6vw,24px)}
.orn-plan{width:clamp(180px,20vw,300px);left:calc(-1 * clamp(40px,5vw,90px));top:clamp(30px,4vw,70px);opacity:.3}
.orn-arc{width:clamp(80px,7vw,110px);left:var(--gutter);bottom:clamp(12px,1.4vw,20px);opacity:.45}
.orn-sec{width:clamp(110px,10vw,150px);right:var(--gutter);top:clamp(46px,5vw,84px)}
.orn-dim{left:var(--gutter);width:calc(100% - 2 * var(--gutter));height:28px;bottom:calc(var(--section) / 2 - 14px);opacity:.55}
.bio-top .orn-north{top:auto;bottom:0}
/* registration marks on framed pictures */
.split .pic{overflow:visible}
.split .pic::before,.split .pic::after,.project-img::before,.project-img::after{content:"";position:absolute;width:18px;height:18px;z-index:2;pointer-events:none;background:linear-gradient(var(--clay),var(--clay)) center/100% 1px no-repeat,linear-gradient(var(--clay),var(--clay)) center/1px 100% no-repeat}
.split .pic::before,.project-img::before{left:-9px;top:-9px}
.split .pic::after,.project-img::after{right:-9px;bottom:-9px}
.reveal .pic img{transform:none}

/* strict 50/50: columns can never grow past half, picture fills its cell */
@media (min-width:821px){
  .split{--col:calc((min(100vw - 2 * var(--gutter), var(--max)) - var(--gap)) / 2);grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-auto-rows:minmax(var(--col),auto)}
  .split .pic,.architect .split .pic,.bio-top .pic{aspect-ratio:auto;width:100%}
  .architect .split,.bio-top .split{grid-auto-rows:minmax(calc(var(--col) * 1.2),auto)}
}
.split .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.split .pic-sketch{min-height:320px}

/* line icons */
.ico{width:44px;height:44px;fill:none;stroke:var(--clay);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;flex:none}
.step .ico{margin-bottom:6px}
.txt .ico{margin-top:22px}
.txt .ico + .h2{margin-top:14px}

/* extra services as two equal cards */
.minis{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);margin-top:var(--gap)}
.mini{display:flex;align-items:center;gap:22px;padding:clamp(22px,2.4vw,34px);border:1px solid var(--line);transition:border-color .35s,background .35s,transform .35s var(--ease)}
.mini:hover{border-color:var(--clay);background:var(--paper-2);transform:translateY(-2px)}
.mini span{flex:1;display:grid;gap:8px}
.mini b{font:500 14px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.mini small{font-size:14px;color:var(--muted)}
.mini i{font-style:normal;color:var(--clay);font-size:20px;transition:transform .35s var(--ease)}
.mini:hover i{transform:translateX(6px)}

/* strip captions */
.strip-track a{position:relative}
.strip-track a span{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;font:500 12px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#fff;background:linear-gradient(to top,rgba(21,21,19,.62),rgba(21,21,19,0));opacity:0;transition:opacity .4s}
.strip-track a:hover span{opacity:1}

/* tels: three equal cells */
.tels{grid-template-columns:repeat(3,1fr)}
.tel strong.mail{font:500 clamp(15px,1.25vw,18px)/1 var(--sans);letter-spacing:.02em;padding:clamp(6px,.9vw,14px) 0}
.tel:hover strong{color:var(--clay)}
.cta .btn-row{margin-top:clamp(28px,3vw,40px)}

/* FAQ */
.faq-list{max-width:54rem;margin:0 auto;border-top:1px solid var(--olive)}
.qa{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;font:500 clamp(16px,1.3vw,19px)/1.35 var(--sans);transition:color .3s}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover,.qa[open] summary{color:var(--clay)}
.qa summary i{position:relative;width:18px;height:18px;flex:none}
.qa summary i::before,.qa summary i::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--clay);transition:transform .4s var(--ease)}
.qa summary i::after{transform:rotate(90deg)}
.qa[open] summary i::after{transform:rotate(0)}
.qa p{margin:0;padding:0 42px 26px 0;color:var(--ink-2);line-height:1.75;max-width:46rem;animation:qa .5s var(--ease)}
@keyframes qa{from{opacity:0;transform:translateY(-6px)}}

/* contact form */
.contact-split{align-items:stretch}
.contact-split .txt{justify-content:flex-start}
.contact-split .contact-side{background:var(--night);color:var(--night-ink)}
.contact-side .eyebrow{color:#c9cfc3}
.contact-side .h2{margin:20px 0 18px}
.contact-side .body{color:#c6ccc0}
.contact-split .txt .tels{grid-template-columns:1fr;margin-top:28px;border-color:rgba(239,236,228,.2)}
.contact-split .txt .tel{justify-items:start;padding:20px 0}
.contact-split .txt .tel + .tel{border-left:0;border-top:1px solid rgba(239,236,228,.2)}
.contact-side .tel small{color:#a9b0a3}
.contact-side .tel:hover{background:transparent}
.contact-side .tel:hover strong{color:#E0A283}
.form{display:grid;gap:18px;margin-top:26px}
.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form label{display:grid;gap:8px;font:500 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--olive)}
.form input:not([type=checkbox]),.form select,.form textarea{width:100%;font:400 16px/1.4 var(--sans);letter-spacing:0;text-transform:none;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:2px;padding:14px;transition:border-color .3s,box-shadow .3s}
.form textarea{resize:vertical;min-height:130px}
.form input:focus,.form select:focus,.form textarea:focus{outline:0;border-color:var(--clay);box-shadow:0 0 0 3px rgba(181,98,63,.16)}
.form .check{display:flex;align-items:flex-start;gap:10px;text-transform:none;letter-spacing:0;font:400 14px/1.5 var(--sans);color:var(--ink-2)}
.form .check input{margin-top:3px;accent-color:var(--clay);width:16px;height:16px}
.form .check a{color:var(--clay);border-bottom:1px solid currentColor}
.form .btn{justify-self:start;cursor:pointer}
.form .hp{position:absolute;left:-9999px}

/* project page */
.project-top{padding-top:calc(var(--header) + clamp(28px,3vw,48px))}
.back{display:inline-block;margin-bottom:clamp(28px,3vw,44px);font:500 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--clay)}
.project-img{position:relative;margin:0;background:var(--paper-2)}
.project-img a{display:block;cursor:zoom-in}
.project-img img{width:100%;height:auto;max-height:84svh;object-fit:contain}
.project-info{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);padding:clamp(36px,4vw,64px) 0;align-items:start}
.project-info dl{margin:0;border-top:1px solid var(--olive)}
.project-info dl div{display:grid;grid-template-columns:1fr 2fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);align-items:baseline}
.project-info dt{font:500 11px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.project-info dd{margin:0;font:500 15px/1.4 var(--sans)}
.project-nav{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.project-nav a{display:grid;gap:12px;padding:28px 0;transition:color .3s}
.project-nav a + a{text-align:right;border-left:1px solid var(--line);padding-left:24px}
.project-nav a:first-child{padding-right:24px}
.project-nav small{font:500 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.project-nav span{font:500 14px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.project-nav a:hover span{color:var(--clay)}
.grid-three{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}

/* misc pages */
.page-hero.tall{min-height:100svh;display:grid;align-items:center;padding-bottom:var(--section)}
.prose{max-width:46rem}
.prose h2{margin:44px 0 12px}
.prose h2:first-child{margin-top:0}
.prose p{margin:0;color:var(--ink-2);line-height:1.8}
.prose a{color:var(--clay);border-bottom:1px solid currentColor}
.pic-sketch{display:grid;place-items:center;background:var(--paper-2)}
.legal-sketch{width:74%;fill:none;stroke:var(--olive);stroke-width:1.2}
.legal-sketch circle,.legal-sketch path:nth-child(8){stroke:var(--clay)}
.footer a:hover{color:var(--clay)}

/* mobile call bar */
.callbar{display:none}

@media (max-width:1100px){
  .header-end .btn{display:none}
  .grid-three{grid-template-columns:repeat(2,1fr)}
  .grid-three > :nth-child(3){display:none}
}
@media (max-width:820px){
  .header-end{display:none}
  .brand b{font-size:12px}
  .orn-north{width:64px;top:22px;right:14px;opacity:.35}
  .orn-plan,.orn-arc,.orn-dim{display:none}
  .orn-sec{width:84px;top:26px;right:14px;opacity:.35}
  .minis{grid-template-columns:1fr}
  .tels{grid-template-columns:1fr}
  .form .row2{grid-template-columns:1fr}
  .form .btn{justify-self:stretch}
  .btn-row .btn{flex:1 1 100%}
  .project-info{grid-template-columns:1fr}
  .grid-three{grid-template-columns:1fr}
  .grid-three > :nth-child(3){display:block}
  .split .pic::before{left:-6px;top:-6px}
  .split .pic::after{right:-6px;bottom:-6px}
  .contact-split .contact-side{padding:32px 24px 36px}
  .callbar{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--paper);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
  .callbar a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:54px;font:500 13px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase}
  .callbar a:first-child{background:var(--clay);color:#fff}
  body{padding-bottom:calc(54px + env(safe-area-inset-bottom))}
  .menu-open .callbar{display:none}
}
@media (prefers-reduced-motion:reduce){.draw [pathLength]{stroke-dashoffset:0}}

/* inline line symbols (replace emoji) */
.i{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.2em;flex:none}
.tel small .i,.footer .i,.menu-foot .i,.eyebrow .i{color:var(--clay)}
.tel small{display:inline-flex;align-items:center;gap:8px}
.footer li a,.footer li{display:flex;align-items:center;gap:10px}
.menu-foot a{display:flex;align-items:center;gap:10px}
.contact-side .h2{display:flex;align-items:center;gap:14px}
.contact-side .h2 .i{width:.7em;height:.7em;color:#E0A283;stroke-width:1.1}
.contact-side .tel small .i{color:#E0A283}
.eyebrow .i{width:14px;height:14px}

/* discreet buttons: olive, not terracotta. Terracotta stays for small accents only */
.btn{background:var(--night);border-color:var(--night);color:var(--night-ink)}
.btn .i{color:#E0A283}
.btn:hover{background:var(--olive);border-color:var(--olive)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong,rgba(21,21,19,.32))}
.btn-ghost .i{color:var(--clay)}
.btn-ghost:hover{background:transparent;border-color:var(--ink);color:var(--ink)}
.header-end .btn{background:transparent;color:var(--ink);border-color:rgba(21,21,19,.22);min-height:38px;padding:0 14px}
.header-end .btn .i{color:var(--clay)}
.header-end .btn:hover{background:transparent;border-color:var(--ink);transform:none}
.contact-side .btn,.architect .btn{background:var(--night-ink);color:var(--night);border-color:var(--night-ink)}
@media (max-width:820px){
  .callbar a:first-child{background:var(--night);color:var(--night-ink)}
  .callbar a .i{color:#E0A283}
  .callbar a + a .i{color:var(--clay)}
}

/* phone, mobile and email: one identical style */
.tel strong,.tel strong.mail{font:200 clamp(22px,2.3vw,34px)/1.1 var(--serif);letter-spacing:0;padding:0;white-space:nowrap}
.contact-split .contact-side{justify-content:center}

/* tall portrait photo: show the roof in the card crop */
.work img[src*="14-papanastasiou"]{object-position:50% 12%}

/* project extra images + comparison page */
.project-extra{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);margin-top:var(--gap)}
.project-extra figure{margin:0}
.project-extra a{display:block;cursor:zoom-in;aspect-ratio:4/3;overflow:hidden;background:var(--paper-2)}
.project-extra img{width:100%;height:100%;object-fit:cover}
.project-extra figcaption,.cmp-pair figcaption{padding-top:12px;font:500 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.cmp{padding:clamp(36px,4vw,64px) 0;border-top:1px solid var(--line)}
.cmp-head{display:grid;gap:10px;margin-bottom:24px}
.cmp-head .h3{font:300 clamp(24px,2.2vw,34px)/1.1 var(--serif)}
.cmp-pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:start}
.cmp-pair figure{margin:0}
.cmp-pair img{width:100%;height:auto;background:var(--paper-2)}
@media (max-width:820px){.project-extra,.cmp-pair{grid-template-columns:1fr}}