@font-face{font-family:'Changa';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/changa-400-arabic.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'Changa';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/changa-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Changa';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/changa-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Changa';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/changa-500-arabic.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'Changa';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/changa-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Changa';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/changa-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Changa';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/changa-600-arabic.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'Changa';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/changa-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Changa';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/changa-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Changa';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/changa-700-arabic.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'Changa';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/changa-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Changa';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/changa-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Saira Stencil One';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/saira-stencil-one-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Saira Stencil One';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/saira-stencil-one-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/tajawal-300-arabic.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/tajawal-300-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/tajawal-400-arabic.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/tajawal-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/tajawal-500-arabic.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/tajawal-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/tajawal-700-arabic.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/tajawal-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* ============================================================
   TERSANA · THE PRESS (المكبس)
   Industrial theme built on Tersana's block press: the page is
   clamped between two galvanised steel plates (header, footer),
   photos open like mould gates from the centre line, sections
   stack and press on scroll, figures are stencil-marked.
   Fonts: Changa (headings), Tajawal (text), Saira Stencil One (figures).
   This file is the source; _tools/build.py prepends the @font-face
   rules and writes Site/assets/css/tersana.css.
   ============================================================ */

:root{
  --navy:#002D41; --navy-2:#001E2C; --orange:#ED6F40; --orange-2:#D65D31;
  --steel:#DCDFE1; --steel-2:#C3C9CD; --steel-3:#A9B1B6; --zinc:#5E6B73;
  --cast:#ECEBE7; --lab:#F7F7F5; --ink:#16222A; --zinc-d:#4D5960;
  --hh:72px; --vh:100svh; --wrap:1280px; --gut:clamp(18px,4.5vw,64px);
  --fh:'Changa',system-ui,sans-serif; --fb:'Tajawal',system-ui,sans-serif; --fs:'Saira Stencil One','Changa',sans-serif;
  --h1:clamp(2.5rem,1.3rem + 4.4vw,5.6rem); --h2:clamp(2rem,1.25rem + 2.6vw,3.7rem); --h3:clamp(1.3rem,1.05rem + .9vw,1.85rem);
  --ez-index:cubic-bezier(.16,.84,.22,1); --ez-stroke:cubic-bezier(.85,0,.15,1); --ez-release:cubic-bezier(.05,.7,.1,1);
  --dir:1; --cv:-24px;
  --galv:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><g fill='%23ffffff' fill-opacity='.075'><path d='M0 0h40l12 22-19 20H0z'/><path d='M96 8l40-8 24 28-15 30-42-4z'/><path d='M48 82l36-12 20 30-23 26-31-14z'/><path d='M132 104l48-6v52l-30 6-24-24z'/><path d='M6 132l32 6 7 42H0v-48z'/></g><g fill='%23596870' fill-opacity='.035'><path d='M54 22l33-7 8 34-29 17-20-21z'/><path d='M150 58l30-4v42l-28-4z'/><path d='M82 140l35-7 15 34-27 13-28-13z'/><path d='M0 64l28 3 14 34-25 18H0z'/></g></svg>");
}
html[dir=ltr]{--dir:-1; --cv:24px}

*,*::before,*::after{box-sizing:border-box}
/* overflow-x:clip (not hidden) keeps sideways slide-ins from widening the page on phones without breaking sticky sections */
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--hh);scrollbar-gutter:stable;overflow-x:clip}
body{margin:0;background:var(--cast);color:var(--ink);font-family:var(--fb);font-weight:400;font-size:clamp(1rem,.96rem + .2vw,1.1rem);line-height:1.85;overflow-x:clip}
html[lang=en] body{line-height:1.65}
img,video,iframe{display:block;max-width:100%;border-radius:0}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-family:var(--fh);font-weight:600;line-height:1.12;letter-spacing:-.005em}
p{margin:0}
.wrap{width:min(var(--wrap),100% - 2*var(--gut));margin-inline:auto}
html[lang=ar] .en{display:none!important}
html[lang=en] .ar{display:none!important}
.num{font-family:var(--fs);font-weight:400;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
::selection{background:var(--orange);color:#fff}
:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
main>section,main>div{position:relative}

/* ---------- loader: a steel plate stamps the mark, then parts in two leaves (home only, 3 s) ---------- */
html.loading{overflow:hidden}
#ld{position:fixed;inset:0;z-index:300;pointer-events:none}
#ld .lf{position:absolute;top:0;bottom:0;width:50.5%;background:var(--steel) var(--galv);animation:ldLeaf 3s forwards}
#ld .lf.a{inset-inline-start:0}
#ld .lf.b{inset-inline-end:0;--side:-1}
#ld .mk{position:absolute;inset:0;display:grid;place-items:center;animation:ldMark 3s forwards}
#ld .mk img{width:min(320px,62vw);height:auto}
@keyframes ldMark{0%{opacity:0;transform:translateY(-10px)}7%{opacity:0;transform:translateY(-10px);animation-timing-function:var(--ez-index)}14%{opacity:1;transform:none}68%{opacity:1;transform:none}74%{opacity:0;transform:none}100%{opacity:0}}
@keyframes ldLeaf{0%,76%{transform:none;animation-timing-function:var(--ez-stroke)}100%{transform:translateX(calc(101% * var(--side,1) * var(--dir)))}}
html.shot #ld{display:none}

/* ---------- header: the top plate, always galvanised steel, never hides ---------- */
.hdr{position:sticky;top:0;z-index:100;height:var(--hh);background:var(--steel) var(--galv);color:var(--navy);view-transition-name:hdr}
.hdr .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:20px}
.hdr .brand,.hdr .khg{flex-shrink:0}
.hdr img{max-width:none}
.hdr .brand img{height:44px;width:auto}
.hdr .brand .lt{display:none}
.sheet{display:none}
.hdr nav{display:flex;gap:clamp(14px,2vw,32px);font-family:var(--fh);font-weight:500;font-size:1rem}
.hdr nav a{padding:6px 0;transition:color 120ms linear}
.hdr nav a.on{color:var(--navy);box-shadow:inset 0 -2px 0 var(--orange)}
.hdr .end{display:flex;align-items:center;gap:16px}
.hdr .khg img{height:38px;width:auto}
.hdr .lang{display:flex;gap:12px;padding-inline-start:16px;border-inline-start:1px solid var(--steel-3);font-family:var(--fh);font-weight:500}
.hdr .lang button{all:unset;cursor:pointer;color:var(--zinc-d);transition:color 120ms linear}
.hdr .lang button.on{color:var(--navy)}
.menu-btn{all:unset;cursor:pointer;display:none;align-items:center;justify-content:center;width:44px;height:44px;margin-inline-end:-11px;color:var(--navy);-webkit-tap-highlight-color:transparent}
.menu-btn .o,.menu-btn .x{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.menu-btn .ic{position:relative;flex:none;width:24px;height:14px}
.menu-btn .ic::before,.menu-btn .ic::after{content:"";position:absolute;inset-inline:0;height:2px;background:currentColor;transition:top 200ms var(--ez-index),transform 240ms var(--ez-index)}
.menu-btn .ic::before{top:0}.menu-btn .ic::after{top:12px}
body.menu .menu-btn .ic::before{top:6px;transform:rotate(45deg)}
body.menu .menu-btn .ic::after{top:6px;transform:rotate(-45deg)}
.menu-btn .x{display:none}
body.menu .menu-btn .o{display:none}body.menu .menu-btn .x{display:inline}
.hdr .lang button:focus-visible,.menu-btn:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
@media(hover:hover){.hdr nav a:hover,.hdr .lang button:hover{color:var(--orange)}}
/* phones and tablets: the bar keeps the mark, the language pair and the menu button; the menu is a full-height
   navy sheet that drops from under the bar like the press head, the pages stamped in one by one, the current page
   marked by the orange gauge bar, then the inquiry lines and the KHG mark at the foot */
@media(max-width:1020px){
  .hdr .wrap>nav,.hdr .end .khg{display:none}
  .menu-btn{display:flex}
  .hdr .brand img{height:36px}
  .hdr .lang{padding-inline:0 14px;gap:12px;border-inline-start:0;border-inline-end:1px solid var(--steel-3)}
  html:has(body.menu){overflow:hidden}
  body.menu .hdr,body[data-hdr].menu .hdr{background:var(--navy)}
  .sheet:focus{outline:none}
  body.menu .hdr::before{display:none}
  body.menu .hdr .brand .dk{display:none}
  body.menu .hdr .brand .lt{display:block}
  body.menu .hdr .menu-btn,body.menu .hdr .lang button.on{color:#fff}
  body.menu .hdr .lang button{color:var(--steel)}
  body.menu .hdr .lang{border-color:rgba(255,255,255,.3)}
  body.menu .hdr .lang button.on{box-shadow:inset 0 -2px 0 var(--orange)}
  body.menu .hdr :focus-visible{outline-color:#fff}
  .sheet{display:flex;flex-direction:column;justify-content:space-between;gap:40px;position:fixed;top:var(--hh);inset-inline:0;height:calc(100dvh - var(--hh));overflow-y:auto;overscroll-behavior:contain;padding:clamp(12px,3vh,32px) var(--gut) calc(28px + env(safe-area-inset-bottom,0px));background:var(--navy);color:#fff;clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path 260ms var(--ez-stroke),visibility 0s 260ms}
  body.menu .sheet{clip-path:inset(0);visibility:visible;transition:clip-path 380ms var(--ez-stroke)}
  .sheet nav{display:grid;gap:0}
  .hdr .sheet nav a.on{color:#fff;box-shadow:none}
  .sheet nav a{display:flex;align-items:center;gap:16px;padding:clamp(11px,2.2vh,18px) 0;border-bottom:1px solid rgba(255,255,255,.12);font-family:var(--fh);font-weight:600;font-size:clamp(1.65rem,1.3rem + 2.2vw,2.3rem);line-height:1.2;color:#fff;opacity:0;transform:translateY(-8px);transition:opacity 160ms linear,transform 260ms var(--ez-index),color 120ms linear}
  .sheet nav a::before{content:"";flex:none;width:4px;height:.95em;background:var(--orange);transform:scaleY(0);transform-origin:top;transition:transform 380ms var(--ez-index) 300ms}
  .sheet nav a.on::before{transform:none}
  .sheet nav a:active{color:var(--orange)}
  body.menu .sheet nav a{opacity:1;transform:none;transition-delay:calc(150ms + var(--i,0)*45ms),calc(150ms + var(--i,0)*45ms),0ms}
  .sheet nav a:focus-visible{outline:2px solid #fff;outline-offset:2px}
  .sheet .sx{display:grid;gap:22px;opacity:0;transition:opacity 180ms linear}
  body.menu .sheet .sx{opacity:1;transition:opacity 260ms linear 440ms}
  .sheet .ch{display:grid;gap:8px;justify-items:start;font-size:1.2rem}
  .sheet .ch a{color:#fff}
  .sheet .kh{display:flex;align-items:center;gap:14px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);color:var(--steel);font-family:var(--fh);font-weight:500;font-size:.98rem}
  .sheet .kh img{height:34px;width:auto}
  .sheet a:focus-visible{outline:2px solid #fff;outline-offset:3px}
}

/* ---------- motion grammar ---------- */
/* STAMP: the press head comes down 8px; INDEX: fed in along the conveyor; PRINT: a line feeds out; GAUGE: the title bar fills */
:where(html.js) [data-m=stamp]{opacity:0;transform:translateY(-8px)}
[data-m=stamp].in,.in>[data-m=stamp]{opacity:1;transform:none;transition:opacity 160ms linear var(--d,0ms),transform 260ms var(--ez-index) var(--d,0ms)}
:where(html.js) [data-m=index]{opacity:0;transform:translateX(var(--cv))}
[data-m=index].in,.in>[data-m=index]{opacity:1;transform:none;transition:opacity 220ms linear var(--d,0ms),transform 380ms var(--ez-index) var(--d,0ms)}
/* PRINT: a row opens from its own horizontal centre line, like the platen parting (the GATE turned through 90 degrees) */
:where(html.js) [data-m=print]{clip-path:inset(50% 0 50% 0)}
[data-m=print].in,.in>[data-m=print]{clip-path:inset(0)!important;transition:clip-path 240ms var(--ez-stroke) var(--d,0ms)}
.stg>*{--d:calc(var(--i,0) * 110ms)}

/* the gauge: Tersana's title mark, a vertical orange bar at the start edge that fills like a level gauge */
.gt{position:relative;padding-inline-start:28px;max-width:56rem}
.gt::before{content:"";position:absolute;inset-inline-start:0;top:.15em;bottom:.15em;width:6px;background:var(--orange);transform-origin:top}
:where(html.js) .gt::before{transform:scaleY(0)}
.gt.in::before{transform:none;transition:transform 380ms var(--ez-index) 140ms}
/* titles without the gauge: the gauge is kept for page openers and one section per page */
.tt{max-width:56rem}
.tt.c{text-align:center;margin-inline:auto}
.gt h1,.gt h2,.tt h1,.tt h2{font-size:var(--h2);color:var(--navy)}
.gt h1{font-size:var(--h1)}
.gt .lead,.tt .lead{margin-top:14px;font-size:clamp(1.05rem,1rem + .35vw,1.3rem);color:var(--zinc);max-width:46rem}
.tt.c .lead{margin-inline:auto}

/* GATE: photos, film and map open from the centre line like the two halves of a mould */
.gate{position:relative;overflow:hidden;background:var(--steel-2)}
:where(html.js) .gate{clip-path:inset(0 50% 0 50%)}
.gate.in{clip-path:inset(0);transition:clip-path 820ms var(--ez-stroke)}
.gate>img,.gate>video,.gate>iframe,.gate>picture,.gate>picture>img{width:100%;height:100%;object-fit:cover;clip-path:none}
@supports (animation-timeline: view()){
  .gate.sd{animation:gateOpen linear both;animation-timeline:view();animation-range:entry 0% cover 38%;transition:none}
  .gate.sd.in{transition:none}
  @keyframes gateOpen{from{clip-path:inset(0 50% 0 50%)}to{clip-path:inset(0)}}
}

/* ---------- buttons and text links ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 30px;font-family:var(--fh);font-weight:600;font-size:1.05rem;color:var(--navy);background:var(--orange);white-space:nowrap;transition:background-color 120ms linear,color 120ms linear,transform 160ms var(--ez-release)}
.btn:active{transform:translateY(2px) scale(.98);transition-duration:80ms}
.tl{font-family:var(--fh);font-weight:600;color:var(--navy);box-shadow:inset 0 -2px 0 var(--orange);padding-bottom:2px;transition:color 120ms linear}
.on-dark .tl{color:#fff}
@media(hover:hover){.btn:hover{background:var(--navy);color:#fff}.tl:hover{color:var(--orange)}}

/* ---------- section rhythm ---------- */
.pad{padding-block:clamp(72px,9vw,132px)}
.pad-s{padding-block:clamp(48px,6vw,88px)}
.lab{background:var(--lab)}
.cast{background:var(--cast)}

/* ================= HOME ================= */
/* hero: the silos, pinned under the page; the next section presses down on it */
.press-zone{position:relative}
.hero{position:sticky;top:var(--hh);height:calc(var(--vh) - var(--hh));min-height:520px;overflow:hidden;z-index:0}
.hero .ph{position:absolute;inset:-8px 0 0}
.hero .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
/* the copy sits in the open sky beside the three silos (the silos fill the middle half of the frame) */
.hero .copy{position:absolute;z-index:2;inset-inline-start:var(--gut);top:clamp(36px,11vh,130px);width:min(19.5vw,440px)}
body[data-hdr] .hero{top:0;height:var(--vh)}
body[data-hdr] .hero .copy{top:calc(var(--hh) + clamp(36px,11vh,130px))}
.hero h1{font-size:clamp(2rem,2.7vw,3.5rem);color:var(--navy);line-height:1.08}
.hero .sub{margin-top:16px;font-size:clamp(1rem,.9rem + .25vw,1.2rem);font-weight:500;color:var(--navy);line-height:1.7}
.hero .act{margin-top:26px}
/* PRESS: one stroke when the figures slab reaches the middle of the screen; no zoom, no tint */
.hero.hit .ph{animation:pressBeat 180ms var(--ez-stroke)}
@keyframes pressBeat{50%{transform:translateY(6px)}}
@media(max-width:760px),(max-aspect-ratio:6/5){
  .hero,body[data-hdr] .hero{position:relative;top:auto;height:var(--vh);min-height:560px}
  .hero .ph{inset:0}
  .hero .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,30,44,.92) 0%,rgba(0,30,44,.78) 30%,rgba(0,30,44,.3) 56%,rgba(0,30,44,0) 72%)}
  .hero .copy,body[data-hdr] .hero .copy{inset:auto var(--gut) calc(clamp(30px,6svh,56px) + env(safe-area-inset-bottom,0px));top:auto;width:auto;max-width:34rem}
  .hero h1{font-size:clamp(2.1rem,8vw,2.8rem);color:#fff}
  .hero .sub{color:#fff;margin-top:12px}
  .hero .act{margin-top:22px}
}

/* the production log: the figures side by side in one compact band, each stencil mark with its label beneath */
.log{position:relative;z-index:1;background:var(--lab)}
.rows{margin-top:clamp(26px,3vw,40px);display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));border-top:1px solid var(--steel-2);border-bottom:1px solid var(--steel-2)}
.rows .row{display:flex;flex-direction:column;gap:8px;padding:clamp(18px,2vw,26px) clamp(16px,1.8vw,26px)}
.rows .row+.row{border-inline-start:1px solid var(--steel-2)}
.rows .row b{font-size:clamp(2.2rem,1.5rem + 2vw,3.5rem);line-height:1;color:var(--navy)}
.rows .row .lb{font-family:var(--fh);font-weight:500;font-size:clamp(.95rem,.9rem + .2vw,1.1rem);color:var(--zinc);line-height:1.35}
.ticket .rows{max-width:44rem}
@media(max-width:900px){
  .log .rows{grid-template-columns:1fr 1fr}
  .log .rows .row{padding:18px 16px;border:0}
  .log .rows .row:nth-child(2),.log .rows .row:nth-child(5){border-inline-start:1px solid var(--steel-2)}
  .log .rows .row:nth-child(4),.log .rows .row:nth-child(3){border-inline-start:0}
  .log .rows .row:nth-child(n+3){border-top:1px solid var(--steel-2)}
  .log .rows .row:nth-child(3){order:1;grid-column:1/-1}
}
@media(max-width:640px){
  .rows{grid-template-columns:1fr 1fr}
  .rows .row{padding:16px 14px}
  .rows .row+.row{border-inline-start:0}
  .rows .row:nth-child(even){border-inline-start:1px solid var(--steel-2)}
  .rows .row:nth-child(n+3){border-top:1px solid var(--steel-2)}
}

/* products: one under the other; each is a clean photo (no text on it) with a Tersana navy text plate set flush
   against its side, alternating sides. Each photo slides in once from its own side as it comes up, the plate follows, and both stay. */
.prods{position:relative;z-index:1;background:var(--cast);padding-block:clamp(72px,9vw,132px)}
.plist{margin-top:clamp(40px,5vw,72px);display:grid;gap:clamp(56px,7vw,104px)}
.prow{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:end;color:inherit;--from:calc(14vw * var(--dir))}
.prow:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);--from:calc(-14vw * var(--dir))}
.prow:nth-child(even) .ph{order:2}
/* depth: three planes. The slab, the photo lifted off it (soft navy shadow), and the navy plate lifted higher still,
   reaching over the photo's edge by --lap with a deeper layered shadow */
.prow{--lap:clamp(40px,5vw,88px);--lift:0 1px 2px rgba(0,30,44,.12),0 8px 16px rgba(0,30,44,.12),0 24px 48px rgba(0,30,44,.16),0 48px 96px rgba(0,30,44,.2)}
.prow .ph{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--steel-2);box-shadow:0 2px 6px rgba(0,30,44,.08),0 22px 54px rgba(0,30,44,.14);view-timeline-name:--pv}
.prow .ph img{width:100%;height:100%;object-fit:cover;transition:transform 600ms var(--ez-index)}
.prow .cap{position:relative;z-index:1;background:var(--navy);color:#fff;padding:clamp(30px,3.4vw,52px) clamp(26px,3vw,48px) clamp(30px,3.4vw,48px);margin-bottom:clamp(28px,4vw,56px);margin-inline-start:calc(-1 * var(--lap));box-shadow:var(--lift)}
.prow:nth-child(even) .cap{margin-inline-start:0;margin-inline-end:calc(-1 * var(--lap))}
.prow .cap::before{content:"";display:block;width:44px;height:4px;background:var(--orange);margin-bottom:22px}
.prow h3{font-size:clamp(1.5rem,1.1rem + 1.3vw,2.3rem);color:#fff;line-height:1.2}
.prow p{margin-top:12px;color:var(--steel);font-size:clamp(.98rem,.94rem + .25vw,1.12rem);line-height:1.8}
html[lang=en] .prow p{line-height:1.6}
.prow .tl{display:inline-block;margin-top:22px;color:#fff}
.prow :focus-visible,.prow:focus-visible{outline-color:var(--orange)}
@media(hover:hover){.prow:hover .ph img{transform:scale(1.03)}.prow:hover .tl{color:var(--orange)}}
/* motion: one slide in when the row comes into view, then it stays (no exit, no reverse) */
:where(html.js) .prow .ph,:where(html.js) .prow .cap{opacity:0;transform:translateX(var(--from))}
.prow.in .ph{opacity:1;transform:none;transition:opacity 420ms linear,transform 760ms var(--ez-index)}
.prow.in .cap{opacity:1;transform:none;transition:opacity 420ms linear 180ms,transform 760ms var(--ez-index) 180ms}
/* depth in motion (wide screens): while the row crosses the screen the photo drifts slowly inside its frame and the plate
   rises faster, so the two planes part. Uses translate/scale, so it never fights the entry slide on transform */
@supports (animation-timeline:view()){
  @media (min-width:761px) and (prefers-reduced-motion:no-preference){
    .prow .ph img{scale:1.1;animation:prowDrift linear both;animation-timeline:--pv;animation-range:cover 0% cover 100%}
    .prow .cap{animation:prowRise linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  }
}
@keyframes prowDrift{from{translate:0 -4%}to{translate:0 4%}}
@keyframes prowRise{from{translate:0 56px}to{translate:0 -56px}}
@media(max-width:760px){
  .prow,.prow:nth-child(even){grid-template-columns:1fr}
  .prow:nth-child(even) .ph{order:0}
  .prow .cap{margin:calc(-1 * clamp(32px,9vw,48px)) clamp(12px,4vw,20px) 0;box-shadow:var(--lift)}
  .prow:nth-child(even) .cap{margin:calc(-1 * clamp(32px,9vw,48px)) clamp(12px,4vw,20px) 0}
  .prow{--from:calc(22vw * var(--dir))}
  .prow:nth-child(even){--from:calc(-22vw * var(--dir))}
}

/* the plant film: the title sits on the slab, the film opens across the full width beneath it */
.film{z-index:1;background:var(--lab)}
/* the film is shown whole: its own 16:9 frame, never cropped */
.film .gate{aspect-ratio:16/9;margin-top:clamp(30px,4vw,52px);background:var(--navy)}
.film video{object-fit:contain}
/* services selector: names on the start side, one photo window flush to the end edge */
.sel{z-index:1;background:var(--cast);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);min-height:min(88svh,860px)}
.sel .side,.duo .side{padding-block:clamp(72px,8vw,120px) clamp(60px,7vw,100px);padding-inline:max(var(--gut),calc((100vw - var(--wrap))/2)) clamp(24px,4vw,60px)}
.sel .more{margin-top:28px}
.sel .list{margin-top:clamp(32px,4vw,56px);display:grid;gap:2px}
.sel .opt{all:unset;cursor:pointer;display:block;padding:16px 0 18px;border-top:1px solid var(--steel-2)}
.sel .opt:last-child{border-bottom:1px solid var(--steel-2)}
.sel .opt .h{display:block;font-family:var(--fh);font-weight:600;line-height:1.12;font-size:var(--h3);color:var(--zinc-d);transition:color 140ms linear}
.sel .opt .d{display:grid;grid-template-rows:0fr;color:var(--zinc);transition:grid-template-rows 260ms var(--ez-index)}
.sel .opt .d>span{overflow:hidden}
.sel .opt .tx{display:block;padding-top:8px}
.sel .opt .pic{display:none}
.sel .opt.on .h{color:var(--navy)}
.sel .opt.on .d{grid-template-rows:1fr}
.sel .opt:focus-visible{outline:2px solid var(--navy);outline-offset:6px}
.sel .win{position:relative;overflow:hidden;background:var(--steel-2)}
.sel .win img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(0 50% 0 50%)}
.sel .win img.on{clip-path:inset(0);z-index:1;transition:clip-path 300ms var(--ez-index)}
.sel .win img.was{clip-path:inset(0);z-index:0}
@media(hover:hover){.sel .opt:hover .h{color:var(--orange)}}
/* phones and narrow tablets: title first, then the services as an accordion; the chosen one opens its own photo
   (full bleed, opening from the centre line) between its name and its text; a plus turns to a minus on the open one */
@media(max-width:900px){
  .sel{grid-template-columns:1fr;min-height:0}
  .sel .side{padding:clamp(64px,14vw,88px) var(--gut) clamp(48px,11vw,64px)}
  .sel .win{display:none}
  .sel .list{margin-top:32px;gap:0}
  .sel .opt{padding:20px 0 22px;-webkit-tap-highlight-color:transparent}
  .sel .opt .h{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:clamp(1.35rem,1.1rem + 1.2vw,1.7rem)}
  .sel .opt .h::after{content:"";flex:none;width:18px;height:18px;background:linear-gradient(currentColor,currentColor) center/18px 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 18px no-repeat;transition:background-size 200ms var(--ez-index)}
  .sel .opt.on .h::after{background-size:18px 2px,2px 0}
  .sel .opt.on .h{color:var(--navy)}
  .sel .opt .d{margin-inline:calc(-1 * var(--gut))}
  .sel .opt .pic{display:block;position:relative;margin-top:18px;aspect-ratio:16/10;overflow:hidden;background:var(--steel-2)}
  .sel .opt .pic img{width:100%;height:100%;object-fit:cover}
  .sel .opt.on .pic img{animation:selGate 520ms var(--ez-index) both}
  .sel .opt .tx{padding:16px var(--gut) 0;font-size:1.02rem;line-height:1.85}
  html[lang=en] .sel .opt .tx{line-height:1.65}
  .sel .more{margin-top:32px}
}
@keyframes selGate{from{clip-path:inset(0 50% 0 50%)}to{clip-path:inset(0)}}

/* each strip is a link to that project on the projects page */

/* ================= INNER PAGES ================= */
/* opener: the title stamped on the slab, then a full-bleed plate opens beneath it */
.opener.bare{background:var(--cast);padding-top:clamp(56px,8vw,112px)}
/* photo opener: the photo fills the band from the top of the page; a navy shade on the text side (and a light one under the header) carries the white title */
.opener.photo{position:relative;min-height:clamp(460px,70svh,800px);display:flex;align-items:flex-end;padding:calc(var(--hh) + clamp(64px,8vw,120px)) 0 clamp(52px,6.5vw,96px);overflow:hidden;background:var(--navy-2)}
.opener.photo .bgp{position:absolute;inset:0}
.opener.photo .bgp img{width:100%;height:100%;object-fit:cover;animation:opSettle 1600ms var(--ez-index) both}
@keyframes opSettle{from{transform:scale(1.06)}to{transform:none}}
.opener.photo .bgp::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,30,44,.62) 0,rgba(0,30,44,.5) 72px,rgba(0,30,44,0) 190px),linear-gradient(to left,rgba(0,30,44,.88) 0%,rgba(0,30,44,.76) 45%,rgba(0,30,44,.42) 75%,rgba(0,30,44,.12) 100%)}
html[dir=ltr] .opener.photo .bgp::after{background:linear-gradient(to bottom,rgba(0,30,44,.62) 0,rgba(0,30,44,.5) 72px,rgba(0,30,44,0) 190px),linear-gradient(to right,rgba(0,30,44,.88) 0%,rgba(0,30,44,.76) 45%,rgba(0,30,44,.42) 75%,rgba(0,30,44,.12) 100%)}
.opener.photo .wrap{position:relative}
.opener.photo .gt h1{color:#fff}
.opener.photo .gt .lead{color:#fff;max-width:40rem}
@media(max-width:760px){
  .opener.photo{min-height:clamp(440px,74svh,640px)}
  .opener.photo .bgp::after,html[dir=ltr] .opener.photo .bgp::after{background:linear-gradient(to bottom,rgba(0,30,44,.62) 0,rgba(0,30,44,.5) 72px,rgba(0,30,44,0) 140px),linear-gradient(to top,rgba(0,30,44,.9) 0%,rgba(0,30,44,.6) 50%,rgba(0,30,44,.25) 100%)}
}

/* see-through header: on the home page and the photo openers the header floats over the photo until the page scrolls,
   then the galvanised plate comes back. light = navy marks over the home sky; dark = white marks over the darker openers */
body[data-hdr] .hdr{position:fixed;top:0;inset-inline:0;background:transparent}
body[data-hdr] .hdr::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--steel) var(--galv);opacity:0;transition:opacity 220ms linear;pointer-events:none}
body[data-hdr] .hdr.solid::before{opacity:1}
body[data-hdr=dark]:not(.menu) .hdr:not(.solid) .brand .dk{display:none}
body[data-hdr=dark]:not(.menu) .hdr:not(.solid) .brand .lt{display:block}
body[data-hdr=dark]:not(.menu) .hdr:not(.solid) nav a,body[data-hdr=dark]:not(.menu) .hdr:not(.solid) .menu-btn,body[data-hdr=dark]:not(.menu) .hdr:not(.solid) .lang button{color:#fff}
body[data-hdr=dark]:not(.menu) .hdr:not(.solid) .lang{border-color:rgba(255,255,255,.35)}
body[data-hdr=dark]:not(.menu) .hdr:not(.solid) :focus-visible{outline-color:#fff}
body[data-hdr=dark]:not(.menu) .hdr:not(.solid) .khg img{filter:brightness(0) invert(1)}
body[data-hdr=light]:not(.menu) .hdr:not(.solid) nav a,body[data-hdr=light]:not(.menu) .hdr:not(.solid) .lang button{color:var(--navy)}
body[data-hdr]:not(.menu) .hdr:not(.solid) .lang button.on{box-shadow:inset 0 -2px 0 var(--orange)}
@media(hover:hover){body[data-hdr]:not(.menu) .hdr:not(.solid) nav a:hover,body[data-hdr]:not(.menu) .hdr:not(.solid) .lang button:hover{box-shadow:inset 0 -2px 0 var(--orange)}}

/* about: story text beside the two marks, side by side */
.story{background:var(--lab)}
.story .grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(36px,6vw,110px);align-items:start;margin-top:clamp(32px,4vw,56px)}
.story .txt p+p{margin-top:16px}
.story .lock{position:sticky;top:calc(var(--hh) + 40px);display:flex;flex-wrap:wrap;align-items:center;gap:22px clamp(28px,4vw,56px)}
.story .lock img{height:96px;width:auto}
.story .lock .eag{height:80px}
.story .lock small{flex-basis:100%;color:var(--zinc);font-family:var(--fh);font-weight:500}
@media(max-width:900px){.story .grid{grid-template-columns:1fr}.story .lock{position:static}.story .lock img{height:72px}.story .lock .eag{height:60px}}

/* the vision, painted onto the sky over the yard */
.painted{min-height:min(100svh,980px);display:grid;align-items:start;overflow:hidden;background:var(--steel)}
.painted .bgp{position:absolute;inset:0}
.painted .bgp img{width:100%;height:100%;object-fit:cover;object-position:50% 70%}
.painted .nameplate{position:relative;width:min(100%,46rem);padding:clamp(40px,5vw,72px) clamp(24px,4vw,64px) clamp(36px,4.5vw,64px);padding-inline-start:max(var(--gut),calc((100vw - var(--wrap))/2));background:var(--lab);margin-top:clamp(56px,10vh,120px)}
.painted .say{max-width:36rem;margin-top:22px;font-family:var(--fh);font-weight:500;font-size:clamp(1.15rem,1rem + .7vw,1.65rem);line-height:1.6;color:var(--navy)}
@media(max-width:760px){.painted{min-height:0;display:block}.painted .bgp{position:relative;height:56svh}.painted .nameplate{width:auto;margin:0;padding:48px var(--gut) 52px}}

/* products page: a pinned index of the four lines beside the plates that scroll past */
.split{background:var(--lab);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}
.split .idx{padding:clamp(72px,8vw,120px) clamp(24px,4vw,60px);padding-inline-start:max(var(--gut),calc((100vw - var(--wrap))/2))}
.split .idx .in-pin{position:sticky;top:calc(var(--hh) + 48px)}
.split .idx ol{list-style:none;margin:36px 0 0;padding:0}
.split .idx li a{display:block;font-family:var(--fh);font-weight:500;font-size:var(--h3);color:var(--zinc);padding:10px 0;transition:color 160ms linear}
.split .idx li a.on{color:var(--navy)}
@media(hover:hover){.split .idx li a:hover{color:var(--orange)}}
.split .items{display:grid}
.split .prod .gate{aspect-ratio:4/3}
.split .prod .rec{padding:26px clamp(24px,4vw,64px) clamp(46px,6vw,80px)}
.split .prod h2{font-size:var(--h2);color:var(--navy)}
.split .prod p{margin-top:12px;color:var(--zinc);max-width:36rem}
@media(max-width:900px){.split{grid-template-columns:1fr}.split .idx{display:none}.split .prod .rec{padding:22px var(--gut) 46px}}

/* daily output: the two lines as a printed ticket */
.ticket{background:var(--cast)}

/* services page: three units, each with its own tone and order */
.plates .plate{height:clamp(320px,70svh,780px)}
.svc.v1 .rec{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:clamp(20px,4vw,72px);padding-block:clamp(32px,4vw,56px) clamp(72px,8vw,120px)}
.svc h2{font-size:var(--h2);color:var(--navy)}
.svc p{color:var(--zinc);font-size:clamp(1.02rem,.98rem + .3vw,1.2rem)}
.svc.v2{background:var(--navy-2)}
.svc.v2 .band{padding-block:clamp(56px,7vw,100px) clamp(40px,5vw,64px)}
.svc.v2 h2{color:#fff}
.svc.v2 p{margin-top:14px;max-width:46rem;color:var(--steel)}
.svc.v3{background:var(--lab)}
.svc.v3 .band{max-width:46rem;margin-inline:auto;text-align:center;padding:clamp(72px,8vw,120px) var(--gut) clamp(40px,5vw,64px)}
.svc.v3 p{margin-top:16px}
@media(max-width:800px){.svc.v1 .rec{grid-template-columns:1fr}}

/* projects page: plates stacked in the press, each new project slides over the last */
.stack{position:relative;background:var(--navy-2);display:flow-root}
/* each project holds still for a reading pause (the spacer below it) before the next one slides over it */
/* half and half: the project's text on the start half, its photo on the end half */
.stack .card{position:sticky;top:var(--hh);height:calc(var(--vh) - var(--hh));min-height:560px;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:var(--cast)}
.stack .card:not(:last-child){margin-bottom:80vh}
/* the last project gets the same reading pause, then the page scrolls on to the footer normally */
.stack::after{content:"";display:block;height:80vh}
.stack .card+.card{box-shadow:0 -18px 40px rgba(0,30,44,.22)}
.stack .card .gate{clip-path:inset(0);height:100%}
.stack .card .rec{width:auto;margin:0;display:flex;flex-direction:column;justify-content:center;gap:clamp(16px,2vw,24px);padding:clamp(36px,5vh,72px) clamp(28px,4vw,72px);padding-inline-start:max(var(--gut),calc((100vw - var(--wrap))/2))}
.stack .card h2{font-size:clamp(1.9rem,1.3rem + 2vw,3.2rem);color:var(--navy);line-height:1.15}
.stack .card p{color:var(--ink);font-size:clamp(1.05rem,.98rem + .35vw,1.25rem);line-height:1.85;max-width:38rem}
html[lang=en] .stack .card p{line-height:1.65}
@media(max-width:900px),(max-height:640px){
  .stack .card{position:relative;top:auto;height:auto;min-height:0;box-shadow:none;margin-bottom:0!important}
  .stack::after{display:none}
  .stack .card{grid-template-columns:1fr}
  .stack .card .gate{aspect-ratio:4/3;height:auto;order:-1}
  .stack .card .rec{padding:24px var(--gut) 54px}
}

/* inquiry page: each channel stamped as one line on the lab slab, then the map plate */
.channels{background:var(--lab)}
.channels .lines{margin-top:clamp(30px,4vw,52px);display:grid;gap:clamp(14px,2vw,26px)}
.channels .ln{display:flex;flex-wrap:wrap;gap:6px 40px;align-items:baseline;font-family:var(--fh);font-weight:600;font-size:clamp(1.4rem,1rem + 1.7vw,2.7rem);line-height:1.2;color:var(--navy)}
.channels .ln .num{font-weight:400}
.channels .ln a{transition:color 120ms linear}
@media(hover:hover){.channels .ln a:hover{color:var(--orange)}}
.mapp{height:clamp(320px,62svh,640px)}
.mapp iframe{border:0;width:100%;height:100%}
.maplink{margin-top:18px}

/* ================= FOOTER: the bottom plate ================= */
.ftr{position:relative;z-index:1;background:var(--steel) var(--galv);color:var(--navy)}
.ftr .call{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px 48px;align-items:end;padding-block:clamp(56px,7vw,96px) clamp(40px,5vw,64px);border-bottom:1px solid var(--steel-3)}
.ftr .call h2{font-size:clamp(1.35rem,1.1rem + .9vw,1.95rem)}
.ftr .call .ch{margin-top:12px;display:flex;flex-wrap:wrap;gap:4px 28px;font-family:var(--fh);font-weight:600;font-size:clamp(.95rem,.9rem + .25vw,1.12rem)}
.ftr .call .ch a{transition:color 120ms linear}
.ftr .base{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr);gap:32px 48px;padding-block:clamp(40px,5vw,64px) 28px}
.ftr .logo{height:52px;width:auto}
.ftr .base p{margin-top:14px;color:var(--zinc-d);max-width:28rem;font-size:.98rem}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 24px;font-family:var(--fh);font-weight:500}
.ftr ul a{transition:color 120ms linear}
.ftr .khg{display:flex;align-items:center;gap:14px;font-family:var(--fh);font-weight:500}
.ftr .khg img{height:52px;width:auto}
.ftr .fine{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;padding-block:20px 26px;border-top:1px solid var(--steel-3);font-size:.88rem;color:var(--zinc-d)}
@media(hover:hover){.ftr a:hover{color:var(--orange)}}
@media(max-width:860px){.ftr .call{grid-template-columns:1fr}.ftr .base{grid-template-columns:1fr}}


/* the film sits flush on the next slab: no bottom padding */
.film{padding-top:clamp(72px,9vw,132px)}
.opener.bare{padding-bottom:clamp(48px,6vw,88px)}
.split .items{padding-top:clamp(72px,8vw,120px)}

/* services page: the quality statement beside a flush photo */
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);background:var(--lab);min-height:min(82svh,820px)}
.duo .txt{margin-top:clamp(24px,3vw,40px);max-width:38rem;color:var(--zinc);font-size:clamp(1.02rem,.98rem + .3vw,1.2rem)}
.duo .gate{min-height:420px}
@media(max-width:900px){.duo{grid-template-columns:1fr}.duo .side{padding:64px var(--gut) 44px}.duo .gate{aspect-ratio:4/3;min-height:0}}
.where{background:var(--cast);padding-bottom:clamp(48px,6vw,80px)}

