/* ===== Fonts (self-hosted, Greek + Latin subsets) ===== */
@font-face{font-family:'Plex';font-weight:600;font-style:normal;font-display:swap;
src:url('../fonts/plexsans600-latin.woff2') format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122;}
@font-face{font-family:'Plex';font-weight:600;font-style:normal;font-display:swap;
src:url('../fonts/plexsans600-greek.woff2') format('woff2');
unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;}
@font-face{font-family:'Plex';font-weight:700;font-style:normal;font-display:swap;
src:url('../fonts/plexsans700-latin.woff2') format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122;}
@font-face{font-family:'Plex';font-weight:700;font-style:normal;font-display:swap;
src:url('../fonts/plexsans700-greek.woff2') format('woff2');
unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;}
@font-face{font-family:'Manrope';font-weight:400 800;font-style:normal;font-display:swap;
src:url('../fonts/manrope-latin.woff2') format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122;}
@font-face{font-family:'Manrope';font-weight:400 800;font-style:normal;font-display:swap;
src:url('../fonts/manrope-greek.woff2') format('woff2');
unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;}
@font-face{font-family:'PlexMono';font-weight:600;font-style:normal;font-display:swap;
src:url('../fonts/plexmono600-latin.woff2') format('woff2');
unicode-range:U+0000-00FF,U+2000-206F;}
/* ===== Tokens =====
Source of truth for the brand palette is theme.json. The aliases below let
the stylesheet keep short names while WordPress emits the real values for
both the front end and the block editor. Hex fallbacks keep the design intact
if the presets ever fail to load. Dark mode is opt-in via the footer toggle
only — the logo and the whole identity are built on white. */
:root{
--navy: var(--wp--preset--color--navy, #1D3967);
--teal: var(--wp--preset--color--teal, #3CB5B5);
--orange: var(--wp--preset--color--orange, #F89923);
--ochre: var(--wp--preset--color--ochre, #E59B31);
--lime: var(--wp--preset--color--lime, #B1D14E);
--pink: var(--wp--preset--color--pink, #F38692);
--yellow: var(--wp--preset--color--yellow, #FDC925);
--paper: var(--wp--preset--color--paper, #F5F7FB);
--surface:var(--wp--preset--color--surface,#FFFFFF);
--sunk:#DFE4EC;
--line:#DCE3EF;
--ink:var(--navy); --ink-soft:#4C5E80; --ink-faint:#5E6E8A;
/* Ink for grounds that stay dark in both themes (the hero, the teal band).
--paper cannot serve here: it is the page background role, so it flips to
#0E1729 in dark mode and paints dark text on a dark ground. This one is
deliberately never redefined in the dark block. */
--on-dark:#F5F7FB;
--maxw:1180px; --gutter:40px;
--r-md:16px; --r-lg:26px; --r-pill:999px;
}
:root[data-theme="dark"]{
--navy:#E9EEF8; --navy-deep:#0A1220;
--paper:#0E1729; --surface:#16233B; --sunk:#1C2B47;
--line:#2B3A57; --ink:#E9EEF8; --ink-soft:#B6C4DC; --ink-faint:#8496B4;
--teal:#5BCBCA; --orange:#FFAD48; --ochre:#F0AE55;
--lime:#C6DF74; --pink:#F79DA8; --yellow:#FFD44E;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
/* The design is full-bleed: navy hero, shape bands and the teal band run to
the viewport edge, with an inner .wrap holding copy at 1180. Capping the
body at 1440 boxed the whole site and showed the grey html ground in the
gutters on anything wider. */
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Manrope',-apple-system,'Segoe UI',sans-serif;font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
/* A short page must not pull the footer up the screen. main takes the slack,
so the footer sits on the bottom edge whatever the content length.
svh, not vh: on a phone vh counts the retracted toolbar and would leave a
dead scroll strip below the fold. */
body{display:flex;flex-direction:column;min-height:100vh}
@supports (min-height:100svh){ body{min-height:100svh} }
main{flex:1 0 auto}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
@media (max-width:760px){ :root{--gutter:20px} body{font-size:16px} }
h1,h2,h3,h4,.disp{font-family:'Manrope',sans-serif;font-weight:800;letter-spacing:-.025em;line-height:1.1;margin:0;text-wrap:balance;color:var(--ink)}
h1{font-size:clamp(2.1rem,5.2vw,3.4rem)}
h2{font-size:clamp(1.55rem,3.5vw,2.35rem)}
h3{font-size:1.06rem;font-weight:700;letter-spacing:-.01em;line-height:1.3}
h4,h5{font-size:1rem;font-weight:700;margin:0}
p{margin:0}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
ul{margin:0;padding:0;list-style:none}
.mono{font-family:'PlexMono',ui-monospace,monospace;font-variant-numeric:tabular-nums}
.eyebrow{font-family:'PlexMono',monospace;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)}
.lead{font-size:1.15rem;font-weight:400;line-height:1.55;color:var(--ink-soft)}
.screen-reader-text{position:absolute;left:-9999px}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* Reveal only once JS confirms it can un-reveal — a failed script must never hide copy. */
/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:'Manrope',sans-serif;font-weight:700;font-size:.95rem;
padding:13px 24px;border-radius:var(--r-pill);border:2px solid transparent;background:var(--orange);color:#241203;
cursor:pointer;transition:transform .16s ease,background .16s ease}
.btn:hover{transform:translateY(-2px);background:#FFA733}
.btn.ghost{background:none;border-color:var(--navy);color:var(--ink)}
.btn.ghost:hover{background:var(--navy);color:var(--paper)}
:root[data-theme="dark"] .btn.ghost:hover{color:var(--navy-deep)}
.btn.sm{padding:9px 18px;font-size:.88rem}
/* ===== Header ===== */
header.site{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:1px solid var(--line)}
.site-inner{display:flex;align-items:center;gap:28px;height:78px}
.brand{display:flex;align-items:center;flex:none}
.brand-logo{height:46px;width:auto;display:block}
nav.main{margin-left:auto}
nav.main ul{display:flex;gap:26px}
nav.main a{font-size:.95rem;color:var(--ink-soft);padding:6px 0;border-bottom:2.5px solid transparent;transition:color .15s,border-color .15s}
nav.main a:hover{color:var(--ink);border-bottom-color:var(--teal)}
.head-right{display:flex;align-items:center;gap:16px;flex:none}
.phone-link{font-size:.9rem;font-weight:600;color:var(--ink)}
.burger{display:none;background:none;border:none;cursor:pointer;padding:8px;flex-direction:column;gap:5px}
.burger span{display:block;width:22px;height:2.5px;border-radius:2px;background:var(--ink)}
@media (max-width:1080px){ nav.main{display:none} .head-right{margin-left:auto} .burger{display:flex} }
@media (max-width:560px){ .phone-link{display:none} .site-inner{height:66px} .brand-logo{height:38px} }
.mobile-panel{position:fixed;inset:0;background:var(--paper);z-index:100;display:flex;flex-direction:column;
padding:22px var(--gutter) 40px;transform:translateY(-100%);
visibility:hidden;pointer-events:none;
transition:transform .4s cubic-bezier(.2,.8,.2,1),visibility 0s linear .4s}
.mobile-panel.open{transform:translateY(0);visibility:visible;pointer-events:auto;transition-delay:0s,0s}
/* the burger only exists below 1080px, so neither should the panel */
@media (min-width:1081px){ .mobile-panel{display:none} }
.mobile-panel .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:34px}
.mobile-panel .close{background:none;border:none;font-size:34px;line-height:1;color:var(--ink);cursor:pointer}
.mobile-panel ul{display:flex;flex-direction:column;gap:20px}
.mobile-panel a{font-family:'Manrope',sans-serif;font-weight:700;font-size:1.5rem;letter-spacing:-.02em}
/* A hairline separates the block from the navigation above, so it reads as
the panel's footing rather than as two stray links. */
.mobile-panel .foot{margin-top:auto;padding-top:24px;border-top:1px solid rgba(245,247,251,.16);
display:flex;flex-direction:column;align-items:flex-start;gap:16px}
/* The address stays quiet: the number is the action, this is the reference. */
.mobile-panel .foot .mp-addr{
display:inline-flex;align-items:center;gap:9px;
font-family:'Manrope',sans-serif;font-size:.95rem;font-weight:500;line-height:1.4;
color:rgba(245,247,251,.72);padding:4px 0;transition:color .16s ease;
}
.mobile-panel .foot .mp-addr:hover{color:var(--on-dark);text-decoration:none}
.mobile-panel .foot .mp-pin{display:grid;place-items:center;width:26px;height:26px;flex:none;
border-radius:50%;background:rgba(245,247,251,.10);color:var(--teal)}
.mobile-panel .foot .mp-addr::after{content:"↗";font-size:.8em;opacity:.65;margin-left:1px}
/* A blanket `:root[data-theme="dark"] .mobile-panel a` rule repaints every
anchor in the panel to --ink. That put light text on the orange pill at
1.59:1. The pill's ink belongs to the orange it sits on, in either theme,
and the address keeps its quieter tone rather than going full brightness. */
:root[data-theme="dark"] .mobile-panel .foot .mp-tel{color:#241203}
:root[data-theme="dark"] .mobile-panel .foot .mp-addr{color:rgba(233,238,248,.72)}
/* ===== Sections ===== */
.sec{padding:74px 0}
@media (max-width:760px){ .sec{padding:52px 0} }
.sec.band{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec > .wrap > .head{margin-bottom:38px;max-width:56ch}
.head .eyebrow{display:block;margin-bottom:14px}
.head p{margin-top:14px;color:var(--ink-soft);font-size:1.05rem}
/* ===== Hero ===== */
.hero{padding:74px 0 62px}
@media (max-width:940px){ .hero{padding:46px 0 42px} }
.hero .eyebrow{display:flex;align-items:center;gap:9px;margin-bottom:20px}
.hero .eyebrow::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--orange);flex:none}
.hero h1{margin-bottom:22px}
.hero .lead{max-width:38ch;margin-bottom:34px}
.hero .lead b{font-weight:700;color:var(--ink)}
.ctas{display:flex;gap:14px;flex-wrap:wrap}
.ctas-gap{margin-top:24px}
/* Spec card — the operating model, which no competitor publishes */
.spec{background:var(--surface);border:2px solid var(--navy);border-radius:var(--r-lg);overflow:hidden}
:root[data-theme="dark"] .spec{border-color:var(--line)}
.spec .head{background:var(--navy);color:var(--paper);padding:16px 26px;display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0;max-width:none}
:root[data-theme="dark"] .spec .head{color:var(--navy-deep)}
.spec .head .t{font-family:'Manrope',sans-serif;font-weight:800;font-size:1.02rem;letter-spacing:-.01em}
.spec .head .star{color:var(--yellow);font-size:1.15rem;line-height:1}
.spec .row{display:flex;align-items:center;gap:18px;padding:19px 26px;border-bottom:1px solid var(--line)}
.spec .row:last-of-type{border-bottom:none}
.spec .row .icon{flex:none;width:34px;height:34px;display:grid;place-items:center}
.spec .row .l{flex:1;font-size:.93rem;color:var(--ink-soft);line-height:1.35}
.spec .row .n{font-family:'PlexMono',monospace;font-weight:600;font-size:1.02rem;color:var(--ink);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.spec .note{background:var(--sunk);padding:17px 26px;font-size:.9rem;line-height:1.5;color:var(--ink-soft);display:flex;gap:12px;align-items:flex-start}
.spec .note b{color:var(--ink);font-weight:700}
.spec .note svg{flex:none;margin-top:2px}
/* ===== Facts ===== */
.facts{display:grid;grid-template-columns:repeat(4,1fr);border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:var(--surface)}
@media (max-width:860px){ .facts{grid-template-columns:repeat(2,1fr)} }
.fact{padding:26px 24px;border-right:1px solid var(--line)}
.fact:last-child{border-right:none}
@media (max-width:860px){ .fact:nth-child(2n){border-right:none} .fact:nth-child(-n+2){border-bottom:1px solid var(--line)} }
.fact .n{display:block;font-family:'Manrope',sans-serif;font-weight:800;font-size:2.1rem;line-height:1;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.fact .n .u{font-size:1.05rem;font-weight:700}
.fact .l{display:block;margin-top:9px;font-size:.87rem;color:var(--ink-soft);line-height:1.4}
.fact:nth-child(1) .n{color:var(--teal)}
.fact:nth-child(2) .n{color:var(--orange)}
.fact:nth-child(3) .n{color:var(--lime)}
.fact:nth-child(4) .n{color:var(--pink)}
/* ===== Is / is-not ===== */
.about{display:grid;grid-template-columns:.85fr 1.15fr;gap:34px;align-items:start}
@media (max-width:860px){ .about{grid-template-columns:1fr;gap:24px} }
.is-card{background:var(--navy);color:var(--paper);border-radius:var(--r-lg);padding:32px 34px}
:root[data-theme="dark"] .is-card{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.is-card .t{font-family:'Manrope',sans-serif;font-weight:800;font-size:1.15rem;margin-bottom:20px;letter-spacing:-.015em}
.is-list{display:flex;flex-direction:column;gap:14px}
.is-list li{position:relative;padding-left:32px;line-height:1.5;font-size:1rem}
.is-list li::before{content:"";position:absolute;left:0;top:.42em;width:16px;height:16px;border-radius:5px;background:var(--lime)}
/* ===== Steps ===== */
.steps,.room-grid{display:grid;gap:22px}
.steps{grid-template-columns:repeat(3,1fr)}
@media (max-width:860px){ .steps{grid-template-columns:1fr} }
.step{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 26px 26px}
.step svg{margin-bottom:18px}
.step .n{display:block;font-family:'PlexMono',monospace;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:8px}
.step .t{font-family:'Manrope',sans-serif;font-weight:700;font-size:1.06rem;margin-bottom:9px;letter-spacing:-.01em}
.step p{font-size:.95rem;color:var(--ink-soft);line-height:1.55}
/* ===== Tiles ===== */
.room-grid{grid-template-columns:repeat(3,1fr)}
@media (max-width:940px){ .room-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .room-grid{grid-template-columns:1fr} }
/* ===== Counters ===== */
/* ===== FAQ ===== */
.is-list.faq,.faq-list{max-width:820px;border-top:1px solid var(--line)}
.accordion-item{border-bottom:1px solid var(--line)}
.accordion-item .q,.accordion-item summary{list-style:none;cursor:pointer;padding:20px 44px 20px 0;position:relative;
font-family:'Manrope',sans-serif;font-weight:700;font-size:1.02rem;letter-spacing:-.01em;background:none;border:none;
width:100%;text-align:left;color:var(--ink)}
.accordion-item summary::-webkit-details-marker{display:none}
.accordion-item .plus{position:absolute;right:8px;top:50%;width:13px;height:13px;
border-right:2.5px solid var(--teal);border-bottom:2.5px solid var(--teal);
transform:translateY(-70%) rotate(45deg);transition:transform .2s ease}
.accordion-item[open] .plus,.accordion-item.open .plus{transform:translateY(-25%) rotate(-135deg)}
.accordion-item .a{padding:0 44px 22px 0;color:var(--ink-soft);font-size:.98rem;line-height:1.6}
/* ===== Quote ===== */
.quote{background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--orange);border-radius:0 var(--r-lg) var(--r-lg) 0;padding:28px 32px;max-width:68ch}
.quote p{font-family:'Manrope',sans-serif;font-weight:700;font-size:1.18rem;line-height:1.4;letter-spacing:-.015em}
.quote .meta{margin-top:12px;font-family:'PlexMono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
/* ===== Contact ===== */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
@media (max-width:860px){ .contact{grid-template-columns:1fr;gap:30px} }
/* ===== Forms ===== */
.contact-form{display:flex;flex-direction:column;gap:16px;max-width:560px}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-family:'PlexMono',monospace;font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.field input,.field textarea{font-family:'Manrope',sans-serif;font-size:1rem;color:var(--ink);background:var(--surface);
border:1.5px solid var(--line);border-radius:var(--r-md);padding:13px 16px}
.field input:focus,.field textarea:focus{border-color:var(--teal);outline:none}
.field textarea{min-height:150px;resize:vertical}
/* ===== Page hero / entry ===== */
.page-hero{padding:56px 0 40px;border-bottom:1px solid var(--line)}
.page-hero .eyebrow{display:block;margin-bottom:14px}
.page-hero .lead{margin-top:16px;max-width:56ch}
.entry-header{margin-bottom:26px}
.entry-content > *{margin-bottom:26px}
.entry-content > *:last-child{margin-bottom:0}
.entry-content h2{margin-top:16px}
.entry-content p{color:var(--ink-soft)}
.entry-content a{color:var(--teal);text-decoration:underline;text-underline-offset:3px}
/* ===== Blog ===== */
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:24px}
.post-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:border-color .16s ease}
.post-card:hover{border-color:var(--teal)}
.post-card .thumb img{width:100%;height:190px;object-fit:cover}
.post-card .body{padding:22px 24px 24px}
.post-card .meta{font-family:'PlexMono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin:16px 0 0}
/* The category carried no rule at all, so it rendered as 17px body copy — a
shade larger than the 17px bold title beside it and competing with it. It is
a label, so it takes the label treatment the rest of the site uses. */
.post-card .cat{
font-family:'PlexMono',monospace;font-size:10.5px;font-weight:600;
letter-spacing:.12em;text-transform:uppercase;color:var(--teal-ink);
margin-bottom:11px;line-height:1;
}
.post-card h3{font-size:1.14rem;line-height:1.28;letter-spacing:-.015em;margin-bottom:10px}
.post-card .t{font-family:'Manrope',sans-serif;font-weight:700;font-size:1.08rem;letter-spacing:-.01em;margin-bottom:8px}
.post-card .excerpt{font-size:.94rem;color:var(--ink-soft);line-height:1.55}
/* Named .post-body, not .single-post: body_class() puts `single-post` on the
element of every post, so the old selector matched the document
body and capped the whole page — header included — at 720px.
margin-inline:auto because a reading column has to sit in the middle. */
.post-body{max-width:720px;margin-inline:auto}
.pagination{display:flex;gap:10px;margin-top:34px}
.pagination a,.pagination span{padding:9px 15px;border:1px solid var(--line);border-radius:var(--r-pill);font-size:.9rem}
/* Named .pill, not .tag: body_class() puts `tag` on the of every tag
archive, so the old selector styled the whole document as a pill — mono type
at 10.5px, uppercase, grey ground, even a 999px border-radius on the body. */
.pill{display:inline-block;font-family:'PlexMono',monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
padding:4px 10px;border-radius:var(--r-pill);background:var(--sunk);color:var(--ink-soft)}
/* .tag.teal was used in the markup but never defined, so the category pill on a
post read as the same grey as the neutral tags below it. */
.pill.teal{background:rgba(60,181,181,.16);color:var(--teal-ink)}
a.pill:hover{background:var(--line)}
a.pill.teal:hover{background:rgba(60,181,181,.26)}
/* Article prose needs real list markers: the global reset strips them for the
site's own layout lists, which leaves editor lists looking like loose lines.
Scoped to .wp-block-list, the class the editor puts on its own list blocks —
`.entry-content ul` also caught the theme's layout lists inside blocks (the
navy card on /pioi-eimaste picked up bullets and its text was repainted to
the body colour, unreadable on that ground). */
.entry-content .wp-block-list{list-style:revert;padding-left:1.35em;margin-bottom:22px}
.entry-content .wp-block-list li{margin-bottom:9px;line-height:1.7;color:var(--ink-soft)}
.entry-content .wp-block-list li::marker{color:var(--teal-ink)}
.entry-content .wp-block-list li strong{color:var(--ink)}
/* ===== Gallery ===== */
.wp-block-gallery{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.wp-block-gallery figure{margin:0}
.wp-block-gallery img{width:100%;height:230px;object-fit:cover;border-radius:var(--r-md)}
/* ===== Footer ===== */
footer.site{background:var(--navy);color:var(--paper);padding:56px 0 28px}
:root[data-theme="dark"] footer.site{background:var(--navy-deep);color:var(--ink)}
footer.site .brand-logo{height:52px;margin-bottom:16px}
.foot-brand p{font-size:.95rem;line-height:1.6;opacity:.82;max-width:34ch}
/* Το .foot-h είναι (το
έσπαγε τη σειρά επικεφαλίδων μετά το ).
Το έπαιρνε line-height 1.15 από τον κανόνα επικεφαλίδων· χωρίς ρητό
line-height το
κληρονομεί 1.65 και κάθε σελίδα ψηλώνει. */
footer.site h5,footer.site .foot-h{line-height:1.15;font-family:'PlexMono',monospace;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;opacity:.6;margin-bottom:14px}
footer.site ul{display:flex;flex-direction:column;gap:11px}
footer.site a{opacity:.85;font-size:.96rem}
footer.site a:not(.foot-call):hover{opacity:1;text-decoration:underline;text-underline-offset:3px}
/* The wordmark is a link home, but it is an image, not a text link: it must not
inherit the footer's dimmed opacity, and its box has to match the logo — as a
plain inline anchor it spanned 289px around a 168px image, so 121px of the
footer was silently clickable. */
footer.site a.foot-logo,
footer.site a.foot-logo:hover{display:inline-block;line-height:0;opacity:1;text-decoration:none}
footer.site a.foot-logo:hover img{opacity:.86;transition:opacity .18s ease}
/* Build credit. Understated on purpose: it is a signature, not a second brand,
so it sits at the copyright's weight and only the mark carries colour. */
.foot-copy{display:flex;flex-direction:column;gap:7px}
footer.site a.by-ccd{
display:inline-flex;align-items:center;gap:8px;width:max-content;
font-size:.82rem;opacity:.62;color:inherit;
}
footer.site a.by-ccd:hover{opacity:1;text-decoration:none}
.ccd-mark{width:15px;height:auto;flex:none;display:block}
@media (max-width:560px){ .foot-copy{gap:9px} }
.foot-bottom{border-top:1px solid rgba(255,255,255,.16);padding-top:22px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:.86rem;opacity:.72;align-items:center}
:root[data-theme="dark"] .foot-bottom{border-top-color:var(--line)}
.foot-bottom .l{display:flex;gap:16px;align-items:center}
/* "Θέμα" named the setting, not the choice — the control has to say which way
it goes. Icon plus the destination state; CSS picks the pair so the button is
already correct on first paint. */
.theme-toggle{background:none;border:1.5px solid currentColor;color:inherit;border-radius:var(--r-pill);
padding:5px 13px;font-family:'PlexMono',monospace;font-size:10.5px;letter-spacing:.1em;
text-transform:uppercase;cursor:pointer;opacity:.8;
display:inline-flex;align-items:center;gap:7px;line-height:1}
.theme-toggle:hover{opacity:1}
.theme-toggle{white-space:nowrap}
.theme-toggle svg{display:block}
.theme-toggle .tt-moon,.theme-toggle .tt-sun{display:inline-flex}
.theme-toggle .tt-sun,.theme-toggle .tt-light{display:none}
:root[data-theme="dark"] .theme-toggle .tt-moon,
:root[data-theme="dark"] .theme-toggle .tt-dark{display:none}
:root[data-theme="dark"] .theme-toggle .tt-sun{display:inline-flex}
:root[data-theme="dark"] .theme-toggle .tt-light{display:inline}
/* ===== 404 ===== */
.sec.err{padding:110px 0 90px}
.sec.err h1{margin-bottom:16px}
.sec.err .lead{margin-bottom:30px;max-width:44ch}
/* helpers replacing former inline styles */
.form-ok{margin-top:20px;color:var(--lime);font-weight:700}
.form-err{margin-top:20px;color:var(--orange);font-weight:700}
/* The form handler redirects to #contact-status. Clear the sticky header
and keep the "Φόρμα επικοινωνίας" heading above the message in view. */
#contact-status{scroll-margin-top:150px;outline:none}
.hp{position:absolute;left:-9999px}
/* Consent sits with the fields, not as fine print under the button. */
.field-consent{margin:6px 0 20px}
.field-consent label{display:flex;gap:10px;align-items:flex-start;cursor:pointer;
font-size:.92rem;line-height:1.5;color:var(--ink-soft)}
.field-consent input{margin-top:3px;flex:none;width:17px;height:17px;accent-color:var(--teal)}
.field-consent a{color:var(--teal-ink);text-decoration:underline;text-underline-offset:3px}
.entry-content.narrow{max-width:820px}
.page-hero.err{text-align:left;padding-bottom:100px}
.empty{color:var(--ink-faint)}
.cat-tag{margin-bottom:16px;display:inline-block}
.post-hero{margin-bottom:36px;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
/* ── Single post: reading column with a table of contents ──────
The post section had no vertical padding of its own, so the last
paragraph ran straight into the footer band. The TOC fills the
gutter the centred column left empty and gives the page a spine. */
.post-sec{padding:8px 0 96px}
/* The blog and archive lists sat in a bare , which has no padding of
its own, so the first row of cards touched the page-hero's edge. */
.post-list{padding:56px 0 96px}
/* Legal and other plain pages: same rhythm as the post list, so the copy is
not pinned between the page-hero and the shape band. */
.page-sec{padding:56px 0 96px}
@media (max-width:760px){ .page-sec{padding:40px 0 68px} }
@media (max-width:760px){ .post-list{padding:40px 0 68px} }
.post-head{padding-bottom:0}
.post-layout{display:block}
@media (min-width:1120px){
.post-layout.has-toc{
display:grid;grid-template-columns:230px minmax(0,720px);
gap:64px;justify-content:center;align-items:start;
}
.post-layout.has-toc .post-body{margin-inline:0}
}
.post-toc{display:none}
@media (min-width:1120px){
.post-toc{display:block;position:sticky;top:120px}
}
.toc-title{
font-family:'PlexMono',monospace;font-size:10.5px;font-weight:600;
letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);
margin-bottom:14px;
}
.post-toc ul{display:flex;flex-direction:column;gap:2px;border-left:2px solid var(--line)}
.post-toc a{
display:block;padding:8px 0 8px 16px;margin-left:-2px;
border-left:2px solid transparent;
font-size:.92rem;line-height:1.4;color:var(--ink-soft);
transition:color .16s ease,border-color .16s ease;
}
.post-toc a:hover{color:var(--ink);border-left-color:var(--teal)}
.post-toc a.current{color:var(--ink);font-weight:600;border-left-color:var(--teal)}
/* headings need to clear the sticky header when jumped to */
.entry-content h2[id]{scroll-margin-top:120px}
.post-tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:44px;padding-top:26px;border-top:1px solid var(--line)}
.post-date{margin-top:12px}
.entry-header .cat-tag{margin-bottom:16px;display:inline-block}
.post-hero img{width:100%;height:auto;display:block}
.sib-tag{font-size:12.5px;color:var(--ink-soft);margin-top:8px}
.post-date{margin-top:14px;color:var(--ink-faint);font-size:12.5px}
.page-intro{max-width:60ch;margin-bottom:44px}
/* ═══════════════════════════════════════════════════════════════
Refinement pass. Everything below fixes something that was
actually observed in a rendered screenshot, not guessed at.
═══════════════════════════════════════════════════════════════ */
/* ── Reading measure ──────────────────────────────────────────
Body copy inside the_content() ran the full 1180px container,
about 139 characters per line. Nothing is readable at that width. */
.entry-content > p,
.entry-content > ul,
.entry-content > ol{max-width:68ch}
.entry-content > h2{max-width:22ch;margin-top:64px}
.entry-content > h2 + p{margin-top:-8px}
.entry-content > *{margin-bottom:22px}
.entry-content > div{margin-bottom:52px}
.entry-content > *:first-child{margin-top:0}
/* A short colour rule above each content heading, cycling the palette,
so the page has landmarks instead of a flat stack of bold lines. */
.entry-content > h2{position:relative;padding-top:26px}
.entry-content > h2::before{
content:"";position:absolute;top:0;left:0;width:52px;height:5px;border-radius:3px;background:var(--teal);
}
.entry-content > h2:nth-of-type(2)::before{background:var(--orange)}
.entry-content > h2:nth-of-type(3)::before{background:var(--lime)}
.entry-content > h2:nth-of-type(4)::before{background:var(--pink)}
/* ── Header ───────────────────────────────────────────────────
46px logo in a 78px bar read as a stamp. More air, larger mark. */
.site-inner{height:92px;gap:34px}
.brand-logo{height:54px}
@media (max-width:560px){ .site-inner{height:72px} .brand-logo{height:42px} }
nav.main ul{gap:30px}
nav.main a{font-weight:500}
.phone-link{letter-spacing:.01em;color:var(--ink-soft)}
/* ── Hero ─────────────────────────────────────────────────────
The headline was ragging badly across three cramped lines. */
.hero{padding:88px 0 76px}
.hero h1{font-size:clamp(2.3rem,4.6vw,3.6rem);max-width:15ch;line-height:1.04}
.hero .lead{font-size:1.22rem;max-width:40ch}
@media (max-width:940px){ .hero{padding:52px 0 46px} .hero h1{max-width:none} }
/* ── Spec card ────────────────────────────────────────────────
Icons were four different weights and sizes. One optical size,
one stroke weight, one alignment. */
.spec .row{padding:20px 28px}
.spec .row .icon{width:30px;height:30px}
.spec .row .icon svg{width:26px;height:26px}
.spec .row .n{font-size:1.05rem;letter-spacing:.01em}
.spec .head{padding:18px 28px}
.spec .note{padding:18px 28px}
.facts{box-shadow:0 1px 0 rgba(29,57,104,.04)}
.fact{padding:28px 26px}
.fact .n{font-size:1.95rem;display:flex;align-items:baseline;gap:.28em;flex-wrap:wrap}
.fact .n .u{font-size:.98rem;font-weight:700;letter-spacing:0;color:var(--ink-soft)}
.fact .l{font-size:.86rem;margin-top:11px;max-width:26ch}
.fact:nth-child(4) .n{color:var(--ink);font-size:1.72rem}
/* ── Is / is-not ──────────────────────────────────────────────
The X was two crossed CSS gradients and looked hand-drawn badly. */
.about{gap:38px;align-items:stretch}
.is-card{padding:38px 40px;display:flex;flex-direction:column;justify-content:center}
.is-card .t{font-size:1.22rem;margin-bottom:24px}
.is-list{gap:16px}
.is-list li{font-size:1.02rem}
/* ── Tiles ────────────────────────────────────────────────────
Flat white boxes with one line of text. A colour edge gives the
grid rhythm and ties the tiles to the palette. */
.wp-block-studyroom-room-tiles > h2,
.wp-block-studyroom-steps > h2{margin-bottom:30px;max-width:22ch}
/* ── Steps ────────────────────────────────────────────────────
Four items in a hard 3-column grid left an orphan on row two. */
.steps{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px}
.step{padding:30px 26px;border-top:5px solid var(--teal)}
.step:nth-child(4n+2){border-top-color:var(--orange)}
.step:nth-child(4n+3){border-top-color:var(--lime)}
.step:nth-child(4n+4){border-top-color:var(--pink)}
.step .n{font-size:11px;color:var(--teal-ink);margin-bottom:12px}
/* the numeral repeats its card's top-border hue, in the text-safe
variant — the raw fill colours are too light to read at 11px */
.step:nth-child(4n+2) .n{color:var(--orange-ink)}
.step:nth-child(4n+3) .n{color:var(--lime-ink)}
.step:nth-child(4n+4) .n{color:var(--pink-ink)}
.step .t,.step h3{font-size:1.08rem;margin-bottom:10px}
/* ── Counters ─────────────────────────────────────────────────
The block emits .counters > .counter, the stylesheet only knew
.counter — so the numbers stacked in one column and the labels
in another. */
.counters{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;
background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.counters .counter{background:var(--surface);padding:30px 28px;text-align:left}
.counters .counter .n{font-family:'Manrope',sans-serif;font-weight:800;font-size:2.5rem;line-height:1;
letter-spacing:-.035em;color:var(--teal);font-variant-numeric:tabular-nums}
.counters .counter:nth-child(2) .n{color:var(--orange)}
.counters .counter:nth-child(3) .n{color:var(--lime)}
.counters .counter:nth-child(4) .n{color:var(--pink)}
.counters .counter .l{display:block;margin-top:12px;font-size:.88rem;color:var(--ink-soft);line-height:1.4}
/* ── FAQ ──────────────────────────────────────────────────────*/
.wp-block-studyroom-faq-list{max-width:840px;border-top:1px solid var(--line)}
.accordion-item .q{font-size:1.06rem;padding:22px 48px 22px 0}
.accordion-item .q:hover{color:var(--teal)}
.accordion-item .a{font-size:1rem;line-height:1.65;max-width:66ch}
.accordion-item .a p{margin:0}
/* ── CTA band ─────────────────────────────────────────────────
The button was teal-on-orange: contrast 1.13, effectively invisible.
theme.json's link colour was winning over the button rule. */
.cta-band{background:var(--navy);border-radius:var(--r-lg);padding:52px 0;margin-top:64px}
:root[data-theme="dark"] .cta-band{background:var(--surface);border:1px solid var(--line)}
.cta-band .wrap{padding:0 48px;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.cta-band h2{color:var(--paper);max-width:20ch;font-size:clamp(1.4rem,2.6vw,1.95rem)}
:root[data-theme="dark"] .cta-band h2{color:var(--ink)}
.cta-band .btn,
.cta-band a.btn:where(:not(.wp-element-button)){background:var(--orange);color:#241203;border-color:transparent}
.cta-band .btn:hover{background:#FFA733;color:#241203}
.btn.lg{padding:16px 30px;font-size:1rem}
@media (max-width:640px){ .cta-band .wrap{padding:0 26px} }
/* ── Contact ──────────────────────────────────────────────────*/
.contact{gap:56px;align-items:start} which put
near-black text on the navy footer. */
footer.site{padding:64px 0 30px}
footer.site .brand-logo{height:56px;margin-bottom:18px}
/* ── Section rhythm ───────────────────────────────────────────
Consistent breathing room, and a tinted ground so the page is not
one unbroken white sheet. */
.sec{padding:84px 0}
@media (max-width:760px){ .sec{padding:56px 0} }
#content-start{padding:8px 0 84px}
@media (max-width:760px){ #content-start{padding:0 0 56px} }
.page-hero{padding:64px 0 46px}
/* ── Sibling card (footer) ────────────────────────────────────
Sits on the navy ground, so it needs its own light-on-dark scale
rather than the body ink tokens. */
.sibling-card{background:rgba(255,255,255,.08);border-radius:var(--r-lg);padding:24px 26px;align-self:start}
:root[data-theme="dark"] .sibling-card{background:var(--surface);border:1px solid var(--line)}
.sibling-card .k{font-family:'PlexMono',monospace;font-size:10.5px;font-weight:600;letter-spacing:.14em;
text-transform:uppercase;opacity:.75;margin-bottom:10px}
.sibling-card .n{display:inline-block;font-family:'Manrope',sans-serif;font-weight:700;font-size:1.06rem;
letter-spacing:-.01em;opacity:1;text-decoration:none}
.sibling-card .n:hover{text-decoration:underline;text-underline-offset:3px}
.sibling-card .sib-tag{margin-top:10px;font-size:.88rem;line-height:1.55;
color:var(--paper);opacity:.8}
:root[data-theme="dark"] .sibling-card .sib-tag{color:var(--ink)}
.sibling-card .n{white-space:nowrap}
@media (max-width:1100px){.sibling-card .n{white-space:normal}}
/* inline variant, used on light grounds */
.sibling-note{display:flex;gap:16px;align-items:flex-start;background:var(--sunk);
border-radius:var(--r-lg);padding:24px 28px;max-width:70ch}
.sibling-note svg{flex:none}
.sibling-note span{font-size:.98rem;line-height:1.6;color:var(--ink-soft)}
.sibling-note b a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
/* ═══════════════════════════════════════════════════════════════
Homepage art direction.
The page is built from the logo's own world — roof, lamp, book,
pencils, plant — not from bordered white boxes. Colour is used as
ground, not as a 1px accent.
═══════════════════════════════════════════════════════════════ */
/* ── Hero: full-bleed navy, ending in the roof line ───────────── */
.hero-room{
position:relative;background:var(--navy);color:var(--on-dark);
padding:78px 0 118px;overflow:hidden;
}
:root[data-theme="dark"] .hero-room{background:var(--navy-deep)}
.hero-room::before{
content:"";position:absolute;top:-160px;right:-180px;width:620px;height:620px;
border-radius:50%;background:rgba(60,181,181,.10);pointer-events:none;
}
.hero-room-grid{
position:relative;z-index:1;
display:grid;grid-template-columns:1.02fr .98fr;gap:60px;align-items:center;
}
.hero-copy .eyebrow{color:rgba(245,247,251,.62);margin-bottom:22px;display:flex;align-items:center;gap:10px}
.hero-copy .eyebrow::before{content:"";width:26px;height:3px;border-radius:2px;background:var(--yellow);flex:none}
.hero-room h1{
color:var(--on-dark);font-size:clamp(2.5rem,5vw,4.1rem);line-height:1.02;
letter-spacing:-.035em;max-width:13ch;margin-bottom:26px;
}
.hero-room .lead{
color:rgba(245,247,251,.86);font-size:1.18rem;line-height:1.6;
max-width:44ch;margin-bottom:38px;font-weight:400;
}
.hero-room .lead b{color:var(--yellow);font-weight:700}
.hero-art{display:flex;justify-content:center}
.hero-art .scene{width:100%;max-width:560px;height:auto}
.roof-cut{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:90px;display:block}
@media (max-width:960px){
/* The roof cut is 90px tall and sits inside this padding, so 96px left the
buttons 7px from the white edge. The bottom padding has to clear the cut
first and give the buttons room after it. */
.hero-room{padding:52px 0 146px}
.hero-room-grid{grid-template-columns:1fr;gap:38px}
.hero-room h1{max-width:none}
.hero-art{order:-1}
.hero-art .scene{max-width:400px}
}
/* quiet button on the navy ground */
.btn.quiet{background:transparent;border-color:rgba(245,247,251,.42);color:var(--on-dark)}
.btn.quiet:hover{background:rgba(245,247,251,.12);border-color:var(--on-dark);transform:translateY(-2px)}
/* ── Numbers: a plain rule-separated row, no boxes ────────────── */
.sec.numbers{padding:56px 0 68px}
.num-row{display:grid;grid-template-columns:repeat(4,1fr);gap:0;list-style:none;margin:0;padding:0}
.num-row li{padding:4px 28px;border-left:2px solid var(--line)}
.num-row li:first-child{padding-left:0;border-left:none}
.num-row .k{display:block;font-family:'PlexMono',monospace;font-size:10.5px;font-weight:600;
letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:12px}
.num-row .v{display:block;font-family:'Manrope',sans-serif;font-weight:800;font-size:2.1rem;
line-height:1;letter-spacing:-.035em;color:var(--navy);font-variant-numeric:tabular-nums}
.num-row li:nth-child(1) .v{color:var(--teal)}
.num-row li:nth-child(2) .v{color:var(--orange)}
.num-row li:nth-child(3) .v{color:var(--lime)}
.num-row li:nth-child(4) .v{color:var(--navy)}
.num-row .d{display:block;margin-top:12px;font-size:.88rem;line-height:1.45;color:var(--ink-soft);max-width:24ch}
@media (max-width:860px){
.num-row{grid-template-columns:1fr 1fr;gap:28px 0}
.num-row li:nth-child(odd){padding-left:0;border-left:none}
}
/* ── Evening: the problem{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* ── Section heads ───────────────────────────────────────────── */
.sec .head{margin-bottom:44px;max-width:30ch}
.sec .head .eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.sec .head .eyebrow::before{content:"";width:26px;height:3px;border-radius:2px;background:var(--teal);flex:none}
.sec.offer .head .eyebrow::before{background:var(--orange)}
.sec.steps-sec .head .eyebrow::before{background:var(--lime)}
.sec.faq-sec .head .eyebrow::before{background:var(--pink)}
.sec .head h2{font-size:clamp(1.7rem,3.2vw,2.4rem);max-width:22ch}
/* ── Contrast: no / yes ──────────────────────────────────────── */
.contrast-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:0;align-items:stretch;
border-radius:var(--r-lg);overflow:hidden}
.nope{list-style:none;margin:0;padding:44px 44px;background:var(--sunk);display:flex;
flex-direction:column;justify-content:center;gap:20px}
.nope li{position:relative;padding-left:34px;font-size:1.05rem;color:var(--ink-faint);
text-decoration:line-through;text-decoration-color:var(--ink-faint);text-decoration-thickness:1.5px}
.nope li::before{content:"";position:absolute;left:0;top:.45em;width:18px;height:3px;
border-radius:2px;background:var(--ink-faint)}
.yep{background:var(--navy);color:var(--paper);padding:44px 48px}
:root[data-theme="dark"] .yep{background:var(--surface);color:var(--ink)}
.yep .t{font-family:'Manrope',sans-serif;font-weight:800;font-size:1.25rem;letter-spacing:-.02em;margin-bottom:24px}
.yep ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.yep li{position:relative;padding-left:36px;font-size:1.06rem;line-height:1.5}
.yep li::before{
content:"";position:absolute;left:0;top:.28em;width:20px;height:20px;border-radius:7px;
background:var(--lime) no-repeat center/11px 9px;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 9'%3E%3Cpath d='M1 4.6L4 7.6 10 1.4' stroke='%231D3967' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
@media (max-width:860px){ .contrast-grid{grid-template-columns:1fr} .nope,.yep{padding:32px 28px} }
/* ── Flow: three steps on a rule ─────────────────────────────── */
.flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.flow li{padding:0 34px 0 0;position:relative}
.flow li + li{padding-left:34px}
.flow li + li::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;background:var(--line)}
.flow .fn{display:block;font-family:'Manrope',sans-serif;font-weight:800;font-size:2.6rem;
line-height:1;letter-spacing:-.04em;color:var(--lime);margin-bottom:18px}
.flow li:nth-child(2) .fn{color:var(--orange)}
.flow li:nth-child(3) .fn{color:var(--teal)}
.flow h3{font-size:1.18rem;margin-bottom:10px}
.flow p{font-size:.98rem;line-height:1.6;color:var(--ink-soft)}
@media (max-width:860px){
.flow{grid-template-columns:1fr;gap:32px}
.flow li,.flow li + li{padding:0}
.flow li + li::before{display:none}
}
/* ── Offer: colour-filled cards, no hairline boxes ───────────── */
.sec.offer{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.offer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card{border-radius:var(--r-lg);padding:34px 30px 32px;background:var(--sunk)}
.card .ic{display:block;margin-bottom:22px;height:44px}
.card h3{font-size:1.1rem;margin-bottom:10px;line-height:1.25}
.card p{font-size:.95rem;line-height:1.6;color:var(--ink-soft)}
/* Solid tints, computed to a common perceived lightness so no card outweighs
another, and strong enough to survive a poorly calibrated panel. The former
13-17% alphas measured only 1.10 against white and disappeared on some
screens; these measure 1.33 while keeping body text at 4.9 contrast. */
.card.c-teal {background:#BFE7E7;border:1px solid rgba(60,181,181,.42)}
.card.c-orange{background:#FCDAB0;border:1px solid rgba(248,153,35,.42)}
.card.c-lime {background:#D6E7A1;border:1px solid rgba(177,209,78,.55)}
.card.c-pink {background:#FBD7DB;border:1px solid rgba(243,134,146,.42)}
:root[data-theme="dark"] .card.c-teal {background:rgba(60,181,181,.16);border-color:rgba(91,203,202,.4)}
:root[data-theme="dark"] .card.c-orange{background:rgba(248,153,35,.16);border-color:rgba(255,173,72,.4)}
:root[data-theme="dark"] .card.c-lime {background:rgba(177,209,78,.16);border-color:rgba(198,223,116,.4)}
:root[data-theme="dark"] .card.c-pink {background:rgba(243,134,146,.16);border-color:rgba(247,157,168,.4)}
@media (max-width:980px){ .offer-grid{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .offer-grid{grid-template-columns:1fr} }
/* ── Team band ───────────────────────────────────────────────── */
.team-band{display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:center;
background:var(--navy);color:var(--paper);border-radius:var(--r-lg);padding:52px 56px}
:root[data-theme="dark"] .team-band{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.team-copy .eyebrow{color:rgba(245,247,251,.62)}
:root[data-theme="dark"] .team-copy .eyebrow{color:var(--ink-faint)}
.team-copy .eyebrow::before{background:var(--yellow)}
.team-copy h2{color:var(--paper);margin-bottom:18px;max-width:20ch}
:root[data-theme="dark"] .team-copy h2{color:var(--ink)}
.team-copy p{color:rgba(245,247,251,.84);font-size:1.04rem;line-height:1.65;max-width:60ch}
:root[data-theme="dark"] .team-copy p{color:var(--ink-soft)}
.team-copy a{color:var(--yellow);text-decoration:underline;text-underline-offset:3px}
.team-copy b{color:var(--paper)}
:root[data-theme="dark"] .team-copy b{color:var(--ink)}
.team-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.team-list li{padding:13px 0;border-bottom:1px solid rgba(245,247,251,.2);font-size:1rem;
display:flex;align-items:center;gap:12px}
.team-list li:last-child{border-bottom:none}
.team-list li::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--teal);flex:none}
.team-list li:nth-child(2)::before{background:var(--orange)}
.team-list li:nth-child(3)::before{background:var(--lime)}
.team-list li:nth-child(4)::before{background:var(--pink)}
.team-list li:nth-child(5)::before{background:var(--yellow)}
:root[data-theme="dark"] .team-list li{border-bottom-color:var(--line)}
@media (max-width:860px){ .team-band{grid-template-columns:1fr;gap:32px;padding:36px 30px} }
/* ── FAQ ─────────────────────────────────────────────────────── */
.faq-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start}
.faq-grid .head{margin-bottom:0}
.faq-body{border-top:2px solid var(--navy)}
.faq-body details{border-bottom:1px solid var(--line)}
.faq-body summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
font-family:'Manrope',sans-serif;font-weight:700;font-size:1.06rem;letter-spacing:-.01em;color:var(--ink)}
.faq-body summary::-webkit-details-marker{display:none}
.faq-body summary:hover{color:var(--teal)}
.faq-body .chev{position:absolute;right:6px;top:50%;width:12px;height:12px;
border-right:2.5px solid var(--teal);border-bottom:2.5px solid var(--teal);
transform:translateY(-70%) rotate(45deg);transition:transform .2s ease}
.faq-body details[open] .chev{transform:translateY(-25%) rotate(-135deg)}
.faq-body p{padding:0 44px 24px 0;color:var(--ink-soft);font-size:1rem;line-height:1.65;max-width:62ch}
@media (max-width:860px){ .faq-grid{grid-template-columns:1fr;gap:30px} }
/* ── Visit ───────────────────────────────────────────────────── */
.sec.visit{padding-bottom:96px}
.visit-card{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;
background:var(--sunk);border-radius:var(--r-lg);padding:52px 56px}
.visit-card h2{font-size:clamp(1.7rem,3.2vw,2.35rem);margin-bottom:16px;max-width:16ch}
.visit-card .lead{color:var(--ink-soft);margin-bottom:30px;max-width:42ch;font-size:1.06rem}
.visit-nap{margin:0;display:flex;flex-direction:column;gap:2px}
.visit-nap > div{padding:15px 0;border-bottom:1px solid var(--line);display:flex;gap:20px;align-items:baseline}
.visit-nap > div:last-child{border-bottom:none}
.visit-nap dt{font-family:'PlexMono',monospace;font-size:10.5px;font-weight:600;letter-spacing:.14em;
text-transform:uppercase;color:var(--ink-faint);width:92px;flex:none}
.visit-nap dd{margin:0;font-size:1.02rem;color:var(--ink)}
@media (max-width:860px){ .visit-card{grid-template-columns:1fr;gap:32px;padding:36px 30px} }
/* ── Homepage polish, from reading the rendered page ──────────── */
/* "140€ τον μήνα" broke over two lines and knocked the row out of line */
.num-row .v{font-size:clamp(1.5rem,2.1vw,2rem);white-space:nowrap}
.num-row li:nth-child(4) .v{font-size:clamp(1.3rem,1.8vw,1.7rem)}
/* the struck-through items were too faint to read at all */
.nope li{color:var(--ink-soft);text-decoration-color:var(--ink-faint)}
.nope{gap:22px}
/* four cards at 1180px left ~28 characters per line; two rows breathe */
.offer-grid{grid-template-columns:repeat(2,1fr);gap:22px}
.card{padding:36px 34px}
.card h3{font-size:1.15rem;max-width:20ch}
.card p{max-width:44ch;font-size:.97rem}
@media (max-width:700px){ .offer-grid{grid-template-columns:1fr} }
/* the outline icons disappeared on the tinted grounds — give them a disc */
.card .ic{display:flex;align-items:center;justify-content:center;width:60px;height:60px;
border-radius:18px;background:var(--surface);margin-bottom:24px}
.card .ic svg{width:32px;height:32px}
.visit-nap dt{color:var(--ink-soft)}
/* ── Inner page hero ──────────────────────────────────────────
Lighter than the homepage hero so the navy stays the one big
moment on the site, but built from the same parts. */
.page-hero{position:relative;background:var(--surface);border-bottom:1px solid var(--line);padding:60px 0 56px}
.page-hero .breadcrumb{font-size:.85rem;color:var(--ink-faint);margin-bottom:20px}
/* The trail is one line. Converting it to blocks left the link inline and the
rest of the trail in a block-level , which pushed it onto a second row. */
.page-hero .breadcrumb{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px}
.page-hero .breadcrumb p{margin:0}
.page-hero .breadcrumb a{color:var(--ink-faint)}
.page-hero .breadcrumb a:hover{color:var(--teal-ink);text-decoration:underline;text-underline-offset:3px}
.page-hero .eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.page-hero .eyebrow::before{content:"";width:26px;height:3px;border-radius:2px;background:var(--teal);flex:none}
.page-hero h1{font-size:clamp(2rem,4.2vw,3.1rem);max-width:18ch;line-height:1.05}
.page-hero .lead{margin-top:20px;max-width:56ch;font-size:1.14rem;line-height:1.6;color:var(--ink-soft)}
/* prose blocks on inner pages.
The 68ch measure is set on the text elements, not on the container: a cap
on .prose itself also squeezed the full-width blocks sharing that flow —
.room-grid was rendering 705px wide inside a 1180px wrap. */
.prose > p,
.prose > ul,
.prose > ol{max-width:68ch}
.prose p{font-size:1.06rem;line-height:1.72;color:var(--ink-soft)}
.prose p + p{margin-top:20px}
.prose h2{margin:52px 0 16px;font-size:clamp(1.5rem,2.8vw,2rem)}
.prose h2:first-child{margin-top:0}
.prose b,.prose strong{color:var(--ink);font-weight:700}
.prose a{color:var(--teal);text-decoration:underline;text-underline-offset:3px}
.split{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start}
@media (max-width:860px){ .split{grid-template-columns:1fr;gap:28px} }
/* a plain definition row used for schedules and details */
.rows{border-top:2px solid var(--navy)}
.rows > div{display:grid;grid-template-columns:190px 1fr;gap:24px;padding:20px 0;border-bottom:1px solid var(--line)}
.rows dt,.rows .k{font-family:'Manrope',sans-serif;font-weight:700;font-size:1rem;color:var(--ink);margin:0}
.rows dd,.rows .v{margin:0;color:var(--ink-soft);font-size:1rem;line-height:1.6}
@media (max-width:700px){ .rows > div{grid-template-columns:1fr;gap:6px} }
/* ── Inner page extras ────────────────────────────────────────── */
.flow.flow-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1080px){ .flow.flow-4{grid-template-columns:1fr 1fr} .flow.flow-4 li:nth-child(odd){padding-left:0} .flow.flow-4 li:nth-child(odd)::before{display:none} }
@media (max-width:700px){ .flow.flow-4{grid-template-columns:1fr} }
.flow.flow-4 li:nth-child(4) .fn{color:var(--pink-num)}
.split .nope{background:none;padding:0;gap:16px}
.faq-wide{max-width:900px;border-top:2px solid var(--navy)}
.faq-wide summary{font-size:1.1rem}
/* contact page */
.contact-page{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start}
@media (max-width:900px){ .contact-page{grid-template-columns:1fr;gap:40px} }
.tel-big{font-size:1.35rem;font-weight:600;color:var(--ink)}
.tel-big:hover{color:var(--teal)}
.note-block{margin-top:32px;background:var(--sunk);border-radius:var(--r-lg);padding:26px 28px}
.note-block p{color:var(--ink-soft);font-size:.97rem;line-height:1.65}
.contact-form-side h2{font-size:1.5rem;margin-bottom:24px}
.contact-form{max-width:none;gap:18px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:560px){ .field-row{grid-template-columns:1fr} }
.contact-form .btn{align-self:flex-start;margin-top:6px}
.contact-form textarea::placeholder{color:var(--ink-faint)}
.page-hero .breadcrumb{margin-bottom:26px}
.page-hero .breadcrumb + .eyebrow{margin-top:-6px}
/* on a phone the trail is orientation, not content: it must not compete
with the H1 it sits above */
@media (max-width:560px){
.page-hero .breadcrumb{font-size:.76rem;letter-spacing:.01em;margin-bottom:14px}
}
.split > :first-child .eyebrow{margin-bottom:14px}
/* narrower label column where the row sits in a side column */
.contact-side .rows > div{grid-template-columns:120px 1fr;gap:18px}
/* "Γιατί να μας επιλέξετε" reuses the rows pattern on a tinted ground */
.sec.why{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec.why .head .eyebrow::before{background:var(--yellow)}
.faq-more{padding-top:22px}
.faq-more a{color:var(--teal);text-decoration:underline;text-underline-offset:3px;font-weight:600}
/* ═══════════════════════════════════════════════════════════════
Motion.
Two rules govern everything below. Nothing moves that would not
move in the real room, and nothing is hidden by CSS that JavaScript
has not first proved it can reveal — a failed script must never
cost the visitor content.
═══════════════════════════════════════════════════════════════ */
/* ── Hero copy enters in sequence ─────────────────────────────── */
/* The message is never withheld for the sake of an entrance. A short lift,
no stagger long enough to leave the headline or the buttons missing. */
.js-motion .hero-copy > *{animation:sr-up .42s cubic-bezier(.2,.8,.2,1) both}
.js-motion .hero-copy > :nth-child(1){animation-delay:0s}
.js-motion .hero-copy > :nth-child(2){animation-delay:.05s}
.js-motion .hero-copy > :nth-child(3){animation-delay:.10s}
.js-motion .hero-copy > :nth-child(4){animation-delay:.15s}
@keyframes sr-up{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
/* ── Scroll reveal, with stagger inside a group ───────────────── */
.js-reveal .rv{opacity:0;transform:translateY(24px);
transition:opacity .65s cubic-bezier(.2,.8,.2,1),transform .65s cubic-bezier(.2,.8,.2,1)}
.js-reveal .rv.in{opacity:1;transform:translateY(0)}
.js-reveal .rv[data-i="1"]{transition-delay:.07s}
.js-reveal .rv[data-i="2"]{transition-delay:.14s}
.js-reveal .rv[data-i="3"]{transition-delay:.21s}
.js-reveal .rv[data-i="4"]{transition-delay:.28s}
.js-reveal .rv[data-i="5"]{transition-delay:.35s}
/* ── Header condenses once you leave the hero ─────────────────── */
header.site{transition:height .25s ease,box-shadow .25s ease,background .25s ease}
header.site .site-inner{transition:height .25s cubic-bezier(.2,.8,.2,1)}
header.site .brand-logo{transition:height .25s cubic-bezier(.2,.8,.2,1)}
header.site.condensed{box-shadow:0 1px 0 var(--line),0 6px 24px rgba(29,57,103,.06)}
header.site.condensed .site-inner{height:70px}
header.site.condensed .brand-logo{height:42px}
:root[data-theme="dark"] header.site.condensed{box-shadow:0 1px 0 var(--line)}
/* ── Micro-interactions ───────────────────────────────────────── */
.card{transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease}
.card:hover{transform:translateY(-5px)}
.card .ic{transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.card:hover .ic{transform:rotate(-6deg) scale(1.06)}
.btn{position:relative;overflow:hidden}
/* Decoration must never be a click target. This overlay covers the whole
button, and on a core Button block .btn sits on the wrapper
, so the
overlay was laid over the
inside it and swallowed every click: both hero
buttons had correct hrefs and neither one worked. */
.btn::after{content:"";position:absolute;inset:0;background:currentColor;opacity:0;transition:opacity .2s ease;pointer-events:none}
.btn:active::after{opacity:.08}
/* On the core Button the press state belongs to the link, which is the element
that is actually pressed, and it inherits the pill radius. */
.wp-block-button.btn::after{display:none}
.wp-block-button.btn .wp-block-button__link{position:relative;overflow:hidden}
.wp-block-button.btn .wp-block-button__link::after{content:"";position:absolute;inset:0;
background:currentColor;opacity:0;transition:opacity .2s ease;pointer-events:none;border-radius:inherit}
.wp-block-button.btn .wp-block-button__link:active::after{opacity:.08}
nav.main a{position:relative}
nav.main a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2.5px;
border-radius:2px;background:var(--teal);transition:right .28s cubic-bezier(.2,.8,.2,1)}
nav.main a:hover{border-bottom-color:transparent}
nav.main a:hover::after{right:0}
.num-row li{transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.num-row li:hover{transform:translateY(-3px)}
.rows > div{transition:background .2s ease}
.rows > div:hover{background:color-mix(in srgb,var(--teal) 5%,transparent)}
.team-list li{transition:padding-left .22s cubic-bezier(.2,.8,.2,1)}
.team-list li:hover{padding-left:8px}
/* ── FAQ opens smoothly instead of snapping ───────────────────── */
.faq-body details{overflow:hidden}
.js-motion .faq-body details[open] > p{
animation:sr-acc .34s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes sr-acc{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.faq-body summary{transition:color .18s ease}
.faq-body .chev{transition:transform .28s cubic-bezier(.34,1.56,.64,1)}
/* ── Counters hold their width so the row never jumps ─────────── */
.num-row .v{display:inline-block;min-width:1ch}
/* ── Honour the visitor's setting, without exception ──────────── */
@media (prefers-reduced-motion:reduce){
.js-motion .scene *,
.js-motion .hero-copy > *{animation:none!important}
.js-reveal .rv{opacity:1!important;transform:none!important;transition:none!important}
.card:hover,.num-row li:hover{transform:none}
.faq-body details > p{animation:none}
}
/* ── Closing CTA carries weight ───────────────────────────────
The page ended on a pale panel barely distinguishable from the
paper behind it. The last thing a visitor sees should be the
strongest invitation on the page, not the faintest. */
.visit-card{background:var(--navy);color:var(--paper);padding:56px 60px}
:root[data-theme="dark"] .visit-card{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.visit-card h2{color:var(--paper)}
:root[data-theme="dark"] .visit-card h2{color:var(--ink)}
.visit-card .lead{color:rgba(245,247,251,.84)}
:root[data-theme="dark"] .visit-card .lead{color:var(--ink-soft)}
.visit-nap > div{border-bottom-color:rgba(245,247,251,.22)}
:root[data-theme="dark"] .visit-nap > div{border-bottom-color:var(--line)}
.visit-nap dt{color:rgba(245,247,251,.62)}
:root[data-theme="dark"] .visit-nap dt{color:var(--ink-faint)}
.visit-nap dd{color:var(--paper)}
:root[data-theme="dark"] .visit-nap dd{color:var(--ink)}
@media (max-width:860px){ .visit-card{padding:38px 30px} }
/* ── Tighter vertical rhythm ──────────────────────────────────
The page ran to 6000px for its content. Sections keep their
breathing room; the surplus air between them goes. */
.sec{padding:72px 0}
.sec .head{margin-bottom:38px}
@media (max-width:760px){ .sec{padding:50px 0} }
/* ── The two halves of the contrast grid now carry equal weight ── */
.nope{padding:44px 40px;gap:18px}
.nope li{font-size:1rem}
.faq-grid .head{max-width:none}
/* ── Photography ──────────────────────────────────────────────
Sized so the strip reads as one band rather than three cards. */
.photo-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:1080px){ .photo-strip{grid-template-columns:1fr 1fr} }
@media (max-width:700px){ .photo-strip{grid-template-columns:1fr} }
.photo-strip figure{margin:0;position:relative}
@media (prefers-reduced-motion:reduce){ .photo-strip figure:hover img{transform:none} }
/* ── Portrait image in a split's label column ─────────────────
These columns held only an eyebrow and a heading, leaving a tall
empty band beside the content. */
.side-photo{margin:26px 0 0;border-radius:var(--r-lg);overflow:hidden;background:var(--sunk)}
.side-photo img{width:100%;height:auto;aspect-ratio:6/7;object-fit:cover;object-position:center 35%;display:block}
@media (max-width:860px){
.side-photo{margin-top:20px;max-width:420px}
.side-photo img{aspect-ratio:4/3}
}
/* ── Photo column ends level with its neighbour ───────────────
A fixed 3:4 image made the label column overshoot the content
beside it by 260px, leaving the photo hanging alone below the
fold of the section. The column now stretches and the image
fills whatever height is left, so both columns end on one line. */
.split:has(.side-photo){align-items:stretch}
.split:has(.side-photo) > :first-child{display:flex;flex-direction:column}
/* capped so a long text column cannot stretch the crop into a sliver */
.split:has(.side-photo) .side-photo{flex:0 1 auto;min-height:300px;margin-bottom:0}
.split:has(.side-photo) .side-photo img{height:auto;aspect-ratio:6/7;object-fit:cover;object-position:center 35%}
@media (max-width:860px){
.split:has(.side-photo){align-items:start}
.split:has(.side-photo) .side-photo{flex:none;min-height:0}
.split:has(.side-photo) .side-photo img{height:auto;aspect-ratio:4/3}
}
/* Core blocks keep the approved front-end classes while making content and
media directly editable in Gutenberg.
Block spacing is set to 0 in theme.json (styles.spacing.blockGap), so
WordPress never injects its default 24px between flow children and every
component keeps the margin it declares for itself. That replaced a blanket
reset here which zeroed the margins too: .ask-card lost its 36px and sat on
the heading above it, .note-block lost its 32px. */
.studyroom-core-layout{max-width:none}
/* The conversion puts .btn on the core Button *wrapper*, so every .btn rule
lands on the as well as on the link inside it. The wrapper has to be
made inert, or its own background paints a square behind the pill on hover
and its overflow:hidden clips the 2px lift off the top of the button. */
.wp-block-button.btn,
.wp-block-button.btn:hover{padding:0;background:none;border:0;border-radius:0;
overflow:visible;transform:none;box-shadow:none}
.wp-block-button.btn .wp-block-button__link{transition:transform .16s ease,background .16s ease,border-color .16s ease}
.wp-block-button.btn:hover .wp-block-button__link,
.wp-block-button.btn .wp-block-button__link:hover{transform:translateY(-2px)}
.wp-block-button.btn.quiet:hover .wp-block-button__link{background:rgba(245,247,251,.12);border-color:var(--on-dark)}
.wp-block-button.btn.ghost:hover .wp-block-button__link{background:var(--navy);color:var(--on-dark)}
.wp-block-button.btn .wp-block-button__link{display:inline-flex;align-items:center;gap:9px;padding:13px 24px;border:2px solid transparent;border-radius:var(--r-pill);background:var(--orange);color:#241203;font-family:'Manrope',sans-serif;font-weight:700;font-size:.95rem;line-height:1.2}
.wp-block-button.btn:hover .wp-block-button__link{transform:translateY(-2px);background:#FFA733}
.wp-block-button.btn.quiet .wp-block-button__link{background:transparent;color:var(--on-dark);border-color:rgba(245,247,251,.42)}
.wp-block-button.btn.ghost .wp-block-button__link{background:transparent;color:var(--ink);border-color:var(--navy)}
/* No grid-template-columns here: .flow already sets three, and repeating it
after .flow-4 meant the four-stage row on Πώς Λειτουργεί was forced back to
three columns and wrapped the fourth onto its own line. */
/* Η αρίθμηση είναι δομή, όχι περιεχόμενο. Ως counter δεν μπορεί να
ξεσυγχρονιστεί αν προστεθεί ή μετακινηθεί βήμα, και φεύγουν τρία Custom HTML
blocks από τον επεξεργαστή. Η διαχωριστική γραμμή μετακινήθηκε στο ::after
για να ελευθερωθεί το ::before· είναι absolutely positioned, οπότε η σειρά
των ψευδοστοιχείων δεν αλλάζει τίποτα οπτικά. */
.flow.core-flow{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:sr-step}
/* Ο counter είναι η μοναδική πηγή του αριθμού. Σελίδες που έχουν ακόμη το παλιό
θα έδειχναν δύο αριθμούς, οπότε το span αποσύρεται εδώ.
Η μη-core εκδοχή (.flow li .fn) δεν επηρεάζεται. */
.flow.core-flow > .core-flow-item .fn{display:none}
.flow.core-flow > .core-flow-item{padding:0 34px 0 0;position:relative;counter-increment:sr-step}
.flow.core-flow > .core-flow-item + .core-flow-item{padding-left:34px}
.flow.core-flow > .core-flow-item + .core-flow-item::after{content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;background:var(--line)}
.flow.core-flow > .core-flow-item::before{
content:counter(sr-step,decimal-leading-zero);
display:block;font-family:'Manrope',sans-serif;font-weight:800;font-size:2.6rem;
line-height:1;letter-spacing:-.04em;color:var(--lime);margin-bottom:18px;
}
.sec.steps-sec .flow.core-flow > .core-flow-item + .core-flow-item::after{background:rgba(245,247,251,.24)}
.photo-strip figure.wp-block-image > a{display:block;border-radius:var(--r-lg);overflow:hidden;background:var(--sunk)}
.photo-strip figure.wp-block-image figcaption{position:absolute;left:20px;bottom:0;margin:0;z-index:2;display:inline-flex;align-items:center;gap:9px;background:var(--navy);color:var(--paper);border-radius:var(--r-pill);padding:11px 20px;font-family:'Manrope',sans-serif;font-weight:700;font-size:.95rem;box-shadow:0 0 0 5px var(--paper)}
/* The caption markup already carries ★, so this
pseudo-element was printing a second star next to it. */
/* The arrow was a "→" text glyph, which rendered far lighter than the drawn
original and, as a pseudo-element with pointer-events:none, could not be
clicked. It is the same stroked path as before, at the same 2.4 weight,
and the figure's own link is stretched underneath so the circle is part
of the target rather than decoration beside it. */
.photo-strip figure.wp-block-image::after{content:"";position:absolute;right:20px;bottom:0;width:52px;height:52px;border-radius:50%;background-color:var(--teal);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12h13M12.5 6l6 6-6 6' stroke='%23241203' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;box-shadow:0 0 0 5px var(--paper);pointer-events:none;transition:transform .22s cubic-bezier(.34,1.56,.64,1)}
.photo-strip figure.wp-block-image:hover::after{transform:scale(1.08)}
/* the image link covers the card, so the arrow and the pill are inside it */
.photo-strip figure.wp-block-image > a{position:static}
.photo-strip figure.wp-block-image > a::after{content:"";position:absolute;inset:0;z-index:3}
.photo-strip figure.wp-block-image.ph-orange::after{background-color:var(--orange)}
.photo-strip figure.wp-block-image.ph-lime::after{background-color:var(--lime)}
@media (max-width:760px){
.flow.core-flow{grid-template-columns:1fr;gap:32px}
.flow.core-flow > .core-flow-item,.flow.core-flow > .core-flow-item + .core-flow-item{padding:0}
.flow.core-flow > .core-flow-item + .core-flow-item::after{display:none}
}
/* ═══════════════════════════════════════════════════════════════
Masthead.
The bar was a white strip sitting awkwardly above a navy hero and
carrying nothing of the brand. It is now navy across every page,
so the top of the site is one confident block, and each nav item
takes its own colour from the wordmark on hover.
═══════════════════════════════════════════════════════════════ */
header.site{background:var(--navy);border-bottom:none}
:root[data-theme="dark"] header.site{background:var(--navy-deep)}
header.site .site-inner{height:88px;gap:36px}
header.site .brand-logo{height:50px}
nav.main ul{gap:30px}
nav.main a{
color:rgba(245,247,251,.82);font-weight:500;font-size:.96rem;
padding:8px 0;border-bottom:none;transition:color .18s ease;
}
nav.main a:hover,nav.main a:focus-visible{color:#FFF}
/* the underline runs out from the left, cycling the logo's palette */
nav.main a::after{
content:"";position:absolute;left:0;right:100%;bottom:0;height:3px;border-radius:2px;
background:var(--teal);transition:right .28s cubic-bezier(.2,.8,.2,1);
}
nav.main li:nth-child(5n+2) a::after{background:var(--orange)}
nav.main li:nth-child(5n+3) a::after{background:var(--lime)}
nav.main li:nth-child(5n+4) a::after{background:var(--pink)}
nav.main li:nth-child(5n+5) a::after{background:var(--yellow)}
nav.main a:hover::after,nav.main a:focus-visible::after{right:0}
/* the page you are on keeps its underline lit */
nav.main .current-menu-item > a::after,
nav.main .current_page_item > a::after,
nav.main .current-menu-ancestor > a::after{right:0}
nav.main .current-menu-item > a,
nav.main .current_page_item > a{color:#FFF}
.phone-link{
display:inline-flex;align-items:center;gap:9px;color:rgba(245,247,251,.86);
font-size:.9rem;font-weight:600;transition:color .18s ease;
}
.phone-link:hover{color:#FFF}
.phone-link .ph-ic{
display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:50%;
background:rgba(245,247,251,.13);transition:background .18s ease;
}
.phone-link:hover .ph-ic{background:rgba(245,247,251,.24)}
/* --paper flips to #0E1729 in the dark theme, so these went dark-on-dark and
vanished. --on-dark is defined once and stays light in both themes, which
is what anything sitting on the navy masthead needs. */
.burger span{background:var(--on-dark)}
/* condensed keeps the block, adds a hairline of brand colour */
header.site.condensed{box-shadow:inset 0 -3px 0 rgba(60,181,181,.55)}
header.site.condensed .site-inner{height:68px}
header.site.condensed .brand-logo{height:40px}
/* the hero now continues straight out of the masthead */
.hero-room{padding-top:64px}
@media (max-width:960px){ .hero-room{padding-top:44px} }
/* inner pages: the navy bar needs a clean landing, not a second edge */
.page-hero{border-top:none}
/* full-screen menu matches the bar it came from */
.mobile-panel{background:var(--navy);color:var(--paper)}
:root[data-theme="dark"] .mobile-panel{background:var(--navy-deep)}
.mobile-panel a{color:var(--paper)}
.mobile-panel .close{color:var(--on-dark)}
.mobile-panel .foot{color:rgba(245,247,251,.62)}
.mobile-panel li:nth-child(5n+1) a{border-left:3px solid var(--teal)}
.mobile-panel li:nth-child(5n+2) a{border-left:3px solid var(--orange)}
.mobile-panel li:nth-child(5n+3) a{border-left:3px solid var(--lime)}
.mobile-panel li:nth-child(5n+4) a{border-left:3px solid var(--pink)}
.mobile-panel li:nth-child(5n+5) a{border-left:3px solid var(--yellow)}
.mobile-panel li a{padding-left:16px;display:block}
@media (max-width:560px){ header.site .site-inner{height:72px} header.site .brand-logo{height:40px} }
/* nav labels are two-word phrases; they must never break across lines */
nav.main a{white-space:nowrap}
nav.main ul{gap:26px;flex-wrap:nowrap}
header.site .site-inner{gap:26px}
@media (max-width:1240px){ nav.main ul{gap:18px} nav.main a{font-size:.92rem} header.site .site-inner{gap:20px} }
@media (max-width:1160px){ .phone-link span.mono{display:none} .phone-link{gap:0} }
/* Below 560px the icon-only phone plus the CTA push the burger 9px past the
header's right padding. The drawer carries the number, so the icon goes.
This must sit after .phone-link's own display rule: same specificity, and
the earlier media query was losing on source order. */
@media (max-width:560px){
header.site .phone-link{display:none}
header.site .head-right{gap:12px}
}
/* The header CTA inherits the page button's 13px/24px padding, which made it
55px tall next to a 50px logo and a 30px phone circle — the loudest thing
in the bar. Sized down so the logo stays the tallest element. */
header.site .head-right .btn{padding:11px 22px;font-size:.9rem;line-height:1.5}
@media (max-width:560px){ header.site .head-right .btn{padding:9px 18px;font-size:.86rem;line-height:1.3} }
/* The nav item is marked by its coloured bar alone. No text underline in any
state — hover, focus or current page — so the two never stack. */
nav.main a,
nav.main a:hover,
nav.main a:focus,
nav.main a:focus-visible,
nav.main .current-menu-item > a,
nav.main .current_page_item > a,
.mobile-panel a,
.mobile-panel a:hover{
text-decoration:none;
border-bottom:0;
}
/* ═══════════════════════════════════════════════════════════════
Accents as text.
The brand colours are fill colours. Used as type they measured
1.6–2.5 against paper, well under the 4.5 small text needs and the
3.0 large text needs. Each therefore has a darkened counterpart
used only for lettering; fills, bars, borders and icons keep the
original hue.
═══════════════════════════════════════════════════════════════ */
:root{
--teal-ink:#257070; --orange-ink:#975605; --lime-ink:#5A6D1C;
--pink-ink:#CA1428; --ochre-ink:#8D5A12;
--teal-num:#349D9D; --orange-num:#D37807; --lime-num:#7D9928; --pink-num:#EF5D6D;
}
/* on dark grounds the bright hues already carry enough light */
:root[data-theme="dark"]{
--teal-ink:var(--teal); --orange-ink:var(--orange); --lime-ink:var(--lime);
--pink-ink:var(--pink); --ochre-ink:var(--ochre);
--teal-num:var(--teal); --orange-num:var(--orange); --lime-num:var(--lime); --pink-num:var(--pink);
}
/* links */
.entry-content a,.prose a,.faq-more a,
.split .prose a,.contact-side a{color:var(--teal-ink)}
/* the four headline figures */
.num-row li:nth-child(1) .v{color:var(--teal-num)}
.num-row li:nth-child(2) .v{color:var(--orange-num)}
.num-row li:nth-child(3) .v{color:var(--lime-num)}
.num-row li:nth-child(4) .v{color:var(--navy)}
/* step numerals */
.flow .fn{color:var(--lime-num)}
.flow.core-flow > .core-flow-item::before{color:var(--lime-num)}
.flow.core-flow > .core-flow-item:nth-child(2)::before{color:var(--orange-num)}
.flow.core-flow > .core-flow-item:nth-child(3)::before{color:var(--teal-num)}
.flow.core-flow > .core-flow-item:nth-child(4)::before{color:var(--pink-num)}
.flow li:nth-child(2) .fn{color:var(--orange-num)}
.flow li:nth-child(3) .fn{color:var(--teal-num)}
.flow li:nth-child(4) .fn{color:var(--pink-num)}
/* editor stat block */
.counters .counter .n{color:var(--teal-num)}
.counters .counter:nth-child(2) .n{color:var(--orange-num)}
.counters .counter:nth-child(3) .n{color:var(--lime-num)}
.counters .counter:nth-child(4) .n{color:var(--pink-num)}
/* section eyebrow bars stay the bright hue — they are shapes, not letters */
/* photo captions sit over an unknown image, so the scrim carries the contrast */
/* Links on dark grounds carry their own scale. The ink variants exist for
light surfaces only and must never reach the navy header, footer or bands.
Each is stated explicitly — inherit would resolve to the body ink and put
navy lettering on a navy ground. */
footer.site ul a,footer.site .foot-bottom a,.mobile-panel a,
.visit-card a:not(.btn),.sibling-card .n{color:var(--paper)}
:root[data-theme="dark"] footer.site ul a,
:root[data-theme="dark"] footer.site .foot-bottom a,
:root[data-theme="dark"] .mobile-panel a,
:root[data-theme="dark"] .visit-card a:not(.btn),
:root[data-theme="dark"] .sibling-card .n{color:var(--ink)}
.team-copy a{color:var(--yellow)}
.btn,.btn:hover,.btn:focus{color:#241203}
.btn.quiet,.btn.quiet:hover{color:var(--on-dark)}
.btn.ghost{color:var(--ink)}
.btn.ghost:hover{color:var(--paper)}
:root[data-theme="dark"] .btn.ghost:hover{color:var(--navy-deep)}
/* ═══════════════════════════════════════════════════════════════
Full-bleed colour section.
Deep teal rather than another navy, so the page has a third
ground instead of repeating the same block. Darkened to #216464,
the lightest teal that still carries paper lettering at 4.5.
═══════════════════════════════════════════════════════════════ */
.sec.steps-sec{background:#216464;color:var(--on-dark);padding:88px 0}
:root[data-theme="dark"] .sec.steps-sec{background:#17494A}
@media (max-width:760px){ .sec.steps-sec{padding:58px 0} }
.sec.steps-sec .head .eyebrow{color:rgba(245,247,251,.84)}
.sec.steps-sec .head .eyebrow::before{background:var(--yellow)}
.sec.steps-sec .head h2{color:var(--on-dark);max-width:24ch}
.sec.steps-sec .flow li + li::before{background:rgba(245,247,251,.24)}
.sec.steps-sec .flow .fn{font-size:3rem;color:var(--yellow)}
.sec.steps-sec .flow li:nth-child(2) .fn{color:var(--lime)}
.sec.steps-sec .flow li:nth-child(3) .fn{color:var(--orange)}
.sec.steps-sec .flow li:nth-child(4) .fn{color:var(--pink)}
/* Το ίδιο για την αριθμημένη εκδοχή με counter: στα βήματα ο αριθμός είναι
3rem και κίτρινος, όχι 2.6rem. Η διαφορά του μεγέθους ήταν τα 7px που
έδειξε η σύγκριση. */
.sec.steps-sec .flow.core-flow > .core-flow-item::before{font-size:3rem;color:var(--yellow)}
.sec.steps-sec .flow.core-flow > .core-flow-item:nth-child(2)::before{color:var(--lime)}
.sec.steps-sec .flow.core-flow > .core-flow-item:nth-child(3)::before{color:var(--orange)}
.sec.steps-sec .flow.core-flow > .core-flow-item:nth-child(4)::before{color:var(--pink)}
.sec.steps-sec .flow h3{color:var(--on-dark);font-size:1.24rem}
.sec.steps-sec .flow p{color:rgba(245,247,251,.84)}
/* ═══════════════════════════════════════════════════════════════
Shape band.
A full-bleed rhythm of the logo's own geometry. Cells are square by
construction — the previous version let flex stretch them to 1.31,
which turned every circle into an ellipse. Most cells morph slowly
between the forms and through the palette, each on its own offset,
so the row is never twice the same.
═══════════════════════════════════════════════════════════════ */
.shape-band{
display:flex;width:100%;overflow:hidden;line-height:0;
background:var(--paper);padding:44px 0;gap:14px;
}
.shape-band.band-white{background:var(--surface)}
.shape-band.band-dark{background:var(--navy)}
:root[data-theme="dark"] .shape-band{background:var(--paper)}
:root[data-theme="dark"] .shape-band.band-white{background:var(--surface)}
@media (max-width:760px){ .shape-band{padding:30px 0} }
.shape-band i{
flex:0 0 auto;width:88px;aspect-ratio:1;display:block;position:relative;
}
@media (max-width:900px){ .shape-band{gap:10px} .shape-band i{width:62px} }
@media (max-width:560px){ .shape-band{gap:8px} .shape-band i{width:46px} }
/* palette slot per cell, and the hue it morphs toward */
.sbc-teal {--sb:var(--teal); --sb2:var(--lime)}
.sbc-yellow{--sb:var(--yellow); --sb2:var(--orange)}
.sbc-orange{--sb:var(--orange); --sb2:var(--pink)}
.sbc-lime {--sb:var(--lime); --sb2:var(--yellow)}
/* pink toward teal crosses the neutral axis and lands on #989EA4, a flat grey.
Every pair now stays on one side of the wheel. */
.sbc-pink {--sb:var(--pink); --sb2:var(--orange)}
/* navy is reserved for the fixed forms; morphing it toward a bright passes
through an olive that belongs to no part of the palette */
.sbc-navy {--sb:var(--navy); --sb2:var(--teal)}
.band-dark .sbc-navy{--sb:var(--teal); --sb2:var(--yellow)}
/* the morphing cell: travels dome → circle → bowl → quarter → dome */
.sb-morph{background:var(--sb);border-radius:100% 100% 0 0}
.sb-morph.sbc-navy{--sb2:var(--navy)}
.js-motion .sb-morph{animation:sb-form 18s ease-in-out infinite, sb-hue 18s ease-in-out infinite}
@keyframes sb-form{
0%,100%{border-radius:100% 100% 0 0}
20% {border-radius:50%}
40% {border-radius:0 0 100% 100%}
60% {border-radius:0 100% 0 0}
80% {border-radius:30%}
}
@keyframes sb-hue{
0%,100%{background-color:var(--sb)}
50% {background-color:var(--sb2)}
}
/* each cell runs at its own offset so the row ripples instead of pulsing */
.shape-band i:nth-child(6n+1){animation-delay:0s, 0s}
.shape-band i:nth-child(6n+2){animation-delay:-3s, -3s}
.shape-band i:nth-child(6n+3){animation-delay:-6s, -6s}
.shape-band i:nth-child(6n+4){animation-delay:-9s, -9s}
.shape-band i:nth-child(6n+5){animation-delay:-12s, -12s}
.shape-band i:nth-child(6n+6){animation-delay:-15s, -15s}
/* fixed forms, kept static so the rhythm stays legible */
.sb-ring::after{
content:"";position:absolute;inset:0;border-radius:50%;
border:14px solid var(--sb);
}
/* the ring keeps its form but breathes and shifts hue with the rest */
.js-motion .sb-ring::after{animation:sb-ring-pulse 18s ease-in-out infinite}
@keyframes sb-ring-pulse{
0%,100%{border-color:var(--sb);transform:scale(1)}
50% {border-color:var(--sb2);transform:scale(.86)}
}
@media (max-width:900px){ .sb-ring::after{border-width:10px} }
@media (max-width:560px){ .sb-ring::after{border-width:8px} }
.sb-roof::after{
content:"";position:absolute;left:0;right:0;bottom:0;height:0;
border-left:44px solid transparent;border-right:44px solid transparent;
border-bottom:64px solid var(--sb);
transform-origin:50% 100%;
}
.js-motion .sb-roof::after{animation:sb-roof-tip 18s ease-in-out infinite}
@keyframes sb-roof-tip{
0%,100%{border-bottom-color:var(--sb);transform:scaleY(1)}
50% {border-bottom-color:var(--sb2);transform:scaleY(.74)}
}
@media (max-width:900px){ .sb-roof::after{border-left-width:31px;border-right-width:31px;border-bottom-width:45px} }
@media (max-width:560px){ .sb-roof::after{border-left-width:23px;border-right-width:23px;border-bottom-width:34px} }
.sb-bar::after{
content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
height:22px;border-radius:11px;background:var(--sb);
}
.js-motion .sb-bar::after{animation:sb-bar-stretch 18s ease-in-out infinite}
@keyframes sb-bar-stretch{
0%,100%{background-color:var(--sb);transform:translateY(-50%) scaleX(1)}
50% {background-color:var(--sb2);transform:translateY(-50%) scaleX(.5)}
}
@media (max-width:900px){ .sb-bar::after{height:16px;border-radius:8px} }
@media (max-width:560px){ .sb-bar::after{height:12px;border-radius:6px} }
/* a still band is still a good band */
@media (prefers-reduced-motion:reduce){
.js-motion .sb-morph{animation:none}
/* frozen, the row still needs variety, so the forms are dealt out by position */
.shape-band i.sb-morph:nth-child(4n+2){border-radius:50%}
.shape-band i.sb-morph:nth-child(4n+3){border-radius:0 0 100% 100%}
.shape-band i.sb-morph:nth-child(4n){border-radius:30%}
}
/* the four reasons sit beside a capped photo; centring the pair reads better
than pinning both to the top and leaving a tail of white under one of them */
.sec.why .split{align-items:center}
@media (max-width:860px){ .sec.why .split{align-items:start} }
/* ── FAQ prompt card ──────────────────────────────────────────
Was a pale grey box with a bare number. Now a navy card that
carries the same weight as the closing CTA, with the phone as a
real button rather than a line of text. The faint grid is drawn
with a gradient, so it costs no request. */
.ask-card{
position:relative;overflow:hidden;margin-top:36px;
background:var(--navy);color:var(--paper);
border-radius:var(--r-lg);padding:30px 32px 32px;
}
:root[data-theme="dark"] .ask-card{background:var(--surface);border:1px solid var(--line);color:var(--ink)}
.ask-card::before{
content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
background-image:
linear-gradient(rgba(245,247,251,.09) 1px,transparent 1px),
linear-gradient(90deg,rgba(245,247,251,.09) 1px,transparent 1px);
background-size:22px 22px;
}
.ask-card::after{
content:"";position:absolute;right:-46px;bottom:-46px;width:128px;height:128px;
border-radius:50%;background:rgba(60,181,181,.16);pointer-events:none;
}
.ask-card > *{position:relative}
.ask-card .t{font-family:'Manrope',sans-serif;font-weight:800;font-size:1.14rem;
letter-spacing:-.015em;margin-bottom:8px}
.ask-card .s{font-size:.94rem;line-height:1.55;color:rgba(245,247,251,.82);margin-bottom:20px;max-width:34ch}
:root[data-theme="dark"] .ask-card .s{color:var(--ink-soft)}
.ask-btn{font-family:'PlexMono',monospace;font-weight:600;letter-spacing:.02em;padding:12px 22px}
.ask-btn .ask-ic{
display:grid;place-items:center;width:26px;height:26px;flex:none;
border-radius:50%;background:rgba(36,18,3,.14);
}
/* the card lives inside .head, whose paragraph colour is meant for light
grounds; state the card's own scale so it cannot be inherited away */
.ask-card .t{color:var(--paper)}
:root[data-theme="dark"] .ask-card .t{color:var(--ink)}
/* ── The middle of three navy blocks turns teal ────────────────
Team band, this card and the closing CTA were all navy in a row.
The deep teal already carries the steps section, so the page now
alternates instead of repeating. */
.ask-card{background:#216464}
:root[data-theme="dark"] .ask-card{background:#17494A;border-color:#2A6A6B}
.ask-card::after{background:rgba(253,201,37,.20)}
/* ── Photo frames ─────────────────────────────────────────────
The label is the badge from the logo — a navy pill with the star —
straddling the foot of the frame. It carries its own ground, so it
reads on any photograph, and nothing has to be cut out of the
picture to make room for it. */
.photo-strip figure{margin:0;position:relative;padding-bottom:26px}
.photo-strip .ph-media{
display:block;border-radius:var(--r-lg);overflow:hidden;background:var(--sunk);
}
.photo-strip img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;
transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.photo-strip figure:hover img{transform:scale(1.04)}
.ph-foot{
position:absolute;left:20px;right:20px;bottom:0;
display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.ph-badge{
display:inline-flex;align-items:center;gap:9px;
background:var(--navy);color:var(--paper);
border-radius:var(--r-pill);padding:11px 20px;
font-family:'Manrope',sans-serif;font-weight:700;font-size:.95rem;letter-spacing:-.005em;
box-shadow:0 0 0 5px var(--surface);
}
.sec.photos .ph-badge{box-shadow:0 0 0 5px var(--paper)}
.ph-star{color:var(--yellow);font-size:.86rem;line-height:1}
/* the pill's --navy ground inverts to near-white in dark mode, where the
yellow star drops to 1.22; the ink-safe ochre holds 4.77 */
:root[data-theme="dark"] .ph-star{color:#8D5A12}
.ph-go{
flex:none;width:52px;height:52px;border-radius:50%;
display:grid;place-items:center;color:#241203;
box-shadow:0 0 0 5px var(--surface);
transition:transform .22s cubic-bezier(.34,1.56,.64,1),filter .18s ease;
}
.sec.photos .ph-go{box-shadow:0 0 0 5px var(--paper)}
.ph-teal .ph-go{background:var(--teal)}
.ph-orange .ph-go{background:var(--orange)}
.ph-lime .ph-go{background:var(--lime)}
.photo-strip figure:hover .ph-go{transform:scale(1.08)}
.ph-go svg{transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.photo-strip figure:hover .ph-go svg{transform:translateX(3px)}
@media (max-width:900px){
.ph-badge{font-size:.88rem;padding:9px 16px}
.ph-go{width:46px;height:46px}
.photo-strip figure{padding-bottom:22px}
}
/* ═══════════════════════════════════════════════════════════════
Hero scene — the real vector mark.
Ink is a variable so the same artwork serves the navy hero and a
light ground. The parts arrive in the order the room would be
built: the house, then the light, then what sits under it.
═══════════════════════════════════════════════════════════════ */
.scene{width:100%;max-width:560px;height:auto}
.scene .h-ink {fill:var(--scene-ink,#1D3967)}
.scene .h-page {fill:var(--scene-ink,#1D3967)}
.scene .h-teal {fill:var(--teal)}
.scene .h-orange{fill:var(--orange)}
.scene .h-lime {fill:var(--lime)}
.scene .h-pink {fill:var(--pink)}
.scene .h-yellow{fill:var(--yellow)}
.scene .h-wood {fill:#F6CAA2}
/* on the navy hero the navy ink would vanish, so it becomes paper */
.hero-room .scene{--scene-ink:#F5F7FB}
/* The room assembles at an unhurried pace: the whole build runs 1.7x longer
than the first pass, ending at about 2.7s. It is ambient, not a gate — the
headline has its own reveal and is fully readable at 0.57s, so a slower
scene never delays what the visitor came to read. Each step still overlaps
the one before it, so the sequence reads as one motion, not a queue. */
.js-motion .scene .s-disc{transform-origin:center;animation:sr-disc 1s cubic-bezier(.2,.8,.2,1) both}
@keyframes sr-disc{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:.13}}
/* the house builds from the ground up */
.js-motion .scene .hs-house{animation:sr-build 1.2s cubic-bezier(.65,0,.35,1) .08s both}
@keyframes sr-build{
from{clip-path:inset(100% 0 0 0)}
to {clip-path:inset(0 0 0 0)}
}
/* the lamp switches on, then throws its rays */
.js-motion .scene .hs-lamp{transform-box:fill-box;transform-origin:center top;
animation:sr-pop .56s cubic-bezier(.34,1.56,.64,1) .88s both}
@keyframes sr-pop{from{transform:scaleY(.3);opacity:0}to{transform:scaleY(1);opacity:1}}
.js-motion .scene .hs-rays{transform-box:fill-box;transform-origin:center top;
animation:sr-rays .6s cubic-bezier(.2,.8,.2,1) 1.26s both}
@keyframes sr-rays{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
/* The book opens from its spine, in a single move.
It once started at scaleX(.08) with opacity .25 — a faint hairline that read
as a rendering fault rather than a closed book. It now holds full opacity and
starts at a width that reads as a spine seen edge-on.
The coloured pages are NOT animated separately: they were, and because they
sit inside this group the two scaleX values multiplied. The eye saw an empty
white outline widen first and the pages grow again inside it — one object
moving twice. The pages belong to the book, so the book moves once. */
.js-motion .scene .hs-book{transform-box:fill-box;transform-origin:center bottom;
animation:sr-open .78s cubic-bezier(.2,.8,.2,1) 1.12s both}
@keyframes sr-open{from{transform:scaleX(.26)}to{transform:scaleX(1)}}
/* the desk objects rise into place */
.js-motion .scene .hs-cup,
.js-motion .scene .hs-stack{transform-box:fill-box;animation:sr-rise .68s cubic-bezier(.2,.8,.2,1) both}
.js-motion .scene .hs-cup {animation-delay:1.36s}
.js-motion .scene .hs-stack{animation-delay:1.46s}
@keyframes sr-rise{from{transform:translateY(34px);opacity:0}to{transform:translateY(0);opacity:1}}
/* and the plant grows out of the stack */
.js-motion .scene .hs-plant{transform-box:fill-box;transform-origin:center bottom;
animation:sr-grow .72s cubic-bezier(.34,1.56,.64,1) 1.66s both}
@keyframes sr-grow{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}
/* stars arrive last and keep a slow twinkle */
.js-motion .scene .s-star{transform-box:fill-box;transform-origin:center;
animation:sr-star .7s cubic-bezier(.34,1.56,.64,1) both, sr-twinkle 5.6s ease-in-out infinite}
.js-motion .scene .s-star-1{animation-delay:1.8s, 2.9s}
.js-motion .scene .s-star-2{animation-delay:1.92s, 3.6s}
.js-motion .scene .s-star-3{animation-delay:2.04s, 4.3s}
@keyframes sr-star{from{transform:scale(0) rotate(-40deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}
@keyframes sr-twinkle{0%,100%{opacity:1}50%{opacity:.45}}
/* ═══════════════════════════════════════════════════════════════
Footer.
Given the same care as the page above it: the shape band carries
the eye across the seam, the brand block leads with the promise
and the phone, and the practical facts are stated rather than
left for the visitor to hunt.
═══════════════════════════════════════════════════════════════ */
footer.site{background:var(--navy);color:var(--paper);padding:64px 0 26px}
:root[data-theme="dark"] footer.site{background:var(--navy-deep);color:var(--ink)}
.foot-top{display:grid;grid-template-columns:1.5fr 1fr 1.15fr 1.25fr;gap:48px;padding-bottom:44px}
@media (max-width:1080px){ .foot-top{grid-template-columns:1fr 1fr;gap:40px} }
@media (max-width:620px){ .foot-top{grid-template-columns:1fr;gap:34px} }
footer.site .brand-logo{height:56px;margin-bottom:20px}
.foot-claim{font-family:'Manrope',sans-serif;font-weight:800;font-size:1.18rem;
letter-spacing:-.02em;color:var(--paper);margin-bottom:10px}
:root[data-theme="dark"] .foot-claim{color:var(--ink)}
.foot-about{font-size:.95rem;line-height:1.6;color:rgba(245,247,251,.78);max-width:32ch;margin-bottom:22px}
:root[data-theme="dark"] .foot-about{color:var(--ink-soft)}
/* One definition, two homes: the footer and the foot of the mobile panel.
On a phone the number is the primary action, so it gets the button rather
than a line of grey text. */
.foot-call,
.mobile-panel .foot .mp-tel{
display:inline-flex;align-items:center;gap:11px;
background:var(--orange);color:#241203;border-radius:var(--r-pill);
padding:12px 22px;font-family:'PlexMono',monospace;font-weight:600;font-size:.98rem;
transition:transform .16s ease,background .16s ease;
}
.foot-call:hover,
.mobile-panel .foot .mp-tel:hover{background:#FFA733;transform:translateY(-2px);text-decoration:none}
.foot-call .fc-ic,
.mobile-panel .foot .fc-ic{display:grid;place-items:center;width:26px;height:26px;flex:none;
border-radius:50%;background:rgba(36,18,3,.14)}
/* The address sits under the phone button as plain text: calling is the
primary action, writing is the quiet alternative. */
.foot-mail{display:block;width:fit-content;margin-top:14px;font-family:'PlexMono',monospace;font-size:.95rem;opacity:.86}
.visit-nap dd a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.visit-nap dd a:hover{text-decoration-thickness:2px}
footer.site h5,footer.site .foot-h{line-height:1.15;font-family:'PlexMono',monospace;font-size:10.5px;font-weight:600;
letter-spacing:.14em;text-transform:uppercase;opacity:.62;margin-bottom:16px}
footer.site ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
footer.site ul a{font-size:.97rem;opacity:.86;transition:opacity .15s ease,padding-left .18s ease}
footer.site ul a:hover{opacity:1;padding-left:5px;text-decoration:none}
.foot-facts{margin:0;display:flex;flex-direction:column;gap:16px}
.foot-facts > div{display:flex;flex-direction:column;gap:3px}
.foot-facts dt{font-family:'PlexMono',monospace;font-size:10px;font-weight:600;
letter-spacing:.12em;text-transform:uppercase;color:rgba(245,247,251,.58)}
:root[data-theme="dark"] .foot-facts dt{color:var(--ink-faint)}
.foot-facts dd{margin:0;font-size:.96rem;line-height:1.5;color:rgba(245,247,251,.9)}
:root[data-theme="dark"] .foot-facts dd{color:var(--ink)}
/* The legal strip lives in the bottom bar now, so it reads as a row rather
than the stacked column `footer.site ul` gives the nav columns above, and it
takes the bar's hover rather than the nav's slide. */
.foot-bottom .foot-legal{flex-direction:row;gap:18px;align-items:center}
.foot-bottom .foot-legal a{font-size:.86rem;opacity:.8}
.foot-bottom .foot-legal a:hover{opacity:1;padding-left:0;
text-decoration:underline;text-underline-offset:3px}
.foot-bottom{border-top:1px solid rgba(245,247,251,.16);padding-top:22px;
display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:center;
font-size:.86rem;color:rgba(245,247,251,.7)}
:root[data-theme="dark"] .foot-bottom{border-top-color:var(--line);color:var(--ink-soft)}
.foot-bottom .l{display:flex;gap:18px;align-items:center}
.foot-bottom a{opacity:.8}
.foot-bottom a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}
/* ── Footer on small screens ───────────────────────────────────
Measured at 375px: the footer ran 1317px against an 812px viewport,
so the visitor scrolled 1.6 screens of nothing but footer. Both lists
were one item per row while half the width sat empty. Two columns each,
with the address spanning because it is the one long line.
auto-fit rather than a fixed pair: below ~360px two columns squeezed
the opening hours onto three lines and split "Πολιτική Απορρήτου" in
half, so the grid drops to one column on its own rather than needing
yet another breakpoint. */
@media (max-width:620px){
footer.site{padding:48px 0 22px}
.foot-top{gap:28px;padding-bottom:30px}
footer.site .brand-logo{height:48px;margin-bottom:16px}
.foot-about{margin-bottom:18px}
footer.site h5,footer.site .foot-h{margin-bottom:12px}
footer.site nav.foot-col ul{display:grid;gap:15px 18px;
grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
/* The slide-on-hover would shift a grid cell, so it goes on touch. */
footer.site nav.foot-col ul a:hover{padding-left:0}
/* The facts stay in one column. Two saved 14px but forced
"Δευτέρα έως Παρασκευή, από τις 13:00" onto three ragged lines in a
158px cell; full width it sits on one. */
.foot-facts{gap:15px}
.sibling-card{padding:20px 22px}
.foot-bottom{padding-top:18px}
}
/* ── Cookie consent bar ────────────────────────────────────────
Sits at the foot of the viewport, above everything, and never covers the
whole screen: a notice, not a wall. */
.cc-bar{position:fixed;left:0;right:0;bottom:0;z-index:200;
background:var(--navy);color:var(--on-dark);
box-shadow:0 -10px 30px rgba(15,28,52,.18)}
:root[data-theme="dark"] .cc-bar{background:var(--navy-deep);border-top:1px solid var(--line)}
.cc-bar[hidden],.cc-bar.is-hidden{display:none}
.cc-inner{max-width:var(--maxw);margin-inline:auto;padding:18px var(--gutter);
display:flex;align-items:center;gap:26px;flex-wrap:wrap;justify-content:space-between}
.cc-text{margin:0;font-size:.92rem;line-height:1.55;max-width:64ch;color:rgba(245,247,251,.88)}
:root[data-theme="dark"] .cc-text{color:var(--ink-soft)}
.cc-text a{color:var(--on-dark);text-decoration:underline;text-underline-offset:3px}
.cc-actions{display:flex;gap:12px;flex:none}
.cc-bar .btn{padding:11px 22px;font-size:.9rem}
.foot-bottom a.cc-reopen{cursor:pointer}
@media (max-width:640px){
.cc-inner{gap:14px;padding:16px var(--gutter)}
.cc-actions{width:100%}
.cc-actions .btn{flex:1;justify-content:center}
}
/* On a phone the bar cannot hold three links and the toggle on one line: the
links were stacking one per line with the button floating beside the middle
one. Each part gets its own row instead, left-aligned with the copyright. */
@media (max-width:560px){
/* Two changes here. .l was a column, so the legal list, the cookie link and
the theme toggle each claimed a whole row — the bar ran 136px for five
small links. And the copyright sat first, which buried the studio credit
in the middle of the block; column-reverse puts the links up top and ends
the page on the credit. Cookies now lives inside the legal list, so that
list is an even four and aligns instead of leaving an orphan cell. */
.foot-bottom{flex-direction:column-reverse;align-items:flex-start;gap:15px}
.foot-bottom .l{flex-direction:row;flex-wrap:wrap;align-items:center;gap:13px 18px;width:100%}
.foot-bottom .foot-legal{width:100%;display:grid;gap:13px 18px;
grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
}
/* the band above the footer takes the navy ground */
.shape-band.band-dark{background:var(--navy);padding:38px 0}
:root[data-theme="dark"] .shape-band.band-dark{background:var(--navy-deep)}
/* ── The wordmark's three strokes, used as a corner accent ─────
Sparingly: it is the brand's smallest signature, so it marks a
moment rather than decorating every surface. */
.spark{display:block;pointer-events:none}
/* An svg clips to its viewBox by default, and the strokes grow past it while
they animate — they were being shaved along the top edge. Nothing above
this element clips, since the mark is meant to overhang the card. */
.spark svg{width:100%;height:auto;display:block;overflow:visible}
.visit-card{position:relative}
/* The SVG origin is the centre of the card's corner radius, so pulling the
56px box back by (56 - radius) on both axes lands that origin exactly on
the corner's centre and the strokes fan along its radii. */
.spark-card{position:absolute;width:70px;
top:calc(var(--r-lg) - 70px);right:calc(var(--r-lg) - 70px)}
.hero-art{position:relative}
/* a slow flicker, like the light in the mark catching */
/* The strokes lengthen and retract along their own radii, one after the other,
so the pulse travels around the corner. Scaling about the fan's apex — the
corner-radius centre, which is the SVG origin — is what makes them grow
outward rather than swell in place. A fade was the first attempt and read as
the mark switching itself off. */
.js-motion .spark svg path{
transform-box:view-box;transform-origin:0 70px;
animation:sp-reach 3.6s cubic-bezier(.45,0,.55,1) infinite;
}
.js-motion .spark svg path:nth-child(2){animation-delay:.2s}
.js-motion .spark svg path:nth-child(3){animation-delay:.4s}
@keyframes sp-reach{0%,100%{transform:scale(1)}42%{transform:scale(1.16)}}
/* The mark lives in the 30px of gutter outside the card's corner. Until the
wrap reaches its 1180px max-width that gutter is only the 15px of page
padding, so the mark would hang past the viewport and raise a horizontal
scrollbar. It appears only once there is room for it. */
@media (max-width:1279px){ .spark-card{display:none} }