@media(max-width:480px){
  .hdr .wrap{gap:10px}.hdr .end{gap:10px}
  .hdr .brand img{height:30px}.hdr .khg img{height:26px}
  .hdr .lang{padding-inline-start:10px;gap:8px}
}
@media(max-width:350px){.hdr .brand img{height:26px}.hdr .khg img{height:22px}.hdr .wrap,.hdr .end{gap:8px}.hdr .lang{padding-inline-start:8px;gap:6px}}

/* ================= page transition: the new page opens from the centre line ================= */
@view-transition{navigation:auto}
::view-transition-old(root){animation:none}
::view-transition-new(root){animation:vtGate 380ms var(--ez-stroke) both}
::view-transition-group(hdr){animation:none}
@keyframes vtGate{from{clip-path:inset(0 50% 0 50%)}to{clip-path:inset(0)}}

/* ================= capture mode and reduced motion ================= */
html.shot{--vh:900px}
html.shot [data-m],html.shot .gate,html.shot .gt::before{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important;animation:none!important}
html.shot .hero,html.shot .stack .card{position:relative;top:auto;box-shadow:none}
html.shot .stack .card{margin-bottom:0!important}
html.shot .stack::after{display:none}
html.shot .hero .ph{animation:none!important}
html.shot .opener.photo .bgp img{animation:none!important}
html.shot .prow .ph,html.shot .prow .cap{opacity:1!important;transform:none!important;transition:none!important}
html.shot .prow .ph img,html.shot .prow .cap{animation:none!important;translate:none!important}
html.shot .sel .opt .pic img{animation:none!important}
html.shot *,html.shot *::before,html.shot *::after{transition:none!important}
@media(prefers-reduced-motion:reduce){
  [data-m],.gate,.gt::before,.sel .win img{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important;animation:none!important}
  .sel .win img{opacity:0!important}.sel .win img.on{opacity:1!important}
  .sel .opt .pic img,.sel .opt .h::after{animation:none!important;transition:none!important}
  .hero .ph{animation:none!important}
  .opener.photo .bgp img{animation:none!important}
  .prow .ph,.prow .cap{opacity:1!important;transform:none!important;transition:none!important}
  .prow .ph img{transition:none!important;animation:none!important;translate:none!important;scale:none!important}
  .prow .cap{animation:none!important;translate:none!important}
  .hdr nav,.hdr nav a,.sheet,.sheet nav a,.sheet nav a::before,.sheet .sx,.menu-btn .ic::before,.menu-btn .ic::after{transition:none!important;transform:none!important}
  .sheet nav a.on::before{transform:none!important}
  .sel .opt .d{transition:none!important}
  ::view-transition-new(root){animation:none}
  #ld{display:none}
}

/* user rule (16 Oct 2026): no rounded corners and no shaped clips on any image, video or map, ever */
img,video,iframe,picture{border-radius:0!important}
img,video{clip-path:none}
.sel .win img{clip-path:inset(0 50% 0 50%)}
.sel .win img.on,.sel .win img.was{clip-path:inset(0)}